added final connection state to onReconnectEnd

This commit is contained in:
peterkogo
2024-08-15 12:52:40 +02:00
parent 51f8f56566
commit 8590f9dfea
5 changed files with 21 additions and 12 deletions
@@ -1,5 +1,5 @@
// Reconnectable edges have a anchors around their handles to reconnect the edge. // 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 { EdgeAnchor } from '../Edges/EdgeAnchor';
import type { EdgeWrapperProps, Edge } from '../../types/edges'; import type { EdgeWrapperProps, Edge } from '../../types/edges';
@@ -68,9 +68,9 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
setReconnecting(true); setReconnecting(true);
onReconnectStart?.(event, edge, handleType); onReconnectStart?.(event, edge, handleType);
const _onReconnectEnd = (evt: MouseEvent | TouchEvent) => { const _onReconnectEnd = (evt: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => {
setReconnecting(false); setReconnecting(false);
onReconnectEnd?.(evt, edge, handleType); onReconnectEnd?.(evt, edge, handleType, connectionState);
}; };
const onConnectEdge = (connection: Connection) => onReconnect?.(edge, connection); const onConnectEdge = (connection: Connection) => onReconnect?.(edge, connection);
+8 -1
View File
@@ -14,6 +14,8 @@ import type {
EdgePosition, EdgePosition,
StepPathOptions, StepPathOptions,
OnError, OnError,
ConnectionState,
FinalConnectionState,
} from '@xyflow/system'; } from '@xyflow/system';
import { EdgeTypes, InternalNode, Node } from '.'; import { EdgeTypes, InternalNode, Node } from '.';
@@ -78,7 +80,12 @@ export type EdgeWrapperProps<EdgeType extends Edge = Edge> = {
onMouseLeave?: EdgeMouseHandler<EdgeType>; onMouseLeave?: EdgeMouseHandler<EdgeType>;
reconnectRadius?: number; reconnectRadius?: number;
onReconnectStart?: (event: ReactMouseEvent, edge: EdgeType, handleType: HandleType) => void; 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; rfId?: string;
edgeTypes?: EdgeTypes; edgeTypes?: EdgeTypes;
onError?: OnError; onError?: OnError;
+3 -4
View File
@@ -50,10 +50,9 @@ export type OnConnectStartParams = {
export type OnConnectStart = (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void; export type OnConnectStart = (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void;
export type OnConnect = (connection: Connection) => void; export type OnConnect = (connection: Connection) => void;
export type OnConnectEnd = ( export type OnConnectEnd = (event: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void;
event: MouseEvent | TouchEvent,
connectionState: Omit<ConnectionState, 'inProgress'> export type FinalConnectionState = Omit<ConnectionState, 'inProgress'>;
) => void;
export type IsValidConnection = (edge: EdgeBase | Connection) => boolean; export type IsValidConnection = (edge: EdgeBase | Connection) => boolean;
+4 -3
View File
@@ -194,13 +194,14 @@ function onPointerDown(
// in order to get the latest state of onConnectEnd // in order to get the latest state of onConnectEnd
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { inProgress, ...connectionState } = previousConnection; const { inProgress, ...connectionState } = previousConnection;
onConnectEnd?.(event, { const finalConnectionState = {
...connectionState, ...connectionState,
toPosition: previousConnection.toHandle ? previousConnection.toPosition : null, toPosition: previousConnection.toHandle ? previousConnection.toPosition : null,
}); };
onConnectEnd?.(event, finalConnectionState);
if (edgeUpdaterType) { if (edgeUpdaterType) {
onReconnectEnd?.(event); onReconnectEnd?.(event, finalConnectionState);
} }
cancelConnection(); cancelConnection();
+3 -1
View File
@@ -11,6 +11,8 @@ import {
type UpdateConnection, type UpdateConnection,
type IsValidConnection, type IsValidConnection,
NodeLookup, NodeLookup,
ConnectionState,
FinalConnectionState,
} from '../types'; } from '../types';
export type OnPointerDownParams = { export type OnPointerDownParams = {
@@ -32,7 +34,7 @@ export type OnPointerDownParams = {
onConnect?: OnConnect; onConnect?: OnConnect;
onConnectEnd?: OnConnectEnd; onConnectEnd?: OnConnectEnd;
isValidConnection?: IsValidConnection; isValidConnection?: IsValidConnection;
onReconnectEnd?: (evt: MouseEvent | TouchEvent) => void; onReconnectEnd?: (evt: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void;
getTransform: () => Transform; getTransform: () => Transform;
getFromHandle: () => Handle | null; getFromHandle: () => Handle | null;
autoPanSpeed?: number; autoPanSpeed?: number;