Add native context menu when using desktop

package.json

@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.3.25",
+    "@comfyorg/comfyui-electron-types": "^0.3.32",
     "@comfyorg/litegraph": "^0.8.44",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",

src/App.vue

@@ -16,6 +16,7 @@ import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import { useEventListener } from '@vueuse/core'
+import { isElectron, showNativeMenu } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
@@ -25,8 +26,23 @@ const handleKey = (e: KeyboardEvent) => {
 useEventListener(window, 'keydown', handleKey)
 useEventListener(window, 'keyup', handleKey)
 
+const showContextMenu = (event: PointerEvent) => {
+  const { target } = event
+  switch (true) {
+    case target instanceof HTMLTextAreaElement:
+    case target instanceof HTMLInputElement && target.type === 'text':
+      // TODO: Context input menu explicitly for text input
+      showNativeMenu({ type: 'text' })
+      return
+  }
+}
+
 onMounted(() => {
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
   console.log('ComfyUI Front-end version:', config.app_version)
+
+  if (isElectron()) {
+    document.addEventListener('contextmenu', showContextMenu)
+  }
 })
 </script>

src/components/MenuHamburger.vue

@@ -9,6 +9,7 @@
     size="large"
     v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
     @click="exitFocusMode"
+    @contextmenu="showNativeMenu"
   />
 </template>
 
@@ -18,6 +19,7 @@ import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { computed, CSSProperties, watchEffect } from 'vue'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
+import { showNativeMenu } from '@/utils/envUtil'
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()

src/components/topbar/TopMenubar.vue

@@ -21,6 +21,7 @@
         text
         v-tooltip="{ value: $t('menu.hideMenu'), showDelay: 300 }"
         @click="workspaceState.focusMode = true"
+        @contextmenu="showNativeMenu"
       />
     </div>
   </teleport>
@@ -38,6 +39,7 @@ import { useSettingStore } from '@/stores/settingStore'
 import { app } from '@/scripts/app'
 import { useEventBus } from '@vueuse/core'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { showNativeMenu } from '@/utils/envUtil'
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()

src/utils/envUtil.ts

@@ -7,3 +7,8 @@ export function isElectron() {
 export function electronAPI() {
   return (window as any)['electronAPI'] as ElectronAPI
 }
+
+type NativeContextOptions = Parameters<ElectronAPI['showContextMenu']>[0]
+export function showNativeMenu(options?: NativeContextOptions) {
+  electronAPI()?.showContextMenu(options)
+}