From 30fb89451fadbfdf29be47363441192757938d43 Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Tue, 1 Jul 2025 06:32:06 +0200 Subject: [PATCH] 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 | 89 +++++++++++++++-------------------------------- js/CanvasState.js | 1 + js/CanvasView.js | 17 +++++---- 3 files changed, 37 insertions(+), 70 deletions(-) diff --git a/js/Canvas.js b/js/Canvas.js index 6744691..46dd049 100644 --- a/js/Canvas.js +++ b/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(); } /** diff --git a/js/CanvasState.js b/js/CanvasState.js index 35c7b1f..60b8bdd 100644 --- a/js/CanvasState.js +++ b/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) { diff --git a/js/CanvasView.js b/js/CanvasView.js index fe99674..9835003 100644 --- a/js/CanvasView.js +++ b/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,