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/Pane/Pane.svelte

@@ -45,7 +45,7 @@
   const {
     nodes,
     edges,
-    transform,
+    viewport,
     dragging,
     elementsSelectable,
     selectionRect,
@@ -120,7 +120,7 @@
     selectedNodes = getNodesInside<Node>(
       $nodes,
       nextUserSelectRect,
-      $transform,
+      [$viewport.x, $viewport.y, $viewport.zoom],
       $selectionMode === SelectionMode.Partial,
       true
     );

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;

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { useStore } from '$lib/store';
 
-  const { transform } = useStore();
+  const { viewport } = useStore();
 </script>
 
 <div
   class="svelte-flow__viewport xyflow__viewport"
-  style="transform: translate({$transform[0]}px, {$transform[1]}px) scale({$transform[2]})"
+  style="transform: translate({$viewport.x}px, {$viewport.y}px) scale({$viewport.zoom})"
 >
   <slot />
 </div>

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -20,7 +20,7 @@
   export let panOnScroll: $$Props['panOnScroll'];
 
   const {
-    transform,
+    viewport,
     panZoom,
     selectionKeyPressed,
     minZoom,
@@ -38,7 +38,7 @@
 <div
   class="svelte-flow__zoom"
   use:zoom={{
-    transform,
+    viewport,
     minZoom: $minZoom,
     maxZoom: $maxZoom,
     initialViewport: viewPort,