Add basic undo/redo capability

Author: rob-gordon

app/src/components/WithGraph.tsx

@@ -1,4 +1,11 @@
-import { memo, ReactNode, Suspense, useCallback, useState } from "react";
+import {
+  memo,
+  ReactNode,
+  Suspense,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 
 import { useHasProAccess, useFullscreen } from "../lib/hooks";
 import { useUnmountStore } from "../lib/useUnmountStore";
@@ -10,6 +17,7 @@ import styles from "./WithGraph.module.css";
 import TabPane from "./TabPane";
 import { useMobileStore } from "../lib/useMobileStore";
 import { useTabsStore } from "../lib/useTabsStore";
+import { redo, undo } from "../lib/undoStack";
 
 type MainProps = {
   children?: ReactNode;
@@ -25,6 +33,27 @@ const WithGraph = memo(({ children }: MainProps) => {
   const tab = useMobileStore((state) => state.tab);
   const selectedTab = useTabsStore((state) => state.selectedTab);
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        if (event.key === "z") {
+          if (event.shiftKey) {
+            redo();
+          } else {
+            undo();
+          }
+          event.preventDefault();
+        } else if (event.key === "y") {
+          redo();
+          event.preventDefault();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
   return (
     <div
       className="relative grid grid-rows-[[main]_minmax(0,1fr)_auto] grid-cols-[[main]_minmax(0,1fr)] md:flex md:shadow-xl"

app/src/lib/alignNodes.ts

@@ -1,5 +1,6 @@
 import { NodePositions } from "../components/getNodePositionsFromCy";
 import { useDoc } from "./useDoc";
+import { addToUndoStack } from "./undoStack";
 
 /**
  * This function tries to align nodes vertical and horiontal on their center
@@ -15,6 +16,9 @@ export function alignNodes() {
   const threshold = 40; // Adjust this value to change the alignment sensitivity
   const alignedPositions: NodePositions = {};
 
+  // Store the original positions for undo
+  const originalPositions = { ...nodePositions };
+
   // Iterate through all nodes
   Object.entries(nodePositions).forEach(([nodeId, position]) => {
     let closestHorizontal: cytoscape.Position | null = null;
@@ -56,6 +60,26 @@ export function alignNodes() {
       nodePositions: alignedPositions,
     },
   }));
+
+  // Add the action to the undo stack
+  addToUndoStack({
+    undo: () => {
+      useDoc.setState((state) => ({
+        meta: {
+          ...state.meta,
+          nodePositions: originalPositions,
+        },
+      }));
+    },
+    redo: () => {
+      useDoc.setState((state) => ({
+        meta: {
+          ...state.meta,
+          nodePositions: alignedPositions,
+        },
+      }));
+    },
+  });
 }
 
 /**
@@ -68,6 +92,9 @@ export function alignNodesHorizontally(nodeIds: string[]) {
   const nodePositions = meta.nodePositions as NodePositions;
   if (!nodePositions) return;
 
+  // Store the original positions for undo
+  const originalPositions = { ...nodePositions };
+
   // Calculate the average x position
   let sumX = 0;
   let count = 0;
@@ -99,6 +126,26 @@ export function alignNodesHorizontally(nodeIds: string[]) {
       nodePositions: alignedPositions,
     },
   }));
+
+  // Add the action to the undo stack
+  addToUndoStack({
+    undo: () => {
+      useDoc.setState((state) => ({
+        meta: {
+          ...state.meta,
+          nodePositions: originalPositions,
+        },
+      }));
+    },
+    redo: () => {
+      useDoc.setState((state) => ({
+        meta: {
+          ...state.meta,
+          nodePositions: alignedPositions,
+        },
+      }));
+    },
+  });
 }
 
 /**
@@ -111,6 +158,9 @@ export function alignNodesVertically(nodeIds: string[]) {
   const nodePositions = meta.nodePositions as NodePositions;
   if (!nodePositions) return;
 
+  // Store the original positions for undo
+  const originalPositions = { ...nodePositions };
+
   // Calculate the average y position
   let sumY = 0;
   let count = 0;
@@ -142,4 +192,24 @@ export function alignNodesVertically(nodeIds: string[]) {
       nodePositions: alignedPositions,
     },
   }));
+
+  // Add the action to the undo stack
+  addToUndoStack({
+    undo: () => {
+      useDoc.setState((state) => ({
+        meta: {
+          ...state.meta,
+          nodePositions: originalPositions,
+        },
+      }));
+    },
+    redo: () => {
+      useDoc.setState((state) => ({
+        meta: {
+          ...state.meta,
+          nodePositions: alignedPositions,
+        },
+      }));
+    },
+  });
 }

app/src/lib/undoStack.ts

@@ -0,0 +1,37 @@
+interface UndoAction {
+  undo: () => void;
+  redo: () => void;
+}
+
+let undoStack: UndoAction[] = [];
+let redoStack: UndoAction[] = [];
+
+export function addToUndoStack(action: UndoAction) {
+  undoStack.push(action);
+  redoStack = []; // Clear redo stack when a new action is performed
+}
+
+export function undo() {
+  const action = undoStack.pop();
+  if (action) {
+    action.undo();
+    redoStack.push(action);
+  }
+}
+
+export function redo() {
+  const action = redoStack.pop();
+  if (action) {
+    action.redo();
+    undoStack.push(action);
+  }
+}
+
+// Optional: Add a function to check if undo/redo is available
+export function canUndo(): boolean {
+  return undoStack.length > 0;
+}
+
+export function canRedo(): boolean {
+  return redoStack.length > 0;
+}