Show placeholder image when preview is disabled

When the preview is disabled in the canvas widget, a 1x1 transparent PNG placeholder image is now set to node.imgs. This prevents issues with missing images and ensures consistent UI behavior.

.github/workflows/publish.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - main
-      - master
     paths:
       - "pyproject.toml"
 
@@ -19,10 +18,8 @@ jobs:
     steps:
       - name: Check out code
         uses: actions/checkout@v4
-        with:
-          submodules: true
       - name: Publish Custom Node
-        uses: Comfy-Org/publish-node-action@v1
+        uses: Comfy-Org/publish-node-action@main
         with:
           ## Add your own personal access token to your Github Repository secrets and reference it here.
           personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}

.github/workflows/release.yml

@@ -35,32 +35,31 @@ jobs:
         run: |
           echo "final_tag=v${{ steps.version.outputs.base_version }}" >> $GITHUB_OUTPUT
 
-      # ZMIANA: Zamiast tylko ostatniego commita, pobierz historię commitów od ostatniego tagu
+      # ZMIANA: Poprawione obsługa multi-line output (z delimiterem EOF, bez zastępowania \n)
       - name: Get commit history since last tag
         id: commit_history
         run: |
-          # Znajdź ostatni tag (jeśli istnieje)
           LAST_TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
           
-          # Jeśli nie ma ostatniego tagu, użyj pustego (pobierz od początku repo)
           if [ -z "$LAST_TAG" ]; then
             RANGE="HEAD"
           else
             RANGE="$LAST_TAG..HEAD"
           fi
