3ce18c0c31
This PR stops collaborator cursors wobbling while viewport-following. It's a **new wobble** that we haven't seen before! (It crept in at some point) It happens when these three things happen at the same time: * You're following someone * They're panning * They're not moving their pointer eg: This happens when they're trackpad-panning. So this is *not* the **old wobble** that we fixed before! That one is still fixed. --- The **new wobble** looks like this:  It's sometimes hard-to-spot because of the _smoothing_ that we do. When we drastically increase the strength of smoothing... the **new wobble** is less noticeable:  But we can do better! So for demonstration purposes... let's turn off _smoothing_ to let us see the **new wobble** more clearly.  Now we can clearly see what's going on... The cursor is updating every animation **frame**. The camera is updating every **tick**. Depending on your screen's refresh rate, these _might be different_! Let's test that theory by throttling the **tick** further. As expected, it increases the **new wobble**:  Let's test the theory again by trying on a screen where the _tick_ and _frame_ are in sync. As expected, the **new wobble** doesn't happen _most of the time_. However, _frame_ and _tick_ can still get out of sync! Which causes the occasional wobble:  So let's fix both cases... Instead of making the following-camera update every _tick_... Let's make it update every _frame_!  The perceptive among you might notice a slight wobble that's still there... This is an entirely **different wobble** caused by different things. We can get to it in the future! But we're back at our original wobble-quota for now.  When we turn smoothing back on, things look better than before 👍  ### Change Type - [x] `patch` — Bug Fix ### Test Plan 1. Open a single shared project in two different browser sessions. 2. Make one session's user follow the other. 3. Trackpad-pan the leader's camera around. 4. Check that the wobble has reduced. |
||
|---|---|---|
| .github | ||
| .husky | ||
| .yarn | ||
| apps | ||
| assets | ||
| config | ||
| e2e | ||
| packages | ||
| scripts | ||
| .eslintignore | ||
| .eslintplugin.js | ||
| .eslintrc.js | ||
| .gitignore | ||
| .ignore | ||
| .prettierignore | ||
| .prettierrc | ||
| .yarnrc.yml | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| lazy.config.ts | ||
| lerna.json | ||
| LICENSE | ||
| package.json | ||
| public-yarn.lock | ||
| README.md | ||
tldraw
Welcome to the public monorepo for tldraw.
What is tldraw?
tldraw is a collaborative digital whiteboard available at tldraw.com. Its editor, user interface, and other underlying libraries are open source and available in this repository. They are also distributed on npm. You can use tldraw to create a drop-in whiteboard for your product or as the foundation on which to build your own inifinite canvas applications.
Learn more at tldraw.dev.
Note
This repo contains source code for the current version of tldraw. You can find the source for the original version here.
Installation & Usage
To learn more about using tldraw in your React application, follow our guide here or see this StackBlitz.
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/editor.css'
import '@tldraw/tldraw/ui.css'
function TldrawExample() {
return <Tldraw />
}
Local development
To run the local development server, first clone this repo.
Install dependencies:
yarn
Start the local development server:
yarn dev
Open the example project at localhost:5420.
Examples
Our development server contains several examples that demonstrates different ways that you can customize tldraw or use its APIs. Each example is found in the apps/examples/src folder.
- eg:
localhost:5420for the basic example. - eg:
localhost:5420/apifor the API example.
To learn more about using tldraw, visit our docs.
About this repository
Top-level layout
This repository's contents is divided across four primary sections:
/appscontains the source for our applications/packagescontains the source for our public packages/scriptscontains scripts used for building and publishing/assetscontains icons and translations relied on by the app
Applications
examples: our local development / examples projectdocs: our docs site at tldraw.devvscode: our Visual Studio Code extension
Packages
editor: the tldraw editorui: the editor's user interfacetldraw: the main tldraw package containing both the editor and the UIprimitives: low-level primitives for working with vectors and geometrytlschema: shape definitions and migrationstlsync-client: a library for (locally) syncronizing editor instancestlstore: an in-memory reactive databasetlvalidate: a validation library used for run-time validationtlassets: a library for working with tldraw's fonts and translationsfile-format: a library for working with tldraw's.tldrfile formatutils: low-level data utilities shared by other libraries
Community
Have questions, comments or feedback? Join our discord or start a discussion.
Distributions
You can find tldraw on npm here.
License
The source code for various apps and packages in this repository (as well as our 2.0+ distributions and releases) are currently licensed under Apache-2.0. These licenses are subject to change in our upcoming 2.0 release. If you are planning to use tldraw in a commercial product, please reach out at hello@tldraw.com.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
Note: we are currently unable to accept contributions on the @tldraw/tldraw or @tldraw/editor packages while we work out our final licensing.
Contact
Find us on Twitter at @tldraw or email hello@tldraw.com. You can also join our discord for quick help and support.