Add show/hide preview option for canvas image preview

Introduces a new 'show_preview' boolean option to CanvasNode and UI, allowing users to toggle the visibility of the canvas image preview widget. Updates Canvas.js with a setPreviewVisibility method to control the preview's display and size, and hooks this logic into CanvasView.js to respond to the new option. Adds detailed debug logging for widget state and size changes.

canvas_node.py

@@ -168,6 +168,7 @@ class CanvasNode:
         return {
             "required": {
                 "fit_on_add": ("BOOLEAN", {"default": False, "label_on": "Fit on Add/Paste", "label_off": "Default Behavior"}),
+                "show_preview": ("BOOLEAN", {"default": False, "label_on": "Show Preview", "label_off": "Hide Preview"}),
                 "trigger": ("INT", {"default": 0, "min": 0, "max": 99999999, "step": 1, "hidden": True}),
                 "node_id": ("STRING", {"default": "0", "hidden": True}),
             },
@@ -231,7 +232,7 @@ class CanvasNode:
 
     _processing_lock = threading.Lock()
 
-    def process_canvas_image(self, fit_on_add, trigger, node_id, prompt=None, unique_id=None):
+    def process_canvas_image(self, fit_on_add, show_preview, trigger, node_id, prompt=None, unique_id=None):
         
         try:
 

js/Canvas.js

@@ -59,6 +59,127 @@ export class Canvas {
         
         // Delegacja interaction dla kompatybilności wstecznej
         this.interaction = this.canvasInteractions.interaction;
+
+        console.log('Canvas widget element:', this.node);
+        
+        // Dodaj metodę do kontroli widoczności podglądu
+        this.previewVisible = true; // Domyślnie widoczny
+    }
+
+    /**
+     * Kontroluje widoczność podglądu canvas
+     * @param {boolean} visible - Czy podgląd ma być widoczny
+     */
+    setPreviewVisibility(visible) {
+        this.previewVisible = visible;
+        console.log("Canvas preview visibility set to:", visible);
+        
+        // Znajdź i kontroluj ImagePreviewWidget
+        const imagePreviewWidget = this.node.widgets.find(w => w.name === "$$canvas-image-preview");
+        if (imagePreviewWidget) {
+            console.log("Found $$canvas-image-preview widget, controlling visibility");
+            
+            // SZCZEGÓŁOWE LOGOWANIE ROZMIARU
+            console.log("=== WIDGET SIZE DEBUG ===");
+            console.log("Current computeSize function:", imagePreviewWidget.computeSize);
+            console.log("Has originalComputeSize:", !!imagePreviewWidget.originalComputeSize);
+            
+            if (imagePreviewWidget.computeSize) {
+                try {
+                    const currentSize = imagePreviewWidget.computeSize();
+                    console.log("Current size returned by computeSize():", currentSize);
+                } catch (e) {
+                    console.log("Error calling computeSize():", e);
+                }
+            }
+            
+            console.log("Widget properties:", {
+                width: imagePreviewWidget.width,
+                height: imagePreviewWidget.height,
+                size: imagePreviewWidget.size,
+                last_y: imagePreviewWidget.last_y,
+                type: imagePreviewWidget.type
+            });
+            
+            // Spróbuj różnych metod ukrywania
+            if (visible) {
+                console.log("=== SHOWING WIDGET ===");
+                
+                // Pokaż widget
+                if (imagePreviewWidget.options) {
+                    imagePreviewWidget.options.hidden = false;
+                }
+                if ('visible' in imagePreviewWidget) {
+                    imagePreviewWidget.visible = true;
+                }
+                if ('hidden' in imagePreviewWidget) {
+                    imagePreviewWidget.hidden = false;
+                }
+                
+                // Ustaw stały rozmiar 250 gdy podgląd jest pokazany
+                console.log("Setting computeSize to fixed height 250");
+                imagePreviewWidget.computeSize = function() {
+                    return [0, 250]; // Szerokość 0 (auto), wysokość 250
+                };
+                
+                console.log("ImagePreviewWidget shown");
+            } else {
+                console.log("=== HIDING WIDGET ===");
+                
+                // Ukryj widget
+                if (imagePreviewWidget.options) {
+                    imagePreviewWidget.options.hidden = true;
+                }
+                if ('visible' in imagePreviewWidget) {
+                    imagePreviewWidget.visible = false;
+                }
+                if ('hidden' in imagePreviewWidget) {
+                    imagePreviewWidget.hidden = true;
+                }
+                
+                // Zapisz oryginalny computeSize (jeśli istnieje)
+                if (imagePreviewWidget.computeSize) {
+                    console.log("Saving original computeSize function");
+                    imagePreviewWidget.originalComputeSize = imagePreviewWidget.computeSize;
+                } else {
+                    console.log("Widget has no computeSize - will create one");
+                    // Nie zapisujemy niczego, bo nie było computeSize
+                }
+                
+                // Zawsze ustaw computeSize na 0
+                imagePreviewWidget.computeSize = function() {
+                    return [0, 0]; // Szerokość 0, wysokość 0
+                };
+                
+                console.log("ImagePreviewWidget hidden with zero size");
+            }
+            
+            console.log("=== FINAL WIDGET STATE ===");
+            console.log("ImagePreviewWidget state:", {
+                'options.hidden': imagePreviewWidget.options?.hidden,
+                'visible': imagePreviewWidget.visible,
+                'hidden': imagePreviewWidget.hidden,
+                'hasOriginalComputeSize': !!imagePreviewWidget.originalComputeSize,
+                'computeSizeFunction': imagePreviewWidget.computeSize ? imagePreviewWidget.computeSize.toString().substring(0, 100) + "..." : 'undefined'
+            });
+            
+            // Test finalnego rozmiaru
+            if (imagePreviewWidget.computeSize) {
+                try {
+                    const finalSize = imagePreviewWidget.computeSize();
+                    console.log("Final computed size:", finalSize);
+                } catch (e) {
+                    console.log("Error calling final computeSize():", e);
+                }
+            }
+            
+            console.log("=== END SIZE DEBUG ===");
+        } else {
+            console.warn("$$canvas-image-preview widget not found in Canvas.js");
+        }
+        
+        // Wymuś przerysowanie
+        this.render();
     }
 
     /**
@@ -129,6 +250,7 @@ export class Canvas {
         this._notifyStateChange();
     }
 
+
     /**
      * Ponów cofniętą operację
      */

js/CanvasView.js

@@ -385,6 +385,8 @@ async function createCanvasWidget(node, widget, app) {
             flex-direction: column;
             position: relative;
         }
+
+
     `;
     document.head.appendChild(style);
 
@@ -945,7 +947,7 @@ async function createCanvasWidget(node, widget, app) {
     const updateOutput = async () => {
         triggerWidget.value = (triggerWidget.value + 1) % 99999999;
         
-        // Aktualizuj podgląd node z maską jako alpha
+        // ZAWSZE generuj obraz (potrzebny dla funkcji masek)
         try {
             const new_preview = new Image();
             const blob = await canvas.getFlattenedCanvasWithMaskAsBlob();
@@ -1107,6 +1109,33 @@ async function createCanvasWidget(node, widget, app) {
 
     node.canvasWidget = canvas;
 
+    console.log('Canvas widget element:', node.element);
+    console.log('Canvas widget canvas:', node.canvas);
+    console.log('Canvas widget parent:', node.parent);
+    
+
+    // Konfiguracja opcji ukrywania podglądu
+    const showPreviewWidget = node.widgets.find(w => w.name === "show_preview");
+    if (showPreviewWidget) {
+        const originalCallback = showPreviewWidget.callback;
+        
+        showPreviewWidget.callback = function(value) {
+            if (originalCallback) {
+                originalCallback.call(this, value);
+            }
+            
+            // Kontroluj widoczność podglądu w Canvas
+            if (canvas && canvas.setPreviewVisibility) {
+                canvas.setPreviewVisibility(value);
+            }
+            
+            // Wymuś przerysowanie node'a
+            if (node.graph && node.graph.canvas) {
+                node.setDirtyCanvas(true, true);
+            }
+        };
+    }
+
     setTimeout(() => {
         canvas.loadInitialState();
     }, 100);