alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(viewpane): pan on scroll blocks any zoom handling

Browse Source
This commit is contained in:
braks
2022-07-30 15:11:17 +02:00
committed by Braks
parent 899d3af4ad
commit 228b9d1753
1 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/vue-flow/src/container/Viewport/Viewport.vue
+36 -30
View File
@@ -129,43 +129,49 @@ onMounted(() => {
} }
}) })
d3Selection watchEffect(() => {
.on('wheel', (event: WheelEvent) => { if (panOnScroll && !zoomKeyPressed.value) {
if (panOnScroll && !zoomKeyPressed.value) { d3Selection
if (isWrappedWithClass(event, noWheelClassName as any)) return .on('wheel', (event: any) => {
event.preventDefault() if (isWrappedWithClass(event, noWheelClassName?.value)) {
event.stopImmediatePropagation() return false
}
event.preventDefault()
event.stopImmediatePropagation()
const currentZoom = d3Selection?.property('__zoom').k || 1 const currentZoom = d3Selection.property('__zoom').k || 1
if (event.ctrlKey && zoomOnPinch) { if (event.ctrlKey && zoomOnPinch) {
const point = pointer(event) const point = pointer(event)
// taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10 const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
const zoom = currentZoom * 2 ** pinchDelta const zoom = currentZoom * 2 ** pinchDelta
if (d3Selection) d3Zoom.scaleTo(d3Selection, zoom, point) d3Zoom.scaleTo(d3Selection, zoom, point)
return return
} }
// increase scroll speed in firefox // increase scroll speed in firefox
// firefox: deltaMode === 1; chrome: deltaMode === 0 // firefox: deltaMode === 1; chrome: deltaMode === 0
const deltaNormalize = event.deltaMode === 1 ? 20 : 1 const deltaNormalize = event.deltaMode === 1 ? 20 : 1
const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
if (d3Selection && panOnScrollSpeed) {
d3Zoom.translateBy(d3Selection, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed) d3Zoom.translateBy(d3Selection, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed)
} })
} else { .on('wheel.zoom', null)
if ((!zoomOnScroll && preventScrolling) || !preventScrolling || isWrappedWithClass(event, noWheelClassName?.value)) { } else if (typeof d3ZoomHandler !== 'undefined') {
return null d3Selection
} .on('wheel', (event: any) => {
if (!preventScrolling || isWrappedWithClass(event, noWheelClassName?.value)) {
return null
}
event.preventDefault() event.preventDefault()
} })
}) .on('wheel.zoom', d3ZoomHandler)
.on('wheel.zoom', panOnScroll || typeof d3ZoomHandler === 'undefined' ? null : (d3ZoomHandler as any)) }
})
d3Zoom.filter((event: MouseEvent) => { d3Zoom.filter((event: MouseEvent) => {
const zoomScroll = zoomKeyPressed.value || zoomOnScroll const zoomScroll = zoomKeyPressed.value || zoomOnScroll