Remove panning from undo stack (#483)

src/components/EditorCanvas/Canvas.jsx

@@ -23,12 +23,13 @@ import {
   useAreas,
   useNotes,
   useLayout,
+  useSaveState,
 } from "../../hooks";
 import { useTranslation } from "react-i18next";
 import { useEventListener } from "usehooks-ts";
 import { areFieldsCompatible } from "../../utils/utils";
 import { getRectFromEndpoints, isInsideRect } from "../../utils/rect";
-import { noteWidth } from "../../data/constants";
+import { noteWidth, State } from "../../data/constants";
 
 export default function Canvas() {
   const { t } = useTranslation();
@@ -42,6 +43,7 @@ export default function Canvas() {
 
   const { tables, updateTable, relationships, addRelationship, database } =
     useDiagram();
+  const { setSaveState } = useSaveState();
   const { areas, updateArea } = useAreas();
   const { notes, updateNote } = useNotes();
   const { layout } = useLayout();
@@ -540,19 +542,7 @@ export default function Canvas() {
     }
 
     if (panning.isPanning && didPan()) {
-      setUndoStack((prev) => [
+      setSaveState(State.SAVING);
-        ...prev,
-        {
-          action: Action.PAN,
-          undo: { x: panning.panStart.x, y: panning.panStart.y },
-          redo: transform.pan,
-          message: t("move_element", {
-            coords: `(${transform?.pan.x}, ${transform?.pan.y})`,
-            name: "diagram",
-          }),
-        },
-      ]);
-      setRedoStack([]);
       setSelectedElement((prev) => ({
         ...prev,
         element: ObjectType.NONE,

src/components/EditorHeader/ControlPanel.jsx

@@ -297,12 +297,6 @@ export default function ControlPanel({
         }
       }
       setRedoStack((prev) => [...prev, a]);
-    } else if (a.action === Action.PAN) {
-      setTransform((prev) => ({
-        ...prev,
-        pan: a.undo,
-      }));
-      setRedoStack((prev) => [...prev, a]);
     }
   };
 
@@ -477,12 +471,6 @@ export default function ControlPanel({
         }
       }
       setUndoStack((prev) => [...prev, a]);
-    } else if (a.action === Action.PAN) {
-      setTransform((prev) => ({
-        ...prev,
-        pan: a.redo,
-      }));
-      setUndoStack((prev) => [...prev, a]);
     }
   };
 

src/data/constants.js

@@ -59,7 +59,6 @@ export const Action = {
   MOVE: 1,
   DELETE: 2,
   EDIT: 3,
-  PAN: 4,
 };
 
 export const State = {