219e2f63dd
This PR: - shrinks the distance for edge scrolling and insets the distance for coarse pointers - adds edge inset tracking ## Scroll distances Rather than increasing the distance, we move the "zero" in from the edges, so that the middle of a honkin' fat finger would be at "zero" when the edge of the finger is touching the edge of the screen. This is a bit more reliable than looking at just the component size. ## Inset tracking We now track whether a shape's edges are identical to the edges of the document body. When an edge is inset, we extend the edge scrolling distance outside of the component, so that dragging PAST the edge of the component will scroll. When an edge is NOT inset, we bring that distance into the component's bounds, so that dragging NEAR TO the edge will begin to scroll. ![image](https://github.com/tldraw/tldraw/assets/23072548/bb216c98-3dd0-4e2e-a635-4c4f339d5117) ![image](https://github.com/tldraw/tldraw/assets/23072548/75e83c81-1ca9-40a9-8edc-72851d3b1411) ![image](https://github.com/tldraw/tldraw/assets/23072548/6cda7bda-2935-4ded-821c-e7bf78833a1c) ### Change Type - [x] `minor` — New feature ### Test Plan 1. Use edge scrolling on mobile 2. Use edge scrolling on desktop 3. Use edge scrolling in the "scrolling example" - [x] Unit Tests ### Release Notes - Add `instanceState.insets` to track which edges of the component are inset from the edges of the document body. - Improve behavior around edge scrolling |
||
---|---|---|
.github | ||
.husky | ||
.yarn | ||
apps | ||
assets | ||
config | ||
packages | ||
scripts | ||
.eslintignore | ||
.eslintplugin.js | ||
.eslintrc.js | ||
.gitignore | ||
.ignore | ||
.prettierignore | ||
.prettierrc | ||
.yarnrc.yml | ||
CHANGELOG.md | ||
CLA.md | ||
CODE_OF_CONDUCT.md | ||
CONTRIBUTING.md | ||
lazy.config.ts | ||
lerna.json | ||
LICENSE.md | ||
package.json | ||
public-yarn.lock | ||
README.md | ||
TRADEMARKS.md | ||
vercel.json |
tldraw
Welcome to the public monorepo for tldraw. tldraw is an open source library for creating infinite canvas experiences in React. It's the software behind the digital whiteboard tldraw.com.
👉 Read the docs and learn more at tldraw.dev.
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
.
License
tldraw's source code and distributed packages are provided under the non-commercial tldraw license.
This license does not permit commercial use. If you wish to use tldraw in a commercial product or enterprise, you will need to purchase a commercial license. To obtain a commercial license, please contact us at hello@tldraw.com.
To learn more, see our license page.
Trademarks
The tldraw name and logo are trademarks of tldraw. Please see our trademark guidelines for info on acceptable usage.
Community
Have questions, comments or feedback? Join our discord or start a discussion.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
Contact
Find us on Twitter at @tldraw or email hello@tldraw.com. You can also join our discord for quick help and support.