Unify title edit handling (#1995)

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.3.34",
-        "@comfyorg/litegraph": "^0.8.46",
+        "@comfyorg/litegraph": "^0.8.47",
         "@primevue/themes": "^4.0.5",
         "@vueuse/core": "^11.0.0",
         "@xterm/addon-fit": "^0.10.0",
@@ -1957,9 +1957,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.46",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.46.tgz",
-      "integrity": "sha512-uI4AZJzW9p85jRmDWLhpQXnG9xqXo46oKaHRHhqYAzM7Ai0/d9gqIP//h3O4joEYw2zYOYVMGx2gCZAsyJcSmA==",
+      "version": "0.8.47",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.47.tgz",
+      "integrity": "sha512-JWKXWiqDyJjHz8oQ2kW8AVhTwYoGXHjynFuNeJrx1mtXurT6om1ywZoRptJbAwvNcSvbVWmdBdG0mf2NOqqwKQ==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -83,7 +83,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.3.34",
-    "@comfyorg/litegraph": "^0.8.46",
+    "@comfyorg/litegraph": "^0.8.47",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",

src/components/graph/TitleEditor.vue

@@ -13,14 +13,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, CSSProperties, watch } from 'vue'
+import { ref, CSSProperties, watch } from 'vue'
 import { app } from '@/scripts/app'
 import { LGraphGroup, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import EditableText from '@/components/common/EditableText.vue'
-import { ComfyExtension } from '@/types/comfy'
 import { useSettingStore } from '@/stores/settingStore'
 import type { LiteGraphCanvasEvent } from '@comfyorg/litegraph'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
+import { useEventListener } from '@vueuse/core'
 
 const settingStore = useSettingStore()
 
@@ -97,54 +97,38 @@ watch(
 )
 
 const canvasEventHandler = (event: LiteGraphCanvasEvent) => {
-  if (!settingStore.get('Comfy.Group.DoubleClickTitleToEdit')) {
-    return
-  }
-
   if (event.detail.subType === 'group-double-click') {
+    if (!settingStore.get('Comfy.Group.DoubleClickTitleToEdit')) {
+      return
+    }
+
     const group: LGraphGroup = event.detail.group
     const [x, y] = group.pos
 
     const e = event.detail.originalEvent
     const relativeY = e.canvasY - y
     // Only allow editing if the click is on the title bar
-    if (relativeY > group.titleHeight) {
+    if (relativeY <= group.titleHeight) {
+      titleEditorStore.titleEditorTarget = group
+    }
+  } else if (event.detail.subType === 'node-double-click') {
+    if (!settingStore.get('Comfy.Node.DoubleClickTitleToEdit')) {
       return
     }
 
-    titleEditorStore.titleEditorTarget = group
-  }
-}
+    const node: LGraphNode = event.detail.node
+    const [x, y] = node.pos
 
-const extension: ComfyExtension = {
-  name: 'Comfy.NodeTitleEditor',
-  nodeCreated(node: LGraphNode) {
-    // Store the original callback
-    const originalCallback = node.onNodeTitleDblClick
-
-    node.onNodeTitleDblClick = function (e: MouseEvent, ...args: any[]) {
-      if (!settingStore.get('Comfy.Node.DoubleClickTitleToEdit')) {
-        return
-      }
-
-      titleEditorStore.titleEditorTarget = this
-
-      // Call the original callback if it exists
-      if (typeof originalCallback === 'function') {
-        originalCallback.call(this, e, ...args)
-      }
+    const e = event.detail.originalEvent
+    const relativeY = e.canvasY - y
+    // Only allow editing if the click is on the title bar
+    if (relativeY <= 0) {
+      titleEditorStore.titleEditorTarget = node
     }
   }
 }
 
-onMounted(() => {
-  document.addEventListener('litegraph:canvas', canvasEventHandler)
-  app.registerExtension(extension)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('litegraph:canvas', canvasEventHandler)
-})
+useEventListener(document, 'litegraph:canvas', canvasEventHandler)
 </script>
 
 <style scoped>