Merge pull request #4549 from xyflow/refactor/on-connect-end-param

Refactor/on connect end param

.changeset/wild-seas-guess.md

@@ -0,0 +1,7 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+'@xyflow/system': patch
+---
+
+feat(onConnectEnd): pass connectionState param

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

@@ -19,6 +19,8 @@ import {
   type HandleType,
   ConnectionMode,
   OnConnect,
+  ConnectionState,
+  Optional,
 } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -159,6 +161,7 @@ function HandleComponent(
       isValidConnection: isValidConnectionStore,
       lib,
       rfId: flowId,
+      connection: connectionState,
     } = store.getState();
 
     if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
@@ -193,7 +196,10 @@ function HandleComponent(
       onConnectExtended(connection);
     }
 
-    onClickConnectEnd?.(event as unknown as MouseEvent);
+    const connectionClone = structuredClone(connectionState) as Optional<ConnectionState, 'inProgress'>;
+    delete connectionClone.inProgress;
+    connectionClone.toPosition = connectionClone.toHandle ? connectionClone.toHandle.position : null;
+    onClickConnectEnd?.(event as unknown as MouseEvent, connectionClone);
 
     store.setState({ connectionClickStartHandle: null });
   };

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

@@ -29,7 +29,7 @@
   // export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
 
   let isConnectableProp: $$Props['isConnectable'] = undefined;
-  export { isConnectableProp as isConnectable }
+  export { isConnectableProp as isConnectable };
 
   let className: $$Props['class'] = undefined;
   export { className as class };
@@ -101,8 +101,8 @@
             handleType: startParams.handleType
           });
         },
-        onConnectEnd: (event) => {
+        onConnectEnd: (event, connectionState) => {
-          $onConnectEndAction?.(event);
+          $onConnectEndAction?.(event, connectionState);
         },
         getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom],
         getFromHandle: () => $connection.fromHandle

packages/system/src/types/general.ts

@@ -50,7 +50,10 @@ export type OnConnectStartParams = {
 
 export type OnConnectStart = (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void;
 export type OnConnect = (connection: Connection) => void;
-export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
+export type OnConnectEnd = (
+  event: MouseEvent | TouchEvent,
+  connectionState: Omit<ConnectionState, 'inProgress'>
+) => void;
 
 export type IsValidConnection = (edge: EdgeBase | Connection) => boolean;
 

packages/system/src/xyhandle/XYHandle.ts

@@ -193,7 +193,12 @@ function onPointerDown(
 
     // it's important to get a fresh reference from the store here
     // in order to get the latest state of onConnectEnd
-    onConnectEnd?.(event);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { inProgress, ...connectionState } = previousConnection;
+    onConnectEnd?.(event, {
+      ...connectionState,
+      toPosition: previousConnection.toHandle ? previousConnection.toPosition : null,
+    });
 
     if (edgeUpdaterType) {
       onReconnectEnd?.(event);