alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Reactive key bindings for delete, select etc.

Browse Source 
# What's changed?

* Use ref for keycodes from store to reactively listen to keyboard events and trigger delete etc.
This commit is contained in:
Braks
2022-04-21 10:47:53 +02:00
parent ee38f4af9b
commit 5951beb85a
3 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/src/composables/useKeyPress.ts
+5 -6
View File
@@ -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