feat(core): add nodeDragThreshold option

Author: bcakmakoglu

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,64 +149,89 @@ export function useDrag(params: UseDragParams) {
       if (isDisabled) {
         selection.on('.drag', null)
       } else {
-        dragHandler = drag()
-          .on('start', (event: UseDragEvent) => {
-            const node = findNode(id)
-            if (!selectNodesOnDrag.value && !multiSelectionActive.value && node) {
-              if (!node.selected) {
-                // we need to reset selected nodes when selectNodesOnDrag=false
-                removeSelectedElements()
-              }
+        const startDrag = (event: UseDragEvent) => {
+          dragStarted = true
+
+          const node = findNode(id)
+          if (!selectNodesOnDrag.value && !multiSelectionActive.value && node) {
+            if (!node.selected) {
+              // we need to reset selected nodes when selectNodesOnDrag=false
+              removeSelectedElements()
             }
+          }
+
+          if (node && toValue(selectable) && selectNodesOnDrag.value) {
+            handleNodeClick(
+              node,
+              multiSelectionActive.value,
+              addSelectedNodes,
+              removeSelectedElements,
+              nodesSelectionActive,
+              false,
+              nodeEl as HTMLDivElement,
+            )
+          }
 
-            if (node && toValue(selectable) && selectNodesOnDrag.value) {
-              handleNodeClick(
-                node,
-                multiSelectionActive.value,
-                addSelectedNodes,
-                removeSelectedElements,
-                nodesSelectionActive,
-                false,
-                nodeEl as HTMLDivElement,
-              )
-            }
+          const pointerPos = getPointerPosition(event)
+          lastPos = pointerPos
+          dragItems = getDragItems(nodes.value, nodesDraggable.value, pointerPos, findNode, id)
 
-            const pointerPos = getPointerPosition(event)
-            lastPos = pointerPos
-            dragItems = getDragItems(nodes.value, nodesDraggable.value, pointerPos, findNode, id)
+          if (dragItems.length) {
+            const [currentNode, nodes] = getEventHandlerParams({
+              id,
+              dragItems,
+              findNode,
+            })
 
-            if (dragItems.length) {
-              const [currentNode, nodes] = getEventHandlerParams({
-                id,
-                dragItems,
-                findNode,
-              })
+            onStart({ event: event.sourceEvent, node: currentNode, nodes })
+          }
+        }
 
-              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!)
           })
           .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!)
 
               updateNodes(pointerPos)
             }
           })
           .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