From 180109c0ca6bc5609c2e557d7c297bda5eb39ed1 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 13:46:40 +0200
Subject: [PATCH] feat(core): add paneClickDistance (#1542)

* feat(core): add `paneClickDistance`

* chore(changeset): add
---
 .changeset/four-deers-judge.md                    | 5 +++++
 packages/core/src/container/Viewport/Viewport.vue | 6 +++++-
 packages/core/src/store/actions.ts                | 5 +++++
 packages/core/src/store/state.ts                  | 1 +
 packages/core/src/types/flow.ts                   | 5 +++++
 packages/core/src/types/store.ts                  | 2 ++
 6 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/four-deers-judge.md

diff --git a/.changeset/four-deers-judge.md b/.changeset/four-deers-judge.md
new file mode 100644
index 00000000..267a02db
--- /dev/null
+++ b/.changeset/four-deers-judge.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Add `paneClickDistance` option. Allows specifying the distance between mousedown and mouseup in which a click would still be registered (by default `0`)
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index b993402c..98e3b399 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -39,6 +39,7 @@ const {
   d3ZoomHandler: storeD3ZoomHandler,
   viewport,
   viewportRef,
+  paneClickDistance,
 } = useVueFlow()
 
 useResizeHandler(viewportRef)
@@ -81,7 +82,10 @@ onMounted(() => {
 
   const bbox = viewportElement.getBoundingClientRect()
 
-  const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([minZoom.value, maxZoom.value]).translateExtent(translateExtent.value)
+  const d3Zoom = zoom<HTMLDivElement, unknown>()
+    .clickDistance(paneClickDistance.value)
+    .scaleExtent([minZoom.value, maxZoom.value])
+    .translateExtent(translateExtent.value)
   const d3Selection = select(viewportElement).call(d3Zoom)
   const d3ZoomHandler = d3Selection.on('wheel.zoom')
 
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index f0428a6e..89564847 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -307,6 +307,10 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     updateNodeInternals()
   }
 
+  const setPaneClickDistance: Actions['setPaneClickDistance'] = (clickDistance) => {
+    state.d3Zoom?.clickDistance(clickDistance)
+  }
+
   const setInteractive: Actions['setInteractive'] = (isInteractive) => {
     state.nodesDraggable = isInteractive
     state.nodesConnectable = isInteractive
@@ -863,6 +867,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
     setMaxZoom,
     setTranslateExtent,
     setNodeExtent,
+    setPaneClickDistance,
     removeSelectedElements,
     removeSelectedNodes,
     removeSelectedEdges,
diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts
index 4ca356f6..2198b946 100644
--- a/packages/core/src/store/state.ts
+++ b/packages/core/src/store/state.ts
@@ -47,6 +47,7 @@ export function useState(): State {
     panOnScroll: false,
     panOnScrollSpeed: 0.5,
     panOnScrollMode: PanOnScrollMode.Free,
+    paneClickDistance: 0,
     panOnDrag: true,
     edgeUpdaterRadius: 10,
     onlyRenderVisibleElements: false,
diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts
index b6df84d4..85fef24e 100644
--- a/packages/core/src/types/flow.ts
+++ b/packages/core/src/types/flow.ts
@@ -188,6 +188,11 @@ export interface FlowProps {
   panOnScroll?: boolean
   panOnScrollSpeed?: number
   panOnScrollMode?: PanOnScrollMode
+  /**
+   * Distance that the mouse can move between mousedown/up that will trigger a click
+   * @default 0
+   */
+  paneClickDistance?: number
   zoomOnDoubleClick?: boolean
   /** If set to false, scrolling inside the viewport will be disabled and instead the page scroll will be used */
   preventScrolling?: boolean
diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts
index ce2053d7..481922fb 100644
--- a/packages/core/src/types/store.ts
+++ b/packages/core/src/types/store.ts
@@ -127,6 +127,7 @@ export interface State extends Omit<FlowProps, 'id' | 'modelValue'> {
   panOnScroll: boolean
   panOnScrollSpeed: number
   panOnScrollMode: PanOnScrollMode
+  paneClickDistance: number
   zoomOnDoubleClick: boolean
   preventScrolling: boolean
   paneDragging: boolean
@@ -290,6 +291,7 @@ export interface Actions extends Omit<ViewportHelper, 'viewportInitialized'> {
   setTranslateExtent: (translateExtent: CoordinateExtent) => void
   /** apply extent to nodes */
   setNodeExtent: (nodeExtent: CoordinateExtent | CoordinateExtentRange) => void
+  setPaneClickDistance: (distance: number) => void
   /** enable/disable node interaction (dragging, selecting etc) */
   setInteractive: (isInteractive: boolean) => void
   /** set new state */