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

@@ -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

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
 })

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)