diff --git a/py/config.py b/py/config.py index 351033f..1af4189 100644 --- a/py/config.py +++ b/py/config.py @@ -99,6 +99,9 @@ def refresh_config(): if "unreleased" in USER_CONFIG and "unreleased" not in RGTHREE_CONFIG: RGTHREE_CONFIG["unreleased"] = USER_CONFIG["unreleased"] + if "debug" in USER_CONFIG and "debug" not in RGTHREE_CONFIG: + RGTHREE_CONFIG["debug"] = USER_CONFIG["debug"] + def get_config(): """Returns the congfig.""" diff --git a/src_web/comfyui/rgthree.scss b/src_web/comfyui/rgthree.scss index aebb65a..d304fd4 100644 --- a/src_web/comfyui/rgthree.scss +++ b/src_web/comfyui/rgthree.scss @@ -310,10 +310,11 @@ body:not([style*=grid]):not([class*=grid]) { .rgthree-debug-keydowns { display: block; position: fixed; - z-index: 999; + z-index: 1050; top: 3px; right: 8px; font-size: 10px; color: #fff; font-family: sans-serif; + pointer-events: none; } \ No newline at end of file diff --git a/src_web/comfyui/rgthree.ts b/src_web/comfyui/rgthree.ts index 1e62e00..65a618c 100644 --- a/src_web/comfyui/rgthree.ts +++ b/src_web/comfyui/rgthree.ts @@ -12,6 +12,7 @@ import type {ComfyApiFormat, ComfyApiPrompt, ComfyApp} from "typings/comfy.js"; import {app} from "scripts/app.js"; import {api} from "scripts/api.js"; import {SERVICE as CONFIG_SERVICE} from "./services/config_service.js"; +import {SERVICE as KEY_EVENT_SERVICE} from "./services/key_events_services.js"; import {fixBadLinks} from "rgthree/common/link_fixer.js"; import {injectCss, wait} from "rgthree/common/shared_utils.js"; import {replaceNode, waitForCanvas, waitForGraph} from "./utils.js"; @@ -242,8 +243,6 @@ class Rgthree extends EventTarget { canvasCurrentlyCopyingToClipboardWithMultipleNodes = false; initialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff: any = null; - private elDebugKeydowns: HTMLDivElement | null = null; - private readonly isMac: boolean = !!( navigator.platform?.toLocaleUpperCase().startsWith("MAC") || (navigator as any).userAgentData?.platform?.toLocaleUpperCase().startsWith("MAC") @@ -269,6 +268,17 @@ class Rgthree extends EventTarget { this.initializeProgressBar(); } }) as EventListener); + + if (CONFIG_SERVICE.getConfigValue("debug.keys_down.enabled")) { + const elDebugKeydowns = createElement("div.rgthree-debug-keydowns", { + parent: document.body, + }); + const updateDebugKeyDown = () => { + elDebugKeydowns.innerText = Object.keys(KEY_EVENT_SERVICE.downKeys).join(" "); + } + KEY_EVENT_SERVICE.addEventListener("keydown", updateDebugKeyDown); + KEY_EVENT_SERVICE.addEventListener("keyup", updateDebugKeyDown); + } } /** diff --git a/web/comfyui/rgthree.css b/web/comfyui/rgthree.css index 5d0075c..38f0662 100644 --- a/web/comfyui/rgthree.css +++ b/web/comfyui/rgthree.css @@ -627,10 +627,11 @@ body:not([style*=grid]):not([class*=grid]) rgthree-progress-bar.rgthree-pos-bott .rgthree-debug-keydowns { display: block; position: fixed; - z-index: 999; + z-index: 1050; top: 3px; right: 8px; font-size: 10px; color: #fff; font-family: sans-serif; + pointer-events: none; } diff --git a/web/comfyui/rgthree.js b/web/comfyui/rgthree.js index fdaa6c2..3d22056 100644 --- a/web/comfyui/rgthree.js +++ b/web/comfyui/rgthree.js @@ -1,6 +1,7 @@ import { app } from "../../scripts/app.js"; import { api } from "../../scripts/api.js"; import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js"; +import { SERVICE as KEY_EVENT_SERVICE } from "./services/key_events_services.js"; import { fixBadLinks } from "../../rgthree/common/link_fixer.js"; import { injectCss, wait } from "../../rgthree/common/shared_utils.js"; import { replaceNode, waitForCanvas, waitForGraph } from "./utils.js"; @@ -8,7 +9,7 @@ import { NodeTypesString, addRgthree, getNodeTypeStrings } from "./constants.js" import { RgthreeProgressBar } from "../../rgthree/common/progress_bar.js"; import { RgthreeConfigDialog } from "./config.js"; import { iconGear, iconNode, iconReplace, iconStarFilled, logoRgthree, } from "../../rgthree/common/media/svgs.js"; -import { query, queryOne } from "../../rgthree/common/utils_dom.js"; +import { createElement, query, queryOne } from "../../rgthree/common/utils_dom.js"; export var LogLevel; (function (LogLevel) { LogLevel[LogLevel["IMPORTANT"] = 1] = "IMPORTANT"; @@ -138,7 +139,6 @@ class Rgthree extends EventTarget { this.canvasCurrentlyCopyingToClipboard = false; this.canvasCurrentlyCopyingToClipboardWithMultipleNodes = false; this.initialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff = null; - this.elDebugKeydowns = null; this.isMac = !!(((_a = navigator.platform) === null || _a === void 0 ? void 0 : _a.toLocaleUpperCase().startsWith("MAC")) || ((_c = (_b = navigator.userAgentData) === null || _b === void 0 ? void 0 : _b.platform) === null || _c === void 0 ? void 0 : _c.toLocaleUpperCase().startsWith("MAC"))); const logLevel = (_d = LogLevelKeyToLogLevel[CONFIG_SERVICE.getConfigValue("log_level")]) !== null && _d !== void 0 ? _d : GLOBAL_LOG_LEVEL; @@ -154,6 +154,16 @@ class Rgthree extends EventTarget { this.initializeProgressBar(); } })); + if (CONFIG_SERVICE.getConfigValue("debug.keys_down.enabled")) { + const elDebugKeydowns = createElement("div.rgthree-debug-keydowns", { + parent: document.body, + }); + const updateDebugKeyDown = () => { + elDebugKeydowns.innerText = Object.keys(KEY_EVENT_SERVICE.downKeys).join(" "); + }; + KEY_EVENT_SERVICE.addEventListener("keydown", updateDebugKeyDown); + KEY_EVENT_SERVICE.addEventListener("keyup", updateDebugKeyDown); + } } async initializeProgressBar() { var _a;