SveltyCMS
SveltyCMS copied to clipboard
Feat: Implement image editor tool with advanced features
-
Refactored image editor architecture with component separation:
- Created ImageEditor.svelte as main orchestrator component
- Split UI into EditorCanvas, EditorSidebar, EditorToolPanel components
- Added CropTopToolbar and CropBottomBar for crop-specific controls
- Added MobileToolbar for responsive design
-
Enhanced Crop.svelte with professional functionality:
- Fixed coordinate system to use stage coordinates instead of image-space
- Implemented proper visual overlay with cutout effect using Konva groups
- Added rotation-aware highlight that syncs with crop tool transforms
- Optimized caching strategy for smooth drag/resize interactions
- Added aspect ratio constraints (Free, 1:1, 4:3, 16:9, 3:2, 9:16)
- Implemented successive crops with coordinate accumulation
- Added rotate left/right and flip horizontal/vertical controls
-
Fixed critical rendering issues:
- Resolved container mounting timing problems
- Fixed highlight detachment during interactions
- Eliminated checkerboard pattern in crop area
- Proper layer management with moveToTop() for z-ordering
-
Updated imageEditorStore with new functionality:
- Added imageGroup state for container management
- Implemented cleanupTempNodes for proper tool cleanup
- Added takeSnapshot for history management
- Enhanced undo/redo support
-
UI improvements:
- Added undo/redo buttons to main toolbar
- Centered crop toolbar with better visual hierarchy
- Icon-only rotate/flip buttons for cleaner interface
- Aspect ratio presets with visual feedback