diff --git a/README.md b/README.md index 585d3b3..f29f912 100644 --- a/README.md +++ b/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 diff --git a/js/node_beautify.js b/js/node_beautify.js index 1bedd28..16fad31 100644 --- a/js/node_beautify.js +++ b/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); } }); diff --git a/pyproject.toml b/pyproject.toml index c24ca32..5f8d246 100644 --- a/pyproject.toml +++ b/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 = []