From 40c1dbfb5dea5f572370a052b00d4feac8c099ad Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Tue, 1 Jul 2025 05:09:48 +0200 Subject: [PATCH] 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 | 3 +- js/Canvas.js | 122 +++++++++++++++++++++++++++++++++++++++++++++++ js/CanvasView.js | 31 +++++++++++- 3 files changed, 154 insertions(+), 2 deletions(-) diff --git a/canvas_node.py b/canvas_node.py index feb2c38..965a264 100644 --- a/canvas_node.py +++ b/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: diff --git a/js/Canvas.js b/js/Canvas.js index 9b7c707..6744691 100644 --- a/js/Canvas.js +++ b/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ę */ diff --git a/js/CanvasView.js b/js/CanvasView.js index beaac6f..fe99674 100644 --- a/js/CanvasView.js +++ b/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);