Double click node title to trigger edit (#655)

* Update litegraph

* Double click edit node title

* Update

* Auto select all

* Update litegraph

* Add playwright test

* Update readme

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/common/EditableText.vue

@@ -63,7 +63,8 @@ watch(
         inputElement.setSelectionRange(start, end)
       })
     }
-  }
+  },
+  { immediate: true }
 )
 const vFocus = {
   mounted: (el: HTMLElement) => el.focus()

src/components/graph/GraphCanvas.vue

@@ -5,6 +5,7 @@
         <SideToolbar />
       </template>
     </LiteGraphCanvasSplitterOverlay>
+    <NodeTitleEditor />
     <canvas ref="canvasRef" id="graph-canvas" tabindex="1" />
   </teleport>
   <NodeSearchboxPopover v-if="nodeSearchEnabled" />
@@ -12,6 +13,7 @@
 </template>
 
 <script setup lang="ts">
+import NodeTitleEditor from '@/components/graph/NodeTitleEditor.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'

src/components/graph/NodeTitleEditor.vue

@@ -0,0 +1,92 @@
+<template>
+  <div v-if="showInput" class="node-title-editor" :style="inputStyle">
+    <EditableText
+      :isEditing="showInput"
+      :modelValue="editedTitle"
+      @edit="onEdit"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, CSSProperties } from 'vue'
+import { app } from '@/scripts/app'
+import { LGraphNode } from '@comfyorg/litegraph'
+import { ComfyExtension } from '@/types/comfy'
+import EditableText from '@/components/common/EditableText.vue'
+import { LiteGraph } from '@comfyorg/litegraph'
+
+const showInput = ref(false)
+const editedTitle = ref('')
+const inputStyle = ref<CSSProperties>({
+  position: 'fixed',
+  left: '0px',
+  top: '0px',
+  width: '200px',
+  height: '20px'
+})
+
+const currentNode = ref<LGraphNode | null>(null)
+
+const onEdit = (newValue: string) => {
+  if (currentNode.value && newValue.trim() !== '') {
+    currentNode.value.title = newValue.trim()
+    app.graph.setDirtyCanvas(true, true)
+  }
+  showInput.value = false
+}
+
+const extension: ComfyExtension = {
+  name: 'Comfy.NodeTitleEditor',
+  nodeCreated(node: LGraphNode) {
+    // Store the original callback
+    const originalCallback = node.onNodeTitleDblClick
+
+    node.onNodeTitleDblClick = function (e: MouseEvent, ...args: any[]) {
+      currentNode.value = this
+      editedTitle.value = this.title
+      showInput.value = true
+
+      const [x1, y1, x2, y2] = this.getBounding()
+      const [nodeWidth, nodeHeight] = this.size
+      const canvasWidth = nodeWidth
+      const canvasHeight = LiteGraph.NODE_TITLE_HEIGHT
+
+      const [left, top] = app.canvasPosToClientPos([x1, y1])
+      inputStyle.value.left = `${left}px`
+      inputStyle.value.top = `${top}px`
+
+      const width = canvasWidth * app.canvas.ds.scale
+      const height = canvasHeight * app.canvas.ds.scale
+      inputStyle.value.width = `${width}px`
+      inputStyle.value.height = `${height}px`
+
+      // Call the original callback if it exists
+      if (typeof originalCallback === 'function') {
+        originalCallback.call(this, e, ...args)
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  app.registerExtension(extension)
+})
+</script>
+
+<style scoped>
+.node-title-editor {
+  z-index: 9999;
+  padding: 0.25rem;
+}
+
+:deep(.editable-text) {
+  width: 100%;
+  height: 100%;
+}
+
+:deep(.editable-text input) {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/scripts/app.ts

@@ -3006,6 +3006,14 @@ export class ComfyApp {
     ) as Vector2
   }
 
+  canvasPosToClientPos(pos: Vector2): Vector2 {
+    const rect = this.canvasContainer.getBoundingClientRect()
+    const containerOffsets = [rect.left, rect.top]
+    return _.zip(pos, this.canvas.ds.offset, containerOffsets).map(
+      ([p, o1, o2]) => (p + o1) * this.canvas.ds.scale + o2
+    ) as Vector2
+  }
+
   getCanvasCenter(): Vector2 {
     const dpi = Math.max(window.devicePixelRatio ?? 1, 1)
     const [x, y, w, h] = app.canvas.ds.visible_area