Ensured the toggle mask switch UI stays in sync with mask visibility when auto_refresh_after_generation hides or shows the mask. The checkbox and switch now correctly reflect the current mask state, preventing UI desynchronization and improving user experience.
Fixed an issue where images were not immediately refreshed after background removal (matting). Now, the canvas updates instantly when the background is removed, ensuring correct display without requiring manual scaling or other actions.
Refactored CanvasLayers.ts to eliminate code duplication by unifying five main areas into reusable functions, following the DRY principle. Improved code readability, maintainability, and flexibility with better naming, documentation, and parameterization.
Enhanced the system to always select the best available cache based on both blend area and crop, prioritizing exact matches. Prevented costly operations and live rendering during scaling for optimal performance and smooth user experience.
Refactored tooltip logic for the clipboard switch so it now updates immediately when toggled, showing the correct template without requiring mouse movement. Added helper functions and improved event handling for better UX.
Added updateButtonStates() to enable/disable delete button based on selection
Updated control setup and selection handlers to call this method
Added CSS for disabled button state and tooltip
Delete button now disables when no layers are selected; all other panel features unchanged
Moved all inline styles from CanvasLayersPanel.ts to layers_panel.css
Updated TypeScript to load external CSS and removed injectStyles()
Replaced inline styles with CSS classes in UI methods
Ensured all panel features and interactions work as before
Improved code maintainability and consistency with project structure
Moved all blend mode menu styles from CanvasLayers.ts to a dedicated CSS file. Replaced inline styles with CSS classes and preserved all functionality.
Excluded blendedImageCache and blendedImageDirty properties from layer serialization in CanvasState.ts to prevent DataCloneError when saving state. This ensures that only serializable data is sent to Web Workers, while runtime caches are regenerated as needed. Blend area performance optimization remains functional without serialization issues.
Redesigned the positioning system for the Blend Mode menu, inspired by the "Custom Output Area" logic. The menu now anchors precisely to the top-right corner of the viewport and stays in place during panning and zooming.
Added a smart selection frame for layers that dynamically switches between solid and dashed lines depending on visibility:
Functionality:
Solid line: visible edge segments, not covered by other layers
Dashed line: covered edge segments, obscured by layers with higher zIndex and opacity > 0.1
Refactored the "Output Area Size" button to use the new setOutputAreaSize method:
Correctly sets output area size and position based on current system logic (custom shape, extensions, outputAreaBounds)
Fully functional across all editor modes
New resizing logic:
Operates relative to the current center of the output area
Output area expands or contracts around its center without repositioning
Ensures center remains unchanged as expected
This fix provides precise control over layout dimensions and aligns with user expectations across workflows.
Added a clear first point distinction when drawing a custom shape: if the mouse cursor is near the beginning of a line (the shape can be closed), the first point is drawn in yellow and larger. This allows the user to see when they can close the shape with a single click. The code has been compiled and is ready to use. The functionality works as expected.
I updated src/css/custom_shape_menu.css with new styles for a modern look and feel, and I refactored src/CustomShapeMenu.ts to use a new HTML structure for the checkboxes that works with the updated CSS. The menu should now be fully functional with the new design.
moved all CSS from src/CustomShapeMenu.ts to a new file src/css/custom_shape_menu.css and updated the TypeScript file to use the external stylesheet. This improves code organization and maintainability.
fixed the persistent shape preview bug where blue dashed lines would remain visible even when the user was no longer interacting with the slider. The issue was caused by race conditions and timing problems in the preview system.
Introduced a drawTextWithBackground helper to centralize and simplify text rendering with backgrounds in CanvasRenderer (JS/TS). Updated all relevant usages to use this helper. Adjusted initial viewport x/y offsets in Canvas and Canvas.ts for improved default positioning.
Refactored notification utilities for a more modern, reusable notification system and added info/success/error notifications to the background removal (matting) workflow. Removed the custom error dialog in favor of notifications, and exposed all notification types for debugging. Updated imports and cleaned up notification-related code.
Adds a modern, type-based notification UI with support for success, error, info, warning, and alert styles, including a new showAlertNotification function. CanvasState now auto-corrects the node_id widget before saving state and notifies the user if a correction occurs. CanvasView centering logic now uses the actual canvas container for more accurate viewport adjustments.
Adds logic to adjust the canvas viewport to keep content centered when entering or exiting fullscreen mode. The adjustment calculates the difference in container sizes and updates the viewport position accordingly, improving user experience during fullscreen transitions.
Implemented an ESC key handler to allow users to close the fullscreen editor mode using the Escape key. Updated the editor button tooltip and the shortcuts documentation to reflect this new shortcut.
The mask is now drawn after layers but before all preview outlines, ensuring correct visual stacking. The redundant mask rendering code after the preview outlines has been removed.
