feat(zoom): Allow zoomOnScroll & panOnScroll to be used without an activation key

* activation key is undefined by default, if undefined key is always "pressed"

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)

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) => {
+  const zoomKeyPressed = store.zoomActivationKeyCode ? useKeyPress(store.zoomActivationKeyCode) : ref(true)
-    if (store.panOnScroll && keyPress) {
+
-      d3s
+  d3s
-        ?.on('wheel', (event: WheelEvent) => {
+    ?.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,
             )
-        })
+        } else {
-        .on('wheel.zoom', null)
-    } else if (typeof d3ZoomHandler !== 'undefined') {
-      d3s
-        ?.on('wheel', (event: WheelEvent) => {
           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

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(),

src/types/store.ts

@@ -34,7 +34,7 @@ export interface State<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id' | 'm
   deleteKeyCode: KeyCode
   selectionKeyCode: KeyCode
   multiSelectionKeyCode: KeyCode
-  zoomActivationKeyCode: KeyCode
+  zoomActivationKeyCode: KeyCode | undefined
 
   connectionNodeId: string | undefined
   connectionHandleId: string | undefined