PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
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
1 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
packages/editor/src/lib/editor/Editor.ts
View file

@ -2093,26 +2093,34 @@ export class Editor extends EventEmitter<TLEventMap> {
}
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
// (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)!
this.dispatch({
type: 'pointer',
target: 'canvas',
name: 'pointer_move',
// weird but true: we need to put the screen point back into client space
point: Vec.AddXY(currentScreenPoint, screenBounds.x, screenBounds.y),
pointerId: INTERNAL_POINTER_IDS.CAMERA_MOVE,
ctrlKey: this.inputs.ctrlKey,
altKey: this.inputs.altKey,
shiftKey: this.inputs.shiftKey,
button: 0,
isPen: this.getInstanceState().isPenMode ?? false,
})
// 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({
type: 'pointer',
target: 'canvas',
name: 'pointer_move',
// weird but true: we need to put the screen point back into client space
point: Vec.AddXY(currentScreenPoint, screenBounds.x, screenBounds.y),
pointerId: INTERNAL_POINTER_IDS.CAMERA_MOVE,
ctrlKey: this.inputs.ctrlKey,
altKey: this.inputs.altKey,
shiftKey: this.inputs.shiftKey,
button: 0,
isPen: this.getInstanceState().isPenMode ?? false,
})
}
this._tickCameraState()
})