From ff520c8a708f195643ae03a2177ac5599df5bf61 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 8 Oct 2022 02:56:41 +0200
Subject: [PATCH] feat(viewpane): support boolean keycode value

# What's changed?

* set `selectionKeyCode` to true, for figma style selection (selection without keypress)
---
 .../vue-flow/src/composables/useKeyPress.ts   | 50 +++++++++++--------
 .../src/container/Viewport/Viewport.vue       | 10 ++--
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/packages/vue-flow/src/composables/useKeyPress.ts b/packages/vue-flow/src/composables/useKeyPress.ts
index 92275938..7968562c 100644
--- a/packages/vue-flow/src/composables/useKeyPress.ts
+++ b/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(
-    unref(keyFilter),
-    (e) => {
-      if (isInputDOMNode(e)) return
+  watchEffect(() => {
+    const unrefKeyFilter = unref(keyFilter)
 
-      e.preventDefault()
-      isPressed = true
-    },
-    { eventName: 'keydown' },
-  )
+    if (isBoolean(unrefKeyFilter)) {
+      isPressed = unrefKeyFilter
+      return
+    }
 
-  onKeyStroke(
-    unref(keyFilter),
-    (e) => {
-      if (isInputDOMNode(e)) return
+    onKeyStroke(
+      unrefKeyFilter,
+      (e) => {
+        if (isInputDOMNode(e)) return
 
-      e.preventDefault()
-      isPressed = false
-    },
-    { eventName: 'keyup' },
-  )
+        e.preventDefault()
+        isPressed = true
+      },
+      { 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)
 }
diff --git a/packages/vue-flow/src/container/Viewport/Viewport.vue b/packages/vue-flow/src/container/Viewport/Viewport.vue
index 65f65a64..5b2a54d9 100644
--- a/packages/vue-flow/src/container/Viewport/Viewport.vue
+++ b/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