fix: 🎨 refactor and add Gif preview on node

web/debug.js

@@ -1,118 +1,11 @@
 import { app } from "/scripts/app.js";
 import * as shared from '/extensions/mtb/comfy_shared.js'
 import { log } from '/extensions/mtb/comfy_shared.js'
+import { MtbWidgets } from '/extensions/mtb/mtb_widgets.js'
 
 // TODO: respect inputs order...
 
 
-const DEBUG_WIDGETS = {
-    "image": (val, index) => {
-        const w = {
-            name: `anything_${index}`,
-            type: "image",
-            value: val,
-            draw: function (ctx,
-                node,
-                widgetWidth,
-                widgetY,
-                height) {
-                const [cw, ch] = this.computeSize(widgetWidth)
-                shared.offsetDOMWidget(this, ctx, node, widgetWidth, widgetY, ch)
-            },
-            computeSize: function (width) {
-                const ratio = this.inputRatio || 1;
-                if (width) {
-                    return [width, width / ratio + 4]
-                }
-                return [128, 128]
-            },
-            onRemove: function () {
-                if (this.inputEl) {
-                    this.inputEl.remove();
-                }
-            }
-        }
-
-        w.inputEl = document.createElement("img");
-        w.inputEl.src = "data:image/jpeg;base64," + w.value;
-        w.inputEl.onload = function () {
-            w.inputRatio = w.inputEl.naturalWidth / w.inputEl.naturalHeight;
-        }
-        document.body.appendChild(w.inputEl);
-        return w
-    },
-    "text": (val, index) => {
-        const w = {
-            name: `anything_${index}`,
-            type: "debug_text",
-            val: val,
-            draw: function (ctx,
-                node,
-                widgetWidth,
-                widgetY,
-                height) {
-                // const [cw, ch] = this.computeSize(widgetWidth)
-                shared.offsetDOMWidget(this, ctx, node, widgetWidth, widgetY, height)
-            },
-            computeSize: function (width) {
-                const value = this.inputEl.innerHTML
-                if (!value) {
-                    return [32, 32]
-                }
-                if (!width) {
-                    log(`No width ${this.parent.size}`)
-                }
-
-                const fontSize = 25; // Assuming 1rem = 16px
-
-                const oldFont = app.ctx.font
-                app.ctx.font = `${fontSize}px Arial`;
-
-                const words = value.split(" ");
-                const lines = [];
-                let currentLine = "";
-                for (const word of words) {
-                    const testLine = currentLine.length === 0 ? word : `${currentLine} ${word}`;
-
-                    const testWidth = app.ctx.measureText(testLine).width;
-
-                    // log(`Testing line ${testLine}, width: ${testWidth}, width: ${width}, ratio: ${testWidth / width}`)
-                    if (testWidth > width) {
-                        lines.push(currentLine);
-                        currentLine = word;
-                    } else {
-                        currentLine = testLine;
-                    }
-                }
-                app.ctx.font = oldFont;
-                lines.push(currentLine);
-
-                // Step 3: Calculate the widget width and height
-                const textHeight = lines.length * (fontSize + 2); // You can adjust the line height (2 in this case)
-                const maxLineWidth = lines.reduce((maxWidth, line) => Math.max(maxWidth, app.ctx.measureText(line).width), 0);
-                const widgetWidth = Math.max(width || this.width || 32, maxLineWidth);
-                const widgetHeight = textHeight + 10; // Additional padding for spacing
-                return [widgetWidth, widgetHeight + 4]
-
-            },
-            onRemove: function () {
-                if (this.inputEl) {
-                    this.inputEl.remove();
-                }
-
-            }
-        }
-        w.inputEl = document.createElement("p");
-        w.inputEl.style.textAlign = "center";
-        w.inputEl.style.fontSize = "1.5em";
-        w.inputEl.style.color = "var(--input-text)";
-        w.inputEl.style.fontFamily = "monospace";
-        w.inputEl.innerHTML = val
-        document.body.appendChild(w.inputEl);
-
-        return w
-    }
-}
 
 app.registerExtension({
     name: "mtb.Debug",
@@ -155,14 +48,14 @@ app.registerExtension({
                 let widgetI = 1
                 if (message.text) {
                     for (const txt of message.text) {
-                        const w = this.addCustomWidget(DEBUG_WIDGETS["text"](txt, widgetI))
+                        const w = this.addCustomWidget(MtbWidgets.DEBUG_STRING(txt, widgetI))
                         w.parent = this;
                         widgetI++;
                     }
                 }
                 if (message.b64_images) {
                     for (const img of message.b64_images) {
-                        const w = this.addCustomWidget(DEBUG_WIDGETS["image"](img, widgetI))
+                        const w = this.addCustomWidget(MtbWidgets.DEBUG_IMG(img, widgetI))
                         w.parent = this;
                         widgetI++;
                     }