modify syntax tree visibility toggle and row resize

Author: hmsklee

index.html

@@ -39,8 +39,8 @@
     </div>
     <div class="page" id="graph"></div>
     <div class="page" id="options">
-      <p><input type="checkbox" checked> Syntax tree visible</p>
-      <p><input type="checkbox"> Hide links when moving words</p>
+      <p><input type="checkbox" data-option="syntax"> Show syntax tree</p>
+      <p><input type="checkbox" data-option="links"> Show links when moving words</p>
     </div>
   </div>
 </div>

js/components/link.js

@@ -37,6 +37,7 @@ class Link {
     init(svg) {
       this.mainSVG = svg;
       this.svg = svg.group().addClass(this.top ? 'link' : 'link syntax-link');
+      if (!this.visible) { this.svg.hide(); }
 
       // init handles
       // get location of trigger

js/components/word.js

@@ -97,6 +97,7 @@ class Word {
         .on('dragstart', function(e) {
           mousemove = false;
           x = e.detail.p.x;
+          svg.fire('word-move-start');
         })
         .on('dragmove', (e) => {
           e.preventDefault();
@@ -106,9 +107,7 @@ class Word {
           if (dx !== 0) { mousemove = true; }
         })
         .on('dragend', (e) => {
-          if (mousemove === false) {
-            svg.fire('word-clicked', { object: this });
-          }
+          svg.fire('word-move-end', { object: this, clicked: mousemove === false });
         });
 
       // attach right click listener

js/main.js

@@ -13,6 +13,10 @@ const Main = (function() {
   // other html elements
   let tooltip = {};
   let tree = {};
+  let options = {
+    showSyntax: false,
+    showLinksOnMove: false
+  };
 
   //--------------------------------
   // public functions
@@ -42,12 +46,24 @@ const Main = (function() {
       rm.resizeRow(e.detail.object.idx, e.detail.y);
     });
 
+    svg.on('word-move-start', function() {
+      if (!options.showLinksOnMove && options.showSyntax) {
+        setSyntaxVisibility(false);
+      }
+    });
+
     svg.on('word-move', function(e) {
       tooltip.clear()
       lm.stopEditing();
       rm.moveWordOnRow(e.detail.object, e.detail.x);
     });
 
+    svg.on('word-move-end', function(e) {
+      if (!options.showLinksOnMove && options.showSyntax) {
+        setSyntaxVisibility(true);
+      }
+    });
+
     svg.on('row-recalculate-slots', function(e) {
       links.forEach(link => {
         link.resetSlotRecalculation();
@@ -78,16 +94,21 @@ const Main = (function() {
       }
     }
 
-    // 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.querySelectorAll('#options input').forEach(input => {
+      input.onclick = function() {
+        let option = this.getAttribute('data-option');
+        switch(option) {
+          case 'syntax':
+            options.showSyntax = this.checked;
+            setSyntaxVisibility();
+            break;
+          case 'links':
+            options.showLinksOnMove = this.checked;
+            break;
+          default: ;
+        }
+      };
+    });
 
     function setActiveTab(pageId, modalId="modal") {
       let m = document.getElementById(modalId);
@@ -163,6 +184,7 @@ const Main = (function() {
       clear();
       ymlToJson.convert('taxonomy.yml.txt', function(taxonomy) {
         [words, links, clusters] = buildWordsAndLinks();
+        setSyntaxVisibility();
         draw();
 
         tm.buildTree(taxonomy);
@@ -206,6 +228,21 @@ const Main = (function() {
   //--------------------------------
   // private functions
   //--------------------------------
+
+  /** options to set visibility of syntax tree
+   */
+  function setSyntaxVisibility(bool) {
+    bool = (bool === undefined) ? options.showSyntax : bool;
+    links.forEach(l => {
+      if (!l.top) {
+        bool ? l.show() : l.hide();
+      }
+    });
+    if (rm.rows.length > 0) {
+      rm.resizeAll();
+    }
+  }
+
   function buildWordsAndLinks() {
     // construct word objects and tags from tokens, entities, and triggers
     const words = parser.tokens.map((token, i) => {

js/managers/rowmanager.js

@@ -10,8 +10,8 @@ const RowManager = (function() {
     resizeAll() {
       _rows.forEach(row => {
         this.recalculateRowSlots(row);
-        this.resizeRow(row.idx);
       });
+      this.resizeRow(0);      
     }
 
     resizeRow(i, dy = 0) {
@@ -211,7 +211,7 @@ const RowManager = (function() {
     }
 
     getSlotRange(acc, anchor) {
-      // if (anchor instanceof Link && !anchor.visible) { return [acc, acc]; }
+      if (anchor instanceof Link && !anchor.visible) { return [acc[0], acc[1]]; }
       if (anchor.links.length === 0) {
         return [Math.min(acc[0], anchor.slot), Math.max(acc[1], anchor.slot)];
       }