Tldraw/packages/editor/src/lib
Mime Čuvalo 6c846716c3
assets: make option to transform urls dynamically / LOD (#3827)
this is take #2 of this PR https://github.com/tldraw/tldraw/pull/3764

This continues the idea kicked off in
https://github.com/tldraw/tldraw/pull/3684 to explore LOD and takes it
in a different direction.

Several things here to call out:
- our dotcom version would start to use Cloudflare's image transforms
- we don't rewrite non-image assets 
- we debounce zooming so that we're not swapping out images while
zooming (it creates jank)
- we load different images based on steps of .25 (maybe we want to make
this more, like 0.33). Feels like 0.5 might be a bit too much but we can
play around with it.
- we take into account network connection speed. if you're on 3g, for
example, we have the size of the image.
- dpr is taken into account - in our case, Cloudflare handles it. But if
it wasn't Cloudflare, we could add it to our width equation.
- we use Cloudflare's `fit=scale-down` setting to never scale _up_ an
image.
- we don't swap the image in until we've finished loading it
programatically (to avoid a blank image while it loads)

TODO
- [x] We need to enable Cloudflare's pricing on image transforms btw
@steveruizok 😉 - this won't work quite yet until we do that.


### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [x] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Test images on staging, small, medium, large, mega
2. Test videos on staging

- [x] Unit Tests
- [ ] End to end tests

### Release Notes

- Assets: make option to transform urls dynamically to provide different
sized images on demand.
2024-06-11 14:17:09 +00:00
..
components security: enforce use of our fetch function and its default referrerpolicy (#3884) 2024-06-11 13:59:25 +00:00
config [DX] sensible defaults for createTLStore (#3886) 2024-06-05 14:29:54 +00:00
editor assets: make option to transform urls dynamically / LOD (#3827) 2024-06-11 14:17:09 +00:00
hooks security: enforce use of our fetch function and its default referrerpolicy (#3884) 2024-06-11 13:59:25 +00:00
primitives make sure everything marked @public gets documented (#3892) 2024-06-10 13:50:03 +00:00
test Bindings (#3326) 2024-05-08 12:37:31 +00:00
utils security: enforce use of our fetch function and its default referrerpolicy (#3884) 2024-06-11 13:59:25 +00:00
TldrawEditor.tsx assets: make option to transform urls dynamically / LOD (#3827) 2024-06-11 14:17:09 +00:00
constants.ts assets: make option to transform urls dynamically / LOD (#3827) 2024-06-11 14:17:09 +00:00
options.ts Add option for max points per draw shape (#3900) 2024-06-10 08:08:00 +00:00