fix(?) arrow constraint issue

Author: hmsklee

css/style.css

@@ -178,6 +178,30 @@ header > button:hover {
   opacity:0.5;
 }
 
+body > #tree-svg {
+  box-shadow: 0 0 1em #aaa;
+  background:hsl(5,5%,98%);
+  position:fixed;
+  bottom:0;
+  font-size:14px;
+  height:250px;
+  max-height:40vh;
+}
+body > #tree-svg.hidden {
+  display:none;
+}
+body > #tree-svg #tree-close {
+  display:inline-block;
+}
+#tree-close {
+  display:none;
+}
+#tree-popout, #tree-close {
+  font-size: 0.9em;
+  text-decoration: underline;
+  cursor: pointer;
+  fill: steelblue;
+}
 
 #tooltip {
   width:175px;

index.html

@@ -36,12 +36,12 @@
     </header>
     <div class="page active" id="taxonomy"></div>
     <div class="page" id="tree">
-      <svg>
     </div>
     <div class="page" id="graph"></div>
     <div class="page" id="options">
       <p><input type="checkbox" data-option="syntax"> Show syntax tree</p>
       <p><input type="checkbox" data-option="links"> Show links when moving words</p>
+      <p><input type="checkbox" data-option="tree"> Open tree view in modal</p>
     </div>
   </div>
 </div>

js/components/link.js

@@ -79,6 +79,7 @@ class Link {
           svg.fire('link-label-right-click', { object: this, type: 'text', event: e });
         };
         text.click((e) => svg.fire('link-label-edit', { object: this, text, event: e }));
+        text.dblclick((e) => svg.fire('build-tree', { object: this, event: e }));
       });
 
       this.line = this.svg.path()
@@ -116,10 +117,17 @@ class Link {
             draggedHandle.offset += dx;
             let anchor = draggedHandle.anchor;
             if (anchor instanceof Link) {
-              let handles = anchor.handles.map(h => h.x).sort();
+              let handles = anchor.handles
+                .filter(h => h.anchor.row.idx === anchor.handles[0].anchor.row.idx)
+                .sort((a,b) => a.x - b.x);
+
+              let min = handles[0].x;
+              let max = handles[handles.length - 1].x;
+              if (handles.length < anchor.handles.length) {
+                max = this.mainSVG.width();
+              }
               let cx = draggedHandle.anchor.cx;
-
-              draggedHandle.offset = Math.min(handles[handles.length - 1] - cx, Math.max(handles[0] - cx, draggedHandle.offset));
+              draggedHandle.offset = Math.min(max - cx, Math.max(min - cx, draggedHandle.offset));
             }
             else {
               let halfWidth = anchor.boxWidth / 2;
@@ -134,6 +142,25 @@ class Link {
                ? Math.max(-halfWidth + 3, draggedHandle.offset)
                : Math.min(halfWidth - 3, draggedHandle.offset);
             }
+
+            // also constrain links above this link
+            let handles = this.handles
+              .filter(h => h.anchor.row.idx === this.handles[0].anchor.row.idx)
+              .sort((a, b) => a.x - b.x);
+
+            let min = handles[0].x;
+            let max = handles[handles.length - 1].x;
+            if (handles.length < this.handles.length) {
+              max = this.mainSVG.width();
+            }
+            let cx = this.cx;
+            this.links.forEach(link => {
+              link.handles.forEach(h => {
+                if (h.anchor === this) {
+                  h.offset = Math.min(max - cx, Math.max(min - cx, h.offset));
+                }
+              });
+            });
             this.draw(draggedHandle.anchor);
           }
         })

js/main.js

