diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts index 4b11ade9..52de5899 100644 --- a/packages/core/src/composables/useKeyPress.ts +++ b/packages/core/src/composables/useKeyPress.ts @@ -4,6 +4,10 @@ import type { KeyFilter, KeyPredicate } from '@vueuse/core' import { onKeyStroke, useEventListener } from '@vueuse/core' import { useWindow } from './useWindow' +export interface UseKeyPressOptions { + actInsideInputWithModifier?: MaybeRefOrGetter +} + export function isInputDOMNode(event: KeyboardEvent): boolean { const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement @@ -72,7 +76,11 @@ function useKeyOrCode(code: string, keysToWatch: string | string[]) { * @param keyFilter - Can be a boolean, a string or an array of strings. If it's a boolean, it will always return that value. If it's a string, it will return true if the key is pressed. If it's an array of strings, it will return true if any of the keys are pressed, or a combination is pressed (e.g. ['ctrl+a', 'ctrl+b']) * @param onChange - Callback function that will be called when the key state changes */ -export function useKeyPress(keyFilter: MaybeRefOrGetter, onChange?: (keyPressed: boolean) => void) { +export function useKeyPress( + keyFilter: MaybeRefOrGetter, + onChange?: (keyPressed: boolean) => void, + options: UseKeyPressOptions = { actInsideInputWithModifier: true }, +) { const window = useWindow() const isPressed = ref(toValue(keyFilter) === true) diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue index d85b5c35..1fd92936 100644 --- a/packages/core/src/container/Pane/Pane.vue +++ b/packages/core/src/container/Pane/Pane.vue @@ -43,35 +43,39 @@ const containerBounds = ref() const hasActiveSelection = toRef(() => elementsSelectable.value && (isSelecting || userSelectionActive.value)) -useKeyPress(deleteKeyCode, (keyPressed) => { - if (!keyPressed) { - return - } - - const nodesToRemove = getNodes.value.reduce((res, node) => { - if (!node.selected && node.parentNode && res.find((n) => n.id === node.parentNode)) { - res.push(node) - } else if (node.selected) { - res.push(node) +useKeyPress( + deleteKeyCode, + (keyPressed) => { + if (!keyPressed) { + return } - return res - }, []) + const nodesToRemove = getNodes.value.reduce((res, node) => { + if (!node.selected && node.parentNode && res.find((n) => n.id === node.parentNode)) { + res.push(node) + } else if (node.selected) { + res.push(node) + } - if (nodesToRemove || getSelectedEdges.value) { - if (getSelectedEdges.value.length > 0) { - removeEdges(getSelectedEdges.value) + return res + }, []) + + if (nodesToRemove || getSelectedEdges.value) { + if (getSelectedEdges.value.length > 0) { + removeEdges(getSelectedEdges.value) + } + + if (nodesToRemove.length > 0) { + removeNodes(nodesToRemove) + } + + nodesSelectionActive.value = false + + removeSelectedElements() } - - if (nodesToRemove.length > 0) { - removeNodes(nodesToRemove) - } - - nodesSelectionActive.value = false - - removeSelectedElements() - } -}) + }, + { actInsideInputWithModifier: false }, +) useKeyPress(multiSelectionKeyCode, (keyPressed) => { multiSelectionActive.value = keyPressed