From 8590f9dfeafdec3ef0ff47161f928e1d9ce42b65 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 15 Aug 2024 12:52:40 +0200 Subject: [PATCH 1/3] added final connection state to onReconnectEnd --- .../src/components/EdgeWrapper/EdgeUpdateAnchors.tsx | 6 +++--- packages/react/src/types/edges.ts | 9 ++++++++- packages/system/src/types/general.ts | 7 +++---- packages/system/src/xyhandle/XYHandle.ts | 7 ++++--- packages/system/src/xyhandle/types.ts | 4 +++- 5 files changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx b/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx index 236592ee..e10da1bc 100644 --- a/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx +++ b/packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx @@ -1,5 +1,5 @@ // Reconnectable edges have a anchors around their handles to reconnect the edge. -import { XYHandle, type Connection, EdgePosition } from '@xyflow/system'; +import { XYHandle, type Connection, EdgePosition, FinalConnectionState } from '@xyflow/system'; import { EdgeAnchor } from '../Edges/EdgeAnchor'; import type { EdgeWrapperProps, Edge } from '../../types/edges'; @@ -68,9 +68,9 @@ export function EdgeUpdateAnchors({ setReconnecting(true); onReconnectStart?.(event, edge, handleType); - const _onReconnectEnd = (evt: MouseEvent | TouchEvent) => { + const _onReconnectEnd = (evt: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => { setReconnecting(false); - onReconnectEnd?.(evt, edge, handleType); + onReconnectEnd?.(evt, edge, handleType, connectionState); }; const onConnectEdge = (connection: Connection) => onReconnect?.(edge, connection); diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index e765b389..8b0cebab 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -14,6 +14,8 @@ import type { EdgePosition, StepPathOptions, OnError, + ConnectionState, + FinalConnectionState, } from '@xyflow/system'; import { EdgeTypes, InternalNode, Node } from '.'; @@ -78,7 +80,12 @@ export type EdgeWrapperProps = { onMouseLeave?: EdgeMouseHandler; reconnectRadius?: number; onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void; - onReconnectEnd?: (event: MouseEvent | TouchEvent, edge: EdgeType, handleType: HandleType) => void; + onReconnectEnd?: ( + event: MouseEvent | TouchEvent, + edge: EdgeType, + handleType: HandleType, + connectionState: FinalConnectionState + ) => void; rfId?: string; edgeTypes?: EdgeTypes; onError?: OnError; diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts index 4440f58b..56e97afe 100644 --- a/packages/system/src/types/general.ts +++ b/packages/system/src/types/general.ts @@ -50,10 +50,9 @@ export type OnConnectStartParams = { export type OnConnectStart = (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void; export type OnConnect = (connection: Connection) => void; -export type OnConnectEnd = ( - event: MouseEvent | TouchEvent, - connectionState: Omit -) => void; +export type OnConnectEnd = (event: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void; + +export type FinalConnectionState = Omit; export type IsValidConnection = (edge: EdgeBase | Connection) => boolean; diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts index 53d64a18..cc4c5d1f 100644 --- a/packages/system/src/xyhandle/XYHandle.ts +++ b/packages/system/src/xyhandle/XYHandle.ts @@ -194,13 +194,14 @@ function onPointerDown( // in order to get the latest state of onConnectEnd // eslint-disable-next-line @typescript-eslint/no-unused-vars const { inProgress, ...connectionState } = previousConnection; - onConnectEnd?.(event, { + const finalConnectionState = { ...connectionState, toPosition: previousConnection.toHandle ? previousConnection.toPosition : null, - }); + }; + onConnectEnd?.(event, finalConnectionState); if (edgeUpdaterType) { - onReconnectEnd?.(event); + onReconnectEnd?.(event, finalConnectionState); } cancelConnection(); diff --git a/packages/system/src/xyhandle/types.ts b/packages/system/src/xyhandle/types.ts index 799f68c3..6e468b0a 100644 --- a/packages/system/src/xyhandle/types.ts +++ b/packages/system/src/xyhandle/types.ts @@ -11,6 +11,8 @@ import { type UpdateConnection, type IsValidConnection, NodeLookup, + ConnectionState, + FinalConnectionState, } from '../types'; export type OnPointerDownParams = { @@ -32,7 +34,7 @@ export type OnPointerDownParams = { onConnect?: OnConnect; onConnectEnd?: OnConnectEnd; isValidConnection?: IsValidConnection; - onReconnectEnd?: (evt: MouseEvent | TouchEvent) => void; + onReconnectEnd?: (evt: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void; getTransform: () => Transform; getFromHandle: () => Handle | null; autoPanSpeed?: number; From 24e87e398419646f671af1085fbfec3e197bc56b Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 15 Aug 2024 12:56:39 +0200 Subject: [PATCH 2/3] added changeset --- .changeset/itchy-pans-decide.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/itchy-pans-decide.md diff --git a/.changeset/itchy-pans-decide.md b/.changeset/itchy-pans-decide.md new file mode 100644 index 00000000..1d3bd5a6 --- /dev/null +++ b/.changeset/itchy-pans-decide.md @@ -0,0 +1,6 @@ +--- +'@xyflow/react': minor +'@xyflow/system': patch +--- + +Added final connection state as a function parameter to onReconnectEnd From 21e5fc15205d6d1dd1802fa37ca24d38efafda48 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 15 Aug 2024 13:10:27 +0200 Subject: [PATCH 3/3] re-export connectionState types --- packages/react/src/index.ts | 4 ++++ packages/system/src/types/general.ts | 7 +++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 7c984bf0..cb36e305 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -101,6 +101,10 @@ export { type EdgeAddChange, type EdgeReplaceChange, type KeyCode, + type ConnectionState, + type FinalConnectionState, + type ConnectionInProgress, + type NoConnection, } from '@xyflow/system'; // we need this workaround to prevent a duplicate identifier error diff --git a/packages/system/src/types/general.ts b/packages/system/src/types/general.ts index 56e97afe..98d8afb6 100644 --- a/packages/system/src/types/general.ts +++ b/packages/system/src/types/general.ts @@ -52,8 +52,6 @@ export type OnConnectStart = (event: MouseEvent | TouchEvent, params: OnConnectS export type OnConnect = (connection: Connection) => void; export type OnConnectEnd = (event: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void; -export type FinalConnectionState = Omit; - export type IsValidConnection = (edge: EdgeBase | Connection) => boolean; export type FitViewParamsBase = { @@ -175,6 +173,11 @@ export type ConnectionState | NoConnection; +export type FinalConnectionState = Omit< + ConnectionState, + 'inProgress' +>; + export type UpdateConnection = ( params: ConnectionState ) => void;