diff --git a/web/js/debugger.js b/web/js/debugger.js index 2cd93d1..334b376 100644 --- a/web/js/debugger.js +++ b/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);