Auto queue on change (#2542)

* Add toggle to enable auto queue when graph is changed

* type fix

* better

* better alignment

* Change undoredo to not ignore inputs when autoqueue in change mode

web/scripts/app.js

@@ -2068,6 +2068,7 @@ export class ComfyApp {
 		} finally {
 			this.#processingQueue = false;
 		}
+		api.dispatchEvent(new CustomEvent("promptQueued", { detail: { number, batchCount } }));
 	}
 
 	/**

web/scripts/ui.js

@@ -1,5 +1,6 @@
 import { api } from "./api.js";
 import { ComfyDialog as _ComfyDialog } from "./ui/dialog.js";
+import { toggleSwitch } from "./ui/toggleSwitch.js";
 import { ComfySettingsDialog } from "./ui/settings.js";
 
 export const ComfyDialog = _ComfyDialog;
@@ -368,6 +369,31 @@ export class ComfyUI {
 			},
 		});
 
+		const autoQueueModeEl = toggleSwitch(
+			"autoQueueMode",
+			[
+				{ text: "instant", tooltip: "A new prompt will be queued as soon as the queue reaches 0" },
+				{ text: "change", tooltip: "A new prompt will be queued when the queue is at 0 and the graph is/has changed" },
+			],
+			{
+				onChange: (value) => {
+					this.autoQueueMode = value.item.value;
+				},
+			}
+		);
+		autoQueueModeEl.style.display = "none";
+
+		api.addEventListener("graphChanged", () => {
+			if (this.autoQueueMode === "change") {
+				if (this.lastQueueSize === 0) {
+					this.graphHasChanged = false;
+					app.queuePrompt(0, this.batchCount);
+				} else {
+					this.graphHasChanged = true;
+				}
+			}
+		});
+
 		this.menuContainer = $el("div.comfy-menu", {parent: document.body}, [
 			$el("div.drag-handle", {
 				style: {
@@ -394,6 +420,7 @@ export class ComfyUI {
 							document.getElementById("extraOptions").style.display = i.srcElement.checked ? "block" : "none";
 							this.batchCount = i.srcElement.checked ? document.getElementById("batchCountInputRange").value : 1;
 							document.getElementById("autoQueueCheckbox").checked = false;
+							this.autoQueueEnabled = false;
 						},
 					}),
 				]),
@@ -425,20 +452,22 @@ export class ComfyUI {
 						},
 					}),		
 				]),
-
 				$el("div",[
 					$el("label",{
 						for:"autoQueueCheckbox",
 						innerHTML: "Auto Queue"
-						// textContent: "Auto Queue"
 					}),
 					$el("input", {
 						id: "autoQueueCheckbox",
 						type: "checkbox",
 						checked: false,
 						title: "Automatically queue prompt when the queue size hits 0",
-						
+						onchange: (e) => {
+							this.autoQueueEnabled = e.target.checked;
+							autoQueueModeEl.style.display = this.autoQueueEnabled ? "" : "none";
+						}
 					}),
+					autoQueueModeEl
 				])
 			]),
 			$el("div.comfy-menu-btns", [
@@ -572,10 +601,13 @@ export class ComfyUI {
 			if (
 				this.lastQueueSize != 0 &&
 				status.exec_info.queue_remaining == 0 &&
-				document.getElementById("autoQueueCheckbox").checked &&
-				! app.lastExecutionError
+				this.autoQueueEnabled &&
+				(this.autoQueueMode === "instant" || this.graphHasChanged) &&
+				!app.lastExecutionError
 			) {
 				app.queuePrompt(0, this.batchCount);
+				status.exec_info.queue_remaining += this.batchCount;
+				this.graphHasChanged = false;
 			}
 			this.lastQueueSize = status.exec_info.queue_remaining;
 		}

web/scripts/ui/toggleSwitch.js

@@ -0,0 +1,60 @@
+import { $el } from "../ui.js";
+
+/**
+ * @typedef { { text: string, value?: string, tooltip?: string } } ToggleSwitchItem
+ */
+/**
+ * Creates a toggle switch element
+ * @param { string } name
+ * @param { Array<string | ToggleSwitchItem } items
+ * @param { Object } [opts]
+ * @param { (e: { item: ToggleSwitchItem, prev?: ToggleSwitchItem }) => void } [opts.onChange]
+ */
+export function toggleSwitch(name, items, { onChange } = {}) {
+	let selectedIndex;
+	let elements;
+	
+	function updateSelected(index) {
+		if (selectedIndex != null) {
+			elements[selectedIndex].classList.remove("comfy-toggle-selected");
+		}
+		onChange?.({ item: items[index], prev: selectedIndex == null ? undefined : items[selectedIndex] });
+		selectedIndex = index;
+		elements[selectedIndex].classList.add("comfy-toggle-selected");
+	}
+
+	elements = items.map((item, i) => {
+		if (typeof item === "string") item = { text: item };
+		if (!item.value) item.value = item.text;
+
+		const toggle = $el(
+			"label",
+			{
+				textContent: item.text,
+				title: item.tooltip ?? "",
+			},
+			$el("input", {
+				name,
+				type: "radio",
+				value: item.value ?? item.text,
+				checked: item.selected,
+				onchange: () => {
+					updateSelected(i);
+				},
+			})
+		);
+		if (item.selected) {
+			updateSelected(i);
+		}
+		return toggle;
+	});
+
+	const container = $el("div.comfy-toggle-switch", elements);
+
+	if (selectedIndex == null) {
+		elements[0].children[0].checked = true;
+		updateSelected(0);
+	}
+
+	return container;
+}