snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

apps/examples/e2e/tests/test-canvas-events.spec.ts

@@ -0,0 +1,153 @@
+import test, { expect, Page } from '@playwright/test'
+import { Editor } from 'tldraw'
+import { setupPage } from '../shared-e2e'
+
+declare const __tldraw_editor_events: any[]
+
+// We're just testing the events, not the actual results.
+
+let page: Page
+
+declare const editor: Editor
+
+test.describe('Canvas events', () => {
+	test.beforeAll(async ({ browser }) => {
+		page = await browser.newPage()
+		await setupPage(page)
+	})
+
+	test.describe('pointer events', () => {
+		test('pointer down', async () => {
+			await page.mouse.move(200, 200) // to kill any double clicks
+			await page.mouse.move(100, 100)
+			await page.mouse.down()
+			await page.waitForTimeout(20)
+			expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+				target: 'canvas',
+				type: 'pointer',
+				name: 'pointer_down',
+			})
+		})
+
+		test('pointer move', async () => {
+			await page.mouse.move(200, 200) // to kill any double clicks
+			await page.mouse.move(100, 100)
+			await page.mouse.down()
+			await page.mouse.move(101, 101)
+			expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+				target: 'canvas',
+				type: 'pointer',
+				name: 'pointer_move',
+			})
+		})
+
+		test('pointer up', async () => {
+			await page.mouse.move(200, 200) // to kill any double clicks
+			await page.mouse.move(100, 100)
+			await page.mouse.down()
+			await page.mouse.move(101, 101)
+			await page.mouse.up()
+			await page.waitForTimeout(20)
+			expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+				target: 'canvas',
+				type: 'pointer',
+				name: 'pointer_up',
+			})
+		})
+	})
+
+	test.describe('click events', () => {
+		// todo
+	})
+
+	test.describe('pinch events', () => {
+		// todo
+	})
+
+	test.describe('keyboard events', () => {
+		// todo
+	})
+
+	test.fixme('wheel events', async () => {
+		await page.mouse.move(200, 200) // to kill any double clicks
+		await page.mouse.move(100, 100)
+		await page.mouse.wheel(10, 10)
+		expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+			type: 'wheel',
+			name: 'wheel',
+			delta: {
+				x: -20,
+				y: -20,
+			},
+		})
+	})
+
+	test.fixme('complete', async () => {
+		await page.evaluate(async () => editor.complete())
+		expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+			type: 'misc',
+			name: 'complete',
+		})
+	})
+
+	test.fixme('cancel', async () => {
+		await page.evaluate(async () => editor.cancel())
+		expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+			type: 'misc',
+			name: 'complete',
+		})
+	})
+
+	test.fixme('interrupt', async () => {
+		await page.evaluate(async () => editor.interrupt())
+		expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+			type: 'misc',
+			name: 'interrupt',
+		})
+	})
+})
+
+test.describe('Shape events', () => {
+	test.beforeEach(async ({ browser }) => {
+		page = await browser.newPage()
+		await setupPage(page)
+		await page.keyboard.press('r')
+		await page.mouse.click(150, 150)
+		await page.mouse.move(0, 0)
+		await page.keyboard.press('Escape')
+	})
+
+	test('pointer down', async () => {
+		await page.mouse.move(51, 51)
+		await page.mouse.down()
+		await page.waitForTimeout(20)
+		expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+			target: 'canvas',
+			type: 'pointer',
+			name: 'pointer_down',
+		})
+	})
+
+	test('pointer move', async () => {
+		await page.mouse.move(51, 51)
+		await page.mouse.move(52, 52)
+		await page.waitForTimeout(20)
+		expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+			target: 'canvas',
+			type: 'pointer',
+			name: 'pointer_move',
+		})
+	})
+
+	test('pointer up', async () => {
+		await page.mouse.move(51, 51)
+		await page.mouse.down()
+		await page.mouse.up()
+		await page.waitForTimeout(20)
+		expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
+			target: 'canvas',
+			type: 'pointer',
+			name: 'pointer_up',
+		})
+	})
+})