Group nodes (#1776)

* setup ui unit tests * Refactoring, adding connections * Few tweaks * Fix type * Add general test * Refactored and extended test * move to describe * for groups * wip group nodes * Relink nodes Fixed widget values Convert to nodes * Reconnect on convert back * add via node menu + canvas refactor * Add ws event handling * fix using wrong node on widget serialize * allow reroute pipe fix control_after_generate configure * allow multiple images * Add test for converted widgets on missing nodes + fix crash * tidy * mores tests + refactor * throw earlier to get less confusing error * support outputs * more test * add ci action * use lts node * Fix? * Prevent connecting non matching combos * update * accidently removed npm i * Disable logging extension * fix naming allow control_after_generate custom name allow convert from reroutes * group node tests * Add executing info, custom node icon Tidy * internal reroute just works * Fix crash on virtual nodes e.g. note * Save group nodes to templates * Fix template nodes not being stored * Fix aborting convert * tidy * Fix reconnecting output links on convert to group * Fix links on convert to nodes * Handle missing internal nodes * Trigger callback on text change * Apply value on connect * Fix converted widgets not reconnecting * Group node updates - persist internal ids in current session - copy widget values when converting to nodes - fix issue serializing converted inputs * Resolve issue with sanitized node name * Fix internal id * allow outputs to be used internally and externally * order widgets on group node various fixes * fix imageupload widget requiring a specific name * groupnode imageupload test give widget unique name * Fix issue with external node links * Add VAE model * Fix internal node id check * fix potential crash * wip widget input support * more wip group widget inputs * Group node refactor Support for primitives/converted widgets * Fix convert to nodes with internal reroutes * fix applying primitive * Fix control widget values * fix test
2023-11-30 19:13:27 +00:00
parent d19de2753e
commit 7f469203b7
14 changed files with 2417 additions and 356 deletions
--- a/tests-ui/utils/ezgraph.js
+++ b/tests-ui/utils/ezgraph.js
@@ -150,7 +150,7 @@ export class EzNodeMenuItem {
 		if (selectNode) {
 			this.node.select();
 		}
-		this.item.callback.call(this.node.node, undefined, undefined, undefined, undefined, this.node.node);
+		return this.item.callback.call(this.node.node, undefined, undefined, undefined, undefined, this.node.node);
 	}
 }

@@ -240,8 +240,12 @@ export class EzNode {
 		return this.#makeLookupArray(() => this.app.canvas.getNodeMenuOptions(this.node), "content", EzNodeMenuItem);
 	}

-	select() {
-		this.app.canvas.selectNode(this.node);
+	get isRemoved() {
+		return !this.app.graph.getNodeById(this.id);
+	}
+
+	select(addToSelection = false) {
+		this.app.canvas.selectNode(this.node, addToSelection);
 	}

 	// /**
@@ -275,12 +279,17 @@ export class EzNode {
 			if (!s) return p;

 			const name = s[nameProperty];
+			const item = new ctor(this, i, s);
 			// @ts-ignore
-			if (!name || name in p) {
-				throw new Error(`Unable to store ${nodeProperty} ${name} on array as name conflicts.`);
+			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.push((p[name] = new ctor(this, i, s)));
+			p[name] = item;
 			return p;
 		}, Object.assign([], { $: this }));
 	}
@@ -348,6 +357,19 @@ export class EzGraph {
 			}, 10);
 		});
 	}
