Row: Better spacing when no Links are active

- Links: Distinguished between `enabled` and `visible` Links (the former
being active but not necessarily drawn yet; the latter being active and
drawn)

- RowManager: Better checks for Row size/spacing when contents change or
Rows are resized

- Row: No longer reserve vertical space for Links that are not currently
visible, allowing for more compact visualisations

Author: ZechyW

demo/demo.min.js

@@ -45,6 +45,9 @@ class Link {
     // Is this Link currently visible in the visualisation?
     this.visible = false;
 
+    // Should this Link be drawn onto the visualisation?
+    this.enabled = false;
+
     // Slots are the y-intervals at which links may be drawn.
     // The main instance will need to provide the `.calculateSlot()` method
     // with the full set of Words in the data so that we can check for
@@ -246,31 +249,33 @@ class Link {
    * Toggles the visibility of this Link
    */
   toggle() {
-    if (this.visible) {
+    if (this.enabled) {
       this.hide();
     } else {
       this.show();
     }
-
-    this.visible = !this.visible;
   }
 
   /**
-   * Shows this Link
+   * Enables this Link and draws it onto the visualisation
    */
   show() {
-    if (this.svg) {
+    this.enabled = true;
+
+    if (this.svg && !this.svg.visible()) {
       this.svg.show();
-      this.draw();
     }
+    this.draw();
     this.visible = true;
   }
 
   /**
-   * Hides this Link
+   * Disables this Link and removes it from the visualisation
    */
   hide() {
-    if (this.svg) {
+    this.enabled = false;
+
+    if (this.svg && this.svg.visible()) {
       this.svg.hide();
     }
     this.visible = false;
@@ -281,6 +286,7 @@ class Link {
    */
   showMainLabel() {
     this.linkLabel.show();
+    // Redraw the Link to make sure that the label ends up in the correct spot
     this.draw();
   }
 
@@ -296,6 +302,7 @@ class Link {
    */
   showArgLabels() {
     this.argLabels.forEach(label => label.show());
+    // Redraw the Link to make sure that the label ends up in the correct spot
     this.draw();
   }
 
@@ -314,7 +321,7 @@ class Link {
    *     redraw. If not, the positions of all handles will be recalculated.
    */
   draw(modAnchor) {
-    if (!this.initialised) {
+    if (!this.initialised || !this.enabled) {
       return;
     }
 
@@ -326,6 +333,17 @@ class Link {
     }
     const changedHandles = [];
 
+    // One or more of our anchors might be nested Links.  We need to make
+    // sure that all of them are already drawn in, so that our offset
+    // calculations and the like are accurate.
+    for (let handle of calcHandles) {
+      const anchor = handle.anchor;
+      if (anchor instanceof Link && !anchor.visible) {
+        anchor.show();
+      }
+    }
+
+    // Offset calculations
     for (let handle of calcHandles) {
       const anchor = handle.anchor;
       // Two possibilities: The anchor is a Word/WordCluster, or it is a
@@ -348,10 +366,6 @@ class Link {
       } else {
         // The anchor is a Link; the handle rests on another Link's line,
         // and the offset might extend to the next row and beyond.
-        if (!anchor.visible) {
-          // We need to draw in our anchor before proceeding with our own draw
-          anchor.draw();
-        }
         const baseLeft = anchor.leftHandle;
 
         // First, make sure the offset doesn't overshoot the base row
@@ -414,10 +428,6 @@ class Link {
       // This Link has no trigger (Relation)
       this._drawAsRelation();
     }
-
-    this.visible = true;
-
-    this.links.forEach(l => l.draw(this));
   }
 
   /**

dist/tag/js/tag.js

@@ -238,7 +238,7 @@ class Row {
   redrawLinksAndClusters() {
     const elements = [];
     for (const word of this.words) {
-      for (const link of word.links) {
+      for (const link of word.passingLinks) {
         if (elements.indexOf(link) < 0) {
           elements.push(link);
         }
@@ -265,7 +265,7 @@ class Row {
    * @return {number}
    */
   get ry2() {
-    return this.ry + this.rh + this.descent;
+    return this.ry + this.rh + this.minDescent;
   }
 
   /**
@@ -352,41 +352,85 @@ class Row {
 
   /**
    * Returns the minimum amount of height above the baseline needed to fit
-   * all this Row's Words, top WordTags and top Links.
+   * all this Row's Words, top WordTags and currently-visible top Links.
    * Includes vertical Row padding.
    * @return {number}
    */
   get minHeight() {
-    let height = this.wordHeight +
-      this.maxSlot * this.config.linkSlotInterval +
-      this.config.rowVerticalPadding;
+    // Minimum height needed for Words + padding only
+    let height = this.wordHeight + this.config.rowVerticalPadding;
 
-    // Because top Link labels are above the Link lines, we need to add
-    // their height if any of the Words on this Row is an endpoint for a Link
-    for (const word of this.words) {
-      for (const link of word.links) {
-        if (link.top) {
-          // This Word anchors some top Link
-          return height + this.config.rowExtraTopPadding;
+    // Highest visible top Link
+    let maxVisibleSlot = 0;
+
+    let checkWords = this.words;
+    if (checkWords.length === 0 && this.lastRemovedWord !== null) {
+      // We let all our Words go; what was the last one that mattered?
+      checkWords = [this.lastRemovedWord];
+    }
+
+    for (const word of checkWords) {
+      for (const link of word.links.concat(word.passingLinks)) {
+        if (link.top && link.visible) {
+          maxVisibleSlot = Math.max(
+            maxVisibleSlot,
+            link.slot
+          );
         }
       }
     }
 
-    // Still here?
+    // Because top Link labels are above the Link lines, we need to add
+    // their height if any of the Words on this Row is an endpoint for a Link
+    if (maxVisibleSlot > 0) {
+      return height +
+        maxVisibleSlot * this.config.linkSlotInterval +
+        this.config.rowExtraTopPadding;
+    }
+
+    // Still here?  No visible top Links on this row.
     return height;
   }
 
   /**
-   * Returns the amount of descent below the baseline needed to fit
-   * all this Row's bottom WordTags and Links.
+   * Returns the minimum amount of descent below the baseline needed to fit
+   * all this Row's bottom WordTags and currently-visible bottom Links.
    * Includes vertical Row padding.
-   * TODO: Have this account for whether or not bottom Links are visible.
    * @return {number}
    */
-  get descent() {
-    return this.wordDescent +
-      Math.abs(this.minSlot) * this.config.linkSlotInterval +
-      this.config.rowVerticalPadding;
+  get minDescent() {
+    // Minimum height needed for WordTags + padding only
+    let descent = this.wordDescent + this.config.rowVerticalPadding;
+
+    // Lowest visible bottom Link
+    let minVisibleSlot = 0;
+
+    let checkWords = this.words;
+    if (checkWords.length === 0 && this.lastRemovedWord !== null) {
+      // We let all our Words go; what was the last one that mattered?
+      checkWords = [this.lastRemovedWord];
+    }
+
+    for (const word of checkWords) {
+      for (const link of word.links.concat(word.passingLinks)) {
+        if (!link.top && link.visible) {
+          minVisibleSlot = Math.min(
+            minVisibleSlot,
+            link.slot
+          );
+        }
+      }
+    }
+
+    // Unlike in the `minHeight()` function, bottom Link labels do not
+    // extend below the Link lines, so we don't need to add extra padding
+    // for them.
+    if (minVisibleSlot < 0) {
+      return descent + Math.abs(minVisibleSlot) * this.config.linkSlotInterval;
+    }
+
+    // Still here?  No visible bottom Links on this row.
+    return descent;
   }
 
   /**

dist/tag/js/tag.min.js

@@ -223,11 +223,17 @@ class Word {
     this.initialised = true;
   }
 
+  /**
+   * Redraw Links
+   */
   redrawLinks() {
     this.links.forEach(l => l.draw(this));
     this.redrawClusters();
   }
 
+  /**
+   * Redraw all clusters (they should always be visible)
+   */
   redrawClusters() {
     this.clusters.forEach(cluster => {
       if (cluster.endpoints.indexOf(this) > -1) {

src/js/components/link.js

@@ -195,6 +195,9 @@ class Main {
       }
     });
 
+    // Now that Links are visible, make sure that all Rows have enough space
+    this.rowManager.resizeAll();
+
     // Change token colours based on the current taxonomy, if loaded
     this.taxonomyManager.colour(this.words);
   }
@@ -378,6 +381,9 @@ class Main {
           link.hide();
         }
       });
+
+    // Always resize when the set of visible Links may have changed
+    this.rowManager.resizeAll();
   }
 
   /**
@@ -407,6 +413,9 @@ class Main {
           link.hide();
         }
       });
+
+    // Always resize when the set of visible Links may have changed
+    this.rowManager.resizeAll();
   }
 
   /**

src/js/components/row.js

@@ -27,27 +27,37 @@ class RowManager {
    *
    * If called without a `dy`, simply ensures that the Row's height is at
    * least as large as its minimum height.
-   * (Row descents are fixed and vary according to their bottom Links)
    */
   resizeRow(i, dy = 0) {
     const row = this._rows[i];
-    if (row === undefined) return;
+    if (!row) return;
 
-    // Adjust height for the main Row
-    // (Row descent is fixed, and depends on the number of bottom Links in
-    // the Row)
+    // Height adjustment
     const newHeight = Math.max(row.rh + dy, row.minHeight);
     if (row.rh !== newHeight) {
       row.height(newHeight);
       row.redrawLinksAndClusters();
     }
 
-    // Adjust the positions of all following Rows
+    // Adjust position/height of all following Rows
     for (i = i + 1; i < this._rows.length; i++) {
       const prevRow = this._rows[i - 1];
       const thisRow = this._rows[i];
+
+      // Height check
+      let changed = false;
+      if (thisRow.rh < thisRow.minHeight) {
+        thisRow.height(thisRow.minHeight);
+        changed = true;
+      }
+
+      // Position check
       if (thisRow.ry !== prevRow.ry2) {
         thisRow.move(prevRow.ry2);
+        changed = true;
+      }
+
+      if (changed) {
         thisRow.redrawLinksAndClusters();
       }
     }
@@ -73,14 +83,7 @@ class RowManager {
         }
       } else {
         // Redraw Words/Links that might have changed
-        row.words.forEach(word => {
-          word.links.forEach(function (l) {
-            if (l.endpoints[1].row !== l.endpoints[0].row) {
-              l.draw(word);
-            }
-          });
-          word.redrawClusters();
-        });
+        row.redrawLinksAndClusters();
       }
     });
   }
@@ -329,20 +332,6 @@ class RowManager {
     this.addWordToRow(this._rows[index].removeLastWord(), nextRow, 0);
   }
 
-  //
-  // getSlotRange(acc, anchor) {
-  //   if (anchor instanceof Link && !anchor.visible) {
-  //     return [acc[0], acc[1]];
-  //   }
-  //   if (anchor.links.length === 0) {
-  //     return [Math.min(acc[0], 0), Math.max(acc[1], 0)];
-  //     // return [Math.min(acc[0], anchor.slot), Math.max(acc[1],
-  // anchor.slot)]; } let a = anchor.links.reduce((acc, val) =>
-  // this.getSlotRange(acc, val), [0, 0]); return [Math.min(acc[0], a[0]),
-  // Math.max(acc[1], a[1])]; }  recalculateRowSlots(row) { [row.minSlot,
-  // row.maxSlot] = row.words .reduce((acc, val) => this.getSlotRange(acc,
-  // val), [0, 0]); }
-
   /**
    * Returns the last Row managed by the RowManager
    * @return {*}