From 472f8768a5bb733f15979ba5f6ad77c420d9b1e8 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Tue, 22 Jul 2025 23:39:56 +0200
Subject: [PATCH] Add addMask method to MaskTool for overlaying masks

Introduces the addMask method to MaskTool in both JS and TS implementations, allowing new masks to be overlaid without clearing existing ones. Updates CanvasView to use addMask instead of setMask when applying SAM detector results.
---
 js/CanvasView.js  |  6 +++---
 js/MaskTool.js    | 12 ++++++++++++
 src/CanvasView.ts |  6 +++---
 src/MaskTool.ts   | 15 +++++++++++++++
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/js/CanvasView.js b/js/CanvasView.js
index 45e5255..987aec9 100644
--- a/js/CanvasView.js
+++ b/js/CanvasView.js
@@ -1056,9 +1056,9 @@ async function handleSAMDetectorResult(node, resultImage) {
             });
             throw new Error("Mask tool not available or not initialized");
         }
-        log.debug("Applying SAM mask to canvas using setMask method");
-        // Use the setMask method which handles positioning automatically
-        canvas.maskTool.setMask(maskAsImage);
+        log.debug("Applying SAM mask to canvas using addMask method");
+        // Use the addMask method which overlays on existing mask without clearing it
+        canvas.maskTool.addMask(maskAsImage);
         // Update canvas and save state (same as CanvasMask)
         canvas.render();
         canvas.saveState();
diff --git a/js/MaskTool.js b/js/MaskTool.js
index 9bbfa56..250f7a3 100644
--- a/js/MaskTool.js
+++ b/js/MaskTool.js
@@ -258,4 +258,16 @@ export class MaskTool {
         this.canvasInstance.render();
         log.info(`MaskTool updated with a new mask image at correct canvas position (${destX}, ${destY}).`);
     }
+    addMask(image) {
+        const destX = -this.x;
+        const destY = -this.y;
+        // Don't clear existing mask - just add to it
+        this.maskCtx.globalCompositeOperation = 'source-over';
+        this.maskCtx.drawImage(image, destX, destY);
+        if (this.onStateChange) {
+            this.onStateChange();
+        }
+        this.canvasInstance.render();
+        log.info(`MaskTool added mask overlay at correct canvas position (${destX}, ${destY}) without clearing existing mask.`);
+    }
 }
diff --git a/src/CanvasView.ts b/src/CanvasView.ts
index 5594e0c..a7cdb41 100644
--- a/src/CanvasView.ts
+++ b/src/CanvasView.ts
@@ -1170,10 +1170,10 @@ async function handleSAMDetectorResult(node: ComfyNode, resultImage: HTMLImageEl
             throw new Error("Mask tool not available or not initialized");
         }
 
-        log.debug("Applying SAM mask to canvas using setMask method");
+        log.debug("Applying SAM mask to canvas using addMask method");
 
-        // Use the setMask method which handles positioning automatically
-        canvas.maskTool.setMask(maskAsImage);
+        // Use the addMask method which overlays on existing mask without clearing it
+        canvas.maskTool.addMask(maskAsImage);
 
         // Update canvas and save state (same as CanvasMask)
         canvas.render();
diff --git a/src/MaskTool.ts b/src/MaskTool.ts
index 0cf44db..d0b481c 100644
--- a/src/MaskTool.ts
+++ b/src/MaskTool.ts
@@ -336,4 +336,19 @@ export class MaskTool {
         this.canvasInstance.render();
         log.info(`MaskTool updated with a new mask image at correct canvas position (${destX}, ${destY}).`);
     }
+
+    addMask(image: HTMLImageElement): void {
+        const destX = -this.x;
+        const destY = -this.y;
+
+        // Don't clear existing mask - just add to it
+        this.maskCtx.globalCompositeOperation = 'source-over';
+        this.maskCtx.drawImage(image, destX, destY);
+
+        if (this.onStateChange) {
+            this.onStateChange();
+        }
+        this.canvasInstance.render();
+        log.info(`MaskTool added mask overlay at correct canvas position (${destX}, ${destY}) without clearing existing mask.`);
+    }
 }