Refactor canvas preview visibility and widget loading

Refactored Canvas.js to use an async waitForWidget method for reliably finding widgets before manipulating them. The setPreviewVisibility method is now async and simplified, with excessive debug logging removed. CanvasState.js now triggers a render after saving state. In CanvasView.js, initial state loading is deferred and preview visibility is managed in the Canvas constructor, removing redundant calls.

js/Canvas.js

@@ -61,47 +61,46 @@ export class Canvas {
         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
+        this.setPreviewVisibility(false);
     }
 
+
+    async waitForWidget(name, node, interval = 100, timeout = 5000) {
+        const startTime = Date.now();
+
+        return new Promise((resolve, reject) => {
+            const check = () => {
+            const widget = node.widgets.find(w => w.name === name);
+            if (widget) {
+                resolve(widget);
+            } else if (Date.now() - startTime > timeout) {
+                reject(new Error(`Widget "${name}" not found within timeout.`));
+            } else {
+                setTimeout(check, interval);
+            }
+            };
+
+            check();
+        });
+    }
+
+    
     /**
      * Kontroluje widoczność podglądu canvas
      * @param {boolean} visible - Czy podgląd ma być widoczny
      */
-    setPreviewVisibility(visible) {
+    async 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");
+        const imagePreviewWidget = await this.waitForWidget("$$canvas-image-preview", this.node);
         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 ===");
                 
@@ -115,8 +114,7 @@ export class Canvas {
                 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
@@ -137,49 +135,18 @@ export class Canvas {
                     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 ===");
+            this.render()
         } else {
             console.warn("$$canvas-image-preview widget not found in Canvas.js");
         }
-        
-        // Wymuś przerysowanie
-        this.render();
     }
 
     /**

js/CanvasState.js

@@ -216,6 +216,7 @@ export class CanvasState {
             await setCanvasState(this.canvas.node.id, state);
             log.info("Canvas state saved to IndexedDB.");
             this.lastSavedStateSignature = currentStateSignature;
+            this.canvas.render();
         }, 'CanvasState.saveStateToDB');
 
         if (immediate) {

js/CanvasView.js

@@ -1105,14 +1105,12 @@ async function createCanvasWidget(node, widget, app) {
     if (!window.canvasExecutionStates) {
         window.canvasExecutionStates = new Map();
     }
-
-
     node.canvasWidget = canvas;
 
-    console.log('Canvas widget element:', node.element);
-    console.log('Canvas widget canvas:', node.canvas);
-    console.log('Canvas widget parent:', node.parent);
-    
+    setTimeout(() => {
+        canvas.loadInitialState();
+    }, 100);
+
 
     // Konfiguracja opcji ukrywania podglądu
     const showPreviewWidget = node.widgets.find(w => w.name === "show_preview");
@@ -1134,11 +1132,12 @@ async function createCanvasWidget(node, widget, app) {
                 node.setDirtyCanvas(true, true);
             }
         };
+        
+        // Podgląd jest automatycznie ukrywany w konstruktorze Canvas.js
+        // Nie potrzebujemy już wywoływać setInitialPreviewVisibility
     }
 
-    setTimeout(() => {
-        canvas.loadInitialState();
-    }, 100);
+
 
     return {
         canvas: canvas,