diff --git a/web/scripts/app.js b/web/scripts/app.js index f4729e02b..460748b0e 100644 --- a/web/scripts/app.js +++ b/web/scripts/app.js @@ -830,25 +830,6 @@ export class ComfyApp { } } - /** - * Notifies widgets when graph is changed - */ - #addCanvasAttachDetachHandlers() { - const self = this; - - LGraphCanvas.prototype.onGraphAttached = function(graph) { - if (node.onGraphAttached) - node.onGraphAttached() - } - - LGraphCanvas.prototype.onGraphDetached = function(graph) { - for (const node of graph._nodes) { - if (node.onGraphDetached) - node.onGraphDetached() - } - } - } - /** * Draws node highlights (executing, drag drop) and progress bar */ @@ -951,6 +932,33 @@ export class ComfyApp { }; } + /** + * Notifies widgets when graph is changed + */ + #addCanvasAttachDetachHandlers() { + const self = this; + + this.canvas.onGraphAttached = function(graph) { + console.warn("canvas ongraphattached") + for (const node of graph._nodes) { + if (node.onGraphAttached) + node.onGraphAttached() + } + } + + this.canvas.onGraphDetached = function(graph) { + console.warn("canvas ongraphdetached") + for (const node of graph._nodes) { + if (node.onGraphDetached) + node.onGraphDetached() + } + } + + // account for attachGraph() already having been called by the + // LGraphCanvas constructor + this.canvas.onGraphAttached(this.graph); + } + /** * Handles updates from the API socket */ @@ -1117,6 +1125,7 @@ export class ComfyApp { this.#addDrawNodeHandler(); this.#addDrawGroupsHandler(); this.#addApiUpdateHandlers(); + this.#addCanvasAttachDetachHandlers(); this.#addDropHandler(); this.#addPasteHandler(); this.#addKeyboardHandler(); diff --git a/web/scripts/widgets.js b/web/scripts/widgets.js index 066ace9e9..24017f2c0 100644 --- a/web/scripts/widgets.js +++ b/web/scripts/widgets.js @@ -172,7 +172,7 @@ function addMultilineWidget(node, name, opts, app) { position: "absolute", background: (!node.color)?'':node.color, color: (!node.color)?'':'white', - zIndex: app.graph._nodes.indexOf(node), + zIndex: node.graph._nodes.indexOf(node), }); this.inputEl.hidden = !visible; }, @@ -196,7 +196,11 @@ function addMultilineWidget(node, name, opts, app) { // Draw node isnt fired once the node is off the screen // if it goes off screen quickly, the input may not be removed // this shifts it off screen so it can be moved back if the node is visible. - for (let n in app.graph._nodes) { + const graphcanvas = LGraphCanvas.active_canvas + if (graphcanvas == null || graphcanvas.graph != node.graph) + return + + for (let n in graphcanvas.graph._nodes) { n = graph._nodes[n]; for (let w in n.widgets) { let wid = n.widgets[w]; @@ -217,12 +221,20 @@ function addMultilineWidget(node, name, opts, app) { } }; + const onGraphAttached = node.onGraphAttached; node.onGraphAttached = function() { + console.error("ONGRAPHATTACHKED", widget) widget.inputEl.style.display = "block"; + if (onGraphAttached) + onGraphAttached.apply(this, arguments) } + const onGraphDetached = node.onGraphDetached; node.onGraphDetached = function() { + console.error("ONGRAPHDETACHED", widget) widget.inputEl.style.display = "none"; + if (onGraphDetached) + onGraphDetached.apply(this, arguments) } widget.onRemove = () => { @@ -304,7 +316,7 @@ export const ComfyWidgets = { const img = new Image(); img.onload = () => { node.imgs = [img]; - app.graph.setDirtyCanvas(true); + node.graph.setDirtyCanvas(true); }; let folder_separator = name.lastIndexOf("/"); let subfolder = "";