diff --git a/.changeset/quiet-masks-allow.md b/.changeset/quiet-masks-allow.md new file mode 100644 index 00000000..87b69aae --- /dev/null +++ b/.changeset/quiet-masks-allow.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +chore(react): re-export Handle type 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 2d3a8738..3ea98530 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'; @@ -160,6 +162,7 @@ function HandleComponent( lib, rfId: flowId, nodeLookup, + connection: connectionState, } = store.getState(); if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) { @@ -195,7 +198,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/react/src/index.ts b/packages/react/src/index.ts index 604e3d35..7c984bf0 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -103,6 +103,10 @@ export { type KeyCode, } from '@xyflow/system'; +// we need this workaround to prevent a duplicate identifier error +import { type Handle as HandleBound } from '@xyflow/system'; +export type Handle = HandleBound; + // system utils export { type GetBezierPathParams, 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 c7baa728..53d64a18 100644 --- a/packages/system/src/xyhandle/XYHandle.ts +++ b/packages/system/src/xyhandle/XYHandle.ts @@ -192,7 +192,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);