Merge pull request #60 from anAcc22/dev

Support "Ctrl+Z" behavior for annotations

Author: anAcc22

src/App.tsx

@@ -208,6 +208,11 @@ function App() {
               rounded-lg bg-block -left-2 top-8 w-100 invisible
               group-hover:visible max-h-28 no-scrollbar overflow-scroll"
           >
+            <p>22 Jan 2026</p>
+            <ul className="list-disc list-inside">
+              <li>Support `Ctrl+Z` for annotations</li>
+            </ul>
+            <hr className="border-dashed border-border" />
             <p>22 Dec 2025</p>
             <ul className="list-disc list-inside">
               <li>Add edge physics</li>

src/components/GraphCanvas.tsx

@@ -318,6 +318,12 @@ export function GraphCanvas({
     resizeCanvasIndicator();
   }, [settings.expandedCanvas]);
 
+  const loseInputFocus = () => {
+    if (document.activeElement instanceof HTMLTextAreaElement) {
+      document.activeElement.blur();
+    }
+  };
+
   return (
     <div className="flex h-screen">
       <div
@@ -568,7 +574,7 @@ export function GraphCanvas({
             </button>
           </div>
         </div>
-        <div className="h-full w-full relative">
+        <div onMouseEnter={loseInputFocus} className="h-full w-full relative">
           <canvas
             ref={refMain}
             className="active:cursor-pointer border-2 border-border

src/components/animateGraph.ts

@@ -178,6 +178,13 @@ const FILL_COLORS_DARK = [
 
 const FILL_COLORS_LENGTH = 20;
 
+const MAX_UNDO = 15; // WARN: tweak later if needed (should be ok for now)
+
+let undoStates: ImageData[] = [];
+
+let saveMS = performance.now();
+let undoMS = performance.now();
+
 let prevMS = performance.now();
 let latestColorChangeMS = performance.now();
 
@@ -1278,6 +1285,24 @@ export function animateGraph(
     annotationSecondLastPos = mousePos;
     annotationLastPos = mousePos;
 
+    const curMS = performance.now();
+
+    if (curMS - saveMS >= 250) {
+      const savedState = ctxAnnotation.getImageData(
+        0,
+        0,
+        canvasWidth,
+        canvasHeight,
+      );
+      undoStates.push(savedState);
+
+      if (undoStates.length > MAX_UNDO) {
+        undoStates.shift();
+      }
+
+      saveMS = curMS;
+    }
+
     if (settings.drawMode === "pen") {
       inAnnotation = true;
       inErase = false;
@@ -1317,6 +1342,33 @@ export function animateGraph(
     inErase = false;
   });
 
+  const undo = () => {
+    if (undoStates.length === 0) return;
+
+    const lastState = undoStates.pop();
+
+    ctxAnnotation.putImageData(lastState as ImageData, 0, 0);
+  };
+
+  window.addEventListener("keydown", (event: KeyboardEvent) => {
+    const isCtrl = event.ctrlKey || event.metaKey;
+    const isZ = event.key.toLowerCase() === "z";
+    const inInput = document.activeElement instanceof HTMLTextAreaElement;
+
+    if (isCtrl && isZ) {
+      if (inInput) return;
+
+      event.preventDefault();
+      const curMS = performance.now();
+
+      if (curMS - undoMS <= 100) return;
+
+      undo();
+
+      undoMS = curMS;
+    }
+  });
+
   canvas.addEventListener("pointerdown", (event) => {
     event.preventDefault();