swipe minimap to scroll page

Author: hmsklee

css/style.css

@@ -79,6 +79,16 @@ svg text {
   height:100px;  
 }
 
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
 /* svg classes */
 #drawing text, .link--labels text {
   pointer-events: none;

index.html

@@ -22,7 +22,7 @@
   </div>
 </div>
 
-<div id="minimap">
+<div id="minimap" class="noselect">
   <a id="toggle-minimap">hide>></a>
   <canvas>
   </canvas>

js/GraphLayout.js

@@ -79,6 +79,7 @@ const GraphLayout = (function() {
 
             d3.select(this.div).append('button')
                 .text('⤆ reset ⤇')
+                .attr('class', 'noselect')
                 .on('click', () => {
                     this.dx = 0;
                     this.adjustMargins();

js/minimap.js

@@ -14,7 +14,7 @@ const Minimap = (function() {
         word: '#888',
         untagged: '#aaa',
         selected: 'crimson',
-        link: 'blue'
+        link: 'cyan'
     }
 
     function update() {
@@ -46,6 +46,7 @@ const Minimap = (function() {
 
         });
 
+        // draw links
         ctx.globalAlpha = 0.75;
         linkObjs.forEach(function(link) {
             let minRow = link.rootMinWord.row.idx;
@@ -55,6 +56,7 @@ const Minimap = (function() {
 
             let y = (slots[minRow - 1] || 0) + rows[minRow].maxSlots - link.h;
 
+            // choose color
             ctx.fillStyle = COLOR.link;
 
             if (!link.isSelected && link.style) {
@@ -71,6 +73,7 @@ const Minimap = (function() {
             }
             ctx.fillRect(link.linesLeftX[0] * r, y * RECT_HEIGHT + minRow * PADDING, width * r, RECT_HEIGHT);
 
+            // draw links spanning multiple rows
             if (maxRow > minRow) {
                 for (let i = minRow + 1; i < maxRow; ++i) {
                     y = slots[i - 1] + rows[i].maxSlots - link.h;
@@ -82,12 +85,30 @@ const Minimap = (function() {
             }
         });
 
+        // translate canvas contents according to scroll position
         dy = (slots[scrollIndex - 1] || 0) * RECT_HEIGHT + scrollIndex * PADDING;
         ctx.setTransform( 1, 0, 0, 1, 0, -dy );
 
         window.requestAnimationFrame(update);
     }
 
+    // drag events
+    let drag = 0;
+    let mousedown = false;
+    function onmousedown(e) {
+        drag = e.y;
+        mousedown = true;
+    }
+    function onmousemove(e) {
+        if (mousedown) {
+            document.body.scrollTop += (e.y - drag) * window.innerHeight / h;
+            drag = e.y;
+        }
+    }
+    function onmouseup() {
+        mousedown = false;
+    }
+
     class Minimap {
         constructor() {
             if (singleton === false) {
@@ -96,13 +117,20 @@ const Minimap = (function() {
                 view = document.querySelector('#minimap canvas');
                 let toggle = document.getElementById('toggle-minimap');
 
+                // show / hide minimap
                 toggle.onclick = function() {
                     show = !show;
                     this.style.textAlign = show ? 'left' : 'right';
                     this.innerHTML = show ? 'hide>>' : '&lt;&lt;minimap';
                     view.style.visibility = show ? 'visible' : 'hidden';
                 };
 
+                // swipe minimap to scroll page
+                view.onmousedown = onmousedown;
+                document.addEventListener('mousemove', onmousemove);
+                document.addEventListener('mouseup', onmouseup);
+                document.addEventListener('mouseleave', onmouseup);
+
                 h = view.height;
                 w = view.width;
                 ctx = view.getContext('2d');