Tracks, items and assets in the Editor Starter
The state of the Editor Starter contains different data types:
- Assets: Assets refer to media files, such as images, videos, audio, GIFs and captions.
- Items: Items are the data type that is represented in the timeline and rendered in the canvas.
- Tracks: A track can contain multiple items. Tracks are stacked above each other, with the track showing at the top rendering the items in the front.
The relationship between these entities is as following:
- An item may refer to up to one asset.
- Multiple items may refer the same asset.
- A track may contain multiple items (different types are allowed).
- An item can only belong to one track.
- Items in a track may not overlap.
Items
The type of an item is defined by the union EditorStarterItem.
By default, there are the following items:
To add a new item type, copy the logic of one of the items, change it, and add it to the EditorStarterItem union.
A lot of errors should appear when you run the typechecker in your console: npx tsc -w
These errors are intentional and are supposed to guide you towards where in the code you need to add implementations for certain things in order to support the new item type.
Assets
The different asset types are defined by the union EditorStarterAsset.
By default, there are the following items:
To add a new item type, copy the logic of one of the items, change it, and add it to the EditorStarterAsset union.
Some errors should appear when you run the type checker in your console: npx tsc -w
Resolve these errors to complete the implementation of your new asset type.
Inspectors
Each item type has an "Inspector" component which is a React component which can be mounted in the right sidebar.
The inspector may also show information about the asset that is associated with the item.
If no item is selected, a special inspector for the global settings is shown.
See the source code for the <Inspector /> component.