feat(core): add paneClickDistance (#1542)

* feat(core): add `paneClickDistance`

* chore(changeset): add

Author: bcakmakoglu

.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`)

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')
 

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,

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,

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

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 */