Improve mask loading logic on node connection

Updated mask loading to immediately use available data from connected nodes and preserve existing masks if none is provided. Backend mask data is only fetched after workflow execution, ensuring no stale data is loaded during connection.

canvas_node.py

@@ -254,11 +254,9 @@ class LayerForgeNode:
 
             log_info(f"Lock acquired. Starting process_canvas_image for node_id: {node_id} (fallback unique_id: {unique_id})")
 
-            # Handle input image and mask if provided
+            # Always store fresh input data, even if None, to clear stale data
-            if input_image is not None or input_mask is not None:
+            log_info(f"Storing input data for node {node_id} - Image: {input_image is not None}, Mask: {input_mask is not None}")
-                log_info(f"Input data detected for node {node_id} - Image: {input_image is not None}, Mask: {input_mask is not None}")
             
-                # Store input data for frontend to retrieve
             with self.__class__._storage_lock:
                 input_data = {}
                 
@@ -328,7 +326,7 @@ class LayerForgeNode:
                 
                 input_data['fit_on_add'] = fit_on_add
                 
-                    # Store in a special key for input data
+                # Store in a special key for input data (overwrites any previous data)
                 self.__class__._canvas_data_storage[f"{node_id}_input"] = input_data
 
             storage_key = node_id

js/CanvasIO.js

@@ -620,10 +620,6 @@ export class CanvasIO {
             const hasMaskInput = this.canvas.node.inputs && this.canvas.node.inputs[1] && this.canvas.node.inputs[1].link;
             // If mask input is disconnected, clear any currently applied mask to ensure full separation
             if (!hasMaskInput) {
-                if (this.canvas.maskTool) {
-                    this.canvas.maskTool.clear();
-                    this.canvas.render();
-                }
                 this.canvas.maskAppliedFromInput = false;
                 this.canvas.lastLoadedMaskLinkId = undefined;
                 log.info("Mask input disconnected - cleared mask to enforce separation from input_image");
@@ -633,6 +629,11 @@ export class CanvasIO {
                 this.canvas.inputDataLoaded = true;
                 return;
             }
+            // Skip backend check during mask connection if we didn't get immediate data
+            if (reason === "mask_connect" && !maskLoaded) {
+                log.info("No immediate mask data available during connection, skipping backend check to avoid stale data. Will check after execution.");
+                return;
+            }
             // Check backend for input data only if we have connected inputs
             const response = await fetch(`/layerforge/get_input_data/${nodeId}`);
             const result = await response.json();

js/CanvasRenderer.js

@@ -652,8 +652,8 @@ export class CanvasRenderer {
         this.updateStrokeOverlaySize();
         // Position above main canvas but below cursor overlay
         this.strokeOverlayCanvas.style.position = 'absolute';
-        this.strokeOverlayCanvas.style.left = '1px';
+        this.strokeOverlayCanvas.style.left = '0px';
-        this.strokeOverlayCanvas.style.top = '1px';
+        this.strokeOverlayCanvas.style.top = '0px';
         this.strokeOverlayCanvas.style.pointerEvents = 'none';
         this.strokeOverlayCanvas.style.zIndex = '19'; // Below cursor overlay (20)
         // Opacity is now controlled by MaskTool.previewOpacity

js/CanvasView.js

@@ -1200,12 +1200,16 @@ app.registerExtension({
                     if (index === 1) {
                         if (connected && link_info) {
                             log.info("Input mask connected");
+                            // DON'T clear existing mask when connecting a new input
+                            // Reset the loaded mask link ID to allow loading from the new connection
+                            canvas.lastLoadedMaskLinkId = undefined;
                             // Mark that we have a pending mask connection
                             canvas.hasPendingMaskConnection = true;
                             // Check for data immediately when connected
                             setTimeout(() => {
                                 log.info("Checking for input data after mask connection...");
-                                // Only load mask here; images are handled by image connect or execution
+                                // Only load mask here if it's immediately available from the connected node
+                                // Don't load stale masks from backend storage
                                 canvas.canvasIO.checkForInputData({ allowImage: false, allowMask: true, reason: "mask_connect" });
                             }, 500);
                         }

src/CanvasIO.ts

@@ -708,10 +708,6 @@ export class CanvasIO {
 
             // If mask input is disconnected, clear any currently applied mask to ensure full separation
             if (!hasMaskInput) {
-                if (this.canvas.maskTool) {
-                    this.canvas.maskTool.clear();
-                    this.canvas.render();
-                }
                 (this.canvas as any).maskAppliedFromInput = false;
                 this.canvas.lastLoadedMaskLinkId = undefined;
                 log.info("Mask input disconnected - cleared mask to enforce separation from input_image");
@@ -723,6 +719,12 @@ export class CanvasIO {
                 return;
             }
             
+            // Skip backend check during mask connection if we didn't get immediate data
+            if (reason === "mask_connect" && !maskLoaded) {
+                log.info("No immediate mask data available during connection, skipping backend check to avoid stale data. Will check after execution.");
+                return;
+            }
+            
             // Check backend for input data only if we have connected inputs
             const response = await fetch(`/layerforge/get_input_data/${nodeId}`);
             const result = await response.json();

src/CanvasRenderer.ts

@@ -796,8 +796,8 @@ export class CanvasRenderer {
 
         // Position above main canvas but below cursor overlay
         this.strokeOverlayCanvas.style.position = 'absolute';
-        this.strokeOverlayCanvas.style.left = '1px';
+        this.strokeOverlayCanvas.style.left = '0px';
-        this.strokeOverlayCanvas.style.top = '1px';
+        this.strokeOverlayCanvas.style.top = '0px';
         this.strokeOverlayCanvas.style.pointerEvents = 'none';
         this.strokeOverlayCanvas.style.zIndex = '19'; // Below cursor overlay (20)
         // Opacity is now controlled by MaskTool.previewOpacity

src/CanvasView.ts

@@ -1368,12 +1368,18 @@ app.registerExtension({
                     if (index === 1) {
                         if (connected && link_info) {
                             log.info("Input mask connected");
+                            
+                            // DON'T clear existing mask when connecting a new input
+                            // Reset the loaded mask link ID to allow loading from the new connection
+                            canvas.lastLoadedMaskLinkId = undefined;
+                            
                             // Mark that we have a pending mask connection
                             canvas.hasPendingMaskConnection = true;
                             // Check for data immediately when connected
                             setTimeout(() => {
                                 log.info("Checking for input data after mask connection...");
-                                // Only load mask here; images are handled by image connect or execution
+                                // Only load mask here if it's immediately available from the connected node
+                                // Don't load stale masks from backend storage
                                 canvas.canvasIO.checkForInputData({ allowImage: false, allowMask: true, reason: "mask_connect" });
                             }, 500);
                         } else {