fixed easy connect example

xyflow · Aug 6, 2024 · 8ce6efd · 8ce6efd
1 parent 12d90ef
commit 8ce6efd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/sites/reactflow.dev/src/components/example-viewer/example-flows/EasyConnect/CustomNode.jsx b/sites/reactflow.dev/src/components/example-viewer/example-flows/EasyConnect/CustomNode.jsx
@@ -3,8 +3,7 @@ import { Handle, Position, useConnection } from '@xyflow/react';
 export default function CustomNode({ id }) {
   const connection = useConnection();
 
-  const isConnecting = !!connection.startHandle;
-  const isTarget = connection.startHandle && connection.startHandle.nodeId !== id;
+  const isTarget = connection.inProgress && connection.fromNode.id !== id;
 
   const label = isTarget ? 'Drop here' : 'Drag to connect';
 
@@ -19,20 +18,17 @@ export default function CustomNode({ id }) {
       >
         {/* 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 !isConnecting is true at the beginning and all handles are rendered initially. */}
-        {!isConnecting && (
+        {!connection.inProgress && (
           <Handle
             className="customHandle"
             position={Position.Right}
             type="source"
           />
         )}
-
-        <Handle
-          className="customHandle"
-          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} />
+        )}
         {label}
       </div>
     </div>

diff --git a/sites/reactflow.dev/src/components/example-viewer/example-flows/EasyConnect/utils.js b/sites/reactflow.dev/src/components/example-viewer/example-flows/EasyConnect/utils.js
@@ -19,7 +19,7 @@ function getNodeIntersection(intersectionNode, targetNode) {
 
   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;