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-19 15:52:44 +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

11
package/src/composables/useKeyPress.ts
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

8
package/src/container/SelectionPane/SelectionPane.vue
View File

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

6
package/src/container/Viewport/Viewport.vue
View File

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