add links to minimap

Author: hmsklee

js/minimap.js

@@ -7,47 +7,73 @@ const Minimap = (function() {
     let h;
     let w;
 
-    const ROW_HEIGHT = 15;
+    const RECT_HEIGHT = 3;
+    const PADDING = 3;
     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);
-
+        ctx.globalAlpha = 1;
+        
+        // draw word
+        let slots = [];
         rows.forEach(function(row, i) {
+            slots[i] = (slots[i - 1] || 0) + row.maxSlots + 1;
+
             row.words.forEach(function(word) {
+                // choose color
                 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);
+
+                // add word rectangle
+                ctx.fillRect(word.underneathRect.x() * r, (slots[i] - 1) * RECT_HEIGHT + i * PADDING, word.underneathRect.width() * r,RECT_HEIGHT + PADDING / 3);
             });
+
         });
 
+        ctx.globalAlpha = 0.75;
         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];
+            let width = maxRow > minRow ? ROW_WIDTH : link.linesRightX[link.linesRightX.length - 1] - 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);
+            let y = (slots[minRow - 1] || 0) + rows[minRow].maxSlots - link.h;
+
+            ctx.fillStyle = COLOR.link;
+
+            if (!link.isSelected && link.style) {
+                if (link.style.stroke instanceof LinearGradient) {
+                    let x = (maxRow > minRow) ? 0 : link.linesLeftX[0];
+                    let gradient = ctx.createLinearGradient(x * r,0,width * r,0);
+                    gradient.addColorStop(0, link.style.stroke.c1);
+                    gradient.addColorStop(1, link.style.stroke.c2);
+                    ctx.fillStyle = gradient;
+                }
+                else {
+                    ctx.fillStyle = link.style.stroke;
+                }
+            }
+            ctx.fillRect(link.linesLeftX[0] * r, y * RECT_HEIGHT + minRow * PADDING, width * r, RECT_HEIGHT);
 
             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);
+                    y = slots[i - 1] + rows[i].maxSlots - link.h;
+                    ctx.fillRect(0, y * RECT_HEIGHT + i * PADDING, width * r, RECT_HEIGHT);
                 }
-                ctx.fillRect(0, maxRow * ROW_HEIGHT * 1.3, link.linesRightX[link.linesRightX.length - 1] * r, ROW_HEIGHT * 0.2);
+
+                y = slots[maxRow - 1] + rows[maxRow].maxSlots - link.h;
+                ctx.fillRect(0, y * RECT_HEIGHT + maxRow * PADDING, link.linesRightX[link.linesRightX.length - 1] * r, RECT_HEIGHT);
             }
         });
 
@@ -69,8 +95,8 @@ const Minimap = (function() {
                     view.style.visibility = show ? 'visible' : 'hidden';
                 };
 
-                h = view.getBoundingClientRect().height;
-                w = view.getBoundingClientRect().width * 3;
+                h = view.height;
+                w = view.width;
                 ctx = view.getContext('2d');
                 update();
             }