Links/Clusters: Fixed WordCluster Links

- Links that have WordClusters as arguments now display properly.

- Updated Reach format test file (`test-reach.json`)

Author: ZechyW

demo/data/test-reach.json

@@ -9,14 +9,22 @@
       "for the tokenisation of the text string."
     ],
     "entities": [
-      ["T1", "Tag 1", [["0", "4"]]],
-      ["T2", "Cluster 1", [["10", "22"]]]
+      ["T1", "Tag", [["0", "4"]]],
+      ["T2", "Cluster 1", [["10", "22"]]],
+      ["T3", "Tag", [["29", "33"]]],
+      ["T4", "Cluster 1", [["39", "51"]]]
     ],
     "attributes": [],
     "text": "This is a word cluster test. This is a word cluster test.",
-    "relations": [],
-    "triggers": [],
-    "events": []
+    "relations": [
+      ["R1", "Relation Test", [["Arg1", "T1"], ["Arg2", "T2"]]]
+    ],
+    "triggers": [
+      ["T3", "Tag", [["29", "33"]]]
+    ],
+    "events": [
+      ["E1", "T3", [["Word Anchor", "T1"], ["Cluster Anchor", "T4"]]]
+    ]
   },
   "syntaxData": {
     "comments": [],

demo/demo.min.js

@@ -776,13 +776,24 @@ class Link {
       // Let this Word know we're watching it
       word.passingLinks.push(this);
 
+      // Word Links
       for (const link of word.links) {
         // Only consider Links on the same side of the Row as this one
         if (link !== this &&
           link.top === this.top && intervening.indexOf(link) < 0) {
           intervening.push(link);
         }
       }
+
+      // WordCluster Links
+      for (const cluster of word.clusters) {
+        for (const link of cluster.links) {
+          if (link !== this &&
+            link.top === this.top && intervening.indexOf(link) < 0) {
+            intervening.push(link);
+          }
+        }
+      }
     }
     intervening = Util.sortForSlotting(intervening);
 

src/js/components/link.js

@@ -299,8 +299,15 @@ class WordCluster {
     return this.endpoints[0].row;
   }
 
+  /**
+   * Returns the absolute y-position of the top of the WordCluster's label
+   * (for positioning Links that point at it)
+   * @return {Number}
+   */
   get absoluteY() {
-    return this.endpoints[0].absoluteY;
+    // The text label lives with the left arm of the curly brace
+    const thisHeight = this.svgs[0].bbox().height;
+    return this.endpoints[0].absoluteY - thisHeight;
   }
 
   get idx() {
@@ -323,8 +330,30 @@ class WordCluster {
     return this.svgText.bbox().width;
   }
 
-  get tagOffset() {
-    return -28;
+  // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+  // Debug functions
+  /**
+   * Draws the outline of this component's bounding box
+   */
+  drawBbox() {
+    const bbox = this.svgs[0].bbox();
+    this.svgs[0].polyline([
+      [bbox.x, bbox.y], [bbox.x2, bbox.y], [bbox.x2, bbox.y2], [bbox.x, bbox.y2],
+      [bbox.x, bbox.y]])
+      .fill("none")
+      .stroke({width: 1});
+  }
+
+  /**
+   * Draws the outline of the text element's bounding box
+   */
+  drawTextBbox() {
+    const bbox = this.svgText.bbox();
+    this.svgs[0].polyline([
+      [bbox.x, bbox.y], [bbox.x2, bbox.y], [bbox.x2, bbox.y2], [bbox.x, bbox.y2],
+      [bbox.x, bbox.y]])
+      .fill("none")
+      .stroke({width: 1});
   }
 }
 

src/js/components/word-cluster.js

@@ -298,7 +298,7 @@ class Word {
    */
   get absoluteY() {
     return this.row
-      ? this.row.ry + this.row.rh - this.boxHeight
+      ? this.row.baseline - this.boxHeight
       : this.boxHeight;
   }
 

src/js/components/word.js

@@ -132,8 +132,8 @@ class Main {
    */
   draw() {
     let t0 = performance.now();
-    console.log("----------");
-    console.log("Starting draw");
+    // console.log("----------");
+    // console.log("Starting draw");
 
     // Save a reference to the currently loaded tokens and links
     const data = this.parser.getParsedData();
@@ -160,7 +160,7 @@ class Main {
       this.rowManager.addWordToRow(word, this.rowManager.lastRow);
     });
 
-    console.log(`Words done (${performance.now() - t0}ms)`);
+    // console.log(`Words done (${performance.now() - t0}ms)`);
     t0 = performance.now();
 
     // We have to initialise all the Links before we draw any of them, to
@@ -172,7 +172,7 @@ class Main {
       word.links.forEach(link => link.draw());
     });
 
-    console.log(`Links done (${performance.now() - t0}ms)`);
+    // console.log(`Links done (${performance.now() - t0}ms)`);
     t0 = performance.now();
 
     // Change token colours based on the current taxonomy, if loaded
@@ -182,7 +182,7 @@ class Main {
     this.options.showSyntax ? this.showSyntax() : this.hideSyntax();
 
     this.rowManager.resizeAll();
-    console.log(`Resize done (${performance.now() - t0}ms)`);
+    // console.log(`Resize done (${performance.now() - t0}ms)`);
   }
 
   /**