First draft of the new bindings API. We'll follow this up with some API
refinements, tests, documentation, and examples.

Bindings are a new record type for establishing relationships between
two shapes so they can update at the same time.

### Change Type

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

### Release Notes

#### Breaking changes
- The `start` and `end` properties on `TLArrowShape` no longer have
`type: point | binding`. Instead, they're always a point, which may be
out of date if a binding exists. To check for & retrieve arrow bindings,
use `getArrowBindings(editor, shape)` instead.
- `getArrowTerminalsInArrowSpace` must be passed a `TLArrowBindings` as
a third argument: `getArrowTerminalsInArrowSpace(editor, shape,
getArrowBindings(editor, shape))`
- The following types have been renamed:
    - `ShapeProps` -> `RecordProps`
    - `ShapePropsType` -> `RecordPropsType`
    - `TLShapePropsMigrations` -> `TLPropsMigrations`
    - `SchemaShapeInfo` -> `SchemaPropsInfo`

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
This commit is contained in:
alex 2024-05-08 13:37:31 +01:00 committed by GitHub
parent 0a7816e34d
commit da35f2bd75
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
95 changed files with 4087 additions and 2446 deletions

View file

@ -1,13 +1,6 @@
import { HistoryEntry, MigrationSequence, SerializedStore, Store, StoreSchema } from '@tldraw/store'
import {
SchemaShapeInfo,
TLRecord,
TLStore,
TLStoreProps,
TLUnknownShape,
createTLSchema,
} from '@tldraw/tlschema'
import { TLShapeUtilConstructor } from '../editor/shapes/ShapeUtil'
import { SchemaPropsInfo, TLRecord, TLStore, TLStoreProps, createTLSchema } from '@tldraw/tlschema'
import { TLAnyBindingUtilConstructor, checkBindings } from './defaultBindings'
import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from './defaultShapes'
/** @public */
@ -16,7 +9,11 @@ export type TLStoreOptions = {
defaultName?: string
id?: string
} & (
| { shapeUtils?: readonly TLAnyShapeUtilConstructor[]; migrations?: readonly MigrationSequence[] }
| {
shapeUtils?: readonly TLAnyShapeUtilConstructor[]
migrations?: readonly MigrationSequence[]
bindingUtils?: readonly TLAnyBindingUtilConstructor[]
}
| { schema?: StoreSchema<TLRecord, TLStoreProps> }
)
@ -41,9 +38,12 @@ export function createTLStore({
rest.schema
: // we need a schema
createTLSchema({
shapes: currentPageShapesToShapeMap(
shapes: utilsToMap(
checkShapesAndAddCore('shapeUtils' in rest && rest.shapeUtils ? rest.shapeUtils : [])
),
bindings: utilsToMap(
checkBindings('bindingUtils' in rest && rest.bindingUtils ? rest.bindingUtils : [])
),
migrations: 'migrations' in rest ? rest.migrations : [],
})
@ -57,9 +57,9 @@ export function createTLStore({
})
}
function currentPageShapesToShapeMap(shapeUtils: TLShapeUtilConstructor<TLUnknownShape>[]) {
function utilsToMap<T extends SchemaPropsInfo & { type: string }>(utils: T[]) {
return Object.fromEntries(
shapeUtils.map((s): [string, SchemaShapeInfo] => [
utils.map((s): [string, SchemaPropsInfo] => [
s.type,
{
props: s.props,