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
|
|
|
/**
|
|
|
|
|
* Canvas state interface
|
|
|
|
|
*/
|
|
|
|
|
export interface CanvasState {
|
|
|
|
|
/** Canvas width in pixels */
|
|
|
|
|
width: number;
|
|
|
|
|
/** Canvas height in pixels */
|
|
|
|
|
height: number;
|
|
|
|
|
/** Current zoom level (1 = 100%) */
|
|
|
|
|
zoom: number;
|
|
|
|
|
/** Pan offset X */
|
|
|
|
|
offsetX: number;
|
|
|
|
|
/** Pan offset Y */
|
|
|
|
|
offsetY: number;
|
|
|
|
|
/** Background color */
|
|
|
|
|
backgroundColor: string;
|
|
|
|
|
/** Show grid overlay */
|
|
|
|
|
showGrid: boolean;
|
|
|
|
|
/** Grid size in pixels */
|
|
|
|
|
gridSize: number;
|
|
|
|
|
/** Show rulers */
|
|
|
|
|
showRulers: boolean;
|
|
|
|
|
/** Snap to grid */
|
|
|
|
|
snapToGrid: boolean;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
feat(phase-8): implement comprehensive selection system with marching ants
This commit completes Phase 8 of the paint-ui implementation, adding a full
selection system with multiple selection tools, operations, and visual feedback.
**New Files:**
- types/selection.ts: Selection types, masks, and state interfaces
- lib/selection-utils.ts: Selection mask generation and manipulation algorithms
- lib/selection-operations.ts: Copy/cut/paste/delete/fill/stroke operations
- store/selection-store.ts: Selection state management with Zustand
- core/commands/selection-command.ts: Undo/redo commands for selections
- tools/rectangular-selection-tool.ts: Rectangular marquee selection
- tools/elliptical-selection-tool.ts: Elliptical marquee selection
- tools/lasso-selection-tool.ts: Free-form polygon selection
- tools/magic-wand-tool.ts: Color-based flood-fill selection
- components/selection/selection-panel.tsx: Complete selection UI panel
- components/selection/index.ts: Selection components barrel export
**Updated Files:**
- components/canvas/canvas-with-tools.tsx: Added selection tools integration and marching ants animation
- components/editor/editor-layout.tsx: Integrated SelectionPanel into layout
- store/index.ts: Added selection-store export
- store/canvas-store.ts: Renamed Selection to CanvasSelection to avoid conflicts
- tools/index.ts: Added selection tool exports
- types/index.ts: Added selection types export
- types/canvas.ts: Renamed Selection interface to CanvasSelection
**Selection Tools:**
**Marquee Tools:**
- ✨ Rectangular Selection: Click-drag rectangular regions
- ✨ Elliptical Selection: Click-drag elliptical regions
**Free-form Tools:**
- ✨ Lasso Selection: Draw free-form polygon selections
- ✨ Magic Wand: Color-based flood-fill selection with tolerance
**Selection Modes:**
- 🔷 New: Replace existing selection
- ➕ Add: Add to existing selection
- ➖ Subtract: Remove from existing selection
- ⚡ Intersect: Keep only overlapping areas
**Selection Operations:**
- 📋 Copy/Cut/Paste: Standard clipboard operations with selection mask
- 🗑️ Delete: Remove selected pixels
- 🎨 Fill Selection: Fill with current color
- 🖌️ Stroke Selection: Outline selection with current color
- 🔄 Invert Selection: Invert selected/unselected pixels
- ❌ Clear Selection: Deselect all
**Technical Features:**
- Marching ants animation (animated dashed outline at 50ms interval)
- Selection masks using Uint8Array (0-255 values for anti-aliasing)
- Feathering support (0-250px gaussian blur on selection edges)
- Tolerance control for magic wand (0-255 color difference threshold)
- Scanline polygon fill algorithm for lasso tool
- Flood-fill with Set-based visited tracking for magic wand
- Selection bounds calculation for optimized operations
- Keyboard shortcuts (Ctrl+C, Ctrl+X, Ctrl+V, Ctrl+D, Ctrl+Shift+I)
- Undo/redo integration via selection commands
- Non-destructive operations with proper history tracking
**Algorithm Implementations:**
- Rectangular mask: Simple bounds-based pixel marking
- Elliptical mask: Distance formula from ellipse center
- Lasso mask: Scanline polygon fill with edge intersection
- Magic wand: BFS flood-fill with color tolerance matching
- Mask combination: Per-pixel operations (max, subtract, AND)
- Feathering: Separable box blur (horizontal + vertical passes)
- Mask inversion: Per-pixel NOT operation with bounds recalculation
**UI/UX Features:**
- 264px wide selection panel with all tools and operations
- Tool selection with visual feedback (highlighted active tool)
- Selection mode toggles (new/add/subtract/intersect)
- Feather and tolerance sliders with live value display
- Disabled state when no selection exists
- Keyboard shortcut hints next to operations
- Visual marching ants animation (animated dashes)
Build verified: ✓ Compiled successfully in 1302ms
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-21 02:24:12 +01:00
|
|
|
* Canvas selection interface for selected regions (deprecated - use Selection from selection.ts)
|
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
|
|
|
*/
|
feat(phase-8): implement comprehensive selection system with marching ants
This commit completes Phase 8 of the paint-ui implementation, adding a full
selection system with multiple selection tools, operations, and visual feedback.
**New Files:**
- types/selection.ts: Selection types, masks, and state interfaces
- lib/selection-utils.ts: Selection mask generation and manipulation algorithms
- lib/selection-operations.ts: Copy/cut/paste/delete/fill/stroke operations
- store/selection-store.ts: Selection state management with Zustand
- core/commands/selection-command.ts: Undo/redo commands for selections
- tools/rectangular-selection-tool.ts: Rectangular marquee selection
- tools/elliptical-selection-tool.ts: Elliptical marquee selection
- tools/lasso-selection-tool.ts: Free-form polygon selection
- tools/magic-wand-tool.ts: Color-based flood-fill selection
- components/selection/selection-panel.tsx: Complete selection UI panel
- components/selection/index.ts: Selection components barrel export
**Updated Files:**
- components/canvas/canvas-with-tools.tsx: Added selection tools integration and marching ants animation
- components/editor/editor-layout.tsx: Integrated SelectionPanel into layout
- store/index.ts: Added selection-store export
- store/canvas-store.ts: Renamed Selection to CanvasSelection to avoid conflicts
- tools/index.ts: Added selection tool exports
- types/index.ts: Added selection types export
- types/canvas.ts: Renamed Selection interface to CanvasSelection
**Selection Tools:**
**Marquee Tools:**
- ✨ Rectangular Selection: Click-drag rectangular regions
- ✨ Elliptical Selection: Click-drag elliptical regions
**Free-form Tools:**
- ✨ Lasso Selection: Draw free-form polygon selections
- ✨ Magic Wand: Color-based flood-fill selection with tolerance
**Selection Modes:**
- 🔷 New: Replace existing selection
- ➕ Add: Add to existing selection
- ➖ Subtract: Remove from existing selection
- ⚡ Intersect: Keep only overlapping areas
**Selection Operations:**
- 📋 Copy/Cut/Paste: Standard clipboard operations with selection mask
- 🗑️ Delete: Remove selected pixels
- 🎨 Fill Selection: Fill with current color
- 🖌️ Stroke Selection: Outline selection with current color
- 🔄 Invert Selection: Invert selected/unselected pixels
- ❌ Clear Selection: Deselect all
**Technical Features:**
- Marching ants animation (animated dashed outline at 50ms interval)
- Selection masks using Uint8Array (0-255 values for anti-aliasing)
- Feathering support (0-250px gaussian blur on selection edges)
- Tolerance control for magic wand (0-255 color difference threshold)
- Scanline polygon fill algorithm for lasso tool
- Flood-fill with Set-based visited tracking for magic wand
- Selection bounds calculation for optimized operations
- Keyboard shortcuts (Ctrl+C, Ctrl+X, Ctrl+V, Ctrl+D, Ctrl+Shift+I)
- Undo/redo integration via selection commands
- Non-destructive operations with proper history tracking
**Algorithm Implementations:**
- Rectangular mask: Simple bounds-based pixel marking
- Elliptical mask: Distance formula from ellipse center
- Lasso mask: Scanline polygon fill with edge intersection
- Magic wand: BFS flood-fill with color tolerance matching
- Mask combination: Per-pixel operations (max, subtract, AND)
- Feathering: Separable box blur (horizontal + vertical passes)
- Mask inversion: Per-pixel NOT operation with bounds recalculation
**UI/UX Features:**
- 264px wide selection panel with all tools and operations
- Tool selection with visual feedback (highlighted active tool)
- Selection mode toggles (new/add/subtract/intersect)
- Feather and tolerance sliders with live value display
- Disabled state when no selection exists
- Keyboard shortcut hints next to operations
- Visual marching ants animation (animated dashes)
Build verified: ✓ Compiled successfully in 1302ms
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-21 02:24:12 +01:00
|
|
|
export interface CanvasSelection {
|
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
|
|
|
/** Is there an active selection */
|
|
|
|
|
active: boolean;
|
|
|
|
|
/** Selection bounds */
|
|
|
|
|
x: number;
|
|
|
|
|
y: number;
|
|
|
|
|
width: number;
|
|
|
|
|
height: number;
|
|
|
|
|
/** Selection path (for complex selections) */
|
|
|
|
|
path?: Path2D;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Mouse/pointer state
|
|
|
|
|
*/
|
|
|
|
|
export interface PointerState {
|
|
|
|
|
/** Is pointer currently down */
|
|
|
|
|
isDown: boolean;
|
|
|
|
|
/** Current X position (canvas coordinates) */
|
|
|
|
|
x: number;
|
|
|
|
|
/** Current Y position (canvas coordinates) */
|
|
|
|
|
y: number;
|
|
|
|
|
/** Previous X position */
|
|
|
|
|
prevX: number;
|
|
|
|
|
/** Previous Y position */
|
|
|
|
|
prevY: number;
|
|
|
|
|
/** Pressure (0-1, for stylus) */
|
|
|
|
|
pressure: number;
|
2025-11-21 16:33:16 +01:00
|
|
|
/** Alt key modifier */
|
|
|
|
|
altKey?: boolean;
|
|
|
|
|
/** Ctrl key modifier */
|
|
|
|
|
ctrlKey?: boolean;
|
|
|
|
|
/** Shift key modifier */
|
|
|
|
|
shiftKey?: boolean;
|
|
|
|
|
/** Meta key modifier */
|
|
|
|
|
metaKey?: boolean;
|
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
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Viewport transformation
|
|
|
|
|
*/
|
|
|
|
|
export interface Viewport {
|
|
|
|
|
/** Scale factor */
|
|
|
|
|
scale: number;
|
|
|
|
|
/** Translation X */
|
|
|
|
|
translateX: number;
|
|
|
|
|
/** Translation Y */
|
|
|
|
|
translateY: number;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Canvas to screen coordinate conversion result
|
|
|
|
|
*/
|
|
|
|
|
export interface Point {
|
|
|
|
|
x: number;
|
|
|
|
|
y: number;
|
|
|
|
|
}
|