PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/packages/editor
History
Steve Ruiz 5bf05bbb3c
Flatten shapes to image(s) (#3933) 
This PR adds some functionality for turning shapes into images.

![Kapture 2024-06-13 at 12 51
00](https://github.com/tldraw/tldraw/assets/23072548/78525e29-61b5-418f-889d-2f061f26f34d)

It adds:
- the `flattenShapesToImages`
- the `useFlatten` hook
- a `flatten-shapes-to-images` action (shift + f)
- adds `flattenImageBoundsExpand` option
- adds `flattenImageBoundsPadding` option

## Flatten shapes to images

The `flattenShapesToImages` helper method will 1) create an image for
the given shape ids, 2) add it to the canvas in the same location / size
as the source shapes, and then 3) delete the original shapes. The new
image will be placed correctly in the z index and in the correct
rotation of the root-most ancestor of the given shape ids.


![image](https://github.com/tldraw/tldraw/assets/23072548/fe888980-05a5-4369-863f-90c142f9f8b9)

It has an argument, `flattenImageBoundsExpand`, which if provided will
chunk the given shapes into images based on their overlapping (expanded)
bounding boxes.


![image](https://github.com/tldraw/tldraw/assets/23072548/c4799309-244d-4a2b-ac59-9c2fd100319c)

By default, the flatten action uses the editor's
`options.flattenImageBoundsExpand`. The `flattenImageBoundsPadding`
option is used as a value for how much larger the image should be than
the source image bounds (to account for large strokes, for example).

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature

### Test Plan

1. Select shapes
2. Select context menu > edit > flatten

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

### Release Notes

- Add Flatten, a new menu item to flatten shapes into images
2024-06-16 11:40:50 +00:00
..
src Flatten shapes to image(s) (#3933) 2024-06-16 11:40:50 +00:00
api-extractor.json transfer-out: transfer out 2023-04-25 12:01:25 +01:00
api-report.md Flatten shapes to image(s) (#3933) 2024-06-16 11:40:50 +00:00
CHANGELOG.md Update CHANGELOG.md [skip ci] 2024-06-11 12:53:15 +00:00
editor.css bookmark: fix up double request and rework extractor (#3856) 2024-06-10 10:50:49 +00:00
LICENSE.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
package.json security: enforce use of our fetch function and its default referrerpolicy (#3884) 2024-06-11 13:59:25 +00:00
README.md Update READMEs, add form link (#3741) 2024-05-12 20:48:07 +00:00
setupTests.js React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00
tsconfig.json Store-level "operation end" event (#3748) 2024-05-14 09:42:41 +00:00

README.md

tldraw/tldraw

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. To purchase a commercial license or learn more, please fill out this form.

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/X at @tldraw.

Community

Have questions, comments or feedback? Join our discord or start a discussion. For the latest news and release notes, check out our Substack.