diff --git a/browser_tests/assets/reroute/native_reroute.json b/browser_tests/assets/reroute/native_reroute.json new file mode 100644 index 000000000..993d478ac --- /dev/null +++ b/browser_tests/assets/reroute/native_reroute.json @@ -0,0 +1,110 @@ +{ + "last_node_id": 25, + "last_link_id": 33, + "nodes": [ + { + "id": 4, + "type": "CheckpointLoaderSimple", + "pos": [160, 240], + "size": [315, 98], + "flags": {}, + "order": 0, + "mode": 0, + "inputs": [], + "outputs": [ + { + "name": "MODEL", + "type": "MODEL", + "slot_index": 0, + "links": [] + }, + { + "name": "CLIP", + "type": "CLIP", + "slot_index": 1, + "links": [] + }, + { + "name": "VAE", + "type": "VAE", + "slot_index": 2, + "links": [33] + } + ], + "properties": { + "Node name for S&R": "CheckpointLoaderSimple" + }, + "widgets_values": ["v1-5-pruned-emaonly.safetensors"] + }, + { + "id": 19, + "type": "VAEDecode", + "pos": [623.0897216796875, 324.64453125], + "size": [210, 46], + "flags": {}, + "order": 1, + "mode": 0, + "inputs": [ + { + "name": "samples", + "type": "LATENT", + "link": null + }, + { + "name": "vae", + "type": "VAE", + "link": 33 + } + ], + "outputs": [ + { + "name": "IMAGE", + "type": "IMAGE", + "links": null + } + ], + "properties": { + "Node name for S&R": "VAEDecode" + }, + "widgets_values": [] + } + ], + "links": [[33, 4, 2, 19, 1, "VAE"]], + "floatingLinks": [ + { + "id": 6, + "origin_id": 4, + "origin_slot": 2, + "target_id": -1, + "target_slot": -1, + "type": "VAE", + "parentId": 1 + } + ], + "groups": [], + "config": {}, + "extra": { + "reroutes": [ + { + "id": 1, + "pos": [545.4541015625, 295.85760498046875], + "linkIds": [], + "floating": { + "slotType": "output" + } + }, + { + "id": 2, + "pos": [543.8283081054688, 355.45849609375], + "linkIds": [33] + } + ], + "linkExtensions": [ + { + "id": 33, + "parentId": 2 + } + ] + }, + "version": 0.4 +} diff --git a/browser_tests/fixtures/utils/litegraphUtils.ts b/browser_tests/fixtures/utils/litegraphUtils.ts index da47b4fe9..e62a7c685 100644 --- a/browser_tests/fixtures/utils/litegraphUtils.ts +++ b/browser_tests/fixtures/utils/litegraphUtils.ts @@ -1,10 +1,17 @@ import type { Page } from '@playwright/test' -import type { NodeId } from '../../../src/types/comfyWorkflow' +import type { NodeId } from '../../../src/schemas/comfyWorkflowSchema' import { ManageGroupNode } from '../../helpers/manageGroupNode' import type { ComfyPage } from '../ComfyPage' import type { Position, Size } from '../types' +export const getMiddlePoint = (pos1: Position, pos2: Position) => { + return { + x: (pos1.x + pos2.x) / 2, + y: (pos1.y + pos2.y) / 2 + } +} + export class NodeSlotReference { constructor( readonly type: 'input' | 'output', diff --git a/browser_tests/rerouteNode.spec.ts b/browser_tests/rerouteNode.spec.ts index ea0345f70..7843d0cfd 100644 --- a/browser_tests/rerouteNode.spec.ts +++ b/browser_tests/rerouteNode.spec.ts @@ -1,6 +1,7 @@ import { expect } from '@playwright/test' import { comfyPageFixture as test } from './fixtures/ComfyPage' +import { getMiddlePoint } from './fixtures/utils/litegraphUtils' test.describe('Reroute Node', () => { test.beforeEach(async ({ comfyPage }) => { @@ -36,3 +37,61 @@ test.describe('Reroute Node', () => { await expect(comfyPage.canvas).toHaveScreenshot('reroute_inserted.png') }) }) + +test.describe('LiteGraph Native Reroute Node', () => { + test('loads from workflow', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('reroute/native_reroute') + await expect(comfyPage.canvas).toHaveScreenshot('native_reroute.png') + }) + + test('Can add reroute by alt clicking on link', async ({ comfyPage }) => { + const loadCheckpointNode = ( + await comfyPage.getNodeRefsByTitle('Load Checkpoint') + )[0] + const clipEncodeNode = ( + await comfyPage.getNodeRefsByTitle('CLIP Text Encode (Prompt)') + )[0] + + const slot1 = await loadCheckpointNode.getOutput(1) + const slot2 = await clipEncodeNode.getInput(0) + const middlePoint = getMiddlePoint( + await slot1.getPosition(), + await slot2.getPosition() + ) + + await comfyPage.page.keyboard.down('Alt') + await comfyPage.page.mouse.click(middlePoint.x, middlePoint.y) + await comfyPage.page.keyboard.up('Alt') + + await expect(comfyPage.canvas).toHaveScreenshot( + 'native_reroute_alt_click.png' + ) + }) + + test('Can add reroute by clicking middle of link context menu', async ({ + comfyPage + }) => { + const loadCheckpointNode = ( + await comfyPage.getNodeRefsByTitle('Load Checkpoint') + )[0] + const clipEncodeNode = ( + await comfyPage.getNodeRefsByTitle('CLIP Text Encode (Prompt)') + )[0] + + const slot1 = await loadCheckpointNode.getOutput(1) + const slot2 = await clipEncodeNode.getInput(0) + const middlePoint = getMiddlePoint( + await slot1.getPosition(), + await slot2.getPosition() + ) + + await comfyPage.page.mouse.click(middlePoint.x, middlePoint.y) + await comfyPage.page + .locator('.litecontextmenu .litemenu-entry', { hasText: 'Add Reroute' }) + .click() + + await expect(comfyPage.canvas).toHaveScreenshot( + 'native_reroute_context_menu.png' + ) + }) +}) diff --git a/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png new file mode 100644 index 000000000..6fc7cf768 Binary files /dev/null and b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-2x-linux.png differ diff --git a/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png new file mode 100644 index 000000000..05143dae8 Binary files /dev/null and b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-alt-click-chromium-linux.png differ diff --git a/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-2x-linux.png b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-2x-linux.png new file mode 100644 index 000000000..cc1053a42 Binary files /dev/null and b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-2x-linux.png differ diff --git a/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png new file mode 100644 index 000000000..fac3c4d0b Binary files /dev/null and b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-chromium-linux.png differ diff --git a/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-2x-linux.png b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-2x-linux.png new file mode 100644 index 000000000..1a9d0d9a9 Binary files /dev/null and b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-2x-linux.png differ diff --git a/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png new file mode 100644 index 000000000..f5acd46da Binary files /dev/null and b/browser_tests/rerouteNode.spec.ts-snapshots/native-reroute-context-menu-chromium-linux.png differ