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

examples/react/src/App/index.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-ro
 import Basic from '../examples/Basic';
 import Backgrounds from '../examples/Backgrounds';
 import ControlledUncontrolled from '../examples/ControlledUncontrolled';
+import ControlledViewport from '../examples/ControlledViewport';
 import CustomConnectionLine from '../examples/CustomConnectionLine';
 import CustomMiniMapNode from '../examples/CustomMiniMapNode';
 import CustomNode from '../examples/CustomNode';
@@ -74,6 +75,11 @@ const routes: IRoute[] = [
     path: '/controlled-uncontrolled',
     component: ControlledUncontrolled,
   },
+  {
+    name: 'Controlled Viewport',
+    path: '/controlled-viewport',
+    component: ControlledViewport,
+  },
   {
     name: 'Custom Connection Line',
     path: '/custom-connectionline',