Clean keybinds extension

This commit is contained in:
reaper47 2023-06-19 21:32:21 +02:00
parent 8883cb0f67
commit 96e8307bd3
3 changed files with 26 additions and 29 deletions

View File

@ -435,7 +435,7 @@ app.registerExtension({
$el("td", [ $el("td", [
$el("label", { $el("label", {
for: id.replaceAll(".", "-"), for: id.replaceAll(".", "-"),
textContent: "Color palette:", textContent: "Color palette",
}), }),
]), ]),
$el("td", [ $el("td", [

View File

@ -1,38 +1,31 @@
import { app } from "/scripts/app.js"; import {app} from "/scripts/app.js";
const id = "Comfy.Keybinds";
app.registerExtension({ app.registerExtension({
name: id, name: "Comfy.Keybinds",
init() { init() {
const keybindListener = function(event) { const keybindListener = function (event) {
const modifierPressed = event.ctrlKey || event.metaKey; const modifierPressed = event.ctrlKey || event.metaKey;
// Queue prompt using ctrl or command + enter // Queue prompt using ctrl or command + enter
if (modifierPressed && (event.key === "Enter" || event.keyCode === 13 || event.keyCode === 10)) { if (modifierPressed && event.key === "Enter") {
app.queuePrompt(event.shiftKey ? -1 : 0); app.queuePrompt(event.shiftKey ? -1 : 0).then();
return; return;
} }
const target = event.composedPath()[0]; const target = event.composedPath()[0];
if (["INPUT", "TEXTAREA"].includes(target.tagName)) {
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
return; return;
} }
const modifierKeyIdMap = { const modifierKeyIdMap = {
"s": "#comfy-save-button", s: "#comfy-save-button",
83: "#comfy-save-button", o: "#comfy-file-input",
"o": "#comfy-file-input", Backspace: "#comfy-clear-button",
79: "#comfy-file-input", Delete: "#comfy-clear-button",
"Backspace": "#comfy-clear-button", d: "#comfy-load-default-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]; const modifierKeybindId = modifierKeyIdMap[event.key];
if (modifierPressed && modifierKeybindId) { if (modifierPressed && modifierKeybindId) {
event.preventDefault(); event.preventDefault();
@ -47,24 +40,25 @@ app.registerExtension({
} }
// Close out of modals using escape // Close out of modals using escape
if (event.key === "Escape" || event.keyCode === 27) { if (event.key === "Escape") {
const modals = document.querySelectorAll(".comfy-modal"); const modals = document.querySelectorAll(".comfy-modal");
const modal = Array.from(modals).find(modal => window.getComputedStyle(modal).getPropertyValue("display") !== "none"); const modal = Array.from(modals).find(modal => window.getComputedStyle(modal).getPropertyValue("display") !== "none");
if (modal) { if (modal) {
modal.style.display = "none"; modal.style.display = "none";
} }
[...document.querySelectorAll("dialog")].forEach(d => {
d.close();
});
} }
const keyIdMap = { const keyIdMap = {
"q": "#comfy-view-queue-button", q: "#comfy-view-queue-button",
81: "#comfy-view-queue-button", h: "#comfy-view-history-button",
"h": "#comfy-view-history-button", r: "#comfy-refresh-button",
72: "#comfy-view-history-button",
"r": "#comfy-refresh-button",
82: "#comfy-refresh-button",
}; };
const buttonId = keyIdMap[event.key] || keyIdMap[event.keyCode]; const buttonId = keyIdMap[event.key];
if (buttonId) { if (buttonId) {
const button = document.querySelector(buttonId); const button = document.querySelector(buttonId);
button.click(); button.click();

View File

@ -211,6 +211,9 @@ class ComfySettingsDialog extends ComfyDialog {
$el("button", { $el("button", {
type: "button", type: "button",
textContent: "Close", textContent: "Close",
style: {
cursor: "pointer",
},
onclick: () => { onclick: () => {
this.element.close(); this.element.close();
}, },
@ -267,7 +270,7 @@ class ComfySettingsDialog extends ComfyDialog {
$el("label", { $el("label", {
for: htmlID, for: htmlID,
classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""], classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""],
textContent: name.endsWith(":") ? name : `${name}:`, textContent: name,
}) })
]); ]);