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

@@ -289,16 +289,26 @@ async function handleSAMDetectorResult(node, resultImage) {
showNotification("Failed to load SAM Detector result. The mask file may not be available.", "#c54747", 5000);
return;
}
// Create temporary canvas for mask processing (same as CanvasMask)
// Create temporary canvas for mask processing with correct positioning
log.debug("Creating temporary canvas for mask processing");
// Get the output area bounds to position the mask correctly
const bounds = canvas.outputAreaBounds;
log.debug("Output area bounds for SAM mask positioning:", bounds);
// Create canvas sized to match the result image dimensions
const tempCanvas = document.createElement('canvas');
tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;
tempCanvas.width = resultImage.width;
tempCanvas.height = resultImage.height;
const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
if (tempCtx) {
tempCtx.drawImage(resultImage, 0, 0, canvas.width, canvas.height);
log.debug("Processing image data to create mask");
const imageData = tempCtx.getImageData(0, 0, canvas.width, canvas.height);
// Draw the result image at its natural size (no scaling)
tempCtx.drawImage(resultImage, 0, 0);
log.debug("Processing image data to create mask", {
imageWidth: resultImage.width,
imageHeight: resultImage.height,
boundsX: bounds.x,
boundsY: bounds.y
});
const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const data = imageData.data;
// Convert to mask format (same as CanvasMask)
for (let i = 0; i < data.length; i += 4) {