diff --git a/packages/system/src/xyhandle/XYHandle.ts b/packages/system/src/xyhandle/XYHandle.ts index b8a5b4d2..dffdf8a1 100644 --- a/packages/system/src/xyhandle/XYHandle.ts +++ b/packages/system/src/xyhandle/XYHandle.ts @@ -45,6 +45,7 @@ function onPointerDown( getTransform, getFromHandle, autoPanSpeed, + dragThreshold = 1, }: OnPointerDownParams ) { // when xyflow is used inside a shadow root we can't use document @@ -56,6 +57,7 @@ function onPointerDown( const clickedHandle = doc?.elementFromPoint(x, y); const handleType = getHandleType(edgeUpdaterType, clickedHandle); const containerBounds = domNode?.getBoundingClientRect(); + let connectionStarted = false; if (!containerBounds || !handleType) { return; @@ -92,10 +94,9 @@ function onPointerDown( }; const fromNodeInternal = nodeLookup.get(nodeId)!; - const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true); - const newConnection: ConnectionInProgress = { + let previousConnection: ConnectionInProgress = { inProgress: true, isValid: null, @@ -110,12 +111,31 @@ function onPointerDown( toNode: null, }; - updateConnection(newConnection); - let previousConnection: ConnectionInProgress = newConnection; + function startConnection() { + updateConnection(previousConnection); + onConnectStart?.(event, { nodeId, handleId, handleType }); + } - onConnectStart?.(event, { nodeId, handleId, handleType }); + if (dragThreshold === 0) { + startConnection(); + } function onPointerMove(event: MouseEvent | TouchEvent) { + if (!connectionStarted) { + const { x: evtX, y: evtY } = getEventPosition(event); + const dx = evtX - x; + const dy = evtY - y; + const nextConnectionStarted = dx * dx + dy * dy > dragThreshold * dragThreshold; + + if (!nextConnectionStarted) { + return; + } + + startConnection(); + + connectionStarted = nextConnectionStarted; + } + if (!getFromHandle() || !fromHandle) { onPointerUp(event); return; diff --git a/packages/system/src/xyhandle/types.ts b/packages/system/src/xyhandle/types.ts index d3625c9b..baa8cf0a 100644 --- a/packages/system/src/xyhandle/types.ts +++ b/packages/system/src/xyhandle/types.ts @@ -37,6 +37,7 @@ export type OnPointerDownParams = { getTransform: () => Transform; getFromHandle: () => Handle | null; autoPanSpeed?: number; + dragThreshold?: number; }; export type IsValidParams = {