0c4174c0b8
This PR updates our user-facing APIs for the Tldraw and TldrawEditor components, as well as the Editor (App). It mainly incorporates surface changes from #1450 without any changes to validators or migrators, incorporating feedback / discussion with @SomeHats and @ds300. Here we: - remove the TldrawEditorConfig - bring back a loose version of shape definitions - make a separation between "core" shapes and "default" shapes - do not allow custom shapes, migrators or validators to overwrite core shapes - but _do_ allow new shapes ## `<Tldraw>` component In this PR, the `Tldraw` component wraps both the `TldrawEditor` component and our `TldrawUi` component. It accepts a union of props for both components. Previously, this component also added local syncing via a `useLocalSyncClient` hook call, however that has been pushed down to the `TldrawEditor` component. ## `<TldrawEditor>` component The `TldrawEditor` component now more neatly wraps up the different ways that the editor can be configured. ## The store prop (`TldrawEditorProps.store`) There are three main ways for the `TldrawEditor` component to be run: 1. with an externally defined store 2. with an externally defined syncing store (local or remote) 3. with an internally defined store 4. with an internally defined locally syncing store The `store` prop allows for these configurations. If the `store` prop is defined, it may be defined either as a `TLStore` or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will assume that the store is ready to go; if it is defined as a SyncedStore, then the component will display the loading / error screens as needed, or the final editor once the store's status is "synced". When the store is left undefined, then the `TldrawEditor` will create its own internal store using the optional `instanceId`, `initialData`, or `shapes` props to define the store / store schema. If the `persistenceKey` prop is left undefined, then the store will not be synced. If the `persistenceKey` is defined, then the store will be synced locally. In the future, we may also here accept the API key / roomId / etc for creating a remotely synced store. The `SyncedStore` type has been expanded to also include types used for remote syncing, e.g. with `ConnectionStatus`. ## Tools By default, the App has two "baked-in" tools: the select tool and the zoom tool. These cannot (for now) be replaced or removed. The default tools are used by default, but may be replaced by other tools if provided. ## Shapes By default, the App has a set of "core" shapes: - group - embed - bookmark - image - video - text That cannot by overwritten because they're created by the app at different moments, such as when double clicking on the canvas or via a copy and paste event. In follow up PRs, we'll split these out so that users can replace parts of the code where these shapes are created. ### Change Type - [x] `major` — Breaking Change ### Test Plan - [x] Unit Tests |
||
---|---|---|
.. | ||
src | ||
api-extractor.json | ||
api-report.md | ||
CHANGELOG.md | ||
LICENSE | ||
package.json | ||
README.md | ||
tsconfig.json |
@tldraw/tlschema
This package houses type definitions, schema migrations, and other type metadata for any persisted data in tldraw.
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.
Creating a new record type
To create a new record type called, e.g. TLBanana
, run
# Create the new file in ./records/TLBanana.ts
yarn new-record TLBanana
# Rebuild the index files to make sure it is exported
yarn index
You may then customize your new blank TLBanana
type!
Creating a new shape type
To create a new shape type called, e.g. TLMapboxShape
, run
# Create the new file in ./shapes/TLMapboxShape.ts
yarn new-shape TLMapboxShape
# Rebuild the index files to make sure it is exported
yarn index
You may then customize your new blank TLMapboxShape
type!
Creating a new asset type
To create a new shape type called, e.g. TLZipFileAsset
, run
# Create the new file in ./assets/TLZipFileAsset.ts
yarn new-asset TLZipFileAsset
# Rebuild the index files to make sure it is exported
yarn index
You may then customize your new blank TLZipFileAsset
type!
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 = {
Initial: 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({
// STEP 2: Update the current version to point to your latest version
currentVersion: Versions.Initial,
firstVersion: Versions.Initial,
migrators: {
// STEP 3: Add an up+down migration for the new version here
+ [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!
License
The source code in this repository (as well as our 2.0+ distributions and releases) are currently licensed under Apache-2.0. These licenses are subject to change in our upcoming 2.0 release. If you are planning to use tldraw in a commercial product, please reach out at hello@tldraw.com.