spytial-core 1.5.1 → 1.5.2

package/dist/browser/spytial-core-complete.global.js

@@ -91601,6 +91601,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
           this.initializeDOM();
           this.initializeD3();
           this.lineFunction = d32.line().x((d) => d.x).y((d) => d.y).curve(d32.curveBasis);
+          this.gridLineFunction = d32.line().x((d) => d.x).y((d) => d.y).curve(d32.curveLinear);
           this.inputModeEnabled = isInputAllowed;
           this.initializeInputModeHandlers();
         }
@@ -91913,6 +91914,13 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
           <button id="zoom-out" title="Zoom Out" aria-label="Zoom out">\u2212</button>
           <button id="zoom-fit" title="Fit to View" aria-label="Fit graph to view">\u2922</button>
         </div>
+        <div id="routing-control">
+          <label for="routing-mode">Routing:</label>
+          <select id="routing-mode" title="Edge routing mode">
+            <option value="default">Default</option>
+            <option value="grid">Grid</option>
+          </select>
+        </div>
       </div>
       <div id="svg-container">
       <span id="error-icon" title="This graph is depicting an error state">\u26A0\uFE0F</span>
@@ -91986,8 +91994,42 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
               this.resetViewToFitContent();
             });
           }
+          const routingModeSelect = this.shadowRoot.querySelector("#routing-mode");
+          if (routingModeSelect) {
+            const currentFormat = this.layoutFormat || "default";
+            routingModeSelect.value = currentFormat;
+            routingModeSelect.addEventListener("change", () => {
+              this.handleRoutingModeChange(routingModeSelect.value);
+            });
+          }
           this.updateZoomControlStates();
         }
+        /**
+         * Handle routing mode change from dropdown
+         */
+        handleRoutingModeChange(mode) {
+          this.setAttribute("layoutFormat", mode);
+          if (this.currentLayout && this.colaLayout) {
+            if (mode === "grid") {
+              this.gridify(10, 25, 10);
+            } else {
+              this.routeEdges();
+            }
+            this.dispatchEvent(new CustomEvent("routing-mode-changed", {
+              detail: { mode }
+            }));
+          }
+        }
+        /**
+         * Update the routing mode dropdown to match current layoutFormat attribute
+         */
+        updateRoutingModeDropdown() {
+          const routingModeSelect = this.shadowRoot?.querySelector("#routing-mode");
+          if (routingModeSelect) {
+            const currentFormat = this.layoutFormat || "default";
+            routingModeSelect.value = currentFormat;
+          }
+        }
         /**
          * Initialize keyboard event handlers for input mode activation
          */
@@ -92485,6 +92527,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
                   nodePositions: this.getNodePositions()
                 }
               }));
+              this.updateRoutingModeDropdown();
               this.hideLoading();
             });
             try {
@@ -93351,6 +93394,7 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
           }).attr("opacity", this.isInputModeActive ? 0.8 : 0).style("pointer-events", this.isInputModeActive ? "all" : "none").raise();
         }
         gridUpdatePositions() {
+          this.ensureNodeBounds(true);
           const node = this.container.selectAll(".node");
           const mostSpecificTypeLabel = this.container.selectAll(".mostSpecificTypeLabel");
           const label = this.container.selectAll(".label");
@@ -93406,8 +93450,53 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
           }).attr("y", function(d) {
             return d.bounds.y + 12;
           }).attr("text-anchor", "middle").raise();
