show metadata to class

web/js/debugger.js

@@ -14,24 +14,12 @@ app.registerExtension({
   },
 });
 
-
-// "Show metadata" Node
-let metadata_node;
-
 app.registerExtension({
   name: 'Crystools.Debugger.Metadata',
 
   registerCustomNodes() {
-    const category = `crystools ${commonPrefix}/Debugger`;
-    const friendlyName = 'Show Metadata 🪛';
-
     class MetadataNode {
-      // color = "#FF2222";
-      // bgcolor = "#000000";
-      groupcolor = LGraphCanvas.node_colors.black.groupcolor;
-
       constructor() {
-        metadata_node = this;
         this.serialize_widgets = false;
         this.isVirtualNode = true;
 
@@ -40,48 +28,43 @@ app.registerExtension({
         ComfyWidgets.BOOLEAN(this, 'Active', ['', {default: true}], app);
         ComfyWidgets.BOOLEAN(this, 'Parsed', ['', {default: true}], app);
         ComfyWidgets.COMBO(this, 'What', [['Prompt', 'Workflow'], {default: 'Prompt'}]);
+
+        // It runs at finish on each prompt queue
+        api.addEventListener('executed', this.fillMetadataWidget);
+      }
+
+      fillMetadataWidget = () => {
+        app.graphToPrompt()
+        .then(workflow => {
+          let result = 'inactive';
+          // debugger
+          const output = this.widgets[0];
+          const active = this.widgets[1].value;
+          const parsed = this.widgets[2].value;
+          let what = this.widgets[3].value.toLowerCase();
+
+          if (active) {
+            what = what === 'prompt' ? 'output' : what; // little fix for better understanding
+            result = workflow[what];
+            if (parsed) {
+              result = JSON.stringify(result, null, 2);
+            } else {
+              result = JSON.stringify(result);
+            }
+          }
+
+          output.value = result;
+        });
       }
     }
 
-
-    LiteGraph.registerNodeType(friendlyName,
-      Object.assign(MetadataNode, {
-        title: friendlyName,
-        title_mode: LiteGraph.NORMAL_TITLE,
-        collapsable: true,
-      }),
-    );
-
-    MetadataNode.category = category;
+    // I'm not sure for what they're using prototype and lots of black magic, don't change the order!
+    LiteGraph.registerNodeType('Show Metadata [Crystools]', MetadataNode);
+    MetadataNode.category = `crystools ${commonPrefix}/Debugger`;
+    MetadataNode.shape = LiteGraph.BOX_SHAPE;
+    MetadataNode.title = `Show Metadata ${commonPrefix}`;
+    // MetadataNode.collapsable = false;
+    // MetadataNode.color = "#FF2222";
+    // MetadataNode.bgcolor = "#000000";
   },
 });
-
-const fillMetadataWidget = function() {
-  app.graphToPrompt()
-  .then(workflow => {
-    if (!metadata_node) {
-      return;
-    }
-    let result = 'inactive';
-    const output = metadata_node.widgets[0];
-    const active = metadata_node.widgets[1].value;
-    const parsed = metadata_node.widgets[2].value;
-    let what = metadata_node.widgets[3].value.toLowerCase();
-
-    if (active) {
-      what = what === 'prompt' ? 'output' : what; // little fix for better understanding
-      result = workflow[what];
-      if (parsed) {
-        result = JSON.stringify(result, null, 2);
-      } else {
-        result = JSON.stringify(result);
-      }
-    }
-
-    output.value = result;
-  });
-};
-
-
-// It runs at finish on each prompt queue
-api.addEventListener('executed', fillMetadataWidget);