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/actions/drag/index.ts

@@ -24,6 +24,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
     onDragStop,
     getStoreItems: () => {
       const snapGrid = get(store.snapGrid);
+      const vp = get(store.viewport);
 
       return {
         nodes: get(store.nodes),
@@ -34,7 +35,7 @@ export default function drag(domNode: Element, params: UseDragParams) {
         nodeOrigin: [0, 0],
         multiSelectionActive: false,
         domNode: get(store.domNode),
-        transform: get(store.transform),
+        transform: [vp.x, vp.y, vp.zoom],
         autoPanOnNodeDrag: get(store.autoPanOnNodeDrag),
         nodesDraggable: get(store.nodesDraggable),
         selectNodesOnDrag: get(store.selectNodesOnDrag),

packages/svelte/src/lib/actions/zoom/index.ts

@@ -5,15 +5,14 @@ import {
   type CoordinateExtent,
   type OnPanZoom,
   type PanZoomInstance,
-  type Transform,
   type Viewport
 } from '@xyflow/system';
 
 type ZoomParams = {
-  transform: Writable<Transform>;
+  viewport: Writable<Viewport>;
+  initialViewport: Viewport;
   minZoom: number;
   maxZoom: number;
-  initialViewport: Viewport;
   dragging: Writable<boolean>;
   onPanZoomStart?: OnPanZoom;
   onPanZoom?: OnPanZoom;
@@ -39,7 +38,7 @@ type ZoomParams = {
 };
 
 export default function zoom(domNode: Element, params: ZoomParams) {
-  const { panZoom, minZoom, maxZoom, initialViewport, transform, dragging, translateExtent } =
+  const { panZoom, minZoom, maxZoom, initialViewport, viewport, dragging, translateExtent } =
     params;
 
   const panZoomInstance = XYPanZoom({
@@ -48,11 +47,12 @@ export default function zoom(domNode: Element, params: ZoomParams) {
     maxZoom,
     translateExtent,
     viewport: initialViewport,
-    onTransformChange: transform.set,
+    onTransformChange: (transform) =>
+      viewport.set({ x: transform[0], y: transform[1], zoom: transform[2] }),
     onDraggingChange: dragging.set
   });
-  const { x, y, zoom } = panZoomInstance.getViewport();
-  transform.set([x, y, zoom]);
+  const currentViewport = panZoomInstance.getViewport();
+  viewport.set(currentViewport);
   panZoom.set(panZoomInstance);
 
   panZoomInstance.update(params);