feat(xyhandle): add dragThreshold #5315

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;

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 = {