Save group nodes to templates

This commit is contained in:
pythongosssss 2023-10-22 14:16:57 +01:00
parent 288a1c6242
commit bb4e65d4e1
2 changed files with 95 additions and 72 deletions

View File

@ -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();
const GROUP_DATA = Symbol();
export const IS_GROUP_NODE = 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;
if (!groupNodes) return;
for (const name in groupNodes) {
const def = buildNodeDef(groupNodes[name], name, globalDefs, true);
await app.registerNodeDef("workflow/" + name, def);
}
registerGroupNodes(graphData?.extra?.groupNodes, "workflow");
},
addCustomNodeDefs(defs) {
globalDefs = defs;

View File

@ -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(
"div",
{},
[
$el("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",