valknar/paint-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6e35849f4e73404ab932dc26f9f5b8003ce504bf
paint-ui/tools/index.ts

14 lines
449 B
TypeScript
Raw Normal View History

feat: implement Phase 4 - Drawing Tools with history integration Complete drawing tool system with pencil, brush, eraser, and fill tools: **Tool Architecture (tools/)** - BaseTool: Abstract base class with lifecycle hooks - onActivate/onDeactivate for tool switching - onPointerDown/Move/Up for drawing - getCursor for custom cursors - isDrawing state management **Drawing Tools** - PencilTool: 1px precision drawing - Fixed line width - Smooth strokes with lineCap/lineJoin - Respects opacity setting - BrushTool: Variable size soft brush - Size: 1-200px with slider - Hardness: 0-100% (soft to hard edges) - Flow: Paint density control - Spacing: Interpolation between stamps - Radial gradient for soft edges - Pressure support ready - EraserTool: Pixel removal - destination-out composite mode - Variable size (1-200px) - Smooth interpolation - Respects opacity for partial erase - FillTool: Flood fill algorithm - Scanline flood fill implementation - Pixel-perfect color matching - Efficient Set-based visited tracking - No recursion (stack-based) **Drawing Commands (core/commands/draw-command.ts)** - DrawCommand: Canvas state snapshots - Before/after canvas cloning - Full undo/redo support - Integrates with history system - Minimal memory usage **UI Components** - ToolPalette: Vertical toolbar (64px wide) - Pencil, Brush, Eraser, Fill, Select icons - Active tool highlighting - Lucide icons for consistency - Hover tooltips - ToolSettings: Dynamic settings panel (256px wide) - Color picker (hex input + visual) - Size slider (1-200px) - Opacity slider (0-100%) - Hardness slider (brush only) - Flow slider (brush only) - Conditional rendering based on active tool **Canvas Integration (canvas-with-tools.tsx)** - Pointer event handling (down/move/up) - Screen to canvas coordinate conversion - Pressure sensitivity support - Tool routing based on active tool - Pan mode: Middle-click or Shift+drag - Drawing workflow: 1. Pointer down: Create DrawCommand 2. Pointer move: Call tool.onPointerMove 3. Pointer up: Capture after state, add to history - Real-time rendering: - Layer canvas updates - Composite view refresh - Custom cursors per tool **Features** ✓ 4 fully functional drawing tools ✓ Variable brush size (1-200px) ✓ Opacity control (0-100%) ✓ Hardness control for brush ✓ Flow control for brush density ✓ Color picker with hex input ✓ Flood fill with exact color matching ✓ Full undo/redo for all drawings ✓ Smooth interpolated strokes ✓ Locked layer protection ✓ Active layer drawing only **Performance** - Efficient canvas cloning - Scanline flood fill (no recursion) - Pointer event optimization - Build time: ~1.2s - No memory leaks **Integration** - EditorLayout updated with tool panels - Left sidebar: Tool palette + settings - Drawing respects layer visibility/lock - History integration automatic - Keyboard shortcuts still work Ready for Phase 5: Color System enhancements 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-20 21:30:37 +01:00
export * from './base-tool';
export * from './pencil-tool';
export * from './brush-tool';
export * from './eraser-tool';
export * from './fill-tool';
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
export * from './eyedropper-tool';
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 * from './rectangular-selection-tool';
export * from './elliptical-selection-tool';
export * from './lasso-selection-tool';
export * from './magic-wand-tool';
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
export * from './move-tool';
export * from './free-transform-tool';
feat: implement Phase 10 - Shape Tools Add comprehensive shape drawing system with support for 7 shape types: rectangle, ellipse, line, arrow, polygon, star, and triangle. Features: - Created types/shape.ts with ShapeType and ShapeSettings interfaces - Implemented lib/shape-utils.ts with drawing algorithms for all shapes: * Rectangle with optional corner radius * Ellipse with independent x/y radii * Line with stroke support * Arrow with configurable head size and angle * Polygon with adjustable sides (3-20) * Star with points and inner radius control * Triangle (equilateral style) - Created store/shape-store.ts for shape state management - Implemented tools/shape-tool.ts as unified tool handling all shapes - Built components/shapes/shape-panel.tsx with comprehensive UI: * Grid selector for all 7 shape types * Fill/stroke toggles with color pickers * Dynamic properties panel (corner radius, sides, inner radius, etc.) * Real-time stroke width adjustment - Integrated ShapeTool into canvas-with-tools.tsx - Added ShapePanel to editor-layout.tsx sidebar - Removed duplicate ShapeType/ShapeSettings from types/tool.ts All shapes support: - Fill with color selection - Stroke with color and width controls - Shape-specific properties (corners, sides, arrow heads, etc.) - Undo/redo via DrawCommand integration Build Status: ✓ Successful (1290ms) 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-21 02:43:15 +01:00
export * from './shape-tool';
Reference in New Issue Copy Permalink