Migrate state management to Zustand with Zundo for undo/redo and optimize performance

packages/learningmap/package.json

@@ -36,15 +36,20 @@
     "@szhsin/react-menu": "^4.5.0",
     "@xyflow/react": "^12.8.6",
     "elkjs": "^0.11.0",
+    "fast-deep-equal": "^3.1.3",
     "html-to-image": "1.11.13",
     "lucide-react": "^0.545.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "tslib": "^2.8.1"
+    "throttle-debounce": "^5.0.2",
+    "tslib": "^2.8.1",
+    "zundo": "^2.3.0",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
+    "@types/throttle-debounce": "^5.0.2",
     "vitest": "^3.0.5"
   }
 }

packages/learningmap/src/EdgeDrawer.tsx

@@ -3,26 +3,45 @@ import { X, Trash2, Save } from "lucide-react";
 import { Edge } from "@xyflow/react";
 import { EditorDrawerEdgeContent } from "./EditorDrawerEdgeContent";
 import { getTranslations } from "./translations";
+import { useEditorStore } from "./editorStore";
 
 interface EdgeDrawerProps {
-  edge: Edge | null;
-  isOpen: boolean;
-  onClose: () => void;
-  onUpdate: (edge: Edge) => void;
-  onDelete: () => void;
-  language?: string;
+  defaultLanguage?: string;
 }
 
 export const EdgeDrawer: React.FC<EdgeDrawerProps> = ({
-  edge: selectedEdge,
-  isOpen: edgeDrawerOpen,
-  onClose: closeDrawer,
-  onUpdate: updateEdge,
-  onDelete: deleteEdge,
-  language = "en",
+  defaultLanguage = "en",
 }) => {
+  // Get edge and drawer state from store
+  const selectedEdge = useEditorStore(state => state.selectedEdge);
+  const edgeDrawerOpen = useEditorStore(state => state.edgeDrawerOpen);
+  const settings = useEditorStore(state => state.settings);
+
+  // Get actions from store
+  const setEdgeDrawerOpen = useEditorStore(state => state.setEdgeDrawerOpen);
+  const setSelectedEdge = useEditorStore(state => state.setSelectedEdge);
+  const updateEdge = useEditorStore(state => state.updateEdge);
+  const deleteEdge = useEditorStore(state => state.deleteEdge);
+
+  const language = settings?.language || defaultLanguage;
   const t = getTranslations(language);
 
+  const closeDrawer = () => {
+    setEdgeDrawerOpen(false);
+    setSelectedEdge(null);
+  };
+
+  const onUpdate = (edge: Edge) => {
+    updateEdge(edge.id, edge);
+  };
+
+  const onDelete = () => {
+    if (selectedEdge && confirm(t.resetMapWarning)) {
+      deleteEdge(selectedEdge.id);
+      closeDrawer();
+    }
+  };
+
   if (!selectedEdge || !edgeDrawerOpen) return null;
   return (
     <div>
@@ -48,12 +67,12 @@ export const EdgeDrawer: React.FC<EdgeDrawerProps> = ({
             } else if (field === "type") {
               updated = { ...updated, type: value };
             }
-            updateEdge(updated);
+            onUpdate(updated);
           }}
           language={language}
         />
         <div className="drawer-footer">
-          <button onClick={deleteEdge} className="danger-button">
+          <button onClick={onDelete} className="danger-button">
             <Trash2 size={16} /> {t.deleteEdge}
           </button>
           <button onClick={closeDrawer} className="primary-button">

packages/learningmap/src/EditorCanvas.tsx

@@ -0,0 +1,134 @@
+import { useCallback, memo } from "react";
+import { ReactFlow, Controls, Background, ControlButton, OnSelectionChangeFunc, Node, Edge } from "@xyflow/react";
+import { Info, Redo, Undo } from "lucide-react";
+import { useEditorStore, useTemporalStore } from "./editorStore";
+import { TaskNode } from "./nodes/TaskNode";
+import { TopicNode } from "./nodes/TopicNode";
+import { ImageNode } from "./nodes/ImageNode";
+import { TextNode } from "./nodes/TextNode";
+import FloatingEdge from "./FloatingEdge";
+import { MultiNodePanel } from "./MultiNodePanel";
+import { getTranslations } from "./translations";
+import { NodeData } from "./types";
+
+const nodeTypes = {
+  topic: TopicNode,
+  task: TaskNode,
+  image: ImageNode,
+  text: TextNode,
+};
+
+const edgeTypes = {
+  floating: FloatingEdge
+};
+
+interface EditorCanvasProps {
+  defaultLanguage?: string;
+}
+
+export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps) => {
+  // Get state from store
+  const settings = useEditorStore(state => state.settings);
+  const nodes = useEditorStore(state => state.nodes);
+  const edges = useEditorStore(state => state.edges);
+  const showGrid = useEditorStore(state => state.showGrid);
+  const selectedNodeIds = useEditorStore(state => state.selectedNodeIds);
+
+  // Get actions from store
+  const onNodesChange = useEditorStore(state => state.onNodesChange);
+  const onEdgesChange = useEditorStore(state => state.onEdgesChange);
+  const onConnect = useEditorStore(state => state.onConnect);
+  const setSelectedNodeIds = useEditorStore(state => state.setSelectedNodeIds);
+  const setSelectedNodeId = useEditorStore(state => state.setSelectedNodeId);
+  const setSelectedEdge = useEditorStore(state => state.setSelectedEdge);
+  const setDrawerOpen = useEditorStore(state => state.setDrawerOpen);
+  const setEdgeDrawerOpen = useEditorStore(state => state.setEdgeDrawerOpen);
+  const setHelpOpen = useEditorStore(state => state.setHelpOpen);
+
+  const language = settings?.language || defaultLanguage;
+  const t = getTranslations(language);
+
+  // Temporal store for undo/redo
+  const { undo, redo, canUndo, canRedo } = useTemporalStore((state) => ({
+    undo: state.undo,
+    redo: state.redo,
+    canUndo: state.pastStates.length > 0,
+    canRedo: state.futureStates.length > 0,
+  }));
+
+  const handleNodeClick = useCallback((_: any, node: Node<NodeData>) => {
+    setSelectedNodeId(node.id);
+    setDrawerOpen(true);
+    setSelectedEdge(null);
+    setEdgeDrawerOpen(false);
+  }, [setSelectedNodeId, setDrawerOpen, setSelectedEdge, setEdgeDrawerOpen]);
+
+  const handleEdgeClick = useCallback((_: any, edge: Edge) => {
+    setSelectedEdge(edge);
+    setEdgeDrawerOpen(true);
+    setSelectedNodeId(null);
+    setDrawerOpen(false);
+  }, [setSelectedEdge, setEdgeDrawerOpen, setSelectedNodeId, setDrawerOpen]);
+
+  const handleSelectionChange: OnSelectionChangeFunc = useCallback(
+    ({ nodes: selectedNodes }) => {
+      setSelectedNodeIds(selectedNodes.map(n => n.id));
+    },
+    [setSelectedNodeIds]
+  );
+
+  const defaultEdgeOptions = {
+    animated: false,
+    style: {
+      stroke: "#94a3b8",
+      strokeWidth: 2,
+    },
+    type: "default",
+  };
+
+  return (
+    <div
+      className="editor-canvas"
+      style={{
+        backgroundColor: settings?.background?.color || "#ffffff",
+      }}
+    >
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onEdgesChange={onEdgesChange}
+        onNodeDoubleClick={handleNodeClick}
+        onEdgeDoubleClick={handleEdgeClick}
+        onNodesChange={onNodesChange}
+        onConnect={onConnect}
+        onSelectionChange={handleSelectionChange}
+        nodeTypes={nodeTypes}
+        selectionOnDrag={false}
+        edgeTypes={edgeTypes}
+        fitView
+        proOptions={{ hideAttribution: true }}
+        defaultEdgeOptions={defaultEdgeOptions}
+        nodesDraggable={true}
+        elevateNodesOnSelect={false}
+        nodesConnectable={true}
+        colorMode="light"
+      >
+        {showGrid && <Background />}
+        <Controls>
+          <ControlButton title={t.undo} disabled={!canUndo} onClick={() => undo()}>
+            <Undo />
+          </ControlButton>
+          <ControlButton title={t.redo} disabled={!canRedo} onClick={() => redo()}>
+            <Redo />
+          </ControlButton>
+          <ControlButton title={t.help} onClick={() => setHelpOpen(true)}>
+            <Info />
+          </ControlButton>
+        </Controls>
+        {selectedNodeIds.length > 1 && <MultiNodePanel />}
+      </ReactFlow>
+    </div>
+  );
+});
+
+EditorCanvas.displayName = 'EditorCanvas';

