diff --git a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
index 4c4f138e..38a54158 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(selectionKeyDefinition, () => selectionKeyPressed.set(true)),
type: 'keydown'
}}
use:shortcut={{
- trigger: [
- {
- ...selectionKeyDefinition,
- enabled: selectionKeyDefinition.key !== null,
- callback: () => selectionKeyPressed.set(false)
- }
- ],
+ trigger: getShortcutTrigger(selectionKeyDefinition, () => selectionKeyPressed.set(false)),
type: 'keyup'
}}
use:shortcut={{
- trigger: [
- {
- ...multiSelectionKeyDefinition,
- enabled: multiSelectionKeyDefinition.key !== null,
- callback: () => multiselectionKeyPressed.set(true)
- }
- ],
+ trigger: getShortcutTrigger(multiSelectionKeyDefinition, () =>
+ multiselectionKeyPressed.set(true)
+ ),
type: 'keydown'
}}
use:shortcut={{
- trigger: [
- {
- ...multiSelectionKeyDefinition,
- enabled: multiSelectionKeyDefinition.key !== null,
- callback: () => multiselectionKeyPressed.set(false)
- }
- ],
+ trigger: getShortcutTrigger(multiSelectionKeyDefinition, () =>
+ 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(deleteKeyDefinition, (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(deleteKeyDefinition, () => deleteKeyPressed.set(false)),
type: 'keyup'
}}
use:shortcut={{
- trigger: [
- {
- ...panActivationKeyDefinition,
- enabled: panActivationKeyDefinition.key !== null,
- callback: () => panActivationKeyPressed.set(true)
- }
- ],
+ trigger: getShortcutTrigger(panActivationKeyDefinition, () =>
+ panActivationKeyPressed.set(true)
+ ),
type: 'keydown'
}}
use:shortcut={{
- trigger: [
- {
- ...panActivationKeyDefinition,
- enabled: panActivationKeyDefinition.key !== null,
- callback: () => panActivationKeyPressed.set(false)
- }
- ],
+ trigger: getShortcutTrigger(panActivationKeyDefinition, () =>
+ panActivationKeyPressed.set(false)
+ ),
type: 'keyup'
}}
use:shortcut={{
- trigger: [
- {
- ...zoomActivationKeyDefinition,
- enabled: zoomActivationKeyDefinition.key !== null,
- callback: () => zoomActivationKeyPressed.set(true)
- }
- ],
+ trigger: getShortcutTrigger(zoomActivationKeyDefinition, () =>
+ zoomActivationKeyPressed.set(true)
+ ),
type: 'keydown'
}}
use:shortcut={{
- trigger: [
- {
- ...zoomActivationKeyDefinition,
- enabled: zoomActivationKeyDefinition.key !== null,
- callback: () => zoomActivationKeyPressed.set(false)
- }
- ],
+ trigger: getShortcutTrigger(zoomActivationKeyDefinition, () =>
+ 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