From 3496d39c6d8fb4a2e0eceddf459fffc9e94ffa0f Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 13 Aug 2024 14:17:17 +0200 Subject: [PATCH 1/4] chore(react): re-export handle type #4535 --- packages/react/src/index.ts | 4 ++++ 1 file changed, 4 insertions(+) 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, From fdff601de418f2ac6a78f04e5a586d67b8d436e6 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 13 Aug 2024 14:17:58 +0200 Subject: [PATCH 2/4] chore(changeset): add --- .changeset/quiet-masks-allow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quiet-masks-allow.md 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 From aae62e9ec6a9a6284e500b5864c564a3a433a86c Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 14 Aug 2024 11:17:34 +0200 Subject: [PATCH 3/4] 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; + 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); From 99733c01bc70f9463e7dba0046c5f8d839a1d2ba Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 14 Aug 2024 11:18:17 +0200 Subject: [PATCH 4/4] chore(changeset): add --- .changeset/wild-seas-guess.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/wild-seas-guess.md 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