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/container/ZoomPane/index.tsx

@@ -18,7 +18,9 @@ type ZoomPaneProps = Omit<
   | 'noDragClassName'
   | 'disableKeyboardA11y'
   | 'selectionOnDrag'
->;
+> & {
+  isControlledViewport: boolean;
+};
 
 const selector = (s: ReactFlowState) => ({
   userSelectionActive: s.userSelectionActive,
@@ -43,6 +45,8 @@ const ZoomPane = ({
   children,
   noWheelClassName,
   noPanClassName,
+  onViewportChange,
+  isControlledViewport,
 }: ZoomPaneProps) => {
   const store = useStoreApi();
   const zoomPane = useRef<HTMLDivElement>(null);
@@ -60,7 +64,13 @@ const ZoomPane = ({
         maxZoom,
         translateExtent,
         viewport: defaultViewport,
-        onTransformChange: (transform: Transform) => store.setState({ transform }),
+        onTransformChange: (transform: Transform) => {
+          onViewportChange?.({ x: transform[0], y: transform[1], zoom: transform[2] });
+
+          if (!isControlledViewport) {
+            store.setState({ transform });
+          }
+        },
         onDraggingChange: (paneDragging: boolean) => store.setState({ paneDragging }),
         onPanZoomStart: (event, vp) => {
           const { onViewportChangeStart, onMoveStart } = store.getState();