diff --git a/.changeset/wild-seas-guess.md b/.changeset/wild-seas-guess.md new file mode 100644 index 00000000..e97200bd --- /dev/null +++ b/.changeset/wild-seas-guess.md @@ -0,0 +1,7 @@ +--- +'@xyflow/react': patch +'@xyflow/svelte': patch +'@xyflow/system': patch +--- + +feat(onConnectEnd): pass connectionState param 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; + 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 +) => 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);