packages/learningmap/src/EditorDialogs.tsx

@@ -0,0 +1,132 @@
+import React, { memo } from "react";
+import { X } from "lucide-react";
+import { useEditorStore } from "./editorStore";
+import { ShareDialog } from "./ShareDialog";
+import { LoadExternalDialog } from "./LoadExternalDialog";
+import { getTranslations } from "./translations";
+
+interface EditorDialogsProps {
+  defaultLanguage?: string;
+  jsonStore?: string;
+}
+
+export const EditorDialogs = memo(({ defaultLanguage = "en", jsonStore = "https://json.openpatch.org" }: EditorDialogsProps) => {
+  // Get state from store
+  const settings = useEditorStore(state => state.settings);
+  const helpOpen = useEditorStore(state => state.helpOpen);
+  const pendingExternalId = useEditorStore(state => state.pendingExternalId);
+
+  // Get actions from store
+  const setHelpOpen = useEditorStore(state => state.setHelpOpen);
+  const setShareDialogOpen = useEditorStore(state => state.setShareDialogOpen);
+  const setLoadExternalDialogOpen = useEditorStore(state => state.setLoadExternalDialogOpen);
+  const setPendingExternalId = useEditorStore(state => state.setPendingExternalId);
+  const getRoadmapData = useEditorStore(state => state.getRoadmapData);
+  const loadRoadmapData = useEditorStore(state => state.loadRoadmapData);
+
+  const language = settings?.language || defaultLanguage;
+  const t = getTranslations(language);
+
+  const onDownload = () => {
+    const roadmapData = getRoadmapData();
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(roadmapData, null, 2));
+    const downloadAnchorNode = document.createElement('a');
+    downloadAnchorNode.setAttribute("href", dataStr);
+    downloadAnchorNode.setAttribute("download", "learningmap.json");
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
+  };
+
+  const onLoadFromStore = async (id: string) => {
+    try {
+      const response = await fetch(`${jsonStore}/api/json/${id}`);
+      if (!response.ok) throw new Error("Failed to load from JSON store");
+      const data = await response.json();
+      loadRoadmapData(data);
+      setLoadExternalDialogOpen(false);
+      setPendingExternalId(null);
+    } catch (error) {
+      console.error("Failed to load from JSON store", error);
+    }
+  };
+
+  const keyboardShortcuts = [
+    { action: t.shortcuts.undo, shortcut: "Ctrl+Z" },
+    { action: t.shortcuts.redo, shortcut: "Ctrl+Y or Ctrl+Shift+Z" },
+    { action: t.shortcuts.addTaskNode, shortcut: "Ctrl+1" },
+    { action: t.shortcuts.addTopicNode, shortcut: "Ctrl+2" },
+    { action: t.shortcuts.addImageNode, shortcut: "Ctrl+3" },
+    { action: t.shortcuts.addTextNode, shortcut: "Ctrl+4" },
+    { action: t.shortcuts.deleteNodeEdge, shortcut: "Delete" },
+    { action: t.shortcuts.togglePreviewMode, shortcut: "Ctrl+P" },
+    { action: t.shortcuts.toggleDebugMode, shortcut: "Ctrl+D" },
+    { action: t.shortcuts.selectMultipleNodes, shortcut: "Ctrl+Click or Shift+Drag" },
+    { action: t.shortcuts.selectAllNodes, shortcut: "Ctrl+A" },
+    { action: t.shortcuts.showHelp, shortcut: "Ctrl+? or Help Button" },
+    { action: t.shortcuts.save, shortcut: "Ctrl+S" },
+    { action: t.shortcuts.zoomIn, shortcut: "Ctrl++" },
+    { action: t.shortcuts.zoomOut, shortcut: "Ctrl+-" },
+    { action: t.shortcuts.resetZoom, shortcut: "Ctrl+0" },
+    { action: t.shortcuts.resetMap, shortcut: "Ctrl+Delete" },
+    { action: t.shortcuts.fitView, shortcut: "Shift+!" },
+    { action: t.shortcuts.zoomToSelection, shortcut: "Shift+@" },
+    { action: t.shortcuts.toggleGrid, shortcut: "Ctrl+'" },
+    { action: t.shortcuts.cut, shortcut: "Ctrl+X" },
+    { action: t.shortcuts.copy, shortcut: "Ctrl+C" },
+    { action: t.shortcuts.paste, shortcut: "Ctrl+V" },
+  ];
+
+  return (
+    <>
+      <dialog
+        className="help"
+        open={helpOpen}
+        onClose={() => setHelpOpen(false)}
+      >
+        <header className="help-header">
+          <h2>{t.keyboardShortcuts}</h2>
+          <button className="close-button" onClick={() => setHelpOpen(false)} aria-label={t.close}>
+            <X size={20} />
+          </button>
+        </header>
+        <div className="help-content">
+          <table>
+            <thead>
+              <tr>
+                <th>{t.action}</th>
+                <th>{t.shortcut}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {keyboardShortcuts.map((item) => (
+                <tr key={item.action}>
+                  <td>{item.action}</td>
+                  <td>{item.shortcut}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="help-footer">
+          <button className="primary-button" onClick={() => setHelpOpen(false)}>{t.close}</button>
+        </div>
+      </dialog>
+      <ShareDialog />
+      <LoadExternalDialog
+        onClose={() => {
+          setLoadExternalDialogOpen(false);
+          setPendingExternalId(null);
+        }}
+        onDownloadCurrent={onDownload}
+        onReplace={() => {
+          if (pendingExternalId) {
+            onLoadFromStore(pendingExternalId);
+          }
+        }}
+      />
+    </>
+  );
+});
+
+EditorDialogs.displayName = 'EditorDialogs';