modify graphlayout recursive function to avoid self-trees

Author: hmsklee

js/GraphLayout.js

@@ -6,6 +6,8 @@ const GraphLayout = (function() {
     // recursively build hierarchy from a root word or link
     function addNode(node, depth, source) {
         let incoming = [];
+        source = source ? source.slice() : [];
+        let top = source[source.length - 1];
 
         let data = {
             node,
@@ -14,26 +16,38 @@ const GraphLayout = (function() {
             type: node instanceof Word ? 'Word' : 'Link'
         };
 
+        if (node !== top && source.indexOf(node) > -1) {
+            return data;
+        }
+        else {
+            source.push(node);
+        }
+
         if (depth < maxDepth) {
-            let children = node.parents
-                .filter(parent => {
+            let p = node.parents;
+            let children = p.filter((parent, j) => {
+                    // ignore duplicate children (for self-links)
+                    if (p.indexOf(parent) !== j) { return false; }
+
                     // ignore "incoming" links
-                    if (parent !== source && parent instanceof Link) {
+                    if (parent !== top && parent instanceof Link) {
                         const i = parent.words.indexOf(node);
                         if (i < 0 || parent.arrowDirections[i] === -1) {
                             incoming.push(parent);
                             return false;
                         }
                     }
-                    return parent !== source;
+                    return parent !== top;
                 })
-                .map((parent) => addNode(parent, depth + 1, node));
+                .map((parent) => addNode(parent, depth + 1, source));
 
             if (node instanceof Link) {
                 let anchors = node.words
                     .map((word, i) => {
-                        if (word !== source) {
-                            const newNode = addNode(word, depth + 1, node);
+                        // ignore duplicate children (for self-links)
+                        if (node.words.indexOf(word) !== i) { return null; }
+                        if (word !== top) {
+                            const newNode = addNode(word, depth + 1, source);
 
                             if (node.arrowDirections[i] === -1) {
                                 newNode.receivesArrow = true;
@@ -105,7 +119,7 @@ const GraphLayout = (function() {
 
             // selected words to generate graph around
             this.words = [];
-            this.maxDepth = 20; // default value for max dist from root
+            this.maxDepth = 8; // default value for max dist from root
         }
         resize() {
             this.bounds = this.div.getBoundingClientRect();

js/annotate.js

@@ -231,22 +231,15 @@ function determineSide(link) {
 //TODO - should there be a global strategy for each class of link types? for the different styles of links? for each parent word/link? or for every single individual link??? E.g., could a word support links with different strategies, or would that become cluttered??
 function calcAttachPoints(link, strategy)  {
 
-  //link.leftWord.nr += 1;
-  //link.rightWord.nl += 1;
-
     //console.log("" + link.id + " strategy = CLOSEST");
 
     if (determineSide(link) == swapside.YES) {
       //console.log("rootS < rootE (" +rootS +" < " + rootE +")");
-      link.leftWord.nr += 1;
-      link.rightWord.nl += 1;
       link.leftAttach = sides.RIGHT;
       link.rightAttach  = sides.LEFT; 
     } else {
       //console.log("rootS >= rootE (" +rootS +" >= " + rootE +")");
 
-      link.leftWord.nl += 1;
-      link.rightWord.nr += 1;
       link.leftAttach  = sides.LEFT;
       link.rightAttach = sides.RIGHT;
 

js/wordcollapser.js

@@ -1,6 +1,6 @@
 const WordCollapser = (function() {
 
-  let div;
+  let div = {};
   let selecting;
   let leftWord;
 
@@ -20,20 +20,20 @@ const WordCollapser = (function() {
     div.className = null;
   }
 
+  document.addEventListener('keydown', function(e) {
+    let c = e.keyCode;
+    if (c === 65) { // A
+      listenForLeftWord();
+    }
+    else {
+      cancel();
+    }
+  });
+
   class WordCollapser {
 
     constructor() {
       div = document.getElementById('drawing');
-
-      document.addEventListener('keydown', function(e) {
-        let c = e.keyCode;
-        if (c === 65) { // A
-          listenForLeftWord();
-        }
-        else {
-          cancel();
-        }
-      });
     }
 
     setClick(word) {
@@ -75,10 +75,48 @@ const WordCollapser = (function() {
           let removedWords = wordObjs.splice(lIndex, numberToSplice, phrase);
           row.words.splice(row.words.indexOf(leftWord), numberToSplice, phrase);
 
+
+          removedWords.forEach(word => {
+
+            // replace backreferences of word in link with phrase
+            function replaceLinkWordObject(link) {
+              ['leftWord', 'rightWord', 'nearestConnectedMaxWord', 'nearestConnectedMinWord', 'rootMaxWord', 'rootMinWord'].forEach(prop => {
+                if (link[prop] === word) {
+                  link[prop] = phrase;
+                }
+                let idx = link.words.indexOf(word);
+                if (idx > -1) {
+                  link.words[idx] = phrase;
+                }
+              });
+
+              link.parents.forEach(replaceLinkWordObject);
+            }
+
+            // relink word links to phrase
+            ['parentsL', 'parentsC', 'parentsR'].forEach(prop => {
+              phrase[prop] = phrase[prop].concat(word[prop]);
+            });
+            ['slotsL', 'slotsR'].forEach(prop => {
+              word[prop].forEach(slot => {
+                if (phrase[prop].indexOf(slot) < 0) {
+                  phrase[prop].push(slot);
+                }
+              });
+            })
+
+            // recurse through word's ancestor links
+            word.parents.forEach(replaceLinkWordObject);
+
+            // make svg invisible
+            word.svg.hide();
+
+          });
+
           phrase.leftX = leftWord.leftX;
           phrase.row = row;
           phrase.draw();
-          removedWords.forEach(word => word.svg.hide());
+          redrawLinks(true);
           cancel();
         }
       }