search

tldraw / tldraw

SDK for creating whiteboards and canvas experiences on the web.
https://tldraw.dev
Other
33.04k stars 1.98k forks source link

Prevent wobble during viewport following #3695

Open ds300 opened 2 weeks ago

ds300 commented 2 weeks ago

This revives the old 'derived camera' idea to prevent cursor wobbling during viewport following.

Before this PR we updated the camera on a tick during viewport following, but the shapes and cursors were not moving on the same tick (we tried that during the perf work and it was all kinds of problematic). Frankly I've forgotten how we ever managed to eliminate wobble here in the first place?

Anyway after this PR we derive the camera based on whether or not we are following a user. When you follow a user it makes it so that your viewport contains their viewport. If your viewport is not already very close to their viewport it will animate the initial position, after which it will 'lock' in place and the derived value will be used from then on.

This exposed a minor issue in our sync engine: the fact that we send presence updates in separate websocket messages from document updates. We get into situations like this

  1. user A follows user B
  2. user B deletes the current page they are on
  3. user B's page deletion diff gets sent
  4. user B's presence update gets sent with a new currentPageId
  5. user A receives the page deletion
  6. user A still thinks that user B is on the old page and doesn't know how to update the follow state.

So to fix this I made it so that we can (and do) send presence updates in the same websocket messages as document updates so the server can handle them atomically.

Change Type

Test Plan

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

Release Notes

vercel[bot] commented 2 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
examples ✅ Ready (Inspect) Visit Preview May 8, 2024 1:10pm
1 Ignored Deployment | Name | Status | Preview | Updated (UTC) | | :--- | :----- | :------ | :------ | | **tldraw-docs** | ⬜️ Ignored ([Inspect](https://vercel.com/tldraw/tldraw-docs/93Ydz8dqgskeieiPhrDsA4SiHo4F)) | [Visit Preview](https://tldraw-docs-git-david-whack-wobble-tldraw.vercel.app) | May 8, 2024 1:10pm |
ds300 commented 1 week ago

@TodePond I've heavily refactored the viewport following code in this PR, mind doing a little QA to make sure I haven't broken any features/behaviour I wasn't aware of?