feat(viewpane): support boolean keycode value

# What's changed?

* set `selectionKeyCode` to true, for figma style selection (selection without keypress)

packages/vue-flow/src/composables/useKeyPress.ts

@@ -1,5 +1,6 @@
 import type { Ref } from 'vue'
 import type { KeyFilter, MaybeRef } from '@vueuse/core'
+import { isBoolean } from '@vueuse/core'
 import useWindow from './useWindow'
 
 function isInputDOMNode(event: KeyboardEvent): boolean {
@@ -15,33 +16,42 @@ function isInputDOMNode(event: KeyboardEvent): boolean {
 export default (keyFilter: MaybeRef<KeyFilter>, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
   const window = useWindow()
 
-  let isPressed = $ref(false)
+  let isPressed = $ref(unref(keyFilter) === true)
 
   watch($$(isPressed), () => {
     if (onChange && typeof onChange === 'function') onChange(isPressed)
   })
 
-  onKeyStroke(
+  watchEffect(() => {
-    unref(keyFilter),
+    const unrefKeyFilter = unref(keyFilter)
-    (e) => {
-      if (isInputDOMNode(e)) return
 
-      e.preventDefault()
+    if (isBoolean(unrefKeyFilter)) {
-      isPressed = true
+      isPressed = unrefKeyFilter
-    },
+      return
-    { eventName: 'keydown' },
+    }
-  )
 
-  onKeyStroke(
+    onKeyStroke(
-    unref(keyFilter),
+      unrefKeyFilter,
-    (e) => {
+      (e) => {
-      if (isInputDOMNode(e)) return
+        if (isInputDOMNode(e)) return
 
-      e.preventDefault()
+        e.preventDefault()
-      isPressed = false
+        isPressed = true
-    },
+      },
-    { eventName: 'keyup' },
+      { eventName: 'keydown' },
-  )
+    )
+
+    onKeyStroke(
+      unrefKeyFilter,
+      (e) => {
+        if (isInputDOMNode(e)) return
+
+        e.preventDefault()
+        isPressed = false
+      },
+      { eventName: 'keyup' },
+    )
+  })
 
   if (typeof window.addEventListener !== 'undefined') {
     useEventListener(window, 'blur', () => {
@@ -49,7 +59,5 @@ export default (keyFilter: MaybeRef<KeyFilter>, onChange?: (keyPressed: boolean)
     })
   }
 
-  if (onChange && typeof onChange === 'function') onChange(isPressed)
-
   return $$(isPressed)
 }

packages/vue-flow/src/container/Viewport/Viewport.vue

@@ -92,7 +92,7 @@ onMounted(() => {
     viewportRef: viewportEl.value,
   })
 
-  const selectionKeyPressed = useKeyPress(selectionKeyCode, (keyPress) => {
+  const onKeyPress = (keyPress: boolean) => {
     if (keyPress && !isZoomingOrPanning) {
       d3Zoom.on('zoom', null)
     } else if (!keyPress) {
@@ -102,7 +102,11 @@ onMounted(() => {
         emits.move({ event, flowTransform })
       })
     }
-  })
+  }
+
+  const selectionKeyPressed = useKeyPress(selectionKeyCode, onKeyPress)
+  // initialize
+  onKeyPress(false)
 
   const zoomKeyPressed = useKeyPress(zoomActivationKeyCode)
 
@@ -177,7 +181,7 @@ onMounted(() => {
     if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) return false
 
     // during a selection we prevent all other interactions
-    if (selectionKeyPressed.value) return false
+    if (selectionKeyPressed.value && !selectionKeyCode !== true) return false
 
     // if zoom on double click is disabled, we prevent the double click event
     if (!zoomOnDoubleClick && event.type === 'dblclick') return false