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/react/src/hooks/useViewportSync.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import type { Viewport } from '@xyflow/system';
+
+import { useStore, useStoreApi } from './useStore';
+import type { ReactFlowState } from '../types';
+
+const selector = (state: ReactFlowState) => state.panZoom?.syncViewport;
+
+export default function useViewportSync(viewport?: Viewport) {
+  const syncViewport = useStore(selector);
+  const store = useStoreApi();
+
+  useEffect(() => {
+    if (viewport) {
+      syncViewport?.(viewport);
+      store.setState({ transform: [viewport.x, viewport.y, viewport.zoom] });
+    }
+  }, [viewport, syncViewport]);
+
+  return null;
+}