feat(svelte): add panActivationKey

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -55,8 +55,6 @@
       positionAbsolute={node.positionAbsolute}
       positionOrigin={posOrigin}
       isParent={!!node[internalsSymbol]?.isParent}
-      width={node.width}
-      height={node.height}
       style={node.style}
       class={node.class}
       type={node.type}

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -52,6 +52,7 @@
     selectionRectMode,
     selectionKeyPressed,
     selectionMode,
+    panActivationKeyPressed,
     unselectNodesAndEdges
   } = useStore();
 
@@ -61,6 +62,7 @@
 
   $: isSelecting = $selectionKeyPressed;
   $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
+  $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
 
   function onClick(event: MouseEvent) {
     dispatch('paneclick', event);
@@ -159,7 +161,7 @@
   };
 
   const onContextMenu = (event: MouseEvent) => {
-    if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) {
+    if (Array.isArray(_panOnDrag) && _panOnDrag?.includes(2)) {
       event.preventDefault();
       return;
     }
@@ -168,6 +170,8 @@
   };
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={container}
   class="svelte-flow__pane"

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

@@ -30,6 +30,7 @@
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
   export let selectionKey: $$Props['selectionKey'] = undefined;
   export let selectionMode: $$Props['selectionMode'] = undefined;
+  export let panActivationKey: $$Props['panActivationKey'] = undefined;
   export let nodesDraggable: $$Props['nodesDraggable'] = undefined;
   export let nodesConnectable: $$Props['nodesConnectable'] = undefined;
   export let elementsSelectable: $$Props['elementsSelectable'] = undefined;
@@ -124,8 +125,9 @@
   on:dragover
   on:drop
   {...$$restProps}
+  role="application"
 >
-  <KeyHandler {selectionKey} {deleteKey} />
+  <KeyHandler {selectionKey} {deleteKey} {panActivationKey} />
   <Zoom
     {initialViewport}
     {onMoveStart}
@@ -189,7 +191,7 @@
 
   :root {
     --background-color-default: #fff;
-    --background-pattern-color-default: #eee;
+    --background-pattern-color-default: #ddd;
 
     --minimap-background-color-default: #fff;
     --minimap-mask-color-default: rgb(240, 240, 240, 0.6);

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

@@ -25,6 +25,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;
   selectionKey?: KeyDefinition;
+  panActivationKey?: KeyDefinition;
   deleteKey?: KeyDefinition;
   fitView?: boolean;
   nodeOrigin?: NodeOrigin;

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -27,10 +27,12 @@
     maxZoom,
     dragging,
     translateExtent,
-    lib
+    lib,
+    panActivationKeyPressed
   } = useStore();
 
   $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
+  $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
 </script>
 
 <div
@@ -49,7 +51,7 @@
     zoomOnDoubleClick,
     zoomOnPinch,
     panOnScroll,
-    panOnDrag,
+    panOnDrag: _panOnDrag,
     panOnScrollSpeed: 0.5,
     panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
     zoomActivationKeyPressed: false,