added check to xyhandle pointermove if connection is cancelled

This commit is contained in:
peterkogo
2024-03-13 14:26:27 +01:00
parent 09118c1c8e
commit e489df9808
3 changed files with 9 additions and 1 deletions
@@ -140,6 +140,7 @@ function HandleComponent(
onConnect: onConnectExtended, onConnect: onConnectExtended,
isValidConnection: isValidConnection || currentStore.isValidConnection, isValidConnection: isValidConnection || currentStore.isValidConnection,
getTransform: () => store.getState().transform, getTransform: () => store.getState().transform,
getConnectionStartHandle: () => store.getState().connectionStartHandle,
}); });
} }
@@ -99,7 +99,8 @@
onConnectEnd: (event) => { onConnectEnd: (event) => {
$onConnectEndAction?.(event); $onConnectEndAction?.(event);
}, },
getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom] getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom],
getConnectionStartHandle: () => $connection.startHandle
}); });
} }
} }
+6
View File
@@ -38,6 +38,7 @@ export type OnPointerDownParams = {
isValidConnection?: IsValidConnection; isValidConnection?: IsValidConnection;
onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void; onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
getTransform: () => Transform; getTransform: () => Transform;
getConnectionStartHandle: () => ConnectingHandle | null;
}; };
export type IsValidParams = { export type IsValidParams = {
@@ -91,6 +92,7 @@ function onPointerDown(
onEdgeUpdateEnd, onEdgeUpdateEnd,
updateConnection, updateConnection,
getTransform, getTransform,
getConnectionStartHandle,
}: OnPointerDownParams }: OnPointerDownParams
) { ) {
// when xyflow is used inside a shadow root we can't use document // when xyflow is used inside a shadow root we can't use document
@@ -149,6 +151,10 @@ function onPointerDown(
onConnectStart?.(event, { nodeId, handleId, handleType }); onConnectStart?.(event, { nodeId, handleId, handleType });
function onPointerMove(event: MouseEvent | TouchEvent) { function onPointerMove(event: MouseEvent | TouchEvent) {
if (!getConnectionStartHandle()) {
onPointerUp(event);
}
const transform = getTransform(); const transform = getTransform();
connectionPosition = getEventPosition(event, containerBounds); connectionPosition = getEventPosition(event, containerBounds);
closestHandle = getClosestHandle( closestHandle = getClosestHandle(