From 8ce6efd1b0eb43732bf822389a080b6c6ea822e4 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 6 Aug 2024 10:54:10 +0200
Subject: [PATCH] fixed easy connect example

---
 .../example-flows/EasyConnect/CustomNode.jsx     | 16 ++++++----------
 .../example-flows/EasyConnect/utils.js           |  2 +-
 2 files changed, 7 insertions(+), 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
index 513a10300..d6dafee57 100644
--- 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
index 980afe3a4..e40244ba0 100644
--- 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;