reactflow-edge-routing 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactflow-edge-routing",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "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/index.ts

@@ -34,7 +34,7 @@ export { useEdgeRouting } from "./use-edge-routing";
 export type { UseEdgeRoutingOptions, UseEdgeRoutingResult } from "./use-edge-routing";
 
 export { useRoutedEdgePath } from "./use-routed-edge-path";
-export type { UseRoutedEdgePathParams } from "./use-routed-edge-path";
+export type { UseRoutedEdgePathParams, RoutePinPoints } from "./use-routed-edge-path";
 
 // Collision resolution
 export { resolveCollisions } from "./resolve-collisions";

package/src/use-routed-edge-path.ts

@@ -56,8 +56,13 @@ function getFallback(
   return getStraightPath({ sourceX, sourceY, targetX, targetY });
 }
 
+export type RoutePinPoints = {
+  sourceX: number; sourceY: number;
+  targetX: number; targetY: number;
+};
+
 /**
- * Returns [path, labelX, labelY, wasRouted, controlPoints] for a routed edge.
+ * Returns [path, labelX, labelY, wasRouted, controlPoints, pinPoints] for a routed edge.
  *
  * - While a connected node is being dragged → dashed fallback
  * - If a routed path exists for this edge → solid routed path
@@ -67,10 +72,13 @@ function getFallback(
  * the source and target anchor points). Use them to build an editable edge on
  * top of auto-routing — e.g. render draggable handles at each waypoint.
  * When no route is available (fallback), `controlPoints` is an empty array.
+ *
+ * `pinPoints` are the exact source/target positions the router snapped to.
+ * Falls back to the passed-in sourceX/Y, targetX/Y when no route is available.
  */
 export function useRoutedEdgePath(
   params: UseRoutedEdgePathParams
-): [path: string, labelX: number, labelY: number, wasRouted: boolean, controlPoints: { x: number; y: number }[]] {
+): [path: string, labelX: number, labelY: number, wasRouted: boolean, controlPoints: { x: number; y: number }[], pinPoints: RoutePinPoints] {
   const {
     id, sourceX, sourceY, targetX, targetY,
     sourcePosition, targetPosition,
@@ -81,6 +89,8 @@ export function useRoutedEdgePath(
   const draggingNodeIds = useEdgeRoutingStore((s) => s.draggingNodeIds);
 
   return useMemo(() => {
+    const fallbackPins: RoutePinPoints = { sourceX, sourceY, targetX, targetY };
+
     // If a connected node is being dragged, show fallback
     const isDragging =
       draggingNodeIds.size > 0 &&
@@ -89,7 +99,7 @@ export function useRoutedEdgePath(
 
     if (isDragging) {
       const [path, lx, ly] = getFallback(sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, connectorType, params.borderRadius, offset);
-      return [path, lx, ly, false, []];
+      return [path, lx, ly, false, [], fallbackPins];
     }
 
     // If we have a routed path, use it (no stale check — trust the router)
@@ -99,11 +109,15 @@ export function useRoutedEdgePath(
       const controlPoints = route.points && route.points.length > 2
         ? route.points.slice(1, -1)
         : [];
-      return [route.path, route.labelX, route.labelY, true, controlPoints];
+      const pins: RoutePinPoints = {
+        sourceX: route.sourceX, sourceY: route.sourceY,
+        targetX: route.targetX, targetY: route.targetY,
+      };
+      return [route.path, route.labelX, route.labelY, true, controlPoints, pins];
     }
 
     // No route yet — show fallback
     const [path, lx, ly] = getFallback(sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, connectorType, params.borderRadius, offset);
-    return [path, lx, ly, false, []];
+    return [path, lx, ly, false, [], fallbackPins];
   }, [route, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, offset, connectorType, params.borderRadius, source, target, draggingNodeIds]);
 }