Input buffering (#3223)

This PR buffs input events.

## The story so far

In the olde days, we throttled events from the canvas events hook so
that a pointer event would only be sent every 1/60th of a second. This
was fine but made drawing on the iPad / 120FPS displays a little sad.

Then we removed this throttle. It seemed fine! Drawing at 120FPS was
great. We improved some rendering speeds and tightened some loops so
that the engine could keep up with 2x the number of points in a line.

Then we started noticing that iPads and other screens could start
choking on events as it received new inputs and tried to process and
render inputs while still recovering from a previous dropped frame. Even
worse, on iPad the work of rendering at 120FPS was causing the browser
to throttle the app after some sustained drawing. Yikes!

### Batching

I did an experimental PR (#3180) to bring back batching but do it in the
editor instead. What we would do is: rather than immediately processing
an event when we get it, we would instead put the event into a buffer.
On the next 60FPS tick, we would flush the buffer and process all of the
events. We'd have them all in the same transaction so that the app would
only render once.

### Render batching?

We then tried batching the renders, so that the app would only ever
render once per (next) frame. This added a bunch of complexity around
events that needed to happen synchronously, such as writing text in a
text field. Some inputs could "lag" in a way familiar to anyone who's
tried to update an input's state asynchronously. So we backed out of
this.

### Coalescing?

Another idea from @ds300 was to "coalesce" the events. This would be
useful because, while some interactions like drawing would require the
in-between frames in order to avoid data loss, most interactions (like
resizing) didn't actually need the in-between frames, they could just
use the last input of a given type.

Coalescing turned out to be trickier than we thought, though. Often a
state node required information from elsewhere in the app when
processing an event (such as camera position or page point, which is
derived from the camera position), and so the coalesced events would
need to also include this information or else the handlers wouldn't work
the way they should when processing the "final" event during a tick.

So we backed out of the coalescing strategy for now. Here's the [PR that
removes](937469d69d)
it.

### Let's just buffer the fuckers

So this PR now should only include input buffering.

I think there are ways to achieve the same coalescing-like results
through the state nodes, which could gather information during the
`onPointerMove` handler and then actually make changes during the
`onTick` handler, so that the changes are only done as many time as
necessary. This should help with e.g. resizing lots of shapes at once.

But first let's land the buffering!

---

Mitja's original text:

This PR builds on top of Steve's [experiment
PR](https://github.com/tldraw/tldraw/pull/3180) here. It also adds event
coalescing for [`pointerMove`
events](https://github.com/tldraw/tldraw/blob/mitja/input-buffering/packages/editor/src/lib/editor/Editor.ts#L8364-L8368).
The API is [somewhat similar
](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/getCoalescedEvents)
to `getCoalescedEvent`. In `StateNodes` we register an `onPointerMove`
handler. When the event happens it gets called with the event `info`.
There's now an additional field on `TLMovePointerEvent` called
`coalescedInfo` which includes all the events. It's then on the user to
process all of these.

I decided on this API since it allows us to only expose one event
handler, but it still gives the users access to all events if they need
them.

We would otherwise either need to:

- Expose two events (coalesced and non-coalesced one and complicate the
api) so that state nodes like Resizing would not be triggered for each
pointer move.
- Offer some methods on the editor that would allow use to get the
coalesced information. Then the nodes that need that info could request
it. I [tried
this](9ad973da3a (diff-32f1de9a5a9ec72aa49a8d18a237fbfff301610f4689a4af6b37f47af435aafcR67)),
but it didn't feel good.

This also complicated the editor inputs. The events need to store
information about the event (like the mouse position when the event
happened for `onPointerMove`). But we cannot immediately update inputs
when the event happens. To make this work for `pointerMove` events I've
added `pagePoint`. It's
[calculated](https://github.com/tldraw/tldraw/pull/3223/files#diff-980beb0aa0ee9aa6d1cd386cef3dc05a500c030638ffb58d45fd11b79126103fR71)
when the event triggers and then consumers can get it straight from the
event (like
[Drawing](https://github.com/tldraw/tldraw/pull/3223/files#diff-32f1de9a5a9ec72aa49a8d18a237fbfff301610f4689a4af6b37f47af435aafcR104)).

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Add a step-by-step description of how to test your PR here.
4.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add a brief release note for your PR here.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

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

@@ -21,6 +21,7 @@ test.describe('Canvas events', () => {
 			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',
@@ -46,6 +47,7 @@ test.describe('Canvas events', () => {
 			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',
@@ -118,6 +120,7 @@ test.describe('Shape events', () => {
 	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',
@@ -128,6 +131,7 @@ test.describe('Shape events', () => {
 	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',
@@ -139,6 +143,7 @@ test.describe('Shape events', () => {
 		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',

apps/examples/e2e/tests/test-shapes.spec.ts

@@ -112,6 +112,7 @@ test.describe('Shape Tools', () => {
 
 			// Click on the page
 			await page.mouse.click(200, 200)
+			await page.waitForTimeout(20)
 
 			// We should have a corresponding shape in the page
 			expect(await getAllShapeTypes(page)).toEqual([shape])
@@ -119,6 +120,7 @@ test.describe('Shape Tools', () => {
 			// Reset for next time
 			await page.mouse.click(50, 50) // to ensure we're not focused
 			await page.keyboard.press('v') // go to the select tool
+			await page.waitForTimeout(20)
 			await page.keyboard.press('Control+a')
 			await page.keyboard.press('Backspace')
 		}
@@ -156,6 +158,7 @@ test.describe('Shape Tools', () => {
 			// Reset for next time
 			await page.mouse.click(50, 50) // to ensure we're not focused
 			await page.keyboard.press('v')
+			await page.waitForTimeout(20)
 			await page.keyboard.press('Control+a')
 			await page.keyboard.press('Backspace')
 		}

packages/editor/src/lib/editor/Editor.ts

@@ -637,7 +637,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.updateRenderingBounds()
 
-		this.on('tick', this.tick)
+		this.on('tick', this._flushEventsForTick)
 
 		requestAnimationFrame(() => {
 			this._tickManager.start()
@@ -2085,7 +2085,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/** @internal */
-	private _setCamera(point: VecLike): this {
+	private _setCamera(point: VecLike, immediate = false): this {
 		const currentCamera = this.getCamera()
 
 		if (currentCamera.x === point.x && currentCamera.y === point.y && currentCamera.z === point.z) {
@@ -2107,7 +2107,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				currentScreenPoint.y / camera.z - camera.y !== currentPagePoint.y
 			) {
 				// If it's changed, dispatch a pointer event
-				this.dispatch({
+				const event: TLPointerEventInfo = {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_move',
@@ -2119,7 +2119,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 					shiftKey: this.inputs.shiftKey,
 					button: 0,
 					isPen: this.getInstanceState().isPenMode ?? false,
-				})
+				}
+				if (immediate) {
+					this._flushEventForTick(event)
+				} else {
+					this.dispatch(event)
+				}
 			}
 
 			this._tickCameraState()
@@ -2495,6 +2500,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!this.getInstanceState().canMoveCamera) return this
 		const { x: cx, y: cy, z: cz } = this.getCamera()
 		this.setCamera({ x: cx + offset.x / cz, y: cy + offset.y / cz, z: cz }, animation)
+		this._flushEventsForTick(0)
 		return this
 	}
 
@@ -8211,12 +8217,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		])
 	}
 
-	/** @internal */
-	private tick = (elapsed = 0) => {
-		this.dispatch({ type: 'misc', name: 'tick', elapsed })
-		this.scribbles.tick(elapsed)
-	}
-
 	/**
 	 * Dispatch a cancel event.
 	 *
@@ -8229,6 +8229,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	cancel(): this {
 		this.dispatch({ type: 'misc', name: 'cancel' })
+		this._tickManager.tick()
 		return this
 	}
 
@@ -8244,6 +8245,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	interrupt(): this {
 		this.dispatch({ type: 'misc', name: 'interrupt' })
+		this._tickManager.tick()
 		return this
 	}
 
@@ -8364,6 +8366,27 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	dispatch = (info: TLEventInfo): this => {
+		this._pendingEventsForNextTick.push(info)
+		return this
+	}
+
+	private _pendingEventsForNextTick: TLEventInfo[] = []
+
+	private _flushEventsForTick = (elapsed: number) => {
+		this.batch(() => {
+			if (this._pendingEventsForNextTick.length > 0) {
+				const events = [...this._pendingEventsForNextTick]
+				this._pendingEventsForNextTick.length = 0
+				for (const info of events) {
+					this._flushEventForTick(info)
+				}
+			}
+			this.root.handleEvent({ type: 'misc', name: 'tick', elapsed })
+			this.scribbles.tick(elapsed)
+		})
+	}
+
+	private _flushEventForTick = (info: TLEventInfo) => {
 		// prevent us from spamming similar event errors if we're crashed.
 		// todo: replace with new readonly mode?
 		if (this.getCrashingError()) return this
@@ -8371,7 +8394,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const { inputs } = this
 		const { type } = info
 
-		this.batch(() => {
 		if (info.type === 'misc') {
 			// stop panning if the interaction is cancelled or completed
 			if (info.name === 'cancel' || info.name === 'complete') {
@@ -8461,11 +8483,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 						const zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z))
 
-							this.setCamera({
+						this.stopCameraAnimation()
+						if (this.getInstanceState().followingUserId) {
+							this.stopFollowingUser()
+						}
+						this._setCamera(
+							{
 								x: cx + dx / cz - x / cz + x / zoom,
 								y: cy + dy / cz - y / cz + y / zoom,
 								z: zoom,
-							})
+							},
+							true
+						)
 
 						return // Stop here!
 					}
@@ -8479,7 +8508,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 						if (this._didPinch) {
 							this._didPinch = false
-								requestAnimationFrame(() => {
+							this.once('tick', () => {
 								if (!this._didPinch) {
 									this.setSelectedShapes(_selectedShapeIdsAtPointerDown, { squashing: true })
 								}
@@ -8498,6 +8527,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 				if (this.getIsMenuOpen()) {
 					// noop
 				} else {
+					this.stopCameraAnimation()
+					if (this.getInstanceState().followingUserId) {
+						this.stopFollowingUser()
+					}
 					if (inputs.ctrlKey) {
 						// todo: Start or update the zoom end interval
 
@@ -8512,11 +8545,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 						const zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, cz + (info.delta.z ?? 0) * cz))
 
-							this.setCamera({
+						this._setCamera(
+							{
 								x: cx + (x / zoom - x) - (x / cz - x),
 								y: cy + (y / zoom - y) - (y / cz - y),
 								z: zoom,
-							})
+							},
+							true
+						)
 
 						// We want to return here because none of the states in our
 						// statechart should respond to this event (a camera zoom)
@@ -8525,7 +8561,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 					// Update the camera here, which will dispatch a pointer move...
 					// this will also update the pointer position, etc
-						this.pan(info.delta)
+					const { x: cx, y: cy, z: cz } = this.getCamera()
+					this._setCamera({ x: cx + info.delta.x / cz, y: cy + info.delta.y / cz, z: cz }, true)
 
 					if (
 						!inputs.isDragging &&
@@ -8591,12 +8628,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 						if (this.inputs.isPanning) {
 							this.stopCameraAnimation()
-								this.updateInstanceState({
+							this.setCursor({ type: 'grabbing', rotation: 0 })
-									cursor: {
-										type: 'grabbing',
-										rotation: 0,
-									},
-								})
 							return this
 						}
 
@@ -8662,20 +8694,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 										direction: this.inputs.pointerVelocity,
 										friction: CAMERA_SLIDE_FRICTION,
 									})
-										this.updateInstanceState({
+									this.setCursor({ type: this._prevCursor, rotation: 0 })
-											cursor: { type: this._prevCursor, rotation: 0 },
-										})
 								} else {
 									this.slideCamera({
 										speed: Math.min(2, this.inputs.pointerVelocity.len()),
 										direction: this.inputs.pointerVelocity,
 										friction: CAMERA_SLIDE_FRICTION,
 									})
-										this.updateInstanceState({
+									this.setCursor({
-											cursor: {
 										type: 'grab',
 										rotation: 0,
-											},
 									})
 								}
 							} else if (info.button === 0) {
@@ -8684,11 +8712,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 									direction: this.inputs.pointerVelocity,
 									friction: CAMERA_SLIDE_FRICTION,
 								})
-									this.updateInstanceState({
+								this.setCursor({
-										cursor: {
 									type: 'grab',
 									rotation: 0,
-										},
 								})
 							}
 						} else {
@@ -8723,9 +8749,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 							}
 
 							this.inputs.isPanning = true
-								this.updateInstanceState({
+							this.setCursor({ type: this.inputs.isPointing ? 'grabbing' : 'grab', rotation: 0 })
-									cursor: { type: this.inputs.isPointing ? 'grabbing' : 'grab', rotation: 0 },
-								})
 						}
 
 						break
@@ -8736,9 +8760,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 						if (info.code === 'Space' && !this.inputs.buttons.has(1)) {
 							this.inputs.isPanning = false
-								this.updateInstanceState({
+							this.setCursor({ type: this._prevCursor, rotation: 0 })
-									cursor: { type: this._prevCursor, rotation: 0 },
-								})
 						}
 
 						break
@@ -8799,7 +8821,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// active states, starting at the root.
 		this.root.handleEvent(info)
 		this.emit('event', info)
-		})
 
 		return this
 	}

packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts

@@ -62,9 +62,7 @@ export class Drawing extends StateNode {
 	}
 
 	override onPointerMove: TLEventHandlers['onPointerMove'] = () => {
-		const {
+		const { inputs } = this.editor
-			editor: { inputs },
-		} = this
 
 		if (this.isPen !== inputs.isPen) {
 			// The user made a palm gesture before starting a pen gesture;
@@ -282,8 +280,8 @@ export class Drawing extends StateNode {
 	}
 
 	private updateShapes() {
-		const { inputs } = this.editor
 		const { initialShape } = this
+		const { inputs } = this.editor
 
 		if (!initialShape) return
 
@@ -440,7 +438,7 @@ export class Drawing extends StateNode {
 				const newSegment = newSegments[newSegments.length - 1]
 
 				const { pagePointWhereCurrentSegmentChanged } = this
-				const { currentPagePoint, ctrlKey } = this.editor.inputs
+				const { ctrlKey, currentPagePoint } = this.editor.inputs
 
 				if (!pagePointWhereCurrentSegmentChanged)
 					throw Error('We should have a point where the segment changed')
@@ -623,16 +621,14 @@ export class Drawing extends StateNode {
 				if (newPoints.length > 500) {
 					this.editor.updateShapes([{ id, type: this.shapeType, props: { isComplete: true } }])
 
-					const { currentPagePoint } = this.editor.inputs
-
 					const newShapeId = createShapeId()
 
 					this.editor.createShapes<DrawableShape>([
 						{
 							id: newShapeId,
 							type: this.shapeType,
-							x: toFixed(currentPagePoint.x),
+							x: toFixed(inputs.currentPagePoint.x),
-							y: toFixed(currentPagePoint.y),
+							y: toFixed(inputs.currentPagePoint.y),
 							props: {
 								isPen: this.isPen,
 								segments: [
@@ -647,7 +643,7 @@ export class Drawing extends StateNode {
 
 					this.initialShape = structuredClone(this.editor.getShape<DrawableShape>(newShapeId)!)
 					this.mergeNextPoint = false
-					this.lastRecordedPoint = this.editor.inputs.currentPagePoint.clone()
+					this.lastRecordedPoint = inputs.currentPagePoint.clone()
 					this.currentLineLength = 0
 				}
 

packages/tldraw/src/test/TestEditor.ts

@@ -311,6 +311,17 @@ export class TestEditor extends Editor {
 
 	/* ------------------ Input Events ------------------ */
 
+	/**
+	Some of our updates are not synchronous any longer. For example, drawing happens on tick instead of on pointer move.
+	You can use this helper to force the tick, which will then process all the updates.
+	*/
+	forceTick = (count = 1) => {
+		for (let i = 0; i < count; i++) {
+			this.emit('tick', 16)
+		}
+		return this
+	}
+
 	pointerMove = (
 		x = this.inputs.currentScreenPoint.x,
 		y = this.inputs.currentScreenPoint.y,
@@ -320,7 +331,7 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			...this.getPointerEventInfo(x, y, options, modifiers),
 			name: 'pointer_move',
-		})
+		}).forceTick()
 		return this
 	}
 
@@ -333,7 +344,7 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			...this.getPointerEventInfo(x, y, options, modifiers),
 			name: 'pointer_down',
-		})
+		}).forceTick()
 		return this
 	}
 
@@ -346,7 +357,7 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			...this.getPointerEventInfo(x, y, options, modifiers),
 			name: 'pointer_up',
-		})
+		}).forceTick()
 		return this
 	}
 
@@ -380,17 +391,17 @@ export class TestEditor extends Editor {
 			type: 'click',
 			name: 'double_click',
 			phase: 'up',
-		})
+		}).forceTick()
 		return this
 	}
 
 	keyDown = (key: string, options = {} as Partial<Exclude<TLKeyboardEventInfo, 'key'>>) => {
-		this.dispatch({ ...this.getKeyboardEventInfo(key, 'key_down', options) })
+		this.dispatch({ ...this.getKeyboardEventInfo(key, 'key_down', options) }).forceTick()
 		return this
 	}
 
 	keyRepeat = (key: string, options = {} as Partial<Exclude<TLKeyboardEventInfo, 'key'>>) => {
-		this.dispatch({ ...this.getKeyboardEventInfo(key, 'key_repeat', options) })
+		this.dispatch({ ...this.getKeyboardEventInfo(key, 'key_repeat', options) }).forceTick()
 		return this
 	}
 
