Double click group title to edit (#714)

* Double click group title to edit

* Add playwright test

* Update test expectations [skip ci]

---------

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

src/components/graph/GraphCanvas.vue

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

src/components/graph/GroupTitleEditor.vue

@@ -0,0 +1,104 @@
+<template>
+  <div v-if="showInput" class="group-title-editor" :style="inputStyle">
+    <EditableText
+      :isEditing="showInput"
+      :modelValue="editedTitle"
+      @edit="onEdit"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, CSSProperties } from 'vue'
+import { app } from '@/scripts/app'
+import { LGraphGroup } from '@comfyorg/litegraph'
+import EditableText from '@/components/common/EditableText.vue'
+import { useSettingStore } from '@/stores/settingStore'
+import type { LiteGraphCanvasEvent } from '@comfyorg/litegraph'
+
+const settingStore = useSettingStore()
+
+const showInput = ref(false)
+const editedTitle = ref('')
+const inputStyle = ref<CSSProperties>({
+  position: 'fixed',
+  left: '0px',
+  top: '0px',
+  width: '200px',
+  height: '20px',
+  fontSize: '12px'
+})
+
+const currentGroup = ref<LGraphGroup | null>(null)
+
+const onEdit = (newValue: string) => {
+  if (currentGroup.value && newValue.trim() !== '') {
+    currentGroup.value.title = newValue.trim()
+    app.graph.setDirtyCanvas(true, true)
+  }
+  showInput.value = false
+}
+
+const canvasEventHandler = (event: LiteGraphCanvasEvent) => {
+  if (!settingStore.get('Comfy.Group.DoubleClickTitleToEdit')) {
+    return
+  }
+
+  if (event.detail.subType === 'group-double-click') {
+    const group: LGraphGroup = event.detail.group
+    const [x, y] = group.pos
+    const [w, h] = group.size
+
+    const e: MouseEvent = event.detail.originalEvent
+    // @ts-expect-error LiteGraphCanvasEvent is not typed
+    const relativeY = e.canvasY - y
+    // Only allow editing if the click is on the title bar
+    if (relativeY > group.titleHeight) {
+      return
+    }
+
+    currentGroup.value = group
+    editedTitle.value = group.title
+    showInput.value = true
+
+    const [left, top] = app.canvasPosToClientPos([x, y])
+    inputStyle.value.left = `${left}px`
+    inputStyle.value.top = `${top}px`
+
+    const width = w * app.canvas.ds.scale
+    const height = group.titleHeight * app.canvas.ds.scale
+    inputStyle.value.width = `${width}px`
+    inputStyle.value.height = `${height}px`
+
+    const fontSize = group.font_size * app.canvas.ds.scale
+    inputStyle.value.fontSize = `${fontSize}px`
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('litegraph:canvas', canvasEventHandler)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('litegraph:canvas', canvasEventHandler)
+})
+</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%;
+  /* Override the default font size */
+  font-size: inherit;
+}
+</style>

src/components/graph/NodeTitleEditor.vue

@@ -55,8 +55,7 @@ const extension: ComfyExtension = {
       showInput.value = true
 
       const isCollapsed = node.flags?.collapsed
-      const [x1, y1, x2, y2] = this.getBounding()
-      const [nodeWidth, nodeHeight] = this.size
+      const [x1, y1, nodeWidth, nodeHeight] = this.getBounding()
       const canvasWidth =
         // @ts-expect-error Remove after collapsed_width is exposed in LiteGraph
         isCollapsed && node._collapsed_width ? node._collapsed_width : nodeWidth

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -100,6 +100,10 @@ const linkReleaseTriggerMode = computed(() => {
 })
 
 const canvasEventHandler = (e: LiteGraphCanvasEvent) => {
+  if (!['empty-release', 'empty-double-click'].includes(e.detail.subType)) {
+    return
+  }
+
   const shiftPressed = (e.detail.originalEvent as KeyboardEvent).shiftKey
 
   if (e.detail.subType === 'empty-release') {

src/extensions/core/groupOptions.ts

@@ -1,3 +1,4 @@
+import { LGraphGroup } from '@comfyorg/litegraph'
 import { app } from '../../scripts/app'
 import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
 
@@ -77,8 +78,7 @@ app.registerExtension({
           content: 'Add Group For Selected Nodes',
           disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
           callback: () => {
-            // @ts-expect-error
-            var group = new LiteGraph.LGraphGroup()
+            const group = new LGraphGroup()
             addNodesToGroup(group, this.selected_nodes)
             app.canvas.graph.add(group)
             this.graph.change()

src/extensions/core/snapToGrid.ts

@@ -156,13 +156,11 @@ app.registerExtension({
         if (this.selected_group_resizing) {
           roundVectorToGrid(this.selected_group.size)
         } else if (selectedAndMovingGroup) {
-          // @ts-expect-error
           const [x, y] = roundVectorToGrid([...selectedAndMovingGroup.pos])
           const f = ctx.fillStyle
           const s = ctx.strokeStyle
           ctx.fillStyle = 'rgba(100, 100, 100, 0.33)'
           ctx.strokeStyle = 'rgba(100, 100, 100, 0.66)'
-          // @ts-expect-error
           ctx.rect(x, y, ...selectedAndMovingGroup.size)
           ctx.fill()
           ctx.stroke()
@@ -183,9 +181,7 @@ app.registerExtension({
         // @ts-expect-error
         const lastGroup = app.graph._groups[app.graph._groups.length - 1]
         if (lastGroup) {
-          // @ts-expect-error
           roundVectorToGrid(lastGroup.pos)
-          // @ts-expect-error
           roundVectorToGrid(lastGroup.size)
         }
       }

src/stores/settingStore.ts

@@ -277,6 +277,13 @@ export const useSettingStore = defineStore('setting', {
         defaultValue: true
       })
 
+      app.ui.settings.addSetting({
+        id: 'Comfy.Group.DoubleClickTitleToEdit',
+        name: 'Double click group title to edit',
+        type: 'boolean',
+        defaultValue: true
+      })
+
       app.ui.settings.addSetting({
         id: 'Comfy.Window.UnloadConfirmation',
         name: 'Show confirmation when closing window',