cd59f0606b
feat: implement UI state persistence and theme toggle
...
Major improvements to UI state management and user preferences:
- Add theme toggle with dark/light mode support
- Implement Zustand persist middleware for UI state
- Add ui-store for panel layout preferences (dock width, heights, tabs)
- Persist tool settings (active tool, size, opacity, hardness, etc.)
- Persist canvas view preferences (grid, rulers, snap-to-grid)
- Persist shape tool settings
- Persist collapsible section states
- Fix canvas coordinate transformation for centered rendering
- Constrain checkerboard and grid to canvas bounds
- Add icons to all tab buttons and collapsible sections
- Restructure panel-dock to use persisted state
Storage impact: ~3.5KB total across all preferences
Storage keys: tool-storage, canvas-view-storage, shape-storage, ui-storage
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-21 09:03:14 +01:00
1d82f60182
feat(phase-9): implement comprehensive transform system with move and free transform
...
This commit completes Phase 9 of the paint-ui implementation, adding transform
tools for moving, scaling, and rotating layers with real-time preview.
**New Files:**
- types/transform.ts: Transform types, state, and matrix interfaces
- lib/transform-utils.ts: Transform matrix operations and calculations
- store/transform-store.ts: Transform state management with Zustand
- core/commands/transform-command.ts: Undo/redo support for transforms
- tools/move-tool.ts: Simple layer move tool
- tools/free-transform-tool.ts: Advanced transform with handles (scale/rotate/move)
- components/transform/transform-panel.tsx: Transform UI panel
- components/transform/index.ts: Transform components barrel export
**Updated Files:**
- components/canvas/canvas-with-tools.tsx: Added transform tools integration
- components/editor/editor-layout.tsx: Integrated TransformPanel into layout
- store/index.ts: Added transform-store export
- tools/index.ts: Added transform tool exports
- types/index.ts: Added transform types export
**Transform Tools:**
**Move Tool:**
- ✨ Click-drag to move layers
- 📐 Preserves layer dimensions
- ⌨️ Arrow key support (planned)
**Free Transform Tool:**
- 🔲 8 scale handles (corners + edges)
- 🔄 Rotate handle above center
- 📏 Constrain proportions toggle
- 🎯 Visual handle feedback
- 🖱️ Cursor changes per handle
**Transform Operations:**
- **Move**: Translate layer position (X, Y offset)
- **Scale**: Resize with handles (independent X/Y or constrained)
- **Rotate**: Rotate around center point (degrees)
- **Proportional Scaling**: Lock aspect ratio with toggle
**Technical Features:**
- Transform matrix operations (2D affine transformations)
- Matrix multiplication for combined transforms
- Handle position calculation with rotation
- Transform bounds calculation (AABB of rotated corners)
- Real-time transform preview on canvas
- Non-destructive until apply
- Undo/redo integration via TransformCommand
- Apply/Cancel actions with state restoration
**Matrix Mathematics:**
- Identity matrix: [1 0 0 1 0 0]
- Translation matrix: [1 0 0 1 tx ty]
- Scale matrix: [sx 0 0 sy 0 0]
- Rotation matrix: [cos -sin sin cos 0 0]
- Matrix composition via multiplication
- Point transformation: [x' y'] = M × [x y]
**Transform Algorithm:**
1. Translate to origin (center of bounds)
2. Apply scale transformation
3. Apply rotation transformation
4. Translate back and apply position offset
5. Render transformed canvas to new canvas
**Handle Types:**
- **Corner handles** (4): Scale in both directions
- **Edge handles** (4): Scale in single direction
- **Rotate handle** (1): Rotate around center
**Transform State:**
```typescript
{
x: number; // Translation X
y: number; // Translation Y
scaleX: number; // Scale factor X (1 = 100%)
scaleY: number; // Scale factor Y (1 = 100%)
rotation: number; // Rotation in degrees
skewX: number; // Skew X (future)
skewY: number; // Skew Y (future)
}
```
**UI/UX Features:**
- 264px wide transform panel with tool selection
- Real-time transform state display (position, scale, rotation)
- Constrain proportions toggle with lock/unlock icon
- Apply/Cancel buttons with visual feedback
- Tool-specific instructions
- Disabled state when no unlocked layer selected
- Keyboard shortcuts planned (Enter to apply, Esc to cancel)
**Cursor Feedback:**
- `move`: When dragging inside bounds
- `nwse-resize`: Top-left/bottom-right corners
- `nesw-resize`: Top-right/bottom-left corners
- `ns-resize`: Top/bottom edges
- `ew-resize`: Left/right edges
- `crosshair`: Rotate handle
- Cursor rotation adjustment (planned)
Build verified: ✓ Compiled successfully in 1374ms
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude <noreply@anthropic.com >
2025-11-21 02:36:50 +01:00
