From aae62e9ec6a9a6284e500b5864c564a3a433a86c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 14 Aug 2024 11:17:34 +0200
Subject: [PATCH] feat(onConnectEnd): pass connectionState

---
 packages/react/src/components/Handle/index.tsx          | 8 +++++++-
 packages/svelte/src/lib/components/Handle/Handle.svelte | 6 +++---
 packages/system/src/types/general.ts                    | 5 ++++-
 packages/system/src/xyhandle/XYHandle.ts                | 7 ++++++-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/Handle/index.tsx b/packages/react/src/components/Handle/index.tsx
index 10f34731..fbc258c2 100644
--- a/packages/react/src/components/Handle/index.tsx
+++ b/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 });
   };
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 8a9f7bcf..45f70fb2 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/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) => {
-          $onConnectEndAction?.(event);
+        onConnectEnd: (event, connectionState) => {
+          $onConnectEndAction?.(event, connectionState);
         },
         getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom],
         getFromHandle: () => $connection.fromHandle
diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts
index 1af0b930..4440f58b 100644
--- a/packages/system/src/types/general.ts
+++ b/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;
 
diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts
index 0136479d..335c1673 100644
--- a/packages/system/src/xyhandle/XYHandle.ts
+++ b/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);