diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts new file mode 100644 index 000000000..ac4759934 --- /dev/null +++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts @@ -0,0 +1,67 @@ +import { + type ComfyPage, + comfyExpect as expect, + comfyPageFixture as test +} from '../../../../fixtures/ComfyPage' +import type { Position } from '../../../../fixtures/types' + +test.describe('Vue Node Moving', () => { + test.beforeEach(async ({ comfyPage }) => { + await comfyPage.setSetting('Comfy.VueNodes.Enabled', true) + await comfyPage.vueNodes.waitForNodes() + }) + + const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) => { + const loadCheckpointHeaderPos = await comfyPage.page + .getByText('Load Checkpoint') + .boundingBox() + + if (!loadCheckpointHeaderPos) + throw new Error('Load Checkpoint header not found') + + return loadCheckpointHeaderPos + } + + const expectPosChanged = async (pos1: Position, pos2: Position) => { + const diffX = Math.abs(pos2.x - pos1.x) + const diffY = Math.abs(pos2.y - pos1.y) + expect(diffX).toBeGreaterThan(0) + expect(diffY).toBeGreaterThan(0) + } + + test('should allow moving nodes by dragging', async ({ comfyPage }) => { + const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage) + await comfyPage.dragAndDrop(loadCheckpointHeaderPos, { + x: 256, + y: 256 + }) + + const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage) + await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos) + + await expect(comfyPage.canvas).toHaveScreenshot('vue-node-moved-node.png') + }) + + test('@mobile should allow moving nodes by dragging on touch devices', async ({ + comfyPage + }) => { + // Disable minimap (gets in way of the node on small screens) + await comfyPage.setSetting('Comfy.Minimap.Visible', false) + + const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage) + await comfyPage.panWithTouch( + { + x: 64, + y: 64 + }, + loadCheckpointHeaderPos + ) + + const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage) + await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos) + + await expect(comfyPage.canvas).toHaveScreenshot( + 'vue-node-moved-node-touch.png' + ) + }) +}) diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png new file mode 100644 index 000000000..0d4026a7c Binary files /dev/null and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png new file mode 100644 index 000000000..fd5faae87 Binary files /dev/null and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png differ diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index 103776243..1be114d19 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue @@ -9,7 +9,7 @@ :class=" cn( 'bg-white dark-theme:bg-charcoal-800', - 'lg-node absolute rounded-2xl', + 'lg-node absolute rounded-2xl touch-none', 'border-2 border-solid border-sand-100 dark-theme:border-charcoal-600', // hover (only when node should handle events) shouldHandleNodePointerEvents &&