amend slot assignment

Author: hmsklee

js2/components/link.js

@@ -40,10 +40,9 @@ class Link {
       this.svgTexts = [];
     }
 
-    init(svg, words) {
+    init(svg) {
       this.mainSVG = svg;
       this.svg = svg.group().addClass(this.top ? 'link' : 'link syntax-link');
-      this.recalculateSlots(words);
 
       // init handles
       // get location of trigger
@@ -81,7 +80,6 @@ class Link {
 
       this.line = this.svg.path()
         .addClass('polyline');
-      this.draw();
     }
 
     toggle() {
@@ -286,38 +284,50 @@ class Link {
       this.arguments.forEach(arg => detachLink(arg.anchor));
     }
 
+    resetSlotRecalculation() {
+      this.isRecalculated = false;
+    }
+
     recalculateSlots(words) {
       // reorganize slots
-      let self = this;
       let ep = this.endpoints;
-      let wordArray = words.slice(this.endpoints[0].idx, this.endpoints[1].idx + 1);
+      if (this.isRecalculated) { return [{slot: this.slot, endpoints: ep}]; }
 
-      // recursively increase the slots of l
-      function incrementSlot(l, top) {
-        l.slot += top ? 1 : -1;
-        l.links.forEach(incrementSlot);
-      }
+      this.isRecalculated = true;
+      let wordArray = words.slice(ep[0].idx, ep[1].idx + 1);
+      let self = this;
 
-      // recursively check for collisions
-      function checkCollision(l) {
-        if (l !== self && l.slot === self.slot) {
-          if (l.endpoints[0] <= ep[0] && l.endpoints[1] >= ep[0]) {
-            incrementSlot(l, self.top);
-            l.recalculateSlots(words);
-          }
-          else if (l.endpoints[0] >= ep[0] &&  l.endpoints[0] <= ep[1]) {
-            // TODO: properly handle slots of self
-            incrementSlot(self, self.top);
+      let slots = [];
+
+      // get all interfering slots
+      wordArray.forEach(word => {
+        word.links.forEach(l => {
+          if (l !== self &&
+              l.top === self.top &&
+              !(l.endpoints[0].idx >= ep[1].idx ||
+                l.endpoints[1].idx <= ep[0].idx)) {
+            [].push.apply(slots, l.recalculateSlots(words));
           }
-          l.links.forEach(checkCollision);
+        });
+      });
+
+      // find a slot to place this link
+      function incrementSlot(l) {
+        while (slots.find(s => s.slot === l.slot &&
+              !(s.endpoints[0].idx >= l.endpoints[1].idx ||
+                s.endpoints[1].idx <= l.endpoints[0].idx))) {
+          l.slot += l.top ? 1 : -1;
         }
+        slots.push({slot: l.slot, endpoints: l.endpoints});
+        l.links.forEach(link => {
+          if (link.top === l.top) {
+            incrementSlot(link);
+          }
+        });
       }
+      incrementSlot(this);
 
-      wordArray.forEach(w => {
-        // get relevant links
-        w.links.forEach(checkCollision);
-      });
-
+      return slots;
     }
 
     getEndpoints() {

js2/components/row.js

@@ -89,10 +89,10 @@ class Row {
     let prevWord = this.words[i - 1];
     if (x) {
       x = Math.min(this.rw, x);
-      word.move(x);
-      if (word.x + word.boxWidth > this.rw - EDGE_PADDING) {
+      if (x + word.boxWidth > this.rw - EDGE_PADDING) {
         return i;
       }
+      word.move(x);
       ++i;
       prevWord = word;
     }
@@ -109,10 +109,10 @@ class Row {
         return;
       }
       // move next word over
-      word.move(dx);
-      if (word.x + word.boxWidth > this.rw - EDGE_PADDING) {
+      if (dx + word.boxWidth > this.rw - EDGE_PADDING) {
         return i;
       }
+      word.move(dx);
       prevWord = this.words[i];
       ++i;
     }

js2/main.js

@@ -33,7 +33,7 @@ const Main = (function() {
     lm      = new LabelManager(svg);
 
     // load and render initial dataset by default
-    changeDataset(2);
+    changeDataset(3);
 
     // svg event listeners
     svg.on('row-resize', function(e) {
@@ -99,8 +99,12 @@ const Main = (function() {
       rm.addWordToRow(word, rm.lastRow);
     });
     links.forEach(link => {
-      link.init(svg, words);
+      link.init(svg);
     });
+    links.forEach(link => {
+      link.recalculateSlots(words);
+      link.draw();
+    })
     rm.resizeAll();
   }
 
@@ -267,7 +271,7 @@ const Main = (function() {
     });
 
     // add to options
-    function createLi(types, name) {
+    function createUl(types, name) {
       if (Object.keys(types).length > 0) {
         let li = Object.keys(types).map(type =>
           `<li><input id="${name}--${type}" type="checkbox" checked><label for="${name}--${type}">${type}</label></li>`
@@ -281,8 +285,10 @@ const Main = (function() {
         if (ul) { ul.parentNode.removeChild(ul); }
       }
     }
-    createLi(reachTypes, 'reach');
-    createLi(posTypes, 'pos');
+    createUl(reachTypes, 'reach');
+    createUl(posTypes, 'pos');
+    document.getElementById('reach--all').checked = true;
+    document.getElementById('pos--all').checked = true;
   }
 
   // export public functions