Fix keybinds invalidated by capslock state (#1776)

* [Refactor] Simplify keybinds code

* [Refactor] Type safety

* Fix capslock inverts undo/redo shortcuts

* [Refactor] Type safety

* Fix capslock state changes keybinds

* Deprecate keybind deserialize

* Remove keybind deserialize

src/extensions/core/keybinds.ts

@@ -37,26 +37,26 @@ app.registerExtension({
         return
       }
 
-      // Finished Handling all modifier keybinds, now handle the rest
+      // Only clear dialogs if not using modifiers
       if (event.ctrlKey || event.altKey || event.metaKey) {
         return
       }
 
-      // Close out of modals using escape
+      // Escape key: close the first open modal found, and all dialogs
       if (event.key === 'Escape') {
         const modals = document.querySelectorAll<HTMLElement>('.comfy-modal')
-        const modal = Array.from(modals).find(
+        for (const modal of modals) {
-          (modal) =>
+          const modalDisplay = window
-            window.getComputedStyle(modal).getPropertyValue('display') !==
+            .getComputedStyle(modal)
-            'none'
+            .getPropertyValue('display')
-        )
+
-        if (modal) {
+          if (modalDisplay !== 'none') {
-          modal.style.display = 'none'
+            modal.style.display = 'none'
+            break
+          }
         }
 
-        ;[...document.querySelectorAll('dialog')].forEach((d) => {
+        for (const d of document.querySelectorAll('dialog')) d.close()
-          d.close()
-        })
       }
     }
 

src/scripts/changeTracker.ts

@@ -163,11 +163,13 @@ export class ChangeTracker {
   }
 
   async undoRedo(e: KeyboardEvent) {
-    if (e.ctrlKey || e.metaKey) {
+    if ((e.ctrlKey || e.metaKey) && !e.altKey) {
-      if (e.key === 'y' || e.key == 'Z') {
+      const key = e.key.toUpperCase()
+      // Redo: Ctrl + Y, or Ctrl + Shift + Z
+      if ((key === 'Y' && !e.shiftKey) || (key == 'Z' && e.shiftKey)) {
         await this.redo()
         return true
-      } else if (e.key === 'z') {
+      } else if (key === 'Z' && !e.shiftKey) {
         await this.undo()
         return true
       }

src/stores/keybindingStore.ts

@@ -16,15 +16,14 @@ export class KeybindingImpl implements Keybinding {
     this.targetSelector = obj.targetSelector
   }
 
-  equals(other: any): boolean {
+  equals(other: unknown): boolean {
-    if (toRaw(other) instanceof KeybindingImpl) {
+    const raw = toRaw(other)
-      return (
+
-        this.commandId === other.commandId &&
+    return raw instanceof KeybindingImpl
-        this.combo.equals(other.combo) &&
+      ? this.commandId === raw.commandId &&
-        this.targetSelector === other.targetSelector
+          this.combo.equals(raw.combo) &&
-      )
+          this.targetSelector === raw.targetSelector
-    }
+      : false
-    return false
   }
 }
 
@@ -51,30 +50,19 @@ export class KeyComboImpl implements KeyCombo {
     })
   }
 
-  equals(other: any): boolean {
+  equals(other: unknown): boolean {
-    if (toRaw(other) instanceof KeyComboImpl) {
+    const raw = toRaw(other)
-      return (
+
-        this.key === other.key &&
+    return raw instanceof KeyComboImpl
-        this.ctrl === other.ctrl &&
+      ? this.key.toUpperCase() === raw.key.toUpperCase() &&
-        this.alt === other.alt &&
+          this.ctrl === raw.ctrl &&
-        this.shift === other.shift
+          this.alt === raw.alt &&
-      )
+          this.shift === raw.shift
-    }
+      : false
-    return false
   }
 
   serialize(): string {
-    return `${this.key}:${this.ctrl}:${this.alt}:${this.shift}`
+    return `${this.key.toUpperCase()}:${this.ctrl}:${this.alt}:${this.shift}`
-  }
-
-  deserialize(serialized: string): KeyComboImpl {
-    const [key, ctrl, alt, shift] = serialized.split(':')
-    return new KeyComboImpl({
-      key,
-      ctrl: ctrl === 'true',
-      alt: alt === 'true',
-      shift: shift === 'true'
-    })
   }
 
   toString(): string {