Optimize mask handling and shape mask UX for output area

Replaces full-canvas mask operations with getMaskForOutputArea() for significant performance improvements when processing masks for the output area. Refines shape mask removal and application logic to ensure correct mask state when changing expansion values or custom shapes, including auto-removal and re-application of masks. Adds throttling to shape preview rendering for better UI responsiveness. Improves mask removal to eliminate antialiasing artifacts and updates SAM mask integration to use correct output area positioning.
This commit is contained in:
Dariusz L
2025-07-27 17:23:08 +02:00
parent 6491d80225
commit 0d6bfb01d6
12 changed files with 448 additions and 302 deletions

View File

@@ -148,13 +148,17 @@ export class CustomShapeMenu {
margin-top: 2px;
color: #aaa;
`;
let expansionValueBeforeDrag = this.canvas.shapeMaskExpansionValue;
const updateExpansionSliderDisplay = () => {
const value = parseInt(expansionSlider.value);
this.canvas.shapeMaskExpansionValue = value;
expansionValueDisplay.textContent = value > 0 ? `+${value}px` : `${value}px`;
};
let isExpansionDragging = false;
expansionSlider.onmousedown = () => { isExpansionDragging = true; };
expansionSlider.onmousedown = () => {
isExpansionDragging = true;
expansionValueBeforeDrag = this.canvas.shapeMaskExpansionValue; // Store value before dragging
};
expansionSlider.oninput = () => {
updateExpansionSliderDisplay();
if (this.canvas.autoApplyShapeMask) {
@@ -172,6 +176,16 @@ export class CustomShapeMenu {
expansionSlider.onmouseup = () => {
isExpansionDragging = false;
if (this.canvas.autoApplyShapeMask) {
const finalValue = parseInt(expansionSlider.value);
// If value changed during drag, remove old mask with previous expansion value
if (expansionValueBeforeDrag !== finalValue) {
// Temporarily set the previous value to remove the old mask properly
const tempValue = this.canvas.shapeMaskExpansionValue;
this.canvas.shapeMaskExpansionValue = expansionValueBeforeDrag;
this.canvas.maskTool.removeShapeMask();
this.canvas.shapeMaskExpansionValue = tempValue; // Restore current value
log.info(`Removed old shape mask with expansion: ${expansionValueBeforeDrag}px before applying new value: ${finalValue}px`);
}
this.canvas.maskTool.hideShapePreview();
this.canvas.maskTool.applyShapeMask(true);
this.canvas.render();