diff --git a/web/debugger.d.ts b/web/debugger.d.ts
index e69de29..cb0ff5c 100644
--- a/web/debugger.d.ts
+++ b/web/debugger.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/web/debugger.js b/web/debugger.js
index 3918c74..871df5b 100644
--- a/web/debugger.js
+++ b/web/debugger.js
@@ -1 +1,79 @@
-"use strict";
+import { app } from '/scripts/app.js';
+import { api } from '/scripts/api.js';
+import { commonPrefix, displayContext } from './common.js';
+import { LiteGraph, TLGraphNode, ComfyWidgets } from './liteGraph.js';
+console.log('debugger.ts');
+app.registerExtension({
+ name: 'Crystools.Debugger.ConsoleAny',
+ beforeRegisterNodeDef(nodeType, nodeData, appFromArg) {
+ if (nodeData.name === 'Show any [Crystools]') {
+ console.log('nodeType', nodeType);
+ displayContext(nodeType, app, 3);
+ }
+ },
+});
+app.registerExtension({
+ name: 'Crystools.Debugger.Metadata',
+ registerCustomNodes() {
+ class MetadataNode extends TLGraphNode {
+ constructor() {
+ super();
+ Object.defineProperty(this, "fillMetadataWidget", {
+ enumerable: true,
+ configurable: true,
+ writable: true,
+ value: () => {
+ return app.graphToPrompt()
+ .then(workflow => {
+ let result = 'inactive';
+ 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;
+ console.log('workflow', what);
+ result = workflow[what];
+ if (parsed) {
+ result = JSON.stringify(result, null, 2);
+ }
+ else {
+ result = JSON.stringify(result);
+ }
+ }
+ output.value = result;
+ });
+ }
+ });
+ this.serialize_widgets = false;
+ this.isVirtualNode = true;
+ const widget = ComfyWidgets.STRING(this, '', [
+ '', {
+ default: '', multiline: true,
+ },
+ ], app).widget;
+ widget.inputEl.readOnly = true;
+ ComfyWidgets.BOOLEAN(this, 'Active', [
+ '', {
+ default: true,
+ },
+ ]);
+ ComfyWidgets.BOOLEAN(this, 'Parsed', [
+ '', {
+ default: true,
+ },
+ ]);
+ ComfyWidgets.COMBO(this, 'What', [
+ ['Prompt', 'Workflow'], {
+ default: 'Prompt',
+ },
+ ]);
+ api.addEventListener('executed', this.fillMetadataWidget, false);
+ }
+ }
+ LiteGraph.registerNodeType('Show Metadata [Crystools]', MetadataNode);
+ MetadataNode.category = `crystools ${commonPrefix}/Debugger`;
+ MetadataNode.shape = LiteGraph.BOX_SHAPE;
+ MetadataNode.title = `Show Metadata ${commonPrefix}`;
+ },
+});
diff --git a/web/debugger.ts b/web/debugger.ts
index 483d99a..23636e0 100644
--- a/web/debugger.ts
+++ b/web/debugger.ts
@@ -1,96 +1,94 @@
-// import { app } from '/scripts/app.js';
-// import { api } from '/scripts/api.js';
-// import { ComfyWidgets } from '/scripts/widgets.js';
-// import { commonPrefix, displayContext } from './common.js';
-// import type { LGraphNode } from './types.js'; // for better intellisense
-// import { LiteGraph } from './types.js';
-//
-// // "Show any" Node
-// app.registerExtension({
-// name: 'Crystools.Debugger.ConsoleAny',
-// beforeRegisterNodeDef(nodeType, nodeData, appFromArg) {
-// if (nodeData.name === 'Show any [Crystools]') {
-// // 3 is the index of the text field in the node
-// displayContext(nodeType, appFromArg, 3);
-// }
-// },
-// });
-//
-// app.registerExtension({
-// name: 'Crystools.Debugger.Metadata',
-//
-// registerCustomNodes() {
-// class MetadataNode extends LGraphNode {
-// // override serialize_widgets: boolean;
-// isVirtualNode: boolean;
-// widgets: any[];
-// static category: string;
-// static shape: number;
-// // static title: string;
-//
-// constructor() {
-// super();
-// this.serialize_widgets = false;
-// this.isVirtualNode = true;
-//
-// const widget = ComfyWidgets.STRING(this, '', [
-// '', {
-// default: '', multiline: true,
-// },
-// ], app).widget;
-// widget.inputEl.readOnly = true;
-// ComfyWidgets.BOOLEAN(this, 'Active', [
-// '', {
-// default: true,
-// },
-// ]);
-// ComfyWidgets.BOOLEAN(this, 'Parsed', [
-// '', {
-// default: true,
-// },
-// ]);
-// ComfyWidgets.COMBO(this, 'What', [
-// ['Prompt', 'Workflow'], {
-// default: 'Prompt',
-// },
-// ]);
-//
-// // It runs at finish on each prompt queue
-// api.addEventListener('executed', this.fillMetadataWidget, false);
-// }
-//
-// fillMetadataWidget = () => {
-// return 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;
-// });
-// };
-// }
-//
-// // 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";
-// },
-// });
+import { app } from '/scripts/app.js';
+import { api } from '/scripts/api.js';
+import { commonPrefix, displayContext } from './common.js';
+import type { ComfyNode, ComfyApp } from './liteGraph.js';
+import { LiteGraph, TLGraphNode, ComfyWidgets } from './liteGraph.js';
+
+console.log('debugger.ts');
+
+// "Show any" Node
+app.registerExtension({
+ name: 'Crystools.Debugger.ConsoleAny',
+ beforeRegisterNodeDef(nodeType: ComfyNode, nodeData: TLGraphNode, appFromArg: ComfyApp) {
+ if (nodeData.name === 'Show any [Crystools]') {
+ // 3 is the index of the text field in the node
+ console.log('nodeType', nodeType);
+ displayContext(nodeType, app, 3);
+ }
+ },
+});
+
+app.registerExtension({
+ name: 'Crystools.Debugger.Metadata',
+
+ registerCustomNodes() {
+ class MetadataNode extends TLGraphNode {
+ constructor() {
+ super();
+ // this.
+ this.serialize_widgets = false;
+ this.isVirtualNode = true;
+
+ const widget = ComfyWidgets.STRING(this, '', [
+ '', {
+ default: '', multiline: true,
+ },
+ ], app).widget;
+ widget.inputEl.readOnly = true;
+ ComfyWidgets.BOOLEAN(this, 'Active', [
+ '', {
+ default: true,
+ },
+ ]);
+ ComfyWidgets.BOOLEAN(this, 'Parsed', [
+ '', {
+ default: true,
+ },
+ ]);
+ ComfyWidgets.COMBO(this, 'What', [
+ ['Prompt', 'Workflow'], {
+ default: 'Prompt',
+ },
+ ]);
+
+ // It runs at finish on each prompt queue
+ api.addEventListener('executed', this.fillMetadataWidget, false);
+ }
+
+ fillMetadataWidget = () => {
+ return 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
+ console.log('workflow', what);
+ // @ts-ignore
+ result = workflow[what];
+ if (parsed) {
+ result = JSON.stringify(result, null, 2);
+ } else {
+ result = JSON.stringify(result);
+ }
+ }
+
+ output.value = result;
+ });
+ };
+ }
+
+ // 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';
+ },
+});
diff --git a/web/liteGraph.d.ts b/web/liteGraph.d.ts
new file mode 100644
index 0000000..25dc948
--- /dev/null
+++ b/web/liteGraph.d.ts
@@ -0,0 +1,18 @@
+export type * from './liteGraph.types';
+export * from '/scripts/widgets.js';
+import type { LGraphNode as TypeGraphNode, TypeLiteGraph } from './liteGraph.types';
+declare const LGraphNode: typeof TypeGraphNode;
+export declare class TLGraphNode extends LGraphNode {
+ static category: string;
+ static shape: number;
+ static color: string;
+ static bgcolor: string;
+ static collapsable: boolean;
+ widgets?: any[];
+ isVirtualNode?: boolean;
+ onResize?: (size: [number, number]) => void;
+ widgets_values?: any[];
+ name?: string;
+ prototype: TLGraphNode;
+}
+export declare const LiteGraph: TypeLiteGraph;
diff --git a/web/liteGraph.js b/web/liteGraph.js
new file mode 100644
index 0000000..ddf1067
--- /dev/null
+++ b/web/liteGraph.js
@@ -0,0 +1,44 @@
+export * from '/scripts/widgets.js';
+export class TLGraphNode extends LGraphNode {
+ constructor() {
+ super(...arguments);
+ Object.defineProperty(this, "widgets", {
+ enumerable: true,
+ configurable: true,
+ writable: true,
+ value: void 0
+ });
+ Object.defineProperty(this, "isVirtualNode", {
+ enumerable: true,
+ configurable: true,
+ writable: true,
+ value: void 0
+ });
+ Object.defineProperty(this, "onResize", {
+ enumerable: true,
+ configurable: true,
+ writable: true,
+ value: void 0
+ });
+ Object.defineProperty(this, "widgets_values", {
+ enumerable: true,
+ configurable: true,
+ writable: true,
+ value: void 0
+ });
+ Object.defineProperty(this, "name", {
+ enumerable: true,
+ configurable: true,
+ writable: true,
+ value: void 0
+ });
+ Object.defineProperty(this, "prototype", {
+ enumerable: true,
+ configurable: true,
+ writable: true,
+ value: void 0
+ });
+ }
+}
+console.log('liteGraph.ts');
+export const LiteGraph = window.LiteGraph;
diff --git a/web/liteGraph.ts b/web/liteGraph.ts
new file mode 100644
index 0000000..527c65d
--- /dev/null
+++ b/web/liteGraph.ts
@@ -0,0 +1,29 @@
+// /
+// A LOTS OF PATCHES FOR LITEGRAPH TYPES ¯\_(ツ)_/¯
+export type * from './liteGraph.types';
+export * from '/scripts/widgets.js';
+
+import type { LGraphNode as TypeGraphNode, TypeLiteGraph } from './liteGraph.types';
+declare const LGraphNode: typeof TypeGraphNode; // just for get the type
+
+export class TLGraphNode extends LGraphNode {
+ // on discovery...
+ static category: string;
+ static shape: number;
+ static color: string;
+ static bgcolor: string;
+ static collapsable: boolean;
+
+ widgets?: any[];
+ isVirtualNode?: boolean;
+ onResize?: (size: [number, number]) => void;
+ widgets_values?: any[];
+ name?: string;
+
+ prototype: TLGraphNode; // yes itself
+}
+
+console.log('liteGraph.ts');
+
+// from globals
+export const LiteGraph: TypeLiteGraph = (window as any).LiteGraph;
diff --git a/web/liteGraph.types.d.ts b/web/liteGraph.types.d.ts
new file mode 100644
index 0000000..9272ae7
--- /dev/null
+++ b/web/liteGraph.types.d.ts
@@ -0,0 +1,21 @@
+// A LOTS OF PATCHES FOR LITEGRAPH TYPES ¯\_(ツ)_/¯
+export type * from '/types/litegraph';
+export type * from '/scripts/widgets';
+export type * from '/scripts/app';
+export type { api } from '/scripts/api';
+
+import { LGraph, LiteGraph } from '/types/litegraph';
+export declare type TypeLiteGraph = typeof LiteGraph & {
+ graph: LGraph;
+};
+
+export declare type ComfyApi = typeof api;
+export declare type ComfyNode = any;
+
+// I prefer not use global, but if I change of opinion:
+// /
+// import { LGraphNode as TLGraphNode, LiteGraph as TLiteGraph } from '/types/litegraph';
+// export declare const LGraphNode: typeof TLGraphNode;
+// declare global {
+// const LGraphNode: LGraphNode;
+// }
diff --git a/web/types.d.ts b/web/types.d.ts
deleted file mode 100644
index 05cdf16..0000000
--- a/web/types.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/* es lint-disable */
-
-// import { LGraphNode as TLGraphNode, LiteGraph as TLiteGraph } from '/types/litegraph.js';
-import type { LGraph, LiteGraph, LGraphNode } from '/types/litegraph.js';
-export * from '/types/litegraph.js';
-
-// export declare const TLiteGraph: typeof LiteGraph;
-export declare type TLiteGraph = typeof LiteGraph & {
- graph: LGraph;
-};
-
-// export declare const TLGraphNode: typeof TLGraphNode = typeof TLGraphNode;
-export declare type TLGraphNode = LGraphNode & {
- widgets?: any[];
- isVirtualNode?: boolean;
- onResize?: (size: [number, number]) => void;
- prototype: typeof TLGraphNode;
-};
-
-console.log('types.ts');
-// I prefer not use global, but if I change of opinion:
-// /
-// import { LGraphNode as TLGraphNode, LiteGraph as TLiteGraph } from '/types/litegraph';
-// export declare const LGraphNode: typeof TLGraphNode;
-// declare global {
-// const LGraphNode: LGraphNode;
-// }