Save group nodes to templates

web/extensions/core/groupNode.js

@@ -2,10 +2,22 @@ import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
 import { getWidgetType } from "../../scripts/widgets.js";
 
-const IS_GROUP_NODE = Symbol();
+export const IS_GROUP_NODE = Symbol();
-const GROUP_DATA = Symbol();
+export const GROUP_DATA = Symbol();
 const GROUP_SLOTS = Symbol();
 
+export async function registerGroupNodes(groupNodes, source, prefix) {
+	if (!groupNodes) return;
+
+	for (const g in groupNodes) {
+		const def = buildNodeDef(groupNodes[g], g, globalDefs, source);
+		if (prefix) {
+			def.display_name = prefix + "/" + def.display_name;
+		}
+		await app.registerNodeDef(source + "/" + g, def);
+	}
+}
+
 function getLinks(config) {
 	const linksFrom = {};
 	const linksTo = {};
@@ -30,7 +42,7 @@ function getLinks(config) {
 	return { linksTo, linksFrom };
 }
 
-function buildNodeDef(config, nodeName, defs, workflow) {
+function buildNodeDef(config, nodeName, defs, source = "workflow") {
 	const slots = {
 		inputs: {},
 		widgets: {},
@@ -43,7 +55,7 @@ function buildNodeDef(config, nodeName, defs, workflow) {
 		output_is_list: [],
 		name: nodeName,
 		display_name: nodeName,
-		category: "group nodes" + (workflow ? "/workflow" : ""),
+		category: "group nodes" + ("/" + source),
 		input: { required: {} },
 
 		[IS_GROUP_NODE]: true,
@@ -221,7 +233,7 @@ class ConvertToGroupAction {
 			link.push(type);
 		}
 
-		const def = buildNodeDef(config, name, globalDefs, true);
+		const def = buildNodeDef(config, name, globalDefs);
 		await app.registerNodeDef("workflow/" + name, def);
 		return { config, def };
 	}
@@ -380,13 +392,7 @@ const ext = {
 		}
 	},
 	async beforeConfigureGraph(graphData) {
-		const groupNodes = graphData?.extra?.groupNodes;
+		registerGroupNodes(graphData?.extra?.groupNodes, "workflow");
-		if (!groupNodes) return;
-
-		for (const name in groupNodes) {
-			const def = buildNodeDef(groupNodes[name], name, globalDefs, true);
-			await app.registerNodeDef("workflow/" + name, def);
-		}
 	},
 	addCustomNodeDefs(defs) {
 		globalDefs = defs;

web/extensions/core/nodeTemplates.js

@@ -1,5 +1,6 @@
 import { app } from "../../scripts/app.js";
 import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { GROUP_DATA, IS_GROUP_NODE, registerGroupNodes } from "./groupNode.js";
 
 // Adds the ability to save and add multiple nodes as a template
 // To save:
@@ -168,10 +169,7 @@ class ManageTemplates extends ComfyDialog {
 								}),
 							]
 						),
-						$el(
+						$el("div", {}, [
-							"div",
-							{},
-							[
 							$el("button", {
 								textContent: "Export",
 								style: {
@@ -208,8 +206,7 @@ class ManageTemplates extends ComfyDialog {
 									e.target.parentElement.previousElementSibling.style.display = "none";
 								},
 							}),
-							]
+						]),
-						),
 					];
 				})
 			)
@@ -222,11 +219,11 @@ app.registerExtension({
 	setup() {
 		const manage = new ManageTemplates();
 
-		const clipboardAction = (cb) => {
+		const clipboardAction = async (cb) => {
 			// We use the clipboard functions but dont want to overwrite the current user clipboard
 			// Restore it after we've run our callback
 			const old = localStorage.getItem("litegrapheditor_clipboard");
-			cb();
+			await cb();
 			localStorage.setItem("litegrapheditor_clipboard", old);
 		};
 
@@ -240,13 +237,29 @@ app.registerExtension({
 				disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
 				callback: () => {
 					const name = prompt("Enter name");
-					if (!name || !name.trim()) return;
+					if (!name?.trim()) return;
 
 					clipboardAction(() => {
 						app.canvas.copyToClipboard();
+						let data = localStorage.getItem("litegrapheditor_clipboard");
+						data = JSON.parse(data);
+						const nodeIds = Object.keys(app.canvas.selected_nodes);
+						for (let i = 0; i < nodeIds.length; i++) {
+							const node = app.graph.getNodeById(nodeIds[i]);
+							const nodeData = node?.constructor.nodeData;
+							if (nodeData?.[IS_GROUP_NODE]) {
+								const groupData = nodeData[GROUP_DATA];
+								if (!data.groupNodes) {
+									data.groupNodes = {};
+								}
+								data.groupNodes[nodeData.name] = groupData;
+								data.nodes[i].type = "workflow/" + nodeData.name;
+							}
+						}
+
 						manage.templates.push({
 							name,
-							data: localStorage.getItem("litegrapheditor_clipboard"),
+							data: JSON.stringify(data),
 						});
 						manage.store();
 					});
@@ -254,15 +267,19 @@ app.registerExtension({
 			});
 
 			// Map each template to a menu item
-			const subItems = manage.templates.map((t) => ({
+			const subItems = manage.templates.map((t) => {
+				return {
 					content: t.name,
 					callback: () => {
-					clipboardAction(() => {
+						clipboardAction(async () => {
+							const data = JSON.parse(t.data);
+							await registerGroupNodes(data.groupNodes, "workflow", t.name);
 							localStorage.setItem("litegrapheditor_clipboard", t.data);
 							app.canvas.pasteFromClipboard();
 						});
 					},
-			}));
+				};
+			});
 
 			subItems.push(null, {
 				content: "Manage",