PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/packages/editor
History
Steve Ruiz 219e2f63dd
[improvement] account for coarse pointers / insets in edge scrolling (#2401) 
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
2024-01-10 14:29:32 +00:00
..
api [fix] next selected shapes comment (#2427) 2024-01-09 10:16:16 +00:00
src [improvement] account for coarse pointers / insets in edge scrolling (#2401) 2024-01-10 14:29:32 +00:00
api-extractor.json transfer-out: transfer out 2023-04-25 12:01:25 +01:00
api-report.md [tech debt] Primitives renaming party / cleanup (#2396) 2024-01-03 12:13:15 +00:00
CHANGELOG.md Update CHANGELOG.md [skip ci] 2024-01-10 12:03:59 +00:00
editor.css Stop shape text labels being hoverable when context menu is open (#2352) 2023-12-19 14:26:10 +00:00
LICENSE.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
package.json Update CHANGELOG.md [skip ci] 2024-01-10 12:03:59 +00:00
README.md Fix trademark links (#2380) 2023-12-26 09:22:04 +00:00
setupTests.js Styles API follow-ups (#1636) 2023-06-24 13:46:04 +00:00
tsconfig.json tldraw zero - package shuffle (#1710) 2023-07-17 21:22:34 +00:00

README.md

tldraw/tldraw

Community

Have questions, comments or feedback? Join our discord or start a discussion.

Distributions

You can find tldraw on npm here.

Contribution

Please see our contributing guide. Found a bug? Please submit an issue.

License

The tldraw source code and its distributions are provided under the tldraw license. This license does not permit commercial use.

If you wish to use this project in commercial product, you need to purchase a commercial license. Please contact us at hello@tldraw.com for more inforion about obtaining a commercial license.

Trademarks

Copyright (c) 2023-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our trademark guidelines for info on acceptable usage.

Contact

Find us on Twitter at @tldraw or email hello@tldraw.com. You can also join our discord for quick help and support.