Merge pull request #20 from reckart/bugfix/17-Ability-to-handle-conne…

…ctions-across-independently-scrolling-areas Issue #17: Ability to handle connections across independently scrolling areas
recogito · Nov 12, 2022 · 40fa265 · 40fa265
2 parents ebd1c76 + dcc8853
commit 40fa265
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 41 deletions.
diff --git a/src/NetworkCanvas.js b/src/NetworkCanvas.js
@@ -192,7 +192,7 @@ export default class NetworkCanvas extends EventEmitter {
   }
 
   onLeaveAnnotation = () =>  {
-    this.currentHover.remove();
+    this.currentHover?.remove();
     this.currentHover = null;
   }
 
@@ -241,6 +241,10 @@ export default class NetworkCanvas extends EventEmitter {
   setAnnotations = annotations => annotations.forEach(a => {
     const start = NetworkNode.findById(a.targets[0].id);
     const end = NetworkNode.findById(a.targets[1].id);
+    if (!start || !end) {
+      console.warn('Could not find start or end node for annotation', a);
+      return; 
+    }
     this.addEdge(new NetworkEdge(a.id, start, end, a.bodies));
   });
 

diff --git a/src/NetworkCanvas.scss b/src/NetworkCanvas.scss
@@ -23,6 +23,10 @@ svg.r6o-connections-canvas {
 
   }
 
+  .r6o-connections-hidden {
+    display:none;
+  }
+
   .r6o-connections-edge,
   .r6o-connections-float {
 

diff --git a/src/NetworkNode.js b/src/NetworkNode.js
@@ -93,10 +93,14 @@ export default class NetworkNode {
     // Just a bit of defensive programming - users
     // might deregister an instance, and then there wouldn't
     // be any faces for a node.
-    if (!this.faces)
+    if (!this.faces) {
       return;
+    }
 
     const faces = Array.from(this.faces);
+    if (faces.length === 0) {
+      return;
+    }
 
     if (this.xy) {
       const f = this.getFaceUnderPoint(this.xy);

diff --git a/src/svg/SVGEdge.js b/src/svg/SVGEdge.js
@@ -92,46 +92,49 @@ export default class SVGEdge extends EventEmitter {
     const end = start ? this.edge.end.getAttachableRect(start) : null;
     start = end ? this.edge.start.getAttachableRect(end) : null;
 
-    if (start && end) {
-      const [ sx, sy, cx, cy, ex, ey, ae, ] = getBoxToBoxArrow(
-        start.x,
-        start.y,
-        start.width,
-        start.height,
-        end.x,
-        end.y,
-        end.width || 0,
-        end.height || 0,
-        ARROW_CONFIG
-      );
-
-      const endAngleAsDegrees = ae * (180 / Math.PI);
-
-      // Base circle
-      this.g.find('circle')
-        .attr('cx', sx)
-        .attr('cy', sy);
-
-      // Inner and outer paths
-      this.g.find('path')
-        .attr('d', `M${sx},${sy} Q${cx},${cy} ${ex},${ey}`);
-
-      // Arrow head
-      this.g.find('polygon')
-        .attr('transform', `translate(${ex},${ey}) rotate(${endAngleAsDegrees})`);
-
-      // Label (if any)
-      const label = this.g.find('.r6o-connections-edge-label');
-      if (label)
-        label.attr('transform', `translate(${cx},${cy})`);
-
-      // Expose essential anchor points
-      this.startpoint = { x: sx, y: sy };
-      this.midpoint = { x: cx, y: cy };
-      this.endpoint = { x: ex, y: ey };
-    } else {
-      // TODO hide
+    if (!start || !end) {
+      this.g.addClass('r6o-connections-hidden');
+      return;
     }
+
+    this.g.removeClass('r6o-connections-hidden');
+
+    const [ sx, sy, cx, cy, ex, ey, ae, ] = getBoxToBoxArrow(
+      start.x,
+      start.y,
+      start.width,
+      start.height,
+      end.x,
+      end.y,
+      end.width || 0,
+      end.height || 0,
+      ARROW_CONFIG
+    );
+
+    const endAngleAsDegrees = ae * (180 / Math.PI);
+
+    // Base circle
+    this.g.find('circle')
+      .attr('cx', sx)
+      .attr('cy', sy);
+
+    // Inner and outer paths
+    this.g.find('path')
+      .attr('d', `M${sx},${sy} Q${cx},${cy} ${ex},${ey}`);
+
+    // Arrow head
+    this.g.find('polygon')
+      .attr('transform', `translate(${ex},${ey}) rotate(${endAngleAsDegrees})`);
+
+    // Label (if any)
+    const label = this.g.find('.r6o-connections-edge-label');
+    if (label)
+      label.attr('transform', `translate(${cx},${cy})`);
+
+    // Expose essential anchor points
+    this.startpoint = { x: sx, y: sy };
+    this.midpoint = { x: cx, y: cy };
+    this.endpoint = { x: ex, y: ey };
   }
 
   resetAttachment = () => {