The canvas container's pointer handler was capturing ALL events when the text
tool was active, including clicks on the text editor UI (overlay, textarea,
handles). This prevented text selection, click-outside commit, and text
dragging from working.
Now the handler checks if the on-canvas editor is already active and returns
early, allowing the OnCanvasTextEditor to handle its own events properly.
Fixes:
- Text selection now works in textarea
- Clicking outside editor commits text
- Dragging transform handles moves text
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The text-dialog modal approach was replaced by the on-canvas text editor.
This file referenced old TextStore properties (isDialogOpen, clickPosition)
that no longer exist, causing TypeScript compilation errors.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replaced modal dialog with inline on-canvas text editor
- Text objects stored as editable entities (non-rasterized)
- Live preview with transparent textarea overlay
- Click on existing text to re-edit
- Drag transform handles to move text
- Auto-commit on click outside (via overlay)
- Text selection with visible highlight
- Hidden original text during editing to prevent double vision
- Position alignment fixes for editing existing text
- Keyboard shortcuts: Ctrl+Enter to commit, Escape to cancel
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed two critical issues preventing text tool usage:
**Pointer Event Integration:**
- Added text tool to canvas pointer event handler
- Text tool now properly responds to canvas clicks
- Opens text dialog on click with correct position
**Tool Options Bar:**
- Added text tool options section to toolbar
- Font family selection (6 common fonts)
- Font size control (8-500px with number input)
- Color picker with hex input
- Helpful hint: "Click on canvas to add text"
- Options bar now appears when text tool is active
**Changes:**
- components/canvas/canvas-with-tools.tsx:
- Added dedicated text tool handler before selection tools
- Handles pointer down event to open text dialog
- components/editor/tool-options.tsx:
- Imported useTextStore
- Added isTextTool check
- Created text tool options UI section
- Shows font, size, and color controls
Text tool is now fully functional - click the Type icon, then
click anywhere on canvas to open the text editor dialog!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add complete text rendering system with the following features:
**Text Tool Core:**
- TextTool class with click-to-place text functionality
- Text cursor and pointer event handling
- Integration with DrawCommand for undo/redo support
**Text Rendering:**
- Multi-line text support with line height control
- Custom letter spacing
- Text alignment (left/center/right)
- Font families: 13 web-safe fonts + 14 popular Google Fonts
- Dynamic Google Font loading via Web Font Loader API
- Font styles (normal/italic) and weights (100-900)
**Text Dialog UI:**
- Full-featured text editor dialog
- Live preview of text with all formatting
- Font family selection (web-safe + Google Fonts)
- Font size (8-500px), style, and weight controls
- Color picker with hex input
- Text alignment options
- Line height slider (0.5-3x)
- Letter spacing slider (-10 to 50px)
- Multi-line text input with textarea
**State Management:**
- text-store with Zustand + persist middleware
- All text settings preserved across sessions
- Dialog state management (open/close)
- Click position tracking
**Integration:**
- Added text tool to tool palette with Type icon
- Registered TextTool in canvas tool system
- Added TextDialog to editor layout
- Full type safety with TypeScript interfaces
**Undoable:**
- Text rendering fully integrated with command pattern
- Each text insertion creates single undo point
- Proper before/after state capture
This completes Phase 11 of the implementation plan, marking
the transition from MVP to a fully-featured image editor.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
UI Improvements:
- Style scrollbars with primary color accent
- Scrollbar thumb transitions on hover (40% → 60% → 80% opacity)
- Add fill tool options to toolbar (color picker + opacity)
- Support for Firefox with scrollbar-color property
Transparency Support:
- Set default canvas background to transparent
- First layer now transparent instead of white fill
- Enables creating images with transparency
- Checkerboard pattern shows through transparent areas
- Proper PNG export support with alpha channel
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Reorganize the panel dock to use tabs more efficiently by moving the
Color Panel from the always-visible section into the Adjustments tab.
Changes:
- **Panel Dock Layout**:
* Always visible: Layers Panel only (50% height, min 300px)
* Tabbed section: Takes up remaining 50% of dock space
- **Adjustments Tab**: Now contains (in order):
1. Colors (collapsible, default open)
2. Filters (collapsible, default open)
3. Selection (collapsible, default open)
4. Transform (collapsible, default open)
- **Tools Tab**: Contains:
1. Shape Settings (collapsible, default open)
- **History Tab**: Contains:
1. History Panel (full height, not collapsible)
Benefits:
- More flexible space allocation
- Layers Panel gets 50% of vertical space (was 400px fixed)
- All adjustment features grouped together in one tab
- Cleaner organization with collapsible sections
- More canvas workspace visible by default
- Consistent with professional image editor patterns
Build Status: ✓ Successful (1330ms)
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Separate tool controls from the header into a dedicated adjustments bar,
following the classic Photoshop pattern with:
- Header bar: application controls (file, undo/redo, zoom, new layer)
- Tool adjustments bar: context-sensitive tool options
Changes:
- **Header Bar** (48px): Simplified to two sections
* Left: Title + File Menu
* Right: Undo/Redo + Zoom controls + New Layer button
* Removed tool options from center
- **Tool Adjustments Bar** (40px): New dedicated bar below header
* Full-width bar for tool-specific controls
* Context-sensitive: shows options for active tool only
* Slightly darker background (bg-card/50) for visual separation
* Contains all tool options (size, opacity, color, shape type, etc.)
Benefits:
- Cleaner header without crowding
- More space for tool controls to expand
- Better visual separation of concerns
- Matches professional image editor conventions
- Header remains clean and consistent
Build Status: ✓ Successful (1313ms)
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Restructure the UI to match professional image editors (Photoshop, Affinity)
with a clean, predictable layout that maximizes canvas space.
Changes:
- **Top Bar** (48px): Unified horizontal bar with three sections:
* Left: Title + File Menu
* Center: Context-sensitive tool options
* Right: Undo/Redo, Zoom controls, New Layer button
- **Left Side** (64px): Single tool palette (unchanged)
- **Center**: Maximized canvas workspace (flex-1)
- **Right Side** (280px): Unified panel dock with hybrid organization:
* Always visible: Layers Panel (400px) + Color Panel (200px)
* Tabbed sections: Adjustments, Tools, History
* Collapsible panels within tabs for efficient space usage
New Components:
- `components/editor/tool-options.tsx`: Horizontal tool options bar
* Shows context-sensitive options for active tool
* Drawing tools: color, size, opacity, hardness, flow
* Shape tool: shape type selector
* Selection tool: mode selector (rectangular, elliptical, lasso, magic wand)
- `components/editor/panel-dock.tsx`: Unified right panel system
* Fixed 280px width (compact professional standard)
* Tab system for organizing feature panels
* Collapsible sections within tabs
* Hybrid approach: essential panels always visible, others tabbed
Removed from Left Sidebar:
- ToolSettings panel (now in top bar)
- ColorPanel (now in panel dock)
- FilterPanel (now in panel dock)
- SelectionPanel (now in panel dock)
- TransformPanel (now in panel dock)
- ShapePanel (now in panel dock)
Benefits:
- Reclaimed ~400px horizontal space for canvas
- Predictable, stable UI (no panels appearing/disappearing)
- Professional, industry-standard layout
- All features accessible in organized panel dock
- Cleaner, less cluttered interface
Build Status: ✓ Successful (1266ms)
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
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>
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>
