refactor(svelte): add zoomActivationKey and allow null for keys #3618 (#3627)

* refactor(keys): add zoomActivationKey and allow null #3618

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

@@ -34,6 +34,8 @@
   export let selectionKey: $$Props['selectionKey'] = undefined;
   export let selectionMode: $$Props['selectionMode'] = undefined;
   export let panActivationKey: $$Props['panActivationKey'] = undefined;
+  export let multiSelectionKey: $$Props['multiSelectionKey'] = undefined;
+  export let zoomActivationKey: $$Props['zoomActivationKey'] = undefined;
   export let nodesDraggable: $$Props['nodesDraggable'] = undefined;
   export let nodesConnectable: $$Props['nodesConnectable'] = undefined;
   export let nodeDragThreshold: $$Props['nodeDragThreshold'] = undefined;
@@ -166,7 +168,13 @@
   {...$$restProps}
   role="application"
 >
-  <KeyHandler {selectionKey} {deleteKey} {panActivationKey} />
+  <KeyHandler
+    {selectionKey}
+    {deleteKey}
+    {panActivationKey}
+    {multiSelectionKey}
+    {zoomActivationKey}
+  />
   <Zoom
     {initialViewport}
     {onMoveStart}

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

@@ -34,9 +34,11 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   edges: Writable<Edge[]>;
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;
-  selectionKey?: KeyDefinition;
-  panActivationKey?: KeyDefinition;
-  deleteKey?: KeyDefinition;
+  selectionKey?: KeyDefinition | null;
+  panActivationKey?: KeyDefinition | null;
+  deleteKey?: KeyDefinition | null;
+  multiSelectionKey?: KeyDefinition | null;
+  zoomActivationKey?: KeyDefinition | null;
   fitView?: boolean;
   fitViewOptions?: FitViewOptions;
   nodeOrigin?: NodeOrigin;

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

@@ -28,7 +28,8 @@
     dragging,
     translateExtent,
     lib,
-    panActivationKeyPressed
+    panActivationKeyPressed,
+    zoomActivationKeyPressed
   } = useStore();
 
   $: viewPort = initialViewport || { x: 0, y: 0, zoom: 1 };
@@ -55,7 +56,7 @@
     panOnDrag: _panOnDrag,
     panOnScrollSpeed: 0.5,
     panOnScrollMode: panOnScrollMode || PanOnScrollMode.Free,
-    zoomActivationKeyPressed: false,
+    zoomActivationKeyPressed: $zoomActivationKeyPressed,
     preventScrolling: typeof preventScrolling === 'boolean' ? preventScrolling : true,
     noPanClassName: 'nopan',
     noWheelClassName: 'nowheel',