tldraw/apps/examples
Steve Ruiz 79460cbf3a
Use canvas bounds for viewport bounds (#2798)
This PR changes the way that viewport bounds are calculated by using the
canvas element as the source of truth, rather than the container. This
allows for cases where the canvas is not the same dimensions as the
component. (Given the way our UI and context works, there are cases
where this is desired, i.e. toolbars and other items overlaid on top of
the canvas area).

The editor's `getContainer` is now only used for the text measurement.
It would be good to get that out somehow.

# Pros

We can inset the canvas

# Cons

We can no longer imperatively call `updateScreenBounds`, as we need to
provide those bounds externally.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Use the examples, including the new inset canvas example.

- [x] Unit Tests

### Release Notes

- Changes the source of truth for the viewport page bounds to be the
canvas instead.
2024-02-12 15:03:25 +00:00
..
e2e Examples tweaks (#2681) 2024-02-02 17:36:30 +00:00
public Examples tweaks (#2681) 2024-02-02 17:36:30 +00:00
src Use canvas bounds for viewport bounds (#2798) 2024-02-12 15:03:25 +00:00
.gitignore feat: add new prop to force mobile mode layout (#1734) 2023-11-11 14:11:59 +00:00
LICENSE.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
package.json examples: clean up Canvas/Store events and make UiEvents have code snippets (#2770) 2024-02-07 16:51:04 +00:00
README.md Fix trademark links (#2380) 2023-12-26 09:22:04 +00:00
tsconfig.json Add snapshot prop, examples (#1856) 2023-09-08 14:48:55 +00:00
vercel.json Restore vercel.jsons (#2650) 2024-01-25 23:24:22 +00:00
vite.config.ts Examples tweaks (#2681) 2024-02-02 17:36:30 +00:00

@tldraw/example

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.