Initial code commit - v1.0

js/debugnode.js

@@ -0,0 +1,117 @@
+import { app } from "../../scripts/app.js";
+import { ComfyWidgets } from "../../scripts/widgets.js";
+
+const hardLimit = 100
+
+// Does most of the regular textarea cleanup, but leaks a ref in domWidget.js -> elementWidgets until the node is removed
+function removeWidget(node, widget) {
+    widget.onRemove?.()
+    const index = node.widgets.indexOf(widget)
+    if (index !== -1)
+        node.widgets.splice(index, 1)
+}
+
+function removeAllWidgets(node) {
+    for (const widget of node.widgets) {
+        widget.onRemove?.()
+    }
+    node.widgets.length = 0
+}
+
+// Main logic
+app.registerExtension({
+    name: "WTFDebugNode",
+    async beforeRegisterNodeDef(nodeType, nodeData, app) {
+        if (nodeData.name === "WTFDebugNode") {
+
+            const origOnExecuted = nodeType.prototype.onExecuted;
+            nodeType.prototype.onExecuted = function (message) {
+                const r = origOnExecuted
+                    ? origOnExecuted?.apply(this, arguments)
+                    : undefined
+
+                // Because debug
+                console.log(message)
+
+                // Sanity init
+                this.widgets ??= []
+                this.serialize_widgets = false
+                const baseOpacity = app.canvas.editor_alpha
+
+                // Clear if invalid
+                const itemsLength = parseInt(message?.items?.length)
+                if (isNaN(itemsLength)) {
+                    removeAllWidgets(this)
+                    return r
+                }
+
+                const isMultiItem = itemsLength > 1
+                const wasMultiItem = this.debugNodeLength !== 1
+
+                // Clean up existing widgets if required
+                if (isMultiItem !== wasMultiItem) {
+                    removeAllWidgets(this)
+                }
+                // Remove only widgets we can't reuse
+                else if (this.debugNodeLength > itemsLength) {
+                    for (let i = itemsLength; i <= this.debugNodeLength; i++) {
+                        for (const widget of this.widgets.filter(x => x.name.endsWith(` ${i}`))) {
+                            removeWidget(this, widget)
+                        }
+                    }
+                }
+
+                this.debugNodeLength = itemsLength
+                const maxItems = Math.min(itemsLength, hardLimit)
+
+                // Create / update widget values for each item
+                for (let i = 0; i < maxItems; i++) {
+                    const item = message.items[i]
+                    const type = item.type
+                    const len = item.len
+                    const shape = item.shape
+                    const firstIterItem = item.firstIterItem
+                    const value = item.value
+
+                    function processWidget(node, name, value, isMultiline = false) {
+                        const numberedName = isMultiItem
+                            ? `${name} ${i}`
+                            : name
+                        const comfyType = isMultiline
+                            ? ["STRING", { multiline: true }]
+                            : "STRING"
+
+                        const current = node.widgets.find(x => x.name === numberedName)
+                        const widget = current ?? ComfyWidgets.STRING(node, numberedName, comfyType, app).widget
+
+                        if (!widget.options)
+                            widget.options = {}
+                        widget.options.serialize = false
+                        widget.value = value
+                        widget.disabled = value === null || value === undefined
+                        if (isMultiline) {
+                            widget.element.style.opacity = widget.disabled
+                                ? baseOpacity * 0.5
+                                : baseOpacity
+                        }
+                    }
+
+                    processWidget(this, "type", type)
+                    processWidget(this, "len()", len)
+                    processWidget(this, "shape", shape)
+                    processWidget(this, "type of first iter() item", firstIterItem)
+                    processWidget(this, "value", value, true)
+                }
+
+                requestAnimationFrame(() => {
+                    const size = this.computeSize();
+                    for (const widget of this.widgets.filter(x => x.element)) {
+                        widget.onResize?.(size)
+                    }
+                })
+
+                return r
+            }
+        }
+    },
+});