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

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

@@ -27,6 +27,7 @@
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
   export let initialViewport: Viewport = { x: 0, y: 0, zoom: 1 };
+  export let viewport: $$Props['viewport'] = undefined;
   export let nodeTypes: $$Props['nodeTypes'] = undefined;
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
   export let selectionKey: $$Props['selectionKey'] = undefined;
@@ -81,6 +82,7 @@
 
     store.syncNodeStores(nodes);
     store.syncEdgeStores(edges);
+    store.syncViewport(viewport);
 
     if (fitView !== undefined) {
       store.fitViewOnInit.set(fitView);

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

@@ -47,6 +47,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   minZoom?: number;
   maxZoom?: number;
   initialViewport?: Viewport;
+  viewport?: Writable<Viewport>;
   connectionRadius?: number;
   connectionMode?: ConnectionMode;
   connectionLineStyle?: string;