From 929e3a5733674e357cb852cff4a28abe776799d1 Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Thu, 12 Dec 2024 06:29:14 +1100
Subject: [PATCH] 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                    |  8 ++++----
 package.json                         |  2 +-
 src/App.vue                          | 16 ++++++++++++++++
 src/components/MenuHamburger.vue     |  2 ++
 src/components/topbar/TopMenubar.vue |  2 ++
 src/utils/envUtil.ts                 |  5 +++++
 6 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3880378df7..9b1d0e17fc 100644
--- a/package-lock.json
+++ b/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": {
diff --git a/package.json b/package.json
index f7dbd0df64..c4fc7581ed 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index ceb208bee4..73222bd14e 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue
index ab2a3300c6..2b1de81d66 100644
--- a/src/components/MenuHamburger.vue
+++ b/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()
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index 67bc7d431d..0eae74b55b 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/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()
diff --git a/src/utils/envUtil.ts b/src/utils/envUtil.ts
index b2cb723cdd..d68f72feaf 100644
--- a/src/utils/envUtil.ts
+++ b/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)
+}