valknar/paint-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
8 Commits 1 Branch 0 Tags
1dca4ccf89b5980c19dfdacce26f99042d1a3360
Commit Graph

3 Commits

Author SHA1 Message Date
Sebastian Krüger
1dca4ccf89 feat: implement Phase 5 - Advanced Color System 
Complete color management system with picker, swatches, and eyedropper:

**Color Utilities (lib/color-utils.ts)**
- RGB ↔ Hex conversion
- RGB ↔ HSV conversion
- Color validation (isValidHex)
- getColorAtPoint for eyedropper
- Default 20-color palette
- Hex normalization

**Color Store (store/color-store.ts)**
- Primary/secondary color management
- Recent colors history (max 20)
- Custom swatches (max 20)
- Color swap functionality
- Zustand persist middleware (localStorage)

**Components**

ColorPicker:
- HSV color space selector
- Interactive saturation/value picker (200x160px)
- Hue slider (vertical gradient)
- Hex input with validation
- RGB value display
- Pointer drag support
- Real-time updates
- Color preview

ColorSwatches:
- Default 20-color palette grid (10x2)
- Custom swatches with add/remove
- Active color highlighting
- Hover scaling effect
- Delete button on hover
- Color tooltips

ColorPanel:
- Tabbed interface (Picker/Swatches/Recent)
- Primary/Secondary color display
- Color swap button
- Recent colors grid (max 20)
- Tab navigation (Palette/Clock icons)
- 256px wide panel
- Persistent state

**Eyedropper Tool**
- Pick color from active layer
- Click or drag to sample
- Updates primary color
- Integrates with ColorPanel
- Crosshair cursor

**Features**
✓ HSV color picker with gradient
✓ Hex color input validation
✓ RGB value display
✓ 20 default color swatches
✓ Unlimited custom swatches (max 20 stored)
✓ Recent colors auto-tracking
✓ Primary/secondary color swap
✓ Eyedropper tool to sample canvas
✓ Persistent color preferences
✓ Smooth drag interactions
✓ Real-time color updates

**Integration**
- EditorLayout: Added ColorPanel (256px)
- ToolPalette: Added Eyedropper icon
- CanvasWithTools: Eyedropper support
- Tool settings: Removed basic color picker
- Color syncs with tool store

**UI/UX**
- 3-tab navigation (Picker, Swatches, Recent)
- Primary color: Large square
- Secondary color: Small overlap square
- Active tab highlighting
- Hover effects on all swatches
- Smooth transitions
- Keyboard accessible

**Performance**
- Efficient HSV calculations
- LocalStorage persistence
- Pointer event optimization
- Drag state management
- Build time: ~1.3s

**State Management**
- Zustand store with persist
- Auto-add to recent on use
- Max limits prevent memory bloat
- Clean swap operation

Ready for Phase 6: File Operations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 01:55:28 +01:00
Sebastian Krüger
4f5c78df30 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
Sebastian Krüger
4b01e92b88 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