fix: remove saving on flow pan and add fit view to reactflow (#3696)

* Remove save on pan flow and added fit view

* Removed viewport setting on resetFlow and setReactflowInstance

* Made last saved appear on header

* Made it only fit on set react flow instance

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -53,8 +53,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const stopBuilding = useFlowStore((state) => state.stopBuilding);
 
   const changesNotSaved =
-    customStringify(currentFlow) !== customStringify(currentSavedFlow) &&
+    customStringify(currentFlow) !== customStringify(currentSavedFlow);
-    !autoSaving;
 
   const savedText =
     updatedAt && changesNotSaved

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -26,7 +26,6 @@ import ReactFlow, {
   Controls,
   Edge,
   NodeDragHandler,
-  OnMove,
   OnSelectionChangeParams,
   SelectionDragHandler,
   updateEdge,
@@ -306,12 +305,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
     // 👉 you can place your event handlers here
   }, [takeSnapshot]);
 
-  const onMoveEnd: OnMove = useCallback(() => {
-    // 👇 make moving the canvas undoable
-    autoSaveFlow();
-    updateCurrentFlow({ viewport: reactFlowInstance?.getViewport() });
-  }, [takeSnapshot, autoSaveFlow, nodes, edges, reactFlowInstance]);
-
   const onNodeDragStop: NodeDragHandler = useCallback(() => {
     // 👇 make moving the canvas undoable
     autoSaveFlow();
@@ -465,7 +458,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
             onSelectionStart={onSelectionStart}
             connectionLineComponent={ConnectionLineComponent}
             onDragOver={onDragOver}
-            onMoveEnd={onMoveEnd}
             onNodeDragStop={onNodeDragStop}
             onDrop={onDrop}
             onSelectionChange={onSelectionChange}
@@ -488,7 +480,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
                     data-testid="add_note"
                     onClick={() => {
                       const wrapper = reactFlowWrapper.current!;
-                      const viewport = reactFlowInstance?.getViewport();
                       const x = wrapper.getBoundingClientRect().width / 2;
                       const y = wrapper.getBoundingClientRect().height / 2;
                       const nodePosition =

src/frontend/src/stores/flowStore.ts

@@ -160,7 +160,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   resetFlow: (flow) => {
     const nodes = flow?.data?.nodes ?? [];
     const edges = flow?.data?.edges ?? [];
-    const viewport = flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 };
     let brokenEdges = detectBrokenEdgesEdges(nodes, edges);
     if (brokenEdges.length > 0) {
       useAlertStore.getState().setErrorData({
@@ -181,7 +180,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       flowPool: {},
       currentFlow: flow,
     });
-    get().reactFlowInstance?.setViewport(viewport);
   },
   setIsBuilding: (isBuilding) => {
     set({ isBuilding });
@@ -198,16 +196,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   },
   setReactFlowInstance: (newState) => {
     set({ reactFlowInstance: newState });
-    const viewport = get().currentFlow?.data?.viewport ?? {
+    get().reactFlowInstance?.fitView();
-      zoom: 1,
-      x: 0,
-      y: 0,
-    };
-    if (viewport.x == 0 && viewport.y == 0) {
-      newState.fitView();
-    } else {
-      newState.setViewport(viewport);
-    }
   },
   onNodesChange: (changes: NodeChange[]) => {
     set({
@@ -753,19 +742,18 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   setCurrentFlow: (flow) => {
     set({ currentFlow: flow });
   },
-  updateCurrentFlow: ({ nodes, edges, viewport }) => {
+  updateCurrentFlow: ({ nodes, edges }) => {
     set({
       currentFlow: {
         ...get().currentFlow!,
         data: {
           nodes: nodes ?? get().currentFlow?.data?.nodes ?? [],
           edges: edges ?? get().currentFlow?.data?.edges ?? [],
-          viewport: viewport ??
+          viewport: get().currentFlow?.data?.viewport ?? {
-            get().currentFlow?.data?.viewport ?? {
+            x: 0,
-              x: 0,
+            y: 0,
-              y: 0,
+            zoom: 1,
-              zoom: 1,
+          },
-            },
         },
       },
     });