feat(svelte) add fitViewOptions, closes #3440

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

@@ -23,6 +23,7 @@
   export let nodes: $$Props['nodes'];
   export let edges: $$Props['edges'];
   export let fitView: $$Props['fitView'] = undefined;
+  export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
   export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -79,6 +80,10 @@
       store.fitViewOnInit.set(fitView);
     }
 
+    if (fitViewOptions) {
+      store.fitViewOptions.set(fitViewOptions);
+    }
+
     updateStore(store, {
       nodeTypes,
       edgeTypes,

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

@@ -23,7 +23,8 @@ import type {
   NodeTypes,
   KeyDefinition,
   EdgeTypes,
-  DefaultEdgeOptions
+  DefaultEdgeOptions,
+  FitViewOptions
 } from '$lib/types';
 import type { Writable } from 'svelte/store';
 
@@ -37,6 +38,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   panActivationKey?: KeyDefinition;
   deleteKey?: KeyDefinition;
   fitView?: boolean;
+  fitViewOptions?: FitViewOptions;
   nodeOrigin?: NodeOrigin;
   minZoom?: number;
   maxZoom?: number;

packages/svelte/src/lib/store/index.ts

@@ -90,13 +90,39 @@ export function createStore(): SvelteFlowStore {
       return;
     }
 
-    const fitViewOnInitDone =
-      get(store.fitViewOnInitDone) || (get(store.fitViewOnInit) && fitView({ nodes: nextNodes }));
+    if (!get(store.fitViewOnInitDone) && get(store.fitViewOnInit)) {
+      const fitViewOptions = get(store.fitViewOptions);
+      const fitViewOnInitDone = fitView(nextNodes, {
+        ...fitViewOptions,
+        nodes: fitViewOptions?.nodes || nextNodes
+      });
+      store.fitViewOnInitDone.set(fitViewOnInitDone);
+    }
 
-    store.fitViewOnInitDone.set(fitViewOnInitDone);
     store.nodes.set(nextNodes);
   }
 
+  function fitView(nodes: Node[], options?: FitViewOptions) {
+    const panZoom = get(store.panZoom);
+
+    if (!panZoom) {
+      return false;
+    }
+
+    return fitViewUtil(
+      {
+        nodes,
+        width: get(store.width),
+        height: get(store.height),
+        minZoom: get(store.minZoom),
+        maxZoom: get(store.maxZoom),
+        panZoom,
+        nodeOrigin: get(store.nodeOrigin)
+      },
+      options
+    );
+  }
+
   function zoomBy(factor: number, options?: ViewportHelperFunctionOptions) {
     const panZoom = get(store.panZoom);
 
@@ -140,28 +166,6 @@ export function createStore(): SvelteFlowStore {
     }
   }
 
-  function fitView(options?: FitViewOptions) {
-    const panZoom = get(store.panZoom);
-    const fitViewNodes = options?.nodes || get(store.nodes);
-
-    if (!panZoom) {
-      return false;
-    }
-
-    return fitViewUtil(
-      {
-        nodes: fitViewNodes as Node[],
-        width: get(store.width),
-        height: get(store.height),
-        minZoom: get(store.minZoom),
-        maxZoom: get(store.maxZoom),
-        panZoom,
-        nodeOrigin: get(store.nodeOrigin)
-      },
-      {}
-    );
-  }
-
   function resetSelectedItem<T extends Node | Edge>(item: T) {
     if (item.selected) {
       return {

packages/svelte/src/lib/store/initial-store.ts

@@ -24,7 +24,14 @@ import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
 import StepEdge from '$lib/components/edges/StepEdge.svelte';
-import type { ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted, Node } from '$lib/types';
+import type {
+  ConnectionData,
+  NodeTypes,
+  EdgeTypes,
+  EdgeLayouted,
+  Node,
+  FitViewOptions
+} from '$lib/types';
 import { createNodesStore, createEdgesStore } from './utils';
 
 export const initConnectionData = {
@@ -64,6 +71,7 @@ export const getInitialStore = () => ({
   autoPanOnConnect: writable<boolean>(true),
   fitViewOnInit: writable<boolean>(false),
   fitViewOnInitDone: writable<boolean>(false),
+  fitViewOptions: writable<FitViewOptions>(undefined),
   panZoom: writable<PanZoomInstance | null>(null),
   snapGrid: writable<SnapGrid | null>(null),
   dragging: writable<boolean>(false),