-          const linkGroups = this.container.selectAll(".linkGroup");
-          linkGroups.select("text.linklabel").raise();
+          const linkGroups = this.container.selectAll(".link-group");
+          linkGroups.select("path").attr("d", (d) => {
+            const sourceX = d.source?.x ?? d.source?.bounds?.cx() ?? 0;
+            const sourceY = d.source?.y ?? d.source?.bounds?.cy() ?? 0;
+            const targetX = d.target?.x ?? d.target?.bounds?.cx() ?? 0;
+            const targetY = d.target?.y ?? d.target?.bounds?.cy() ?? 0;
+            const dx = targetX - sourceX;
+            const dy = targetY - sourceY;
+            if (Math.abs(dx) > Math.abs(dy)) {
+              const midX = sourceX + dx / 2;
+              return this.gridLineFunction([
+                { x: sourceX, y: sourceY },
+                { x: midX, y: sourceY },
+                { x: midX, y: targetY },
+                { x: targetX, y: targetY }
+              ]);
+            } else {
+              const midY = sourceY + dy / 2;
+              return this.gridLineFunction([
+                { x: sourceX, y: sourceY },
+                { x: sourceX, y: midY },
+                { x: targetX, y: midY },
+                { x: targetX, y: targetY }
+              ]);
+            }
+          });
+          linkGroups.select("text.linklabel").attr("x", (d) => {
+            const pathElement = this.shadowRoot?.querySelector(`path[data-link-id="${d.id}"]`);
+            if (pathElement) {
+              const pathLength = pathElement.getTotalLength();
+              const midpoint = pathElement.getPointAtLength(pathLength / 2);
+              return midpoint.x;
+            }
+            const sourceX = d.source?.x ?? d.source?.bounds?.cx() ?? 0;
+            const targetX = d.target?.x ?? d.target?.bounds?.cx() ?? 0;
+            return (sourceX + targetX) / 2;
+          }).attr("y", (d) => {
+            const pathElement = this.shadowRoot?.querySelector(`path[data-link-id="${d.id}"]`);
+            if (pathElement) {
+              const pathLength = pathElement.getTotalLength();
+              const midpoint = pathElement.getPointAtLength(pathLength / 2);
+              return midpoint.y;
+            }
+            const sourceY = d.source?.y ?? d.source?.bounds?.cy() ?? 0;
+            const targetY = d.target?.y ?? d.target?.bounds?.cy() ?? 0;
+            return (sourceY + targetY) / 2;
+          }).raise();
         }
         /**
          * Advanced edge routing with curvature calculation and overlap handling.
@@ -93438,12 +93527,19 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
          * When using prior positions with minimal iterations, WebCola may not
          * have computed bounds for nodes. This method manually creates Rectangle
          * bounds based on node x, y, width, height properties.
+         * 
+         * @param forceRecompute - If true, always recompute bounds even if they exist
          */
