feat(svelte) add fitViewOptions, closes #3440

examples/react/src/examples/Overview/index.tsx

@@ -199,7 +199,7 @@ const OverviewFlow = () => {
       onConnect={onConnect}
       onPaneClick={onPaneClick}
       onPaneScroll={onPaneScroll}
-      onPaneContextMenu={onPaneContextMenu}
+      // onPaneContextMenu={onPaneContextMenu}
       onNodeDragStart={onNodeDragStart}
       onNodeDrag={onNodeDrag}
       onNodeDragStop={onNodeDragStop}
@@ -221,7 +221,7 @@ const OverviewFlow = () => {
       onEdgeMouseLeave={onEdgeMouseLeave}
       onEdgeDoubleClick={onEdgeDoubleClick}
       fitView
-      fitViewOptions={{ padding: 0.2 }}
+      fitViewOptions={{ padding: 0.1, nodes: [{ id: '1' }] }}
       attributionPosition="top-right"
       maxZoom={Infinity}
       onNodesDelete={onNodesDelete}

examples/svelte/src/routes/overview/+page.svelte

@@ -130,8 +130,16 @@
 	{nodeTypes}
 	{edgeTypes}
 	fitView
-	minZoom={0.1}
+	fitViewOptions={{
-	maxZoom={2.5}
+		padding: 10,
+		nodes: [
+			{
+				id: '1'
+			}
+		]
+	}}
+	minZoom={0}
+	maxZoom={Infinity}
 	selectionMode={SelectionMode.Full}
 	initialViewport={{ x: 100, y: 100, zoom: 2 }}
 	snapGrid={[25, 25]}

packages/react/src/store/index.ts

@@ -80,13 +80,13 @@ const createRFStore = () =>
 
         const nextNodes = updateAbsolutePositions(updatedNodes, nodeOrigin);
 
-        const nextFitViewDone =
+        let nextFitViewDone = fitViewDone;
-          fitViewDone ||
+        if (!fitViewDone && fitViewOnInit) {
-          (fitViewOnInit &&
+          nextFitViewDone = fitView({
-            fitView({
+            ...fitViewOnInitOptions,
-              ...fitViewOnInitOptions,
+            nodes: fitViewOnInitOptions?.nodes || nextNodes,
-              nodes: nextNodes,
+          });
-            }));
+        }
 
         set({ nodes: nextNodes, fitViewDone: nextFitViewDone });
 
@@ -243,7 +243,6 @@ const createRFStore = () =>
       },
       fitView: (options?: FitViewOptions): boolean => {
         const { panZoom, nodes, width, height, minZoom, maxZoom, nodeOrigin } = get();
-        const fitViewNodes = options?.nodes || nodes;
 
         if (!panZoom) {
           return false;
@@ -251,7 +250,7 @@ const createRFStore = () =>
 
         return fitViewSystem(
           {
-            nodes: fitViewNodes as Node[],
+            nodes,
             width,
             height,
             panZoom,

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 =
+    if (!get(store.fitViewOnInitDone) && get(store.fitViewOnInit)) {
-      get(store.fitViewOnInitDone) || (get(store.fitViewOnInit) && fitView({ nodes: nextNodes }));
+      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),

packages/system/src/utils/general.ts

@@ -160,7 +160,7 @@ export const getTransformForBounds = (
   height: number,
   minZoom: number,
   maxZoom: number,
-  padding = 0.1
+  padding: number
 ): Transform => {
   const xZoom = width / (bounds.width * (1 + padding));
   const yZoom = height / (bounds.height * (1 + padding));

packages/system/src/utils/graph.ts

@@ -180,10 +180,11 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
     return isVisible;
   });
 
-  const nodesInitialized = filteredNodes.every((n) => n.width && n.height);
+  console.log(filteredNodes);
 
-  if (nodes.length > 0 && nodesInitialized) {
+  if (filteredNodes.length > 0) {
-    const bounds = getRectOfNodes(nodes, nodeOrigin);
+    const bounds = getRectOfNodes(filteredNodes, nodeOrigin);
+    console.log(bounds);
 
     const [x, y, zoom] = getTransformForBounds(
       bounds,