move prompt-popup into settings

.github/workflows/publish.yml

@@ -6,16 +6,17 @@ on:
       - main
     paths:
       - "pyproject.toml"
-
+permissions:
+  issues: write
 jobs:
   publish-node:
     name: Publish Custom Node to registry
     runs-on: ubuntu-latest
+    if: ${{ github.repository_owner == 'phineas-pta' }}
     steps:
       - name: Check out code
         uses: actions/checkout@v4
       - name: Publish Custom Node
-        uses: Comfy-Org/publish-node-action@main
+        uses: Comfy-Org/publish-node-action@v1
         with:
-          ## Add your own personal access token to your Github Repository secrets and reference it here.
           personal_access_token: ${{ secrets.REGISTRY_ACCESS_TOKEN }}

web/autoLayout.js

@@ -1,19 +1,37 @@
-import { app } from "/scripts/app.js";
-
-// https://cdn.jsdelivr.net/npm/dagre/dist/dagre.min.js
-import "./dagre.min.js";
-// https://cdn.jsdelivr.net/npm/elkjs/lib/elk.bundled.min.js
-import "./elk.bundled.min.js";
+import { app } from "/scripts/app.js"; // the Comfy application running in the browser
+import "./dagre.min.js"; // copied from https://cdn.jsdelivr.net/npm/dagre/dist/dagre.min.js
+import "./elk.bundled.min.js"; // copied from https://cdn.jsdelivr.net/npm/elkjs/lib/elk.bundled.min.js
 // idk how to do named import with those
 
 
 app.registerExtension({
 	"name": "PTA.autoNodesLayout",
-	setup() { // Add canvas menu options
-		const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
+	"settings": [
+		{
+			id: "PTA.autoNodesLayout.ranksep",
+			name: "spacing (px) between ranks/depths/columns",
+			type: "number",
+			defaultValue: 200,
+		},
+		{
+			id: "PTA.autoNodesLayout.nodesep",
+			name: "spacing (px) between nodes in same rank/depth/column",
+			type: "number",
+			defaultValue: 150,
+		},
+	],
+	"aboutPageBadges": [
+		{
+			"label": "GitHub",
+			"url": "https://github.com/phineas-pta/comfyui-auto-nodes-layout",
+			"icon": "pi pi-github"
+		}
+	],
+	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(myRightClickMenu); // def below
+			options.push(myRightClickMenu); // add my custom function as menu options, see definition below
 			return options;
 		}
 	},
@@ -31,30 +49,24 @@ const myRightClickMenu = {
 			},
 			{
 				"content": "Dagre.js layout",
-				"callback": dagreLayout // def below
+				"callback": dagreLayout // see definition below
 			},
 			{
 				"content": "ELK.js ‘layered’ layout",
-				"callback": elkLayeredLayout // def below
+				"callback": elkLayeredLayout // see definition below
 			},
 		],
 	},
 };
 
 
-// 2 values to control layout density (string for max compability with window.prompt)
-var ranksep = "200"; // spacing (px) between ranks/depths/columns
-var nodesep = "150"; // spacing (px) between nodes in same rank/depth/column
-
-
 /**
  * arrange nodes using Dagre layout
  * @see https://github.com/dagrejs/dagre
- * @todo better UI than pop-up
  * @returns {undefined} Nothing is returned.
  */
-function dagreLayout() {
-	popupInput(); // def below
+async function dagreLayout() {
+	popupInput(); // see definition below
 
 	// setup dagre
 	const daG = new dagre.graphlib
@@ -63,8 +75,8 @@ function dagreLayout() {
 			"rankdir": "LR", // left to right
 			"ranker": "network-simplex",
 			// values: "network-simplex", "tight-tree", "longest-path"
-			"ranksep": parseFloat(ranksep),
-			"nodesep": parseFloat(nodesep),
+			"ranksep": app.extensionManager.setting.get("PTA.autoNodesLayout.ranksep"),
+			"nodesep": app.extensionManager.setting.get("PTA.autoNodesLayout.nodesep"),
 		})
 		.setDefaultNodeLabel(() => ({}))
 		.setDefaultEdgeLabel(() => ({}));
@@ -100,11 +112,10 @@ function dagreLayout() {
 /**
  * arrange nodes using ELK ‘layered’ layout
  * @see https://github.com/kieler/elkjs
- * @todo better UI than pop-up
  * @returns {undefined} Nothing is returned.
  */
-function elkLayeredLayout() {
-	popupInput(); // def below
+async function elkLayeredLayout() {
+	popupInput(); // see definition below
 
 	// convert litegraph to elk
 	const myElkNodes = app.graph._nodes.map((n) => ({
@@ -130,8 +141,8 @@ function elkLayeredLayout() {
 			// values: "NETWORK_SIMPLEX", "LONGEST_PATH", "COFFMAN_GRAHAM"
 			"elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
 			// values: "NETWORK_SIMPLEX", "BRANDES_KOEPF", "LINEAR_SEGMENTS"
-			"elk.layered.spacing.nodeNodeBetweenLayers": ranksep,
-			"elk.spacing.nodeNode": nodesep,
+			"elk.layered.spacing.nodeNodeBetweenLayers": app.extensionManager.setting.get("PTA.autoNodesLayout.ranksep"),
+			"elk.spacing.nodeNode": app.extensionManager.setting.get("PTA.autoNodesLayout.nodesep"),
 		},
 	};
 
@@ -156,25 +167,20 @@ function elkLayeredLayout() {
 
 
 /**
- * ask for user input to control layout density then
  * make a alert in case there’s any reroute node
+ * also served as placeholder for any additional check in the future
  * @returns {undefined} Nothing is returned.
  */
 function popupInput() {
-	// change global value in a session
-	ranksep = window.prompt("Enter spacing (px) between ranks/depths/columns", ranksep);
-	nodesep = window.prompt("Enter spacing (px) between nodes in same rank/depth/column", nodesep);
-
-	// make a alert in case there’s any reroute node
 	for (const n of app.graph._nodes) {
 		if (n.type === "Reroute") {
-			window.alert(
-				"Layout algorithms work better without Reroute nodes!\n"
-				+ "better remove reroute before auto-layout then re-add after"
-			);
+			app.extensionManager.toast.add({
+				severity: "warn",
+				summary: "Warning",
+				detail: "Layout algorithms work better without Reroute nodes!\nbetter remove reroute before auto-layout then re-add after",
+			});
 			break;
 		}
 	}
-
 	return;
 }