Improve undo

docs/_next/static/OdO24YISbZagx5cde08T_/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/78e521c3-312593b4f3190cc4.js","static/chunks/95b64a6e-6f3d919198a9be32.js","static/chunks/31664189-b73d5a5994fa8d3b.js","static/chunks/545f34e4-f96cf9e26b6b92a5.js","static/chunks/1bfc9850-6b316c8ef06e5170.js","static/chunks/d7eeaac4-06e64d251e2cbda7.js","static/chunks/f580fadb-a8e2c6896615a304.js","static/chunks/50-cece886aa17c1d5e.js","static/chunks/pages/index-ae68f54c010dce90.js"],"/_error":["static/chunks/pages/_error-479484f6c157e921.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/78e521c3-312593b4f3190cc4.js","static/chunks/95b64a6e-6f3d919198a9be32.js","static/chunks/31664189-b73d5a5994fa8d3b.js","static/chunks/545f34e4-f96cf9e26b6b92a5.js","static/chunks/1bfc9850-6b316c8ef06e5170.js","static/chunks/d7eeaac4-06e64d251e2cbda7.js","static/chunks/f580fadb-a8e2c6896615a304.js","static/chunks/50-cece886aa17c1d5e.js","static/chunks/pages/index-9c3c98a1ea353d5d.js"],"/_error":["static/chunks/pages/_error-479484f6c157e921.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

src/Canvas.tsx

@@ -76,11 +76,6 @@ export default function Canvas({
     }
   }, [canvas, undoHistory]);
 
-  useEffect(() => {
-    console.log("undo:", undoHistory);
-    console.log("redo:", redoHistory);
-  }, [undoHistory, redoHistory]);
-
   const redo = useCallback(() => {
     if (!canvas) {
       return;
@@ -132,14 +127,23 @@ export default function Canvas({
       clearTimeout(changeTimer);
       changeTimer = setTimeout(() => {
         const snapshot = snapshotCanvas();
-        setUndoHistory((history) => [...history.slice(-2), snapshot]);
+        setUndoHistory((history) => [...history.slice(-5), snapshot]);
         setRedoHistory([]);
       }, 150);
     };
 
     const snapshotCanvas = () => {
       isSnapshotting = true;
-      const snapshot = canvas.toJSON();
+      const snapshot = canvas.toJSON([
+        "lockMovementX",
+        "lockMovementY",
+        "lockRotation",
+        "lockScalingX",
+        "lockScalingY",
+        "selectable",
+        "hoverCursor",
+        "moveCursor",
+      ]);
       isSnapshotting = false;
       return snapshot;
     };

src/CanvasTools.tsx

@@ -39,6 +39,9 @@ export default function CanvasTools() {
     exportSkin,
   } = useTools();
   const { isDrawingMode, setDrawingMode } = useCanvas(activeCanvas);
+  const [isMac, setIsMac] = useState(false);
+  const commandKeyPrefix = isMac ? "⌘" : "Ctrl ";
+  const shiftKeySymbol = "⇧";
 
   // Brush popup
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(
@@ -68,6 +71,14 @@ export default function CanvasTools() {
       setBackgroundColor(event.target.value);
     };
 
+  useEffect(() => {
+    if (navigator.platform && navigator.platform.startsWith("Mac")) {
+      setIsMac(true);
+    } else if (navigator.userAgent.match(/\(Macintosh;/)) {
+      setIsMac(true);
+    }
+  }, []);
+
   useEffect(() => {
     if (popperElement) {
       popperElement.focus();
@@ -201,7 +212,7 @@ export default function CanvasTools() {
             <button
               type="button"
               aria-label="Undo"
-              title="Undo (Ctrl Z)"
+              title={`Undo (${commandKeyPrefix}Z)`}
               onClick={undo}
               disabled={!canUndo}
             >
@@ -210,7 +221,11 @@ export default function CanvasTools() {
             <button
               type="button"
               aria-label="Redo"
-              title="Redo (Ctrl Y)"
+              title={`Redo (${
+                isMac
+                  ? `${shiftKeySymbol}${commandKeyPrefix}Z)`
+                  : `${commandKeyPrefix} Y`
+              }`}
               onClick={redo}
               disabled={!canRedo}
             >