nodes/crystian-ComfyUI-Crystools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sufriendo con TS!

Browse Source
This commit is contained in:
Crystian
2024-01-13 20:16:28 +01:00
parent 0628959772
commit 32b4bbc2f9
8 changed files with 70 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/common.d.ts
Vendored
+2 -2
View File
@@ -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;
web/common.js
+13 -31
View File
@@ -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;
}
}
}
};
web/common.ts
+37 -35
View File
@@ -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;
// }
// }
// }
// };
web/debugger.js
+2 -5
View File
@@ -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}`;
},
});
web/debugger.ts
+2 -7
View File
@@ -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';
web/liteGraph.d.ts
Vendored
+6 -2
View File
@@ -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<void>;
}
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[];
web/liteGraph.ts
+7 -2
View File
@@ -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<void>;
}
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[];
web/liteGraph.types.d.ts
Vendored
+1 -1
View File
@@ -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: