migrate to comfyui v3 schema

README.md

@@ -2,7 +2,7 @@
 
 a ComfyUI extension that applies an improved node layout algorithm to ComfyUI workflows, primarily for better visualization
 
-this serves as a working prototype of the proof-of-concept detailed in comfyanonymous/ComfyUI#1547
+this serves as a working prototype of the proof-of-concept detailed in Comfy-Org/ComfyUI#1547
 
 ## description
 
@@ -26,30 +26,34 @@ Here’s why:
 
 It’s worth noting that since ComfyUI workflows are inherently oriented from left to right, the concept of ‘depth’ is more accurately described as a ‘column’ or ‘rank’ within this hierarchical context.
 
+## how to use
+
+**Installation**: via ComfyUI Manager for ease of use, or clone this repository manually using `git` if you’re developing (no additional requirements needed)
+
+**Using**:
+1. Finalize your workflow, then remove any Reroute nodes from your graph (you can add them back afterward if needed)
+2. Access the layout options by either:
+   - Right-clicking on the canvas, or
+   - Navigating to the top menu bar: Extensions > 📍 auto nodes layout
+3. Choose your preferred layout algorithm from the available options
+4. Customize the spacing between columns and nodes by adjusting the settings in ComfyUI settings
+
 ## implementation details
 
 the principle is to use an external library to compute all nodes position, then retrieve back to `LiteGraph.js`
 
-requirements: ComfyUI version ≥ 0.3
+requirements: ComfyUI version ≥ 0.12.3
 
 implemented algorithms:
 - Dagre layout from https://github.com/dagrejs/dagre
 - ELK ‘layered’ layout from https://github.com/kieler/elkjs
 
-~~undo/redo possible with https://github.com/bmad4ever/ComfyUI-Bmad-DirtyUndoRedo~~ *(this feature is available in new version of ComfyUI)*
-
 2 options to control layout density:
-- spacing between columns
-- spacing between nodes in same column
-
-**TODO**:
-- [x] refresh after apply layout (issues #1 #2)
-- [x] add UI options to change density
-- [x] better UI than pop-up for options to change density
-- [x] option to select layout strategy (see docs for each algo), maybe submenu
-- [x] publish to Comfy Registry
+- horizontal spacing between columns
+- vertical spacing between nodes in same column
 
 ## example
+
 using [noisy latent composition example](https://comfyanonymous.github.io/ComfyUI_examples/noisy_latent_composition/)
 
 (the empty black rectangle box is browser viewport)

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-auto-nodes-layout"
 description = "a ComfyUI extension that applies an improved node layout algorithm to ComfyUI workflows, primarily for better visualization"
-version = "0.0.2"
+version = "0.0.3"
 readme = "README.md"
 license = { file = "LICENSE" }
 classifiers = ["Operating System :: OS Independent"]
@@ -14,4 +14,4 @@ Repository = "https://github.com/phineas-pta/comfyui-auto-nodes-layout"
 PublisherId = "phineas-pta"
 DisplayName = "comfyui-auto-nodes-layout"
 Icon = ""
-requires-comfyui = ">=0.3.0" 
+requires-comfyui = ">=0.12.3" 

web/autoLayout.js

@@ -3,23 +3,28 @@ import "./dagre.min.js"; // copied from https://cdn.jsdelivr.net/npm/dagre/dist/
 import "./elk.bundled.min.js"; // copied from https://cdn.jsdelivr.net/npm/elkjs/lib/elk.bundled.min.js
 // i failed to do named import with those libraries
 
+// docs: https://docs.comfy.org/custom-nodes/js/javascript_overview
 
-const autonodes_id = "PTA.autoNodesLayout";
-const autonodes_label = "📍 auto nodes layout";
+///////////////////////////////////////////////////////////////////////////////
+// define some objects to avoid making a big messy object with `app.registerExtension`
+
+const autonodes_id = "PTA.autoNodesLayout"; // prefix for all settings, commands, and menu items to avoid naming conflicts
+const autonodes_label = "📍 auto nodes layout"; // shown in menus & settings
 
 
+// shown in comfyui settings
 const autonodes_settings = [
 	{
 		"id": `${autonodes_id}.ranksep`,
 		"category": [autonodes_label, "common settings", "ranksep"],
-		"name": "spacing (px) between columns",
+		"name": "horizontal spacing (px) between columns",
 		"type": "number",
 		"defaultValue": 200,
 	},
 	{
 		"id": `${autonodes_id}.nodesep`,
 		"category": [autonodes_label, "common settings", "nodesep"],
-		"name": "spacing (px) between nodes in same column",
+		"name": "vertical spacing (px) between nodes in same column",
 		"type": "number",
 		"defaultValue": 150,
 	},
@@ -63,6 +68,7 @@ const autonodes_settings = [
 		"tooltip": "refer to ELK.js docs for details",
 	},
 ];
+// show in comfyui right-click menu in canvas
 const autonodes_rightclickmenu = {
 	"content": autonodes_label,
 	"has_submenu": true,
@@ -83,6 +89,7 @@ const autonodes_rightclickmenu = {
 		],
 	},
 };
+// show in comfyui top-bar menu
 const autonodes_topbarcommands = [
 	{
 		"id": `${autonodes_id}.default`,
@@ -120,16 +127,12 @@ app.registerExtension({
 	"commands": autonodes_topbarcommands,
 	"menuCommands": autonodes_topbarmenu,
 	"settings": autonodes_settings,
-	async setup() { // Called at the end of the startup process. Add canvas menu options
-		const orig = LGraphCanvas.prototype.getCanvasMenuOptions; // current user interface
-		LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-			const options = orig.apply(this, arguments);
-			options.push(autonodes_rightclickmenu); // add my custom function as menu options, see definition below
-			return options;
-		}
+	getCanvasMenuItems(canvas) { // add to right-click menu
+		return [null, autonodes_rightclickmenu]; // null creates visual separator
 	},
 });
 
+///////////////////////////////////////////////////////////////////////////////
 
 /**
  * arrange nodes using Dagre layout