mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 02:32:18 +00:00
Apply new code format standard (#217)
This commit is contained in:
Chenlei Hu
@@ -1,4 +1,4 @@
|
||||
import type { LiteGraph, LGraphCanvas } from "@comfyorg/litegraph";
|
||||
import type { LiteGraph, LGraphCanvas } from '@comfyorg/litegraph'
|
||||
|
||||
/**
|
||||
* @typedef { import("./src/scripts/app")["app"] } app
|
||||
@@ -11,34 +11,28 @@ import type { LiteGraph, LGraphCanvas } from "@comfyorg/litegraph";
|
||||
* @typedef { (...args: EzOutput[] | [...EzOutput[], Record<string, unknown>]) => EzNode } EzNodeFactory
|
||||
*/
|
||||
|
||||
export type EzNameSpace = Record<string, (...args) => EzNode>;
|
||||
export type EzNameSpace = Record<string, (...args) => EzNode>
|
||||
|
||||
export class EzConnection {
|
||||
/** @type { app } */
|
||||
app;
|
||||
app
|
||||
/** @type { InstanceType<LG["LLink"]> } */
|
||||
link;
|
||||
link
|
||||
|
||||
get originNode() {
|
||||
return new EzNode(
|
||||
this.app,
|
||||
this.app.graph.getNodeById(this.link.origin_id)
|
||||
);
|
||||
return new EzNode(this.app, this.app.graph.getNodeById(this.link.origin_id))
|
||||
}
|
||||
|
||||
get originOutput() {
|
||||
return this.originNode.outputs[this.link.origin_slot];
|
||||
return this.originNode.outputs[this.link.origin_slot]
|
||||
}
|
||||
|
||||
get targetNode() {
|
||||
return new EzNode(
|
||||
this.app,
|
||||
this.app.graph.getNodeById(this.link.target_id)
|
||||
);
|
||||
return new EzNode(this.app, this.app.graph.getNodeById(this.link.target_id))
|
||||
}
|
||||
|
||||
get targetInput() {
|
||||
return this.targetNode.inputs[this.link.target_slot];
|
||||
return this.targetNode.inputs[this.link.target_slot]
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -46,34 +40,34 @@ export class EzConnection {
|
||||
* @param { InstanceType<LG["LLink"]> } link
|
||||
*/
|
||||
constructor(app, link) {
|
||||
this.app = app;
|
||||
this.link = link;
|
||||
this.app = app
|
||||
this.link = link
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
this.targetInput.disconnect();
|
||||
this.targetInput.disconnect()
|
||||
}
|
||||
}
|
||||
|
||||
export class EzSlot {
|
||||
/** @type { EzNode } */
|
||||
node;
|
||||
node
|
||||
/** @type { number } */
|
||||
index;
|
||||
index
|
||||
|
||||
/**
|
||||
* @param { EzNode } node
|
||||
* @param { number } index
|
||||
*/
|
||||
constructor(node, index) {
|
||||
this.node = node;
|
||||
this.index = index;
|
||||
this.node = node
|
||||
this.index = index
|
||||
}
|
||||
}
|
||||
|
||||
export class EzInput extends EzSlot {
|
||||
/** @type { INodeInputSlot } */
|
||||
input;
|
||||
input
|
||||
|
||||
/**
|
||||
* @param { EzNode } node
|
||||
@@ -81,26 +75,26 @@ export class EzInput extends EzSlot {
|
||||
* @param { INodeInputSlot } input
|
||||
*/
|
||||
constructor(node, index, input) {
|
||||
super(node, index);
|
||||
this.input = input;
|
||||
super(node, index)
|
||||
this.input = input
|
||||
}
|
||||
|
||||
get connection() {
|
||||
const link = this.node.node.inputs?.[this.index]?.link;
|
||||
const link = this.node.node.inputs?.[this.index]?.link
|
||||
if (link == null) {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
return new EzConnection(this.node.app, this.node.app.graph.links[link]);
|
||||
return new EzConnection(this.node.app, this.node.app.graph.links[link])
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
this.node.node.disconnectInput(this.index);
|
||||
this.node.node.disconnectInput(this.index)
|
||||
}
|
||||
}
|
||||
|
||||
export class EzOutput extends EzSlot {
|
||||
/** @type { INodeOutputSlot } */
|
||||
output;
|
||||
output
|
||||
|
||||
/**
|
||||
* @param { EzNode } node
|
||||
@@ -108,21 +102,21 @@ export class EzOutput extends EzSlot {
|
||||
* @param { INodeOutputSlot } output
|
||||
*/
|
||||
constructor(node, index, output) {
|
||||
super(node, index);
|
||||
this.output = output;
|
||||
super(node, index)
|
||||
this.output = output
|
||||
}
|
||||
|
||||
get connections() {
|
||||
return (this.node.node.outputs?.[this.index]?.links ?? []).map(
|
||||
(l) => new EzConnection(this.node.app, this.node.app.graph.links[l])
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param { EzInput } input
|
||||
*/
|
||||
connectTo(input) {
|
||||
if (!input) throw new Error("Invalid input");
|
||||
if (!input) throw new Error('Invalid input')
|
||||
|
||||
/**
|
||||
* @type { LG["LLink"] | null }
|
||||
@@ -131,27 +125,27 @@ export class EzOutput extends EzSlot {
|
||||
this.index,
|
||||
input.node.node,
|
||||
input.index
|
||||
);
|
||||
)
|
||||
if (!link) {
|
||||
const inp = input.input;
|
||||
const inName = inp.name || inp.label || inp.type;
|
||||
const inp = input.input
|
||||
const inName = inp.name || inp.label || inp.type
|
||||
throw new Error(
|
||||
`Connecting from ${input.node.node.type}#${input.node.id}[${inName}#${input.index}] -> ${this.node.node.type}#${this.node.id}[${
|
||||
this.output.name ?? this.output.type
|
||||
}#${this.index}] failed.`
|
||||
);
|
||||
)
|
||||
}
|
||||
return link;
|
||||
return link
|
||||
}
|
||||
}
|
||||
|
||||
export class EzNodeMenuItem {
|
||||
/** @type { EzNode } */
|
||||
node;
|
||||
node
|
||||
/** @type { number } */
|
||||
index;
|
||||
index
|
||||
/** @type { ContextMenuItem } */
|
||||
item;
|
||||
item
|
||||
|
||||
/**
|
||||
* @param { EzNode } node
|
||||
@@ -159,18 +153,18 @@ export class EzNodeMenuItem {
|
||||
* @param { ContextMenuItem } item
|
||||
*/
|
||||
constructor(node, index, item) {
|
||||
this.node = node;
|
||||
this.index = index;
|
||||
this.item = item;
|
||||
this.node = node
|
||||
this.index = index
|
||||
this.item = item
|
||||
}
|
||||
|
||||
call(selectNode = true) {
|
||||
if (!this.item?.callback)
|
||||
throw new Error(
|
||||
`Menu Item ${this.item?.content ?? "[null]"} has no callback.`
|
||||
);
|
||||
`Menu Item ${this.item?.content ?? '[null]'} has no callback.`
|
||||
)
|
||||
if (selectNode) {
|
||||
this.node.select();
|
||||
this.node.select()
|
||||
}
|
||||
return this.item.callback.call(
|
||||
this.node.node,
|
||||
@@ -179,17 +173,17 @@ export class EzNodeMenuItem {
|
||||
undefined,
|
||||
undefined,
|
||||
this.node.node
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export class EzWidget {
|
||||
/** @type { EzNode } */
|
||||
node;
|
||||
node
|
||||
/** @type { number } */
|
||||
index;
|
||||
index
|
||||
/** @type { IWidget } */
|
||||
widget;
|
||||
widget
|
||||
|
||||
/**
|
||||
* @param { EzNode } node
|
||||
@@ -197,104 +191,104 @@ export class EzWidget {
|
||||
* @param { IWidget } widget
|
||||
*/
|
||||
constructor(node, index, widget) {
|
||||
this.node = node;
|
||||
this.index = index;
|
||||
this.widget = widget;
|
||||
this.node = node
|
||||
this.index = index
|
||||
this.widget = widget
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.widget.value;
|
||||
return this.widget.value
|
||||
}
|
||||
|
||||
set value(v) {
|
||||
this.widget.value = v;
|
||||
this.widget.callback?.call?.(this.widget, v);
|
||||
this.widget.value = v
|
||||
this.widget.callback?.call?.(this.widget, v)
|
||||
}
|
||||
|
||||
get isConvertedToInput() {
|
||||
// @ts-ignore : this type is valid for converted widgets
|
||||
return this.widget.type === "converted-widget";
|
||||
return this.widget.type === 'converted-widget'
|
||||
}
|
||||
|
||||
getConvertedInput() {
|
||||
if (!this.isConvertedToInput)
|
||||
throw new Error(`Widget ${this.widget.name} is not converted to input.`);
|
||||
throw new Error(`Widget ${this.widget.name} is not converted to input.`)
|
||||
|
||||
return this.node.inputs.find(
|
||||
(inp) => inp.input["widget"]?.name === this.widget.name
|
||||
);
|
||||
(inp) => inp.input['widget']?.name === this.widget.name
|
||||
)
|
||||
}
|
||||
|
||||
convertToWidget() {
|
||||
if (!this.isConvertedToInput)
|
||||
throw new Error(
|
||||
`Widget ${this.widget.name} cannot be converted as it is already a widget.`
|
||||
);
|
||||
var menu = this.node.menu["Convert Input to Widget"].item.submenu.options;
|
||||
)
|
||||
var menu = this.node.menu['Convert Input to Widget'].item.submenu.options
|
||||
var index = menu.findIndex(
|
||||
(a) => a.content == `Convert ${this.widget.name} to widget`
|
||||
);
|
||||
menu[index].callback.call();
|
||||
)
|
||||
menu[index].callback.call()
|
||||
}
|
||||
|
||||
convertToInput() {
|
||||
if (this.isConvertedToInput)
|
||||
throw new Error(
|
||||
`Widget ${this.widget.name} cannot be converted as it is already an input.`
|
||||
);
|
||||
var menu = this.node.menu["Convert Widget to Input"].item.submenu.options;
|
||||
)
|
||||
var menu = this.node.menu['Convert Widget to Input'].item.submenu.options
|
||||
var index = menu.findIndex(
|
||||
(a) => a.content == `Convert ${this.widget.name} to input`
|
||||
);
|
||||
menu[index].callback.call();
|
||||
)
|
||||
menu[index].callback.call()
|
||||
}
|
||||
}
|
||||
|
||||
export class EzNode {
|
||||
/** @type { app } */
|
||||
app;
|
||||
app
|
||||
/** @type { LGNode } */
|
||||
node;
|
||||
node
|
||||
|
||||
/**
|
||||
* @param { app } app
|
||||
* @param { LGNode } node
|
||||
*/
|
||||
constructor(app, node) {
|
||||
this.app = app;
|
||||
this.node = node;
|
||||
this.app = app
|
||||
this.node = node
|
||||
}
|
||||
|
||||
get id() {
|
||||
return this.node.id;
|
||||
return this.node.id
|
||||
}
|
||||
|
||||
get inputs() {
|
||||
return this.#makeLookupArray("inputs", "name", EzInput);
|
||||
return this.#makeLookupArray('inputs', 'name', EzInput)
|
||||
}
|
||||
|
||||
get outputs() {
|
||||
return this.#makeLookupArray("outputs", "name", EzOutput);
|
||||
return this.#makeLookupArray('outputs', 'name', EzOutput)
|
||||
}
|
||||
|
||||
get widgets() {
|
||||
return this.#makeLookupArray("widgets", "name", EzWidget);
|
||||
return this.#makeLookupArray('widgets', 'name', EzWidget)
|
||||
}
|
||||
|
||||
get menu() {
|
||||
return this.#makeLookupArray(
|
||||
() => this.app.canvas.getNodeMenuOptions(this.node),
|
||||
"content",
|
||||
'content',
|
||||
EzNodeMenuItem
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
get isRemoved() {
|
||||
return !this.app.graph.getNodeById(this.id);
|
||||
return !this.app.graph.getNodeById(this.id)
|
||||
}
|
||||
|
||||
select(addToSelection = false) {
|
||||
this.app.canvas.selectNode(this.node, addToSelection);
|
||||
this.app.canvas.selectNode(this.node, addToSelection)
|
||||
}
|
||||
|
||||
// /**
|
||||
@@ -323,60 +317,60 @@ export class EzNode {
|
||||
*/
|
||||
#makeLookupArray(nodeProperty, nameProperty, ctor) {
|
||||
const items =
|
||||
typeof nodeProperty === "function"
|
||||
typeof nodeProperty === 'function'
|
||||
? nodeProperty()
|
||||
: this.node[nodeProperty];
|
||||
: this.node[nodeProperty]
|
||||
// @ts-ignore
|
||||
return (items ?? []).reduce(
|
||||
(p, s, i) => {
|
||||
if (!s) return p;
|
||||
if (!s) return p
|
||||
|
||||
const name = s[nameProperty];
|
||||
const item = new ctor(this, i, s);
|
||||
const name = s[nameProperty]
|
||||
const item = new ctor(this, i, s)
|
||||
// @ts-ignore
|
||||
p.push(item);
|
||||
p.push(item)
|
||||
if (name) {
|
||||
// @ts-ignore
|
||||
if (name in p) {
|
||||
throw new Error(
|
||||
`Unable to store ${nodeProperty} ${name} on array as name conflicts.`
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
// @ts-ignore
|
||||
p[name] = item;
|
||||
return p;
|
||||
p[name] = item
|
||||
return p
|
||||
},
|
||||
Object.assign([], { $: this })
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export class EzGraph {
|
||||
/** @type { app } */
|
||||
app;
|
||||
app
|
||||
|
||||
/**
|
||||
* @param { app } app
|
||||
*/
|
||||
constructor(app) {
|
||||
this.app = app;
|
||||
this.app = app
|
||||
}
|
||||
|
||||
get nodes() {
|
||||
return this.app.graph._nodes.map((n) => new EzNode(this.app, n));
|
||||
return this.app.graph._nodes.map((n) => new EzNode(this.app, n))
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.app.graph.clear();
|
||||
this.app.graph.clear()
|
||||
}
|
||||
|
||||
arrange() {
|
||||
this.app.graph.arrange();
|
||||
this.app.graph.arrange()
|
||||
}
|
||||
|
||||
stringify() {
|
||||
return JSON.stringify(this.app.graph.serialize(), undefined);
|
||||
return JSON.stringify(this.app.graph.serialize(), undefined)
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -384,36 +378,36 @@ export class EzGraph {
|
||||
* @returns { EzNode }
|
||||
*/
|
||||
find(obj) {
|
||||
let match;
|
||||
let id;
|
||||
if (typeof obj === "number") {
|
||||
id = obj;
|
||||
let match
|
||||
let id
|
||||
if (typeof obj === 'number') {
|
||||
id = obj
|
||||
} else {
|
||||
id = obj.id;
|
||||
id = obj.id
|
||||
}
|
||||
|
||||
match = this.app.graph.getNodeById(id);
|
||||
match = this.app.graph.getNodeById(id)
|
||||
|
||||
if (!match) {
|
||||
throw new Error(`Unable to find node with ID ${id}.`);
|
||||
throw new Error(`Unable to find node with ID ${id}.`)
|
||||
}
|
||||
|
||||
return new EzNode(this.app, match);
|
||||
return new EzNode(this.app, match)
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns { Promise<void> }
|
||||
*/
|
||||
reload() {
|
||||
const graph = JSON.parse(JSON.stringify(this.app.graph.serialize()));
|
||||
const graph = JSON.parse(JSON.stringify(this.app.graph.serialize()))
|
||||
return new Promise((r) => {
|
||||
this.app.graph.clear();
|
||||
this.app.graph.clear()
|
||||
setTimeout(async () => {
|
||||
await this.app.loadGraphData(graph);
|
||||
await this.app.loadGraphData(graph)
|
||||
// @ts-ignore
|
||||
r();
|
||||
}, 10);
|
||||
});
|
||||
r()
|
||||
}, 10)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -426,7 +420,7 @@ export class EzGraph {
|
||||
*/
|
||||
toPrompt() {
|
||||
// @ts-ignore
|
||||
return this.app.graphToPrompt();
|
||||
return this.app.graphToPrompt()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -452,10 +446,10 @@ export const Ez = {
|
||||
*/
|
||||
graph(app, LiteGraph, LGraphCanvas, clearGraph = true) {
|
||||
// Always set the active canvas so things work
|
||||
LGraphCanvas.active_canvas = app.canvas;
|
||||
LGraphCanvas.active_canvas = app.canvas
|
||||
|
||||
if (clearGraph) {
|
||||
app.graph.clear();
|
||||
app.graph.clear()
|
||||
}
|
||||
|
||||
// @ts-ignore : this proxy handles utility methods & node creation
|
||||
@@ -463,35 +457,35 @@ export const Ez = {
|
||||
{},
|
||||
{
|
||||
get(_, p) {
|
||||
if (typeof p !== "string") throw new Error("Invalid node");
|
||||
const node = LiteGraph.createNode(p);
|
||||
if (!node) throw new Error(`Unknown node "${p}"`);
|
||||
app.graph.add(node);
|
||||
if (typeof p !== 'string') throw new Error('Invalid node')
|
||||
const node = LiteGraph.createNode(p)
|
||||
if (!node) throw new Error(`Unknown node "${p}"`)
|
||||
app.graph.add(node)
|
||||
|
||||
/**
|
||||
* @param {Parameters<EzNodeFactory>} args
|
||||
*/
|
||||
return function (...args) {
|
||||
const ezNode = new EzNode(app, node);
|
||||
const inputs = ezNode.inputs;
|
||||
const ezNode = new EzNode(app, node)
|
||||
const inputs = ezNode.inputs
|
||||
|
||||
let slot = 0;
|
||||
let slot = 0
|
||||
for (const arg of args) {
|
||||
if (arg instanceof EzOutput) {
|
||||
arg.connectTo(inputs[slot++]);
|
||||
arg.connectTo(inputs[slot++])
|
||||
} else {
|
||||
for (const k in arg) {
|
||||
ezNode.widgets[k].value = arg[k];
|
||||
ezNode.widgets[k].value = arg[k]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ezNode;
|
||||
};
|
||||
},
|
||||
return ezNode
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
)
|
||||
|
||||
return { graph: new EzGraph(app), ez: factory };
|
||||
},
|
||||
};
|
||||
return { graph: new EzGraph(app), ez: factory }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user