Canvas: Restore viewport on project select
Change-Id: I3dd60983ca0abe5fd3b84011bad384d50fa90dc1
diff --git a/apps/canvas/front/src/components/canvas.tsx b/apps/canvas/front/src/components/canvas.tsx
index 252c1b9..861437f 100644
--- a/apps/canvas/front/src/components/canvas.tsx
+++ b/apps/canvas/front/src/components/canvas.tsx
@@ -10,7 +10,7 @@
Panel,
useStoreApi,
} from "@xyflow/react";
-import { useStateStore, AppState, AppNode } from "@/lib/state";
+import { useStateStore, AppState, AppNode, useZoom } from "@/lib/state";
import { useShallow } from "zustand/react/shallow";
import { useCallback, useEffect, useMemo } from "react";
import { NodeGatewayHttps } from "@/components/node-gateway-https";
@@ -36,6 +36,7 @@
const store = useStateStore();
const instance = useReactFlow();
const flow = useStoreApi();
+ const viewport = useZoom();
useEffect(() => {
store.setViewport({
width: flow.getState().width,
@@ -45,6 +46,9 @@
transformZoom: flow.getState().transform[2],
});
}, [store, flow]);
+ useEffect(() => {
+ instance.setViewport(viewport);
+ }, [viewport, instance]);
const nodeTypes = useMemo(
() => ({
network: NodeNetwork,