diff --git a/browser_tests/assets/single_group.json b/browser_tests/assets/single_group.json
new file mode 100644
index 000000000..8a076bd2c
--- /dev/null
+++ b/browser_tests/assets/single_group.json
@@ -0,0 +1,88 @@
+{
+ "last_node_id": 9,
+ "last_link_id": 13,
+ "nodes": [
+ {
+ "id": 3,
+ "type": "KSampler",
+ "pos": {
+ "0": 10.321063995361328,
+ "1": 73.14462280273438
+ },
+ "size": {
+ "0": 315,
+ "1": 262
+ },
+ "flags": {},
+ "order": 0,
+ "mode": 0,
+ "inputs": [
+ {
+ "name": "model",
+ "type": "MODEL",
+ "link": null
+ },
+ {
+ "name": "positive",
+ "type": "CONDITIONING",
+ "link": null
+ },
+ {
+ "name": "negative",
+ "type": "CONDITIONING",
+ "link": null
+ },
+ {
+ "name": "latent_image",
+ "type": "LATENT",
+ "link": null
+ }
+ ],
+ "outputs": [
+ {
+ "name": "LATENT",
+ "type": "LATENT",
+ "links": [],
+ "slot_index": 0
+ }
+ ],
+ "properties": {
+ "Node name for S&R": "KSampler"
+ },
+ "widgets_values": [
+ 156680208700286,
+ "randomize",
+ 20,
+ 8,
+ "euler",
+ "normal",
+ 1
+ ]
+ }
+ ],
+ "links": [],
+ "groups": [
+ {
+ "title": "Group",
+ "bounding": [
+ 0,
+ 0,
+ 335,
+ 346
+ ],
+ "color": "#3f789e",
+ "font_size": 24
+ }
+ ],
+ "config": {},
+ "extra": {
+ "ds": {
+ "scale": 1,
+ "offset": [
+ 0,
+ 0
+ ]
+ }
+ },
+ "version": 0.4
+}
\ No newline at end of file
diff --git a/browser_tests/interaction.spec.ts b/browser_tests/interaction.spec.ts
index b5583736a..9948a2458 100644
--- a/browser_tests/interaction.spec.ts
+++ b/browser_tests/interaction.spec.ts
@@ -169,6 +169,21 @@ test.describe('Node Interaction', () => {
})
})
+test.describe('Group Interaction', () => {
+ test('Can double click group title to edit', async ({ comfyPage }) => {
+ await comfyPage.loadWorkflow('single_group')
+ await comfyPage.canvas.dblclick({
+ position: {
+ x: 50,
+ y: 10
+ }
+ })
+ await comfyPage.page.keyboard.type('Hello World')
+ await comfyPage.page.keyboard.press('Enter')
+ await expect(comfyPage.canvas).toHaveScreenshot('group-title-edited.png')
+ })
+})
+
test.describe('Canvas Interaction', () => {
test('Can zoom in/out', async ({ comfyPage }) => {
await comfyPage.zoom(-100)
diff --git a/browser_tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png
new file mode 100644
index 000000000..22860669f
Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/group-title-edited-chromium-linux.png differ
diff --git a/package-lock.json b/package-lock.json
index fbf20201b..358c8c60a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
"version": "1.2.43",
"dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
- "@comfyorg/litegraph": "^0.7.58",
+ "@comfyorg/litegraph": "^0.7.59",
"@primevue/themes": "^4.0.0-rc.2",
"@vitejs/plugin-vue": "^5.0.5",
"@vueuse/core": "^11.0.0",
@@ -1883,9 +1883,9 @@
"dev": true
},
"node_modules/@comfyorg/litegraph": {
- "version": "0.7.58",
- "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.58.tgz",
- "integrity": "sha512-0+anFQgfGVLy33jyTKfvMFQ7mhv51wvBvqvG9Jc23aJHKW8/FJw6rdrsWDRNhSM1zfxhMPWWvDCoHhQt3mnR1g==",
+ "version": "0.7.59",
+ "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.59.tgz",
+ "integrity": "sha512-Qy4uRa/16MxvsNubBXs+hOVVXKpmNHiQCg/VanFEv2koYrXi4mf/9zKWNNNukoDgL2aMoFpVkXS5O/TiWzFWbg==",
"license": "MIT"
},
"node_modules/@cspotcode/source-map-support": {
diff --git a/package.json b/package.json
index cc3211aba..e662521df 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
},
"dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
- "@comfyorg/litegraph": "^0.7.58",
+ "@comfyorg/litegraph": "^0.7.59",
"@primevue/themes": "^4.0.0-rc.2",
"@vitejs/plugin-vue": "^5.0.5",
"@vueuse/core": "^11.0.0",
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index b7e83bb93..775ec73e4 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -6,6 +6,7 @@
+
@@ -14,6 +15,7 @@
+
+
diff --git a/src/components/graph/NodeTitleEditor.vue b/src/components/graph/NodeTitleEditor.vue
index d369addc6..99d466ef7 100644
--- a/src/components/graph/NodeTitleEditor.vue
+++ b/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
diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index 7ae1928a3..1b97f42af 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/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') {
diff --git a/src/extensions/core/groupOptions.ts b/src/extensions/core/groupOptions.ts
index 21d7e8dbc..f9e677a3e 100644
--- a/src/extensions/core/groupOptions.ts
+++ b/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()
diff --git a/src/extensions/core/snapToGrid.ts b/src/extensions/core/snapToGrid.ts
index 049e5f516..c44cdc015 100644
--- a/src/extensions/core/snapToGrid.ts
+++ b/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)
}
}
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index b7107e7b9..2d60fb67b 100644
--- a/src/stores/settingStore.ts
+++ b/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',