-        ensureNodeBounds() {
+        ensureNodeBounds(forceRecompute = false) {
           if (!this.currentLayout?.nodes || !cola?.Rectangle) return;
           for (const node of this.currentLayout.nodes) {
-            if (node.bounds && typeof node.bounds.rayIntersection === "function") {
-              continue;
+            if (!forceRecompute && node.bounds && typeof node.bounds.rayIntersection === "function") {
+              const currentCx = node.bounds.cx();
+              const currentCy = node.bounds.cy();
+              const tolerance = 1;
+              if (Math.abs(currentCx - (node.x || 0)) < tolerance && Math.abs(currentCy - (node.y || 0)) < tolerance) {
+                continue;
+              }
             }
             const halfWidth = (node.width || 50) / 2;
             const halfHeight = (node.height || 30) / 2;
@@ -93489,23 +93585,30 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
         getNodePairKey(sourceId, targetId) {
           return sourceId < targetId ? `${sourceId}:${targetId}` : `${targetId}:${sourceId}`;
         }
-        route(nodes, groups, margin, groupMargin) {
+        route(nodes = [], groups = [], margin, groupMargin) {
           nodes.forEach((d) => {
+            const bounds = d.bounds || d.innerBounds || this.createFallbackBounds(d);
             d.routerNode = {
               name: d.name,
-              bounds: d.bounds || d.innerBounds
+              bounds
             };
           });
           groups.forEach((d) => {
+            if (!d.bounds) {
+              console.warn("Grid routing group missing bounds; routing may be degraded.", d);
+            }
             d.routerNode = {
-              bounds: d.bounds.inflate(-groupMargin),
+              bounds: d.bounds?.inflate(-groupMargin) ?? d.bounds,
               children: (typeof d.groups !== "undefined" ? d.groups.map((c) => nodes.length + c.id) : []).concat(typeof d.leaves !== "undefined" ? d.leaves.map((c) => c.index) : [])
             };
           });
           let gridRouterNodes = nodes.concat(groups).map((d, i) => {
+            if (!d.routerNode) {
+              return null;
+            }
             d.routerNode.id = i;
             return d.routerNode;
-          });
+          }).filter(Boolean);
           return new cola.GridRouter(gridRouterNodes, {
             getChildren: (v) => v.children,
             getBounds: (v) => v.bounds
@@ -93513,57 +93616,127 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
         }
         gridify(nudgeGap, margin, groupMargin) {
           try {
-            const gridrouter = this.route(this.currentLayout?.nodes, this.currentLayout?.groups, margin, groupMargin);
-            let routes = [];
-            const edges = this.currentLayout?.links || [];
-            if (!edges || edges.length === 0) {
+            const nodes = this.currentLayout?.nodes ?? [];
+            const groups = this.currentLayout?.groups ?? [];
+            const edges = this.currentLayout?.links ?? [];
+            if (nodes.length === 0) {
+              console.warn("No nodes available for GridRouter; skipping gridify.");
+              return;
+            }
+            if (edges.length === 0) {
               console.warn("No edges to route in GridRouter");
               return;
             }
-            routes = gridrouter.routeEdges(edges, nudgeGap, function(e) {
-              return e.source.routerNode.id;
-            }, function(e) {
-              return e.target.routerNode.id;
+            console.log("[gridify] Node positions BEFORE ensureNodeBounds:");
+            nodes.slice(0, 3).forEach((n) => {
+              console.log(`  ${n.id}: x=${n.x?.toFixed(2)}, y=${n.y?.toFixed(2)}, bounds.cx=${n.bounds?.cx?.()?.toFixed(2)}, bounds.x=${n.bounds?.x?.toFixed(2)}`);
+            });
+            this.ensureNodeBounds(true);
+            console.log("[gridify] Node positions AFTER ensureNodeBounds:");
+            nodes.slice(0, 3).forEach((n) => {
+              console.log(`  ${n.id}: x=${n.x?.toFixed(2)}, y=${n.y?.toFixed(2)}, bounds.cx=${n.bounds?.cx?.()?.toFixed(2)}, bounds.x=${n.bounds?.x?.toFixed(2)}`);
             });
-            this.container.selectAll(".link-group").remove();
-            routes.forEach((route, index) => {
+            const gridrouter = this.route(nodes, groups, margin, groupMargin);
+            let routes = [];
+            const routableEdges = edges.filter((edge) => edge?.source?.routerNode && edge?.target?.routerNode);
+            console.log("[gridify] Total edges:", edges.length, "Routable:", routableEdges.length);
+            if (routableEdges.length !== edges.length) {
+              const unroutableEdges = edges.filter((edge) => !edge?.source?.routerNode || !edge?.target?.routerNode);
+              unroutableEdges.forEach((e) => {
+                console.warn(
+                  "[gridify] Unroutable edge:",
+                  e.id,
+                  "source routerNode:",
+                  !!e?.source?.routerNode,
+                  "target routerNode:",
+                  !!e?.target?.routerNode,
+                  "source:",
+                  e?.source?.id,
+                  "x:",
+                  e?.source?.x,
+                  "y:",
+                  e?.source?.y,
+                  "target:",
+                  e?.target?.id,
+                  "x:",
+                  e?.target?.x,
+                  "y:",
+                  e?.target?.y
+                );
+              });
+            }
+            routes = gridrouter.routeEdges(
+              routableEdges,
+              nudgeGap,
+              function(e) {
+                return e.source.routerNode.id;
+              },
+              function(e) {
+                return e.target.routerNode.id;
+              }
+            );
+            const routesByEdgeId = /* @__PURE__ */ new Map();
+            routableEdges.forEach((edge, index) => {
+              const route = routes[index];
+              if (edge?.id && route) {
+                routesByEdgeId.set(edge.id, this.adjustGridRouteForEdge(edge, route));
+              }
+            });
+            console.log("[gridify] Routes generated:", routesByEdgeId.size, "out of", routableEdges.length);
+            const linkGroups = this.container.selectAll(".link-group").data(edges, (d) => d.id ?? d);
+            linkGroups.select("path").attr("d", (edgeData) => {
+              const route = routesByEdgeId.get(edgeData.id);
+              if (!route) {
+                const sourceX = edgeData.source?.x ?? edgeData.source?.bounds?.cx() ?? 0;
+                const sourceY = edgeData.source?.y ?? edgeData.source?.bounds?.cy() ?? 0;
+                const targetX = edgeData.target?.x ?? edgeData.target?.bounds?.cx() ?? 0;
+                const targetY = edgeData.target?.y ?? edgeData.target?.bounds?.cy() ?? 0;
+                console.log(
+                  "[gridify] Fallback path for edge:",
+                  edgeData.id,
+                  "from",
+                  edgeData.source?.id,
+                  "(",
+                  sourceX,
+                  ",",
+                  sourceY,
+                  ")",
+                  "to",
+                  edgeData.target?.id,
+                  "(",
+                  targetX,
+                  ",",
+                  targetY,
+                  ")"
+                );
+                const dx = targetX - sourceX;
+                const dy = targetY - sourceY;
+                if (Math.abs(dx) > Math.abs(dy)) {
+                  const midX = sourceX + dx / 2;
+                  return this.gridLineFunction([
+                    { x: sourceX, y: sourceY },
+                    { x: midX, y: sourceY },
+                    { x: midX, y: targetY },
+                    { x: targetX, y: targetY }
+                  ]);
+                } else {
+                  const midY = sourceY + dy / 2;
+                  return this.gridLineFunction([
+                    { x: sourceX, y: sourceY },
+                    { x: sourceX, y: midY },
+                    { x: targetX, y: midY },
+                    { x: targetX, y: targetY }
+                  ]);
+                }
+              }
               const cornerradius = 5;
               const arrowwidth = 3;
               const arrowheight = 7;
-              const edgeData = edges[index];
               const p = cola.GridRouter.getRoutePath(route, cornerradius, arrowwidth, arrowheight);
-              const linkGroup = this.container.append("g").attr("class", "link-group").datum(edgeData);
-              linkGroup.append("path").attr("class", () => {
-                if (this.isAlignmentEdge(edgeData)) return "alignmentLink";
-                if (this.isInferredEdge(edgeData)) return "inferredLink";
-                return "link";
-              }).attr("data-link-id", edgeData.id).attr("stroke", (d) => d.color).attr("d", p.routepath).lower();
-              linkGroup.filter((d) => !this.isAlignmentEdge(d)).append("text").attr("class", "linklabel").text((d) => d.label);
+              const adjustedPath = this.adjustGridRouteForArrowPositioning(edgeData, p.routepath, route);
+              return adjustedPath || p.routepath;
             });
-            this.container.selectAll(".node").transition().attr("x", function(d) {
-              return d.bounds.x;
-            }).attr("y", function(d) {
-              return d.bounds.y;
-            }).attr("width", function(d) {
-              return d.bounds.width();
-            }).attr("height", function(d) {
-              return d.bounds.height();
-            });
-            this.container.selectAll(".group").transition().attr("x", function(d) {
-              return d.bounds.x;
-            }).attr("y", function(d) {
-              return d.bounds.y;
-            }).attr("width", function(d) {
-              return d.bounds.width();
-            }).attr("height", function(d) {
-              return d.bounds.height();
-            });
-            this.container.selectAll(".label").transition().attr("x", function(d) {
-              return d.bounds.cx();
-            }).attr("y", function(d) {
-              return d.bounds.cy();
-            });
-            this.gridUpdateLinkLabels(routes, edges);
+            this.gridUpdateLinkLabels(edges, routesByEdgeId);
             this.fitViewportToContent();
             this.dispatchEvent(new Event("relationsAvailable"));
           } catch (e) {
@@ -93584,23 +93757,224 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
             return;
           }
         }
-        gridUpdateLinkLabels(routes, edges) {
-          routes.forEach((route, index) => {
-            var edgeData = edges[index];
-            let combinedSegment = [];
-            route.forEach((segment) => {
-              combinedSegment = combinedSegment.concat(segment);
-            });
-            const midpointIndex = Math.floor(combinedSegment.length / 2);
-            const midpoint = {
-              x: (combinedSegment[midpointIndex - 1].x + combinedSegment[midpointIndex].x) / 2,
-              y: (combinedSegment[midpointIndex - 1].y + combinedSegment[midpointIndex].y) / 2
+        gridUpdateLinkLabels(edges, routesByEdgeId) {
+          const linkGroups = this.container.selectAll(".link-group");
+          linkGroups.filter((d) => !this.isAlignmentEdge(d)).select("text.linklabel").attr("x", (edgeData) => {
+            const pathElement = this.shadowRoot?.querySelector(`path[data-link-id="${edgeData.id}"]`);
+            if (pathElement) {
+              try {
+                const pathLength = pathElement.getTotalLength();
+                const midpoint2 = pathElement.getPointAtLength(pathLength / 2);
+                return midpoint2.x;
+              } catch (e) {
+              }
+            }
+            const midpoint = this.getGridRouteMidpoint(edgeData, routesByEdgeId);
+            return midpoint?.x ?? (edgeData.source?.x ?? edgeData.source?.bounds?.cx() ?? 0);
+          }).attr("y", (edgeData) => {
+            const pathElement = this.shadowRoot?.querySelector(`path[data-link-id="${edgeData.id}"]`);
+            if (pathElement) {
+              try {
+                const pathLength = pathElement.getTotalLength();
+                const midpoint2 = pathElement.getPointAtLength(pathLength / 2);
+                return midpoint2.y;
+              } catch (e) {
+              }
+            }
+            const midpoint = this.getGridRouteMidpoint(edgeData, routesByEdgeId);
+            return midpoint?.y ?? (edgeData.source?.y ?? edgeData.source?.bounds?.cy() ?? 0);
+          }).attr("text-anchor", "middle").attr("dominant-baseline", "middle");
+        }
+        getGridRouteMidpoint(edgeData, routesByEdgeId) {
+          const route = routesByEdgeId.get(edgeData.id);
+          if (!route) {
+            const sourceX = edgeData.source?.x ?? edgeData.source?.bounds?.cx() ?? 0;
+            const sourceY = edgeData.source?.y ?? edgeData.source?.bounds?.cy() ?? 0;
+            const targetX = edgeData.target?.x ?? edgeData.target?.bounds?.cx() ?? 0;
+            const targetY = edgeData.target?.y ?? edgeData.target?.bounds?.cy() ?? 0;
+            return {
+              x: (sourceX + targetX) / 2,
+              y: (sourceY + targetY) / 2
             };
-            const linkGroups = this.container.selectAll(".link-group");
-            linkGroups.filter(function(d) {
-              return d.id === edgeData.id;
-            }).select("text.linklabel").attr("x", midpoint.x).attr("y", midpoint.y).attr("text-anchor", "middle");
+          }
+          const points = [];
+          route.forEach((segment) => {
+            if (points.length === 0 && segment.length > 0) {
+              points.push(segment[0]);
+            }
+            if (segment.length > 1) {
+              points.push(segment[1]);
+            }
+          });
+          if (points.length < 2) {
+            return null;
+          }
+          let totalLength = 0;
+          const segmentLengths = [];
+          for (let i = 0; i < points.length - 1; i++) {
+            const dx = points[i + 1].x - points[i].x;
+            const dy = points[i + 1].y - points[i].y;
+            const length = Math.sqrt(dx * dx + dy * dy);
+            segmentLengths.push(length);
+            totalLength += length;
+          }
+          const targetLength = totalLength / 2;
+          let accumulatedLength = 0;
+          for (let i = 0; i < segmentLengths.length; i++) {
+            const segmentLength = segmentLengths[i];
+            if (accumulatedLength + segmentLength >= targetLength) {
+              const remainingLength = targetLength - accumulatedLength;
+              const t = segmentLength > 0 ? remainingLength / segmentLength : 0;
+              return {
+                x: points[i].x + t * (points[i + 1].x - points[i].x),
+                y: points[i].y + t * (points[i + 1].y - points[i].y)
+              };
+            }
+            accumulatedLength += segmentLength;
+          }
+          const midIndex = Math.floor(points.length / 2);
+          return points[midIndex];
+        }
+        adjustGridRouteForEdge(edgeData, route) {
+          if (!edgeData?.id?.startsWith("_g_")) {
+            return route;
+          }
+          const points = this.gridRouteToPoints(route);
+          if (points.length < 2) {
+            return route;
+          }
+          const adjustedPoints = this.routeGroupEdge(edgeData, points);
+          return this.pointsToGridRoute(adjustedPoints);
+        }
+        /**
+         * Adjust grid route path for proper arrow positioning at node boundaries.
+         * Ensures the path terminates at the node boundary rather than center.
+         */
+        adjustGridRouteForArrowPositioning(edgeData, routePath, route) {
+          if (!routePath || !edgeData.source || !edgeData.target) {
+            return null;
+          }
+          try {
+            const points = this.gridRouteToPoints(route);
+            if (points.length < 2) {
+              return null;
+            }
+            const source = edgeData.source;
+            const target = edgeData.target;
+            const sourceBounds = source.bounds || {
+              x: source.x - (source.width || 0) / 2,
+              y: source.y - (source.height || 0) / 2,
+              width: () => source.width || 0,
+              height: () => source.height || 0
+            };
+            const targetBounds = target.bounds || {
+              x: target.x - (target.width || 0) / 2,
+              y: target.y - (target.height || 0) / 2,
+              width: () => target.width || 0,
+              height: () => target.height || 0
+            };
+            const firstPoint = points[0];
+            const secondPoint = points.length > 1 ? points[1] : points[0];
+            const sourceIntersection = this.getRectangleIntersection(
+              sourceBounds.x + sourceBounds.width() / 2,
+              sourceBounds.y + sourceBounds.height() / 2,
+              secondPoint.x,
+              secondPoint.y,
+              sourceBounds
+            );
+            if (sourceIntersection) {
+              points[0] = sourceIntersection;
+            }
+            const lastPoint = points[points.length - 1];
+            const secondLastPoint = points.length > 1 ? points[points.length - 2] : lastPoint;
+            const targetIntersection = this.getRectangleIntersection(
+              targetBounds.x + targetBounds.width() / 2,
+              targetBounds.y + targetBounds.height() / 2,
+              secondLastPoint.x,
+              secondLastPoint.y,
+              targetBounds
+            );
+            if (targetIntersection) {
+              points[points.length - 1] = targetIntersection;
+            }
+            return this.gridLineFunction(points);
+          } catch (error) {
+            console.warn("Error adjusting grid route for arrow positioning:", error);
+            return null;
+          }
+        }
+        gridRouteToPoints(route) {
+          const points = [];
+          route.forEach((segment, index) => {
+            if (index === 0) {
+              points.push({ x: segment[0].x, y: segment[0].y });
+            }
+            points.push({ x: segment[1].x, y: segment[1].y });
           });
+          return points;
+        }
+        pointsToGridRoute(points) {
+          const segments = [];
+          for (let i = 0; i < points.length - 1; i += 1) {
+            segments.push([points[i], points[i + 1]]);
+          }
+          return segments;
+        }
+        createFallbackBounds(node) {
+          if (!cola?.Rectangle) {
+            return null;
+          }
+          const halfWidth = (node.width || 50) / 2;
+          const halfHeight = (node.height || 30) / 2;
+          const x = (node.x || 0) - halfWidth;
+          const X = (node.x || 0) + halfWidth;
+          const y = (node.y || 0) - halfHeight;
+          const Y = (node.y || 0) + halfHeight;
+          return new cola.Rectangle(x, X, y, Y);
+        }
+        /**
+         * Calculate the intersection point between a line and a rectangle.
+         * Used for positioning arrow heads at node boundaries in grid mode.
+         * 
+         * @param x1 - Start x coordinate (usually center of node)
+         * @param y1 - Start y coordinate (usually center of node)
+         * @param x2 - End x coordinate (next point in path)
+         * @param y2 - End y coordinate (next point in path)
+         * @param bounds - Rectangle bounds with x, y, width(), height()
+         * @returns Intersection point or null if no intersection
+         */
+        getRectangleIntersection(x1, y1, x2, y2, bounds) {
+          const rectLeft = bounds.x;
+          const rectRight = bounds.x + bounds.width();
+          const rectTop = bounds.y;
+          const rectBottom = bounds.y + bounds.height();
+          const dx = x2 - x1;
+          const dy = y2 - y1;
+          if (dx === 0 && dy === 0) {
+            return { x: x1, y: y1 };
+          }
+          let tMin = 0;
+          let tMax = 1;
+          if (dx !== 0) {
+            const t1 = (rectLeft - x1) / dx;
+            const t2 = (rectRight - x1) / dx;
+            tMin = Math.max(tMin, Math.min(t1, t2));
+            tMax = Math.min(tMax, Math.max(t1, t2));
+          }
+          if (dy !== 0) {
+            const t1 = (rectTop - y1) / dy;
+            const t2 = (rectBottom - y1) / dy;
+            tMin = Math.max(tMin, Math.min(t1, t2));
+            tMax = Math.min(tMax, Math.max(t1, t2));
+          }
+          if (tMin > tMax) {
+            return null;
+          }
+          const t = tMin > 0 ? tMin : tMax;
+          return {
+            x: x1 + t * dx,
+            y: y1 + t * dy
+          };
         }
         /**
          * Routes all link paths with advanced curvature and collision handling.
@@ -94702,6 +95076,45 @@ VVbdfjptxz|~\x80\x82\x84\xA6\xA8W\b
         transform: none;
       }
 
+      /* Routing control styling */
+      #routing-control {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-left: 16px;
+        padding-left: 16px;
+        border-left: 1px solid #e5e7eb;
+      }
+
+      #routing-control label {
+        font-size: 12px;
+        font-weight: 500;
+        color: #6b7280;
+        user-select: none;
+      }
+
+      #routing-mode {
+        padding: 4px 8px;
+        border: 1px solid #d1d5db;
+        background: #f9fafb;
+        color: #374151;
+        border-radius: 4px;
+        font-size: 12px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        outline: none;
+      }
+
+      #routing-mode:hover {
+        background: #f3f4f6;
+        border-color: #9ca3af;
+      }
+
+      #routing-mode:focus {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+      }
+
       /* Modal Overlay and Dialog */
       .modal-overlay {
         position: fixed;