fixed connection snapping & updated internal easy-connect example

examples/react/src/examples/EasyConnect/CustomNode.tsx

@@ -1,13 +1,10 @@
-import { Handle, NodeProps, Position, ReactFlowState, useStore } from '@xyflow/react';
-
-const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionStartHandle?.nodeId;
+import { Handle, NodeProps, Position, useConnection } from '@xyflow/react';
 
 export default function CustomNode({ id }: NodeProps) {
-  const connectionNodeId = useStore(connectionNodeIdSelector);
-  const isConnecting = !!connectionNodeId;
-  const isTarget = connectionNodeId && connectionNodeId !== id;
+  const connection = useConnection();
+
+  const isTarget = connection.inProgress && connection.fromNode.id !== id;
 
-  const targetHandleStyle = { zIndex: isTarget ? 3 : 1 };
   const label = isTarget ? 'Drop here' : 'Drag to connect';
 
   return (
@@ -19,17 +16,13 @@ export default function CustomNode({ id }: NodeProps) {
           backgroundColor: isTarget ? '#ffcce3' : '#ccd9f6',
         }}
       >
-        {!isConnecting && (
-          <Handle className="customHandle" style={{ zIndex: 2 }} position={Position.Right} type="source" />
-        )}
+        {/* If handles are conditionally rendered and not present initially, you need to update the node internals https://reactflow.dev/docs/api/hooks/use-update-node-internals/ */}
+        {/* In this case we don't need to use useUpdateNodeInternals, since !connection.inProgress is true at the beginning and all handles are rendered initially. */}
+        {!connection.inProgress && <Handle className="customHandle" position={Position.Right} type="source" id="src" />}
 
-        <Handle
-          className="customHandle"
-          style={targetHandleStyle}
-          position={Position.Left}
-          type="target"
-          isConnectableStart={false}
-        />
+        {/* We want to disable the target handle, if the connection was started from this node */}
+        {/* {(!connection.inProgress || isTarget) && ( */}
+        <Handle className="customHandle" position={Position.Left} type="target" isConnectableStart={false} id="trgt" />
         {label}
       </div>
     </div>

examples/react/src/examples/EasyConnect/FloatingEdge.tsx

@@ -1,5 +1,4 @@
-import { useCallback } from 'react';
-import { useStore, getStraightPath, EdgeProps, useInternalNode } from '@xyflow/react';
+import { EdgeProps, getStraightPath, useInternalNode } from '@xyflow/react';
 
 import { getEdgeParams } from './utils.js';
 

examples/react/src/examples/EasyConnect/index.tsx

@@ -1,5 +1,15 @@
 import { useCallback } from 'react';
-import { ReactFlow, Node, Edge, addEdge, useNodesState, useEdgesState, MarkerType, OnConnect } from '@xyflow/react';
+import {
+  ReactFlow,
+  Node,
+  Edge,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  MarkerType,
+  OnConnect,
+  ConnectionMode,
+} from '@xyflow/react';
 
 import CustomNode from './CustomNode';
 import FloatingEdge from './FloatingEdge';
@@ -64,6 +74,8 @@ const EasyConnectExample = () => {
 
   const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
+  console.log(edges);
+
   return (
     <ReactFlow
       nodes={nodes}

examples/react/src/examples/EasyConnect/utils.tsx

@@ -19,12 +19,11 @@ function getNodeIntersection(intersectionNode: InternalNode, targetNode: Interna
 
   const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
   const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
-  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1) || 1);
   const xx3 = a * xx1;
   const yy3 = a * yy1;
   const x = w * (xx3 + yy3) + x2;
   const y = h * (-xx3 + yy3) + y2;
-
   return { x, y };
 }