From 0628959772e355ee062ef7b2441fe454cbfea75b Mon Sep 17 00:00:00 2001 From: Crystian Date: Sat, 13 Jan 2024 17:59:21 +0100 Subject: [PATCH] in progress --- web/debugger.d.ts | 1 + web/debugger.js | 80 ++++++++++++++++- web/debugger.ts | 190 +++++++++++++++++++-------------------- web/liteGraph.d.ts | 18 ++++ web/liteGraph.js | 44 +++++++++ web/liteGraph.ts | 29 ++++++ web/liteGraph.types.d.ts | 21 +++++ web/types.d.ts | 27 ------ 8 files changed, 286 insertions(+), 124 deletions(-) create mode 100644 web/liteGraph.d.ts create mode 100644 web/liteGraph.js create mode 100644 web/liteGraph.ts create mode 100644 web/liteGraph.types.d.ts delete mode 100644 web/types.d.ts 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; -// }