tldraw/assets/icons/icon/dash-dotted.svg
Steve Ruiz 5601d0ee22
Separate text-align property for shapes (#3627)
This PR creates a new "text align" property for text shapes. Its default
is left align.

This means that text shapes now have their own alignment prop, separate
from the vertical / horizontal alignment used in labels.

The style panel for text has no visual change:

<img width="400" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/aac80d2a-a069-4388-870b-1e0917d88eda">

The style panel for labels has consistent icons for label position:

<img width="487" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/0adf7f0e-8446-4d3e-b9ea-a61e43035207">

Both may be configured separately.

<img width="458" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/698dcfac-6eb2-4a8c-afb8-d1e5761019ef">


# Icon refresh

This PR also removes many unused icons.

It adds a special toggle icon for the context menu.

<img width="571" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/489551e6-a370-4528-9ad4-8f93e119f26b">
<img width="492" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/cd3d77c7-8bae-4369-8b53-ca4685b2fd0e">


### Change Type

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

### Test Plan

1. Load files.
2. Paste excalidraw content.
3. Load v1 files.
4. Use the app as usual.

- [x] Unit Tests

### Release Notes

- Separates the text align property for text shapes and labels.

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-04-29 10:58:15 +00:00

14 lines
2.6 KiB
XML

<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 3.7915C17 4.89607 16.1046 5.7915 15 5.7915C13.8954 5.7915 13 4.89607 13 3.7915C13 2.68693 13.8954 1.7915 15 1.7915C16.1046 1.7915 17 2.68693 17 3.7915Z" fill="black"/>
<path d="M17 25.7915C17 26.8961 16.1046 27.7915 15 27.7915C13.8954 27.7915 13 26.8961 13 25.7915C13 24.6869 13.8954 23.7915 15 23.7915C16.1046 23.7915 17 24.6869 17 25.7915Z" fill="black"/>
<path d="M22.232 6.26525C21.6798 7.22184 20.4566 7.54959 19.5 6.9973C18.5434 6.44502 18.2157 5.22184 18.7679 4.26525C19.3202 3.30867 20.5434 2.98092 21.5 3.5332C22.4566 4.08549 22.7843 5.30867 22.232 6.26525Z" fill="black"/>
<path d="M11.232 25.3178C10.6798 26.2744 9.45658 26.6021 8.5 26.0499C7.54341 25.4976 7.21566 24.2744 7.76794 23.3178C8.32023 22.3612 9.54341 22.0335 10.5 22.5858C11.4566 23.138 11.7843 24.3612 11.232 25.3178Z" fill="black"/>
<path d="M25.5262 11.0236C24.5697 11.5758 23.3465 11.2481 22.7942 10.2915C22.2419 9.33491 22.5697 8.11173 23.5263 7.55945C24.4828 7.00716 25.706 7.33491 26.2583 8.2915C26.8106 9.24808 26.4828 10.4713 25.5262 11.0236Z" fill="black"/>
<path d="M6.47376 22.0236C5.51717 22.5758 4.29399 22.2481 3.74171 21.2915C3.18942 20.3349 3.51717 19.1117 4.47376 18.5594C5.43035 18.0072 6.65353 18.3349 7.20581 19.2915C7.7581 20.2481 7.43035 21.4713 6.47376 22.0236Z" fill="black"/>
<path d="M26 16.7915C24.8954 16.7915 24 15.8961 24 14.7915C24 13.6869 24.8954 12.7915 26 12.7915C27.1046 12.7915 28 13.6869 28 14.7915C28 15.8961 27.1046 16.7915 26 16.7915Z" fill="black"/>
<path d="M4 16.7915C2.89543 16.7915 2 15.8961 2 14.7915C2 13.6869 2.89543 12.7915 4 12.7915C5.10457 12.7915 6 13.6869 6 14.7915C6 15.8961 5.10457 16.7915 4 16.7915Z" fill="black"/>
<path d="M23.5262 22.0236C22.5697 21.4713 22.2419 20.2481 22.7942 19.2915C23.3465 18.3349 24.5697 18.0072 25.5263 18.5594C26.4828 19.1117 26.8106 20.3349 26.2583 21.2915C25.706 22.2481 24.4828 22.5758 23.5262 22.0236Z" fill="black"/>
<path d="M4.47376 11.0236C3.51717 10.4713 3.18942 9.24808 3.74171 8.2915C4.29399 7.33491 5.51717 7.00716 6.47376 7.55945C7.43035 8.11173 7.7581 9.33491 7.20581 10.2915C6.65353 11.2481 5.43034 11.5758 4.47376 11.0236Z" fill="black"/>
<path d="M18.768 25.3178C18.2157 24.3612 18.5434 23.138 19.5 22.5857C20.4566 22.0334 21.6798 22.3612 22.2321 23.3178C22.7843 24.2743 22.4566 25.4975 21.5 26.0498C20.5434 26.6021 19.3202 26.2743 18.768 25.3178Z" fill="black"/>
<path d="M7.76795 6.2652C7.21567 5.30862 7.54342 4.08544 8.5 3.53315C9.45659 2.98087 10.6798 3.30862 11.2321 4.2652C11.7843 5.22179 11.4566 6.44497 10.5 6.99725C9.54342 7.54954 8.32024 7.22179 7.76795 6.2652Z" fill="black"/>
</svg>