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),