Merge pull request #4555 from xyflow/reconnect-end-param

Pass final connection state to onReconnectEnd

.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

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<EdgeType extends Edge = Edge>({
     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);

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

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<EdgeType extends Edge = Edge> = {
   onMouseLeave?: EdgeMouseHandler<EdgeType>;
   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;

packages/system/src/types/general.ts

@@ -50,10 +50,7 @@ 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<ConnectionState, 'inProgress'>
-) => void;
+export type OnConnectEnd = (event: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void;
 
 export type IsValidConnection = (edge: EdgeBase | Connection) => boolean;
 
@@ -176,6 +173,11 @@ export type ConnectionState<NodeType extends InternalNodeBase = InternalNodeBase
   | ConnectionInProgress<NodeType>
   | NoConnection;
 
+export type FinalConnectionState<NodeType extends InternalNodeBase = InternalNodeBase> = Omit<
+  ConnectionState<NodeType>,
+  'inProgress'
+>;
+
 export type UpdateConnection<NodeType extends InternalNodeBase = InternalNodeBase> = (
   params: ConnectionState<NodeType>
 ) => void;

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();

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;