support new Frontend

README.md

@@ -5,4 +5,4 @@ This is an Extension for [ComfyUI](https://github.com/comfyanonymous/ComfyUI), w
 This will add a button, **Beautify**, to the menu that rounds the **size** and **position** of each **node** and **group** in a workflow using a specified value
 
 ## Config
-You can click the cog icon to open the settings, and edit the **Beautify Grid Size** field to change the value used for rounding
+You can edit the **Beautify Grid Size** field in the settings to change the value used for rounding

js/node_beautify.js

@@ -8,18 +8,44 @@ app.ui.settings.addSetting({
 	defaultValue: 10,
 });
 
+function legacy() {
+	const menu = document.querySelector(".comfy-menu");
+
+	const beautifyButton = document.createElement("button");
+	beautifyButton.textContent = "Beautify";
+	beautifyButton.addEventListener("click", () => {
+		app.loadGraphData(Process(app.graph.serialize()));
+	});
+
+	const refreshButton = document.getElementById("comfy-refresh-button");
+	menu.insertBefore(beautifyButton, refreshButton);
+}
+
+async function frontend() {
+	const btn = new (await import("../../scripts/ui/components/button.js")).ComfyButton({
+		icon: "creation",
+		action: () => {
+			app.loadGraphData(Process(app.graph.serialize()));
+		},
+		tooltip: "Beautify Workflow",
+		content: "Beautify",
+		classList: "comfyui-button comfyui-menu-mobile-collapse"
+	}).element;
+
+	app.menu?.actionsGroup.element.after(btn);
+}
+
 app.registerExtension({
 	name: "Comfy.NodeBeautify",
 	async setup() {
-		const menu = document.querySelector(".comfy-menu");
 
-		const beautifyButton = document.createElement("button");
-		beautifyButton.textContent = "Beautify";
-		beautifyButton.addEventListener("click", () => {
-			app.loadGraphData(Process(app.graph.serialize()));
-		});
+		try {
+			await frontend();
+		} catch {
+			// No Frontend?
+		}
+
+		legacy();
 
-		const refreshButton = document.getElementById("comfy-refresh-button");
-		menu.insertBefore(beautifyButton, refreshButton);
 	}
 });

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-node-beautify"
 description = "Add a button that formats the workflow graph"
-version = "1.0.1"
+version = "1.1.0"
 license = { text = "MIT License" }
 dependencies = []