diff --git a/src_web/comfyui/rgthree.scss b/src_web/comfyui/rgthree.scss index bc7cfb7..dd44fc9 100644 --- a/src_web/comfyui/rgthree.scss +++ b/src_web/comfyui/rgthree.scss @@ -262,3 +262,14 @@ rgthree-progress-bar { inset 0px -1px 0px rgba(0, 0, 0, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.125); } + +.rgthree-debug-keydowns { + display: block; + position: fixed; + z-index: 999; + top: 3px; + right: 8px; + font-size: 10px; + color: #fff; + font-family: sans-serif; +} \ No newline at end of file diff --git a/src_web/comfyui/rgthree.ts b/src_web/comfyui/rgthree.ts index 85a8981..a22b2bc 100644 --- a/src_web/comfyui/rgthree.ts +++ b/src_web/comfyui/rgthree.ts @@ -23,7 +23,7 @@ import { RgthreeProgressBar } from "rgthree/common/progress_bar.js"; import { RgthreeConfigDialog } from "./config.js"; import { iconGear, iconReplace, iconStarFilled, logoRgthree } from "rgthree/common/media/svgs.js"; import type { Bookmark } from "./bookmark"; -import { query } from "rgthree/common/utils_dom.js"; +import { createElement, query } from "rgthree/common/utils_dom.js"; declare const LiteGraph: typeof TLiteGraph; declare const LGraphCanvas: typeof TLGraphCanvas; @@ -231,6 +231,8 @@ class Rgthree extends EventTarget { canvasCurrentlyCopyingToClipboardWithMultipleNodes = false; initialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff: any = null; + private elDebugKeydowns: HTMLDivElement|null = null; + constructor() { super(); @@ -267,6 +269,7 @@ class Rgthree extends EventTarget { }); this.initializeProgressBar(); + this.initializeDebugShit(); CONFIG_SERVICE.addEventListener("config-change", ((e: CustomEvent) => { if (e.detail?.key?.includes("features.progress_bar")) { @@ -275,6 +278,23 @@ class Rgthree extends EventTarget { }) as EventListener); } + initializeDebugShit() { + if (!this.isDebugMode()) { + return; + } + this.elDebugKeydowns = createElement('div.rgthree-debug-keydowns', { + parent: document.body, + }); + } + + /** Renders the current keydowns in the UI. */ + private debugRenderKeys() { + if (!this.elDebugKeydowns) { + return; + } + this.elDebugKeydowns.innerText = Object.keys(this.downKeys).join(' '); + } + /** * Initializes the top progress bar, if it's configured. */ @@ -875,6 +895,7 @@ class Rgthree extends EventTarget { this.metaKey = false; this.shiftKey = false; for (const key in this.downKeys) delete this.downKeys[key]; + this.debugRenderKeys(); } /** @@ -890,6 +911,7 @@ class Rgthree extends EventTarget { this.shiftKey = !!e.shiftKey; this.downKeys[e.key.toLocaleUpperCase()] = true; this.dispatchCustomEvent("keydown", { originalEvent: e }); + this.debugRenderKeys(); } /** @@ -903,6 +925,7 @@ class Rgthree extends EventTarget { this.shiftKey = !!e.shiftKey; delete this.downKeys[e.key.toLocaleUpperCase()]; this.dispatchCustomEvent("keyup", { originalEvent: e }); + this.debugRenderKeys(); } /** @@ -990,10 +1013,17 @@ class Rgthree extends EventTarget { } isDevMode() { - if (window.location.href.includes("#rgthree-dev=false")) { + if (window.location.href.includes("rgthree-dev=false")) { return false; } - return GLOBAL_LOG_LEVEL >= LogLevel.DEBUG || window.location.href.includes("#rgthree-dev"); + return GLOBAL_LOG_LEVEL >= LogLevel.DEBUG || window.location.href.includes("rgthree-dev"); + } + + isDebugMode() { + if (!this.isDevMode() || window.location.href.includes("rgthree-debug=false")) { + return false; + } + return window.location.href.includes("rgthree-debug"); } monitorBadLinks() { diff --git a/web/comfyui/rgthree.css b/web/comfyui/rgthree.css index 530be71..dd8c5be 100644 --- a/web/comfyui/rgthree.css +++ b/web/comfyui/rgthree.css @@ -534,3 +534,14 @@ rgthree-progress-bar { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.125); } + +.rgthree-debug-keydowns { + display: block; + position: fixed; + z-index: 999; + top: 3px; + right: 8px; + font-size: 10px; + color: #fff; + font-family: sans-serif; +} diff --git a/web/comfyui/rgthree.js b/web/comfyui/rgthree.js index 6d2964d..8d2c825 100644 --- a/web/comfyui/rgthree.js +++ b/web/comfyui/rgthree.js @@ -131,6 +131,7 @@ class Rgthree extends EventTarget { this.canvasCurrentlyCopyingToClipboard = false; this.canvasCurrentlyCopyingToClipboardWithMultipleNodes = false; this.initialGraphToPromptSerializedWorkflowBecauseComfyUIBrokeStuff = null; + this.elDebugKeydowns = null; const logLevel = (_a = LogLevelKeyToLogLevel[CONFIG_SERVICE.getConfigValue("log_level")]) !== null && _a !== void 0 ? _a : GLOBAL_LOG_LEVEL; this.setLogLevel(logLevel); window.addEventListener("keydown", (e) => { @@ -161,14 +162,18 @@ class Rgthree extends EventTarget { })); } initializeDebugShit() { - if (!this.isDevMode()) { + if (!this.isDebugMode()) { return; } - createElement('div', { + this.elDebugKeydowns = createElement('div.rgthree-debug-keydowns', { parent: document.body, }); } debugRenderKeys() { + if (!this.elDebugKeydowns) { + return; + } + this.elDebugKeydowns.innerText = Object.keys(this.downKeys).join(' '); } initializeProgressBar() { var _a; @@ -617,6 +622,7 @@ class Rgthree extends EventTarget { this.shiftKey = false; for (const key in this.downKeys) delete this.downKeys[key]; + this.debugRenderKeys(); } handleKeydown(e) { this.ctrlKey = !!e.ctrlKey; @@ -625,6 +631,7 @@ class Rgthree extends EventTarget { this.shiftKey = !!e.shiftKey; this.downKeys[e.key.toLocaleUpperCase()] = true; this.dispatchCustomEvent("keydown", { originalEvent: e }); + this.debugRenderKeys(); } handleKeyup(e) { this.ctrlKey = !!e.ctrlKey; @@ -633,6 +640,7 @@ class Rgthree extends EventTarget { this.shiftKey = !!e.shiftKey; delete this.downKeys[e.key.toLocaleUpperCase()]; this.dispatchCustomEvent("keyup", { originalEvent: e }); + this.debugRenderKeys(); } getKeysFromShortcut(shortcut) { let keys; @@ -686,10 +694,16 @@ class Rgthree extends EventTarget { return this.logger.newSession(name); } isDevMode() { - if (window.location.href.includes("#rgthree-dev=false")) { + if (window.location.href.includes("rgthree-dev=false")) { return false; } - return GLOBAL_LOG_LEVEL >= LogLevel.DEBUG || window.location.href.includes("#rgthree-dev"); + return GLOBAL_LOG_LEVEL >= LogLevel.DEBUG || window.location.href.includes("rgthree-dev"); + } + isDebugMode() { + if (!this.isDevMode() || window.location.href.includes("rgthree-debug=false")) { + return false; + } + return window.location.href.includes("rgthree-debug"); } monitorBadLinks() { const badLinksFound = fixBadLinks(app.graph);