From bf7dbe4702ccfd02f92862238a8da3b6addc656b Mon Sep 17 00:00:00 2001 From: Adam Schwalm Date: Mon, 3 Apr 2023 20:05:46 -0500 Subject: [PATCH 1/5] Add left/right/escape hotkeys for image nodes --- web/scripts/app.js | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/web/scripts/app.js b/web/scripts/app.js index 501c7ea65..1ecd4610f 100644 --- a/web/scripts/app.js +++ b/web/scripts/app.js @@ -102,6 +102,46 @@ class ComfyApp { }; } + #addNodeKeyHandler(node) { + const app = this; + const origNodeOnKeyDown = node.prototype.onKeyDown; + + node.prototype.onKeyDown = function(e) { + if (origNodeOnKeyDown && origNodeOnKeyDown.apply(this, e) === false) { + return false; + } + + if (this.flags.collapsed || !this.imgs || this.imageIndex === null) { + return; + } + + let handled = false; + + if (e.key === "ArrowLeft" || e.key === "ArrowRight") { + if (e.key === "ArrowLeft") { + this.imageIndex -= 1; + } else if (e.key === "ArrowRight") { + this.imageIndex += 1; + } + this.imageIndex %= this.imgs.length; + + if (this.imageIndex < 0) { + this.imageIndex = this.imgs.length + this.imageIndex; + } + handled = true; + } else if (e.key === "Escape") { + this.imageIndex = null; + handled = true; + } + + if (handled === true) { + e.preventDefault(); + e.stopImmediatePropagation(); + return false; + } + } + } + /** * Adds Custom drawing logic for nodes * e.g. Draws images and handles thumbnail navigation on nodes that output images @@ -785,6 +825,7 @@ class ComfyApp { this.#addNodeContextMenuHandler(node); this.#addDrawBackgroundHandler(node, app); + this.#addNodeKeyHandler(node); await this.#invokeExtensionsAsync("beforeRegisterNodeDef", node, nodeData); LiteGraph.registerNodeType(nodeId, node); From a595c56872309e310fed7bb877bcd7caee8ef563 Mon Sep 17 00:00:00 2001 From: missionfloyd Date: Tue, 4 Apr 2023 22:03:22 -0600 Subject: [PATCH 2/5] Remove menu drag handle --- web/scripts/ui.js | 3 +-- web/style.css | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/web/scripts/ui.js b/web/scripts/ui.js index 68bfc792a..df0d8b4a3 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -414,8 +414,7 @@ export class ComfyUI { }); this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [ - $el("div", { style: { overflow: "hidden", position: "relative", width: "100%" } }, [ - $el("span.drag-handle"), + $el("div.drag-handle", { style: { overflow: "hidden", position: "relative", width: "100%", cursor: "default" } }, [ $el("span", { $: (q) => (this.queueSize = q) }), $el("button.comfy-settings-btn", { textContent: "⚙️", onclick: () => this.settings.show() }), ]), diff --git a/web/style.css b/web/style.css index 393d1667e..1263c6648 100644 --- a/web/style.css +++ b/web/style.css @@ -105,7 +105,7 @@ body { background-color: #353535; font-family: sans-serif; padding: 10px; - border-radius: 0 8px 8px 8px; + border-radius: 8px; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); } From 8af2fe1e8747e142e133640659187136eb330d0f Mon Sep 17 00:00:00 2001 From: missionfloyd Date: Tue, 4 Apr 2023 22:10:45 -0600 Subject: [PATCH 3/5] Remove redundant lines --- web/style.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/web/style.css b/web/style.css index 1263c6648..c04b40ec4 100644 --- a/web/style.css +++ b/web/style.css @@ -88,13 +88,10 @@ body { } .comfy-menu { - width: 200px; font-size: 15px; position: absolute; top: 50%; right: 0%; - background-color: white; - color: #000; text-align: center; z-index: 100; width: 170px; From 3536a7c8d148f738d30a375eab859c74da91a25a Mon Sep 17 00:00:00 2001 From: missionfloyd Date: Wed, 5 Apr 2023 08:57:44 -0600 Subject: [PATCH 4/5] Put drag icon back --- web/scripts/ui.js | 1 + web/style.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/web/scripts/ui.js b/web/scripts/ui.js index df0d8b4a3..621ca70ee 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -415,6 +415,7 @@ export class ComfyUI { this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [ $el("div.drag-handle", { style: { overflow: "hidden", position: "relative", width: "100%", cursor: "default" } }, [ + $el("span.drag-handle"), $el("span", { $: (q) => (this.queueSize = q) }), $el("button.comfy-settings-btn", { textContent: "⚙️", onclick: () => this.settings.show() }), ]), diff --git a/web/style.css b/web/style.css index c04b40ec4..f2dd4e956 100644 --- a/web/style.css +++ b/web/style.css @@ -102,7 +102,7 @@ body { background-color: #353535; font-family: sans-serif; padding: 10px; - border-radius: 8px; + border-radius: 0 8px 8px 8px; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); } From 1a74611c6e725f1ffb6629d08fbd04bb658f2704 Mon Sep 17 00:00:00 2001 From: missionfloyd Date: Wed, 5 Apr 2023 15:56:41 -0600 Subject: [PATCH 5/5] Style modals to match rest of UI --- web/scripts/ui.js | 32 +++++++++++++-------- web/style.css | 71 +++++++++++++++++++++++------------------------ 2 files changed, 55 insertions(+), 48 deletions(-) diff --git a/web/scripts/ui.js b/web/scripts/ui.js index 91821fac0..4ef24e007 100644 --- a/web/scripts/ui.js +++ b/web/scripts/ui.js @@ -115,14 +115,6 @@ function dragElement(dragEl, settings) { savePos = value; }, }); - - settings.addSetting({ - id: "Comfy.ConfirmClear", - name: "Require confirmation when clearing workflow", - type: "boolean", - defaultValue: true, - }); - function dragMouseDown(e) { e = e || window.event; e.preventDefault(); @@ -170,7 +162,7 @@ class ComfyDialog { $el("p", { $: (p) => (this.textElement = p) }), $el("button", { type: "button", - textContent: "CLOSE", + textContent: "Close", onclick: () => this.close(), }), ]), @@ -233,6 +225,7 @@ class ComfySettingsDialog extends ComfyDialog { }; let element; + value = this.getSettingValue(id, defaultValue); if (typeof type === "function") { element = type(name, setter, value, attrs); @@ -289,6 +282,16 @@ class ComfySettingsDialog extends ComfyDialog { return element; }, }); + + const self = this; + return { + get value() { + return self.getSettingValue(id, defaultValue); + }, + set value(v) { + self.setSettingValue(id, v); + }, + }; } show() { @@ -410,6 +413,13 @@ export class ComfyUI { this.history.update(); }); + const confirmClear = this.settings.addSetting({ + id: "Comfy.ConfirmClear", + name: "Require confirmation when clearing workflow", + type: "boolean", + defaultValue: true, + }); + const fileInput = $el("input", { type: "file", accept: ".json,image/png", @@ -517,13 +527,13 @@ export class ComfyUI { $el("button", { textContent: "Load", onclick: () => fileInput.click() }), $el("button", { textContent: "Refresh", onclick: () => app.refreshComboInNodes() }), $el("button", { textContent: "Clear", onclick: () => { - if (localStorage.getItem("Comfy.Settings.Comfy.ConfirmClear") == "false" || confirm("Clear workflow?")) { + if (!confirmClear.value || confirm("Clear workflow?")) { app.clean(); app.graph.clear(); } }}), $el("button", { textContent: "Load Default", onclick: () => { - if (localStorage.getItem("Comfy.Settings.Comfy.ConfirmClear") == "false" || confirm("Load default workflow?")) { + if (!confirmClear.value || confirm("Load default workflow?")) { app.loadGraphData() } }}), diff --git a/web/style.css b/web/style.css index 393d1667e..d347bd454 100644 --- a/web/style.css +++ b/web/style.css @@ -39,18 +39,19 @@ body { position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ padding: 30px 30px 10px 30px; - background-color: #ff0000; /* Modal background */ + background-color: #353535; /* Modal background */ + color: #ff4444; box-shadow: 0px 0px 20px #888888; border-radius: 10px; - text-align: center; top: 50%; left: 50%; max-width: 80vw; max-height: 80vh; transform: translate(-50%, -50%); overflow: hidden; - min-width: 60%; justify-content: center; + font-family: monospace; + font-size: 15px; } .comfy-modal-content { @@ -70,23 +71,6 @@ body { margin: 3px 3px 3px 4px; } -.comfy-modal button { - cursor: pointer; - color: #aaaaaa; - border: none; - background-color: transparent; - font-size: 24px; - font-weight: bold; - width: 100%; -} - -.comfy-modal button:hover, -.comfy-modal button:focus { - color: #000; - text-decoration: none; - cursor: pointer; -} - .comfy-menu { width: 200px; font-size: 15px; @@ -109,7 +93,8 @@ body { box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); } -.comfy-menu button { +.comfy-menu button, +.comfy-modal button { font-size: 20px; } @@ -130,7 +115,8 @@ body { .comfy-menu > button, .comfy-menu-btns button, -.comfy-menu .comfy-list button { +.comfy-menu .comfy-list button, +.comfy-modal button{ color: #ddd; background-color: #222; border-radius: 8px; @@ -220,11 +206,22 @@ button.comfy-queue-btn { } .comfy-modal.comfy-settings { - background-color: var(--bg-color); - color: var(--fg-color); + text-align: center; + font-family: sans-serif; + color: #999; z-index: 99; } +.comfy-modal input, +.comfy-modal select { + color: #ddd; + background-color: #222; + border-radius: 8px; + border-color: #4e4e4e; + border-style: solid; + font-size: inherit; +} + @media only screen and (max-height: 850px) { .comfy-menu { top: 0 !important; @@ -239,26 +236,26 @@ button.comfy-queue-btn { } .graphdialog { - min-height: 1em; + min-height: 1em; } .graphdialog .name { - font-size: 14px; - font-family: sans-serif; - color: #999999; + font-size: 14px; + font-family: sans-serif; + color: #999999; } .graphdialog button { - margin-top: unset; - vertical-align: unset; - height: 1.6em; - padding-right: 8px; + margin-top: unset; + vertical-align: unset; + height: 1.6em; + padding-right: 8px; } .graphdialog input, .graphdialog textarea, .graphdialog select { - background-color: #222; - border: 2px solid; - border-color: #444444; - color: #ddd; - border-radius: 12px 0 0 12px; + background-color: #222; + border: 2px solid; + border-color: #444444; + color: #ddd; + border-radius: 12px 0 0 12px; }