Svelte Flow: possible to add multiple keys

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { shortcut, type ShortcutModifierDefinition } from '@svelte-put/shortcut';
+  import {
+    shortcut,
+    type ShortcutEventDetail,
+    type ShortcutModifierDefinition
+  } from '@svelte-put/shortcut';
   import { isInputDOMNode, isMacOs } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
@@ -40,140 +44,101 @@
     return isKeyObject(key) ? key.key : key;
   }
 
-  $: selectionKeyDefinition = {
+  function getShortcutDefinition(keyString: KeyDefinition | KeyDefinition[] | null | undefined) {
-    key: getKeyString(selectionKey),
+    return Array.isArray(keyString)
-    modifier: getModifier(selectionKey)
+      ? keyString.map((key) => ({
-  };
+          key: getKeyString(key),
+          modifier: getModifier(key)
+        }))
+      : [
+          {
+            key: getKeyString(keyString),
+            modifier: getModifier(keyString)
+          }
+        ];
+  }
 
-  $: multiSelectionKeyDefinition = {
+  function getShortcutTrigger(
-    key: getKeyString(multiSelectionKey),
+    keyDefinition: KeyDefinitionObject[],
-    modifier: getModifier(multiSelectionKey)
+    callback: (detail: ShortcutEventDetail) => void
-  };
+  ) {
+    return keyDefinition.map((definition) => ({
+      ...definition,
+      enabled: definition.key !== null,
+      callback
+    }));
+  }
 
-  $: deleteKeyDefinition = {
+  $: selectionKeyDefinition = getShortcutDefinition(selectionKey);
-    key: getKeyString(deleteKey),
-    modifier: getModifier(deleteKey)
-  };
 
-  $: panActivationKeyDefinition = {
+  $: multiSelectionKeyDefinition = getShortcutDefinition(multiSelectionKey);
-    key: getKeyString(panActivationKey),
-    modifier: getModifier(panActivationKey)
-  };
 
-  $: zoomActivationKeyDefinition = {
+  $: deleteKeyDefinition = getShortcutDefinition(deleteKey);
-    key: getKeyString(zoomActivationKey),
+
-    modifier: getModifier(zoomActivationKey)
+  $: panActivationKeyDefinition = getShortcutDefinition(panActivationKey);
-  };
+
+  $: zoomActivationKeyDefinition = getShortcutDefinition(zoomActivationKey);
 </script>
 
 <svelte:window
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(selectionKeyDefinition, () => selectionKeyPressed.set(true)),
-      {
-        ...selectionKeyDefinition,
-        enabled: selectionKeyDefinition.key !== null,
-        callback: () => selectionKeyPressed.set(true)
-      }
-    ],
-
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(selectionKeyDefinition, () => selectionKeyPressed.set(false)),
-      {
-        ...selectionKeyDefinition,
-        enabled: selectionKeyDefinition.key !== null,
-        callback: () => selectionKeyPressed.set(false)
-      }
-    ],
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(multiSelectionKeyDefinition, () =>
-      {
+      multiselectionKeyPressed.set(true)
-        ...multiSelectionKeyDefinition,
+    ),
-        enabled: multiSelectionKeyDefinition.key !== null,
-        callback: () => multiselectionKeyPressed.set(true)
-      }
-    ],
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(multiSelectionKeyDefinition, () =>
-      {
+      multiselectionKeyPressed.set(false)
-        ...multiSelectionKeyDefinition,
+    ),
-        enabled: multiSelectionKeyDefinition.key !== null,
-        callback: () => multiselectionKeyPressed.set(false)
-      }
-    ],
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(deleteKeyDefinition, (detail) => {
-      {
+      const isModifierKey =
-        ...deleteKeyDefinition,
+        detail.originalEvent.ctrlKey ||
-        enabled: deleteKeyDefinition.key !== null,
+        detail.originalEvent.metaKey ||
-        callback: (detail) => {
+        detail.originalEvent.shiftKey;
-          const isModifierKey =
+      if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) {
-            detail.originalEvent.ctrlKey ||
+        deleteKeyPressed.set(true);
-            detail.originalEvent.metaKey ||
-            detail.originalEvent.shiftKey;
-          if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) {
-            deleteKeyPressed.set(true);
-          }
-        }
       }
-    ],
+    }),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(deleteKeyDefinition, () => deleteKeyPressed.set(false)),
-      {
-        ...deleteKeyDefinition,
-        enabled: deleteKeyDefinition.key !== null,
-        callback: () => deleteKeyPressed.set(false)
-      }
-    ],
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(panActivationKeyDefinition, () =>
-      {
+      panActivationKeyPressed.set(true)
-        ...panActivationKeyDefinition,
+    ),
-        enabled: panActivationKeyDefinition.key !== null,
-        callback: () => panActivationKeyPressed.set(true)
-      }
-    ],
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(panActivationKeyDefinition, () =>
-      {
+      panActivationKeyPressed.set(false)
-        ...panActivationKeyDefinition,
+    ),
-        enabled: panActivationKeyDefinition.key !== null,
-        callback: () => panActivationKeyPressed.set(false)
-      }
-    ],
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(zoomActivationKeyDefinition, () =>
-      {
+      zoomActivationKeyPressed.set(true)
-        ...zoomActivationKeyDefinition,
+    ),
-        enabled: zoomActivationKeyDefinition.key !== null,
-        callback: () => zoomActivationKeyPressed.set(true)
-      }
-    ],
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: [
+    trigger: getShortcutTrigger(zoomActivationKeyDefinition, () =>
-      {
+      zoomActivationKeyPressed.set(false)
-        ...zoomActivationKeyDefinition,
+    ),
-        enabled: zoomActivationKeyDefinition.key !== null,
-        callback: () => zoomActivationKeyPressed.set(false)
-      }
-    ],
     type: 'keyup'
   }}
 />

packages/svelte/src/lib/components/KeyHandler/types.ts

@@ -1,9 +1,9 @@
 import type { KeyDefinition } from '$lib/types';
 
 export type KeyHandlerProps = {
-  selectionKey?: KeyDefinition | null;
+  selectionKey?: KeyDefinition | KeyDefinition[] | null;
-  multiSelectionKey?: KeyDefinition | null;
+  multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
-  deleteKey?: KeyDefinition | null;
+  deleteKey?: KeyDefinition | KeyDefinition[] | null;
-  panActivationKey?: KeyDefinition | null;
+  panActivationKey?: KeyDefinition | KeyDefinition[] | null;
-  zoomActivationKey?: KeyDefinition | null;
+  zoomActivationKey?: KeyDefinition | KeyDefinition[] | null;
 };

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -86,27 +86,27 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   /** 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