@octaviaflow/core 3.0.18-beta.11 → 3.0.18-beta.13

package/dist/index.cjs

@@ -29797,6 +29797,9 @@ function createHandleRegistry() {
     resolve(nodeId, type, handleId) {
       return map.get(key(nodeId, type, handleId));
     },
+    all() {
+      return Array.from(map.values());
+    },
     subscribe(listener) {
       listeners.add(listener);
       return () => {
@@ -29837,6 +29840,8 @@ function FlowEdgeImpl({
   const targetDesc = registry.resolve(targetNode.id, "target", targetHandleId);
   const sourceSide = sourceDesc?.side ?? sourceNode.sourcePosition ?? "bottom";
   const targetSide = targetDesc?.side ?? targetNode.targetPosition ?? "top";
+  const sourceRoute = sourceDesc?.routeSide ?? sourceSide;
+  const targetRoute = targetDesc?.routeSide ?? targetSide;
   const sourceIndex = sourceDesc?.index ?? 0;
   const sourceTotal = sourceDesc?.total ?? 1;
   const targetIndex = targetDesc?.index ?? 0;
@@ -29844,14 +29849,14 @@ function FlowEdgeImpl({
   const rawStart = handleCentre(sourceNode, sourceSide, sourceIndex, sourceTotal);
   const rawEnd = handleCentre(targetNode, targetSide, targetIndex, targetTotal);
   const HANDLE_GAP = 8;
-  const start = offsetAlongSide3(rawStart, sourceSide, HANDLE_GAP);
-  const end = offsetAlongSide3(rawEnd, targetSide, HANDLE_GAP);
+  const start = offsetAlongSide3(rawStart, sourceRoute, HANDLE_GAP);
+  const end = offsetAlongSide3(rawEnd, targetRoute, HANDLE_GAP);
   const routing = edge.routing ?? "bezier";
-  const { d, midX, midY } = buildEdgePath(routing, start, sourceSide, end, targetSide, {
+  const { d, midX, midY } = buildEdgePath(routing, start, sourceRoute, end, targetRoute, {
     curvature,
     borderRadius
   });
-  const { d: hitD } = buildEdgePath(routing, rawStart, sourceSide, rawEnd, targetSide, {
+  const { d: hitD } = buildEdgePath(routing, rawStart, sourceRoute, rawEnd, targetRoute, {
     curvature,
     borderRadius
   });
@@ -30169,6 +30174,7 @@ var DEFAULT_HANDLE_ID = "default";
 function Handle({
   type,
   position,
+  routeSide,
   id = DEFAULT_HANDLE_ID,
   isConnectable = true,
   isConnectableStart,
@@ -30191,11 +30197,14 @@ function Handle({
       handleId: id,
       type,
       side: position,
+      routeSide: routeSide ?? position,
       index,
-      total
+      total,
+      canStart,
+      canEnd
     });
     return dispose;
-  }, [registry, node.id, id, type, position, index, total]);
+  }, [registry, node.id, id, type, position, routeSide, index, total, canStart, canEnd]);
   const handlePointerDown = (e) => {
     if (!canStart) return;
     e.stopPropagation();
@@ -31331,49 +31340,54 @@ function FlowCanvas2(props) {
       }
       const c = connRef.current;
       if (c && c.pointerId === e.pointerId) {
-        let handleEl = null;
-        if (typeof document !== "undefined") {
-          const stack = document.elementsFromPoint(e.clientX, e.clientY);
-          for (const el of stack) {
-            const candidate = el.closest(
-              "[data-handle-id]"
-            );
-            if (!candidate) continue;
-            if (candidate.dataset.handleNodeId === c.from.nodeId) continue;
-            handleEl = candidate;
-            break;
+        const rect = containerRef.current?.getBoundingClientRect();
+        const flowPos = rect ? screenToFlow({ x: e.clientX - rect.left, y: e.clientY - rect.top }, vp) : { x: 0, y: 0 };
+        const snapRadius = 26 / Math.max(0.1, vp.zoom);
+        let bestDesc = null;
+        let bestDist = snapRadius;
+        for (const desc of handleRegistry.all()) {
+          if (desc.nodeId === c.from.nodeId) continue;
+          if (desc.type === c.from.handleType) continue;
+          if (!desc.canEnd) continue;
+          const targetNode = nodesRef.current.find((n) => n.id === desc.nodeId);
+          if (!targetNode || targetNode.hidden) continue;
+          const centre = handleCentre(targetNode, desc.side, desc.index, desc.total);
+          const dist = Math.hypot(centre.x - flowPos.x, centre.y - flowPos.y);
+          if (dist < bestDist) {
+            bestDist = dist;
+            bestDesc = desc;
           }
         }
         let connection = null;
         let connectedTo;
-        if (handleEl) {
-          const targetNodeId = handleEl.dataset.handleNodeId;
-          const targetHandleId = handleEl.dataset.handleId;
-          const targetType = handleEl.dataset.handleType;
-          const connectableEnd = handleEl.dataset.handleConnectableEnd === "true";
-          if (connectableEnd && (targetNodeId !== c.from.nodeId || targetHandleId !== c.from.handleId) && targetType !== c.from.handleType) {
-            const source = c.from.handleType === "source" ? c.from : { nodeId: targetNodeId, handleId: targetHandleId, handleType: "source" };
-            const target2 = c.from.handleType === "target" ? c.from : { nodeId: targetNodeId, handleId: targetHandleId, handleType: "target" };
-            connection = {
-              source: source.nodeId,
-              sourceHandle: source.handleId,
-              target: target2.nodeId,
-              targetHandle: target2.handleId
-            };
-            connectedTo = {
-              nodeId: targetNodeId,
-              handleId: targetHandleId,
-              handleType: targetType
-            };
-            const validator = isValidConnectionRef.current;
-            if (validator && !validator(connection)) {
-              connection = null;
-              connectedTo = void 0;
-            }
+        if (bestDesc) {
+          const source = c.from.handleType === "source" ? c.from : {
+            nodeId: bestDesc.nodeId,
+            handleId: bestDesc.handleId,
+            handleType: "source"
+          };
+          const target2 = c.from.handleType === "target" ? c.from : {
+            nodeId: bestDesc.nodeId,
+            handleId: bestDesc.handleId,
+            handleType: "target"
+          };
+          connection = {
+            source: source.nodeId,
+            sourceHandle: source.handleId,
+            target: target2.nodeId,
+            targetHandle: target2.handleId
+          };
+          connectedTo = {
+            nodeId: bestDesc.nodeId,
+            handleId: bestDesc.handleId,
+            handleType: bestDesc.type
+          };
+          const validator = isValidConnectionRef.current;
+          if (validator && !validator(connection)) {
+            connection = null;
+            connectedTo = void 0;
           }
         }
-        const rect = containerRef.current?.getBoundingClientRect();
-        const flowPos = rect ? screenToFlow({ x: e.clientX - rect.left, y: e.clientY - rect.top }, vp) : { x: 0, y: 0 };
         const endState = {
           cancelled: !connection,
           position: { x: e.clientX, y: e.clientY },