feat(svelte): add panActivationKey

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, type SvelteComponentTyped } from 'svelte';
+  import { createEventDispatcher, SvelteComponent, type ComponentType } from 'svelte';
   import { getMarkerId } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
@@ -36,7 +36,7 @@
   const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
   const dispatch = createEventDispatcher();
 
-  const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypes[type!] || BezierEdge;
+  const edgeComponent: ComponentType<SvelteComponent<EdgeProps>> = $edgeTypes[type!] || BezierEdge;
 
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
@@ -52,6 +52,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <g
   class="svelte-flow__edge"
   class:animated

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -96,6 +96,8 @@
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
   {style}
+  role="button"
+  tabindex="-1"
 >
   <slot />
 </div>

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

@@ -9,8 +9,9 @@
 
   export let selectionKey: $$Props['selectionKey'] = 'Shift';
   export let deleteKey: $$Props['deleteKey'] = 'Backspace';
+  export let panActivationKey: $$Props['panActivationKey'] = ' ';
 
-  const { selectionKeyPressed, deleteKeyPressed } = useStore();
+  const { selectionKeyPressed, deleteKeyPressed, panActivationKeyPressed } = useStore();
 
   function isKeyObject(key?: KeyDefinition): key is KeyDefinitionObject {
     return typeof key === 'object';
@@ -21,6 +22,10 @@
 
   $: deleteKeyString = typeof deleteKey === 'string' ? deleteKey : deleteKey!.key;
   $: deleteKeyModifier = isKeyObject(deleteKey) ? deleteKey?.modifier : [];
+
+  $: panActivationKeyString =
+    typeof panActivationKey === 'string' ? panActivationKey : panActivationKey!.key;
+  $: panActivationKeyModifier = isKeyObject(panActivationKey) ? panActivationKey?.modifier : [];
 </script>
 
 <svelte:window
@@ -49,7 +54,10 @@
       {
         key: deleteKeyString,
         modifier: deleteKeyModifier,
-        callback: () => deleteKeyPressed.set(true)
+        callback: () => {
+          console.log('delete');
+          deleteKeyPressed.set(true);
+        }
       }
     ],
     type: 'keydown'
@@ -64,4 +72,24 @@
     ],
     type: 'keyup'
   }}
+  use:shortcut={{
+    trigger: [
+      {
+        key: panActivationKeyString,
+        modifier: panActivationKeyModifier,
+        callback: () => panActivationKeyPressed.set(true)
+      }
+    ],
+    type: 'keydown'
+  }}
+  use:shortcut={{
+    trigger: [
+      {
+        key: panActivationKeyString,
+        modifier: panActivationKeyModifier,
+        callback: () => panActivationKeyPressed.set(false)
+      }
+    ],
+    type: 'keyup'
+  }}
 />

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

@@ -3,4 +3,5 @@ import type { KeyDefinition } from '$lib/types';
 export type KeyHandlerProps = {
   selectionKey?: KeyDefinition;
   deleteKey?: KeyDefinition;
+  panActivationKey?: KeyDefinition;
 };

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount, setContext, SvelteComponentTyped } from 'svelte';
+  import {
+    createEventDispatcher,
+    onMount,
+    setContext,
+    SvelteComponent,
+    type ComponentType
+  } from 'svelte';
   import cc from 'classcat';
   import { errorMessages, type NodeProps } from '@xyflow/system';
 
@@ -19,8 +25,6 @@
   export let dragging: boolean = false;
   export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
   export let style: NodeWrapperProps['style'] = undefined;
-  export let width: NodeWrapperProps['width'] = undefined;
-  export let height: NodeWrapperProps['height'] = undefined;
   export let type: NodeWrapperProps['type'] = 'default';
   export let isParent: NodeWrapperProps['isParent'] = false;
   export let positionAbsolute: NodeWrapperProps['positionAbsolute'] = undefined;
@@ -43,7 +47,7 @@
     type = 'default';
   }
 
-  const nodeComponent: typeof SvelteComponentTyped<NodeProps> = $nodeTypes[type!] || DefaultNode;
+  const nodeComponent: ComponentType<SvelteComponent<NodeProps>> = $nodeTypes[type!] || DefaultNode;
   const selectNodesOnDrag = false;
   const dispatch = createEventDispatcher();
 
@@ -74,6 +78,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   use:drag={{
     nodeId: id,