Skip to content

Commit 180109c

Browse files
committed
feat(core): add paneClickDistance (#1542)
* feat(core): add `paneClickDistance` * chore(changeset): add
1 parent 8539731 commit 180109c

File tree

6 files changed

+23
-1
lines changed

6 files changed

+23
-1
lines changed

.changeset/four-deers-judge.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@vue-flow/core": minor
3+
---
4+
5+
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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const {
3939
d3ZoomHandler: storeD3ZoomHandler,
4040
viewport,
4141
viewportRef,
42+
paneClickDistance,
4243
} = useVueFlow()
4344
4445
useResizeHandler(viewportRef)
@@ -81,7 +82,10 @@ onMounted(() => {
8182
8283
const bbox = viewportElement.getBoundingClientRect()
8384
84-
const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([minZoom.value, maxZoom.value]).translateExtent(translateExtent.value)
85+
const d3Zoom = zoom<HTMLDivElement, unknown>()
86+
.clickDistance(paneClickDistance.value)
87+
.scaleExtent([minZoom.value, maxZoom.value])
88+
.translateExtent(translateExtent.value)
8589
const d3Selection = select(viewportElement).call(d3Zoom)
8690
const d3ZoomHandler = d3Selection.on('wheel.zoom')
8791

packages/core/src/store/actions.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,10 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
307307
updateNodeInternals()
308308
}
309309

310+
const setPaneClickDistance: Actions['setPaneClickDistance'] = (clickDistance) => {
311+
state.d3Zoom?.clickDistance(clickDistance)
312+
}
313+
310314
const setInteractive: Actions['setInteractive'] = (isInteractive) => {
311315
state.nodesDraggable = isInteractive
312316
state.nodesConnectable = isInteractive
@@ -863,6 +867,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
863867
setMaxZoom,
864868
setTranslateExtent,
865869
setNodeExtent,
870+
setPaneClickDistance,
866871
removeSelectedElements,
867872
removeSelectedNodes,
868873
removeSelectedEdges,

packages/core/src/store/state.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export function useState(): State {
4747
panOnScroll: false,
4848
panOnScrollSpeed: 0.5,
4949
panOnScrollMode: PanOnScrollMode.Free,
50+
paneClickDistance: 0,
5051
panOnDrag: true,
5152
edgeUpdaterRadius: 10,
5253
onlyRenderVisibleElements: false,

packages/core/src/types/flow.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,11 @@ export interface FlowProps {
188188
panOnScroll?: boolean
189189
panOnScrollSpeed?: number
190190
panOnScrollMode?: PanOnScrollMode
191+
/**
192+
* Distance that the mouse can move between mousedown/up that will trigger a click
193+
* @default 0
194+
*/
195+
paneClickDistance?: number
191196
zoomOnDoubleClick?: boolean
192197
/** If set to false, scrolling inside the viewport will be disabled and instead the page scroll will be used */
193198
preventScrolling?: boolean

packages/core/src/types/store.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ export interface State extends Omit<FlowProps, 'id' | 'modelValue'> {
127127
panOnScroll: boolean
128128
panOnScrollSpeed: number
129129
panOnScrollMode: PanOnScrollMode
130+
paneClickDistance: number
130131
zoomOnDoubleClick: boolean
131132
preventScrolling: boolean
132133
paneDragging: boolean
@@ -290,6 +291,7 @@ export interface Actions extends Omit<ViewportHelper, 'viewportInitialized'> {
290291
setTranslateExtent: (translateExtent: CoordinateExtent) => void
291292
/** apply extent to nodes */
292293
setNodeExtent: (nodeExtent: CoordinateExtent | CoordinateExtentRange) => void
294+
setPaneClickDistance: (distance: number) => void
293295
/** enable/disable node interaction (dragging, selecting etc) */
294296
setInteractive: (isInteractive: boolean) => void
295297
/** set new state */

0 commit comments

Comments
 (0)