da33179a31
This PR removes the automatic focus events from the editor. The `autoFocus` prop is now true by default. When true, the editor will begin in a focused state (`editor.instanceState.isFocused` will be `true`) and the component will respond to keyboard shortcuts and other interactions. When false, the editor will begin in an unfocused state and not respond to keyboard interactions. **It's now up to the developer** using the component to update `isFocused` themselves. There's no predictable way to do that on our side, so we leave it to the developer to decide when to turn on or off focus for a container (for example, using an intersection observer to "unfocus" components that are off screen). ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Open the multiple editors example. 2. Click to focus each editor. 3. Use the keyboard shortcuts to check that the correct editor is focused. 4. Start editing a shape, then select the other editor. The first editing shape should complete. - [x] Unit Tests - [x] End to end tests ### Release Notes - [editor] Make autofocus default, remove automatic blur / focus events. --------- Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
148 lines
3.7 KiB
TypeScript
148 lines
3.7 KiB
TypeScript
import test, { expect, Page } from '@playwright/test'
|
|
import { Editor } from '@tldraw/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()
|
|
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()
|
|
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()
|
|
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)
|
|
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()
|
|
expect(await page.evaluate(() => __tldraw_editor_events.at(-1))).toMatchObject({
|
|
target: 'canvas',
|
|
type: 'pointer',
|
|
name: 'pointer_up',
|
|
})
|
|
})
|
|
})
|