tldraw/packages/editor
Steve Ruiz 2bbab1a790
Perf: Improve text outline performance (#3429)
We use text shadows to create "outlines" around text shapes. These
shadows are rendered on the GPU. In Chrome (and on computers with a
capable GPU) text shadows work pretty well, however on Safari—and in
particular on iOS—they cause massive frame drops.


https://github.com/tldraw/tldraw/assets/23072548/b65cbcaa-6cc3-46f3-b54d-1f9cc07fc499

This PR:
- adds an LOD to text shadows, removing them at < 35% zoom
- removes text shadows entirely on Safari

If we had a "high performance" or "low-end device" mode, then shadows /
text shadows would be the first to go.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

### Test Plan

1. Use text shapes on iOS.
2. Use text shapes on Safari.
3. Use text shapes on Chrome.

### Release Notes

- Improves performance of text shapes on iOS / Safari.
2024-04-10 10:20:16 +00:00
..
api [culling] Improve setting of display none. (#3376) 2024-04-08 11:36:12 +00:00
src Perf: Improve text outline performance (#3429) 2024-04-10 10:20:16 +00:00
api-extractor.json transfer-out: transfer out 2023-04-25 12:01:25 +01:00
api-report.md Perf: (slightly) faster min dist checks (#3401) 2024-04-08 13:31:05 +00:00
CHANGELOG.md Update CHANGELOG.md [skip ci] 2024-02-29 18:12:00 +00:00
editor.css Perf: block hit tests while moving camera (#3418) 2024-04-09 14:34:24 +00:00
LICENSE.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
package.json use native structuredClone on node, cloudflare workers, and in tests (#3166) 2024-03-18 17:16:09 +00:00
README.md Fix trademark links (#2380) 2023-12-26 09:22:04 +00:00
setupTests.js React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
tsconfig.json Check tsconfig "references" arrays (#2891) 2024-02-21 13:07:53 +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.