2024

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Haoming
+Copyright (c) 2024 Haoming
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,14 +1,8 @@
 # ComfyUI Node Beautify
 This is an Extension for [ComfyUI](https://github.com/comfyanonymous/ComfyUI), which helps formatting the workflow.
 
-## Features
-Round the **size** and the **position** of each node and group in a workflow by a preset value
+## Feature
+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
 
-## How to Use
-- Clone this repo into the `~/ComfyUI/custom_nodes` folder
-- This will add a button, **Beautify**, to the menu. Simply click it to format the workflow~
-
-## Configs
-You can edit the `configs.js` file to change some settings.
-- **GRID_SIZE:** Change the values to round to
-- **FIXED_SIZE:** Set a constant size for nodes of specified type
+## 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

js/configs.js

@@ -1,10 +0,0 @@
-// Round to the cloest multiples of this value
-export const GRID_SIZE = 10;
-
-// "NodeType": [Width, Height]
-export const FIXED_SIZE = {
-
-    "CLIPTextEncode": [400.0, 150.0],
-    "PreviewImage": [420.0, 420.0],
-
-};

js/functions.js

@@ -1,28 +1,22 @@
-import { GRID_SIZE, FIXED_SIZE } from "./configs.js";
+import { app } from "../../scripts/app.js";
 
-function round(value) {
-    return value - value % GRID_SIZE;
+function round(value, grid_size) {
+    return value - value % grid_size;
 }
 
 export function Process(graph) {
+    const GRID_SIZE = app.ui.settings.getSettingValue("beautify.GridSize", 10);
+
     graph["nodes"].forEach((node) => {
-
-        if (node["type"] in FIXED_SIZE) {
-            node["size"] = FIXED_SIZE[node["type"]];
-        }
-
         ["pos", "size"].forEach((prop) => {
-            node[prop][0] = round(node[prop][0]);
-            node[prop][1] = round(node[prop][1]);
+            node[prop][0] = round(node[prop][0], GRID_SIZE);
+            node[prop][1] = round(node[prop][1], GRID_SIZE);
         });
-
     });
 
     graph["groups"].forEach((group) => {
-
         for (let i = 0; i < 4; i++)
-            group["bounding"][i] = round(group["bounding"][i]);
-
+            group["bounding"][i] = round(group["bounding"][i], GRID_SIZE);
     });
 
     return graph;

js/node_beautify.js

@@ -1,6 +1,13 @@
 import { app } from "../../scripts/app.js";
 import { Process } from "./functions.js";
 
+app.ui.settings.addSetting({
+	id: "beautify.GridSize",
+	name: "Beautify Grid Size",
+	type: "number",
+	defaultValue: 10,
+});
+
 app.registerExtension({
 	name: "Comfy.NodeBeautify",
 	async setup() {