diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte index 2f21107d..ef8f9a02 100644 --- a/examples/svelte/src/routes/examples/overview/+page.svelte +++ b/examples/svelte/src/routes/examples/overview/+page.svelte @@ -189,6 +189,7 @@ autoPanOnNodeDrag connectionMode={ConnectionMode.Strict} attributionPosition={'top-center'} + deleteKey={['Backspace', 'd']} > xy diff --git a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte index 11157e87..65661fd2 100644 --- a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte +++ b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte @@ -1,5 +1,9 @@ selectionKeyPressed.set(true) - } - ], - + trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(true)), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...selectionKeyDefinition, - enabled: selectionKeyDefinition.key !== null, - callback: () => selectionKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(false)), type: 'keyup' }} use:shortcut={{ - trigger: [ - { - ...multiSelectionKeyDefinition, - enabled: multiSelectionKeyDefinition.key !== null, - callback: () => multiselectionKeyPressed.set(true) - } - ], + trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(true)), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...multiSelectionKeyDefinition, - enabled: multiSelectionKeyDefinition.key !== null, - callback: () => multiselectionKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(false)), type: 'keyup' }} use:shortcut={{ - trigger: [ - { - ...deleteKeyDefinition, - enabled: deleteKeyDefinition.key !== null, - callback: (detail) => { - const isModifierKey = - detail.originalEvent.ctrlKey || - detail.originalEvent.metaKey || - detail.originalEvent.shiftKey; - if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) { - deleteKeyPressed.set(true); - } - } + trigger: getShortcutTrigger(deleteKey, (detail) => { + const isModifierKey = + detail.originalEvent.ctrlKey || + detail.originalEvent.metaKey || + detail.originalEvent.shiftKey; + if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) { + deleteKeyPressed.set(true); } - ], + }), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...deleteKeyDefinition, - enabled: deleteKeyDefinition.key !== null, - callback: () => deleteKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(deleteKey, () => deleteKeyPressed.set(false)), type: 'keyup' }} use:shortcut={{ - trigger: [ - { - ...panActivationKeyDefinition, - enabled: panActivationKeyDefinition.key !== null, - callback: () => panActivationKeyPressed.set(true) - } - ], + trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(true)), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...panActivationKeyDefinition, - enabled: panActivationKeyDefinition.key !== null, - callback: () => panActivationKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(false)), type: 'keyup' }} use:shortcut={{ - trigger: [ - { - ...zoomActivationKeyDefinition, - enabled: zoomActivationKeyDefinition.key !== null, - callback: () => zoomActivationKeyPressed.set(true) - } - ], + trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(true)), type: 'keydown' }} use:shortcut={{ - trigger: [ - { - ...zoomActivationKeyDefinition, - enabled: zoomActivationKeyDefinition.key !== null, - callback: () => zoomActivationKeyPressed.set(false) - } - ], + trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(false)), type: 'keyup' }} /> diff --git a/packages/svelte/src/lib/components/KeyHandler/types.ts b/packages/svelte/src/lib/components/KeyHandler/types.ts index 9a6ebe86..0df03d76 100644 --- a/packages/svelte/src/lib/components/KeyHandler/types.ts +++ b/packages/svelte/src/lib/components/KeyHandler/types.ts @@ -1,9 +1,9 @@ import type { KeyDefinition } from '$lib/types'; export type KeyHandlerProps = { - selectionKey?: KeyDefinition | null; - multiSelectionKey?: KeyDefinition | null; - deleteKey?: KeyDefinition | null; - panActivationKey?: KeyDefinition | null; - zoomActivationKey?: KeyDefinition | null; + selectionKey?: KeyDefinition | KeyDefinition[] | null; + multiSelectionKey?: KeyDefinition | KeyDefinition[] | null; + deleteKey?: KeyDefinition | KeyDefinition[] | null; + panActivationKey?: KeyDefinition | KeyDefinition[] | null; + zoomActivationKey?: KeyDefinition | KeyDefinition[] | null; }; diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index ecda2319..8295b27c 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -86,27 +86,27 @@ export type SvelteFlowProps = DOMAttributes & { /** Pressing down this key you can select multiple elements with a selection box. * @default 'Shift' */ - selectionKey?: KeyDefinition | null; + selectionKey?: KeyDefinition | KeyDefinition[] | null; /** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false. * * By setting this prop to null you can disable this functionality. * @default 'Space' */ - panActivationKey?: KeyDefinition | null; + panActivationKey?: KeyDefinition | KeyDefinition[] | null; /** Pressing down this key deletes all selected nodes & edges. * @default 'Backspace' */ - deleteKey?: KeyDefinition | null; + deleteKey?: KeyDefinition | KeyDefinition[] | null; /** Pressing down this key you can select multiple elements by clicking. * @default 'Meta' for macOS, "Ctrl" for other systems */ - multiSelectionKey?: KeyDefinition | null; + multiSelectionKey?: KeyDefinition | KeyDefinition[] | null; /** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. * * By setting this prop to null you can disable this functionality. * @default 'Meta' for macOS, "Ctrl" for other systems * */ - zoomActivationKey?: KeyDefinition | null; + zoomActivationKey?: KeyDefinition | KeyDefinition[] | null; /** If set, initial viewport will show all nodes & edges */ fitView?: boolean; /** Options to be used in combination with fitView