From 5951beb85a458082a4132970f5aa3f26d8452f38 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 19 Apr 2022 15:52:44 +0200
Subject: [PATCH] fix: Reactive key bindings for delete, select etc.

# What's changed?

* Use ref for keycodes from store to reactively listen to keyboard events and trigger delete etc.
---
 package/src/composables/useKeyPress.ts                | 11 +++++------
 package/src/container/SelectionPane/SelectionPane.vue |  8 ++++----
 package/src/container/Viewport/Viewport.vue           |  6 +++---
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/package/src/composables/useKeyPress.ts b/package/src/composables/useKeyPress.ts
index 2a6c8c83..0d7fb433 100644
--- a/package/src/composables/useKeyPress.ts
+++ b/package/src/composables/useKeyPress.ts
@@ -4,8 +4,9 @@ import useWindow from './useWindow'
 import { KeyCode } from '~/types'
 import { isInputDOMNode } from '~/utils'
 
-export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
+export default (keyCode: Ref<KeyCode>, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
   const window = useWindow()
+
   const isPressed = controlledRef<boolean>(false, {
     onBeforeChange(val, oldVal) {
       if (val === oldVal) return false
@@ -16,23 +17,21 @@ export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref
   })
 
   onKeyPressed(
-    (e) => !isInputDOMNode(e) && (e.key === keyCode || e.keyCode === keyCode),
+    (e) => !isInputDOMNode(e) && (e.key === keyCode.value || e.keyCode === keyCode.value),
     (e) => {
       e.preventDefault()
       isPressed.value = true
     },
   )
-
   onKeyDown(
-    (e) => !isInputDOMNode(e) && (e.key === keyCode || e.keyCode === keyCode),
+    (e) => !isInputDOMNode(e) && (e.key === keyCode.value || e.keyCode === keyCode.value),
     (e) => {
       e.preventDefault()
       isPressed.value = true
     },
   )
-
   onKeyUp(
-    (e) => !isInputDOMNode(e) && (e.key === keyCode || e.keyCode === keyCode),
+    (e) => !isInputDOMNode(e) && (e.key === keyCode.value || e.keyCode === keyCode.value),
     (e) => {
       e.preventDefault()
       isPressed.value = false
diff --git a/package/src/container/SelectionPane/SelectionPane.vue b/package/src/container/SelectionPane/SelectionPane.vue
index 2403bfc3..0a06e3e1 100644
--- a/package/src/container/SelectionPane/SelectionPane.vue
+++ b/package/src/container/SelectionPane/SelectionPane.vue
@@ -5,7 +5,7 @@ import { getConnectedEdges } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 
-const { id, store } = useVueFlow()
+const { id, store, deleteKeyCode, selectionKeyCode, multiSelectionKeyCode } = useVueFlow()
 
 const onClick = (event: MouseEvent) => {
   store.hooks.paneClick.trigger(event)
@@ -17,7 +17,7 @@ const onContextMenu = (event: MouseEvent) => store.hooks.paneContextMenu.trigger
 
 const onWheel = (event: WheelEvent) => store.hooks.paneScroll.trigger(event)
 
-useKeyPress(store.deleteKeyCode, (keyPressed) => {
+useKeyPress(deleteKeyCode, (keyPressed) => {
   const selectedNodes = store.getSelectedNodes
   const selectedEdges = store.getSelectedEdges
   if (keyPressed && (selectedNodes || selectedEdges)) {
@@ -37,11 +37,11 @@ useKeyPress(store.deleteKeyCode, (keyPressed) => {
   }
 })
 
-useKeyPress(store.multiSelectionKeyCode, (keyPressed) => {
+useKeyPress(multiSelectionKeyCode, (keyPressed) => {
   store.multiSelectionActive = keyPressed
 })
 
-const selectionKeyPressed = useKeyPress(store.selectionKeyCode, (keyPressed) => {
+const selectionKeyPressed = useKeyPress(selectionKeyCode, (keyPressed) => {
   if (store.userSelectionActive && keyPressed) return
   store.userSelectionActive = keyPressed && store.elementsSelectable
 })
diff --git a/package/src/container/Viewport/Viewport.vue b/package/src/container/Viewport/Viewport.vue
index 85ab672d..7ac40c80 100644
--- a/package/src/container/Viewport/Viewport.vue
+++ b/package/src/container/Viewport/Viewport.vue
@@ -7,7 +7,7 @@ import { clamp, clampPosition } from '../../utils'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
 import Transform from './Transform.vue'
 
-const { id, store } = useVueFlow()
+const { id, store, zoomActivationKeyCode, selectionKeyCode } = useVueFlow()
 const viewportEl = templateRef<HTMLDivElement>('viewport', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
@@ -54,7 +54,7 @@ onMounted(() => {
     viewport: { x: updatedTransform.x, y: updatedTransform.y, zoom: updatedTransform.k },
   })
 
-  const selectionKeyPressed = useKeyPress(store.selectionKeyCode, (keyPress) => {
+  const selectionKeyPressed = useKeyPress(selectionKeyCode, (keyPress) => {
     if (keyPress) {
       d3Zoom.on('zoom', null)
     } else {
@@ -66,7 +66,7 @@ onMounted(() => {
     }
   })
 
-  const zoomKeyPressed = useKeyPress(store.zoomActivationKeyCode)
+  const zoomKeyPressed = useKeyPress(zoomActivationKeyCode)
 
   d3Zoom.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
     const flowTransform = eventToFlowTransform(event.transform)