make viewport bindable

examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -12,7 +11,7 @@
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable([
+	let nodes = $state.raw([
 		{
 			id: 'A',
 			position: { x: 0, y: 0 },
@@ -20,22 +19,20 @@
 		},
 		{ id: 'B', position: { x: 0, y: 100 }, data: { label: 'B' } }
 	]);
-	const edges = writable([{ id: 'ab', source: 'A', target: 'B' }]);
-	const viewport = writable<Viewport>({ x: 100, y: 100, zoom: 1.25 });
 
-	const { fitView } = useSvelteFlow();
+	let edges = $state.raw([{ id: 'ab', source: 'A', target: 'B' }]);
+	let viewport = $state<Viewport>({ x: 100, y: 100, zoom: 1.25 });
+
+	const { fitView } = $derived(useSvelteFlow());
 
 	const updateViewport = () => {
-		$viewport.x += 10;
-		$viewport = $viewport;
+		viewport.x += 10;
 	};
 
-	viewport.subscribe((vp) => {
-		console.log('viewport update', vp);
-	});
+	$inspect(viewport);
 </script>
 
-<SvelteFlow {nodes} {edges} {viewport}>
+<SvelteFlow bind:nodes bind:edges bind:viewport>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 

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>;