tldraw/packages/tlschema
alex 87e3d60c90
rework canBind callback (#3797)
This PR reworks the `canBind` callback to work with customizable
bindings. It now accepts an object with a the shape, the other shape
(optional - it may not exist yet), the direction, and the type of the
binding. Devs can use this to create shapes that only participate in
certain binding types, can have bindings from but not to them, etc.

If you're implementing a binding, you can see if binding two shapes is
allowed using `editor.canBindShapes(fromShape, toShape, 'my binding
type')`

### Change Type

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

### Release Notes

#### Breaking changes
The `canBind` flag now accepts an options object instead of just the
shape in question. If you're relying on its arguments, you need to
change from `canBind(shape) {}` to `canBind({shape}) {}`.
2024-05-23 13:32:02 +00:00
..
src rework canBind callback (#3797) 2024-05-23 13:32:02 +00:00
api-extractor.json transfer-out: transfer out 2023-04-25 12:01:25 +01:00
api-report.md rework canBind callback (#3797) 2024-05-23 13:32:02 +00:00
CHANGELOG.md Update CHANGELOG.md [skip ci] 2024-04-23 11:47:53 +00:00
LICENSE.md Change licenses to tldraw (#2167) 2023-12-19 10:41:01 +00:00
package.json Update CHANGELOG.md [skip ci] 2024-04-23 11:47:53 +00:00
README.md Update READMEs, add form link (#3741) 2024-05-12 20:48:07 +00:00
tsconfig.json Check tsconfig "references" arrays (#2891) 2024-02-21 13:07:53 +00:00

@tldraw/tlschema

This package houses type definitions, schema migrations, and other type metadata for the tldraw editor's default persisted data.

There are three main kinds of types:

  • Record types

    These are root record types added to the Store class. They are defined in the ./src/records directory.

  • Shape types

    These are subtypes of the root TLShape record type. They allow specifying a unique name and custom props for a particular kind of shape.

  • Asset types

    These are subtypes of the root TLAsset record type. They allow specifying a unique name and custom props for a particular kind of asset.

Adding migrations

If you make any kind of change to any persisted data shape in this package, you must add migrations that are able to convert old versions to new versions, and vice-versa.

If you are making a change that affects the structure of a record, shape, or asset, update the migrations in the same file as the record, shape, or asset is defined.

If you are making a change that affects the structure of the store (e.g. renaming or deleting a type, consolidating two shape types into one, etc), add your changes in the migrations in schema.ts.

After making your changes, add a new version number, using a meaninful name. For example, if you add a new property to the TLShape type called ownerId that points to a user, you might do this:

In TLShape.ts

 const Versions = {
   RemoveSomeProp: 1,
+  AddOwnerId: 2,
 } as const

and then in the TLShape type

   x: number
   y: number
+  ownerId: ID<TLUser> | null
   props: Props
   parentId: ID<TLShape> | ID<TLPage>

and then adding a migration:

 export const shapeTypeMigrations = defineMigrations({
   currentVersion: Versions.Initial,
   firstVersion: Versions.Initial,
   migrators: {
+    [Versions.AddOwnerId]: {
+      // add ownerId property
+      up: (shape) => ({...shape, ownerId: null}),
+      // remove ownerId property
+      down: ({ownerId, ...shape}) => shape,
+    }
   },

After you've added your migration, make sure to add a test for it in src/migrations.test.ts. It will complain if you do not!

Distributions

You can find tldraw on npm here.

Contribution

Please see our contributing guide. Found a bug? Please submit an issue.

License

The tldraw source code and its distributions are provided under the tldraw license. This license does not permit commercial use. To purchase a commercial license or learn more, please fill out this form.

Trademarks

Copyright (c) 2023-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our trademark guidelines for info on acceptable usage.

Contact

Find us on Twitter/X at @tldraw.

Community

Have questions, comments or feedback? Join our discord or start a discussion. For the latest news and release notes, check out our Substack.