Files
paint-ui/store/index.ts

5 lines
126 B
TypeScript
Raw Normal View History

feat: implement Phase 2 - Core Canvas Engine with layer system Complete canvas rendering infrastructure and state management: **Type System (types/)** - Layer interface with blend modes, opacity, visibility - Canvas state with zoom, pan, grid, rulers - Tool types and settings interfaces - Selection and pointer state types **State Management (store/)** - Layer store: CRUD operations, reordering, merging, flattening - Canvas store: zoom (0.1x-10x), pan, grid, rulers, coordinate conversion - Tool store: active tool, brush settings (size, opacity, hardness, flow) - Full Zustand integration with selectors **Utilities (lib/)** - Canvas utils: create, clone, resize, load images, draw grid/checkerboard - General utils: cn, clamp, lerp, distance, snap to grid, debounce, throttle - Image data handling with error safety **Components** - CanvasWrapper: Multi-layer rendering with transformations - Checkerboard transparency background - Layer compositing with blend modes and opacity - Grid overlay support - Selection visualization - Mouse wheel zoom (Ctrl+scroll) - Middle-click or Shift+click panning - LayersPanel: Interactive layer management - Visibility toggle with eye icon - Active layer selection - Opacity display - Delete with confirmation - Sorted by z-order - EditorLayout: Full editor interface - Top toolbar with zoom controls (±, fit to screen, percentage) - Canvas area with full viewport - Right sidebar for layers panel - "New Layer" button with auto-naming **Features Implemented** ✓ Multi-layer canvas with proper z-ordering ✓ Layer visibility, opacity, blend modes ✓ Zoom: 10%-1000% with Ctrl+wheel ✓ Pan: Middle-click or Shift+drag ✓ Grid overlay (toggleable) ✓ Selection rendering ✓ Background color support ✓ Create/delete/duplicate layers ✓ Layer merging and flattening **Performance** - Dev server: 451ms startup - Efficient canvas rendering with transformations - Debounced/throttled event handlers ready - Memory-safe image data operations Ready for Phase 3: History & Undo System 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-20 21:20:06 +01:00
export * from './canvas-store';
export * from './layer-store';
export * from './tool-store';
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
export * from './history-store';