Recovers expanded export format support from orphaned commit 80961c01
and PSD export from b07ecd5. The editor export dialog now supports 7
formats (PNG, JPEG, WebP client-side; AVIF, TIFF, GIF, JXL via server
conversion). PSD export uses ImageMagick on the backend.
- Replace bg-popover with bg-card for dropdown backgrounds (popover CSS
variable is not defined in this project's theme)
- Move menu bar test to tests/e2e-editor/ and adapt for editorPage fixture
- Fix click-outside test to handle welcome screen overlay
Recovers the editor menu bar (File/Edit/Image/Layer/Select/Filter/View)
from orphaned commit b07ecd5 that was lost during a rebase. Integrates
it into the current editor-page layout with PSD/TGA/EXR/HDR file open
support and new document dialog.
- fix WebP export silently producing PNG when background is non-transparent
- fix autosave not converting blob: URLs inside image-type canvas objects
- fix project load not resetting selection/crop/clipboard state
- fix rotateCanvas not updating object rotation attributes
- fix flipCanvas not negating object rotation attributes
- fix line shadow props overridden by effect spread ordering
- fix "outside" stroke position rendering same as "center"
- add missing pencil tool keyboard shortcut (N)
- remove misleading resample dropdown from image resize dialog
- fix E2E autosave tests for production builds (no Vite dynamic imports)
- fix color picker test case sensitivity (CSS uppercase vs DOM text)
- add 4 unit tests for rotation attribute transforms
Canvas rendering:
- Fix Konva filter application order (filters before cache)
- Implement 6 missing filters (motionBlur, radialBlur, surfaceBlur, vignette, grain, sharpen)
- Implement exposure, vibrance, warmth adjustments as custom Konva filters
- Apply layer blend modes via globalCompositeOperation
- Apply object effects (drop shadow, outer glow, stroke) to all shapes
- Mount SmartGuidesOverlay during move tool drag
- Clip pixel grid to visible viewport (200-line cap for performance)
Store logic:
- resizeImage now scales all objects proportionally (points, radii, fontSize)
- rotate/flip/trim handle line/arrow points arrays and center-based objects
- applyCrop creates cropped source image via offscreen canvas
- invertSelection creates mask from bounds when no mask exists
- cutObjects uses single atomic set() to prevent race conditions
- sendToBack respects layer ordering in multi-layer documents
- Add batchNudge() and commitHistory() for undoable nudge operations
- Add updateLayerThumbnail() method
Tool hooks:
- Fix clone stamp/dodge/burn perf (toDataURL only on mouseUp, not every move)
- Fix magic wand zoom/pixelRatio with explicit stage.toCanvas() viewport
- Fix eyedropper sampling with unzoomed canvas export
- Fix selection tool stale closure via isDrawingRef
- Implement polygonal lasso (click-to-place vertices, double-click to close)
- Implement selection subtract mode (geometric and mask-based)
- Implement gradient live preview during drag
- Fix transform/move tool to persist changes and handle ellipse/polygon/star
UI wiring:
- Mount rulers and guidelines in editor page
- Wire histogram with live canvas imageData
- Wire autosave recovery with blob-to-dataURL conversion
- Wire fill dialog to Shift+Backspace shortcut
- Wire eyedropper and transform options to options bar
- Fix history panel undo/redo button reactive state via useSyncExternalStore
- Fix layer row name click to select layer (timer-based click/dblclick)
- Fix zoom animation coordinate drift with progressive store sync
- Fix copy merged to use Konva stage composite export
Tests:
- 49 new unit tests (store fixes + konva filters)
- 8 new E2E test files with 39 test cases
Root cause analysis of the magic wand bug revealed the same dispatch
pattern affected 13 other tools:
- 8 tools (eyedropper, clone stamp, dodge, burn, sponge, blur brush,
sharpen brush, smudge) had hook implementations but were never
imported or wired into the canvas toolMap -- clicking did nothing
- Selection type (rect/ellipse/lasso) was never synced from the global
activeTool to the selection hook's internal state, so marquee-ellipse
and lasso tools always produced rectangular selections
- Selection drag preview was hardcoded to Rect instead of using the
existing ActiveSelectionPreview component
- Zoom tool click did nothing (now zooms in on click, out on alt+click)
- Magic wand dispatched to generic selection drag instead of flood fill
- CropOverlay: rendered in its own Layer when crop tool is active,
cropState auto-initialized when switching to crop tool
- SelectionOverlay: marching ants rendered for active selections,
selection tool mouse events dispatched through canvas handler
- TransformToolTransformer: rendered when transform tool is active
- Selection tool handlers wired for marquee-rect, marquee-ellipse,
lasso-free, lasso-poly, and magic-wand tools
- Active selection preview rect shown while dragging
- Marquee: BoxSelect (dotted rectangle) instead of Square
- Lasso: Lasso icon instead of Pen
- Transform: Maximize2 (corner arrows) instead of Move
- Gradient: Blend instead of ArrowUpRight
- Blur Brush: Droplet (water drop) instead of ScanLine
- Sharpen Brush: Triangle instead of ScanLine
- Smudge: Fingerprint instead of ScanLine
- Burn: Flame instead of Sun (was same as Dodge)
- Sponge: Droplets instead of Sun (was same as Dodge)
- Shape: Hexagon instead of Square (was same as Marquee)
- Reorder groups to match standard Photoshop toolbar layout
- Merge Crop + Eyedropper into one group
- Separate Eraser into its own group
Brush and eraser mouseUp handlers were bumping _historyVersion a second
time (after addObject already bumped it in mouseDown). This created a
ghost history entry whose objects array held the same reference as the
current state. On undo, zundo restored that identical reference, so
zustand's Object.is selector equality saw no change and skipped the
canvas re-render -- the stroke stayed visible even though the history
panel moved backward.
Remove the redundant _historyVersion increment from both mouseUp
handlers. The addObject call in mouseDown already records the correct
pre-stroke snapshot. mouseUp now only patches lastAction for the
history label without creating a new temporal entry.
1. Export dialog (Ctrl+Shift+S): replaced react-hotkeys-hook handler with
a capture-phase keydown listener on window so the browser's native
"Save Page As" dialog is intercepted before it can fire.
2. Text tool: created useTextTool hook that spawns an inline textarea
overlay on canvas click, commits the text as a Konva Text object on
blur/Enter, and wired it into the useActiveToolHandlers dispatcher.
3. Undo (Ctrl+Z): removed the 500ms debounce from zundo's handleSet.
The debounce caused a race where calling undo before the timer fired
would discard the future-states stack, making undo appear to do
nothing. The equality function (keyed on _historyVersion) already
prevents intermediate states from being recorded, so the debounce
was redundant.
CRITICAL fixes:
- #14: Render source image on canvas via Konva Image + use-image hook
- #3: Wire move tool handlers (onClick, onDragEnd, onTransformEnd, draggable)
to all CanvasObjectRenderer shapes
- #4: Implement image object rendering for fill/gradient output
- #2: Show fallback text in histogram panel when no imageData provided
- #1: Forward all args in zundo handleSet debounce wrapper
HIGH fixes:
- #5: Track raw screen cursor position for brush overlay instead of
using canvas-space coordinates
- #6: Export dialog uses Konva stage.toDataURL via module-level ref
instead of DOM querySelector for correct export at any zoom/pan
- #7: Add _historyVersion increment to setAdjustment, resetAdjustments,
toggleFilter, and setFilterParam for undo tracking
- #8: Include lastAction in partialize so history labels display correctly
MEDIUM fixes:
- #10: Move useEditorShortcuts from EditorCanvas to EditorPage with
save/export callbacks
- #11: Remove _historyVersion increment from updateObject to prevent
brush strokes from flooding undo history
- #12: Apply Konva filters (Brighten, Contrast, HSL, Blur, Grayscale,
Sepia, Invert, Pixelate, Emboss, Posterize, Noise, Solarize,
Threshold, Kaleidoscope) to source image node based on store state
- Show desktop-recommended message on mobile viewports (<768px)
- Add LoadingOverlay component for canvas loading/progress states
- Add ARIA tablist/tab/aria-selected to right panel tabs
- Add "Open in Editor" link in review panel after tool processing
Implements Agent 2 deliverables for the image editor: move tool with Konva
Transformer and smart guide snapping, rectangular/elliptical marquee and
lasso selection with marching ants animation, magic wand flood fill, crop
tool with darkened overlay and rule-of-thirds grid, free transform with
numeric inputs, context menu with z-ordering and clipboard operations,
rulers with drag-to-create guides, smart alignment guides, and canvas/image
resize dialogs. Also creates the shared editor types and Zustand store with
full layer management, z-ordering, clipboard, guide, and document operations.
Implement Agent 7 features for the image editor:
- History panel with undo/redo list, action icons, and state jumping
- 51+ keyboard shortcuts via react-hotkeys-hook (tools, modifiers, clipboard)
- Export dialog with PNG/JPEG/WebP format, quality, resize, clipboard copy
- Navigator minimap with viewport rectangle, drag-to-pan, zoom slider
- Autosave/recovery system with localStorage and recovery banner
- Project save/load (.snapotter JSON format)
- Unsaved changes warning via beforeunload
- Paste from system clipboard support
Implements the layer management panel for the image editor (Features 16, 40):
- Blend mode dropdown (16 modes) and opacity slider for active layer
- Layer list with visibility/lock toggles, thumbnails, and inline rename
- Pointer-based drag reorder (not HTML5 drag API)
- Right-click context menu: Duplicate, Merge Down, Flatten All, Delete
- Layer effects section: Drop Shadow, Inner Shadow, Outer Glow, Stroke
- Each effect with enable/disable toggle and full parameter controls
- Wired into EditorRightPanel as the "Layers" tab content
Create the four-zone editor layout shell (toolbar, options bar, status
bar, right panel), welcome screen with drag-and-drop and new document
dialog, and the main editor page with clipboard paste and URL loading.
SnapOtter