make viewport bindable

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

@@ -64,6 +64,7 @@
     children,
     nodes = $bindable([]),
     edges = $bindable([]),
+    viewport = $bindable(undefined),
     ...props
   }: SvelteFlowProps = $props();
 
@@ -93,6 +94,12 @@
     },
     set edges(newEdges) {
       edges = newEdges;
+    },
+    get viewport() {
+      return viewport;
+    },
+    set viewport(newViewport) {
+      viewport = newViewport;
     }
   });
 

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

@@ -35,7 +35,7 @@ import type {
   IsValidConnection,
   DefaultNodeOptions
 } from '$lib/types';
-import type { Writable } from 'svelte/store';
+
 import type { Snippet } from 'svelte';
 import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '$lib/types/events';
 
@@ -168,8 +168,8 @@ export type SvelteFlowProps = NodeEvents &
      * };
      */
     initialViewport?: Viewport;
-    /** Custom viewport writable to be used instead of internal one */
-    viewport?: Writable<Viewport>;
+    /** Custom viewport to be used instead of internal one */
+    viewport?: Viewport;
     /** The radius around a handle where you drop a connection line to create a new edge.
      * @default 20
      */

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

@@ -102,6 +102,7 @@ export const getInitialStore = (signals: StoreSignals) => {
     set edges(edges) {
       signals.edges = edges;
     }
+
     nodeLookup: NodeLookup = new Map();
     parentLookup: ParentLookup = new Map();
     connectionLookup: ConnectionLookup = new Map();
@@ -147,7 +148,17 @@ export const getInitialStore = (signals: StoreSignals) => {
     nodeTypes: NodeTypes = $derived({ ...initialNodeTypes, ...signals.props.nodeTypes });
     edgeTypes: EdgeTypes = $derived({ ...initialEdgeTypes, ...signals.props.edgeTypes });
 
-    viewport: Viewport = $state(signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 });
+    // _viewport is the internal viewport. We either return signals.viewport or _viewport
+    _viewport: Viewport = $state(signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 });
+    get viewport() {
+      return signals.viewport ?? this._viewport;
+    }
+    set viewport(viewport: Viewport) {
+      if (signals.viewport) {
+        signals.viewport = viewport;
+      }
+      this._viewport = viewport;
+    }
 
     connectionMode: ConnectionMode = $derived(
       signals.props.connectionMode ?? ConnectionMode.Strict

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

@@ -5,7 +5,8 @@ import type {
   Connection,
   UpdateNodePositions,
   CoordinateExtent,
-  UpdateConnection
+  UpdateConnection,
+  Viewport
 } from '@xyflow/system';
 
 import type { getInitialStore } from './initial-store.svelte';
@@ -42,6 +43,7 @@ export type StoreSignals = {
   height?: number;
   nodes: Node[];
   edges: Edge[];
+  viewport?: Viewport;
 };
 
 export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;