mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-30 12:59:55 +00:00
038ed27107
## Summary Enabled touch drag functionality on Vue nodes by adding CSS `touchAction: 'none'`. ## Changes - **What**: Added [`touchAction: 'none'`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) CSS property to Vue nodes for touch device compatibility - **What**: Added Playwright tests for both desktop and mobile drag interactions ## Review Focus Touch event handling on various mobile browsers and pointer event compatibility across different devices. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5896-fix-Vue-node-dragging-moving-on-touch-devices-2806d73d365081578b02cd6714fd8fe0) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
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'
|
|
)
|
|
})
|
|
})
|