in progress

web/debugger.d.ts

@@ -0,0 +1 @@
+export {};

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}`;
+    },
+});

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';
+  },
+});

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;

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;

web/liteGraph.ts

@@ -0,0 +1,29 @@
+// / <reference path="/types/litegraph.d.ts" />
+// 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;

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:
+// / <reference path="./types.ts" />
+// import { LGraphNode as TLGraphNode, LiteGraph as TLiteGraph } from '/types/litegraph';
+// export declare const LGraphNode: typeof TLGraphNode;
+// declare global {
+//   const LGraphNode: LGraphNode;
+// }

web/types.d.ts

@@ -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:
-// / <reference path="./types.ts" />
-// import { LGraphNode as TLGraphNode, LiteGraph as TLiteGraph } from '/types/litegraph';
-// export declare const LGraphNode: typeof TLGraphNode;
-// declare global {
-//   const LGraphNode: LGraphNode;
-// }