Update ThumbnailEditor.vue

[katalysis]

Enhances the ThumbnailEditor Vue component with improved crop controls and a live preview event system to update dashboard pages following a thumbnail change.

Sizing Mode Support

• EXACT mode: Locks aspect ratio to thumbnail dimensions (e.g., 16:9 for 1600x900)
• PROPORTIONAL mode: Allows free aspect ratio to preserve original image proportions
• Canvas now renders at exact thumbnail dimensions (fixes output size issues where thumbnails of certain sizes/proportions had sections outside the editable area)

Improved Crop Controls

• Corner resize handles for precise control
• Visible crop area with clear boundaries
• Adjusts Mouse wheel zoom for easier control
• Slower zoom increments (5%) for fine-tuning
• Smooth transitions with high-quality image smoothing

Live Preview Event System

• Triggers namespaced ImageEditorDidSave.thumbnails.* events when saving
• Passes fileId, fileVersionId, and thumbnailHandle for coordinated UI updates
• Prevents event conflicts with other dialogs

Files Changed

• assets/cms/components/Image/ThumbnailEditor.vue (191 insertions, 28 deletions)

Testing

• ✅ Tested EXACT and PROPORTIONAL modes with various image aspect ratios
• ✅ Verified crop controls and zoom functionality
• ✅ Confirmed thumbnail saves successfully without errors
• ✅ Tested live preview events with parent components

Related

Companion PR in concretecms/concretecms updates the thumbnail dialog UI and file details page to use this enhanced component.