tldraw/apps
Lu Wilson 212eb88480
Add component for viewing an image of a snapshot (#2804)
This PR adds the `TldrawImage` component that displays a tldraw snapshot
as an SVG image.

![2024-02-15 at 12 29 52 - Coral
Cod](https://github.com/tldraw/tldraw/assets/15892272/14140e9e-7d6d-4dd3-88a3-86a6786325c5)

## Why

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

<img width="710" alt="image"
src="https://github.com/tldraw/tldraw/assets/15892272/3d3a3e9d-66b9-42e7-81de-a70aa7165bdc">

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.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-16 13:54:48 +00:00
..
docs Composable custom UI (#2796) 2024-02-15 12:10:09 +00:00
dotcom UI components round two (#2847) 2024-02-16 09:13:04 +00:00
dotcom-asset-upload dev: swap yarn test and test-dev for better dx (#2773) 2024-02-14 16:05:59 +00:00
dotcom-bookmark-extractor Bump Yarn to 4.0.2 and add version constraints (#2481) 2024-01-18 11:09:17 +00:00
dotcom-worker dev: swap yarn test and test-dev for better dx (#2773) 2024-02-14 16:05:59 +00:00
examples Add component for viewing an image of a snapshot (#2804) 2024-02-16 13:54:48 +00:00
health-worker Update the project to Node 20 (#2691) 2024-01-31 16:53:40 +00:00
huppy repair Huppy's handling of LICENCE (#2821) 2024-02-13 15:09:59 +00:00
vscode Composable custom UI (#2796) 2024-02-15 12:10:09 +00:00