@@ -402,7 +413,7 @@ export class TestEditor extends Editor {
 				altKey: this.inputs.altKey && key !== 'Alt',
 				...options,
 			}),
-		})
+		}).forceTick()
 		return this
 	}
 
@@ -416,7 +427,7 @@ export class TestEditor extends Editor {
 			altKey: this.inputs.altKey,
 			...options,
 			delta: { x: dx, y: dy },
-		})
+		}).forceTick(2)
 		return this
 	}
 
@@ -438,7 +449,7 @@ export class TestEditor extends Editor {
 			...options,
 			point: { x, y, z },
 			delta: { x: dx, y: dy, z: dz },
-		})
+		}).forceTick()
 		return this
 	}
 
@@ -482,7 +493,7 @@ export class TestEditor extends Editor {
 			...options,
 			point: { x, y, z },
 			delta: { x: dx, y: dy, z: dz },
-		})
+		}).forceTick()
 		return this
 	}
 	/* ------ Interaction Helpers ------ */

packages/tldraw/src/test/translating.test.ts

@@ -166,9 +166,9 @@ describe('When translating...', () => {
 			.pointerMove(1080, 800)
 		jest.advanceTimersByTime(100)
 		editor
-			.expectShapeToMatch({ id: ids.box1, x: 1300, y: 845.68 })
+			.expectShapeToMatch({ id: ids.box1, x: 1320, y: 845.68 })
 			.pointerUp()
-			.expectShapeToMatch({ id: ids.box1, x: 1300, y: 845.68 })
+			.expectShapeToMatch({ id: ids.box1, x: 1340, y: 857.92 })
 	})
 
 	it('translates multiple shapes', () => {

packages/utils/src/lib/throttle.ts

@@ -6,7 +6,7 @@ const isTest = () =>
 
 const fpsQueue: Array<() => void> = []
 const targetFps = 60
-const targetTimePerFrame = 1000 / targetFps
+const targetTimePerFrame = Math.ceil(1000 / targetFps)
 let frame: number | undefined
 let time = 0
 let last = 0