From ff257699552505a03cde83290677b0c84d9359fb Mon Sep 17 00:00:00 2001
From: jessesep <jessesep@users.noreply.github.com>
Date: Fri, 5 Dec 2025 01:43:10 +0100
Subject: [PATCH] Add JavaScript for on-node text display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added web/simplevariables.js to handle displaying preview text
- Registers extension that hooks into node execution
- Creates a read-only text widget on the node when executed
- Automatically resizes node to fit content

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/simplevariables.js | 48 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 web/simplevariables.js

diff --git a/web/simplevariables.js b/web/simplevariables.js
new file mode 100644
index 0000000..e5fb000
--- /dev/null
+++ b/web/simplevariables.js
@@ -0,0 +1,48 @@
+import { app } from "../../scripts/app.js";
+import { ComfyWidgets } from "../../scripts/widgets.js";
+
+function displayText(nodeType, nodeData, appInstance) {
+    const onExecutedOriginal = nodeType.prototype.onExecuted;
+    nodeType.prototype.onExecuted = function (message) {
+        onExecutedOriginal?.apply(this, arguments);
+
+        if (message?.text) {
+            // Find or create text widget
+            let textWidget = this.widgets?.find(w => w.name === "display_text");
+
+            if (!textWidget) {
+                textWidget = ComfyWidgets.STRING(this, "display_text", [
+                    "STRING", { multiline: true }
+                ], appInstance).widget;
+                textWidget.inputEl.readOnly = true;
+                textWidget.inputEl.style.opacity = 0.7;
+                textWidget.inputEl.style.fontFamily = "monospace";
+            }
+
+            // Get text from message
+            let text = message.text;
+            if (Array.isArray(text)) {
+                text = text[0] || "";
+            }
+            textWidget.value = text;
+
+            // Resize node to fit
+            requestAnimationFrame(() => {
+                const sz = this.computeSize();
+                if (sz[0] < this.size[0]) sz[0] = this.size[0];
+                if (sz[1] < this.size[1]) sz[1] = this.size[1];
+                this.onResize?.(sz);
+                appInstance.graph.setDirtyCanvas(true, false);
+            });
+        }
+    };
+}
+
+app.registerExtension({
+    name: "SimpleVariables",
+    async beforeRegisterNodeDef(nodeType, nodeData, app) {
+        if (["SetVariable", "GetVariable", "ListVariables", "ClearVariables"].includes(nodeData.name)) {
+            displayText(nodeType, nodeData, app);
+        }
+    },
+});