Merge pull request #4010 from xyflow/fix-cancel-connection

Connections can be correctly cancelled

packages/react/src/components/Handle/index.tsx

@@ -140,6 +140,7 @@ function HandleComponent(
         onConnect: onConnectExtended,
         isValidConnection: isValidConnection || currentStore.isValidConnection,
         getTransform: () => store.getState().transform,
+        getConnectionStartHandle: () => store.getState().connectionStartHandle,
       });
     }
 

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -101,7 +101,8 @@
         onConnectEnd: (event) => {
           $onConnectEndAction?.(event);
         },
-        getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom]
+        getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom],
+        getConnectionStartHandle: () => $connection.startHandle
       });
     }
   }

packages/system/src/xyhandle/XYHandle.ts

@@ -38,6 +38,7 @@ export type OnPointerDownParams = {
   isValidConnection?: IsValidConnection;
   onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
   getTransform: () => Transform;
+  getConnectionStartHandle: () => ConnectingHandle | null;
 };
 
 export type IsValidParams = {
@@ -91,6 +92,7 @@ function onPointerDown(
     onEdgeUpdateEnd,
     updateConnection,
     getTransform,
+    getConnectionStartHandle,
   }: OnPointerDownParams
 ) {
   // when xyflow is used inside a shadow root we can't use document
@@ -149,6 +151,10 @@ function onPointerDown(
   onConnectStart?.(event, { nodeId, handleId, handleType });
 
   function onPointerMove(event: MouseEvent | TouchEvent) {
+    if (!getConnectionStartHandle()) {
+      onPointerUp(event);
+    }
+
     const transform = getTransform();
     connectionPosition = getEventPosition(event, containerBounds);
     closestHandle = getClosestHandle(