constrain arrows to tag width, fix some resizing issues

Author: hmsklee

index.html

@@ -17,6 +17,7 @@
     <option>passage1</option>
     <option>passage2</option>
   </select>
+  <button id="syntax-toggle">Hide syntax</button>
   <button id="taxonomy-toggle">Taxonomy ▾</button>
 </header>
 

js/components/link.js

@@ -107,8 +107,35 @@ class Link {
             let dx = e.detail.p.x - x;
             x = e.detail.p.x;
             draggedHandle.offset += dx;
+            let anchor = draggedHandle.anchor;
+            if (anchor instanceof Link) {
+              if (anchor.trigger) {
+                if (anchor.trigger.idx > anchor.endpoints[0].idx) {
+                  console.log('hey');
+                }
+              }
+
+              // let l = draggedHandle.anchor;
+              // let boundaries = l.handles
+              //   // .filter(h => !l.trigger || h.anchor.row === l.trigger.row)
+              //   .map(h => h.x);
+              // if (l.trigger) { console.log(l.trigger.row); }
+              // console.log(boundaries);
+              // // console.log(draggedHandle.anchor.cx, draggedHandle.anchor.endpoints);
+            }
+            else {
+              let halfWidth = anchor.boxWidth / 2;
+              if (this.top && anchor.tag instanceof WordTag) {
+                halfWidth = anchor.tag.ww / 2;
+              }
+              else if (!this.top && anchor.syntaxTag instanceof WordTag) {
+                halfWidth = anchor.syntaxTag.ww / 2;
+              }
+              draggedHandle.offset = draggedHandle.offset < 0
+               ? Math.max(-halfWidth + 3, draggedHandle.offset)
+               : Math.min(halfWidth - 3, draggedHandle.offset);
+            }
             this.draw(draggedHandle.anchor);
-            // console.log(dx, x, draggedHandle );
           }
         })
         .on('dragend', () => { draggedHandle = null });
@@ -230,11 +257,18 @@ class Link {
 
             if (handlePrecedesTrigger) {
               // draw trigger to the right of the arrow segment
-              d += 'L' + [this.handles[0].x - dx, y]
-                + 'c' + [dx, 0, dx, 0, dx, this.handles[0].y - y];
               if (i + 1 < il) {
+                d += 'L' + [this.handles[0].x - dx, y]
+                  + 'c' + [dx, 0, dx, 0, dx, this.handles[0].y - y]
+                  + 'm' + [dx, 0]
+                  + 'l' + [-2 * dx, 0]
+                  + 'm' + [dx, 0]
+                  + 'C' + [this.handles[0].x, y, this.handles[0].x, y, this.handles[0].x + dx, y];
                 rowCrossed = this.handles[i + 2].anchor.row.idx != this.handles[0].anchor.row.idx;
-                d += 'C' + [this.handles[0].x, y, this.handles[0].x, y, this.handles[0].x + dx, y];
+              }
+              else {
+                d += 'L' + [this.handles[0].x - dx, y]
+                  + 'c' + [dx, 0, dx, 0, dx, this.handles[0].y - y];
               }
             }
           }
@@ -409,6 +443,14 @@ class Link {
     }
 
     get cx() {
+      if (this.line) {
+        if (this.trigger) {
+          return this.trigger.cx + this.handles[0].offset;
+        }
+        else {
+          // FIXME: does not occur currently
+        }
+      }
       return this.rootWord.cx;
     }
 

js/main.js

@@ -49,14 +49,27 @@ const Main = (function() {
     // resize function
     window.onresize = function() {
       body = document.body.getBoundingClientRect();
+      links.forEach(l => l.hide());
       svg.width(body.width);
       rm.width(body.width);
+      links.forEach(l => l.show());
     }
     document.getElementById('dataset').onchange = function(e) {
       if (this.selectedIndex > 0) {
         changeDataset(this.selectedIndex);
       }
     }
+
+    // let showSyntax = true;
+    // document.getElementById('syntax-toggle').onclick = function() {
+    //   showSyntax = !showSyntax;
+    //   this.innerHTML = showSyntax ? 'Hide syntax' : 'Show syntax';
+    //   links.forEach(l => {
+    //     if (!l.top) {
+    //       showSyntax ? l.show() : l.hide();
+    //     }
+    //   });
+    // }
     document.getElementById('taxonomy-toggle').onclick = function() {
       document.getElementById('taxonomy').classList.add('open');
     }

js/managers/rowmanager.js

@@ -16,6 +16,11 @@ const RowManager = (function() {
 
     resizeRow(i, dy = 0) {
       let row = _rows[i];
+      if (i > 0) {
+        let adjust = _rows[i - 1].ry2 + ROW_PADDING - row.ry;
+        row.move(row.ry + adjust);
+        row.height(row.rh - adjust);
+      }
       dy = Math.max(-row.rh + row.minHeight, dy);
       row.height(row.rh + dy);
       row.words.forEach(word => word.redrawLinks());
@@ -32,8 +37,23 @@ const RowManager = (function() {
     }
 
     width(rw) {
-      _rows.forEach(function(row) {
+      _rows.forEach(row => {
         row.width(rw);
+
+        let i = row.words.findIndex(w => w.x > rw);
+        if (i > 0) {
+          this.moveWordOnRow(row.words[i - 1], 0);
+        }
+        else {
+          row.words.forEach(word => {
+            word.links.forEach(function(l) {
+              if (l.endpoints[1].row !== l.endpoints[0].row) {
+                l.draw(this);
+              }
+            });
+            word.redrawClusters();
+          });
+        }
       });
     }