diff --git a/examples/Interaction/InteractionExample.vue b/examples/Interaction/InteractionExample.vue index 2693379f..d6a496f5 100644 --- a/examples/Interaction/InteractionExample.vue +++ b/examples/Interaction/InteractionExample.vue @@ -31,7 +31,6 @@ const { { id: 'e1-2', source: '1', target: '2', animated: true }, { id: 'e1-3', source: '1', target: '3' }, ], - zoomActivationKeyCode: isWindows ? 'Shift' : 'Meta', }) const captureZoomClick = ref(false) diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue index ad5ec7f4..9664463e 100644 --- a/src/container/ZoomPane/ZoomPane.vue +++ b/src/container/ZoomPane/ZoomPane.vue @@ -71,7 +71,7 @@ onMounted(async () => { } }) - useKeyPress(store.selectionKeyCode, (keyPress) => { + const selectionKeyPressed = useKeyPress(store.selectionKeyCode, (keyPress) => { if (keyPress) { d3z.on('zoom', null) } else { @@ -85,10 +85,12 @@ onMounted(async () => { } }) - useKeyPress(store.zoomActivationKeyCode, (keyPress) => { - if (store.panOnScroll && keyPress) { - d3s - ?.on('wheel', (event: WheelEvent) => { + const zoomKeyPressed = store.zoomActivationKeyCode ? useKeyPress(store.zoomActivationKeyCode) : ref(true) + + d3s + ?.on('wheel', (event: WheelEvent) => { + if (zoomKeyPressed.value) { + if (store.panOnScroll) { if (noWheel(event)) return event.preventDefault() event.stopImmediatePropagation() @@ -117,19 +119,14 @@ onMounted(async () => { -(deltaX / currentZoom) * store.panOnScrollSpeed, -(deltaY / currentZoom) * store.panOnScrollSpeed, ) - }) - .on('wheel.zoom', null) - } else if (typeof d3ZoomHandler !== 'undefined') { - d3s - ?.on('wheel', (event: WheelEvent) => { + } else { if ((!store.zoomOnScroll && store.preventScrolling) || !store.preventScrolling || noWheel(event)) return event.preventDefault() - }) - .on('wheel.zoom', d3ZoomHandler) - } - }) + } + } + }) + .on('wheel.zoom', store.panOnScroll || typeof d3ZoomHandler === 'undefined' ? null : d3ZoomHandler) - const keyPress = useKeyPress(store.selectionKeyCode) d3z.filter((event: MouseEvent) => { const pinchZoom = store.zoomOnPinch && event.ctrlKey @@ -138,7 +135,7 @@ onMounted(async () => { return false // during a selection we prevent all other interactions - if (keyPress.value) return false + if (selectionKeyPressed.value) return false // if zoom on double click is disabled, we prevent the double click event if (!store.zoomOnDoubleClick && event.type === 'dblclick') return false diff --git a/src/store/state.ts b/src/store/state.ts index dac89fef..8e53b725 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -89,7 +89,7 @@ export default (opts?: FlowOptions): State => { multiSelectionActive: false, selectionKeyCode: 'Shift', multiSelectionKeyCode: 'Meta', - zoomActivationKeyCode: 'Meta', + zoomActivationKeyCode: undefined, deleteKeyCode: 'Backspace', hooks: createHooks(), diff --git a/src/types/store.ts b/src/types/store.ts index 57d3714e..594ea2c7 100644 --- a/src/types/store.ts +++ b/src/types/store.ts @@ -34,7 +34,7 @@ export interface State extends Omit, 'id' | 'm deleteKeyCode: KeyCode selectionKeyCode: KeyCode multiSelectionKeyCode: KeyCode - zoomActivationKeyCode: KeyCode + zoomActivationKeyCode: KeyCode | undefined connectionNodeId: string | undefined connectionHandleId: string | undefined