tldraw/packages
alex 77865d9f5e
[Snapping 3/5] Custom snapping API (#2793)
This diff adds an API for customising our existing snap types. These
are:
1. Bound snapping. When translating or resizing a shape, it'll snap to
certain key points on the bounds of particular shapes. Previously, these
were hard-coded to the corners and center of the bounding box of the
shape. Now, a shape can bring its own (e.g. a triangle may add snapping
for its 3 corners, and it's centroid rather than bounding box center.
2. Handle outline snapping. When dragging a handle, it'll snap to the
outline of other shapes geometry. Now, shapes can return different
geometry for this sort of snapping if they like.

Each of these is customised through a method on `ShapeUtil`:
`getBoundsSnapGeometry` and `getHandleSnapGeometry`. These return
interfaces describing the different geometry that can be snapped to in
both these cases. Currently, each returns an object with a single
property, but there are more types of snapping coming in follow-up PRs.
When reviewing this PR, start with the definitions of
`BoundsSnapGeometry` in `BoundsSnaps.ts` and `HandleSnapGeometry` in
`HandleSnaps.ts`

This doesn't add point snapping - i'll add that in a follow-up! It'll be
customisable with the `getHandleSnapGeometry` API.

Fixes TLD-2197

This PR is part of a series - please don't merge it until the things
before it have landed!
1. #2827 
4. #2831
5. #2793 (you are here)
6. #2841
7. #2845

### Change Type

- [x] `minor` — New feature

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

### Test Plan

- [x] Unit Tests

### Release Notes

- Add `ShapeUtil.getSnapInfo` for customising shape snaps.
2024-02-15 15:10:04 +00:00
..
assets Lokalise: Translations update (#2830) 2024-02-14 08:59:41 +00:00
editor [Snapping 3/5] Custom snapping API (#2793) 2024-02-15 15:10:04 +00:00
state dev: swap yarn test and test-dev for better dx (#2773) 2024-02-14 16:05:59 +00:00
store dev: swap yarn test and test-dev for better dx (#2773) 2024-02-14 16:05:59 +00:00
tldraw [Snapping 3/5] Custom snapping API (#2793) 2024-02-15 15:10:04 +00:00
tlschema [Snapping 2/5] Fix line-handle mid-point snapping (#2831) 2024-02-15 10:27:55 +00:00
tlsync [Snapping 1/5] Validation & strict types for fractional indexes (#2827) 2024-02-14 17:53:30 +00:00
utils [Snapping 1/5] Validation & strict types for fractional indexes (#2827) 2024-02-14 17:53:30 +00:00
validate Composable custom UI (#2796) 2024-02-15 12:10:09 +00:00