diff --git a/browser_tests/assets/oversized_group.json b/browser_tests/assets/oversized_group.json new file mode 100644 index 000000000..2f1a17e36 --- /dev/null +++ b/browser_tests/assets/oversized_group.json @@ -0,0 +1,90 @@ +{ + "last_node_id": 9, + "last_link_id": 9, + "nodes": [ + { + "id": 3, + "type": "KSampler", + "pos": [ + 37, + 98 + ], + "size": [ + 315, + 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": [ + { + "id": 1, + "title": "Group", + "bounding": [ + 23, + 23, + 900, + 825 + ], + "color": "#3f789e", + "font_size": 24, + "flags": {} + } + ], + "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 97f8e63bf..4f7e3c198 100644 --- a/browser_tests/interaction.spec.ts +++ b/browser_tests/interaction.spec.ts @@ -320,6 +320,15 @@ test.describe('Node Interaction', () => { await expect(comfyPage.canvas).toHaveScreenshot('group-selected-nodes.png') }) + test('Can fit group to contents', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('oversized_group') + await comfyPage.ctrlA() + await comfyPage.nextFrame() + await comfyPage.executeCommand('Comfy.Graph.FitGroupToContents') + await comfyPage.nextFrame() + await expect(comfyPage.canvas).toHaveScreenshot('group-fit-to-contents.png') + }) + // Somehow this test fails on GitHub Actions. It works locally. // https://github.com/Comfy-Org/ComfyUI_frontend/pull/736 test.skip('Can pin/unpin nodes with keyboard shortcut', async ({ diff --git a/browser_tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-2x-linux.png b/browser_tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-2x-linux.png new file mode 100644 index 000000000..ffc715a5e Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-2x-linux.png differ diff --git a/browser_tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png new file mode 100644 index 000000000..efe5c7cf6 Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/group-fit-to-contents-chromium-linux.png differ diff --git a/src/stores/commandStore.ts b/src/stores/commandStore.ts index 9d83fa0ad..29f8c3a17 100644 --- a/src/stores/commandStore.ts +++ b/src/stores/commandStore.ts @@ -493,6 +493,24 @@ export const useCommandStore = defineStore('command', () => { function: () => { useWorkspaceStore().toggleFocusMode() } + }, + { + id: 'Comfy.Graph.FitGroupToContents', + icon: 'pi pi-expand', + label: 'Fit Group To Contents', + versionAdded: '1.4.9', + function: () => { + for (const group of app.canvas.selectedItems) { + if (group instanceof LGraphGroup) { + group.recomputeInsideNodes() + const padding = useSettingStore().get( + 'Comfy.GroupSelectedNodes.Padding' + ) + group.resizeTo(group.children, padding) + app.graph.change() + } + } + } } ]