reactflow-edge-routing 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactflow-edge-routing",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Orthogonal edge routing for React Flow using obstacle-router. Edges route around nodes while pins stay fixed at their anchor points.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/routing-core.ts

@@ -6,6 +6,8 @@
  * shape an edge belongs to and won't route through it.
  */
 
+import { getBezierPath, getSmoothStepPath, getStraightPath, Position } from "@xyflow/system";
+
 import {
   Router as AvoidRouter,
   Point as AvoidPoint,
@@ -120,6 +122,8 @@ export type AvoidRouterOptions = {
   shouldSplitEdgesNearHandle?: boolean;
   /** Auto-select best connection side based on relative node positions. Default: true */
   autoBestSideConnection?: boolean;
+  /** When true, only route edges whose direct path is blocked by an obstacle. Unblocked edges get a straight line. Default: true */
+  routeOnlyWhenBlocked?: boolean;
   /** Debounce delay for routing updates (ms). Default: 0 */
   debounceMs?: number;
 };
@@ -252,6 +256,71 @@ function buildLabelFractions(
   return fractions;
 }
 
+/** Derive the React Flow Position (Left/Right/Top/Bottom) from a handle point and its stub point. */
+function sideFromStub(
+  handlePt: { x: number; y: number },
+  stubPt: { x: number; y: number }
+): Position {
+  const dx = stubPt.x - handlePt.x;
+  const dy = stubPt.y - handlePt.y;
+  if (Math.abs(dx) >= Math.abs(dy)) return dx >= 0 ? Position.Right : Position.Left;
+  return dy >= 0 ? Position.Bottom : Position.Top;
+}
+
+/** Returns true if the segment p1→p2 passes through the rectangle (with optional buffer). Uses slab method. */
+function segmentIntersectsRect(
+  p1: { x: number; y: number },
+  p2: { x: number; y: number },
+  rect: { x: number; y: number; w: number; h: number },
+  buffer = 0
+): boolean {
+  const rx = rect.x - buffer, ry = rect.y - buffer;
+  const rw = rect.w + buffer * 2, rh = rect.h + buffer * 2;
+  const inside = (p: { x: number; y: number }) => p.x >= rx && p.x <= rx + rw && p.y >= ry && p.y <= ry + rh;
+  if (inside(p1) || inside(p2)) return true;
+  const dx = p2.x - p1.x, dy = p2.y - p1.y;
+  let tMin = 0, tMax = 1;
+  if (Math.abs(dx) < 1e-10) { if (p1.x < rx || p1.x > rx + rw) return false; }
+  else { const t1 = (rx - p1.x) / dx, t2 = (rx + rw - p1.x) / dx; tMin = Math.max(tMin, Math.min(t1, t2)); tMax = Math.min(tMax, Math.max(t1, t2)); }
+  if (Math.abs(dy) < 1e-10) { if (p1.y < ry || p1.y > ry + rh) return false; }
+  else { const t1 = (ry - p1.y) / dy, t2 = (ry + rh - p1.y) / dy; tMin = Math.max(tMin, Math.min(t1, t2)); tMax = Math.min(tMax, Math.max(t1, t2)); }
+  return tMin <= tMax;
+}
+
+/** Returns true if the direct line from srcPt to tgtPt is blocked by any node,
+ *  including the source/target nodes themselves (e.g. edge going backward through its own node). */
+function isEdgeDirectPathBlocked(
+  srcPt: { x: number; y: number },
+  tgtPt: { x: number; y: number },
+  srcNodeId: string,
+  tgtNodeId: string,
+  nodes: FlowNode[],
+  nodeById: Map<string, FlowNode>,
+  buffer: number
+): boolean {
+  const dx = tgtPt.x - srcPt.x, dy = tgtPt.y - srcPt.y;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  for (const node of nodes) {
+    const bounds = Geometry.getNodeBoundsAbsolute(node, nodeById);
+    if (node.id === srcNodeId || node.id === tgtNodeId) {
+      // The handle point sits on the node border, so a plain intersection check would
+      // always trigger. Nudge 1 px along the segment away from the handle and check
+      // from there — avoids the border false-positive while still catching lines that
+      // go backward through the node body.
+      if (len < 1e-6) continue;
+      const isSrc = node.id === srcNodeId;
+      const nudged = isSrc
+        ? { x: srcPt.x + dx / len, y: srcPt.y + dy / len }
+        : { x: tgtPt.x - dx / len, y: tgtPt.y - dy / len };
+      const otherEnd = isSrc ? tgtPt : srcPt;
+      if (segmentIntersectsRect(nudged, otherEnd, bounds, buffer)) return true;
+    } else {
+      if (segmentIntersectsRect(srcPt, tgtPt, bounds, buffer)) return true;
+    }
+  }
+  return false;
+}
+
 // ---- Geometry ----
 
 export class Geometry {
@@ -920,9 +989,45 @@ export class RoutingEngine {
       }
     }
 
+    // For unblocked edges, generate the React Flow fallback path directly.
     const connType = opts.connectorType ?? "orthogonal";
+    const borderRadius = opts.edgeRounding ?? 0;
+    const directRoutes = new Map<string, { path: string; labelX: number; labelY: number; srcPt: { x: number; y: number }; tgtPt: { x: number; y: number } }>();
+    if (opts.routeOnlyWhenBlocked !== false) {
+      const edgeById = new Map(edges.map((e) => [e.id, e]));
+      const buffer = opts.shapeBufferDistance ?? 8;
+      for (const [edgeId, points] of edgePoints) {
+        const edge = edgeById.get(edgeId);
+        if (!edge) continue;
+        const src = points[0], tgt = points[points.length - 1];
+        if (!isEdgeDirectPathBlocked(src, tgt, edge.source, edge.target, nodes, nodeById, buffer)) {
+          const stub = stubMap.get(edgeId);
+          if (stub) {
+            const srcPos = sideFromStub(stub.srcHandlePt, stub.srcStubPt);
+            const tgtPos = sideFromStub(stub.tgtHandlePt, stub.tgtStubPt);
+            const { x: sx, y: sy } = stub.srcHandlePt;
+            const { x: tx, y: ty } = stub.tgtHandlePt;
+            let path: string; let labelX: number; let labelY: number;
+            if (connType === "bezier") {
+              [path, labelX, labelY] = getBezierPath({ sourceX: sx, sourceY: sy, sourcePosition: srcPos, targetX: tx, targetY: ty, targetPosition: tgtPos });
+            } else if (connType === "polyline") {
+              [path, labelX, labelY] = getStraightPath({ sourceX: sx, sourceY: sy, targetX: tx, targetY: ty });
+            } else {
+              [path, labelX, labelY] = getSmoothStepPath({ sourceX: sx, sourceY: sy, sourcePosition: srcPos, targetX: tx, targetY: ty, targetPosition: tgtPos, borderRadius });
+            }
+            directRoutes.set(edgeId, { path, labelX, labelY, srcPt: stub.srcHandlePt, tgtPt: stub.tgtHandlePt });
+          }
+        }
+      }
+    }
+
     const labelFractions = buildLabelFractions(edges, edgePoints);
     for (const [edgeId, points] of edgePoints) {
+      const direct = directRoutes.get(edgeId);
+      if (direct) {
+        result[edgeId] = { path: direct.path, labelX: direct.labelX, labelY: direct.labelY, sourceX: direct.srcPt.x, sourceY: direct.srcPt.y, targetX: direct.tgtPt.x, targetY: direct.tgtPt.y };
+        continue;
+      }
       const edgeRounding = opts.edgeRounding ?? 0;
       const path = connType === "bezier"
         ? PathBuilder.routedBezierPath(points)
@@ -1090,9 +1195,45 @@ export class PersistentRouter {
       }
     }
 
+    // For unblocked edges, generate the React Flow fallback path directly.
     const connType = opts.connectorType ?? "orthogonal";
+    const borderRadius = opts.edgeRounding ?? 0;
+    const directRoutes = new Map<string, { path: string; labelX: number; labelY: number; srcPt: { x: number; y: number }; tgtPt: { x: number; y: number } }>();
+    if (opts.routeOnlyWhenBlocked !== false) {
+      const edgeById = new Map(this.prevEdges.map((e) => [e.id, e]));
+      const buffer = opts.shapeBufferDistance ?? 8;
+      for (const [edgeId, points] of edgePoints) {
+        const edge = edgeById.get(edgeId);
+        if (!edge) continue;
+        const src = points[0], tgt = points[points.length - 1];
+        if (!isEdgeDirectPathBlocked(src, tgt, edge.source, edge.target, this.prevNodes, this.nodeById, buffer)) {
+          const stub = stubMap.get(edgeId);
+          if (stub) {
+            const srcPos = sideFromStub(stub.srcHandlePt, stub.srcStubPt);
+            const tgtPos = sideFromStub(stub.tgtHandlePt, stub.tgtStubPt);
+            const { x: sx, y: sy } = stub.srcHandlePt;
+            const { x: tx, y: ty } = stub.tgtHandlePt;
+            let path: string; let labelX: number; let labelY: number;
+            if (connType === "bezier") {
+              [path, labelX, labelY] = getBezierPath({ sourceX: sx, sourceY: sy, sourcePosition: srcPos, targetX: tx, targetY: ty, targetPosition: tgtPos });
+            } else if (connType === "polyline") {
+              [path, labelX, labelY] = getStraightPath({ sourceX: sx, sourceY: sy, targetX: tx, targetY: ty });
+            } else {
+              [path, labelX, labelY] = getSmoothStepPath({ sourceX: sx, sourceY: sy, sourcePosition: srcPos, targetX: tx, targetY: ty, targetPosition: tgtPos, borderRadius });
+            }
+            directRoutes.set(edgeId, { path, labelX, labelY, srcPt: stub.srcHandlePt, tgtPt: stub.tgtHandlePt });
+          }
+        }
+      }
+    }
+
     const labelFractions = buildLabelFractions(this.prevEdges, edgePoints);
     for (const [edgeId, points] of edgePoints) {
+      const direct = directRoutes.get(edgeId);
+      if (direct) {
+        result[edgeId] = { path: direct.path, labelX: direct.labelX, labelY: direct.labelY, sourceX: direct.srcPt.x, sourceY: direct.srcPt.y, targetX: direct.tgtPt.x, targetY: direct.tgtPt.y };
+        continue;
+      }
       const edgeRounding = opts.edgeRounding ?? 0;
       const path = connType === "bezier"
         ? PathBuilder.routedBezierPath(points)

package/src/use-edge-routing.ts

@@ -69,6 +69,8 @@ export interface UseEdgeRoutingOptions {
   /** When true, each edge gets its own stub spread by handleSpacing (fan-out). When false, all edges share one stub and libavoid routes them apart after. Default: true */
   shouldSplitEdgesNearHandle?: boolean;
   autoBestSideConnection?: boolean;
+  /** When true, only route edges whose direct path is blocked by an obstacle. Default: true */
+  routeOnlyWhenBlocked?: boolean;
   debounceMs?: number;
 
   /** If true, re-route in real time while dragging instead of on drag stop. Default: false */
@@ -132,6 +134,7 @@ function toRouterOptions(opts?: UseEdgeRoutingOptions): AvoidRouterOptions {
     // bezier defaults to autoBestSideConnection: true — explicit handles
     // make no visual sense on curved paths, so auto-side is the right default.
     autoBestSideConnection: opts?.autoBestSideConnection ?? (opts?.connectorType === "bezier" ? true : DEFAULT_OPTIONS.autoBestSideConnection),
+    routeOnlyWhenBlocked: opts?.routeOnlyWhenBlocked ?? true,
     debounceMs: opts?.debounceMs ?? DEFAULT_OPTIONS.debounceMs,
   };
 }
@@ -195,9 +198,37 @@ export function useEdgeRouting(
 
   // Full reset on position changes — nodesRef.current must have updated positions
   // by the time this fires (ensured by the debounce + rAF delay).
+  // For bezier, only re-route edges connected to the changed nodes; all others
+  // keep their current routes (merged by the worker listener).
   const sendIncrementalChanges = useCallback(
-    (_nodeIds: string[]) => { sendReset(); },
-    [sendReset]
+    (nodeIds: string[]) => {
+      if (optsRef.current.connectorType !== "bezier" || nodeIds.length === 0) {
+        sendReset();
+        return;
+      }
+
+      const changedSet = new Set(nodeIds);
+      const affectedEdges = edgesRef.current.filter(
+        (e) => changedSet.has(e.source) || changedSet.has(e.target)
+      );
+
+      if (affectedEdges.length === 0 || affectedEdges.length === edgesRef.current.length) {
+        sendReset();
+        return;
+      }
+
+      if (!workerLoaded) return;
+      const enrich = enrichNodeRef.current;
+      const nodes = nodesRef.current;
+      const enrichedNodes = enrich ? nodes.map(enrich) : nodes;
+      post({
+        command: "route",
+        nodes: enrichedNodes as unknown as FlowNode[],
+        edges: affectedEdges as unknown as FlowEdge[],
+        options: optsRef.current,
+      });
+    },
+    [sendReset, post, workerLoaded]
   );
 
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);