Added node templates

node-templates/nodeTemplates.js

@@ -0,0 +1,159 @@
+import { app } from "/scripts/app.js";
+
+// Adds the ability to save and add multiple nodes as a template
+// To save: 
+// Select multiple nodes (ctrl + drag or shift click)
+// Right click the canvas
+// Save Node Template -> give it a name
+//
+// To add:
+// Right click the canvas
+// Node templates -> click the one to add
+//
+// To delete/rename:
+// Right click the canvas
+// Node templates -> Manage
+
+const id = "pysssss.NodeTemplates";
+app.registerExtension({
+	name: id,
+	setup() {
+		let templates;
+
+		const dialog = new app.ui.dialog.constructor();
+		dialog.element.classList.add("comfy-settings");
+
+		const closeButton = dialog.element.querySelector("button");
+		closeButton.textContent = "CANCEL";
+		const saveButton = document.createElement("button");
+		saveButton.textContent = "SAVE";
+		saveButton.onclick = function () {
+			// Find all visible inputs and save them as our new list
+			const inputs = dialog.element.querySelectorAll("input");
+			const updated = [];
+
+			for (let i = 0; i < inputs.length; i++) {
+				const input = inputs[i];
+				if (input.parentElement.style.display !== "none") {
+					const t = templates[i];
+					t.name = input.value.trim() || input.getAttribute("data-name");
+					updated.push(t);
+				}
+			}
+			templates = updated;
+			localStorage.setItem(id, JSON.stringify(templates));
+
+			dialog.close();
+		};
+		closeButton.before(saveButton);
+
+		const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
+		LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+			const options = orig.apply(this, arguments);
+
+			let separated = false;
+			templates = localStorage.getItem(id);
+			if (templates) {
+				templates = JSON.parse(templates);
+			} else {
+				templates = [];
+			}
+
+			// If we have nodes selected then show the save menu option
+			if (Object.keys(app.canvas.selected_nodes || {}).length) {
+				separated = true;
+				options.push(null);
+
+				options.push({
+					content: `Save Node Template`,
+					callback: () => {
+						const name = prompt("Enter name");
+						if (!name) return;
+
+						// Use the copy to clipboard function, but store and restore the current clipboard
+						const oldClip = localStorage.getItem("litegrapheditor_clipboard");
+						app.canvas.copyToClipboard();
+						const newClip = localStorage.getItem("litegrapheditor_clipboard");
+
+						templates.push({ name, data: newClip });
+
+						localStorage.setItem(id, JSON.stringify(templates));
+						localStorage.setItem("litegrapheditor_clipboard", oldClip);
+					},
+				});
+			}
+
+			// Map each of our templates to menu items
+			const subItems = templates.map((t) => ({
+				content: t.name,
+				callback: () => {
+					// Use the paste function, store and restore the current clipboard
+					const oldClip = localStorage.getItem("litegrapheditor_clipboard");
+					localStorage.setItem("litegrapheditor_clipboard", t.data);
+					app.canvas.pasteFromClipboard();
+					localStorage.setItem("litegrapheditor_clipboard", oldClip);
+				},
+			}));
+
+			if (subItems.length) {
+				if (!separated) {
+					options.push(null);
+				}
+
+				subItems.push(null, {
+					content: "Manage",
+					callback: () => {
+						// Build simple manage UI
+						dialog.show("");
+						const container = document.createElement("div");
+						Object.assign(container.style, {
+							display: "grid",
+							gridTemplateColumns: "1fr auto",
+							gap: "5px",
+						});
+
+						function addRow(p) {
+							const name = document.createElement("input");
+							const nameLbl = document.createElement("label");
+							name.setAttribute("data-name", p.name);
+							name.value = p.name;
+							nameLbl.textContent = "Name:";
+							nameLbl.append(name);
+
+							const del = document.createElement("button");
+							del.textContent = "Delete";
+							Object.assign(del.style, {
+								fontSize: "12px",
+								background: "#fff",
+								color: "red",
+								fontWeight: "normal",
+							});
+							del.onclick = () => {
+								name.value = "";
+								nameLbl.style.display = "none";
+								del.style.display = "none";
+							};
+
+							container.append(nameLbl);
+							container.append(del);
+						}
+
+						for (const t of templates) {
+							addRow(t);
+						}
+						dialog.textElement.append(container);
+					},
+				});
+
+				options.push({
+					content: "Node Templates",
+					submenu: {
+						options: subItems,
+					},
+				});
+			}
+
+			return options;
+		};
+	},
+});