Sebastian Krüger
4f5c78df30
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>
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useHistoryStore } from '@/store/history-store';
|
|
import { History } from 'lucide-react';
|
|
|
|
export function HistoryPanel() {
|
|
const { undoStack, redoStack } = useHistoryStore();
|
|
|
|
return (
|
|
<div className="flex h-full flex-col bg-card">
|
|
<div className="border-b border-border p-3">
|
|
<h2 className="flex items-center gap-2 text-sm font-semibold text-card-foreground">
|
|
<History className="h-4 w-4" />
|
|
History
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-2 space-y-2">
|
|
{undoStack.length === 0 && redoStack.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-sm text-muted-foreground">No history yet</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Undo stack (most recent first) */}
|
|
{[...undoStack].reverse().map((command, index) => (
|
|
<div
|
|
key={`undo-${undoStack.length - index - 1}`}
|
|
className="rounded-md border border-border bg-background p-2"
|
|
>
|
|
<p className="text-sm font-medium text-foreground">{command.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{new Date(command.timestamp).toLocaleTimeString()}
|
|
</p>
|
|
</div>
|
|
))}
|
|
|
|
{/* Current state indicator */}
|
|
{undoStack.length > 0 && (
|
|
<div className="flex items-center justify-center py-1">
|
|
<div className="h-2 w-2 rounded-full bg-primary" />
|
|
<div className="ml-2 text-xs font-semibold text-primary">Current State</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Redo stack (oldest first) */}
|
|
{[...redoStack].reverse().map((command, index) => (
|
|
<div
|
|
key={`redo-${index}`}
|
|
className="rounded-md border border-border bg-muted/50 p-2 opacity-50"
|
|
>
|
|
<p className="text-sm font-medium text-muted-foreground">{command.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{new Date(command.timestamp).toLocaleTimeString()}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="border-t border-border p-3 text-xs text-muted-foreground">
|
|
<div className="flex justify-between">
|
|
<span>{undoStack.length} undoable</span>
|
|
<span>{redoStack.length} redoable</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|