tldraw/apps
Mime Čuvalo 07cda7ef9f
arrows: add ability to change label placement (#2557)
This adds the ability to drag the label on an arrow to a different
location within the line segment/arc.


https://github.com/tldraw/tldraw/assets/469604/dbd2ee35-bebc-48d6-b8ee-fcf12ce91fa5

- A lot of the complexity lay in ensuring a fixed distance from the ends
of the arrowheads.
- I added a new type of handle `text-adjust` that makes the text box the
very handle itself.
- I added a `ARROW_HANDLES` enum - we should use more enums!
- The bulk of the changes are in ArrowShapeUtil — check that out in
particular obviously :)

Along the way, I tried to improve a couple spots as I touched them:
- added some more documentation to Vec.ts because some of the functions
in there were obscure/new to me. (at least the naming, hah)
- added `getPointOnCircle` which was being done in a couple places
independently and refactored those places.

### Questions
- the `getPointOnCircle` API changed. Is this considered breaking and/or
should I leave the signature the same? Wasn't sure if it was a big deal
or not.
- I made `labelPosition` in the schema always but I guess it could have
been optional? Lemme know if there's a preference.
- Any feedback on tests? Happy to expand those if necessary.

### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

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

### Test Plan

1. For arrow in [straightArrow, curvedArrow] test the following:
   a. Label in the middle
   b. Label at both ends of the arrow
   c. Test arrows in different directions
d. Rotating the endpoints and seeing that the label stays at the end of
the arrow at a fixed width.
   e. Test different stroke widths.
   f. Test with different arrowheads.
2. Also, test arcs that are more circle like than arc-like.

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

### Release Notes

- Adds ability to change label position on arrows.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Co-authored-by: alex <alex@dytry.ch>
2024-01-24 10:19:20 +00:00
..
docs Use simple example (#2561) 2024-01-21 14:55:29 +00:00
dotcom [dotcom] Delete service worker, cache tldraw assets (#2552) 2024-01-19 15:31:01 +00:00
dotcom-asset-upload Bump Yarn to 4.0.2 and add version constraints (#2481) 2024-01-18 11:09:17 +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 Bump Yarn to 4.0.2 and add version constraints (#2481) 2024-01-18 11:09:17 +00:00
examples arrows: add ability to change label placement (#2557) 2024-01-24 10:19:20 +00:00
huppy Bump Yarn to 4.0.2 and add version constraints (#2481) 2024-01-18 11:09:17 +00:00
vscode Bump Yarn to 4.0.2 and add version constraints (#2481) 2024-01-18 11:09:17 +00:00