mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-26 16:05:11 +00:00
8d1a170136
*PR Created by the Glary-Bot Agent* --- Group Nodes are a legacy feature superseded by Subgraphs. This PR removes every UI entry point for *creating* a new Group Node while keeping the loading, ungrouping, and management code intact so existing workflows that contain Group Nodes continue to load and can still be unpacked or managed. ## Removed creation entry points - `Comfy.GroupNode.ConvertSelectedNodesToGroupNode` command - `Alt+G` keybinding - "Convert to Group Node (Deprecated)" canvas and node right-click menu items (`groupNode.ts` `getCanvasMenuItems` / `getNodeMenuItems`) - "Convert to Group Node" entry in the Vue selection menu (`useSelectionMenuOptions.ts`) - Associated `MENU_ORDER` entry in `contextMenuConverter.ts` - `convertSelectedNodesToGroupNode` / `convertDisabled` helpers in `groupNode.ts` - `BadgeVariant.DEPRECATED` enum member (no remaining consumers; knip-clean) - Matching `en` locale strings in `main.json` (`contextMenu.Convert to Group Node`, `commands.Convert selected nodes to group node`) and `commands.json` (`Comfy_GroupNode_ConvertSelectedNodesToGroupNode`) - Browser-test helpers `convertToGroupNode` / `convertAllNodesToGroupNode` and the three tests that exercised the creation flow ## Preserved (intentionally) - `GroupNodeHandler`, `GroupNodeConfig`, `GroupNodeBuilder`, `ManageGroupDialog` - `beforeConfigureGraph` / `nodeCreated` hooks that load and initialize Group Nodes from saved workflows - "Manage Group Nodes" canvas menu item, the `Comfy.GroupNode.ManageGroupNodes` command, and the per-node "Manage Group Node" / "Convert to nodes" options on existing group node instances - "Ungroup selected group nodes" command + `Alt+Shift+G` keybinding so users can disassemble existing group nodes in legacy workflows - Reduced `browser_tests/tests/groupNode.spec.ts` covering surviving behaviors: workflow loading (legacy `/` separator, hidden-input config, v1.3.3 fixture), copy/paste of already-loaded group nodes across workflows, and opening the Manage Group Node dialog ## Verification - `pnpm typecheck` clean - `pnpm typecheck:browser` clean - `pnpm format` clean - `pnpm knip` clean (no new findings; pre-existing flac.ts tag warning unchanged) - `pnpm test:unit` — 796 files, 10,789 tests pass (8 pre-existing skipped); includes a regression test in `useSelectionMenuOptions.test.ts` asserting the Vue selection menu no longer offers a Convert to Group Node option - Pre-commit hooks (oxfmt, oxlint, eslint, typecheck, typecheck:browser) passed - Manual verification against a live dev server: programmatically inspecting the GroupNode extension showed `getCanvasMenuItems` returns only `[Manage Group Nodes]`, `getNodeMenuItems` returns `[]`, and the `ConvertSelectedNodesToGroupNode` command + Alt+G keybinding are absent from the registries. Visually captured the node right-click menu (attached screenshot) — "Convert to Subgraph" remains, no "Convert to Group Node" entry - Browser E2E suite not executed locally (sandbox has no GPU and Playwright requires a full backend; the reduced spec will run in CI) - Non-English locales not modified — per `src/locales/CONTRIBUTING.md` they are regenerated by CI ## Notes for reviewers - This is a surgical removal of creation only; loading any older workflow that already contains group nodes will continue to work. - If you'd like to also remove the management UI (`Manage Group Nodes` command/menu/dialog) or the ungroup command in a follow-up, happy to open a separate PR. ## Screenshots  ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12347-feat-remove-ability-to-create-Group-Nodes-3656d73d365081d488bfd98ffd7545c0) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Amp <amp@ampcode.com>
227 lines
8.1 KiB
TypeScript
227 lines
8.1 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import { NodeBadgeMode } from '@/types/nodeSource'
|
|
import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
|
|
import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
|
|
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
|
|
})
|
|
|
|
test.describe(
|
|
'Canvas Right Click Menu',
|
|
{ tag: ['@screenshot', '@ui'] },
|
|
() => {
|
|
test('Can add node', async ({ comfyPage }) => {
|
|
await comfyPage.canvasOps.rightClick()
|
|
await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png')
|
|
await comfyPage.page.getByText('Add Node').click()
|
|
await comfyPage.page.getByText('loaders').click()
|
|
await comfyPage.page.getByText('Load VAE').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'add-node-node-added.png'
|
|
)
|
|
})
|
|
|
|
test('Can add group', async ({ comfyPage }) => {
|
|
await comfyPage.canvasOps.rightClick()
|
|
await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png')
|
|
await comfyPage.page.getByText('Add Group', { exact: true }).click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'add-group-group-added.png'
|
|
)
|
|
})
|
|
}
|
|
)
|
|
|
|
test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
|
|
test('Can open properties panel', async ({ comfyPage }) => {
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
|
|
await comfyPage.page.getByText('Properties Panel').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'right-click-node-properties-panel.png'
|
|
)
|
|
})
|
|
|
|
test('Can collapse', async ({ comfyPage }) => {
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
|
|
await comfyPage.page.getByText('Collapse').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'right-click-node-collapsed.png'
|
|
)
|
|
})
|
|
|
|
test('Can collapse (Node Badge)', async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.NodeBadge.NodeIdBadgeMode',
|
|
NodeBadgeMode.ShowAll
|
|
)
|
|
await comfyPage.settings.setSetting(
|
|
'Comfy.NodeBadge.NodeSourceBadgeMode',
|
|
NodeBadgeMode.ShowAll
|
|
)
|
|
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.page.getByText('Collapse').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'right-click-node-collapsed-badge.png'
|
|
)
|
|
})
|
|
|
|
test('Can bypass', async ({ comfyPage }) => {
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
|
|
await comfyPage.page.getByText('Bypass').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'right-click-node-bypassed.png'
|
|
)
|
|
})
|
|
|
|
test('Can pin and unpin', async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.Graph.AutoPanSpeed', 0)
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.expectScreenshot(comfyPage.canvas, 'right-click-node.png')
|
|
await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.nextFrame()
|
|
|
|
// Get EmptyLatentImage node title position dynamically (for dragging)
|
|
const emptyLatentNode = await comfyPage.nodeOps.getNodeRefById(5)
|
|
const titlePos = await emptyLatentNode.getTitlePosition()
|
|
await comfyPage.canvasOps.dragAndDrop(titlePos, { x: 16, y: 16 })
|
|
await expect(comfyPage.canvas).toHaveScreenshot('node-pinned.png')
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'right-click-pinned-node.png'
|
|
)
|
|
await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'right-click-unpinned-node.png'
|
|
)
|
|
})
|
|
|
|
test('Can move after unpin', async ({ comfyPage }) => {
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.nextFrame()
|
|
|
|
// Get EmptyLatentImage node title position dynamically (for dragging)
|
|
const emptyLatentNode = await comfyPage.nodeOps.getNodeRefById(5)
|
|
const titlePos = await emptyLatentNode.getTitlePosition()
|
|
await comfyPage.canvasOps.dragAndDrop(titlePos, { x: 200, y: 590 })
|
|
await expect(comfyPage.canvas).toHaveScreenshot(
|
|
'right-click-unpinned-node-moved.png'
|
|
)
|
|
})
|
|
|
|
test('Can pin/unpin selected nodes', async ({ comfyPage }) => {
|
|
await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
|
|
await comfyPage.page.keyboard.down('Control')
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.page.locator('.litemenu-entry:has-text("Pin")').click()
|
|
await comfyPage.page.keyboard.up('Control')
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'selected-nodes-pinned.png'
|
|
)
|
|
await comfyPage.canvas.click({
|
|
position: DefaultGraphPositions.emptyLatentWidgetClick,
|
|
button: 'right'
|
|
})
|
|
await comfyPage.page.mouse.move(10, 10)
|
|
await comfyPage.nextFrame()
|
|
await comfyPage.page.locator('.litemenu-entry:has-text("Unpin")').click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await comfyPage.expectScreenshot(
|
|
comfyPage.canvas,
|
|
'selected-nodes-unpinned.png'
|
|
)
|
|
})
|
|
|
|
test('Can clone pinned nodes', async ({ comfyPage }) => {
|
|
const nodeCount = await comfyPage.nodeOps.getGraphNodesCount()
|
|
const node = (await comfyPage.nodeOps.getFirstNodeRef())!
|
|
await node.clickContextMenuOption('Pin')
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await node.click('title', { button: 'right' })
|
|
await expect(
|
|
comfyPage.page.locator('.litemenu-entry:has-text("Unpin")')
|
|
).toBeAttached()
|
|
const cloneItem = comfyPage.page.locator(
|
|
'.litemenu-entry:has-text("Clone")'
|
|
)
|
|
await cloneItem.click()
|
|
await comfyPage.contextMenu.waitForHidden()
|
|
await expect
|
|
.poll(() => comfyPage.nodeOps.getGraphNodesCount())
|
|
.toBe(nodeCount + 1)
|
|
})
|
|
})
|