feat(core): add nodeDragThreshold option

packages/core/src/composables/useDrag.ts

@@ -38,6 +38,7 @@ export function useDrag(params: UseDragParams) {
     noDragClassName,
     nodes,
     nodeExtent,
+    nodeDragThreshold,
     viewport,
     autoPanOnNodeDrag,
     nodesDraggable,
@@ -65,6 +66,7 @@ export function useDrag(params: UseDragParams) {
   let lastPos: Partial<XYPosition> = { x: undefined, y: undefined }
   let mousePosition: XYPosition = { x: 0, y: 0 }
   let dragEvent: MouseEvent | null = null
+  let dragStarted = false
 
   let autoPanId = 0
   let autoPanStarted = false
@@ -147,8 +149,9 @@ export function useDrag(params: UseDragParams) {
       if (isDisabled) {
         selection.on('.drag', null)
       } else {
-        dragHandler = drag()
+        const startDrag = (event: UseDragEvent) => {
-          .on('start', (event: UseDragEvent) => {
+          dragStarted = true
+
           const node = findNode(id)
           if (!selectNodesOnDrag.value && !multiSelectionActive.value && node) {
             if (!node.selected) {
@@ -182,6 +185,15 @@ export function useDrag(params: UseDragParams) {
 
             onStart({ event: event.sourceEvent, node: currentNode, nodes })
           }
+        }
+
+        dragHandler = drag()
+          .on('start', (event: UseDragEvent) => {
+            if (nodeDragThreshold.value === 0) {
+              startDrag(event)
+            }
+
+            lastPos = getPointerPosition(event)
 
             containerBounds = vueFlowRef.value?.getBoundingClientRect() || null
             mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
@@ -189,13 +201,23 @@ export function useDrag(params: UseDragParams) {
           .on('drag', (event: UseDragEvent) => {
             const pointerPos = getPointerPosition(event)
 
-            if (!autoPanStarted && autoPanOnNodeDrag.value) {
+            if (!autoPanStarted && dragStarted && autoPanOnNodeDrag.value) {
               autoPanStarted = true
               autoPan()
             }
 
+            if (!dragStarted) {
+              const x = pointerPos.xSnapped - (lastPos.x ?? 0)
+              const y = pointerPos.ySnapped - (lastPos.y ?? 0)
+              const distance = Math.sqrt(x * x + y * y)
+
+              if (distance > nodeDragThreshold.value) {
+                startDrag(event)
+              }
+            }
+
             // skip events without movement
-            if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems.length) {
+            if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems.length && dragStarted) {
               dragEvent = event.sourceEvent as MouseEvent
               mousePosition = getEventPosition(event.sourceEvent, containerBounds!)
 
@@ -203,8 +225,13 @@ export function useDrag(params: UseDragParams) {
             }
           })
           .on('end', (event: UseDragEvent) => {
+            if (!dragStarted) {
+              return
+            }
+
             dragging.value = false
             autoPanStarted = false
+            dragStarted = false
             cancelAnimationFrame(autoPanId)
 
             if (dragItems.length) {

packages/core/src/store/state.ts

@@ -105,6 +105,7 @@ function defaultState(): State {
     nodesFocusable: true,
     nodesConnectable: true,
     nodesDraggable: true,
+    nodeDragThreshold: 0,
     elementsSelectable: true,
     selectNodesOnDrag: true,
     multiSelectionActive: false,

packages/core/src/types/flow.ts

@@ -140,6 +140,7 @@ export interface FlowProps {
   edgesUpdatable?: EdgeUpdatable
   nodesDraggable?: boolean
   nodesConnectable?: boolean
+  nodeDragThreshold?: number
   elementsSelectable?: boolean
   selectNodesOnDrag?: boolean
   /** move pane on drag, replaced prop `paneMovable` */

packages/core/src/types/store.ts

@@ -105,6 +105,7 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   nodesFocusable: boolean
   nodesDraggable: boolean
   nodesConnectable: boolean
+  nodeDragThreshold: number
 
   elementsSelectable: boolean
   selectNodesOnDrag: boolean