fix: more history support

Author: grantiguess

src/NodeCanvas.jsx

@@ -2191,7 +2191,7 @@ function NodeCanvas() {
       storeActions.updateNodeInstance(activeGraphId, instanceId, draft => {
         draft.x = newX;
         draft.y = newY;
-      }, { isDragging: true, phase: 'move' });
+      }, { isDragging: true, phase: 'move', type: 'node_position' });
     }
   }, [activeGraphId, nodeById, gridMode, gridSize, storeActions]);
 
@@ -5061,7 +5061,7 @@ function NodeCanvas() {
     const mouseCanvasX = (clientX - rect.left - panOffset.x) / zoomLevel + canvasSize.offsetX;
     const mouseCanvasY = (clientY - rect.top - panOffset.y) / zoomLevel + canvasSize.offsetY;
     const offset = { x: mouseCanvasX - nodeData.x, y: mouseCanvasY - nodeData.y };
-    setDraggingNodeInfo({ instanceId, offset });
+    setDraggingNodeInfo({ instanceId, offset, initialPos: { x: nodeData.x, y: nodeData.y } });
 
 
 
@@ -6727,6 +6727,50 @@ function NodeCanvas() {
 
     // Reset scale for dragged nodes
     if (draggingNodeInfo) {
+      // --- Manual History Recording for Drag ---
+      const patches = [];
+      const inversePatches = [];
+      const movedNodeCount = 0;
+
+      // Helper to record patch if moved
+      const checkAndRecord = (id, initX, initY) => {
+        const node = nodes.find(n => n.id === id);
+        if (node && (Math.abs(node.x - initX) > 0.01 || Math.abs(node.y - initY) > 0.01)) {
+          patches.push({ op: 'replace', path: ['graphs', activeGraphId, 'instances', id, 'x'], value: node.x });
+          patches.push({ op: 'replace', path: ['graphs', activeGraphId, 'instances', id, 'y'], value: node.y });
+          inversePatches.push({ op: 'replace', path: ['graphs', activeGraphId, 'instances', id, 'x'], value: initX });
+          inversePatches.push({ op: 'replace', path: ['graphs', activeGraphId, 'instances', id, 'y'], value: initY });
+          return true;
+        }
+        return false;
+      };
+
+      if (draggingNodeInfo.relativeOffsets) {
+        // Multi-drag
+        checkAndRecord(draggingNodeInfo.primaryId, draggingNodeInfo.initialPrimaryPos.x, draggingNodeInfo.initialPrimaryPos.y);
+        Object.entries(draggingNodeInfo.relativeOffsets).forEach(([id, rel]) => {
+          checkAndRecord(id, draggingNodeInfo.initialPrimaryPos.x + rel.offsetX, draggingNodeInfo.initialPrimaryPos.y + rel.offsetY);
+        });
+      } else if (draggingNodeInfo.initialPos) { // Ensure we have initialPos (added in startDrag)
+        // Single drag
+        checkAndRecord(draggingNodeInfo.instanceId, draggingNodeInfo.initialPos.x, draggingNodeInfo.initialPos.y);
+      }
+      // Group member drag logic is complex and handled via memberOffsets - skipping exact history for grouped drag for now or assuming it relies on standard updates?
+      // Group member drag uses 'memberOffsets' in performDragUpdate. It updates positions. 
+      // If we want to support that, we need initial positions there too. 
+      // For now, focusing on standard node drag.
+
+      if (patches.length > 0) {
+        useHistoryStore.getState().pushAction({
+          domain: `graph-${activeGraphId}`,
+          actionType: 'node_position',
+          description: `Moved ${patches.length / 2} Node(s)`,
+          patches,
+          inversePatches
+        });
+      }
+      // -----------------------------------------
+
       const instanceIdsToReset = new Set();
       if (draggingNodeInfo.relativeOffsets) {
         instanceIdsToReset.add(draggingNodeInfo.primaryId);
@@ -6751,7 +6795,7 @@ function NodeCanvas() {
               activeGraphId,
               id,
               draft => { draft.scale = 1; },
-              { phase: 'end', isDragging: false, finalize: shouldFinalize }
+              { phase: 'end', isDragging: false, finalize: shouldFinalize, ignore: true } // Ignore this scale update in history
             );
             if (shouldFinalize) finalizeSent = true;
           }

src/RedstringMenu.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import MaroonSlider from './components/MaroonSlider.jsx';
-import { ChevronRight, FileText, FolderOpen, Save, Clock, Globe, Bug, BookOpen, Home, LayoutGrid, Activity, RefreshCw } from 'lucide-react';
+import { ChevronRight, FileText, FolderOpen, Save, Clock, Globe, Bug, BookOpen, Home, LayoutGrid, Activity, RefreshCw, Undo2, Redo2 } from 'lucide-react';
 import './RedstringMenu.css';
 import DebugOverlay from './DebugOverlay';
 import * as fileStorage from './store/fileStorage.js';
@@ -369,6 +369,7 @@ const RedstringMenu = ({
                           }}
                           style={{ cursor: 'pointer', opacity: useHistoryStore.getState().canUndo() ? 1 : 0.5 }}
                         >
+                          <Undo2 size={16} style={{ marginRight: '8px', minWidth: '16px', flexShrink: 0 }} />
                           <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
                             <span>Undo</span>
                             <span style={{ opacity: 0.5, fontSize: '11px' }}>Ctrl+Z</span>
@@ -383,6 +384,7 @@ const RedstringMenu = ({
                           }}
                           style={{ cursor: 'pointer', opacity: useHistoryStore.getState().canRedo() ? 1 : 0.5 }}
                         >
+                          <Redo2 size={16} style={{ marginRight: '8px', minWidth: '16px', flexShrink: 0 }} />
                           <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
                             <span>Redo</span>
                             <span style={{ opacity: 0.5, fontSize: '11px' }}>Ctrl+Shift+Z</span>

src/components/UndoRedoButtons.css

@@ -206,15 +206,18 @@ const saveCoordinatorMiddleware = (config) => {
       // --- History Recording ---
       // Record significant actions to the history store
       const recordableTypes = new Set([
-        'node_place', 'node_delete', 'node_type_change',
+        'node_place', 'node_delete', 'node_type_change', 'node_update',
         'edge_create', 'edge_delete', 'edge_update', 'edge_type_change',
         'group_create', 'group_update', 'group_delete', 'group_convert',
         'prototype_create', 'prototype_update', 'prototype_delete',
         'position_update', 'node_position',
         'graph_create', 'graph_delete'
       ]);
 
-      if (recordableTypes.has(changeContext.type)) {
+
+      if (changeContext.ignore) {
+        // Explicitly skip recording
+      } else if (recordableTypes.has(changeContext.type)) {
         // Special handling for position updates: only record if finalized (drag end)
         if ((changeContext.type === 'node_position' || changeContext.type === 'position_update') && !changeContext.finalize) {
           // Skip recording intermediate drag states
@@ -1484,7 +1487,7 @@ const useGraphStore = create(saveCoordinatorMiddleware((set, get, api) => {
 
     // Update a prototype's data using Immer's recipe. This affects all its instances.
     updateNodePrototype: (prototypeId, recipe) => {
-      api.setChangeContext({ type: 'prototype_change', target: 'prototype' });
+      api.setChangeContext({ type: 'prototype_update', target: 'prototype' });
       return set(produce((draft) => {
         const prototype = draft.nodePrototypes.get(prototypeId);
         if (prototype) {
@@ -1517,7 +1520,7 @@ const useGraphStore = create(saveCoordinatorMiddleware((set, get, api) => {
 
     // Update an instance's unique data (e.g., position)
     updateNodeInstance: (graphId, instanceId, recipe, contextOptions = {}) => {
-      api.setChangeContext({ type: 'node_position', target: 'instance', ...contextOptions });
+      api.setChangeContext({ type: contextOptions.type || 'node_update', target: 'instance', ...contextOptions });
       return set(produce((draft) => {
         const graph = draft.graphs.get(graphId);
         if (graph && graph.instances) {