Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent wobble during viewport following #3695

Merged
merged 7 commits into from May 19, 2024
Merged

Conversation

ds300
Copy link
Collaborator

@ds300 ds300 commented May 3, 2024

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

  • sdk — Changes the tldraw SDK
  • bugfix — Bug fix

Test Plan

  1. Add a step-by-step description of how to test your PR here.
  • Unit Tests
  • End to end tests

Release Notes

  • Fixes a bug that caused the cursor & shapes to wiggle around when following someone else's viewport

Copy link

vercel bot commented May 3, 2024

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) Visit Preview May 8, 2024 1:10pm

@ds300
Copy link
Collaborator Author

ds300 commented May 8, 2024

@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?

Copy link
Collaborator

@TodePond TodePond left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gave it a QA, looks great 👍

@steveruizok
Copy link
Collaborator

Great stuff David, awesome that an issue like this revealed something so useful about how we do our syncing.

@steveruizok steveruizok added this pull request to the merge queue May 19, 2024
Merged via the queue into main with commit 4851299 May 19, 2024
10 checks passed
@steveruizok steveruizok deleted the david/whack-wobble branch May 19, 2024 01:27
@ds300 ds300 mentioned this pull request May 20, 2024
15 tasks
github-merge-queue bot pushed a commit that referenced this pull request May 20, 2024
follow up to #3695 

### Change Type

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

- [ ] `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
- [x] `internal` — Does not affect user-facing stuff

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

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `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.
- [x] `dunno` — I don't know


### Test Plan

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

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

### Release Notes

- Add a brief release note for your PR here.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bugfix Fixes a bug of some kind sdk Affects the tldraw sdk
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants