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

3 Commits

Author SHA1 Message Date
Sebastian Krüger
ad87b86c0f feat(phase-13): implement layer groups/folders system 
Add comprehensive layer groups system for organizing layers hierarchically.

Features:
- Create layer groups (folders)
- Add layers to groups
- Remove layers from groups
- Toggle group collapsed/expanded state
- Get all layers in a group
- Group properties:
  * groupId: Parent group ID (null if not in group)
  * isGroup: Whether layer is a group
  * collapsed: Whether group is collapsed
- Groups are special layers with isGroup=true
- Groups have no canvas (width/height = 0)
- Groups can contain multiple layers
- Layers track their parent group via groupId

Changes:
- Updated types/layer.ts with group properties:
  * groupId: string | null
  * isGroup: boolean
  * collapsed: boolean
- Updated store/layer-store.ts:
  * createLayer initializes group properties
  * createGroup() - Create new group
  * addToGroup() - Add layer to group
  * removeFromGroup() - Remove from group
  * toggleGroupCollapsed() - Toggle collapsed
  * getGroupLayers() - Get group's layers

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 20:29:20 +01:00
Sebastian Krüger
4ddb8fe0e3 feat(phase-13): implement layer masks foundation for non-destructive editing 
Add comprehensive layer mask system with core functionality for non-destructive editing.

Features:
- LayerMask interface with canvas, enabled, and inverted properties
- Layer interface updated with mask property
- Full mask management in layer store:
  * addMask() - Creates white mask (fully visible)
  * removeMask() - Removes mask from layer
  * toggleMask() - Enable/disable mask
  * invertMask() - Invert mask values
  * applyMask() - Apply mask to layer and remove
- Duplicate layer now clones masks
- Grayscale mask system (white=reveal, black=hide)

Changes:
- Updated types/layer.ts with LayerMask interface
- Modified Layer interface to include mask property
- Updated store/layer-store.ts:
  * Added mask property initialization to createLayer
  * Added 5 new mask management functions
  * Updated duplicateLayer to clone masks

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-21 19:57:49 +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