feat(react/svelte): controlled viewport (#3461)

* feat(react): controlled viewport

* refactor(react): cleanup viewport

* feat(svelte): two way data binding for viewport, cleanup transform <> viewport stuff

* refactor(svelte): viewport stuff

examples/svelte/src/components/Header/Header.svelte

@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';
 
 	const routes = [
+		'custom-connection-line',
 		'customnode',
 		'drag-n-drop',
 		'edges',
@@ -11,10 +12,10 @@
 		'overview',
 		'stress',
 		'subflows',
+		'two-way-viewport',
 		'usesvelteflow',
 		'useupdatenodeinternals',
-		'validation',
-		'custom-connection-line'
+		'validation'
 	];
 
 	const onChange = (event: Event) => {

examples/svelte/src/routes/two-way-viewport/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { SvelteFlowProvider } from '@xyflow/svelte';
+
+	import Flow from './Flow.svelte';
+</script>
+
+<SvelteFlowProvider>
+	<Flow />
+</SvelteFlowProvider>

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import {
+		SvelteFlow,
+		Controls,
+		Background,
+		BackgroundVariant,
+		Panel,
+		useSvelteFlow,
+		type Viewport
+	} from '@xyflow/svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodes = writable([
+		{
+			id: 'A',
+			position: { x: 0, y: 0 },
+			data: { label: 'A' }
+		},
+		{ id: 'B', position: { x: 0, y: 100 }, data: { label: 'B' } }
+	]);
+	const edges = writable([{ id: 'ab', source: 'A', target: 'B' }]);
+	const viewport = writable<Viewport>({ x: 0, y: 10, zoom: 1.25 });
+
+	const { fitView } = useSvelteFlow();
+
+	const updateViewport = () => {
+		$viewport.x += 10;
+		$viewport = $viewport;
+	};
+
+	viewport.subscribe((vp) => {
+		console.log('viewport update', vp);
+	});
+</script>
+
+<SvelteFlow {nodes} {edges} fitView {viewport}>
+	<Controls />
+	<Background variant={BackgroundVariant.Dots} />
+
+	<Panel>
+		<button on:click={updateViewport}>update viewport</button>
+		<button on:click={() => fitView()}>fitView</button>
+	</Panel>
+</SvelteFlow>