reactflow-edge-routing 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactflow-edge-routing",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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;
 };
@@ -199,6 +203,108 @@ function getRouterFlags(connectorType: ConnectorType | undefined): number {
   }
 }
 
+// ---- Label Positioning Helpers ----
+
+/** Walk path points and return the point at fraction t (0–1) of total arc length. */
+function pointAtFraction(points: { x: number; y: number }[], t: number): { x: number; y: number } {
+  if (points.length === 1) return points[0];
+  let total = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i].x - points[i - 1].x;
+    const dy = points[i].y - points[i - 1].y;
+    total += Math.sqrt(dx * dx + dy * dy);
+  }
+  const target = total * Math.max(0, Math.min(1, t));
+  let walked = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i].x - points[i - 1].x;
+    const dy = points[i].y - points[i - 1].y;
+    const segLen = Math.sqrt(dx * dx + dy * dy);
+    if (walked + segLen >= target) {
+      const frac = segLen > 0 ? (target - walked) / segLen : 0;
+      return { x: points[i - 1].x + dx * frac, y: points[i - 1].y + dy * frac };
+    }
+    walked += segLen;
+  }
+  return points[points.length - 1];
+}
+
+/**
+ * For each edge that has routed points, compute the fraction t (0–1) along
+ * the path where its label should sit. Edges sharing the same source handle
+ * are staggered so their labels don't overlap.
+ */
+function buildLabelFractions(
+  edges: FlowEdge[],
+  edgePoints: Map<string, { x: number; y: number }[]>
+): Map<string, number> {
+  const groups = new Map<string, string[]>();
+  for (const edge of edges) {
+    if (!edgePoints.has(edge.id)) continue;
+    const key = `${edge.source}|${edge.sourceHandle ?? ""}`;
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key)!.push(edge.id);
+  }
+  const fractions = new Map<string, number>();
+  for (const group of groups.values()) {
+    const n = group.length;
+    const step = Math.min(0.12, 0.4 / Math.max(1, n - 1));
+    for (let i = 0; i < n; i++) {
+      fractions.set(group[i], 0.5 + (i - (n - 1) / 2) * step);
+    }
+  }
+  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 except the source/target nodes. */
+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 {
+  for (const node of nodes) {
+    if (node.id === srcNodeId || node.id === tgtNodeId) continue;
+    const bounds = Geometry.getNodeBoundsAbsolute(node, nodeById);
+    if (segmentIntersectsRect(srcPt, tgtPt, bounds, buffer)) return true;
+  }
+  return false;
+}
+
 // ---- Geometry ----
 
 export class Geometry {
@@ -867,16 +973,53 @@ 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)
         : edgeRounding > 0
           ? PathBuilder.polylineToPath(points.length, (i) => points[i], { cornerRadius: edgeRounding })
           : PathBuilder.pointsToSvgPath(points);
-      const mid = Math.floor(points.length / 2);
-      const midP = points[mid];
+      const t = labelFractions.get(edgeId) ?? 0.5;
+      const midP = pointAtFraction(points, t);
       const labelP = gridSize > 0 ? Geometry.snapToGrid(midP.x, midP.y, gridSize) : midP;
       const first = points[0];
       const last = points[points.length - 1];
@@ -1036,18 +1179,53 @@ 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)
         : edgeRounding > 0
           ? PathBuilder.polylineToPath(points.length, (i) => points[i], { cornerRadius: edgeRounding })
           : PathBuilder.pointsToSvgPath(points);
-
-
-      const mid = Math.floor(points.length / 2);
-      const midP = points[mid];
+      const t = labelFractions.get(edgeId) ?? 0.5;
+      const midP = pointAtFraction(points, t);
       const labelP = gridSize > 0 ? Geometry.snapToGrid(midP.x, midP.y, gridSize) : midP;
       const first = points[0];
       const last = points[points.length - 1];

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);