Adds debug key info to the UI in debug mode. For #238

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;
+}

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<HTMLDivElement>('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() {

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;
+}

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);