Debug pane and lookup key (#518)

* added new util functions for logging keyutils and added debug pane

* clean up the formatting

src/app/sidebar/right.less

@@ -25,4 +25,29 @@
     &.collapsed {
         display: none;
     }
+
+    .keybind-debug-pane {
+        padding: 10px;
+        overflow: hidden;
+        width: 100%;
+
+        .keybind-pane-title {
+            font-size: 18px;
+            font-weight: bold;
+            padding-bottom: 5px;
+        }
+
+        .keybind-level {
+            margin-top: 10px;
+            font-weight: bold;
+            font-size: 16px;
+        }
+
+        .keybind-domain {
+            font-size: 14px;
+            margin-left: 20px;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
 }

src/app/sidebar/right.tsx

@@ -4,6 +4,7 @@
 import * as React from "react";
 import * as mobxReact from "mobx-react";
 import dayjs from "dayjs";
+import { If, For } from "tsx-control-statements/components";
 
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel } from "@/models";
@@ -17,6 +18,34 @@ interface RightSideBarProps {
     parentRef: React.RefObject<HTMLElement>;
 }
 
+@mobxReact.observer
+class KeybindDevPane extends React.Component<{}, {}> {
+    render() {
+        let curActiveKeybinds: Array<{ name: string; domains: Array<string> }> =
+            GlobalModel.keybindManager.getActiveKeybindings();
+        let keybindLevel: { name: string; domains: Array<string> } = null;
+        let domain: string = null;
+        let curVersion = GlobalModel.keybindManager.getActiveKeybindsVersion();
+        let levelIdx: number = 0;
+        let domainIdx: number = 0;
+        return (
+            <div className="keybind-debug-pane">
+                <div className="keybind-pane-title">Keybind Manager</div>
+                <For index="levelIdx" each="keybindLevel" of={curActiveKeybinds}>
+                    <div className="keybind-level" key={"level-" + curVersion + levelIdx}>
+                        {keybindLevel.name}
+                    </div>
+                    <For index="domainIdx" each="domain" of={keybindLevel.domains}>
+                        <div className="keybind-domain" key={"domain-" + curVersion + domainIdx}>
+                            {domain}
+                        </div>
+                    </For>
+                </For>
+            </div>
+        );
+    }
+}
+
 @mobxReact.observer
 class RightSideBar extends React.Component<RightSideBarProps, {}> {
     render() {
@@ -35,6 +64,9 @@ class RightSideBar extends React.Component<RightSideBarProps, {}> {
                                 <i className="fa-sharp fa-regular fa-xmark"></i>
                             </Button>
                         </div>
+                        <If condition={GlobalModel.isDev}>
+                            <KeybindDevPane></KeybindDevPane>
+                        </If>
                     </React.Fragment>
                 )}
             </ResizableSidebar>

src/util/keyutil.ts

@@ -49,6 +49,7 @@ class KeybindManager {
     userKeybindings: KeybindConfigArray;
     userKeybindingError: OV<string>;
     globalModel: any;
+    activeKeybindsVersion: OV<number>;
 
     constructor(GlobalModel: any) {
         this.levelMap = new Map();
@@ -59,7 +60,10 @@ class KeybindManager {
             this.levelMap.set(curLevel, new Array<Keybind>());
         }
         this.userKeybindingError = mobx.observable.box(null, {
-            name: "keyutil-userKeybindingError",
+            name: "keybindManager-userKeybindingError",
+        });
+        this.activeKeybindsVersion = mobx.observable.box(0, {
+            name: "keybindManager-activeKeybindsVersion",
         });
         this.globalModel = GlobalModel;
         this.initKeyDescriptionsMap();
@@ -314,6 +318,100 @@ class KeybindManager {
         return false;
     }
 
+    getActiveKeybindsVersion() {
+        return this.activeKeybindsVersion.get();
+    }
+
+    checkKeyInKeybinding(key: string, keyDescription: string) {
+        if (keyDescription == "any") {
+            return true;
+        }
+        if (!this.keyDescriptionsMap.has(keyDescription)) {
+            return false;
+        }
+        let keyPressArray = this.keyDescriptionsMap.get(keyDescription).keys;
+        for (let index = 0; index < keyPressArray.length; index++) {
+            let curKeyPress = keyPressArray[index];
+            if (keybindingIsEqual(key, curKeyPress)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    lookupKeyInLevel(key: string, level: Array<Keybind>): Array<Keybind> {
+        let toReturn: Array<Keybind> = [];
+        for (let index = level.length - 1; index >= 0; index--) {
+            let curKeybind = level[index];
+            console.log("index", index, "curKeybind: ", curKeybind);
+            if (this.checkKeyInKeybinding(key, curKeybind.keybinding)) {
+                toReturn.push({ ...curKeybind }); // shallow copy
+            }
+        }
+        return toReturn;
+    }
+
+    lookupKey(key: string) {
+        let modalLevel = this.levelMap.get("modal");
+        let toReturn: Array<Keybind> = [];
+        if (modalLevel.length != 0) {
+            let controlLevel = this.levelMap.get("control");
+            toReturn = toReturn.concat(this.lookupKeyInLevel(key, controlLevel));
+            toReturn = toReturn.concat(this.lookupKeyInLevel(key, modalLevel));
+            let systemLevel = this.levelMap.get("system");
+            toReturn = toReturn.concat(this.lookupKeyInLevel(key, systemLevel));
+            return toReturn;
+        }
+        for (let index = this.levelArray.length - 1; index >= 0; index--) {
+            let curLevel = this.levelArray[index];
+            let curKeybindsArray;
+            if (this.levelMap.has(curLevel)) {
+                curKeybindsArray = this.levelMap.get(curLevel);
+            } else {
+                console.error("error processing key event: couldn't find level: ", curLevel);
+                continue;
+            }
+            toReturn = toReturn.concat(this.lookupKeyInLevel(key, curKeybindsArray));
+        }
+        return toReturn;
+    }
+
+    getDomainListForLevel(level: Array<Keybind>): Array<string> {
+        let toReturn: Array<string> = [];
+        for (let index = 0; index < level.length; index++) {
+            let curDomain = level[index].domain;
+            if (!toReturn.includes(curDomain)) {
+                toReturn.push(curDomain);
+            }
+        }
+        return toReturn;
+    }
+
+    getActiveKeybindings(): Array<{ name: string; domains: Array<string> }> {
+        let modalLevel = this.levelMap.get("modal");
+        let toReturn: Array<{ name: string; domains: Array<string> }> = [];
+        if (modalLevel.length != 0) {
+            let controlLevel = this.levelMap.get("control");
+            toReturn.push({ name: "control", domains: this.getDomainListForLevel(controlLevel) });
+            toReturn.push({ name: "modal", domains: this.getDomainListForLevel(modalLevel) });
+            let systemLevel = this.levelMap.get("system");
+            toReturn.push({ name: "system", domains: this.getDomainListForLevel(systemLevel) });
+            return toReturn;
+        }
+        for (let index = this.levelArray.length - 1; index >= 0; index--) {
+            let curLevel = this.levelArray[index];
+            let curKeybindsArray;
+            if (this.levelMap.has(curLevel)) {
+                curKeybindsArray = this.levelMap.get(curLevel);
+            } else {
+                console.error("error processing key event: couldn't find level: ", curLevel);
+                continue;
+            }
+            toReturn.push({ name: curLevel, domains: this.getDomainListForLevel(curKeybindsArray) });
+        }
+        return toReturn;
+    }
+
     registerKeybinding(level: string, domain: string, keybinding: string, callback: KeybindCallback): boolean {
         if (domain == "" || this.keybindingAlreadyAdded(level, domain, keybinding)) {
             return false;
@@ -326,6 +424,9 @@ class KeybindManager {
         let curKeybindArray = this.levelMap.get(level);
         curKeybindArray.push(newKeybind);
         this.levelMap.set(level, curKeybindArray);
+        mobx.action(() => {
+            this.activeKeybindsVersion.set(this.activeKeybindsVersion.get() + 1);
+        })();
         return true;
     }
 
@@ -371,8 +472,11 @@ class KeybindManager {
                 keybindsArray.splice(index, 1);
                 index--;
                 this.levelMap.set(level, keybindsArray);
+                return true;
             }
-            return true;
+            mobx.action(() => {
+                this.activeKeybindsVersion.set(this.activeKeybindsVersion.get() + 1);
+            })();
         }
         return false;
     }
@@ -392,6 +496,9 @@ class KeybindManager {
             }
         }
         this.domainCallbacks.delete(domain);
+        mobx.action(() => {
+            this.activeKeybindsVersion.set(this.activeKeybindsVersion.get() + 1);
+        })();
         return foundKeybind;
     }