From 0d80c1f831c2a86a46a72f26829c041d51a521ba Mon Sep 17 00:00:00 2001
From: TomoyukiMizuma <nishino123tomo@gmail.com>
Date: Fri, 18 Aug 2023 16:08:03 +0900
Subject: [PATCH] multiple workflows (combo version)

---
 web/scripts/app.js |  7 +++----
 web/scripts/ui.js  | 28 ++++++++++++++++++++--------
 web/style.css      | 12 ++++++++++--
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/web/scripts/app.js b/web/scripts/app.js
index 15ce036d4..b0dda1179 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -1602,13 +1602,12 @@ export class ComfyApp {
 		this.runningNodeId = null;
 	}
 
-	switchWorkflow() {
-		const workflow_count = 3;
+	switchWorkflow(seleted_id) {
+		const workflow_count = 5;
 
 		try {
 			let current_workflow = "workflow_" + this.workflow_current_id;
-			this.workflow_current_id += 1;
-			this.workflow_current_id %= workflow_count;
+			this.workflow_current_id = Math.min(Math.max(seleted_id, 0), workflow_count - 1);
 			let next_workflow = "workflow_" + this.workflow_current_id;
 
 			localStorage.setItem("workflow_current_id", this.workflow_current_id);
diff --git a/web/scripts/ui.js b/web/scripts/ui.js
index 59d4a0bbc..92949154c 100644
--- a/web/scripts/ui.js
+++ b/web/scripts/ui.js
@@ -756,12 +756,19 @@ export class ComfyUI {
 					}
 				}
 			}),
-			$el("button", {
-				id: "comfy-switch-workflow-button", textContent: "Workflow", onclick: () => {
-					app.switchWorkflow();
-					document.getElementById("comfy-switch-workflow-button").textContent = "Workflow " + app.workflow_current_id;
+			$el("select", {
+				id: "comfy-switch-workflow-combo", onchange: (event) => {
+					app.switchWorkflow(event.target.selectedIndex);
 				}
-			}),
+			}, 
+			[
+				$el("option", {value:'workflow_0'}, 'Workflow 0'),
+				$el("option", {value:'workflow_1'}, 'Workflow 1'),
+				$el("option", {value:'workflow_2'}, 'Workflow 2'),
+				$el("option", {value:'workflow_3'}, 'Workflow 3'),
+				$el("option", {value:'workflow_4'}, 'Workflow 4'),
+			]
+			),
 		]);
 
 		const devMode = this.settings.addSetting({
@@ -779,9 +786,14 @@ export class ComfyUI {
 
 	setStatus(status) {
 		this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
-		const switch_btn = document.getElementById("comfy-switch-workflow-button");
+		const switch_workflow_combo = document.getElementById("comfy-switch-workflow-combo");
+		if (typeof app != "undefined") {
+			// This assignment is actually only needed when launching the app.
+			switch_workflow_combo.selectedIndex = app.workflow_current_id;
+		}
+
 		if (status) {
-			switch_btn.disabled = status.exec_info.queue_remaining ? true : false;
+			switch_workflow_combo.disabled = status.exec_info.queue_remaining ? true : false;
 			if (
 				this.lastQueueSize != 0 &&
 				status.exec_info.queue_remaining == 0 &&
@@ -792,7 +804,7 @@ export class ComfyUI {
 			this.lastQueueSize = status.exec_info.queue_remaining;
 		}
 		else {
-			switch_btn.disabled = false;
+			switch_workflow_combo.disabled = false;
 		}
 	}
 }
diff --git a/web/style.css b/web/style.css
index 52b71f312..9248f9d3f 100644
--- a/web/style.css
+++ b/web/style.css
@@ -102,6 +102,7 @@ body {
 }
 
 .comfy-menu button,
+.comfy-menu select,
 .comfy-modal button {
 	font-size: 20px;
 }
@@ -117,11 +118,13 @@ body {
 	color: var(--descrip-text) !important;
 }
 
-.comfy-menu > button {
+.comfy-menu > button,
+.comfy-menu > select {
 	width: 100%;
 }
 
 .comfy-menu > button,
+.comfy-menu > select,
 .comfy-menu-btns button,
 .comfy-menu .comfy-list button,
 .comfy-modal button {
@@ -134,6 +137,7 @@ body {
 }
 
 .comfy-menu > button:hover,
+.comfy-menu > select:hover,
 .comfy-menu-btns button:hover,
 .comfy-menu .comfy-list button:hover,
 .comfy-modal button:hover,
@@ -142,11 +146,15 @@ body {
 	cursor: pointer;
 }
 
-button#comfy-switch-workflow-button:disabled {
+select#comfy-switch-workflow-combo:disabled {
 	filter: brightness(1.0);
 	cursor: not-allowed;
 }
 
+.comfy-menu select {
+	text-align-last: center
+}
+
 .comfy-menu span.drag-handle {
 	width: 10px;
 	height: 20px;