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

View File

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

View File

@@ -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;

View File

@@ -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<ConnectionState, 'inProgress'>
) => void;
export type OnConnectEnd = (event: MouseEvent | TouchEvent, connectionState: FinalConnectionState) => void;
export type FinalConnectionState = Omit<ConnectionState, 'inProgress'>;
export type IsValidConnection = (edge: EdgeBase | Connection) => boolean;

View File

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

View File

@@ -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;