diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index 2f6fc0b14..1c2fbd78c 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -762,7 +762,7 @@ export class ComfyPage {
y: 625
}
})
- this.page.mouse.move(10, 10)
+ await this.page.mouse.move(10, 10)
await this.nextFrame()
}
@@ -774,7 +774,7 @@ export class ComfyPage {
},
button: 'right'
})
- this.page.mouse.move(10, 10)
+ await this.page.mouse.move(10, 10)
await this.nextFrame()
}
@@ -1046,6 +1046,8 @@ export class ComfyPage {
}
}
+export const testComfySnapToGridGridSize = 50
+
export const comfyPageFixture = base.extend<{
comfyPage: ComfyPage
comfyMouse: ComfyMouse
@@ -1072,7 +1074,8 @@ export const comfyPageFixture = base.extend<{
'Comfy.EnableTooltips': false,
'Comfy.userId': userId,
// Set tutorial completed to true to avoid loading the tutorial workflow.
- 'Comfy.TutorialCompleted': true
+ 'Comfy.TutorialCompleted': true,
+ 'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize
})
} catch (e) {
console.error(e)
diff --git a/browser_tests/tests/interaction.spec.ts b/browser_tests/tests/interaction.spec.ts
index 552878a26..fc1b5e8e1 100644
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -1,6 +1,12 @@
import { expect } from '@playwright/test'
+import { Position } from '@vueuse/core'
-import { type ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
+import {
+ type ComfyPage,
+ comfyPageFixture as test,
+ testComfySnapToGridGridSize
+} from '../fixtures/ComfyPage'
+import { type NodeReference } from '../fixtures/utils/litegraphUtils'
test.describe('Item Interaction', () => {
test('Can select/delete all items', async ({ comfyPage }) => {
@@ -57,8 +63,10 @@ test.describe('Node Interaction', () => {
await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png')
})
- test('Can drag-select nodes with Meta (mac)', async ({ comfyPage }) => {
- const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+ const dragSelectNodes = async (
+ comfyPage: ComfyPage,
+ clipNodes: NodeReference[]
+ ) => {
const clipNode1Pos = await clipNodes[0].getPosition()
const clipNode2Pos = await clipNodes[1].getPosition()
const offset = 64
@@ -74,10 +82,67 @@ test.describe('Node Interaction', () => {
}
)
await comfyPage.page.keyboard.up('Meta')
+ }
+
+ test('Can drag-select nodes with Meta (mac)', async ({ comfyPage }) => {
+ const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+ await dragSelectNodes(comfyPage, clipNodes)
expect(await comfyPage.getSelectedGraphNodesCount()).toBe(
clipNodes.length
)
})
+
+ test('Can move selected nodes using the Comfy.Canvas.MoveSelectedNodes.{Up|Down|Left|Right} commands', async ({
+ comfyPage
+ }) => {
+ const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+ const getPositions = () =>
+ Promise.all(clipNodes.map((node) => node.getPosition()))
+ const testDirection = async ({
+ direction,
+ expectedPosition
+ }: {
+ direction: string
+ expectedPosition: (originalPosition: Position) => Position
+ }) => {
+ const originalPositions = await getPositions()
+ await dragSelectNodes(comfyPage, clipNodes)
+ await comfyPage.executeCommand(
+ `Comfy.Canvas.MoveSelectedNodes.${direction}`
+ )
+ await comfyPage.canvas.press(`Control+Arrow${direction}`)
+ const newPositions = await getPositions()
+ expect(newPositions).toEqual(originalPositions.map(expectedPosition))
+ }
+ await testDirection({
+ direction: 'Down',
+ expectedPosition: (originalPosition) => ({
+ ...originalPosition,
+ y: originalPosition.y + testComfySnapToGridGridSize
+ })
+ })
+ await testDirection({
+ direction: 'Right',
+ expectedPosition: (originalPosition) => ({
+ ...originalPosition,
+ x: originalPosition.x + testComfySnapToGridGridSize
+ })
+ })
+ await testDirection({
+ direction: 'Up',
+ expectedPosition: (originalPosition) => ({
+ ...originalPosition,
+ y: originalPosition.y - testComfySnapToGridGridSize
+ })
+ })
+ await testDirection({
+ direction: 'Left',
+ expectedPosition: (originalPosition) => ({
+ ...originalPosition,
+ x: originalPosition.x - testComfySnapToGridGridSize
+ })
+ })
+ })
})
test('Can drag node', async ({ comfyPage }) => {
diff --git a/src/components/dialog/content/manager/packBanner/PackBanner.vue b/src/components/dialog/content/manager/packBanner/PackBanner.vue
index d7386cb54..f6b9e93cd 100644
--- a/src/components/dialog/content/manager/packBanner/PackBanner.vue
+++ b/src/components/dialog/content/manager/packBanner/PackBanner.vue
@@ -1,11 +1,37 @@
-
+
+
+
+
![default banner]()
+
+
+
+
+
+
+
![]()
+
+