2023-04-25 11:01:25 +00:00
|
|
|
// Important! don't move this tlschema re-export to lib/index.ts, doing so causes esbuild to produce
|
|
|
|
// incorrect output. https://github.com/evanw/esbuild/issues/1737
|
|
|
|
|
2023-06-04 10:38:53 +00:00
|
|
|
// eslint-disable-next-line local/no-export-star
|
|
|
|
export * from '@tldraw/indices'
|
2023-04-25 11:01:25 +00:00
|
|
|
// eslint-disable-next-line local/no-export-star
|
|
|
|
export * from '@tldraw/tlschema'
|
|
|
|
export { getHashForString } from '@tldraw/utils'
|
|
|
|
export {
|
|
|
|
ErrorScreen,
|
|
|
|
LoadingScreen,
|
|
|
|
TldrawEditor,
|
|
|
|
type TldrawEditorProps,
|
|
|
|
} from './lib/TldrawEditor'
|
2023-05-05 13:10:36 +00:00
|
|
|
export {
|
|
|
|
defaultEditorAssetUrls,
|
|
|
|
setDefaultEditorAssetUrls,
|
2023-06-04 10:38:53 +00:00
|
|
|
type TLEditorAssetUrls,
|
2023-05-05 13:10:36 +00:00
|
|
|
} from './lib/assetUrls'
|
2023-04-25 11:01:25 +00:00
|
|
|
export { Canvas } from './lib/components/Canvas'
|
|
|
|
export { DefaultErrorFallback } from './lib/components/DefaultErrorFallback'
|
|
|
|
export {
|
|
|
|
ErrorBoundary,
|
|
|
|
OptionalErrorBoundary,
|
2023-06-04 10:38:53 +00:00
|
|
|
type TLErrorBoundaryProps,
|
2023-04-25 11:01:25 +00:00
|
|
|
} from './lib/components/ErrorBoundary'
|
|
|
|
export { HTMLContainer, type HTMLContainerProps } from './lib/components/HTMLContainer'
|
|
|
|
export { SVGContainer, type SVGContainerProps } from './lib/components/SVGContainer'
|
Independent instance state persistence (#1493)
This PR
- Removes UserDocumentRecordType
- moving isSnapMode to user preferences
- moving isGridMode and isPenMode to InstanceRecordType
- deleting the other properties which are no longer needed.
- Creates a separate pipeline for persisting instance state.
Previously the instance state records were stored alongside the document
state records, and in order to load the state for a particular instance
(in our case, a particular tab) you needed to pass the 'instanceId'
prop. This prop ended up totally pervading the public API and people ran
into all kinds of issues with it, e.g. using the same instance id in
multiple editor instances.
There was also an issue whereby it was hard for us to clean up old
instance state so the idb table ended up bloating over time.
This PR makes it so that rather than passing an instanceId, you load the
instance state yourself while creating the store. It provides tools to
make that easy.
- Undoes the assumption that we might have more than one instance's
state in the store.
- Like `document`, `instance` now has a singleton id
`instance:instance`.
- Page state ids and camera ids are no longer random, but rather derive
from the page they belong to. This is like having a foreign primary key
in SQL databases. It's something i'd love to support fully as part of
the RecordType/Store api.
Tests to do
- [x] Test Migrations
- [x] Test Store.listen filtering
- [x] Make type sets in Store public and readonly
- [x] Test RecordType.createId
- [x] Test Instance state snapshot loading/exporting
- [x] Manual test File I/O
- [x] Manual test Vscode extension with multiple tabs
- [x] Audit usages of store.query
- [x] Audit usages of changed types: InstanceRecordType, 'instance',
InstancePageStateRecordType, 'instance_page_state', 'user_document',
'camera', CameraRecordType, InstancePresenceRecordType,
'instance_presence'
- [x] Test user preferences
- [x] Manual test isSnapMode and isGridMode and isPenMode
- [ ] Test indexedDb functions
- [x] Add instanceId stuff back
### Change Type
- [x] `major` — Breaking Change
### Test Plan
1. Add a step-by-step description of how to test your PR here.
2.
- [ ] Unit Tests
- [ ] Webdriver tests
### Release Notes
- Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
|
|
|
export {
|
|
|
|
TAB_ID,
|
|
|
|
createSessionStateSnapshotSignal,
|
|
|
|
extractSessionStateFromLegacySnapshot,
|
|
|
|
loadSessionStateSnapshotIntoStore,
|
|
|
|
type TLSessionStateSnapshot,
|
|
|
|
} from './lib/config/TLSessionStateSnapshot'
|
2023-04-25 11:01:25 +00:00
|
|
|
export {
|
[refactor] User-facing APIs (#1478)
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
2023-06-01 15:47:34 +00:00
|
|
|
USER_COLORS,
|
|
|
|
getUserPreferences,
|
|
|
|
setUserPreferences,
|
|
|
|
type TLUserPreferences,
|
|
|
|
} from './lib/config/TLUserPreferences'
|
2023-06-09 12:15:06 +00:00
|
|
|
export {
|
|
|
|
createTLStore,
|
|
|
|
type TLStoreEventInfo,
|
|
|
|
type TLStoreOptions,
|
|
|
|
} from './lib/config/createTLStore'
|
2023-06-12 14:04:14 +00:00
|
|
|
export { coreShapes, defaultShapes } from './lib/config/defaultShapes'
|
[refactor] User-facing APIs (#1478)
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
2023-06-01 15:47:34 +00:00
|
|
|
export { defaultTools } from './lib/config/defaultTools'
|
2023-06-12 14:04:14 +00:00
|
|
|
export { defineShape, type TLShapeInfo } from './lib/config/defineShape'
|
2023-04-25 11:01:25 +00:00
|
|
|
export {
|
|
|
|
ANIMATION_MEDIUM_MS,
|
|
|
|
ANIMATION_SHORT_MS,
|
|
|
|
ARROW_LABEL_FONT_SIZES,
|
|
|
|
BOUND_ARROW_OFFSET,
|
|
|
|
DEFAULT_ANIMATION_OPTIONS,
|
|
|
|
DEFAULT_BOOKMARK_HEIGHT,
|
|
|
|
DEFAULT_BOOKMARK_WIDTH,
|
|
|
|
DOUBLE_CLICK_DURATION,
|
|
|
|
DRAG_DISTANCE,
|
|
|
|
FONT_ALIGNMENT,
|
|
|
|
FONT_FAMILIES,
|
|
|
|
FONT_SIZES,
|
|
|
|
GRID_INCREMENT,
|
|
|
|
GRID_STEPS,
|
|
|
|
HAND_TOOL_FRICTION,
|
|
|
|
HASH_PATERN_ZOOM_NAMES,
|
|
|
|
ICON_SIZES,
|
|
|
|
LABEL_FONT_SIZES,
|
|
|
|
MAJOR_NUDGE_FACTOR,
|
|
|
|
MAX_ASSET_HEIGHT,
|
|
|
|
MAX_ASSET_WIDTH,
|
|
|
|
MAX_PAGES,
|
|
|
|
MAX_SHAPES_PER_PAGE,
|
|
|
|
MAX_ZOOM,
|
|
|
|
MINOR_NUDGE_FACTOR,
|
|
|
|
MIN_ARROW_LENGTH,
|
|
|
|
MIN_ZOOM,
|
|
|
|
MULTI_CLICK_DURATION,
|
|
|
|
REMOVE_SYMBOL,
|
|
|
|
RICH_TYPES,
|
|
|
|
ROTATING_SHADOWS,
|
|
|
|
STYLES,
|
|
|
|
SVG_PADDING,
|
|
|
|
TEXT_PROPS,
|
|
|
|
WAY_TOO_BIG_ARROW_BEND_FACTOR,
|
|
|
|
ZOOMS,
|
|
|
|
} from './lib/constants'
|
2023-06-06 16:01:54 +00:00
|
|
|
export { Editor, type TLAnimationOptions, type TLEditorOptions } from './lib/editor/Editor'
|
`ExternalContentManager` for handling external content (files, images, etc) (#1550)
This PR improves the editor's APIs around creating assets and files.
This allows end user developers to replace behavior that might occur,
for example, when pasting images or dragging files onto the canvas.
Here, we:
- remove `onCreateAssetFromFile` prop
- remove `onCreateBookmarkFromUrl` prop
- introduce `onEditorReady` prop
- introduce `onEditorWillDispose` prop
- introduce `ExternalContentManager`
The `ExternalContentManager` (ECM) is used in circumstances where we're
turning external content (text, images, urls, etc) into assets or
shapes. It is designed to allow certain methods to be overwritten by
other developers as a kind of weakly supported hack.
For example, when a user drags an image onto the canvas, the event
handler passes a `TLExternalContent` object to the editor's
`putExternalContent` method. This method runs the ECM's handler for this
content type. That handler may in turn run other methods, such as
`createAssetFromFile` or `createShapesForAssets`, which will lead to the
image being created on the canvas.
If a developer wanted to change the way that assets are created from
files, then they could overwrite that method at runtime.
```ts
const handleEditorReady = (editor: Editor) => {
editor.externalContentManager.createAssetFromFile = myHandler
}
function Example() {
return <Tldraw onEditorReady={handleEditorReady}/>
}
```
If you wanted to go even deeper, you could override the editor's
`putExternalContent` method.
```ts
const handleEditorReady = (editor: Editor) => {
const handleExternalContent = (info: TLExternalContent): Promise<void> => {
if (info.type === 'files') {
// do something here
} else {
// do the normal thing
editor.externalContentManager.handleContent(info)
}
}
```
### Change Type
- [x] `major`
### Test Plan
1. Drag images, urls, etc. onto the canvas
2. Use copy and paste for single and multiple files
3. Use bookmark / embed shapes and convert between eachother
### Release Notes
- [editor] add `ExternalContentManager` for plopping content onto the
canvas
- [editor] remove `onCreateAssetFromFile` prop
- [editor] remove `onCreateBookmarkFromUrl` prop
- [editor] introduce `onEditorReady` prop
- [editor] introduce `onEditorWillDispose` prop
- [editor] introduce `ExternalContentManager`
2023-06-08 14:53:11 +00:00
|
|
|
export {
|
|
|
|
ExternalContentManager as PlopManager,
|
|
|
|
type TLExternalContent,
|
|
|
|
} from './lib/editor/managers/ExternalContentManager'
|
2023-06-06 16:01:54 +00:00
|
|
|
export { ArrowShapeUtil } from './lib/editor/shapeutils/ArrowShapeUtil/ArrowShapeUtil'
|
|
|
|
export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapeutils/BaseBoxShapeUtil'
|
|
|
|
export { BookmarkShapeUtil } from './lib/editor/shapeutils/BookmarkShapeUtil/BookmarkShapeUtil'
|
|
|
|
export { DrawShapeUtil } from './lib/editor/shapeutils/DrawShapeUtil/DrawShapeUtil'
|
|
|
|
export { EmbedShapeUtil } from './lib/editor/shapeutils/EmbedShapeUtil/EmbedShapeUtil'
|
|
|
|
export { FrameShapeUtil } from './lib/editor/shapeutils/FrameShapeUtil/FrameShapeUtil'
|
|
|
|
export { GeoShapeUtil } from './lib/editor/shapeutils/GeoShapeUtil/GeoShapeUtil'
|
|
|
|
export { GroupShapeUtil } from './lib/editor/shapeutils/GroupShapeUtil/GroupShapeUtil'
|
|
|
|
export { HighlightShapeUtil } from './lib/editor/shapeutils/HighlightShapeUtil/HighlightShapeUtil'
|
|
|
|
export { ImageShapeUtil } from './lib/editor/shapeutils/ImageShapeUtil/ImageShapeUtil'
|
|
|
|
export {
|
|
|
|
LineShapeUtil,
|
|
|
|
getSplineForLineShape,
|
|
|
|
} from './lib/editor/shapeutils/LineShapeUtil/LineShapeUtil'
|
|
|
|
export { NoteShapeUtil } from './lib/editor/shapeutils/NoteShapeUtil/NoteShapeUtil'
|
|
|
|
export {
|
|
|
|
ShapeUtil,
|
|
|
|
type TLOnBeforeCreateHandler,
|
|
|
|
type TLOnBeforeUpdateHandler,
|
|
|
|
type TLOnBindingChangeHandler,
|
|
|
|
type TLOnChildrenChangeHandler,
|
|
|
|
type TLOnClickHandler,
|
|
|
|
type TLOnDoubleClickHandleHandler,
|
|
|
|
type TLOnDoubleClickHandler,
|
|
|
|
type TLOnDragHandler,
|
|
|
|
type TLOnEditEndHandler,
|
|
|
|
type TLOnHandleChangeHandler,
|
|
|
|
type TLOnResizeEndHandler,
|
|
|
|
type TLOnResizeHandler,
|
|
|
|
type TLOnResizeStartHandler,
|
|
|
|
type TLOnRotateEndHandler,
|
|
|
|
type TLOnRotateHandler,
|
|
|
|
type TLOnRotateStartHandler,
|
|
|
|
type TLOnTranslateEndHandler,
|
|
|
|
type TLOnTranslateHandler,
|
|
|
|
type TLOnTranslateStartHandler,
|
|
|
|
type TLResizeInfo,
|
|
|
|
type TLResizeMode,
|
|
|
|
type TLShapeUtilConstructor,
|
|
|
|
type TLShapeUtilFlag,
|
|
|
|
} from './lib/editor/shapeutils/ShapeUtil'
|
|
|
|
export { INDENT, TextShapeUtil } from './lib/editor/shapeutils/TextShapeUtil/TextShapeUtil'
|
|
|
|
export { VideoShapeUtil } from './lib/editor/shapeutils/VideoShapeUtil/VideoShapeUtil'
|
|
|
|
export { BaseBoxShapeTool } from './lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool'
|
|
|
|
export { StateNode, type TLStateNodeConstructor } from './lib/editor/tools/StateNode'
|
|
|
|
export { type TLContent } from './lib/editor/types/clipboard-types'
|
|
|
|
export { type TLEventMap, type TLEventMapHandler } from './lib/editor/types/emit-types'
|
|
|
|
export {
|
|
|
|
EVENT_NAME_MAP,
|
|
|
|
type TLBaseEventInfo,
|
|
|
|
type TLCLickEventName,
|
|
|
|
type TLCancelEvent,
|
|
|
|
type TLCancelEventInfo,
|
|
|
|
type TLClickEvent,
|
|
|
|
type TLClickEventInfo,
|
|
|
|
type TLCompleteEvent,
|
|
|
|
type TLCompleteEventInfo,
|
|
|
|
type TLEnterEventHandler,
|
|
|
|
type TLEventHandlers,
|
|
|
|
type TLEventInfo,
|
|
|
|
type TLEventName,
|
|
|
|
type TLExitEventHandler,
|
|
|
|
type TLInterruptEvent,
|
|
|
|
type TLInterruptEventInfo,
|
|
|
|
type TLKeyboardEvent,
|
|
|
|
type TLKeyboardEventInfo,
|
|
|
|
type TLKeyboardEventName,
|
|
|
|
type TLPinchEvent,
|
|
|
|
type TLPinchEventInfo,
|
|
|
|
type TLPinchEventName,
|
|
|
|
type TLPointerEvent,
|
|
|
|
type TLPointerEventInfo,
|
|
|
|
type TLPointerEventName,
|
|
|
|
type TLPointerEventTarget,
|
|
|
|
type TLTickEvent,
|
|
|
|
type TLWheelEvent,
|
|
|
|
type TLWheelEventInfo,
|
|
|
|
type UiEvent,
|
|
|
|
type UiEventType,
|
|
|
|
} from './lib/editor/types/event-types'
|
|
|
|
export {
|
|
|
|
type TLCommand,
|
|
|
|
type TLCommandHandler,
|
|
|
|
type TLHistoryEntry,
|
|
|
|
type TLHistoryMark,
|
|
|
|
} from './lib/editor/types/history-types'
|
|
|
|
export { type RequiredKeys } from './lib/editor/types/misc-types'
|
|
|
|
export { type TLResizeHandle, type TLSelectionHandle } from './lib/editor/types/selection-types'
|
2023-04-25 11:01:25 +00:00
|
|
|
export { normalizeWheel } from './lib/hooks/shared'
|
|
|
|
export { useContainer } from './lib/hooks/useContainer'
|
2023-06-02 15:21:45 +00:00
|
|
|
export { useEditor } from './lib/hooks/useEditor'
|
2023-04-25 11:01:25 +00:00
|
|
|
export type { TLEditorComponents } from './lib/hooks/useEditorComponents'
|
[refactor] User-facing APIs (#1478)
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
2023-06-01 15:47:34 +00:00
|
|
|
export { useLocalStore } from './lib/hooks/useLocalStore'
|
2023-05-03 13:48:46 +00:00
|
|
|
export { usePeerIds } from './lib/hooks/usePeerIds'
|
|
|
|
export { usePresence } from './lib/hooks/usePresence'
|
2023-04-25 11:01:25 +00:00
|
|
|
export { useQuickReactor } from './lib/hooks/useQuickReactor'
|
|
|
|
export { useReactor } from './lib/hooks/useReactor'
|
[refactor] User-facing APIs (#1478)
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
2023-06-01 15:47:34 +00:00
|
|
|
export { useTLStore } from './lib/hooks/useTLStore'
|
2023-04-25 11:01:25 +00:00
|
|
|
export { WeakMapCache } from './lib/utils/WeakMapCache'
|
|
|
|
export {
|
|
|
|
ACCEPTED_ASSET_TYPE,
|
|
|
|
ACCEPTED_IMG_TYPE,
|
|
|
|
ACCEPTED_VID_TYPE,
|
|
|
|
containBoxSize,
|
|
|
|
dataUrlToFile,
|
|
|
|
getFileMetaData,
|
|
|
|
getImageSizeFromSrc,
|
|
|
|
getMediaAssetFromFile,
|
|
|
|
getResizedImageDataUrl,
|
|
|
|
getValidHttpURLList,
|
|
|
|
getVideoSizeFromSrc,
|
|
|
|
isImage,
|
|
|
|
isSvgText,
|
|
|
|
isValidHttpURL,
|
|
|
|
} from './lib/utils/assets'
|
|
|
|
export {
|
|
|
|
checkFlag,
|
|
|
|
fileToBase64,
|
|
|
|
getIncrementedName,
|
|
|
|
isSerializable,
|
|
|
|
snapToGrid,
|
|
|
|
uniqueId,
|
|
|
|
} from './lib/utils/data'
|
Feature flags rework (#1474)
This diff tweaks our `debugFlags` framework to support setting different
default value for different environments, makes it easier to define
feature flags, and makes feature flags show up in the debug menu by
default. With this change, feature flags will default to being enabled
in dev and preview environments, but disabled in production.
Specify a feature flag like this:
```ts
const featureFlags = {
myCoolNewFeature: createFeatureFlag('myCoolNewFeature')
}
```
optionally, pass a second value to control its defaults:
```ts
const featureFlags = {
featureEnabledInProduction: createFeatureFlag('someFeature', { all: true }),
customEnabled: createFeatureFlag('otherFeature', {development: true, staging: false, production: false}),
}
```
In code, the value can be read using `featureFlags.myFeature.value`.
Remember to wrap reading it in a reactive context!
### Change Type
- [x] `patch` — Bug Fix
### Test Plan
-
### Release Notes
[internal only change]
2023-05-30 13:06:15 +00:00
|
|
|
export { debugFlags, featureFlags, type DebugFlag } from './lib/utils/debug-flags'
|
2023-04-25 11:01:25 +00:00
|
|
|
export {
|
|
|
|
loopToHtmlElement,
|
|
|
|
preventDefault,
|
|
|
|
releasePointerCapture,
|
|
|
|
rotateBoxShadow,
|
|
|
|
setPointerCapture,
|
|
|
|
truncateStringWithEllipsis,
|
|
|
|
usePrefersReducedMotion,
|
|
|
|
} from './lib/utils/dom'
|
|
|
|
export {
|
|
|
|
getEmbedInfo,
|
|
|
|
getEmbedInfoUnsafely,
|
|
|
|
matchEmbedUrl,
|
|
|
|
matchUrl,
|
2023-06-04 10:38:53 +00:00
|
|
|
type TLEmbedResult,
|
2023-04-25 11:01:25 +00:00
|
|
|
} from './lib/utils/embeds'
|
|
|
|
export {
|
|
|
|
downloadDataURLAsFile,
|
|
|
|
getSvgAsDataUrl,
|
|
|
|
getSvgAsDataUrlSync,
|
|
|
|
getSvgAsImage,
|
|
|
|
getSvgAsString,
|
|
|
|
getTextBoundingBox,
|
|
|
|
isGeoShape,
|
|
|
|
isNoteShape,
|
|
|
|
type TLCopyType,
|
|
|
|
type TLExportType,
|
|
|
|
} from './lib/utils/export'
|
2023-06-02 15:21:45 +00:00
|
|
|
export { hardResetEditor } from './lib/utils/hard-reset'
|
2023-04-25 11:01:25 +00:00
|
|
|
export { isAnimated, isGIF } from './lib/utils/is-gif-animated'
|
|
|
|
export { setPropsForNextShape } from './lib/utils/props-for-next-shape'
|
|
|
|
export { refreshPage } from './lib/utils/refresh-page'
|
|
|
|
export { runtime, setRuntimeOverrides } from './lib/utils/runtime'
|
|
|
|
export {
|
|
|
|
blobAsString,
|
|
|
|
correctSpacesToNbsp,
|
|
|
|
dataTransferItemAsString,
|
|
|
|
defaultEmptyAs,
|
|
|
|
} from './lib/utils/string'
|
|
|
|
export { getPointerInfo, getSvgPathFromStroke, getSvgPathFromStrokePoints } from './lib/utils/svg'
|
2023-06-04 10:38:53 +00:00
|
|
|
export { type TLStoreWithStatus } from './lib/utils/sync/StoreWithStatus'
|
[refactor] User-facing APIs (#1478)
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
2023-06-01 15:47:34 +00:00
|
|
|
export { hardReset } from './lib/utils/sync/hardReset'
|
2023-04-25 11:01:25 +00:00
|
|
|
export { openWindow } from './lib/utils/window-open'
|