+
+	/**
+	 * @returns { Promise<{
+	 * 	workflow: {},
+	 * 	output: Record<string, {
+	 * 		class_name: string,
+	 * 		inputs: Record<string, [string, number] | unknown>
+	 * }>}> }
+	 */
+	toPrompt() {
+		// @ts-ignore
+		return this.app.graphToPrompt();
+	}
 }

 export const Ez = {
@@ -356,12 +378,12 @@ export const Ez = {
 	 * @example
 	 * const { ez, graph } = Ez.graph(app);
 	 * graph.clear();
-	 * const [model, clip, vae] = ez.CheckpointLoaderSimple();
-	 * const [pos] = ez.CLIPTextEncode(clip, { text: "positive" });
-	 * const [neg] = ez.CLIPTextEncode(clip, { text: "negative" });
-	 * const [latent] = ez.KSampler(model, pos, neg, ...ez.EmptyLatentImage());
-	 * const [image] = ez.VAEDecode(latent, vae);
-	 * const saveNode = ez.SaveImage(image).node;
+	 * const [model, clip, vae] = ez.CheckpointLoaderSimple().outputs;
+	 * const [pos] = ez.CLIPTextEncode(clip, { text: "positive" }).outputs;
+	 * const [neg] = ez.CLIPTextEncode(clip, { text: "negative" }).outputs;
+	 * const [latent] = ez.KSampler(model, pos, neg, ...ez.EmptyLatentImage().outputs).outputs;
+	 * const [image] = ez.VAEDecode(latent, vae).outputs;
+	 * const saveNode = ez.SaveImage(image);
 	 * console.log(saveNode);
 	 * graph.arrange();
 	 * @param { app } app
--- a/tests-ui/utils/index.js
+++ b/tests-ui/utils/index.js
@@ -1,21 +1,28 @@
 const { mockApi } = require("./setup");
 const { Ez } = require("./ezgraph");
+const lg = require("./litegraph");

 /**
 *
- * @param { Parameters<mockApi>[0] } config
+ * @param { Parameters<mockApi>[0] & { resetEnv?: boolean } } config
 * @returns
 */
 export async function start(config = undefined) {
+	if(config?.resetEnv) {
+		jest.resetModules();
+		jest.resetAllMocks();
+        lg.setup(global);
+	}
+
 	mockApi(config);
 	const { app } = require("../../web/scripts/app");
 	await app.setup();
-	return Ez.graph(app, global["LiteGraph"], global["LGraphCanvas"]);
+	return { ...Ez.graph(app, global["LiteGraph"], global["LGraphCanvas"]), app };
 }

 /**
- * @param { ReturnType<Ez["graph"]>["graph"] } graph 
- * @param { (hasReloaded: boolean) => (Promise<void> | void) } cb 
+ * @param { ReturnType<Ez["graph"]>["graph"] } graph
+ * @param { (hasReloaded: boolean) => (Promise<void> | void) } cb
 */
 export async function checkBeforeAndAfterReload(graph, cb) {
 	await cb(false);
@@ -24,10 +31,10 @@ export async function checkBeforeAndAfterReload(graph, cb) {
 }

 /**
- * @param { string } name 
- * @param { Record<string, string | [string | string[], any]> } input 
+ * @param { string } name
+ * @param { Record<string, string | [string | string[], any]> } input
 * @param { (string | string[])[] | Record<string, string | string[]> } output
- * @returns { Record<string, import("../../web/types/comfy").ComfyObjectInfo> } 
+ * @returns { Record<string, import("../../web/types/comfy").ComfyObjectInfo> }
 */
 export function makeNodeDef(name, input, output = {}) {
 	const nodeDef = {
@@ -37,19 +44,19 @@ export function makeNodeDef(name, input, output = {}) {
 		output_name: [],
 		output_is_list: [],
 		input: {
-			required: {}
+			required: {},
 		},
 	};
-	for(const k in input) {
+	for (const k in input) {
 		nodeDef.input.required[k] = typeof input[k] === "string" ? [input[k], {}] : [...input[k]];
 	}
-	if(output instanceof Array) {
+	if (output instanceof Array) {
 		output = output.reduce((p, c) => {
 			p[c] = c;
 			return p;
-		}, {})
+		}, {});
 	}
-	for(const k in output) {
+	for (const k in output) {
 		nodeDef.output.push(output[k]);
 		nodeDef.output_name.push(k);
 		nodeDef.output_is_list.push(false);
@@ -68,4 +75,31 @@ export function assertNotNullOrUndefined(x) {
 	expect(x).not.toEqual(null);
 	expect(x).not.toEqual(undefined);
 	return true;
-}
+}
+
+/**
+ *
+ * @param { ReturnType<Ez["graph"]>["ez"] } ez
+ * @param { ReturnType<Ez["graph"]>["graph"] } graph
+ */
+export function createDefaultWorkflow(ez, graph) {
+	graph.clear();
+	const ckpt = ez.CheckpointLoaderSimple();
+
+	const pos = ez.CLIPTextEncode(ckpt.outputs.CLIP, { text: "positive" });
+	const neg = ez.CLIPTextEncode(ckpt.outputs.CLIP, { text: "negative" });
+
+	const empty = ez.EmptyLatentImage();
+	const sampler = ez.KSampler(
+		ckpt.outputs.MODEL,
+		pos.outputs.CONDITIONING,
+		neg.outputs.CONDITIONING,
+		empty.outputs.LATENT
+	);
+
+	const decode = ez.VAEDecode(sampler.outputs.LATENT, ckpt.outputs.VAE);
+	const save = ez.SaveImage(decode.outputs.IMAGE);
+	graph.arrange();
+
+	return { ckpt, pos, neg, empty, sampler, decode, save };
+}
--- a/tests-ui/utils/setup.js
+++ b/tests-ui/utils/setup.js
@@ -30,16 +30,20 @@ export function mockApi({ mockExtensions, mockNodeDefs } = {}) {
 		mockNodeDefs = JSON.parse(fs.readFileSync(path.resolve("./data/object_info.json")));
 	}

+	const events = new EventTarget();
+	const mockApi = {
+		addEventListener: events.addEventListener.bind(events),
+		removeEventListener: events.removeEventListener.bind(events),
+		dispatchEvent: events.dispatchEvent.bind(events),
+		getSystemStats: jest.fn(),
+		getExtensions: jest.fn(() => mockExtensions),
+		getNodeDefs: jest.fn(() => mockNodeDefs),
+		init: jest.fn(),
+		apiURL: jest.fn((x) => "../../web/" + x),
+	};
 	jest.mock("../../web/scripts/api", () => ({
 		get api() {
-			return {
-				addEventListener: jest.fn(),
-				getSystemStats: jest.fn(),
-				getExtensions: jest.fn(() => mockExtensions),
-				getNodeDefs: jest.fn(() => mockNodeDefs),
-				init: jest.fn(),
-				apiURL: jest.fn((x) => "../../web/" + x),
-			};
+			return mockApi;
 		},
 	}));
 }