Add native context menu when using desktop (#1875)

* Add system menu to elements

* Add desktop text context menu control

* Update electron types

---------

Co-authored-by: huchenlei <huchenlei@proton.me>

package-lock.json

@@ -10,7 +10,7 @@
       "license": "GPL-3.0-only",
       "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",
@@ -1951,9 +1951,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/comfyui-electron-types": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.3.25.tgz",
-      "integrity": "sha512-DKZJ5qXJG3dn3bmdJShm/a893cPm2OzJPxI62J/9ED8OTRmKEN3CVNX3Ire7Nj4g+GRLDZHnKVo/GYSXXOtufA==",
+      "version": "0.3.32",
+      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.3.32.tgz",
+      "integrity": "sha512-nftu7zFj1Xz6kOrZ+dcmYv+zF0KG23u2HmTOgTZh/Z5nJrC46raxHtHTlazER10cltUl2BozrE98+dWz3gDo3Q==",
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {

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