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',