No description
Find a file
alex 3c1aee492a
faster image processing in default asset handler (#2441)
![Kapture 2024-01-10 at 13 42
06](https://github.com/tldraw/tldraw/assets/1489520/616bcda7-c05b-46f1-b985-3a36bb5c9476)
(gif is with 6x CPU throttling to make the effect more visible)

This is the first of a few diffs I'm working on to make dropping images
onto the canvas feel a lot faster.

There are three main changes here:
1. We operate on `Blob`s and `File`s rather than data urls. This saves a
fair bit on converting to/from base64 all the time. I've updated our
`MediaHelper` APIs to encourage the same in consumers.
2. We only check the max canvas size (slow) if images are above a
certain dimension that we consider "safe" (8k x 8k)
3. Switching from the `downscale` npm library to canvas native
downscaling. that library claims to give better results than the
browser, but hasn't been updated in ~7 years. in modern browsers, we can
opt-in to native high-quality image smoothing to achieve similar results
much faster than with an algorithm implemented in pure JS.

I want to follow this up with a system to show image placeholders whilst
we're waiting for long-running operations like resizing etc but i'm
going to split that out into its own diff as it'll involve some fairly
complex changes to the history management API.

### Change Type

- [x] `major` — Breaking change

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Tested manually, unit tests & end-to-end tests pass
2024-01-10 14:41:18 +00:00
.github Revert "zoom to affected shapes after undo/redo" (#2310) 2023-12-12 11:36:52 +00:00
.husky Replace Atom.value with Atom.get() (#2189) 2023-11-13 11:51:22 +00:00
.yarn Styles API (#1580) 2023-06-16 10:33:47 +00:00
apps faster image processing in default asset handler (#2441) 2024-01-10 14:41:18 +00:00
assets Lokalise: Translations update (#2418) 2024-01-10 14:37:33 +00:00
config Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
packages faster image processing in default asset handler (#2441) 2024-01-10 14:41:18 +00:00
scripts Fix the publish script (#2440) 2024-01-10 14:40:06 +00:00
.eslintignore untrack generated files (#1646) 2023-06-24 08:22:42 +00:00
.eslintplugin.js transfer-out: transfer out 2023-04-25 12:01:25 +01:00
.eslintrc.js no impure getters pt 11 (#2236) 2023-11-16 15:34:56 +00:00
.gitignore Publish api.json (#2034) 2023-10-08 15:00:58 +00:00
.ignore untrack generated files (#1646) 2023-06-24 08:22:42 +00:00
.prettierignore untrack generated files (#1646) 2023-06-24 08:22:42 +00:00
.prettierrc Revert "Update dependencies (#1613)" (#1617) 2023-06-19 09:49:44 +00:00
.yarnrc.yml lite: tweak lockfile name 2023-04-25 12:01:38 +01:00
CHANGELOG.md Update CHANGELOG.md [skip ci] 2024-01-10 12:03:59 +00:00
CLA.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
CODE_OF_CONDUCT.md transfer-out: transfer out 2023-04-25 12:01:25 +01:00
CONTRIBUTING.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
lazy.config.ts untrack generated files (#1646) 2023-06-24 08:22:42 +00:00
lerna.json Update CHANGELOG.md [skip ci] 2024-01-10 12:03:59 +00:00
LICENSE.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
package.json add descriptions to examples (#2375) 2023-12-27 17:17:18 +00:00
public-yarn.lock faster image processing in default asset handler (#2441) 2024-01-10 14:41:18 +00:00
README.md add descriptions to examples (#2375) 2023-12-27 17:17:18 +00:00
TRADEMARKS.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
vercel.json Update readme (#2027) 2023-10-06 12:10:33 +00:00

tldraw

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.