Re-enable keybinding jest test (#2090)

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -135,12 +135,14 @@ import { useToast } from 'primevue/usetoast'
 import { FilterMatchMode } from '@primevue/core/api'
 import { useI18n } from 'vue-i18n'
 import { normalizeI18nKey } from '@/utils/formatUtil'
+import { useKeybindingService } from '@/services/keybindingService'
 
 const filters = ref({
   global: { value: '', matchMode: FilterMatchMode.CONTAINS }
 })
 
 const keybindingStore = useKeybindingStore()
+const keybindingService = useKeybindingService()
 const commandStore = useCommandStore()
 const { t } = useI18n()
 
@@ -204,7 +206,7 @@ watchEffect(() => {
 function removeKeybinding(commandData: ICommandData) {
   if (commandData.keybinding) {
     keybindingStore.unsetKeybinding(commandData.keybinding)
-    keybindingStore.persistUserKeybindings()
+    keybindingService.persistUserKeybindings()
   }
 }
 
@@ -228,7 +230,7 @@ function saveKeybinding() {
       })
     )
     if (updated) {
-      keybindingStore.persistUserKeybindings()
+      keybindingService.persistUserKeybindings()
     }
   }
   cancelEdit()
@@ -237,7 +239,7 @@ function saveKeybinding() {
 const toast = useToast()
 async function resetKeybindings() {
   keybindingStore.resetKeybindings()
-  await keybindingStore.persistUserKeybindings()
+  await keybindingService.persistUserKeybindings()
   toast.add({
     severity: 'info',
     summary: 'Info',

src/services/extensionService.ts

@@ -2,16 +2,19 @@ import { app } from '@/scripts/app'
 import { api } from '@/scripts/api'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExtensionStore } from '@/stores/extensionStore'
-import { useKeybindingStore } from '@/stores/keybindingStore'
+import { KeybindingImpl, useKeybindingStore } from '@/stores/keybindingStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { ComfyExtension } from '@/types/comfy'
+import { useErrorHandling } from '@/hooks/errorHooks'
 
 export const useExtensionService = () => {
   const extensionStore = useExtensionStore()
   const settingStore = useSettingStore()
+  const keybindingStore = useKeybindingStore()
+  const { wrapWithErrorHandling } = useErrorHandling()
 
   /**
    * Loads all extensions from the API into the window in parallel
@@ -47,12 +50,17 @@ export const useExtensionService = () => {
   const registerExtension = (extension: ComfyExtension) => {
     extensionStore.registerExtension(extension)
 
-    useKeybindingStore().loadExtensionKeybindings(extension)
+    const addKeybinding = wrapWithErrorHandling(
+      keybindingStore.addDefaultKeybinding
+    )
+    const addSetting = wrapWithErrorHandling(settingStore.addSetting)
+
+    extension.keybindings?.forEach((keybinding) => {
+      addKeybinding(new KeybindingImpl(keybinding))
+    })
     useCommandStore().loadExtensionCommands(extension)
     useMenuItemStore().loadExtensionMenuCommands(extension)
-    extension.settings?.forEach((setting) => {
-      settingStore.addSetting(setting)
-    })
+    extension.settings?.forEach(addSetting)
     useBottomPanelStore().registerExtensionBottomPanelTabs(extension)
     if (extension.getCustomWidgets) {
       // TODO(huchenlei): We should deprecate the async return value of

src/services/keybindingService.ts

@@ -1,9 +1,16 @@
+import { CORE_KEYBINDINGS } from '@/constants/coreKeybindings'
 import { useCommandStore } from '@/stores/commandStore'
-import { KeyComboImpl, useKeybindingStore } from '@/stores/keybindingStore'
+import {
+  KeybindingImpl,
+  KeyComboImpl,
+  useKeybindingStore
+} from '@/stores/keybindingStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 export const useKeybindingService = () => {
   const keybindingStore = useKeybindingStore()
   const commandStore = useCommandStore()
+  const settingStore = useSettingStore()
 
   const keybindHandler = async function (event: KeyboardEvent) {
     const keyCombo = KeyComboImpl.fromEvent(event)
@@ -54,7 +61,41 @@ export const useKeybindingService = () => {
     }
   }
 
+  const registerCoreKeybindings = () => {
+    for (const keybinding of CORE_KEYBINDINGS) {
+      keybindingStore.addDefaultKeybinding(new KeybindingImpl(keybinding))
+    }
+  }
+
+  function registerUserKeybindings() {
+    // Unset bindings first as new bindings might conflict with default bindings.
+    const unsetBindings = settingStore.get('Comfy.Keybinding.UnsetBindings')
+    for (const keybinding of unsetBindings) {
+      keybindingStore.unsetKeybinding(new KeybindingImpl(keybinding))
+    }
+    const newBindings = settingStore.get('Comfy.Keybinding.NewBindings')
+    for (const keybinding of newBindings) {
+      keybindingStore.addUserKeybinding(new KeybindingImpl(keybinding))
+    }
+  }
+
+  async function persistUserKeybindings() {
+    // TODO(https://github.com/Comfy-Org/ComfyUI_frontend/issues/1079):
+    // Allow setting multiple values at once in settingStore
+    await settingStore.set(
+      'Comfy.Keybinding.NewBindings',
+      Object.values(keybindingStore.userKeybindings.value)
+    )
+    await settingStore.set(
+      'Comfy.Keybinding.UnsetBindings',
+      Object.values(keybindingStore.userUnsetKeybindings.value)
+    )
+  }
+
   return {
-    keybindHandler
+    keybindHandler,
+    registerCoreKeybindings,
+    registerUserKeybindings,
+    persistUserKeybindings
   }
 }

src/stores/keybindingStore.ts

@@ -1,9 +1,6 @@
 import { defineStore } from 'pinia'
 import { computed, Ref, ref, toRaw } from 'vue'
 import { Keybinding, KeyCombo } from '@/types/keyBindingTypes'
-import { useSettingStore } from './settingStore'
-import { CORE_KEYBINDINGS } from '@/constants/coreKeybindings'
-import type { ComfyExtension } from '@/types/comfy'
 
 export class KeybindingImpl implements Keybinding {
   commandId: string
@@ -245,54 +242,6 @@ export const useKeybindingStore = defineStore('keybinding', () => {
     return true
   }
 
-  function loadUserKeybindings() {
-    const settingStore = useSettingStore()
-    // Unset bindings first as new bindings might conflict with default bindings.
-    const unsetBindings = settingStore.get('Comfy.Keybinding.UnsetBindings')
-    for (const keybinding of unsetBindings) {
-      unsetKeybinding(new KeybindingImpl(keybinding))
-    }
-    const newBindings = settingStore.get('Comfy.Keybinding.NewBindings')
-    for (const keybinding of newBindings) {
-      addUserKeybinding(new KeybindingImpl(keybinding))
-    }
-  }
-
-  function loadCoreKeybindings() {
-    for (const keybinding of CORE_KEYBINDINGS) {
-      addDefaultKeybinding(new KeybindingImpl(keybinding))
-    }
-  }
-
-  function loadExtensionKeybindings(extension: ComfyExtension) {
-    if (extension.keybindings) {
-      for (const keybinding of extension.keybindings) {
-        try {
-          addDefaultKeybinding(new KeybindingImpl(keybinding))
-        } catch (error) {
-          console.warn(
-            `Failed to load keybinding for extension ${extension.name}`,
-            error
-          )
-        }
-      }
-    }
-  }
-
-  async function persistUserKeybindings() {
-    const settingStore = useSettingStore()
-    // TODO(https://github.com/Comfy-Org/ComfyUI_frontend/issues/1079):
-    // Allow setting multiple values at once in settingStore
-    await settingStore.set(
-      'Comfy.Keybinding.NewBindings',
-      Object.values(userKeybindings.value)
-    )
-    await settingStore.set(
-      'Comfy.Keybinding.UnsetBindings',
-      Object.values(userUnsetKeybindings.value)
-    )
-  }
-
   function resetKeybindings() {
     userKeybindings.value = {}
     userUnsetKeybindings.value = {}
@@ -312,6 +261,8 @@ export const useKeybindingStore = defineStore('keybinding', () => {
 
   return {
     keybindings,
+    userKeybindings,
+    userUnsetKeybindings,
     getKeybinding,
     getKeybindingsByCommandId,
     getKeybindingByCommandId,
@@ -319,10 +270,6 @@ export const useKeybindingStore = defineStore('keybinding', () => {
     addUserKeybinding,
     unsetKeybinding,
     updateKeybindingOnCommand,
-    loadUserKeybindings,
-    loadCoreKeybindings,
-    loadExtensionKeybindings,
-    persistUserKeybindings,
     resetKeybindings,
     isCommandKeybindingModified
   }

src/views/GraphView.vue

@@ -32,7 +32,6 @@ import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDi
 import BrowserTabTitle from '@/components/BrowserTabTitle.vue'
 import TopMenubar from '@/components/topbar/TopMenubar.vue'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
-import { useKeybindingStore } from '@/stores/keybindingStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
@@ -111,7 +110,7 @@ const init = () => {
   const coreCommands = useCoreCommands()
   useCommandStore().registerCommands(coreCommands)
   useMenuItemStore().registerCoreMenuCommands()
-  useKeybindingStore().loadCoreKeybindings()
+  useKeybindingService().registerCoreKeybindings()
   useSidebarTabStore().registerCoreSidebarTabs()
   useBottomPanelStore().registerCoreBottomPanelTabs()
   app.extensionManager = useWorkspaceStore()
@@ -168,7 +167,7 @@ const onGraphReady = () => {
     () => {
       // Setting values now available after comfyApp.setup.
       // Load keybindings.
-      useKeybindingStore().loadUserKeybindings()
+      useKeybindingService().registerUserKeybindings()
 
       // Load server config
       useServerConfigStore().loadServerConfig(