Add component for viewing an image of a snapshot

[TodePond]

This PR adds the TldrawImage component that displays a tldraw snapshot as an SVG image.

Why

We've seen requests for this kind of thing from users. eg: GitBook, and on discord:

The component provides a way to do that. This PR also untangles various bits of editor state from image exporting, which makes it easier for library users to export images more agnostically. (ie: they can now export any shapes on any page in any theme. previously, they had to change the user's state to do that).

What else

• This PR also adds an Image snapshot example to demonstrate the new component.
• We now pass an isDarkMode property to the toSvg method (inside the ctx argument). This means that toSvg doesn't have to rely on editor state anymore. I updated all our toSvg methods to use it.
• See code comments for more info.

Any issues?

When you toggle to editing mode in the new example, text measurements are initially wrong (until you edit the size of a text shape). Click on the text shape to see how its indicator is wrong. Not sure why this is, or if it's even related. Does it ring a bell with anyone? If not, I'll take a closer look. (fixed, see comments --steve)

Future work

Now that we've untangled image exporting from editor state, we could expose some more helpful helpers for making this easier.

Fixes tld-2122

Change Type

• [x] minor — New feature

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

Test Plan

1. Open the Image snapshot example.
2. Try editing the image, saving the image, and making sure the image updates.

• [ ] Unit Tests
• [ ] End to end tests

Release Notes

• Dev: Added the TldrawImage component.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
examples	✅ Ready (Inspect)	Visit Preview	Feb 16, 2024 1:49pm

1 Ignored Deployment

| Name | Status | Preview | Updated (UTC) | | :--- | :----- | :------ | :------ | | **tldraw-docs** | ⬜️ Ignored ([Inspect](https://vercel.com/tldraw/tldraw-docs/5fLxTAVyTQXabJXMDpNpcp1ctKVP)) | [Visit Preview](https://tldraw-docs-git-lu-tldraw-image-tldraw.vercel.app) | Feb 16, 2024 1:49pm |

[steveruizok]

viewport / page?

[TodePond]

viewport / page?

as props? yes that would be good. im planning to add some props for things like page, background, etc

[linear[bot]]

TLD-2122 TldrawImage

[steveruizok]

Riding in some changes here Lu:

• rather than opts, use the SVG options as individual props
• rather than keeping the editor in state, create the editor only in order to get the svg, then dispose it right away
• make a slightly more complex snapshot example
• have the example also keep track of background / dark mode

[steveruizok]

There seems to be a problem with text measurement, not sure if this is particular to this project or to tldraw in general.

[steveruizok]

Kind of an unusual add here, but we didn't have the ability to zoom to a specific bounds without also adding an inset. I've combined the inset property with the animations object on zoomToBounds. This is pretty obscure (usually called via methods like zoomToSelection) and I think would have been considered a bug for anyone calling it directly.

[steveruizok]

Added format option for SVG or PNG.

[steveruizok]

Text measurements are wrong because the container is not getting tldraw's styles mounted to it.

[steveruizok]

The text issues should be fixed now. When we do text measurement, we mount the measurement div into the container, so the container needs to have our styles on it.

[TodePond]

nice one, thanks for the changes Steve. Looks good