@@ -15,7 +15,8 @@ const Main = (function() {
   let tree = {};
   let options = {
     showSyntax: false,
-    showLinksOnMove: false
+    showLinksOnMove: false,
+    showTreeInModal: false
   };
 
   //--------------------------------
@@ -35,7 +36,7 @@ const Main = (function() {
     rm      = new RowManager(svg);
     lm      = new LabelManager(svg);
     tm      = new Taxonomy('taxonomy');
-    tree    = new TreeLayout(document.querySelector('#tree > svg'));
+    tree    = new TreeLayout('#tree', svg);
 
     // load and render initial dataset by default
     changeDataset(2);
@@ -75,8 +76,19 @@ const Main = (function() {
     });
 
     svg.on('build-tree', function(e) {
-      setActiveTab('tree');
-      tree.graph(e.detail.object);
+      tree.svg.classed('hidden', false);
+      if (tree.isInModal) {
+        setActiveTab('tree');
+      }
+      else {
+        setActiveTab(null);
+      }
+      if (e.detail) {
+        tree.graph(e.detail.object);
+      }
+      else {
+        tree.resize();
+      }
     });
 
     // window event listeners
@@ -107,19 +119,28 @@ const Main = (function() {
           case 'links':
             options.showLinksOnMove = this.checked;
             break;
+          case 'tree':
+            options.showTreeInModal = this.checked;
+            // document.querySelector('.tab[data-id="tree"]').style.display = this.checked ? 'inline-block' : 'none';
+            break;
           default: ;
         }
       };
     });
 
     function setActiveTab(pageId, modalId="modal") {
       let m = document.getElementById(modalId);
-      m.classList.add('open');
+      if (pageId == null) {
+        m.classList.remove('open');
+      }
+      else {
+        m.classList.add('open');
 
-      m.querySelector('.tab.active').classList.remove('active');
-      m.querySelector('.page.active').classList.remove('active');
-      m.querySelector('header span[data-id="' + pageId + '"]').classList.add('active');
-      document.getElementById(pageId).classList.add('active');
+        m.querySelector('.tab.active').classList.remove('active');
+        m.querySelector('.page.active').classList.remove('active');
+        m.querySelector('header span[data-id="' + pageId + '"]').classList.add('active');
+        document.getElementById(pageId).classList.add('active');
+      }
     }
 
     let modalHeader = document.querySelector('#modal header');

js/treelayout.js

@@ -2,6 +2,7 @@ const TreeLayout = (function() {
 
     // depth of recursion
     let maxDepth;
+    const rh = 50;  // row height
 
     // recursively build hierarchy from a root word or link
     function addNode(node, depth, source) {
@@ -57,12 +58,45 @@ const TreeLayout = (function() {
     };
 
     class TreeLayout {
-        constructor(el) {
+        constructor(el, mainSVG, openInModal) {
             // container element
-            this.svg = d3.select(el);
+            this.isInModal = openInModal;
+            this.svg = openInModal ? d3.select(el) : d3.select(document.body).append('svg')
+              .attr('id', 'tree-svg');
             this.draggable = this.svg.append('g');
             this.g = this.draggable.append('g');
 
+            let self = this;
+            this.svg.append('text')
+              .text(openInModal ? 'Show in main window' : 'Pop into modal')
+              .attr('id', 'tree-popout')
+              .attr('x', 15)
+              .attr('y', 25)
+              .on('click', function() {
+                let node = document.getElementById('tree-svg');
+                let parent = node.parentNode;
+                if (parent === document.body) {
+                  d3.select(this).text('Show in main window');
+                  d3.select(el).node().appendChild(node);
+                  self.isInModal = true;
+                }
+                else {
+                  d3.select(this).text('Pop into modal');
+                  document.body.appendChild(node);
+                  self.isInModal = false;
+                }
+                mainSVG.fire('build-tree');
+              });
+            this.svg.append('text')
+              .text('Close')
+              .attr('id', 'tree-close')
+              .attr('x', this.svg.node().getBoundingClientRect().width - 15)
+              .attr('text-anchor', 'end')
+              .attr('y', 25)
+              .on('click', () => {
+                this.svg.classed('hidden', true);
+              });
+
             // add zoom/pan events
             this.svg.call(d3.zoom()
               .scaleExtent([1 / 2, 4])
@@ -74,10 +108,12 @@ const TreeLayout = (function() {
             // selected words to generate graph around
             this.word = null;
             this.maxDepth = 20; // default value for max dist from root
+            this.maxWidth = 0;
+            this.layers = [];
         }
         resize() {
-          // let bounds = this.svg.node().getBoundingClientRect();
-          // this.g.attr('transform', `translate(${bounds.width / 2}, 30)`);// ${bounds.height / 2})`);
+          let bounds = this.svg.node().getBoundingClientRect();
+          this.g.attr('transform', 'translate(' + [bounds.width / 2 - this.maxWidth / 2, bounds.height / 2 - (this.layers.length - 1) * rh / 2] + ')');
         }
         clear() {
             this.word = null;
@@ -89,8 +125,6 @@ const TreeLayout = (function() {
          * Word or Link "root" nodes
          */
         graph(selected) {
-            this.resize();
-
             maxDepth = this.maxDepth;
 
             let data = [];
@@ -220,6 +254,8 @@ const TreeLayout = (function() {
               });
             }// end for
 
+            this.maxWidth = maxWidth;
+            this.layers = layers;
 
             let nodeSVG = this.g.selectAll('.node')
               .data(nodes, d => d.node);
@@ -230,8 +266,6 @@ const TreeLayout = (function() {
             let edgeSVG = this.g.selectAll('.edge')
               .data(links, d => d.source.node);
 
-            //layout constants
-            const rh = 50;  // row height
             nodeSVG.exit().remove();
             nodeSVG.enter().append('text')
               .attr('class','node')
@@ -243,8 +277,7 @@ const TreeLayout = (function() {
                 .attr('transform', d => 'translate(' + [d.offset, d.depth * rh] + ')');
 
             // resize
-            let bounds = this.svg.node().getBoundingClientRect();
-            this.g.attr('transform', 'translate(' + [bounds.width / 2 - maxWidth / 2, bounds.height / 2 - layers.length * rh / 2] + ')');
+            this.resize();
 
             edgeSVG.exit().remove();
             edgeSVG.enter().append('path')