-          
-          # Pobierz listę commitów (tylko subject/tytuł, format: - Commit message)
-          HISTORY=$(git log --pretty=format:"- %s" $RANGE)
-          
-          # Zastąp nowe linie na \\n, aby dobrze wyglądało w output
-          HISTORY=${HISTORY//$'\n'/\\n}
-          
-          # Jeśli brak commitów, ustaw domyślną wiadomość
+
+          # Pobierz listę commitów i przefiltruj tylko te znaczące
+          HISTORY=$(git log --pretty=format:"%s" $RANGE | \
+            grep -vE '^\s*(add|update|fix|change|edit|mod|modify|cleanup|misc|typo|readme|temp|test|debug)\b' | \
+            grep -vE '^(\s*Update|Add|Fix|Change|Edit|Refactor|Bump|Minor|Misc|Readme|Test)[^a-zA-Z0-9]*$' | \
+            sed 's/^/- /')
+
           if [ -z "$HISTORY" ]; then
-            HISTORY="No changes since last release."
+            HISTORY="No significant changes since last release."
           fi
-          
-          echo "commit_history=$HISTORY" >> $GITHUB_OUTPUT
+
+          echo "commit_history<<EOF" >> $GITHUB_OUTPUT
+          echo "$HISTORY" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Create GitHub Release
         uses: softprops/action-gh-release@v1

js/Canvas.js

@@ -54,7 +54,8 @@ export class Canvas {
         };
         this.offscreenCanvas = document.createElement('canvas');
         this.offscreenCtx = this.offscreenCanvas.getContext('2d', {
-            alpha: false
+            alpha: false,
+            willReadFrequently: true
         });
         this.dataInitialized = false;
         this.pendingDataCheck = null;

js/CanvasInteractions.js

@@ -31,6 +31,8 @@ export class CanvasInteractions {
         this.canvas.canvas.addEventListener('wheel', this.handleWheel.bind(this), { passive: false });
         this.canvas.canvas.addEventListener('keydown', this.handleKeyDown.bind(this));
         this.canvas.canvas.addEventListener('keyup', this.handleKeyUp.bind(this));
+        // Add a blur event listener to the window to reset key states
+        window.addEventListener('blur', this.handleBlur.bind(this));
         document.addEventListener('paste', this.handlePasteEvent.bind(this));
         this.canvas.canvas.addEventListener('mouseenter', (e) => {
             this.canvas.isMouseOver = true;
@@ -373,6 +375,23 @@ export class CanvasInteractions {
             this.interaction.keyMovementInProgress = false;
         }
     }
+    handleBlur() {
+        log.debug('Window lost focus, resetting key states.');
+        this.interaction.isCtrlPressed = false;
+        this.interaction.isAltPressed = false;
+        this.interaction.keyMovementInProgress = false;
+        // Also reset any interaction that relies on a key being held down
+        if (this.interaction.mode === 'dragging' && this.interaction.hasClonedInDrag) {
+            // If we were in the middle of a cloning drag, finalize it
+            this.canvas.saveState();
+            this.canvas.canvasState.saveStateToDB();
+        }
+        // Reset interaction mode if it's something that can get "stuck"
+        if (this.interaction.mode !== 'none' && this.interaction.mode !== 'drawingMask') {
+            this.resetInteractionState();
+            this.canvas.render();
+        }
+    }
     updateCursor(worldCoords) {
         const transformTarget = this.canvas.canvasLayers.getHandleAtPosition(worldCoords.x, worldCoords.y);
         if (transformTarget) {

js/CanvasLayers.js

@@ -352,7 +352,7 @@ export class CanvasLayers {
     async getLayerImageData(layer) {
         try {
             const tempCanvas = document.createElement('canvas');
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx)
                 throw new Error("Could not create canvas context");
             tempCanvas.width = layer.width;
@@ -593,7 +593,7 @@ export class CanvasLayers {
             const tempCanvas = document.createElement('canvas');
             tempCanvas.width = this.canvas.width;
             tempCanvas.height = this.canvas.height;
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx) {
                 reject(new Error("Could not create canvas context"));
                 return;
@@ -606,7 +606,7 @@ export class CanvasLayers {
                 const tempMaskCanvas = document.createElement('canvas');
                 tempMaskCanvas.width = this.canvas.width;
                 tempMaskCanvas.height = this.canvas.height;
-                const tempMaskCtx = tempMaskCanvas.getContext('2d');
+                const tempMaskCtx = tempMaskCanvas.getContext('2d', { willReadFrequently: true });
                 if (!tempMaskCtx) {
                     reject(new Error("Could not create mask canvas context"));
                     return;
@@ -655,7 +655,7 @@ export class CanvasLayers {
             const tempCanvas = document.createElement('canvas');
             tempCanvas.width = this.canvas.width;
             tempCanvas.height = this.canvas.height;
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx) {
                 reject(new Error("Could not create canvas context"));
                 return;
@@ -712,7 +712,7 @@ export class CanvasLayers {
             const tempCanvas = document.createElement('canvas');
             tempCanvas.width = newWidth;
             tempCanvas.height = newHeight;
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx) {
                 reject(new Error("Could not create canvas context"));
                 return;
@@ -766,7 +766,7 @@ export class CanvasLayers {
             const tempCanvas = document.createElement('canvas');
             tempCanvas.width = fusedWidth;
             tempCanvas.height = fusedHeight;
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx)
                 throw new Error("Could not create canvas context");
             tempCtx.translate(-minX, -minY);

js/CanvasView.js

@@ -7,6 +7,7 @@ import { Canvas } from "./Canvas.js";
 import { clearAllCanvasStates } from "./db.js";
 import { ImageCache } from "./ImageCache.js";
 import { createModuleLogger } from "./utils/LoggerUtils.js";
+import { setupSAMDetectorHook } from "./SAMDetectorIntegration.js";
 const log = createModuleLogger('Canvas_view');
 async function createCanvasWidget(node, widget, app) {
     const canvas = new Canvas(node, widget, {
@@ -530,27 +531,78 @@ async function createCanvasWidget(node, widget, app) {
     };
     updateButtonStates();
     canvas.updateHistoryButtons();
+    // Debounce timer for updateOutput to prevent excessive updates
+    let updateOutputTimer = null;
     const updateOutput = async (node, canvas) => {
+        // Check if preview is disabled - if so, skip updateOutput entirely
+        const showPreviewWidget = node.widgets.find((w) => w.name === "show_preview");
+        if (showPreviewWidget && !showPreviewWidget.value) {
+            log.debug("Preview disabled, skipping updateOutput");
+            const PLACEHOLDER_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+            const placeholder = new Image();
+            placeholder.src = PLACEHOLDER_IMAGE;
+            node.imgs = [placeholder];
+            return;
+        }
         const triggerWidget = node.widgets.find((w) => w.name === "trigger");
         if (triggerWidget) {
             triggerWidget.value = (triggerWidget.value + 1) % 99999999;
         }
-        try {
-            const new_preview = new Image();
-            const blob = await canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
-            if (blob) {
-                new_preview.src = URL.createObjectURL(blob);
-                await new Promise(r => new_preview.onload = r);
-                node.imgs = [new_preview];
-            }
-            else {
-                node.imgs = [];
-            }
-        }
-        catch (error) {
-            console.error("Error updating node preview:", error);
+        // Clear previous timer
+        if (updateOutputTimer) {
+            clearTimeout(updateOutputTimer);
         }
+        // Debounce the update to prevent excessive processing during rapid changes
+        updateOutputTimer = setTimeout(async () => {
+            try {
+                const blob = await canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
+                if (blob) {
+                    // For large images, use blob URL for better performance
+                    if (blob.size > 2 * 1024 * 1024) { // 2MB threshold
+                        const blobUrl = URL.createObjectURL(blob);
+                        const img = new Image();
+                        img.onload = () => {
+                            node.imgs = [img];
+                            log.debug(`Using blob URL for large image (${(blob.size / 1024 / 1024).toFixed(1)}MB): ${blobUrl.substring(0, 50)}...`);
+                            // Clean up old blob URLs to prevent memory leaks
+                            if (node.imgs.length > 1) {
+                                const oldImg = node.imgs[0];
+                                if (oldImg.src.startsWith('blob:')) {
+                                    URL.revokeObjectURL(oldImg.src);
+                                }
+                            }
+                        };
+                        img.src = blobUrl;
+                    }
+                    else {
+                        // For smaller images, use data URI as before
+                        const reader = new FileReader();
+                        reader.onload = () => {
+                            const dataUrl = reader.result;
+                            const img = new Image();
+                            img.onload = () => {
+                                node.imgs = [img];
+                                log.debug(`Using data URI for small image (${(blob.size / 1024).toFixed(1)}KB): ${dataUrl.substring(0, 50)}...`);
+                            };
+                            img.src = dataUrl;
+                        };
+                        reader.readAsDataURL(blob);
+                    }
+                }
+                else {
+                    node.imgs = [];
+                }
+            }
+            catch (error) {
+                console.error("Error updating node preview:", error);
+            }
+        }, 250); // 150ms debounce delay
     };
+    // Store previous temp filenames for cleanup (make it globally accessible)
+    if (!window.layerForgeTempFileTracker) {
+        window.layerForgeTempFileTracker = new Map();
+    }
+    const tempFileTracker = window.layerForgeTempFileTracker;
     const layersPanel = canvas.canvasLayersPanel.createPanelStructure();
     const canvasContainer = $el("div.painterCanvasContainer.painter-container", {
         style: {
@@ -798,6 +850,13 @@ app.registerExtension({
             const onRemoved = nodeType.prototype.onRemoved;
             nodeType.prototype.onRemoved = function () {
                 log.info(`Cleaning up canvas node ${this.id}`);
+                // Clean up temp file tracker for this node (just remove from tracker)
+                const nodeKey = `node-${this.id}`;
+                const tempFileTracker = window.layerForgeTempFileTracker;
+                if (tempFileTracker && tempFileTracker.has(nodeKey)) {
+                    tempFileTracker.delete(nodeKey);
+                    log.debug(`Removed temp file tracker for node ${this.id}`);
+                }
                 canvasNodeInstances.delete(this.id);
                 log.info(`Deregistered CanvasNode instance for ID: ${this.id}`);
                 if (window.canvasExecutionStates) {
@@ -818,12 +877,81 @@ app.registerExtension({
             };
             const originalGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
             nodeType.prototype.getExtraMenuOptions = function (_, options) {
+                // FIRST: Call original to let other extensions add their options
                 originalGetExtraMenuOptions?.apply(this, arguments);
                 const self = this;
+                // Debug: Log all menu options AFTER other extensions have added theirs
+                log.info("Available menu options AFTER original call:", options.map((opt, idx) => ({
+                    index: idx,
+                    content: opt?.content,
+                    hasCallback: !!opt?.callback
+                })));
+                // Debug: Check node data to see what Impact Pack sees
+                const nodeData = self.constructor.nodeData || {};
+                log.info("Node data for Impact Pack check:", {
+                    output: nodeData.output,
+                    outputType: typeof nodeData.output,
+                    isArray: Array.isArray(nodeData.output),
+                    nodeType: self.type,
+                    comfyClass: self.comfyClass
+                });
+                // Additional debug: Check if any option contains common Impact Pack keywords
+                const impactOptions = options.filter((opt, idx) => {
+                    if (!opt || !opt.content)
+                        return false;
+                    const content = opt.content.toLowerCase();
+                    return content.includes('impact') ||
+                        content.includes('sam') ||
+                        content.includes('detector') ||
+                        content.includes('segment') ||
+                        content.includes('mask') ||
+                        content.includes('open in');
+                });
+                if (impactOptions.length > 0) {
+                    log.info("Found potential Impact Pack options:", impactOptions.map(opt => opt.content));
+                }
+                else {
+                    log.info("No Impact Pack-related options found in menu");
+                }
+                // Debug: Check if Impact Pack extension is loaded
+                const impactExtensions = app.extensions.filter((ext) => ext.name && ext.name.toLowerCase().includes('impact'));
+                log.info("Impact Pack extensions found:", impactExtensions.map((ext) => ext.name));
+                // Debug: Check menu options again after a delay to see if Impact Pack adds options later
+                setTimeout(() => {
+                    log.info("Menu options after 100ms delay:", options.map((opt, idx) => ({
+                        index: idx,
+                        content: opt?.content,
+                        hasCallback: !!opt?.callback
+                    })));
+                    // Try to find SAM Detector again
+                    const delayedSamDetectorIndex = options.findIndex((option) => option && option.content && (option.content.includes("SAM Detector") ||
+                        option.content.includes("SAM") ||
+                        option.content.includes("Detector") ||
+                        option.content.toLowerCase().includes("sam") ||
+                        option.content.toLowerCase().includes("detector")));
+                    if (delayedSamDetectorIndex !== -1) {
+                        log.info(`Found SAM Detector after delay at index ${delayedSamDetectorIndex}: "${options[delayedSamDetectorIndex].content}"`);
+                    }
+                    else {
+                        log.info("SAM Detector still not found after delay");
+                    }
+                }, 100);
+                // Debug: Let's also check what the Impact Pack extension actually does
+                const samExtension = app.extensions.find((ext) => ext.name === 'Comfy.Impact.SAMEditor');
+                if (samExtension) {
+                    log.info("SAM Extension details:", {
+                        name: samExtension.name,
+                        hasBeforeRegisterNodeDef: !!samExtension.beforeRegisterNodeDef,
+                        hasInit: !!samExtension.init
+                    });
+                }
+                // Remove our old MaskEditor if it exists
                 const maskEditorIndex = options.findIndex((option) => option && option.content === "Open in MaskEditor");
                 if (maskEditorIndex !== -1) {
                     options.splice(maskEditorIndex, 1);
                 }
+                // Hook into "Open in SAM Detector" using the new integration module
+                setupSAMDetectorHook(self, options);
                 const newOptions = [
                     {
                         content: "Open in MaskEditor",

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.`);
+    }
 }

js/SAMDetectorIntegration.js

@@ -0,0 +1,486 @@
+import { api } from "../../scripts/api.js";
+// @ts-ignore
+import { ComfyApp } from "../../scripts/app.js";
+import { createModuleLogger } from "./utils/LoggerUtils.js";
+const log = createModuleLogger('SAMDetectorIntegration');
+/**
+ * SAM Detector Integration for LayerForge
+ * Handles automatic clipspace integration and mask application from Impact Pack's SAM Detector
+ */
+// Function to register image in clipspace for Impact Pack compatibility
+export const registerImageInClipspace = async (node, blob) => {
+    try {
+        // Upload the image to ComfyUI's temp storage for clipspace access
+        const formData = new FormData();
+        const filename = `layerforge-sam-${node.id}-${Date.now()}.png`; // Use timestamp for SAM Detector
+        formData.append("image", blob, filename);
+        formData.append("overwrite", "true");
+        formData.append("type", "temp");
+        const response = await api.fetchApi("/upload/image", {
+            method: "POST",
+            body: formData,
+        });
+        if (response.ok) {
+            const data = await response.json();
+            // Create a proper image element with the server URL
+            const clipspaceImg = new Image();
+            clipspaceImg.src = api.apiURL(`/view?filename=${encodeURIComponent(data.name)}&type=${data.type}&subfolder=${data.subfolder}`);
+            // Wait for image to load
+            await new Promise((resolve, reject) => {
+                clipspaceImg.onload = resolve;
+                clipspaceImg.onerror = reject;
+            });
+            log.debug(`Image registered in clipspace for node ${node.id}: ${filename}`);
+            return clipspaceImg;
+        }
+    }
+    catch (error) {
+        log.debug("Failed to register image in clipspace:", error);
+    }
+    return null;
+};
+// Function to monitor for SAM Detector modal closure and apply masks to LayerForge
+export function startSAMDetectorMonitoring(node) {
+    if (node.samMonitoringActive) {
+        log.debug("SAM Detector monitoring already active for node", node.id);
+        return;
+    }
+    node.samMonitoringActive = true;
+    log.info("Starting SAM Detector modal monitoring for node", node.id);
+    // Store original image source for comparison
+    const originalImgSrc = node.imgs?.[0]?.src;
+    node.samOriginalImgSrc = originalImgSrc;
+    // Start monitoring for SAM Detector modal closure
+    monitorSAMDetectorModal(node);
+}
+// Function to monitor SAM Detector modal closure
+function monitorSAMDetectorModal(node) {
+    log.info("Starting SAM Detector modal monitoring for node", node.id);
+    // Try to find modal multiple times with increasing delays
+    let attempts = 0;
+    const maxAttempts = 10; // Try for 5 seconds total
+    const findModal = () => {
+        attempts++;
+        log.debug(`Looking for SAM Detector modal, attempt ${attempts}/${maxAttempts}`);
+        // Look for SAM Detector specific elements instead of generic modal
+        const samCanvas = document.querySelector('#samEditorMaskCanvas');
+        const pointsCanvas = document.querySelector('#pointsCanvas');
+        const imageCanvas = document.querySelector('#imageCanvas');
+        // Debug: Log SAM specific elements
+        log.debug(`SAM specific elements found:`, {
+            samCanvas: !!samCanvas,
+            pointsCanvas: !!pointsCanvas,
+            imageCanvas: !!imageCanvas
+        });
+        // Find the modal that contains SAM Detector elements
+        let modal = null;
+        if (samCanvas || pointsCanvas || imageCanvas) {
+            // Find the parent modal of SAM elements
+            const samElement = samCanvas || pointsCanvas || imageCanvas;
+            let parent = samElement?.parentElement;
+            while (parent && !parent.classList.contains('comfy-modal')) {
+                parent = parent.parentElement;
+            }
+            modal = parent;
+        }
+        if (!modal) {
+            if (attempts < maxAttempts) {
+                log.debug(`SAM Detector modal not found on attempt ${attempts}, retrying in 500ms...`);
+                setTimeout(findModal, 500);
+                return;
+            }
+            else {
+                log.warn("SAM Detector modal not found after all attempts, falling back to polling");
+                // Fallback to old polling method if modal not found
+                monitorSAMDetectorChanges(node);
+                return;
+            }
+        }
+        log.info("Found SAM Detector modal, setting up observers", {
+            className: modal.className,
+            id: modal.id,
+            display: window.getComputedStyle(modal).display,
+            children: modal.children.length,
+            hasSamCanvas: !!modal.querySelector('#samEditorMaskCanvas'),
+            hasPointsCanvas: !!modal.querySelector('#pointsCanvas'),
+            hasImageCanvas: !!modal.querySelector('#imageCanvas')
+        });
+        // Create a MutationObserver to watch for modal removal or style changes
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                // Check if the modal was removed from DOM
+                if (mutation.type === 'childList') {
+                    mutation.removedNodes.forEach((removedNode) => {
+                        if (removedNode === modal || removedNode?.contains?.(modal)) {
+                            log.info("SAM Detector modal removed from DOM");
+                            handleSAMDetectorModalClosed(node);
+                            observer.disconnect();
+                        }
+                    });
+                }
+                // Check if modal style changed to hidden
+                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                    const target = mutation.target;
+                    if (target === modal) {
+                        const display = window.getComputedStyle(modal).display;
+                        if (display === 'none') {
+                            log.info("SAM Detector modal hidden via style");
+                            // Add delay to allow SAM Detector to process and save the mask
+                            setTimeout(() => {
+                                handleSAMDetectorModalClosed(node);
+                            }, 1000); // 1 second delay
+                            observer.disconnect();
+                        }
+                    }
+                }
+            });
+        });
+        // Observe the document body for child removals (modal removal)
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['style']
+        });
+        // Also observe the modal itself for style changes
+        observer.observe(modal, {
+            attributes: true,
+            attributeFilter: ['style']
+        });
+        // Store observer reference for cleanup
+        node.samModalObserver = observer;
+        // Fallback timeout in case observer doesn't catch the closure
+        setTimeout(() => {
+            if (node.samMonitoringActive) {
+                log.debug("SAM Detector modal monitoring timeout, cleaning up");
+                observer.disconnect();
+                node.samMonitoringActive = false;
+            }
+        }, 60000); // 1 minute timeout
+        log.info("SAM Detector modal observers set up successfully");
+    };
+    // Start the modal finding process
+    findModal();
+}
+// Function to handle SAM Detector modal closure
+function handleSAMDetectorModalClosed(node) {
+    if (!node.samMonitoringActive) {
+        log.debug("SAM monitoring already inactive for node", node.id);
+        return;
+    }
+    log.info("SAM Detector modal closed for node", node.id);
+    node.samMonitoringActive = false;
+    // Clean up observer
+    if (node.samModalObserver) {
+        node.samModalObserver.disconnect();
+        delete node.samModalObserver;
+    }
+    // Check if there's a new image to process
+    if (node.imgs && node.imgs.length > 0) {
+        const currentImgSrc = node.imgs[0].src;
+        const originalImgSrc = node.samOriginalImgSrc;
+        if (currentImgSrc && currentImgSrc !== originalImgSrc) {
+            log.info("SAM Detector result detected after modal closure, processing mask...");
+            handleSAMDetectorResult(node, node.imgs[0]);
+        }
+        else {
+            log.info("No new image detected after SAM Detector modal closure");
+            // Show info notification
+            showNotification("SAM Detector closed. No mask was applied.", "#4a6cd4", 3000);
+        }
+    }
+    else {
+        log.info("No image available after SAM Detector modal closure");
+    }
+    // Clean up stored references
+    delete node.samOriginalImgSrc;
+}
+// Fallback function to monitor changes in node.imgs (old polling approach)
+function monitorSAMDetectorChanges(node) {
+    let checkCount = 0;
+    const maxChecks = 300; // 30 seconds maximum monitoring
+    const checkForChanges = () => {
+        checkCount++;
+        if (!(node.samMonitoringActive)) {
+            log.debug("SAM monitoring stopped for node", node.id);
+            return;
+        }
+        log.debug(`SAM monitoring check ${checkCount}/${maxChecks} for node ${node.id}`);
+        // Check if the node's image has been updated (this happens when "Save to node" is clicked)
+        if (node.imgs && node.imgs.length > 0) {
+            const currentImgSrc = node.imgs[0].src;
+            const originalImgSrc = node.samOriginalImgSrc;
+            if (currentImgSrc && currentImgSrc !== originalImgSrc) {
+                log.info("SAM Detector result detected in node.imgs, processing mask...");
+                handleSAMDetectorResult(node, node.imgs[0]);
+                node.samMonitoringActive = false;
+                return;
+            }
+        }
+        // Continue monitoring if not exceeded max checks
+        if (checkCount < maxChecks && node.samMonitoringActive) {
+            setTimeout(checkForChanges, 100);
+        }
+        else {
+            log.debug("SAM Detector monitoring timeout or stopped for node", node.id);
+            node.samMonitoringActive = false;
+        }
+    };
+    // Start monitoring after a short delay
+    setTimeout(checkForChanges, 500);
+}
+// Function to handle SAM Detector result (using same logic as CanvasMask.handleMaskEditorClose)
+async function handleSAMDetectorResult(node, resultImage) {
+    try {
+        log.info("Handling SAM Detector result for node", node.id);
+        log.debug("Result image source:", resultImage.src.substring(0, 100) + '...');
+        const canvasWidget = node.canvasWidget;
+        if (!canvasWidget || !canvasWidget.canvas) {
+            log.error("Canvas widget not available for SAM result processing");
+            return;
+        }
+        const canvas = canvasWidget; // canvasWidget is the Canvas object, not canvasWidget.canvas
+        // Wait for the result image to load (same as CanvasMask)
+        try {
+            // First check if the image is already loaded
+            if (resultImage.complete && resultImage.naturalWidth > 0) {
+                log.debug("SAM result image already loaded", {
+                    width: resultImage.width,
+                    height: resultImage.height
+                });
+            }
+            else {
+                // Try to reload the image with a fresh request
+                log.debug("Attempting to reload SAM result image");
+                const originalSrc = resultImage.src;
+                // Add cache-busting parameter to force fresh load
+                const url = new URL(originalSrc);
+                url.searchParams.set('_t', Date.now().toString());
+                await new Promise((resolve, reject) => {
+                    const img = new Image();
+                    img.crossOrigin = "anonymous";
+                    img.onload = () => {
+                        // Copy the loaded image data to the original image
+                        resultImage.src = img.src;
+                        resultImage.width = img.width;
+                        resultImage.height = img.height;
+                        log.debug("SAM result image reloaded successfully", {
+                            width: img.width,
+                            height: img.height,
+                            originalSrc: originalSrc,
+                            newSrc: img.src
+                        });
+                        resolve(img);
+                    };
+                    img.onerror = (error) => {
+                        log.error("Failed to reload SAM result image", {
+                            originalSrc: originalSrc,
+                            newSrc: url.toString(),
+                            error: error
+                        });
+                        reject(error);
+                    };
+                    img.src = url.toString();
+                });
+            }
+        }
+        catch (error) {
+            log.error("Failed to load image from SAM Detector.", error);
+            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)
+        log.debug("Creating temporary canvas for mask processing");
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = canvas.width;
+        tempCanvas.height = canvas.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);
+            const data = imageData.data;
+            // Convert to mask format (same as CanvasMask)
+            for (let i = 0; i < data.length; i += 4) {
+                const originalAlpha = data[i + 3];
+                data[i] = 255;
+                data[i + 1] = 255;
+                data[i + 2] = 255;
+                data[i + 3] = 255 - originalAlpha;
+            }
+            tempCtx.putImageData(imageData, 0, 0);
+        }
+        // Convert processed mask to image (same as CanvasMask)
+        log.debug("Converting processed mask to image");
+        const maskAsImage = new Image();
+        maskAsImage.src = tempCanvas.toDataURL();
+        await new Promise(resolve => maskAsImage.onload = resolve);
+        // Apply mask to LayerForge canvas using MaskTool.setMask method
+        log.debug("Checking canvas and maskTool availability", {
+            hasCanvas: !!canvas,
+            hasMaskTool: !!canvas.maskTool,
+            maskToolType: typeof canvas.maskTool,
+            canvasKeys: Object.keys(canvas)
+        });
+        if (!canvas.maskTool) {
+            log.error("MaskTool is not available. Canvas state:", {
+                hasCanvas: !!canvas,
+                canvasConstructor: canvas.constructor.name,
+                canvasKeys: Object.keys(canvas),
+                maskToolValue: canvas.maskTool
+            });
+            throw new Error("Mask tool not available or not initialized");
+        }
+        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();
+        // Create new preview image (same as CanvasMask)
+        log.debug("Creating new preview image");
+        const new_preview = new Image();
+        const blob = await canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
+        if (blob) {
+            new_preview.src = URL.createObjectURL(blob);
+            await new Promise(r => new_preview.onload = r);
+            node.imgs = [new_preview];
+            log.debug("New preview image created successfully");
+        }
+        else {
+            log.warn("Failed to create preview blob");
+        }
+        canvas.render();
+        log.info("SAM Detector mask applied successfully to LayerForge canvas");
+        // Show success notification
+        showNotification("SAM Detector mask applied to LayerForge!", "#4a7c59", 3000);
+    }
+    catch (error) {
+        log.error("Error processing SAM Detector result:", error);
+        // Show error notification
+        showNotification(`Failed to apply SAM mask: ${error.message}`, "#c54747", 5000);
+    }
+    finally {
+        node.samMonitoringActive = false;
+        node.samOriginalImgSrc = null;
+    }
+}
+// Helper function to show notifications
+function showNotification(message, backgroundColor, duration) {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: ${backgroundColor};
+        color: white;
+        padding: 12px 16px;
+        border-radius: 4px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        z-index: 10001;
+        font-size: 14px;
+    `;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+    setTimeout(() => {
+        if (notification.parentNode) {
+            notification.parentNode.removeChild(notification);
+        }
+    }, duration);
+}
+// Function to setup SAM Detector hook in menu options
+export function setupSAMDetectorHook(node, options) {
+    // Hook into "Open in SAM Detector" with delay since Impact Pack adds it asynchronously
+    const hookSAMDetector = () => {
+        const samDetectorIndex = options.findIndex((option) => option && option.content && (option.content.includes("SAM Detector") ||
+            option.content === "Open in SAM Detector"));
+        if (samDetectorIndex !== -1) {
+            log.info(`Found SAM Detector menu item at index ${samDetectorIndex}: "${options[samDetectorIndex].content}"`);
+            const originalSamCallback = options[samDetectorIndex].callback;
+            options[samDetectorIndex].callback = async () => {
+                try {
+                    log.info("Intercepted 'Open in SAM Detector' - automatically sending to clipspace and starting monitoring");
+                    // Automatically send canvas to clipspace and start monitoring
+                    if (node.canvasWidget && node.canvasWidget.canvas) {
+                        const canvas = node.canvasWidget; // canvasWidget IS the Canvas object
+                        // Get the flattened canvas as blob
+                        const blob = await canvas.canvasLayers.getFlattenedCanvasAsBlob();
+                        if (!blob) {
+                            throw new Error("Failed to generate canvas blob");
+                        }
+                        // Upload the image to ComfyUI's temp storage
+                        const formData = new FormData();
+                        const filename = `layerforge-sam-${node.id}-${Date.now()}.png`; // Unique filename with timestamp
+                        formData.append("image", blob, filename);
+                        formData.append("overwrite", "true");
+                        formData.append("type", "temp");
+                        const response = await api.fetchApi("/upload/image", {
+                            method: "POST",
+                            body: formData,
+                        });
+                        if (!response.ok) {
+                            throw new Error(`Failed to upload image: ${response.statusText}`);
+                        }
+                        const data = await response.json();
+                        log.debug('Image uploaded for SAM Detector:', data);
+                        // Create image element with proper URL
+                        const img = new Image();
+                        img.crossOrigin = "anonymous"; // Add CORS support
+                        // Wait for image to load before setting src
+                        const imageLoadPromise = new Promise((resolve, reject) => {
+                            img.onload = () => {
+                                log.debug("SAM Detector image loaded successfully", {
+                                    width: img.width,
+                                    height: img.height,
+                                    src: img.src.substring(0, 100) + '...'
+                                });
+                                resolve(img);
+                            };
+                            img.onerror = (error) => {
+                                log.error("Failed to load SAM Detector image", error);
+                                reject(new Error("Failed to load uploaded image"));
+                            };
+                        });
+                        // Set src after setting up event handlers
+                        img.src = api.apiURL(`/view?filename=${encodeURIComponent(data.name)}&type=${data.type}&subfolder=${data.subfolder}`);
+                        // Wait for image to load
+                        await imageLoadPromise;
+                        // Set the image to the node for clipspace
+                        node.imgs = [img];
+                        node.clipspaceImg = img;
+                        // Copy to ComfyUI clipspace
+                        ComfyApp.copyToClipspace(node);
+                        // Start monitoring for SAM Detector results
+                        startSAMDetectorMonitoring(node);
+                        log.info("Canvas automatically sent to clipspace and monitoring started");
+                    }
+                    // Call the original SAM Detector callback
+                    if (originalSamCallback) {
+                        await originalSamCallback();
+                    }
+                }
+                catch (e) {
+                    log.error("Error in SAM Detector hook:", e);
+                    // Still try to call original callback
+                    if (originalSamCallback) {
+                        await originalSamCallback();
+                    }
+                }
+            };
+            return true; // Found and hooked
+        }
+        return false; // Not found
+    };
+    // Try to hook immediately
+    if (!hookSAMDetector()) {
+        // If not found immediately, try again after Impact Pack adds it
+        setTimeout(() => {
+            if (hookSAMDetector()) {
+                log.info("Successfully hooked SAM Detector after delay");
+            }
+            else {
+                log.debug("SAM Detector menu item not found even after delay");
+            }
+        }, 150); // Slightly longer delay to ensure Impact Pack has added it
+    }
+}

pyproject.toml

@@ -1,16 +1,14 @@
 [project]
 name = "layerforge"
 description = "Photoshop-like layered canvas editor to your ComfyUI workflow. This node is perfect for complex compositing, inpainting, and outpainting, featuring multi-layer support, masking, blend modes, and precise transformations. Includes optional AI-powered background removal for streamlined image editing."
-version = "1.3.8"
-license = {file = "LICENSE"}
+version = "1.4.0"
+license = { text = "MIT License" }
 dependencies = ["torch", "torchvision", "transformers", "aiohttp", "numpy", "tqdm", "Pillow"]
 
 [project.urls]
 Repository = "https://github.com/Azornes/Comfyui-LayerForge"
-#  Used by Comfy Registry https://registry.comfy.org
 
 [tool.comfy]
 PublisherId = "azornes"
 DisplayName = "Comfyui-LayerForge"
-Icon = ""
-includes = []
+Icon = ""

src/Canvas.ts

@@ -98,7 +98,8 @@ export class Canvas {
 
         this.offscreenCanvas = document.createElement('canvas');
         this.offscreenCtx = this.offscreenCanvas.getContext('2d', {
-            alpha: false
+            alpha: false,
+            willReadFrequently: true
         });
 
         this.dataInitialized = false;

src/CanvasInteractions.ts

@@ -59,6 +59,9 @@ export class CanvasInteractions {
         this.canvas.canvas.addEventListener('keydown', this.handleKeyDown.bind(this) as EventListener);
         this.canvas.canvas.addEventListener('keyup', this.handleKeyUp.bind(this) as EventListener);
 
+        // Add a blur event listener to the window to reset key states
+        window.addEventListener('blur', this.handleBlur.bind(this));
+
         document.addEventListener('paste', this.handlePasteEvent.bind(this));
 
         this.canvas.canvas.addEventListener('mouseenter', (e: MouseEvent) => {
@@ -426,6 +429,26 @@ export class CanvasInteractions {
         }
     }
 
+    handleBlur(): void {
+        log.debug('Window lost focus, resetting key states.');
+        this.interaction.isCtrlPressed = false;
+        this.interaction.isAltPressed = false;
+        this.interaction.keyMovementInProgress = false;
+
+        // Also reset any interaction that relies on a key being held down
+        if (this.interaction.mode === 'dragging' && this.interaction.hasClonedInDrag) {
+            // If we were in the middle of a cloning drag, finalize it
+            this.canvas.saveState();
+            this.canvas.canvasState.saveStateToDB();
+        }
+        
+        // Reset interaction mode if it's something that can get "stuck"
+        if (this.interaction.mode !== 'none' && this.interaction.mode !== 'drawingMask') {
+            this.resetInteractionState();
+            this.canvas.render();
+        }
+    }
+
     updateCursor(worldCoords: Point): void {
         const transformTarget = this.canvas.canvasLayers.getHandleAtPosition(worldCoords.x, worldCoords.y);
 

src/CanvasLayers.ts

@@ -410,7 +410,7 @@ export class CanvasLayers {
     async getLayerImageData(layer: Layer): Promise<string> {
         try {
             const tempCanvas = document.createElement('canvas');
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx) throw new Error("Could not create canvas context");
 
             tempCanvas.width = layer.width;
@@ -687,7 +687,7 @@ export class CanvasLayers {
             const tempCanvas = document.createElement('canvas');
             tempCanvas.width = this.canvas.width;
             tempCanvas.height = this.canvas.height;
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx) {
                 reject(new Error("Could not create canvas context"));
                 return;
@@ -703,7 +703,7 @@ export class CanvasLayers {
                 const tempMaskCanvas = document.createElement('canvas');
                 tempMaskCanvas.width = this.canvas.width;
                 tempMaskCanvas.height = this.canvas.height;
-                const tempMaskCtx = tempMaskCanvas.getContext('2d');
+                const tempMaskCtx = tempMaskCanvas.getContext('2d', { willReadFrequently: true });
                 if (!tempMaskCtx) {
                     reject(new Error("Could not create mask canvas context"));
                     return;
@@ -764,7 +764,7 @@ export class CanvasLayers {
             const tempCanvas = document.createElement('canvas');
             tempCanvas.width = this.canvas.width;
             tempCanvas.height = this.canvas.height;
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx) {
                 reject(new Error("Could not create canvas context"));
                 return;
@@ -831,7 +831,7 @@ export class CanvasLayers {
             const tempCanvas = document.createElement('canvas');
             tempCanvas.width = newWidth;
             tempCanvas.height = newHeight;
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx) {
                 reject(new Error("Could not create canvas context"));
                 return;
@@ -898,7 +898,7 @@ export class CanvasLayers {
             const tempCanvas = document.createElement('canvas');
             tempCanvas.width = fusedWidth;
             tempCanvas.height = fusedHeight;
-            const tempCtx = tempCanvas.getContext('2d');
+            const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
             if (!tempCtx) throw new Error("Could not create canvas context");
 
             tempCtx.translate(-minX, -minY);

src/CanvasView.ts

@@ -14,6 +14,7 @@ import {clearAllCanvasStates} from "./db.js";
 import {ImageCache} from "./ImageCache.js";
 import {generateUniqueFileName} from "./utils/CommonUtils.js";
 import {createModuleLogger} from "./utils/LoggerUtils.js";
+import { registerImageInClipspace, startSAMDetectorMonitoring, setupSAMDetectorHook } from "./SAMDetectorIntegration.js";
 import type { ComfyNode, Layer, AddMode } from './types';
 
 const log = createModuleLogger('Canvas_view');
@@ -568,27 +569,81 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
     updateButtonStates();
     canvas.updateHistoryButtons();
 
+    // Debounce timer for updateOutput to prevent excessive updates
+    let updateOutputTimer: NodeJS.Timeout | null = null;
+    
     const updateOutput = async (node: ComfyNode, canvas: Canvas) => {
+        // Check if preview is disabled - if so, skip updateOutput entirely
+        const showPreviewWidget = node.widgets.find((w) => w.name === "show_preview");
+        if (showPreviewWidget && !showPreviewWidget.value) {
+            log.debug("Preview disabled, skipping updateOutput");
+            const PLACEHOLDER_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+            const placeholder = new Image();
+            placeholder.src = PLACEHOLDER_IMAGE;
+            node.imgs = [placeholder];
+            return;
+        }
+
         const triggerWidget = node.widgets.find((w) => w.name === "trigger");
         if (triggerWidget) {
             triggerWidget.value = (triggerWidget.value + 1) % 99999999;
         }
 
-        try {
-            const new_preview = new Image();
-            const blob = await canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
-            if (blob) {
-                new_preview.src = URL.createObjectURL(blob);
-                await new Promise(r => new_preview.onload = r);
-                node.imgs = [new_preview];
-            } else {
-                node.imgs = [];
-            }
-        } catch (error) {
-            console.error("Error updating node preview:", error);
+        // Clear previous timer
+        if (updateOutputTimer) {
+            clearTimeout(updateOutputTimer);
         }
+
+        // Debounce the update to prevent excessive processing during rapid changes
+        updateOutputTimer = setTimeout(async () => {
+            try {
+                const blob = await canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
+                if (blob) {
+                    // For large images, use blob URL for better performance
+                    if (blob.size > 2 * 1024 * 1024) { // 2MB threshold
+                        const blobUrl = URL.createObjectURL(blob);
+                        const img = new Image();
+                        img.onload = () => {
+                            node.imgs = [img];
+                            log.debug(`Using blob URL for large image (${(blob.size / 1024 / 1024).toFixed(1)}MB): ${blobUrl.substring(0, 50)}...`);
+                            // Clean up old blob URLs to prevent memory leaks
+                            if (node.imgs.length > 1) {
+                                const oldImg = node.imgs[0];
+                                if (oldImg.src.startsWith('blob:')) {
+                                    URL.revokeObjectURL(oldImg.src);
+                                }
+                            }
+                        };
+                        img.src = blobUrl;
+                    } else {
+                        // For smaller images, use data URI as before
+                        const reader = new FileReader();
+                        reader.onload = () => {
+                            const dataUrl = reader.result as string;
+                            const img = new Image();
+                            img.onload = () => {
+                                node.imgs = [img];
+                                log.debug(`Using data URI for small image (${(blob.size / 1024).toFixed(1)}KB): ${dataUrl.substring(0, 50)}...`);
+                            };
+                            img.src = dataUrl;
+                        };
+                        reader.readAsDataURL(blob);
+                    }
+                } else {
+                    node.imgs = [];
+                }
+            } catch (error) {
+                console.error("Error updating node preview:", error);
+            }
+        }, 250); // 150ms debounce delay
     };
 
+    // Store previous temp filenames for cleanup (make it globally accessible)
+    if (!(window as any).layerForgeTempFileTracker) {
+        (window as any).layerForgeTempFileTracker = new Map<string, string>();
+    }
+    const tempFileTracker = (window as any).layerForgeTempFileTracker;
+
     const layersPanel = canvas.canvasLayersPanel.createPanelStructure();
 
     const canvasContainer = $el("div.painterCanvasContainer.painter-container", {
@@ -879,6 +934,14 @@ app.registerExtension({
             nodeType.prototype.onRemoved = function (this: ComfyNode) {
                 log.info(`Cleaning up canvas node ${this.id}`);
 
+                // Clean up temp file tracker for this node (just remove from tracker)
+                const nodeKey = `node-${this.id}`;
+                const tempFileTracker = (window as any).layerForgeTempFileTracker;
+                if (tempFileTracker && tempFileTracker.has(nodeKey)) {
+                    tempFileTracker.delete(nodeKey);
+                    log.debug(`Removed temp file tracker for node ${this.id}`);
+                }
+
                 canvasNodeInstances.delete(this.id);
                 log.info(`Deregistered CanvasNode instance for ID: ${this.id}`);
 
@@ -904,15 +967,97 @@ app.registerExtension({
 
             const originalGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
             nodeType.prototype.getExtraMenuOptions = function (this: ComfyNode, _: any, options: any[]) {
+                // FIRST: Call original to let other extensions add their options
                 originalGetExtraMenuOptions?.apply(this, arguments as any);
 
                 const self = this;
 
+                // Debug: Log all menu options AFTER other extensions have added theirs
+                log.info("Available menu options AFTER original call:", options.map((opt, idx) => ({
+                    index: idx,
+                    content: opt?.content,
+                    hasCallback: !!opt?.callback
+                })));
+
+                // Debug: Check node data to see what Impact Pack sees
+                const nodeData = (self as any).constructor.nodeData || {};
+                log.info("Node data for Impact Pack check:", {
+                    output: nodeData.output,
+                    outputType: typeof nodeData.output,
+                    isArray: Array.isArray(nodeData.output),
+                    nodeType: (self as any).type,
+                    comfyClass: (self as any).comfyClass
+                });
+
+                // Additional debug: Check if any option contains common Impact Pack keywords
+                const impactOptions = options.filter((opt, idx) => {
+                    if (!opt || !opt.content) return false;
+                    const content = opt.content.toLowerCase();
+                    return content.includes('impact') || 
+                           content.includes('sam') || 
+                           content.includes('detector') || 
+                           content.includes('segment') ||
+                           content.includes('mask') ||
+                           content.includes('open in');
+                });
+                
+                if (impactOptions.length > 0) {
+                    log.info("Found potential Impact Pack options:", impactOptions.map(opt => opt.content));
+                } else {
+                    log.info("No Impact Pack-related options found in menu");
+                }
+
+                // Debug: Check if Impact Pack extension is loaded
+                const impactExtensions = app.extensions.filter((ext: any) => 
+                    ext.name && ext.name.toLowerCase().includes('impact')
+                );
+                log.info("Impact Pack extensions found:", impactExtensions.map((ext: any) => ext.name));
+
+                // Debug: Check menu options again after a delay to see if Impact Pack adds options later
+                setTimeout(() => {
+                    log.info("Menu options after 100ms delay:", options.map((opt, idx) => ({
+                        index: idx,
+                        content: opt?.content,
+                        hasCallback: !!opt?.callback
+                    })));
+                    
+                    // Try to find SAM Detector again
+                    const delayedSamDetectorIndex = options.findIndex((option) => 
+                        option && option.content && (
+                            option.content.includes("SAM Detector") ||
+                            option.content.includes("SAM") ||
+                            option.content.includes("Detector") ||
+                            option.content.toLowerCase().includes("sam") ||
+                            option.content.toLowerCase().includes("detector")
+                        )
+                    );
+                    
+                    if (delayedSamDetectorIndex !== -1) {
+                        log.info(`Found SAM Detector after delay at index ${delayedSamDetectorIndex}: "${options[delayedSamDetectorIndex].content}"`);
+                    } else {
+                        log.info("SAM Detector still not found after delay");
+                    }
+                }, 100);
+
+                // Debug: Let's also check what the Impact Pack extension actually does
+                const samExtension = app.extensions.find((ext: any) => ext.name === 'Comfy.Impact.SAMEditor');
+                if (samExtension) {
+                    log.info("SAM Extension details:", {
+                        name: samExtension.name,
+                        hasBeforeRegisterNodeDef: !!samExtension.beforeRegisterNodeDef,
+                        hasInit: !!samExtension.init
+                    });
+                }
+
+                // Remove our old MaskEditor if it exists
                 const maskEditorIndex = options.findIndex((option) => option && option.content === "Open in MaskEditor");
                 if (maskEditorIndex !== -1) {
                     options.splice(maskEditorIndex, 1);
                 }
 
+                // Hook into "Open in SAM Detector" using the new integration module
+                setupSAMDetectorHook(self, options);
+
                 const newOptions = [
                     {
                         content: "Open in MaskEditor",

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.`);
+    }
 }

src/SAMDetectorIntegration.ts

@@ -0,0 +1,566 @@
+import { api } from "../../scripts/api.js";
+// @ts-ignore
+import { ComfyApp } from "../../scripts/app.js";
+import { createModuleLogger } from "./utils/LoggerUtils.js";
+import type { ComfyNode } from './types';
+
+const log = createModuleLogger('SAMDetectorIntegration');
+
+/**
+ * SAM Detector Integration for LayerForge
+ * Handles automatic clipspace integration and mask application from Impact Pack's SAM Detector
+ */
+
+// Function to register image in clipspace for Impact Pack compatibility
+export const registerImageInClipspace = async (node: ComfyNode, blob: Blob): Promise<HTMLImageElement | null> => {
+    try {
+        // Upload the image to ComfyUI's temp storage for clipspace access
+        const formData = new FormData();
+        const filename = `layerforge-sam-${node.id}-${Date.now()}.png`; // Use timestamp for SAM Detector
+        formData.append("image", blob, filename);
+        formData.append("overwrite", "true");
+        formData.append("type", "temp");
+
+        const response = await api.fetchApi("/upload/image", {
+            method: "POST",
+            body: formData,
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            
+            // Create a proper image element with the server URL
+            const clipspaceImg = new Image();
+            clipspaceImg.src = api.apiURL(`/view?filename=${encodeURIComponent(data.name)}&type=${data.type}&subfolder=${data.subfolder}`);
+            
+            // Wait for image to load
+            await new Promise((resolve, reject) => {
+                clipspaceImg.onload = resolve;
+                clipspaceImg.onerror = reject;
+            });
+
+            log.debug(`Image registered in clipspace for node ${node.id}: ${filename}`);
+            return clipspaceImg;
+        }
+    } catch (error) {
+        log.debug("Failed to register image in clipspace:", error);
+    }
+    return null;
+};
+
+// Function to monitor for SAM Detector modal closure and apply masks to LayerForge
+export function startSAMDetectorMonitoring(node: ComfyNode) {
+    if ((node as any).samMonitoringActive) {
+        log.debug("SAM Detector monitoring already active for node", node.id);
+        return;
+    }
+
+    (node as any).samMonitoringActive = true;
+    log.info("Starting SAM Detector modal monitoring for node", node.id);
+
+    // Store original image source for comparison
+    const originalImgSrc = node.imgs?.[0]?.src;
+    (node as any).samOriginalImgSrc = originalImgSrc;
+
+    // Start monitoring for SAM Detector modal closure
+    monitorSAMDetectorModal(node);
+}
+
+// Function to monitor SAM Detector modal closure
+function monitorSAMDetectorModal(node: ComfyNode) {
+    log.info("Starting SAM Detector modal monitoring for node", node.id);
+    
+    // Try to find modal multiple times with increasing delays
+    let attempts = 0;
+    const maxAttempts = 10; // Try for 5 seconds total
+    
+    const findModal = () => {
+        attempts++;
+        log.debug(`Looking for SAM Detector modal, attempt ${attempts}/${maxAttempts}`);
+        
+        // Look for SAM Detector specific elements instead of generic modal
+        const samCanvas = document.querySelector('#samEditorMaskCanvas') as HTMLElement;
+        const pointsCanvas = document.querySelector('#pointsCanvas') as HTMLElement;
+        const imageCanvas = document.querySelector('#imageCanvas') as HTMLElement;
+        
+        // Debug: Log SAM specific elements
+        log.debug(`SAM specific elements found:`, {
+            samCanvas: !!samCanvas,
+            pointsCanvas: !!pointsCanvas,
+            imageCanvas: !!imageCanvas
+        });
+        
+        // Find the modal that contains SAM Detector elements
+        let modal: HTMLElement | null = null;
+        if (samCanvas || pointsCanvas || imageCanvas) {
+            // Find the parent modal of SAM elements
+            const samElement = samCanvas || pointsCanvas || imageCanvas;
+            let parent = samElement?.parentElement;
+            while (parent && !parent.classList.contains('comfy-modal')) {
+                parent = parent.parentElement;
+            }
+            modal = parent;
+        }
+        
+        if (!modal) {
+            if (attempts < maxAttempts) {
+                log.debug(`SAM Detector modal not found on attempt ${attempts}, retrying in 500ms...`);
+                setTimeout(findModal, 500);
+                return;
+            } else {
+                log.warn("SAM Detector modal not found after all attempts, falling back to polling");
+                // Fallback to old polling method if modal not found
+                monitorSAMDetectorChanges(node);
+                return;
+            }
+        }
+
+        log.info("Found SAM Detector modal, setting up observers", {
+            className: modal.className,
+            id: modal.id,
+            display: window.getComputedStyle(modal).display,
+            children: modal.children.length,
+            hasSamCanvas: !!modal.querySelector('#samEditorMaskCanvas'),
+            hasPointsCanvas: !!modal.querySelector('#pointsCanvas'),
+            hasImageCanvas: !!modal.querySelector('#imageCanvas')
+        });
+
+        // Create a MutationObserver to watch for modal removal or style changes
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                // Check if the modal was removed from DOM
+                if (mutation.type === 'childList') {
+                    mutation.removedNodes.forEach((removedNode) => {
+                        if (removedNode === modal || (removedNode as Element)?.contains?.(modal)) {
+                            log.info("SAM Detector modal removed from DOM");
+                            handleSAMDetectorModalClosed(node);
+                            observer.disconnect();
+                        }
+                    });
+                }
+                
+                // Check if modal style changed to hidden
+                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                    const target = mutation.target as HTMLElement;
+                    if (target === modal) {
+                        const display = window.getComputedStyle(modal).display;
+                        if (display === 'none') {
+                            log.info("SAM Detector modal hidden via style");
+                            // Add delay to allow SAM Detector to process and save the mask
+                            setTimeout(() => {
+                                handleSAMDetectorModalClosed(node);
+                            }, 1000); // 1 second delay
+                            observer.disconnect();
+                        }
+                    }
+                }
+            });
+        });
+
+        // Observe the document body for child removals (modal removal)
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['style']
+        });
+
+        // Also observe the modal itself for style changes
+        observer.observe(modal, {
+            attributes: true,
+            attributeFilter: ['style']
+        });
+
+        // Store observer reference for cleanup
+        (node as any).samModalObserver = observer;
+
+        // Fallback timeout in case observer doesn't catch the closure
+        setTimeout(() => {
+            if ((node as any).samMonitoringActive) {
+                log.debug("SAM Detector modal monitoring timeout, cleaning up");
+                observer.disconnect();
+                (node as any).samMonitoringActive = false;
+            }
+        }, 60000); // 1 minute timeout
+
+        log.info("SAM Detector modal observers set up successfully");
+    };
+    
+    // Start the modal finding process
+    findModal();
+}
+
+// Function to handle SAM Detector modal closure
+function handleSAMDetectorModalClosed(node: ComfyNode) {
+    if (!(node as any).samMonitoringActive) {
+        log.debug("SAM monitoring already inactive for node", node.id);
+        return;
+    }
+
+    log.info("SAM Detector modal closed for node", node.id);
+    (node as any).samMonitoringActive = false;
+
+    // Clean up observer
+    if ((node as any).samModalObserver) {
+        (node as any).samModalObserver.disconnect();
+        delete (node as any).samModalObserver;
+    }
+
+    // Check if there's a new image to process
+    if (node.imgs && node.imgs.length > 0) {
+        const currentImgSrc = node.imgs[0].src;
+        const originalImgSrc = (node as any).samOriginalImgSrc;
+        
+        if (currentImgSrc && currentImgSrc !== originalImgSrc) {
+            log.info("SAM Detector result detected after modal closure, processing mask...");
+            handleSAMDetectorResult(node, node.imgs[0]);
+        } else {
+            log.info("No new image detected after SAM Detector modal closure");
+            
+            // Show info notification
+            showNotification("SAM Detector closed. No mask was applied.", "#4a6cd4", 3000);
+        }
+    } else {
+        log.info("No image available after SAM Detector modal closure");
+    }
+
+    // Clean up stored references
+    delete (node as any).samOriginalImgSrc;
+}
+
+// Fallback function to monitor changes in node.imgs (old polling approach)
+function monitorSAMDetectorChanges(node: ComfyNode) {
+    let checkCount = 0;
+    const maxChecks = 300; // 30 seconds maximum monitoring
+
+    const checkForChanges = () => {
+        checkCount++;
+
+        if (!((node as any).samMonitoringActive)) {
+            log.debug("SAM monitoring stopped for node", node.id);
+            return;
+        }
+
+        log.debug(`SAM monitoring check ${checkCount}/${maxChecks} for node ${node.id}`);
+
+        // Check if the node's image has been updated (this happens when "Save to node" is clicked)
+        if (node.imgs && node.imgs.length > 0) {
+            const currentImgSrc = node.imgs[0].src;
+            const originalImgSrc = (node as any).samOriginalImgSrc;
+            
+            if (currentImgSrc && currentImgSrc !== originalImgSrc) {
+                log.info("SAM Detector result detected in node.imgs, processing mask...");
+                handleSAMDetectorResult(node, node.imgs[0]);
+                (node as any).samMonitoringActive = false;
+                return;
+            }
+        }
+
+        // Continue monitoring if not exceeded max checks
+        if (checkCount < maxChecks && (node as any).samMonitoringActive) {
+            setTimeout(checkForChanges, 100);
+        } else {
+            log.debug("SAM Detector monitoring timeout or stopped for node", node.id);
+            (node as any).samMonitoringActive = false;
+        }
+    };
+
+    // Start monitoring after a short delay
+    setTimeout(checkForChanges, 500);
+}
+
+// Function to handle SAM Detector result (using same logic as CanvasMask.handleMaskEditorClose)
+async function handleSAMDetectorResult(node: ComfyNode, resultImage: HTMLImageElement) {
+    try {
+        log.info("Handling SAM Detector result for node", node.id);
+        log.debug("Result image source:", resultImage.src.substring(0, 100) + '...');
+
+        const canvasWidget = (node as any).canvasWidget;
+        if (!canvasWidget || !canvasWidget.canvas) {
+            log.error("Canvas widget not available for SAM result processing");
+            return;
+        }
+
+        const canvas = canvasWidget; // canvasWidget is the Canvas object, not canvasWidget.canvas
+
+        // Wait for the result image to load (same as CanvasMask)
+        try {
+            // First check if the image is already loaded
+            if (resultImage.complete && resultImage.naturalWidth > 0) {
+                log.debug("SAM result image already loaded", {
+                    width: resultImage.width,
+                    height: resultImage.height
+                });
+            } else {
+                // Try to reload the image with a fresh request
+                log.debug("Attempting to reload SAM result image");
+                const originalSrc = resultImage.src;
+                
+                // Add cache-busting parameter to force fresh load
+                const url = new URL(originalSrc);
+                url.searchParams.set('_t', Date.now().toString());
+                
+                await new Promise((resolve, reject) => {
+                    const img = new Image();
+                    img.crossOrigin = "anonymous";
+                    img.onload = () => {
+                        // Copy the loaded image data to the original image
+                        resultImage.src = img.src;
+                        resultImage.width = img.width;
+                        resultImage.height = img.height;
+                        log.debug("SAM result image reloaded successfully", {
+                            width: img.width,
+                            height: img.height,
+                            originalSrc: originalSrc,
+                            newSrc: img.src
+                        });
+                        resolve(img);
+                    };
+                    img.onerror = (error) => {
+                        log.error("Failed to reload SAM result image", {
+                            originalSrc: originalSrc,
+                            newSrc: url.toString(),
+                            error: error
+                        });
+                        reject(error);
+                    };
+                    img.src = url.toString();
+                });
+            }
+        } catch (error) {
+            log.error("Failed to load image from SAM Detector.", error);
+            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)
+        log.debug("Creating temporary canvas for mask processing");
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = canvas.width;
+        tempCanvas.height = canvas.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);
+            const data = imageData.data;
+
+            // Convert to mask format (same as CanvasMask)
+            for (let i = 0; i < data.length; i += 4) {
+                const originalAlpha = data[i + 3];
+                data[i] = 255;
+                data[i + 1] = 255;
+                data[i + 2] = 255;
+                data[i + 3] = 255 - originalAlpha;
+            }
+
+            tempCtx.putImageData(imageData, 0, 0);
+        }
+
+        // Convert processed mask to image (same as CanvasMask)
+        log.debug("Converting processed mask to image");
+        const maskAsImage = new Image();
+        maskAsImage.src = tempCanvas.toDataURL();
+        await new Promise(resolve => maskAsImage.onload = resolve);
+
+        // Apply mask to LayerForge canvas using MaskTool.setMask method
+        log.debug("Checking canvas and maskTool availability", {
+            hasCanvas: !!canvas,
+            hasMaskTool: !!canvas.maskTool,
+            maskToolType: typeof canvas.maskTool,
+            canvasKeys: Object.keys(canvas)
+        });
+
+        if (!canvas.maskTool) {
+            log.error("MaskTool is not available. Canvas state:", {
+                hasCanvas: !!canvas,
+                canvasConstructor: canvas.constructor.name,
+                canvasKeys: Object.keys(canvas),
+                maskToolValue: canvas.maskTool
+            });
+            throw new Error("Mask tool not available or not initialized");
+        }
+
+        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();
+
+        // Create new preview image (same as CanvasMask)
+        log.debug("Creating new preview image");
+        const new_preview = new Image();
+        const blob = await canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
+        if (blob) {
+            new_preview.src = URL.createObjectURL(blob);
+            await new Promise(r => new_preview.onload = r);
+            node.imgs = [new_preview];
+            log.debug("New preview image created successfully");
+        } else {
+            log.warn("Failed to create preview blob");
+        }
+
+        canvas.render();
+
+        log.info("SAM Detector mask applied successfully to LayerForge canvas");
+
+        // Show success notification
+        showNotification("SAM Detector mask applied to LayerForge!", "#4a7c59", 3000);
+
+    } catch (error: any) {
+        log.error("Error processing SAM Detector result:", error);
+        
+        // Show error notification
+        showNotification(`Failed to apply SAM mask: ${error.message}`, "#c54747", 5000);
+    } finally {
+        (node as any).samMonitoringActive = false;
+        (node as any).samOriginalImgSrc = null;
+    }
+}
+
+// Helper function to show notifications
+function showNotification(message: string, backgroundColor: string, duration: number) {
+    const notification = document.createElement('div');
+    notification.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        background: ${backgroundColor};
+        color: white;
+        padding: 12px 16px;
+        border-radius: 4px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+        z-index: 10001;
+        font-size: 14px;
+    `;
+    notification.textContent = message;
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        if (notification.parentNode) {
+            notification.parentNode.removeChild(notification);
+        }
+    }, duration);
+}
+
+// Function to setup SAM Detector hook in menu options
+export function setupSAMDetectorHook(node: ComfyNode, options: any[]) {
+    // Hook into "Open in SAM Detector" with delay since Impact Pack adds it asynchronously
+    const hookSAMDetector = () => {
+        const samDetectorIndex = options.findIndex((option) => 
+            option && option.content && (
+                option.content.includes("SAM Detector") ||
+                option.content === "Open in SAM Detector"
+            )
+        );
+
+        if (samDetectorIndex !== -1) {
+            log.info(`Found SAM Detector menu item at index ${samDetectorIndex}: "${options[samDetectorIndex].content}"`);
+            const originalSamCallback = options[samDetectorIndex].callback;
+            options[samDetectorIndex].callback = async () => {
+                try {
+                    log.info("Intercepted 'Open in SAM Detector' - automatically sending to clipspace and starting monitoring");
+                    
+                    // Automatically send canvas to clipspace and start monitoring
+                    if ((node as any).canvasWidget && (node as any).canvasWidget.canvas) {
+                        const canvas = (node as any).canvasWidget; // canvasWidget IS the Canvas object
+                        
+                        // Get the flattened canvas as blob
+                        const blob = await canvas.canvasLayers.getFlattenedCanvasAsBlob();
+                        if (!blob) {
+                            throw new Error("Failed to generate canvas blob");
+                        }
+
+                        // Upload the image to ComfyUI's temp storage
+                        const formData = new FormData();
+                        const filename = `layerforge-sam-${node.id}-${Date.now()}.png`; // Unique filename with timestamp
+                        formData.append("image", blob, filename);
+                        formData.append("overwrite", "true");
+                        formData.append("type", "temp");
+
+                        const response = await api.fetchApi("/upload/image", {
+                            method: "POST",
+                            body: formData,
+                        });
+
+                        if (!response.ok) {
+                            throw new Error(`Failed to upload image: ${response.statusText}`);
+                        }
+
+                        const data = await response.json();
+                        log.debug('Image uploaded for SAM Detector:', data);
+
+                        // Create image element with proper URL
+                        const img = new Image();
+                        img.crossOrigin = "anonymous"; // Add CORS support
+                        
+                        // Wait for image to load before setting src
+                        const imageLoadPromise = new Promise((resolve, reject) => {
+                            img.onload = () => {
+                                log.debug("SAM Detector image loaded successfully", {
+                                    width: img.width,
+                                    height: img.height,
+                                    src: img.src.substring(0, 100) + '...'
+                                });
+                                resolve(img);
+                            };
+                            img.onerror = (error) => {
+                                log.error("Failed to load SAM Detector image", error);
+                                reject(new Error("Failed to load uploaded image"));
+                            };
+                        });
+                        
+                        // Set src after setting up event handlers
+                        img.src = api.apiURL(`/view?filename=${encodeURIComponent(data.name)}&type=${data.type}&subfolder=${data.subfolder}`);
+                        
+                        // Wait for image to load
+                        await imageLoadPromise;
+
+                        // Set the image to the node for clipspace
+                        node.imgs = [img];
+                        (node as any).clipspaceImg = img;
+
+                        // Copy to ComfyUI clipspace
+                        ComfyApp.copyToClipspace(node);
+                        
+                        // Start monitoring for SAM Detector results
+                        startSAMDetectorMonitoring(node);
+                        
+                        log.info("Canvas automatically sent to clipspace and monitoring started");
+                    }
+                    
+                    // Call the original SAM Detector callback
+                    if (originalSamCallback) {
+                        await originalSamCallback();
+                    }
+                    
+                } catch (e: any) {
+                    log.error("Error in SAM Detector hook:", e);
+                    // Still try to call original callback
+                    if (originalSamCallback) {
+                        await originalSamCallback();
+                    }
+                }
+            };
+            return true; // Found and hooked
+        }
+        return false; // Not found
+    };
+
+    // Try to hook immediately
+    if (!hookSAMDetector()) {
+        // If not found immediately, try again after Impact Pack adds it
+        setTimeout(() => {
+            if (hookSAMDetector()) {
+                log.info("Successfully hooked SAM Detector after delay");
+            } else {
+                log.debug("SAM Detector menu item not found even after delay");
+            }
+        }, 150); // Slightly longer delay to ensure Impact Pack has added it
+    }
+}

src/config.ts

@@ -2,4 +2,4 @@ import { LogLevel } from "./logger";
 
 // Log level for development.
 // Possible values: 'DEBUG', 'INFO', 'WARN', 'ERROR', 'NONE'
-export const LOG_LEVEL: keyof typeof LogLevel = 'DEBUG';
+export const LOG_LEVEL: keyof typeof LogLevel = 'NONE';