tldraw/packages/editor
Steve Ruiz 647d03a173
[Fix] Camera coordinate issues (#2719)
This PR fixes some bugs related to our coordinate systems. These bugs
would appear when the editor was not full screen.

![Kapture 2024-02-04 at 11 53
37](https://github.com/tldraw/tldraw/assets/23072548/9c2199f3-b34d-4fe1-a3e5-d0c65fe5a11e)

In short, we were being inconsistent with whether the
`currentScreenPoint` was relative to the top left corner of the
component or the top left corner of the page that contained the
component.

Here's the actual system:

<img width="898" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/c49b3686-aeb6-4164-a55d-8639d40290a1">

The `viewportPageBounds` describes the bounds of the component within
the browser's space. Its `x` and `y` describe the delta in browser space
between the top left corner of the **page** and the component. This is
not effected by scrolling.

The use's `screenPoint` describes the user's cursor's location relative
to the `viewportPageBounds`. Its `x` and `y` describe the delta in
browser space between the top left corner of the **component** and the
cursor.

While this is a bug fix, I'm marking it as major as apps may be
depending on the previous (broken) behavior.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Zoom in, out, and pinch on an editor that isn't full screen.
2. Zoom in, out, and pinch on an editor that is full screen.
3. Drag and scroll on an editor that isn't full screen.
4. Drag and scroll on an editor that is full screen.

- [x] Unit Tests

### Release Notes

- Fixed bugs with `getViewportScreenCenter` that could effect zooming
and pinching on editors that aren't full screen
2024-02-04 12:03:49 +00:00
..
api arrows: separate out handle behavior from labels (#2621) 2024-01-31 11:17:03 +00:00
src [Fix] Camera coordinate issues (#2719) 2024-02-04 12:03:49 +00:00
api-extractor.json transfer-out: transfer out 2023-04-25 12:01:25 +01:00
api-report.md arrows: separate out handle behavior from labels (#2621) 2024-01-31 11:17:03 +00:00
CHANGELOG.md Update CHANGELOG.md [skip ci] 2024-01-10 12:03:59 +00:00
editor.css arrows: separate out handle behavior from labels (#2621) 2024-01-31 11:17:03 +00:00
LICENSE.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
package.json dev: add test-dev command for easier testing of packages (#2627) 2024-01-29 10:29:38 +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

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.