Don't trigger pointer move on zoom (#3305)

In this PR, when the camera changes, we check whether the pointer's page
position has actually changed before triggering a pointer move event.
This means that the pointer move will not fire while zooming in and out.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

### Test Plan

1. Zoom in and out.
2. The performance tab should not see any calls to `updateHoveredShape`
or other pointer move related events.

### Release Notes

- Improve performance of zooming.
This commit is contained in:
Steve Ruiz 2024-03-29 15:29:28 +00:00 committed by GitHub
parent 27e961be99
commit 379094ddfb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -2093,13 +2093,20 @@ export class Editor extends EventEmitter<TLEventMap> {
} }
this.batch(() => { this.batch(() => {
this.store.put([{ ...currentCamera, ...point }]) // include id and meta here const camera = { ...currentCamera, ...point }
this.store.put([camera]) // include id and meta here
// Dispatch a new pointer move because the pointer's page will have changed // Dispatch a new pointer move because the pointer's page will have changed
// (its screen position will compute to a new page position given the new camera position) // (its screen position will compute to a new page position given the new camera position)
const { currentScreenPoint } = this.inputs const { currentScreenPoint, currentPagePoint } = this.inputs
const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)! const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!
// compare the next page point (derived from the curent camera) to the current page point
if (
currentScreenPoint.x / camera.z - camera.x !== currentPagePoint.x ||
currentScreenPoint.y / camera.z - camera.y !== currentPagePoint.y
) {
// If it's changed, dispatch a pointer event
this.dispatch({ this.dispatch({
type: 'pointer', type: 'pointer',
target: 'canvas', target: 'canvas',
@ -2113,6 +2120,7 @@ export class Editor extends EventEmitter<TLEventMap> {
button: 0, button: 0,
isPen: this.getInstanceState().isPenMode ?? false, isPen: this.getInstanceState().isPenMode ?? false,
}) })
}
this._tickCameraState() this._tickCameraState()
}) })