Adds several keybinds that interact with ComfyUI (#491)

* adds keybinds that interact w/ comfy menu

* adds remaining keybinds

* adds keybinds to readme and converts to table

* ctrl s and o save and open workflow

* moves keybinds to sep file, update readme

* remap load default, support keycodes

* update keybinds table, prepends comfy to ids

* escape exits out of modals

* modifier keys also use map

* adds setting for filename prompt

* better handle filename prompt

Co-authored-by: missionfloyd <missionfloyd@users.noreply.github.com>

web/extensions/core/keybinds.js

@@ -0,0 +1,76 @@
+import { app } from "/scripts/app.js";
+
+const id = "Comfy.Keybinds";
+app.registerExtension({
+	name: id,
+	init() {
+		const keybindListener = function(event) {
+			const target = event.composedPath()[0];
+
+			if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+				return;
+			}
+
+			const modifierPressed = event.ctrlKey || event.metaKey;
+
+			// Queue prompt using ctrl or command + enter
+			if (modifierPressed && (event.key === "Enter" || event.keyCode === 13 || event.keyCode === 10)) {
+				app.queuePrompt(event.shiftKey ? -1 : 0);
+				return;
+			}
+
+			const modifierKeyIdMap = {
+				"s": "#comfy-save-button",
+				83: "#comfy-save-button",
+				"o": "#comfy-file-input",
+				79: "#comfy-file-input",
+				"Backspace": "#comfy-clear-button",
+				8: "#comfy-clear-button",
+				"Delete": "#comfy-clear-button",
+				46: "#comfy-clear-button",
+				"d": "#comfy-load-default-button",
+				68: "#comfy-load-default-button",
+			};
+
+			const modifierKeybindId = modifierKeyIdMap[event.key] || modifierKeyIdMap[event.keyCode];
+			if (modifierPressed && modifierKeybindId) {
+				event.preventDefault();
+
+				const elem = document.querySelector(modifierKeybindId);
+				elem.click();
+				return;
+			}
+
+			// Finished Handling all modifier keybinds, now handle the rest
+			if (event.ctrlKey || event.altKey || event.metaKey) {
+				return;
+			}
+
+			// Close out of modals using escape
+			if (event.key === "Escape" || event.keyCode === 27) {
+				const modals = document.querySelectorAll(".comfy-modal");
+				const modal = Array.from(modals).find(modal => window.getComputedStyle(modal).getPropertyValue("display") !== "none");
+				if (modal) {
+					modal.style.display = "none";
+				}
+			}
+
+			const keyIdMap = {
+				"q": "#comfy-view-queue-button",
+				81: "#comfy-view-queue-button",
+				"h": "#comfy-view-history-button",
+				72: "#comfy-view-history-button",
+				"r": "#comfy-refresh-button",
+				82: "#comfy-refresh-button",
+			};
+
+			const buttonId = keyIdMap[event.key] || keyIdMap[event.keyCode];
+			if (buttonId) {
+				const button = document.querySelector(buttonId);
+				button.click();
+			}
+		}
+
+		window.addEventListener("keydown", keybindListener, true);
+	}
+});

web/scripts/app.js

@@ -35,7 +35,6 @@ export class ComfyApp {
 		 */
 		this.nodeOutputs = {};
 
-		
 		/**
 		 * If the shift key on the keyboard is pressed
 		 * @type {boolean}
@@ -713,11 +712,6 @@ export class ComfyApp {
 	#addKeyboardHandler() {
 		window.addEventListener("keydown", (e) => {
 			this.shiftDown = e.shiftKey;
-
-			// Queue prompt using ctrl or command + enter
-			if ((e.ctrlKey || e.metaKey) && (e.key === "Enter" || e.keyCode === 13 || e.keyCode === 10)) {
-				this.queuePrompt(e.shiftKey ? -1 : 0);
-			}
 		});
 		window.addEventListener("keyup", (e) => {
 			this.shiftDown = e.shiftKey;

web/scripts/ui.js

@@ -431,7 +431,15 @@ export class ComfyUI {
 			defaultValue: true,
 		});
 
+		const promptFilename = this.settings.addSetting({
+			id: "Comfy.PromptFilename",
+			name: "Prompt for filename when saving workflow",
+			type: "boolean",
+			defaultValue: true,
+		});
+
 		const fileInput = $el("input", {
+			id: "comfy-file-input",
 			type: "file",
 			accept: ".json,image/png",
 			style: { display: "none" },
@@ -448,6 +456,7 @@ export class ComfyUI {
 				$el("button.comfy-settings-btn", { textContent: "⚙️", onclick: () => this.settings.show() }),
 			]),
 			$el("button.comfy-queue-btn", {
+				id: "queue-button",
 				textContent: "Queue Prompt",
 				onclick: () => app.queuePrompt(0, this.batchCount),
 			}),
@@ -496,9 +505,10 @@ export class ComfyUI {
 				]),
 			]),
 			$el("div.comfy-menu-btns", [
-				$el("button", { textContent: "Queue Front", onclick: () => app.queuePrompt(-1, this.batchCount) }),
+				$el("button", { id: "queue-front-button", textContent: "Queue Front", onclick: () => app.queuePrompt(-1, this.batchCount) }),
 				$el("button", {
 					$: (b) => (this.queue.button = b),
+					id: "comfy-view-queue-button",
 					textContent: "View Queue",
 					onclick: () => {
 						this.history.hide();
@@ -507,6 +517,7 @@ export class ComfyUI {
 				}),
 				$el("button", {
 					$: (b) => (this.history.button = b),
+					id: "comfy-view-history-button",
 					textContent: "View History",
 					onclick: () => {
 						this.queue.hide();
@@ -517,14 +528,23 @@ export class ComfyUI {
 			this.queue.element,
 			this.history.element,
 			$el("button", {
+				id: "comfy-save-button",
 				textContent: "Save",
 				onclick: () => {
+					let filename = "workflow.json";
+					if (promptFilename.value) {
+						filename = prompt("Save workflow as:", filename);
+						if (!filename) return;
+						if (!filename.toLowerCase().endsWith(".json")) {
+							filename += ".json";
+						}
+					}
 					const json = JSON.stringify(app.graph.serialize(), null, 2); // convert the data to a JSON string
 					const blob = new Blob([json], { type: "application/json" });
 					const url = URL.createObjectURL(blob);
 					const a = $el("a", {
 						href: url,
-						download: "workflow.json",
+						download: filename,
 						style: { display: "none" },
 						parent: document.body,
 					});
@@ -535,15 +555,15 @@ export class ComfyUI {
 					}, 0);
 				},
 			}),
-			$el("button", { textContent: "Load", onclick: () => fileInput.click() }),
-			$el("button", { textContent: "Refresh", onclick: () => app.refreshComboInNodes() }),
-			$el("button", { textContent: "Clear", onclick: () => {
+			$el("button", { id: "comfy-load-button", textContent: "Load", onclick: () => fileInput.click() }),
+			$el("button", { id: "comfy-refresh-button", textContent: "Refresh", onclick: () => app.refreshComboInNodes() }),
+			$el("button", { id: "comfy-clear-button", textContent: "Clear", onclick: () => {
 				if (!confirmClear.value || confirm("Clear workflow?")) {
 					app.clean();
 					app.graph.clear();
 				}
 			}}),
-			$el("button", { textContent: "Load Default", onclick: () => {
+			$el("button", { id: "comfy-load-default-button", textContent: "Load Default", onclick: () => {
 				if (!confirmClear.value || confirm("Load default workflow?")) {
 					app.loadGraphData()
 				}