diff --git a/web/common.d.ts b/web/common.d.ts index 6429e1c..8685b36 100644 --- a/web/common.d.ts +++ b/web/common.d.ts @@ -1,3 +1,3 @@ -import type { TLiteGraph, TLGraphNode } from './types.js'; +import type { ComfyApp, TLGraphNode } from './liteGraph.js'; export declare const commonPrefix = "\uD83E\uDE9B"; -export declare function displayContext(nodeType: TLGraphNode, app: TLiteGraph, index?: number, serialize_widgets?: boolean, isVirtualNode?: boolean): void; +export declare function displayContext(nodeType: TLGraphNode, appFromArg: ComfyApp, index?: number, serialize_widgets?: boolean, isVirtualNode?: boolean): void; diff --git a/web/common.js b/web/common.js index b43b6f4..04c1ee4 100644 --- a/web/common.js +++ b/web/common.js @@ -1,8 +1,6 @@ -import { ComfyWidgets } from '/scripts/widgets.js'; -import { app as appFromScript } from '/scripts/app.js'; -console.log('commodsan.ta2saaa'); +import { ComfyWidgets } from './liteGraph.js'; export const commonPrefix = '🪛'; -export function displayContext(nodeType, app, index = 0, serialize_widgets = false, isVirtualNode = false) { +export function displayContext(nodeType, appFromArg, index = 0, serialize_widgets = false, isVirtualNode = false) { function populate(text) { if (this.widgets) { const pos = this.widgets.findIndex((w) => w.name === 'text'); @@ -15,18 +13,18 @@ export function displayContext(nodeType, app, index = 0, serialize_widgets = fal } this.serialize_widgets = serialize_widgets; this.isVirtualNode = isVirtualNode; - const w = ComfyWidgets.STRING(this, 'text', [ + const widget = ComfyWidgets.STRING(this, 'text', [ 'STRING', { multiline: true, }, - ], app).widget; - w.inputEl.readOnly = true; - w.inputEl.style.opacity = 0.6; + ], appFromArg).widget; + widget.inputEl.readOnly = true; + widget.inputEl.style.opacity = 0.6; if (Array.isArray(text)) { text = text[index]; } - w.value = text || ''; - w.serializeValue = async () => { }; + widget.value = text || ''; + widget.serializeValue = async () => { }; requestAnimationFrame(() => { const sz = this.computeSize(); if (sz[0] < this.size[0]) { @@ -36,35 +34,19 @@ export function displayContext(nodeType, app, index = 0, serialize_widgets = fal sz[1] = this.size[1]; } this.onResize?.(sz); - app.graph.setDirtyCanvas(true, false); + appFromArg.graph.setDirtyCanvas(true, false); }); } - const onExecuted = nodeType.prototype.onExecuted; + const onExecutedOriginal = nodeType.prototype.onExecuted; nodeType.prototype.onExecuted = function (message) { - onExecuted?.apply(this, arguments); + onExecutedOriginal?.apply(this, arguments); populate.call(this, message.text); }; - const onConfigure = nodeType.prototype.onConfigure; + const onConfigureOriginal = nodeType.prototype.onConfigure; nodeType.prototype.onConfigure = function () { - onConfigure?.apply(this, arguments); + onConfigureOriginal?.apply(this, arguments); if (this.widgets_values?.length) { populate.call(this, this.widgets_values); } }; } -const propagateOutputToDependentsNodes = function (output, value) { - if (output.links?.length) { - for (const l of output.links) { - const link_info = appFromScript.graph.links[l]; - const outNode = appFromScript.graph.getNodeById(link_info.target_id); - const outIn = outNode?.inputs?.[link_info.target_slot]; - if (outIn.widget) { - const widget = outNode.widgets.find((w) => w.name === outIn.widget.name); - if (!widget) { - continue; - } - widget.value = value; - } - } - } -}; diff --git a/web/common.ts b/web/common.ts index a0eb39d..1dab183 100644 --- a/web/common.ts +++ b/web/common.ts @@ -1,12 +1,11 @@ -import { ComfyWidgets } from '/scripts/widgets.js'; -import { app as appFromScript } from '/scripts/app.js'; -import type { TLiteGraph, TLGraphNode, serializedLGraph, IWidget } from './types.js'; - -console.log('commodsan.ta2saaa'); +import type { ComfyApp, TLGraphNode } from './liteGraph.js'; +import { ComfyWidgets } from './liteGraph.js'; export const commonPrefix = '🪛'; + export function displayContext( - nodeType: TLGraphNode, app: TLiteGraph, + nodeType: TLGraphNode, + appFromArg: ComfyApp, index = 0, serialize_widgets = false, isVirtualNode = false ) { function populate(this: TLGraphNode, text: string | string[]) { @@ -14,6 +13,7 @@ export function displayContext( const pos = this.widgets.findIndex((w) => w.name === 'text'); if (pos !== -1) { for (let i = pos; i < this.widgets.length; i++) { + this.widgets[i].onRemove?.(); } this.widgets.length = pos; @@ -24,19 +24,19 @@ export function displayContext( this.serialize_widgets = serialize_widgets; this.isVirtualNode = isVirtualNode; - const w = ComfyWidgets.STRING(this, 'text', [ + const widget = ComfyWidgets.STRING(this, 'text', [ 'STRING', { multiline: true, }, - ], app).widget; - w.inputEl.readOnly = true; - w.inputEl.style.opacity = 0.6; + ], appFromArg).widget; + widget.inputEl.readOnly = true; + widget.inputEl.style.opacity = 0.6; if (Array.isArray(text)) { text = text[index]; } - w.value = text || ''; + widget.value = text || ''; // eslint-disable-next-line @typescript-eslint/no-empty-function - w.serializeValue = async() => {}; // just for no serialized to itself! + widget.serializeValue = async() => {}; // just for no serialized to itself! requestAnimationFrame(() => { const sz = this.computeSize(); @@ -47,20 +47,24 @@ export function displayContext( sz[1] = this.size[1]; } this.onResize?.(sz); - app.graph.setDirtyCanvas(true, false); + appFromArg.graph.setDirtyCanvas(true, false); }); } // When the node is executed we will be sent the input text, display this in the widget - const onExecuted = nodeType.prototype.onExecuted; + // @ts-ignore + const onExecutedOriginal = nodeType.prototype.onExecuted; + // @ts-ignore nodeType.prototype.onExecuted = function(message: { text: string }) { - onExecuted?.apply(this, arguments); + onExecutedOriginal?.apply(this, arguments); populate.call(this, message.text); }; - const onConfigure = nodeType.prototype.onConfigure; + // eslint-disable-next-line @typescript-eslint/unbound-method + const onConfigureOriginal = nodeType.prototype.onConfigure; nodeType.prototype.onConfigure = function() { - onConfigure?.apply(this, arguments); + // @ts-ignore + onConfigureOriginal?.apply(this, arguments); if (this.widgets_values?.length) { populate.call(this, this.widgets_values); } @@ -69,21 +73,19 @@ export function displayContext( // propagate the output value to the dependents nodes, it does not work with some nodes ¯\_(ツ)_/¯ -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const propagateOutputToDependentsNodes = function(output: serializedLGraph, value: string) { - if (output.links?.length) { - for (const l of output.links) { - // @ts-ignore - const link_info = appFromScript.graph.links[l]; - const outNode = appFromScript.graph.getNodeById(link_info.target_id); - const outIn = outNode?.inputs?.[link_info.target_slot]; - if (outIn.widget) { - const widget = outNode.widgets.find((w: IWidget) => w.name === outIn.widget.name); - if (!widget) { - continue; - } - widget.value = value; - } - } - } -}; +// const propagateOutputToDependentsNodes = function(output: serializedLGraph, value: string) { +// if (output.links?.length) { +// for (const l of output.links) { +// const link_info = app.graph.links[l]; +// const outNode = app.graph.getNodeById(link_info.target_id); +// const outIn = outNode?.inputs?.[link_info.target_slot]; +// if (outIn.widget) { +// const widget = outNode.widgets.find((w: IWidget) => w.name === outIn.widget.name); +// if (!widget) { +// continue; +// } +// widget.value = value; +// } +// } +// } +// }; diff --git a/web/debugger.js b/web/debugger.js index 871df5b..1f9e3c8 100644 --- a/web/debugger.js +++ b/web/debugger.js @@ -7,8 +7,7 @@ app.registerExtension({ name: 'Crystools.Debugger.ConsoleAny', beforeRegisterNodeDef(nodeType, nodeData, appFromArg) { if (nodeData.name === 'Show any [Crystools]') { - console.log('nodeType', nodeType); - displayContext(nodeType, app, 3); + displayContext(nodeType, appFromArg, 3); } }, }); @@ -17,7 +16,7 @@ app.registerExtension({ registerCustomNodes() { class MetadataNode extends TLGraphNode { constructor() { - super(); + super(`Show Metadata ${commonPrefix}`); Object.defineProperty(this, "fillMetadataWidget", { enumerable: true, configurable: true, @@ -32,7 +31,6 @@ app.registerExtension({ 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); @@ -74,6 +72,5 @@ app.registerExtension({ 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 23636e0..d6202b9 100644 --- a/web/debugger.ts +++ b/web/debugger.ts @@ -12,19 +12,17 @@ app.registerExtension({ 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); + displayContext(nodeType, appFromArg, 3); } }, }); app.registerExtension({ name: 'Crystools.Debugger.Metadata', - registerCustomNodes() { class MetadataNode extends TLGraphNode { constructor() { - super(); + super(`Show Metadata ${commonPrefix}`); // this. this.serialize_widgets = false; this.isVirtualNode = true; @@ -59,7 +57,6 @@ app.registerExtension({ 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; @@ -67,7 +64,6 @@ app.registerExtension({ if (active) { what = what === 'prompt' ? 'output' : what; // little fix for better understanding - console.log('workflow', what); // @ts-ignore result = workflow[what]; if (parsed) { @@ -86,7 +82,6 @@ app.registerExtension({ 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 index 25dc948..054996a 100644 --- a/web/liteGraph.d.ts +++ b/web/liteGraph.d.ts @@ -1,14 +1,18 @@ export type * from './liteGraph.types'; export * from '/scripts/widgets.js'; -import type { LGraphNode as TypeGraphNode, TypeLiteGraph } from './liteGraph.types'; +import type { IWidget as IWidgetOld, LGraphNode as TypeGraphNode, TypeLiteGraph } from './liteGraph.types'; declare const LGraphNode: typeof TypeGraphNode; +export interface IWidget extends IWidgetOld { + onRemove?: () => void; + serializeValue?: () => Promise; +} export declare class TLGraphNode extends LGraphNode { static category: string; static shape: number; static color: string; static bgcolor: string; static collapsable: boolean; - widgets?: any[]; + widgets?: IWidget[]; isVirtualNode?: boolean; onResize?: (size: [number, number]) => void; widgets_values?: any[]; diff --git a/web/liteGraph.ts b/web/liteGraph.ts index 527c65d..264e3ff 100644 --- a/web/liteGraph.ts +++ b/web/liteGraph.ts @@ -3,9 +3,14 @@ export type * from './liteGraph.types'; export * from '/scripts/widgets.js'; -import type { LGraphNode as TypeGraphNode, TypeLiteGraph } from './liteGraph.types'; +import type { IWidget as IWidgetOld, LGraphNode as TypeGraphNode, TypeLiteGraph } from './liteGraph.types'; declare const LGraphNode: typeof TypeGraphNode; // just for get the type +export interface IWidget extends IWidgetOld { + onRemove?: () => void; + serializeValue?: () => Promise; +} + export class TLGraphNode extends LGraphNode { // on discovery... static category: string; @@ -14,7 +19,7 @@ export class TLGraphNode extends LGraphNode { static bgcolor: string; static collapsable: boolean; - widgets?: any[]; + widgets?: IWidget[]; isVirtualNode?: boolean; onResize?: (size: [number, number]) => void; widgets_values?: any[]; diff --git a/web/liteGraph.types.d.ts b/web/liteGraph.types.d.ts index 9272ae7..a2d158e 100644 --- a/web/liteGraph.types.d.ts +++ b/web/liteGraph.types.d.ts @@ -9,7 +9,7 @@ export declare type TypeLiteGraph = typeof LiteGraph & { graph: LGraph; }; -export declare type ComfyApi = typeof api; +// export declare type ComfyApi = typeof api; export declare type ComfyNode = any; // I prefer not use global, but if I change of opinion: