tldraw/apps/examples/e2e/tests/test-camera.spec.ts

191 lines
4.6 KiB
TypeScript
Raw Normal View History

import { CDPSession, Page, expect } from '@playwright/test'
import { Editor } from 'tldraw'
import { setup } from '../shared-e2e'
import test from './fixtures/fixtures'
declare const editor: Editor
let client: CDPSession
const dispatchTouch = async (
client: CDPSession,
type: 'touchStart' | 'touchMove' | 'touchEnd' | 'touchCancel',
touchPoints: { x: number; y: number }[]
) => {
await client.send('Input.dispatchTouchEvent', { type, touchPoints })
}
const multiTouchGesture = async ({
start,
end,
steps,
}: {
start: { x: number; y: number }[]
end: { x: number; y: number }[]
steps: number
}) => {
const finger1 = { x: start[0].x, y: start[0].y }
const finger2 = { x: start[1].x, y: start[1].x }
const finalTouch = [finger1, finger2]
await dispatchTouch(client, 'touchStart', [finger1, finger2])
await sleep(10)
// how far should the fingers move each step to reach the end point?
const finger1StepDistance = {
x: (end[0].x - start[0].x) / steps,
y: (end[0].y - start[0].y) / steps,
}
const finger2StepDistance = {
x: (end[1].x - start[1].x) / steps,
y: (end[1].y - start[1].y) / steps,
}
for (let i = 1; i < steps; i++) {
await dispatchTouch(client, 'touchMove', [
{ x: finger1.x + i * finger1StepDistance.x, y: finger1.y + i * finger1StepDistance.y },
{ x: finger2.x + i * finger2StepDistance.x, y: finger2.y + i * finger2StepDistance.y },
])
await sleep(10)
}
await dispatchTouch(client, 'touchEnd', finalTouch)
await sleep(10)
}
const scrollZoom = async ({
page,
currentZoomLevel,
zoomDirection,
steps,
}: {
page: Page
currentZoomLevel: number
zoomDirection: 'in' | 'out'
steps: number
}) => {
page.keyboard.down('Control')
// zooming with the scroll wheel is capped within the editor to make sure it's consistent between browsers,
//scrolling further than 15px per event doesn't have any effect
for (let i = 0; i < steps; i++) {
await page.mouse.wheel(0, zoomDirection === 'out' ? -15 : 15)
}
page.keyboard.up('Control')
// scrolling 15px on the mouse wheel changes the zoom level by 10%
const expectedZoomLevel =
zoomDirection === 'out' ? currentZoomLevel * 1.1 ** steps : currentZoomLevel / 1.1 ** steps
return expectedZoomLevel
}
export function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
test.describe('camera', () => {
test.beforeEach(setup)
test('panning', async ({ isMobile, page }) => {
test.skip(!isMobile)
client = await page.context().newCDPSession(page)
expect(await page.evaluate(() => editor.inputs.currentPagePoint)).toEqual({
x: 50,
y: 50,
z: 0,
})
// the fewer steps you use, the faster the pan. So the ratio of pixels moved is not one-to-one.
await multiTouchGesture({
start: [
{ x: 50, y: 50 },
{ x: 100, y: 100 },
],
end: [
{ x: 100, y: 100 },
{ x: 150, y: 150 },
],
steps: 50,
})
// With current panning speed, the above gesture moves the camera by 36px on each axis
expect(
await page.evaluate(() => [
editor.inputs.currentPagePoint.x,
editor.inputs.currentPagePoint.y,
])
).toStrictEqual([86, 86])
})
test('pinching on trackpad', async ({ page, isMobile }) => {
// Test is flaky, disabling.
test.skip(true)
// pinching on trackpad is the same event as ctrl+scrollwheel
test.skip(isMobile)
expect(await page.evaluate(() => editor.getZoomLevel())).toBe(1)
let expectedZoomLevel = await scrollZoom({
page,
currentZoomLevel: 1,
zoomDirection: 'in',
steps: 3,
})
// toBeCloseTo is used to avoid floating point errors
expect(await page.evaluate(() => editor.getZoomLevel())).toBeCloseTo(expectedZoomLevel, 1)
expectedZoomLevel = await scrollZoom({
page,
currentZoomLevel: expectedZoomLevel,
zoomDirection: 'out',
steps: 3,
})
expect(await page.evaluate(() => editor.getZoomLevel())).toBeCloseTo(expectedZoomLevel, 1)
})
test('pinching on touchscreen', async ({ page, isMobile }) => {
test.skip(!isMobile)
client = await page.context().newCDPSession(page)
expect(await page.evaluate(() => editor.getZoomLevel())).toBe(1)
// zoom out
await multiTouchGesture({
start: [
{ x: 100, y: 100 },
{ x: 200, y: 200 },
],
end: [
{ x: 149, y: 149 },
{ x: 151, y: 151 },
],
steps: 50,
})
expect(await page.evaluate(() => editor.getZoomLevel())).toBe(0.1)
// now zoom in
await multiTouchGesture({
start: [
{ x: 149, y: 149 },
{ x: 151, y: 151 },
],
end: [
{ x: 0, y: 0 },
{ x: 300, y: 300 },
],
steps: 50,
})
expect(await page.evaluate(() => editor.getZoomLevel())).toBe(8)
})
test.fixme('minimap', async () => {
// todo
})
test.fixme('hand tool', async () => {
// todo
})
})