set up minimap class

Author: hmsklee

css/style.css

@@ -29,23 +29,6 @@ svg text {
   margin-bottom: 210px;
 }
 
-button {
-  position:absolute;
-  background:white;
-  border:none;
-  outline:none;
-  cursor:pointer;
-}
-
-.node { cursor: pointer; }
-.link, .link--dashed {
-  fill: none;
-  stroke: #999;
-}
-.link--dashed {
-  stroke-dasharray: 2,2;
-}
-
 #graph {
   cursor:-webkit-grab;
   cursor:grab;
@@ -70,11 +53,42 @@ button {
   display:block;
 }
 
+#toggle-minimap {
+  display:block;
+  cursor:pointer;
+}
+#minimap {
+  pointer-events:none;
+  position:fixed;
+  z-index:100;
+  top:40px;
+  right:0;
+}
+#minimap * {
+  pointer-events: all;
+}
+
+#minimap canvas {
+  background:rgba(200,200,200,0.5);
+  margin-top:5px;
+  width:100px;
+  height:100px;  
+}
+
 /* svg classes */
 #drawing text, .link--labels text {
   pointer-events: none;
 }
 
+.node { cursor: pointer; }
+.link, .link--dashed {
+  fill: none;
+  stroke: #999;
+}
+.link--dashed {
+  stroke-dasharray: 2,2;
+}
+
 .row--0, .link--label {
   fill: #f6f6f6;
 }

index.html

@@ -15,6 +15,17 @@
     <option>paragraph</option>
     <option>passage</option>
   </select>
+
+  <div id="collapse" style="display:inline; float:right;">
+    <button>[</button>
+    <button>]</button>
+  </div>
+</div>
+
+<div id="minimap">
+  <a id="toggle-minimap">hide>></a>
+  <canvas>
+  </canvas>
 </div>
 
 <div id="drawing">
@@ -42,6 +53,7 @@
 <script src="js/render.js"></script>
 <script src="js/interact.js"></script>
 <script src="js/utils.js"></script>
+<script src="js/minimap.js"></script>
 
 <script type="text/javascript">
 /* a lot of these global vars should be wrapped eventually */
@@ -68,8 +80,6 @@
 // 1. create Words and Links objects (in utils.js) */
 var wordObjs = createTestWords(4, 10, 10);
 
-//var linkObjs = createTestLinks(3,3,3); 
-//var linkObjs = createTestLinks(1,0,0); 
 var linkObjs = createTestMultiLinks(1); 
 
 drawWords(wordObjs);
@@ -79,6 +89,8 @@
 
 window.onload = function() {
 
+  const minimap = new Minimap();
+
   const panel = new Panel('graph', 'drawing');
   const graph = new GraphLayout(panel.el);
   panel.onresize = graph.resize.bind(graph);

js/GraphLayout.js

@@ -195,10 +195,10 @@ const GraphLayout = (function() {
                 node.y += dy;
             });
 
-            console.log('----- range',d3.extent(this.data[index].root.descendants(), d => d.x));
+/*            console.log('----- range',d3.extent(this.data[index].root.descendants(), d => d.x));
             console.log('graft range',d3.extent(root.descendants(), d => d.x));
             console.log(data.anchor.x, dx);
-
+*/
             // -------- in progress
             // test case : Pos_reg         --> graft "outside"
             // test case : Promotes        --> graft "inside"
@@ -324,7 +324,6 @@ const GraphLayout = (function() {
             function handleNodeClick(d) {
                 unhoverNode(d);
                 let word = this.words.splice(i, 1, d.node)[0];
-                console.log('click', d, word);
                 if (this.words.indexOf(word) < 0) {
                     word.toggleHighlight(false);
                 }

js/minimap.js

@@ -0,0 +1,81 @@
+const Minimap = (function() {
+
+    let show = true;
+    let singleton = false;
+    let view;
+    let ctx;
+    let h;
+    let w;
+
+    const ROW_HEIGHT = 15;
+    const COLOR = {
+        word: '#888',
+        untagged: '#aaa',
+        selected: 'crimson',
+        link: 'blue'
+    }
+
+    wordColor = '#888';
+
+
+    function update() {
+        const ROW_WIDTH = Config.svgWidth;
+        const r = w / ROW_WIDTH;
+
+        ctx.clearRect(0,0,w,h);
+
+        rows.forEach(function(row, i) {
+            row.words.forEach(function(word) {
+                ctx.fillStyle = word.tag ? COLOR.word : COLOR.untagged;
+                if (word.isSelected) {
+                    ctx.fillStyle = COLOR.selected;
+                }
+                ctx.fillRect(word.leftX * r, i * ROW_HEIGHT * 1.3, word.underneathRect.width() * r, ROW_HEIGHT);
+            });
+        });
+
+        linkObjs.forEach(function(link) {
+            let minRow = link.rootMinWord.row.idx;
+            let maxRow = link.rootMaxWord.row.idx;
+
+            let width = maxRow > minRow ? ROW_WIDTH : link.linesRightX[0] - link.linesLeftX[0];
+
+            ctx.fillStyle = link.isSelected ? COLOR.selected : COLOR.link;
+            ctx.fillRect(link.linesLeftX[0] * r, minRow * ROW_HEIGHT * 1.3, width * r, ROW_HEIGHT * 0.2);
+
+            if (maxRow > minRow) {
+                for (let i = minRow + 1; i < maxRow; ++i) {
+                    ctx.fillRect(0, i * ROW_HEIGHT * 1.3, ROW_WIDTH * r, ROW_HEIGHT * 0.2);
+                }
+                ctx.fillRect(0, maxRow * ROW_HEIGHT * 1.3, link.linesRightX[link.linesRightX.length - 1] * r, ROW_HEIGHT * 0.2);
+            }
+        });
+
+        window.requestAnimationFrame(update);
+    }
+
+    class Minimap {
+        constructor() {
+            if (singleton === false) {
+                singleton = true;
+
+                view = document.querySelector('#minimap canvas');
+                let toggle = document.getElementById('toggle-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';
+                };
+
+                h = view.getBoundingClientRect().height;
+                w = view.getBoundingClientRect().width * 3;
+                ctx = view.getContext('2d');
+                update();
+            }
+        }
+    }
+
+    return Minimap;
+})();