Files
paint-ui/store/history-store.ts

136 lines
3.2 KiB
TypeScript
Raw Normal View History

feat: implement Phase 3 - History & Undo System with command pattern Complete undo/redo functionality with robust command pattern architecture: **Command Pattern Infrastructure (core/commands/)** - BaseCommand: Abstract class for all undoable operations - Command merging support for consecutive similar operations - Timestamp tracking for intelligent merging **Layer Commands** - CreateLayerCommand: Create layer with full undo support - DeleteLayerCommand: Delete with restoration of original position - UpdateLayerCommand: Property updates with auto-merging (1s window) - DuplicateLayerCommand: Duplicate with full canvas cloning - ReorderLayerCommand: Z-order changes with bidirectional support - MergeLayerDownCommand: Merge with canvas state preservation **History Store (store/history-store.ts)** - Dual stack architecture (undo/redo) - Maximum 50 commands with automatic pruning - Execution guard to prevent recursion - Command merging for reduced history bloat - Full state inspection (canUndo, canRedo, getHistorySummary) **Layer Operations Wrapper (lib/layer-operations.ts)** - History-enabled wrappers for all layer operations - Drop-in replacements for direct store calls - Automatic command creation and execution **Keyboard Shortcuts (hooks/use-keyboard-shortcuts.ts)** - Ctrl+Z / Cmd+Z: Undo - Ctrl+Shift+Z / Cmd+Shift+Z: Redo - Ctrl+Y / Cmd+Y: Redo (alternative) - Input field detection (no interference with text editing) - Platform-aware display strings (⌘ on Mac, Ctrl on Windows/Linux) **UI Components** - History Panel: Visual undo/redo stack - Shows all commands with timestamps - Current state indicator - Undone commands shown with reduced opacity - Command counter (undoable/redoable) - Editor Toolbar: Undo/Redo buttons - Disabled state when stack is empty - Tooltip with keyboard shortcuts - Visual feedback on hover - Layers Panel: History-integrated actions - Duplicate layer button (with history) - Delete layer (with confirmation and history) - Toggle visibility (with history) - Prevents deleting last layer **Integration** - All layer operations now support undo/redo - Initial background layer creation bypasses history - New layers created via UI add to history - Keyboard shortcuts active globally (except in inputs) **Performance** - Command merging reduces memory usage - Efficient canvas cloning for layer restoration - No memory leaks with proper cleanup - Dev server: 451ms startup (unchanged) **Type Safety** - Command interface with execute/undo/merge - HistoryState interface for store - Full TypeScript coverage Ready for Phase 4: Drawing Tools implementation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-20 21:24:59 +01:00
import { create } from 'zustand';
import type { Command, HistoryState } from '@/types/history';
interface HistoryStore extends HistoryState {
/** Execute a command and add to history */
executeCommand: (command: Command) => void;
/** Undo the last command */
undo: () => void;
/** Redo the last undone command */
redo: () => void;
/** Clear all history */
clearHistory: () => void;
/** Check if can undo */
canUndo: () => boolean;
/** Check if can redo */
canRedo: () => boolean;
/** Get current state summary */
getHistorySummary: () => { undoCount: number; redoCount: number };
}
const MAX_HISTORY_SIZE = 50;
export const useHistoryStore = create<HistoryStore>((set, get) => ({
undoStack: [],
redoStack: [],
maxHistorySize: MAX_HISTORY_SIZE,
isExecuting: false,
executeCommand: (command) => {
const state = get();
// Prevent recursive execution
if (state.isExecuting) return;
set({ isExecuting: true });
try {
// Try to merge with last command
const lastCommand = state.undoStack[state.undoStack.length - 1];
if (lastCommand && lastCommand.merge && lastCommand.merge(command)) {
// Command was merged, re-execute the merged command
lastCommand.execute();
set({ isExecuting: false });
return;
}
// Execute the new command
command.execute();
// Add to undo stack
const newUndoStack = [...state.undoStack, command];
// Limit stack size
if (newUndoStack.length > state.maxHistorySize) {
newUndoStack.shift();
}
set({
undoStack: newUndoStack,
redoStack: [], // Clear redo stack on new action
isExecuting: false,
});
} catch (error) {
console.error('Failed to execute command:', error);
set({ isExecuting: false });
}
},
undo: () => {
const state = get();
if (state.undoStack.length === 0 || state.isExecuting) return;
set({ isExecuting: true });
try {
const command = state.undoStack[state.undoStack.length - 1];
command.undo();
set({
undoStack: state.undoStack.slice(0, -1),
redoStack: [...state.redoStack, command],
isExecuting: false,
});
} catch (error) {
console.error('Failed to undo command:', error);
set({ isExecuting: false });
}
},
redo: () => {
const state = get();
if (state.redoStack.length === 0 || state.isExecuting) return;
set({ isExecuting: true });
try {
const command = state.redoStack[state.redoStack.length - 1];
command.execute();
set({
undoStack: [...state.undoStack, command],
redoStack: state.redoStack.slice(0, -1),
isExecuting: false,
});
} catch (error) {
console.error('Failed to redo command:', error);
set({ isExecuting: false });
}
},
clearHistory: () => {
set({
undoStack: [],
redoStack: [],
});
},
canUndo: () => {
return get().undoStack.length > 0;
},
canRedo: () => {
return get().redoStack.length > 0;
},
getHistorySummary: () => {
const state = get();
return {
undoCount: state.undoStack.length,
redoCount: state.redoStack.length,
};
},
}));