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>
This commit is contained in:
Mime Čuvalo 2024-01-24 10:19:20 +00:00 committed by GitHub
parent d1bc456162
commit 07cda7ef9f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 1363 additions and 239 deletions

View file

@ -7,10 +7,9 @@ import { Atom, atom, react } from '@tldraw/state'
// development. Use `createFeatureFlag` to create a boolean flag which will be
// `true` by default in development and staging, and `false` in production.
/** @internal */
export const featureFlags: Record<string, DebugFlag<boolean>> = {
// todo: remove this. it's not used, but we only have one feature flag and i
// wanted an example :(
}
export const featureFlags = {
canMoveArrowLabel: createFeatureFlag('canMoveArrowLabel'),
} satisfies Record<string, DebugFlag<boolean>>
/** @internal */
export const debugFlags = {
@ -109,16 +108,16 @@ function createDebugValue<T>(
})
}
// function createFeatureFlag(
// name: string,
// defaults: Defaults<boolean> = { all: true, production: false }
// ) {
// return createDebugValueBase({
// name,
// defaults,
// shouldStoreForSession: true,
// })
// }
function createFeatureFlag(
name: string,
defaults: Defaults<boolean> = { all: true, production: false }
) {
return createDebugValueBase({
name,
defaults,
shouldStoreForSession: true,
})
}
function createDebugValueBase<T>(def: DebugFlagDef<T>): DebugFlag<T> {
const defaultValue = getDefaultValue(def)