PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Explicitly type shape props and defaults (#4191)

Browse source 
We rely on type inference for our `defaultX` types, as well as for our
shape prop types. This works well and means we only have to list shape
props once, but has some drawbacks:
- It's unstable, which sometimes produces unintended api-report.md diffs
that need to be worked around
- It's not good for docs

This diff makes those declared explicitly

### Change type

- [x] `api`

### Release notes

- Explicitly declare type types of default shapes etc. and shape props
for better documentation
This commit is contained in:
alex 2024-07-16 14:16:39 +01:00 committed by GitHub
parent 62fe6561c7
commit d85aac58b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 613 additions and 443 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/editor/api-report.md
View file

@ -2676,7 +2676,7 @@ export interface TLEditorComponents {
// @public (undocumented) // @public (undocumented)
export interface TLEditorOptions { export interface TLEditorOptions {
autoFocus?: boolean; autoFocus?: boolean;
bindingUtils: readonly TLBindingUtilConstructor<TLUnknownBinding>[]; bindingUtils: readonly TLAnyBindingUtilConstructor[];
cameraOptions?: Partial<TLCameraOptions>; cameraOptions?: Partial<TLCameraOptions>;
getContainer: () => HTMLElement; getContainer: () => HTMLElement;
inferDarkMode?: boolean; inferDarkMode?: boolean;
@ -2685,7 +2685,7 @@ export interface TLEditorOptions {
licenseKey?: string; licenseKey?: string;
// (undocumented) // (undocumented)
options?: Partial<TldrawOptions>; options?: Partial<TldrawOptions>;
shapeUtils: readonly TLShapeUtilConstructor<TLUnknownShape>[]; shapeUtils: readonly TLAnyShapeUtilConstructor[];
store: TLStore; store: TLStore;
tools: readonly TLStateNodeConstructor[]; tools: readonly TLStateNodeConstructor[];
user?: TLUser; user?: TLUser;

16
packages/editor/src/lib/editor/Editor.ts
View file

@ -85,8 +85,8 @@ import { flushSync } from 'react-dom'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import { TLEditorSnapshot, getSnapshot, loadSnapshot } from '../config/TLEditorSnapshot' import { TLEditorSnapshot, getSnapshot, loadSnapshot } from '../config/TLEditorSnapshot'
import { TLUser, createTLUser } from '../config/createTLUser' import { TLUser, createTLUser } from '../config/createTLUser'
import { checkBindings } from '../config/defaultBindings' import { TLAnyBindingUtilConstructor, checkBindings } from '../config/defaultBindings'
import { checkShapesAndAddCore } from '../config/defaultShapes' import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from '../config/defaultShapes'
import { import {
DEFAULT_ANIMATION_OPTIONS, DEFAULT_ANIMATION_OPTIONS,
DEFAULT_CAMERA_OPTIONS, DEFAULT_CAMERA_OPTIONS,
@ -113,11 +113,7 @@ import { getIncrementedName } from '../utils/getIncrementedName'
import { getReorderingShapesChanges } from '../utils/reorderShapes' import { getReorderingShapesChanges } from '../utils/reorderShapes'
import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation' import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
import { uniqueId } from '../utils/uniqueId' import { uniqueId } from '../utils/uniqueId'
import { import { BindingOnDeleteOptions, BindingUtil } from './bindings/BindingUtil'
BindingOnDeleteOptions,
BindingUtil,
TLBindingUtilConstructor,
} from './bindings/BindingUtil'
import { bindingsIndex } from './derivations/bindingsIndex' import { bindingsIndex } from './derivations/bindingsIndex'
import { notVisibleShapes } from './derivations/notVisibleShapes' import { notVisibleShapes } from './derivations/notVisibleShapes'
import { parentsToChildren } from './derivations/parentsToChildren' import { parentsToChildren } from './derivations/parentsToChildren'
@ -135,7 +131,7 @@ import { TextManager } from './managers/TextManager'
import { TickManager } from './managers/TickManager' import { TickManager } from './managers/TickManager'
import { UserPreferencesManager } from './managers/UserPreferencesManager' import { UserPreferencesManager } from './managers/UserPreferencesManager'
import { WatermarkManager } from './managers/WatermarkManager' import { WatermarkManager } from './managers/WatermarkManager'
import { ShapeUtil, TLResizeMode, TLShapeUtilConstructor } from './shapes/ShapeUtil' import { ShapeUtil, TLResizeMode } from './shapes/ShapeUtil'
import { RootState } from './tools/RootState' import { RootState } from './tools/RootState'
import { StateNode, TLStateNodeConstructor } from './tools/StateNode' import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
import { TLContent } from './types/clipboard-types' import { TLContent } from './types/clipboard-types'
@ -180,11 +176,11 @@ export interface TLEditorOptions {
/** /**
* An array of shapes to use in the editor. These will be used to create and manage shapes in the editor. * An array of shapes to use in the editor. These will be used to create and manage shapes in the editor.
*/ */
shapeUtils: readonly TLShapeUtilConstructor<TLUnknownShape>[] shapeUtils: readonly TLAnyShapeUtilConstructor[]
/** /**
* An array of bindings to use in the editor. These will be used to create and manage bindings in the editor. * An array of bindings to use in the editor. These will be used to create and manage bindings in the editor.
*/ */
bindingUtils: readonly TLBindingUtilConstructor<TLUnknownBinding>[] bindingUtils: readonly TLAnyBindingUtilConstructor[]
/** /**
* An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor. * An array of tools to use in the editor. These will be used to handle events and manage user interactions in the editor.
*/ */

151
packages/tldraw/api-report.md
View file

@ -6,7 +6,6 @@
/// <reference types="react" /> /// <reference types="react" />
import { ArrayOfValidator } from '@tldraw/editor';
import { BaseBoxShapeTool } from '@tldraw/editor'; import { BaseBoxShapeTool } from '@tldraw/editor';
import { BaseBoxShapeUtil } from '@tldraw/editor'; import { BaseBoxShapeUtil } from '@tldraw/editor';
import { BindingOnChangeOptions } from '@tldraw/editor'; import { BindingOnChangeOptions } from '@tldraw/editor';
@ -18,11 +17,9 @@ import { Box } from '@tldraw/editor';
import { Circle2d } from '@tldraw/editor'; import { Circle2d } from '@tldraw/editor';
import { ComponentType } from 'react'; import { ComponentType } from 'react';
import { CubicSpline2d } from '@tldraw/editor'; import { CubicSpline2d } from '@tldraw/editor';
import { DictValidator } from '@tldraw/editor';
import { Editor } from '@tldraw/editor'; import { Editor } from '@tldraw/editor';
import { EMBED_DEFINITIONS } from '@tldraw/editor'; import { EMBED_DEFINITIONS } from '@tldraw/editor';
import { EmbedDefinition } from '@tldraw/editor'; import { EmbedDefinition } from '@tldraw/editor';
import { EnumStyleProp } from '@tldraw/editor';
import { Geometry2d } from '@tldraw/editor'; import { Geometry2d } from '@tldraw/editor';
import { Group2d } from '@tldraw/editor'; import { Group2d } from '@tldraw/editor';
import { HandleSnapGeometry } from '@tldraw/editor'; import { HandleSnapGeometry } from '@tldraw/editor';
@ -50,7 +47,6 @@ import { SharedStyle } from '@tldraw/editor';
import { StateNode } from '@tldraw/editor'; import { StateNode } from '@tldraw/editor';
import { StyleProp } from '@tldraw/editor'; import { StyleProp } from '@tldraw/editor';
import { SvgExportContext } from '@tldraw/editor'; import { SvgExportContext } from '@tldraw/editor';
import { T } from '@tldraw/editor';
import { TLAnyBindingUtilConstructor } from '@tldraw/editor'; import { TLAnyBindingUtilConstructor } from '@tldraw/editor';
import { TLAnyShapeUtilConstructor } from '@tldraw/editor'; import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
import { TLArrowBinding } from '@tldraw/editor'; import { TLArrowBinding } from '@tldraw/editor';
@ -71,7 +67,6 @@ import { TLDefaultVerticalAlignStyle } from '@tldraw/editor';
import { TldrawEditorBaseProps } from '@tldraw/editor'; import { TldrawEditorBaseProps } from '@tldraw/editor';
import { TldrawEditorStoreProps } from '@tldraw/editor'; import { TldrawEditorStoreProps } from '@tldraw/editor';
import { TLDrawShape } from '@tldraw/editor'; import { TLDrawShape } from '@tldraw/editor';
import { TLDrawShapeSegment } from '@tldraw/editor';
import { TLEditorComponents } from '@tldraw/editor'; import { TLEditorComponents } from '@tldraw/editor';
import { TLEditorSnapshot } from '@tldraw/editor'; import { TLEditorSnapshot } from '@tldraw/editor';
import { TLEmbedShape } from '@tldraw/editor'; import { TLEmbedShape } from '@tldraw/editor';
@ -113,10 +108,8 @@ import { TLSvgOptions } from '@tldraw/editor';
import { TLTextShape } from '@tldraw/editor'; import { TLTextShape } from '@tldraw/editor';
import { TLVideoShape } from '@tldraw/editor'; import { TLVideoShape } from '@tldraw/editor';
import { UnknownRecord } from '@tldraw/editor'; import { UnknownRecord } from '@tldraw/editor';
import { Validator } from '@tldraw/editor';
import { Vec } from '@tldraw/editor'; import { Vec } from '@tldraw/editor';
import { VecLike } from '@tldraw/editor'; import { VecLike } from '@tldraw/editor';
import { VecModel } from '@tldraw/editor';
// @public (undocumented) // @public (undocumented)
export interface ActionsProviderProps { export interface ActionsProviderProps {
@ -226,22 +219,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
// (undocumented) // (undocumented)
onTranslateStart: TLOnTranslateStartHandler<TLArrowShape>; onTranslateStart: TLOnTranslateStartHandler<TLArrowShape>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLArrowShape>;
arrowheadEnd: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
arrowheadStart: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
bend: Validator<number>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
end: Validator<VecModel>;
fill: EnumStyleProp<"fill" | "none" | "pattern" | "semi" | "solid">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
labelPosition: Validator<number>;
scale: Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
start: Validator<VecModel>;
text: Validator<string>;
};
// (undocumented) // (undocumented)
toSvg(shape: TLArrowShape, ctx: SvgExportContext): JSX_2.Element; toSvg(shape: TLArrowShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented) // (undocumented)
@ -300,12 +278,7 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
// (undocumented) // (undocumented)
onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape>; onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLBookmarkShape>;
assetId: T.Validator<null | TLAssetId>;
h: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
// (undocumented) // (undocumented)
static type: "bookmark"; static type: "bookmark";
} }
@ -397,7 +370,7 @@ export const DefaultActionsMenu: NamedExoticComponent<TLUiActionsMenuProps>;
export function DefaultActionsMenuContent(): JSX_2.Element; export function DefaultActionsMenuContent(): JSX_2.Element;
// @public (undocumented) // @public (undocumented)
export const defaultBindingUtils: TLAnyBindingUtilConstructor[]; export const defaultBindingUtils: readonly [typeof ArrowBindingUtil];
// @public (undocumented) // @public (undocumented)
const DefaultContextMenu: NamedExoticComponent<TLUiContextMenuProps>; const DefaultContextMenu: NamedExoticComponent<TLUiContextMenuProps>;
@ -456,10 +429,10 @@ export const DefaultQuickActions: NamedExoticComponent<TLUiQuickActionsProps>;
export function DefaultQuickActionsContent(): JSX_2.Element | undefined; export function DefaultQuickActionsContent(): JSX_2.Element | undefined;
// @public (undocumented) // @public (undocumented)
export const defaultShapeTools: (typeof ArrowShapeTool)[]; export const defaultShapeTools: readonly [typeof TextShapeTool, typeof DrawShapeTool, typeof GeoShapeTool, typeof NoteShapeTool, typeof LineShapeTool, typeof FrameShapeTool, typeof ArrowShapeTool, typeof HighlightShapeTool];
// @public (undocumented) // @public (undocumented)
export const defaultShapeUtils: TLAnyShapeUtilConstructor[]; export const defaultShapeUtils: readonly [typeof TextShapeUtil, typeof BookmarkShapeUtil, typeof DrawShapeUtil, typeof GeoShapeUtil, typeof NoteShapeUtil, typeof LineShapeUtil, typeof FrameShapeUtil, typeof ArrowShapeUtil, typeof HighlightShapeUtil, typeof EmbedShapeUtil, typeof ImageShapeUtil, typeof VideoShapeUtil];
// @public (undocumented) // @public (undocumented)
export function DefaultSharePanel(): JSX_2.Element; export function DefaultSharePanel(): JSX_2.Element;
@ -483,7 +456,7 @@ export interface DefaultToolbarProps {
} }
// @public (undocumented) // @public (undocumented)
export const defaultTools: (typeof EraserTool | typeof HandTool | typeof ZoomTool)[]; export const defaultTools: readonly [typeof EraserTool, typeof HandTool, typeof LaserTool, typeof ZoomTool, typeof SelectTool];
// @public (undocumented) // @public (undocumented)
export function DefaultTopPanel(): JSX_2.Element; export function DefaultTopPanel(): JSX_2.Element;
@ -548,17 +521,7 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
// (undocumented) // (undocumented)
onResize: TLOnResizeHandler<TLDrawShape>; onResize: TLOnResizeHandler<TLDrawShape>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLDrawShape>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
fill: EnumStyleProp<"fill" | "none" | "pattern" | "semi" | "solid">;
isClosed: Validator<boolean>;
isComplete: Validator<boolean>;
isPen: Validator<boolean>;
scale: Validator<number>;
segments: ArrayOfValidator<TLDrawShapeSegment>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
};
// (undocumented) // (undocumented)
toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX_2.Element; toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented) // (undocumented)
@ -603,11 +566,7 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
// (undocumented) // (undocumented)
onResize: TLOnResizeHandler<TLEmbedShape>; onResize: TLOnResizeHandler<TLEmbedShape>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLEmbedShape>;
h: Validator<number>;
url: Validator<string>;
w: Validator<number>;
};
// (undocumented) // (undocumented)
static type: "embed"; static type: "embed";
} }
@ -724,11 +683,7 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
// (undocumented) // (undocumented)
onResize: TLOnResizeHandler<any>; onResize: TLOnResizeHandler<any>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLFrameShape>;
h: Validator<number>;
name: Validator<string>;
w: Validator<number>;
};
// (undocumented) // (undocumented)
providesBackgroundForChildren(): boolean; providesBackgroundForChildren(): boolean;
// (undocumented) // (undocumented)
@ -869,23 +824,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
// (undocumented) // (undocumented)
onResize: TLOnResizeHandler<TLGeoShape>; onResize: TLOnResizeHandler<TLGeoShape>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLGeoShape>;
align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
fill: EnumStyleProp<"fill" | "none" | "pattern" | "semi" | "solid">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
geo: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
growY: Validator<number>;
h: Validator<number>;
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
scale: Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
text: Validator<string>;
url: Validator<string>;
verticalAlign: EnumStyleProp<"end" | "middle" | "start">;
w: Validator<number>;
};
// (undocumented) // (undocumented)
toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX_2.Element; toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented) // (undocumented)
@ -1000,14 +939,7 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
// (undocumented) // (undocumented)
onResize: TLOnResizeHandler<TLHighlightShape>; onResize: TLOnResizeHandler<TLHighlightShape>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLHighlightShape>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
isComplete: Validator<boolean>;
isPen: Validator<boolean>;
scale: Validator<number>;
segments: ArrayOfValidator<TLDrawShapeSegment>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
};
// (undocumented) // (undocumented)
toBackgroundSvg(shape: TLHighlightShape): JSX_2.Element; toBackgroundSvg(shape: TLHighlightShape): JSX_2.Element;
// (undocumented) // (undocumented)
@ -1042,19 +974,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
// (undocumented) // (undocumented)
onResize: TLOnResizeHandler<any>; onResize: TLOnResizeHandler<any>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLImageShape>;
assetId: Validator<TLAssetId | null>;
crop: Validator< {
bottomRight: VecModel;
topLeft: VecModel;
} | null>;
flipX: Validator<boolean>;
flipY: Validator<boolean>;
h: Validator<number>;
playing: Validator<boolean>;
url: Validator<string>;
w: Validator<number>;
};
// (undocumented) // (undocumented)
toSvg(shape: TLImageShape): Promise<JSX_2.Element | null>; toSvg(shape: TLImageShape): Promise<JSX_2.Element | null>;
// (undocumented) // (undocumented)
@ -1129,19 +1049,7 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
// (undocumented) // (undocumented)
onResize: TLOnResizeHandler<TLLineShape>; onResize: TLOnResizeHandler<TLLineShape>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLLineShape>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
points: DictValidator<string, {
id: string;
index: IndexKey;
x: number;
y: number;
}>;
scale: Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
spline: EnumStyleProp<"cubic" | "line">;
};
// (undocumented) // (undocumented)
toSvg(shape: TLLineShape): JSX_2.Element; toSvg(shape: TLLineShape): JSX_2.Element;
// (undocumented) // (undocumented)
@ -1244,18 +1152,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
// (undocumented) // (undocumented)
onEditEnd: TLOnEditEndHandler<TLNoteShape>; onEditEnd: TLOnEditEndHandler<TLNoteShape>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLNoteShape>;
align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
fontSizeAdjustment: Validator<number>;
growY: Validator<number>;
scale: Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
text: Validator<string>;
url: Validator<string>;
verticalAlign: EnumStyleProp<"end" | "middle" | "start">;
};
// (undocumented) // (undocumented)
toSvg(shape: TLNoteShape, ctx: SvgExportContext): JSX_2.Element; toSvg(shape: TLNoteShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented) // (undocumented)
@ -1552,16 +1449,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
// (undocumented) // (undocumented)
onResize: TLOnResizeHandler<TLTextShape>; onResize: TLOnResizeHandler<TLTextShape>;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLTextShape>;
autoSize: Validator<boolean>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
scale: Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
text: Validator<string>;
textAlign: EnumStyleProp<"end" | "middle" | "start">;
w: Validator<number>;
};
// (undocumented) // (undocumented)
toSvg(shape: TLTextShape, ctx: SvgExportContext): JSX_2.Element; toSvg(shape: TLTextShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented) // (undocumented)
@ -3383,14 +3271,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
// (undocumented) // (undocumented)
static migrations: TLPropsMigrations; static migrations: TLPropsMigrations;
// (undocumented) // (undocumented)
static props: { static props: RecordProps<TLVideoShape>;
assetId: Validator<TLAssetId | null>;
h: Validator<number>;
playing: Validator<boolean>;
time: Validator<number>;
url: Validator<string>;
w: Validator<number>;
};
// (undocumented) // (undocumented)
toSvg(shape: TLVideoShape): JSX_2.Element; toSvg(shape: TLVideoShape): JSX_2.Element;
// (undocumented) // (undocumented)

3
packages/tldraw/src/lib/defaultBindingUtils.ts
View file

@ -1,5 +1,4 @@
import { TLAnyBindingUtilConstructor } from '@tldraw/editor'
import { ArrowBindingUtil } from './bindings/arrow/ArrowBindingUtil' import { ArrowBindingUtil } from './bindings/arrow/ArrowBindingUtil'
/** @public */ /** @public */
export const defaultBindingUtils: TLAnyBindingUtilConstructor[] = [ArrowBindingUtil] export const defaultBindingUtils = [ArrowBindingUtil] as const

2
packages/tldraw/src/lib/defaultShapeTools.ts
View file

@ -17,4 +17,4 @@ export const defaultShapeTools = [
FrameShapeTool, FrameShapeTool,
ArrowShapeTool, ArrowShapeTool,
HighlightShapeTool, HighlightShapeTool,
] ] as const

5
packages/tldraw/src/lib/defaultShapeUtils.ts
View file

@ -1,4 +1,3 @@
import { TLAnyShapeUtilConstructor } from '@tldraw/editor'
import { ArrowShapeUtil } from './shapes/arrow/ArrowShapeUtil' import { ArrowShapeUtil } from './shapes/arrow/ArrowShapeUtil'
import { BookmarkShapeUtil } from './shapes/bookmark/BookmarkShapeUtil' import { BookmarkShapeUtil } from './shapes/bookmark/BookmarkShapeUtil'
import { DrawShapeUtil } from './shapes/draw/DrawShapeUtil' import { DrawShapeUtil } from './shapes/draw/DrawShapeUtil'
@ -13,7 +12,7 @@ import { TextShapeUtil } from './shapes/text/TextShapeUtil'
import { VideoShapeUtil } from './shapes/video/VideoShapeUtil' import { VideoShapeUtil } from './shapes/video/VideoShapeUtil'
/** @public */ /** @public */
export const defaultShapeUtils: TLAnyShapeUtilConstructor[] = [ export const defaultShapeUtils = [
TextShapeUtil, TextShapeUtil,
BookmarkShapeUtil, BookmarkShapeUtil,
DrawShapeUtil, DrawShapeUtil,
@ -26,4 +25,4 @@ export const defaultShapeUtils: TLAnyShapeUtilConstructor[] = [
EmbedShapeUtil, EmbedShapeUtil,
ImageShapeUtil, ImageShapeUtil,
VideoShapeUtil, VideoShapeUtil,
] ] as const

2
packages/tldraw/src/lib/defaultTools.ts
View file

@ -5,4 +5,4 @@ import { SelectTool } from './tools/SelectTool/SelectTool'
import { ZoomTool } from './tools/ZoomTool/ZoomTool' import { ZoomTool } from './tools/ZoomTool/ZoomTool'
/** @public */ /** @public */
export const defaultTools = [EraserTool, HandTool, LaserTool, ZoomTool, SelectTool] export const defaultTools = [EraserTool, HandTool, LaserTool, ZoomTool, SelectTool] as const

450
packages/tlschema/api-report.md
View file

@ -39,22 +39,7 @@ export const ArrowShapeArrowheadStartStyle: EnumStyleProp<"arrow" | "bar" | "dia
export const arrowShapeMigrations: MigrationSequence; export const arrowShapeMigrations: MigrationSequence;
// @public (undocumented) // @public (undocumented)
export const arrowShapeProps: { export const arrowShapeProps: RecordProps<TLArrowShape>;
arrowheadEnd: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
arrowheadStart: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">;
bend: T.Validator<number>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
end: T.Validator<VecModel>;
fill: EnumStyleProp<"fill" | "none" | "pattern" | "semi" | "solid">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
labelPosition: T.Validator<number>;
scale: T.Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
start: T.Validator<VecModel>;
text: T.Validator<string>;
};
// @public // @public
export const assetIdValidator: T.Validator<TLAssetId>; export const assetIdValidator: T.Validator<TLAssetId>;
@ -75,12 +60,7 @@ export const bindingIdValidator: T.Validator<TLBindingId>;
export const bookmarkShapeMigrations: TLPropsMigrations; export const bookmarkShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const bookmarkShapeProps: { export const bookmarkShapeProps: RecordProps<TLBookmarkShape>;
assetId: T.Validator<TLAssetId | null>;
h: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
// @public // @public
export interface BoxModel { export interface BoxModel {
@ -95,7 +75,7 @@ export interface BoxModel {
} }
// @public (undocumented) // @public (undocumented)
export const boxModelValidator: T.Validator<BoxModel>; export const boxModelValidator: T.ObjectValidator<BoxModel>;
// @public (undocumented) // @public (undocumented)
export const CameraRecordType: RecordType<TLCamera, never>; export const CameraRecordType: RecordType<TLCamera, never>;
@ -214,7 +194,58 @@ export const DefaultHorizontalAlignStyle: EnumStyleProp<"end-legacy" | "end" | "
// @public (undocumented) // @public (undocumented)
export const defaultShapeSchemas: { export const defaultShapeSchemas: {
[T in TLDefaultShape['type']]: SchemaPropsInfo; arrow: {
migrations: MigrationSequence;
props: RecordProps<TLArrowShape>;
};
bookmark: {
migrations: TLPropsMigrations;
props: RecordProps<TLBookmarkShape>;
};
draw: {
migrations: TLPropsMigrations;
props: RecordProps<TLDrawShape>;
};
embed: {
migrations: TLPropsMigrations;
props: RecordProps<TLEmbedShape>;
};
frame: {
migrations: TLPropsMigrations;
props: RecordProps<TLFrameShape>;
};
geo: {
migrations: TLPropsMigrations;
props: RecordProps<TLGeoShape>;
};
group: {
migrations: TLPropsMigrations;
props: RecordProps<TLGroupShape>;
};
highlight: {
migrations: TLPropsMigrations;
props: RecordProps<TLHighlightShape>;
};
image: {
migrations: TLPropsMigrations;
props: RecordProps<TLImageShape>;
};
line: {
migrations: TLPropsMigrations;
props: RecordProps<TLLineShape>;
};
note: {
migrations: TLPropsMigrations;
props: RecordProps<TLNoteShape>;
};
text: {
migrations: TLPropsMigrations;
props: RecordProps<TLTextShape>;
};
video: {
migrations: TLPropsMigrations;
props: RecordProps<TLVideoShape>;
};
}; };
// @public (undocumented) // @public (undocumented)
@ -233,17 +264,7 @@ export const DocumentRecordType: RecordType<TLDocument, never>;
export const drawShapeMigrations: TLPropsMigrations; export const drawShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const drawShapeProps: { export const drawShapeProps: RecordProps<TLDrawShape>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
fill: EnumStyleProp<"fill" | "none" | "pattern" | "semi" | "solid">;
isClosed: T.Validator<boolean>;
isComplete: T.Validator<boolean>;
isPen: T.Validator<boolean>;
scale: T.Validator<number>;
segments: T.ArrayOfValidator<TLDrawShapeSegment>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
};
// @public (undocumented) // @public (undocumented)
export const EMBED_DEFINITIONS: readonly [{ export const EMBED_DEFINITIONS: readonly [{
@ -502,11 +523,7 @@ export const embedShapePermissionDefaults: {
}; };
// @public (undocumented) // @public (undocumented)
export const embedShapeProps: { export const embedShapeProps: RecordProps<TLEmbedShape>;
h: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
// @public // @public
export class EnumStyleProp<T> extends StyleProp<T> { export class EnumStyleProp<T> extends StyleProp<T> {
@ -520,11 +537,7 @@ export class EnumStyleProp<T> extends StyleProp<T> {
export const frameShapeMigrations: TLPropsMigrations; export const frameShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const frameShapeProps: { export const frameShapeProps: RecordProps<TLFrameShape>;
h: T.Validator<number>;
name: T.Validator<string>;
w: T.Validator<number>;
};
// @public (undocumented) // @public (undocumented)
export const GeoShapeGeoStyle: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">; export const GeoShapeGeoStyle: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
@ -533,23 +546,7 @@ export const GeoShapeGeoStyle: EnumStyleProp<"arrow-down" | "arrow-left" | "arro
export const geoShapeMigrations: TLPropsMigrations; export const geoShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const geoShapeProps: { export const geoShapeProps: RecordProps<TLGeoShape>;
align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
fill: EnumStyleProp<"fill" | "none" | "pattern" | "semi" | "solid">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
geo: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">;
growY: T.Validator<number>;
h: T.Validator<number>;
labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
scale: T.Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
text: T.Validator<string>;
url: T.Validator<string>;
verticalAlign: EnumStyleProp<"end" | "middle" | "start">;
w: T.Validator<number>;
};
// @public (undocumented) // @public (undocumented)
export function getDefaultColorTheme(opts: { export function getDefaultColorTheme(opts: {
@ -572,41 +569,19 @@ export const groupShapeProps: RecordProps<TLGroupShape>;
export const highlightShapeMigrations: TLPropsMigrations; export const highlightShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const highlightShapeProps: { export const highlightShapeProps: RecordProps<TLHighlightShape>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
isComplete: T.Validator<boolean>;
isPen: T.Validator<boolean>;
scale: T.Validator<number>;
segments: T.ArrayOfValidator<TLDrawShapeSegment>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
};
// @public (undocumented) // @public (undocumented)
export function idValidator<Id extends RecordId<UnknownRecord>>(prefix: Id['__type__']['typeName']): T.Validator<Id>; export function idValidator<Id extends RecordId<UnknownRecord>>(prefix: Id['__type__']['typeName']): T.Validator<Id>;
// @public (undocumented) // @public (undocumented)
export const ImageShapeCrop: T.ObjectValidator<{ export const ImageShapeCrop: T.ObjectValidator<TLImageShapeCrop>;
bottomRight: VecModel;
topLeft: VecModel;
}>;
// @public (undocumented) // @public (undocumented)
export const imageShapeMigrations: TLPropsMigrations; export const imageShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const imageShapeProps: { export const imageShapeProps: RecordProps<TLImageShape>;
assetId: T.Validator<TLAssetId | null>;
crop: T.Validator<{
bottomRight: VecModel;
topLeft: VecModel;
} | null>;
flipX: T.Validator<boolean>;
flipY: T.Validator<boolean>;
h: T.Validator<number>;
playing: T.Validator<boolean>;
url: T.Validator<string>;
w: T.Validator<number>;
};
// @public (undocumented) // @public (undocumented)
export const InstancePageStateRecordType: RecordType<TLInstancePageState, "pageId">; export const InstancePageStateRecordType: RecordType<TLInstancePageState, "pageId">;
@ -747,19 +722,7 @@ export const LANGUAGES: readonly [{
export const lineShapeMigrations: TLPropsMigrations; export const lineShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const lineShapeProps: { export const lineShapeProps: RecordProps<TLLineShape>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">;
points: T.DictValidator<string, {
id: string;
index: IndexKey;
x: number;
y: number;
}>;
scale: T.Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
spline: EnumStyleProp<"cubic" | "line">;
};
// @public (undocumented) // @public (undocumented)
export const LineShapeSplineStyle: EnumStyleProp<"cubic" | "line">; export const LineShapeSplineStyle: EnumStyleProp<"cubic" | "line">;
@ -768,18 +731,7 @@ export const LineShapeSplineStyle: EnumStyleProp<"cubic" | "line">;
export const noteShapeMigrations: TLPropsMigrations; export const noteShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const noteShapeProps: { export const noteShapeProps: RecordProps<TLNoteShape>;
align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
fontSizeAdjustment: T.Validator<number>;
growY: T.Validator<number>;
scale: T.Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
text: T.Validator<string>;
url: T.Validator<string>;
verticalAlign: EnumStyleProp<"end" | "middle" | "start">;
};
// @public (undocumented) // @public (undocumented)
export const opacityValidator: T.Validator<number>; export const opacityValidator: T.Validator<number>;
@ -828,7 +780,7 @@ export interface SchemaPropsInfo {
} }
// @public (undocumented) // @public (undocumented)
export const scribbleValidator: T.Validator<TLScribble>; export const scribbleValidator: T.ObjectValidator<TLScribble>;
// @public (undocumented) // @public (undocumented)
export type SetValue<T extends Set<any>> = T extends Set<infer U> ? U : never; export type SetValue<T extends Set<any>> = T extends Set<infer U> ? U : never;
@ -869,16 +821,7 @@ export type StylePropValue<T extends StyleProp<any>> = T extends StyleProp<infer
export const textShapeMigrations: TLPropsMigrations; export const textShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const textShapeProps: { export const textShapeProps: RecordProps<TLTextShape>;
autoSize: T.Validator<boolean>;
color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">;
scale: T.Validator<number>;
size: EnumStyleProp<"l" | "m" | "s" | "xl">;
text: T.Validator<string>;
textAlign: EnumStyleProp<"end" | "middle" | "start">;
w: T.Validator<number>;
};
// @public // @public
export const TL_CANVAS_UI_COLOR_TYPES: Set<"accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white">; export const TL_CANVAS_UI_COLOR_TYPES: Set<"accent" | "black" | "laser" | "muted-1" | "selection-fill" | "selection-stroke" | "white">;
@ -912,7 +855,36 @@ export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>;
export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>; export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>;
// @public (undocumented) // @public (undocumented)
export type TLArrowShapeProps = RecordPropsType<typeof arrowShapeProps>; export interface TLArrowShapeProps {
// (undocumented)
arrowheadEnd: TLArrowShapeArrowheadStyle;
// (undocumented)
arrowheadStart: TLArrowShapeArrowheadStyle;
// (undocumented)
bend: number;
// (undocumented)
color: TLDefaultColorStyle;
// (undocumented)
dash: TLDefaultDashStyle;
// (undocumented)
end: VecModel;
// (undocumented)
fill: TLDefaultFillStyle;
// (undocumented)
font: TLDefaultFontStyle;
// (undocumented)
labelColor: TLDefaultColorStyle;
// (undocumented)
labelPosition: number;
// (undocumented)
scale: number;
// (undocumented)
size: TLDefaultSizeStyle;
// (undocumented)
start: VecModel;
// (undocumented)
text: string;
}
// @public (undocumented) // @public (undocumented)
export type TLAsset = TLBookmarkAsset | TLImageAsset | TLVideoAsset; export type TLAsset = TLBookmarkAsset | TLImageAsset | TLVideoAsset;
@ -1044,7 +1016,16 @@ export type TLBookmarkAsset = TLBaseAsset<'bookmark', {
export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>; export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLBookmarkShapeProps = RecordPropsType<typeof bookmarkShapeProps>; export interface TLBookmarkShapeProps {
// (undocumented)
assetId: null | TLAssetId;
// (undocumented)
h: number;
// (undocumented)
url: string;
// (undocumented)
w: number;
}
// @public // @public
export interface TLCamera extends BaseRecord<'camera', TLCameraId> { export interface TLCamera extends BaseRecord<'camera', TLCameraId> {
@ -1152,7 +1133,26 @@ export const TLDOCUMENT_ID: RecordId<TLDocument>;
export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>; export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLDrawShapeProps = RecordPropsType<typeof drawShapeProps>; export interface TLDrawShapeProps {
// (undocumented)
color: TLDefaultColorStyle;
// (undocumented)
dash: TLDefaultDashStyle;
// (undocumented)
fill: TLDefaultFillStyle;
// (undocumented)
isClosed: boolean;
// (undocumented)
isComplete: boolean;
// (undocumented)
isPen: boolean;
// (undocumented)
scale: number;
// (undocumented)
segments: TLDrawShapeSegment[];
// (undocumented)
size: TLDefaultSizeStyle;
}
// @public (undocumented) // @public (undocumented)
export interface TLDrawShapeSegment { export interface TLDrawShapeSegment {
@ -1171,27 +1171,74 @@ export type TLEmbedShapePermissions = {
}; };
// @public (undocumented) // @public (undocumented)
export type TLEmbedShapeProps = RecordPropsType<typeof embedShapeProps>; export interface TLEmbedShapeProps {
// (undocumented)
h: number;
// (undocumented)
url: string;
// (undocumented)
w: number;
}
// @public (undocumented) // @public (undocumented)
export type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>; export type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLFrameShapeProps = RecordPropsType<typeof frameShapeProps>; export interface TLFrameShapeProps {
// (undocumented)
h: number;
// (undocumented)
name: string;
// (undocumented)
w: number;
}
// @public (undocumented) // @public (undocumented)
export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>; export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLGeoShapeProps = RecordPropsType<typeof geoShapeProps>; export type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle>;
// @public (undocumented)
export interface TLGeoShapeProps {
// (undocumented)
align: TLDefaultHorizontalAlignStyle;
// (undocumented)
color: TLDefaultColorStyle;
// (undocumented)
dash: TLDefaultDashStyle;
// (undocumented)
fill: TLDefaultFillStyle;
// (undocumented)
font: TLDefaultFontStyle;
// (undocumented)
geo: TLGeoShapeGeoStyle;
// (undocumented)
growY: number;
// (undocumented)
h: number;
// (undocumented)
labelColor: TLDefaultColorStyle;
// (undocumented)
scale: number;
// (undocumented)
size: TLDefaultSizeStyle;
// (undocumented)
text: string;
// (undocumented)
url: string;
// (undocumented)
verticalAlign: TLDefaultVerticalAlignStyle;
// (undocumented)
w: number;
}
// @public (undocumented) // @public (undocumented)
export type TLGroupShape = TLBaseShape<'group', TLGroupShapeProps>; export type TLGroupShape = TLBaseShape<'group', TLGroupShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLGroupShapeProps = { export interface TLGroupShapeProps {
[key in never]: undefined; }
};
// @public // @public
export interface TLHandle { export interface TLHandle {
@ -1215,7 +1262,20 @@ export type TLHandleType = SetValue<typeof TL_HANDLE_TYPES>;
export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>; export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLHighlightShapeProps = RecordPropsType<typeof highlightShapeProps>; export interface TLHighlightShapeProps {
// (undocumented)
color: TLDefaultColorStyle;
// (undocumented)
isComplete: boolean;
// (undocumented)
isPen: boolean;
// (undocumented)
scale: number;
// (undocumented)
segments: TLDrawShapeSegment[];
// (undocumented)
size: TLDefaultSizeStyle;
}
// @public // @public
export type TLImageAsset = TLBaseAsset<'image', { export type TLImageAsset = TLBaseAsset<'image', {
@ -1232,10 +1292,32 @@ export type TLImageAsset = TLBaseAsset<'image', {
export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>; export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLImageShapeCrop = T.TypeOf<typeof ImageShapeCrop>; export interface TLImageShapeCrop {
// (undocumented)
bottomRight: VecModel;
// (undocumented)
topLeft: VecModel;
}
// @public (undocumented) // @public (undocumented)
export type TLImageShapeProps = RecordPropsType<typeof imageShapeProps>; export interface TLImageShapeProps {
// (undocumented)
assetId: null | TLAssetId;
// (undocumented)
crop: null | TLImageShapeCrop;
// (undocumented)
flipX: boolean;
// (undocumented)
flipY: boolean;
// (undocumented)
h: number;
// (undocumented)
playing: boolean;
// (undocumented)
url: string;
// (undocumented)
w: number;
}
// @public // @public
export interface TLInstance extends BaseRecord<'instance', TLInstanceId> { export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
@ -1383,13 +1465,62 @@ export type TLLanguage = (typeof LANGUAGES)[number];
export type TLLineShape = TLBaseShape<'line', TLLineShapeProps>; export type TLLineShape = TLBaseShape<'line', TLLineShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLLineShapeProps = RecordPropsType<typeof lineShapeProps>; export interface TLLineShapePoint {
// (undocumented)
id: string;
// (undocumented)
index: IndexKey;
// (undocumented)
x: number;
// (undocumented)
y: number;
}
// @public (undocumented)
export interface TLLineShapeProps {
// (undocumented)
color: TLDefaultColorStyle;
// (undocumented)
dash: TLDefaultDashStyle;
// (undocumented)
points: Record<string, TLLineShapePoint>;
// (undocumented)
scale: number;
// (undocumented)
size: TLDefaultSizeStyle;
// (undocumented)
spline: TLLineShapeSplineStyle;
}
// @public (undocumented)
export type TLLineShapeSplineStyle = T.TypeOf<typeof LineShapeSplineStyle>;
// @public (undocumented) // @public (undocumented)
export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>; export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLNoteShapeProps = RecordPropsType<typeof noteShapeProps>; export interface TLNoteShapeProps {
// (undocumented)
align: TLDefaultHorizontalAlignStyle;
// (undocumented)
color: TLDefaultColorStyle;
// (undocumented)
font: TLDefaultFontStyle;
// (undocumented)
fontSizeAdjustment: number;
// (undocumented)
growY: number;
// (undocumented)
scale: number;
// (undocumented)
size: TLDefaultSizeStyle;
// (undocumented)
text: string;
// (undocumented)
url: string;
// (undocumented)
verticalAlign: TLDefaultVerticalAlignStyle;
}
// @public (undocumented) // @public (undocumented)
export type TLOpacityType = number; export type TLOpacityType = number;
@ -1514,7 +1645,24 @@ export type TLStoreSnapshot = StoreSnapshot<TLRecord>;
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>; export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLTextShapeProps = RecordPropsType<typeof textShapeProps>; export interface TLTextShapeProps {
// (undocumented)
autoSize: boolean;
// (undocumented)
color: TLDefaultColorStyle;
// (undocumented)
font: TLDefaultFontStyle;
// (undocumented)
scale: number;
// (undocumented)
size: TLDefaultSizeStyle;
// (undocumented)
text: string;
// (undocumented)
textAlign: TLDefaultTextAlignStyle;
// (undocumented)
w: number;
}
// @public // @public
export type TLUnknownBinding = TLBaseBinding<string, object>; export type TLUnknownBinding = TLBaseBinding<string, object>;
@ -1537,7 +1685,20 @@ export type TLVideoAsset = TLBaseAsset<'video', {
export type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>; export type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>;
// @public (undocumented) // @public (undocumented)
export type TLVideoShapeProps = RecordPropsType<typeof videoShapeProps>; export interface TLVideoShapeProps {
// (undocumented)
assetId: null | TLAssetId;
// (undocumented)
h: number;
// (undocumented)
playing: boolean;
// (undocumented)
time: number;
// (undocumented)
url: string;
// (undocumented)
w: number;
}
// @public // @public
export interface VecModel { export interface VecModel {
@ -1550,20 +1711,13 @@ export interface VecModel {
} }
// @public (undocumented) // @public (undocumented)
export const vecModelValidator: T.Validator<VecModel>; export const vecModelValidator: T.ObjectValidator<VecModel>;
// @public (undocumented) // @public (undocumented)
export const videoShapeMigrations: TLPropsMigrations; export const videoShapeMigrations: TLPropsMigrations;
// @public (undocumented) // @public (undocumented)
export const videoShapeProps: { export const videoShapeProps: RecordProps<TLVideoShape>;
assetId: T.Validator<TLAssetId | null>;
h: T.Validator<number>;
playing: T.Validator<boolean>;
time: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
// (No @packageDocumentation comment for this package) // (No @packageDocumentation comment for this package)

8
packages/tlschema/src/createTLSchema.ts
View file

@ -50,7 +50,7 @@ export interface SchemaPropsInfo {
export type TLSchema = StoreSchema<TLRecord, TLStoreProps> export type TLSchema = StoreSchema<TLRecord, TLStoreProps>
/** @public */ /** @public */
export const defaultShapeSchemas: { [T in TLDefaultShape['type']]: SchemaPropsInfo } = { export const defaultShapeSchemas = {
arrow: { migrations: arrowShapeMigrations, props: arrowShapeProps }, arrow: { migrations: arrowShapeMigrations, props: arrowShapeProps },
bookmark: { migrations: bookmarkShapeMigrations, props: bookmarkShapeProps }, bookmark: { migrations: bookmarkShapeMigrations, props: bookmarkShapeProps },
draw: { migrations: drawShapeMigrations, props: drawShapeProps }, draw: { migrations: drawShapeMigrations, props: drawShapeProps },
@ -64,12 +64,12 @@ export const defaultShapeSchemas: { [T in TLDefaultShape['type']]: SchemaPropsIn
note: { migrations: noteShapeMigrations, props: noteShapeProps }, note: { migrations: noteShapeMigrations, props: noteShapeProps },
text: { migrations: textShapeMigrations, props: textShapeProps }, text: { migrations: textShapeMigrations, props: textShapeProps },
video: { migrations: videoShapeMigrations, props: videoShapeProps }, video: { migrations: videoShapeMigrations, props: videoShapeProps },
} } satisfies { [T in TLDefaultShape['type']]: SchemaPropsInfo }
/** @public */ /** @public */
export const defaultBindingSchemas: { [T in TLDefaultBinding['type']]: SchemaPropsInfo } = { export const defaultBindingSchemas = {
arrow: { migrations: arrowBindingMigrations, props: arrowBindingProps }, arrow: { migrations: arrowBindingMigrations, props: arrowBindingProps },
} } satisfies { [T in TLDefaultBinding['type']]: SchemaPropsInfo }
/** /**
* Create a TLSchema with custom shapes. Custom shapes cannot override default shapes. * Create a TLSchema with custom shapes. Custom shapes cannot override default shapes.

3
packages/tlschema/src/index.ts
View file

@ -170,6 +170,7 @@ export {
geoShapeMigrations, geoShapeMigrations,
geoShapeProps, geoShapeProps,
type TLGeoShape, type TLGeoShape,
type TLGeoShapeGeoStyle,
type TLGeoShapeProps, type TLGeoShapeProps,
} from './shapes/TLGeoShape' } from './shapes/TLGeoShape'
export { export {
@ -197,7 +198,9 @@ export {
lineShapeMigrations, lineShapeMigrations,
lineShapeProps, lineShapeProps,
type TLLineShape, type TLLineShape,
type TLLineShapePoint,
type TLLineShapeProps, type TLLineShapeProps,
type TLLineShapeSplineStyle,
} from './shapes/TLLineShape' } from './shapes/TLLineShape'
export { export {
noteShapeMigrations, noteShapeMigrations,

2
packages/tlschema/src/misc/TLCursor.ts
View file

@ -48,7 +48,7 @@ export interface TLCursor {
} }
/** @public */ /** @public */
export const cursorValidator: T.Validator<TLCursor> = T.object<TLCursor>({ export const cursorValidator: T.ObjectValidator<TLCursor> = T.object<TLCursor>({
type: cursorTypeValidator, type: cursorTypeValidator,
rotation: T.number, rotation: T.number,
}) })

2
packages/tlschema/src/misc/TLScribble.ts
View file

@ -26,7 +26,7 @@ export interface TLScribble {
} }
/** @public */ /** @public */
export const scribbleValidator: T.Validator<TLScribble> = T.object({ export const scribbleValidator: T.ObjectValidator<TLScribble> = T.object({
id: T.string, id: T.string,
points: T.arrayOf(vecModelValidator), points: T.arrayOf(vecModelValidator),
size: T.positiveNumber, size: T.positiveNumber,

4
packages/tlschema/src/misc/geometry-types.ts
View file

@ -22,14 +22,14 @@ export interface VecModel {
} }
/** @public */ /** @public */
export const vecModelValidator: T.Validator<VecModel> = T.object({ export const vecModelValidator: T.ObjectValidator<VecModel> = T.object({
x: T.number, x: T.number,
y: T.number, y: T.number,
z: T.number.optional(), z: T.number.optional(),
}) })
/** @public */ /** @public */
export const boxModelValidator: T.Validator<BoxModel> = T.object({ export const boxModelValidator: T.ObjectValidator<BoxModel> = T.object({
x: T.number, x: T.number,
y: T.number, y: T.number,
w: T.number, w: T.number,

45
packages/tlschema/src/shapes/TLArrowShape.ts
View file

@ -4,13 +4,17 @@ import { TLArrowBinding } from '../bindings/TLArrowBinding'
import { VecModel, vecModelValidator } from '../misc/geometry-types' import { VecModel, vecModelValidator } from '../misc/geometry-types'
import { createBindingId } from '../records/TLBinding' import { createBindingId } from '../records/TLBinding'
import { TLShapeId, createShapePropsMigrationIds } from '../records/TLShape' import { TLShapeId, createShapePropsMigrationIds } from '../records/TLShape'
import { RecordPropsType, TLPropsMigration, createPropsMigration } from '../recordsWithProps' import { RecordProps, TLPropsMigration, createPropsMigration } from '../recordsWithProps'
import { StyleProp } from '../styles/StyleProp' import { StyleProp } from '../styles/StyleProp'
import { DefaultColorStyle, DefaultLabelColorStyle } from '../styles/TLColorStyle' import {
import { DefaultDashStyle } from '../styles/TLDashStyle' DefaultColorStyle,
import { DefaultFillStyle } from '../styles/TLFillStyle' DefaultLabelColorStyle,
import { DefaultFontStyle } from '../styles/TLFontStyle' TLDefaultColorStyle,
import { DefaultSizeStyle } from '../styles/TLSizeStyle' } from '../styles/TLColorStyle'
import { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'
import { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'
import { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'
import { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
const arrowheadTypes = [ const arrowheadTypes = [
@ -41,7 +45,28 @@ export const ArrowShapeArrowheadEndStyle = StyleProp.defineEnum('tldraw:arrowhea
export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle> export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>
/** @public */ /** @public */
export const arrowShapeProps = { export interface TLArrowShapeProps {
labelColor: TLDefaultColorStyle
color: TLDefaultColorStyle
fill: TLDefaultFillStyle
dash: TLDefaultDashStyle
size: TLDefaultSizeStyle
arrowheadStart: TLArrowShapeArrowheadStyle
arrowheadEnd: TLArrowShapeArrowheadStyle
font: TLDefaultFontStyle
start: VecModel
end: VecModel
bend: number
text: string
labelPosition: number
scale: number
}
/** @public */
export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>
/** @public */
export const arrowShapeProps: RecordProps<TLArrowShape> = {
labelColor: DefaultLabelColorStyle, labelColor: DefaultLabelColorStyle,
color: DefaultColorStyle, color: DefaultColorStyle,
fill: DefaultFillStyle, fill: DefaultFillStyle,
@ -58,12 +83,6 @@ export const arrowShapeProps = {
scale: T.nonZeroNumber, scale: T.nonZeroNumber,
} }
/** @public */
export type TLArrowShapeProps = RecordPropsType<typeof arrowShapeProps>
/** @public */
export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>
export const arrowShapeVersions = createShapePropsMigrationIds('arrow', { export const arrowShapeVersions = createShapePropsMigrationIds('arrow', {
AddLabelColor: 1, AddLabelColor: 1,
AddIsPrecise: 2, AddIsPrecise: 2,

22
packages/tlschema/src/shapes/TLBookmarkShape.ts
View file

@ -1,23 +1,29 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { assetIdValidator } from '../assets/TLBaseAsset' import { assetIdValidator } from '../assets/TLBaseAsset'
import { TLAssetId } from '../records/TLAsset'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
export const bookmarkShapeProps = { export interface TLBookmarkShapeProps {
w: number
h: number
assetId: TLAssetId | null
url: string
}
/** @public */
export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>
/** @public */
export const bookmarkShapeProps: RecordProps<TLBookmarkShape> = {
w: T.nonZeroNumber, w: T.nonZeroNumber,
h: T.nonZeroNumber, h: T.nonZeroNumber,
assetId: assetIdValidator.nullable(), assetId: assetIdValidator.nullable(),
url: T.linkUrl, url: T.linkUrl,
} }
/** @public */
export type TLBookmarkShapeProps = RecordPropsType<typeof bookmarkShapeProps>
/** @public */
export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>
const Versions = createShapePropsMigrationIds('bookmark', { const Versions = createShapePropsMigrationIds('bookmark', {
NullAssetId: 1, NullAssetId: 1,
MakeUrlsValid: 2, MakeUrlsValid: 2,

37
packages/tlschema/src/shapes/TLDrawShape.ts
View file

@ -1,11 +1,11 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { VecModel, vecModelValidator } from '../misc/geometry-types' import { VecModel, vecModelValidator } from '../misc/geometry-types'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { DefaultColorStyle } from '../styles/TLColorStyle' import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
import { DefaultDashStyle } from '../styles/TLDashStyle' import { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'
import { DefaultFillStyle } from '../styles/TLFillStyle' import { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'
import { DefaultSizeStyle } from '../styles/TLSizeStyle' import { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
@ -14,13 +14,30 @@ export interface TLDrawShapeSegment {
points: VecModel[] points: VecModel[]
} }
export const DrawShapeSegment: T.Validator<TLDrawShapeSegment> = T.object<TLDrawShapeSegment>({ /** @public */
export const DrawShapeSegment: T.ObjectValidator<TLDrawShapeSegment> = T.object({
type: T.literalEnum('free', 'straight'), type: T.literalEnum('free', 'straight'),
points: T.arrayOf(vecModelValidator), points: T.arrayOf(vecModelValidator),
}) })
/** @public */ /** @public */
export const drawShapeProps = { export interface TLDrawShapeProps {
color: TLDefaultColorStyle
fill: TLDefaultFillStyle
dash: TLDefaultDashStyle
size: TLDefaultSizeStyle
segments: TLDrawShapeSegment[]
isComplete: boolean
isClosed: boolean
isPen: boolean
scale: number
}
/** @public */
export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>
/** @public */
export const drawShapeProps: RecordProps<TLDrawShape> = {
color: DefaultColorStyle, color: DefaultColorStyle,
fill: DefaultFillStyle, fill: DefaultFillStyle,
dash: DefaultDashStyle, dash: DefaultDashStyle,
@ -32,12 +49,6 @@ export const drawShapeProps = {
scale: T.nonZeroNumber, scale: T.nonZeroNumber,
} }
/** @public */
export type TLDrawShapeProps = RecordPropsType<typeof drawShapeProps>
/** @public */
export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>
const Versions = createShapePropsMigrationIds('draw', { const Versions = createShapePropsMigrationIds('draw', {
AddInPen: 1, AddInPen: 1,
AddScale: 2, AddScale: 2,

20
packages/tlschema/src/shapes/TLEmbedShape.ts
View file

@ -1,6 +1,6 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
// Only allow multiplayer embeds. If we add additional routes later for example '/help' this won't match // Only allow multiplayer embeds. If we add additional routes later for example '/help' this won't match
@ -625,18 +625,22 @@ export const embedShapePermissionDefaults = {
export type TLEmbedShapePermissions = { [K in keyof typeof embedShapePermissionDefaults]?: boolean } export type TLEmbedShapePermissions = { [K in keyof typeof embedShapePermissionDefaults]?: boolean }
/** @public */ /** @public */
export const embedShapeProps = { export interface TLEmbedShapeProps {
w: number
h: number
url: string
}
/** @public */
export type TLEmbedShape = TLBaseShape<'embed', TLEmbedShapeProps>
/** @public */
export const embedShapeProps: RecordProps<TLEmbedShape> = {
w: T.nonZeroNumber, w: T.nonZeroNumber,
h: T.nonZeroNumber, h: T.nonZeroNumber,
url: T.string, url: T.string,
} }
/** @public */
export type TLEmbedShapeProps = RecordPropsType<typeof embedShapeProps>
/** @public */
export type TLEmbedShape = TLBaseShape<'embed', TLEmbedShapeProps>
/** @public */ /** @public */
export interface EmbedDefinition { export interface EmbedDefinition {
readonly type: string readonly type: string

20
packages/tlschema/src/shapes/TLFrameShape.ts
View file

@ -1,21 +1,25 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
export const frameShapeProps = { export interface TLFrameShapeProps {
w: number
h: number
name: string
}
/** @public */
export type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>
/** @public */
export const frameShapeProps: RecordProps<TLFrameShape> = {
w: T.nonZeroNumber, w: T.nonZeroNumber,
h: T.nonZeroNumber, h: T.nonZeroNumber,
name: T.string, name: T.string,
} }
/** @public */
export type TLFrameShapeProps = RecordPropsType<typeof frameShapeProps>
/** @public */
export type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>
/** @public */ /** @public */
export const frameShapeMigrations = createShapePropsMigrationSequence({ export const frameShapeMigrations = createShapePropsMigrationSequence({
sequence: [], sequence: [],

51
packages/tlschema/src/shapes/TLGeoShape.ts
View file

@ -1,17 +1,24 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { StyleProp } from '../styles/StyleProp' import { StyleProp } from '../styles/StyleProp'
import { DefaultColorStyle, DefaultLabelColorStyle } from '../styles/TLColorStyle' import {
import { DefaultDashStyle } from '../styles/TLDashStyle' DefaultColorStyle,
import { DefaultFillStyle } from '../styles/TLFillStyle' DefaultLabelColorStyle,
import { DefaultFontStyle } from '../styles/TLFontStyle' TLDefaultColorStyle,
} from '../styles/TLColorStyle'
import { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'
import { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'
import { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'
import { import {
DefaultHorizontalAlignStyle, DefaultHorizontalAlignStyle,
TLDefaultHorizontalAlignStyle, TLDefaultHorizontalAlignStyle,
} from '../styles/TLHorizontalAlignStyle' } from '../styles/TLHorizontalAlignStyle'
import { DefaultSizeStyle } from '../styles/TLSizeStyle' import { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'
import { DefaultVerticalAlignStyle } from '../styles/TLVerticalAlignStyle' import {
DefaultVerticalAlignStyle,
TLDefaultVerticalAlignStyle,
} from '../styles/TLVerticalAlignStyle'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
@ -45,7 +52,29 @@ export const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {
export type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle> export type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle>
/** @public */ /** @public */
export const geoShapeProps = { export interface TLGeoShapeProps {
geo: TLGeoShapeGeoStyle
labelColor: TLDefaultColorStyle
color: TLDefaultColorStyle
fill: TLDefaultFillStyle
dash: TLDefaultDashStyle
size: TLDefaultSizeStyle
font: TLDefaultFontStyle
align: TLDefaultHorizontalAlignStyle
verticalAlign: TLDefaultVerticalAlignStyle
url: string
w: number
h: number
growY: number
text: string
scale: number
}
/** @public */
export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>
/** @public */
export const geoShapeProps: RecordProps<TLGeoShape> = {
geo: GeoShapeGeoStyle, geo: GeoShapeGeoStyle,
labelColor: DefaultLabelColorStyle, labelColor: DefaultLabelColorStyle,
color: DefaultColorStyle, color: DefaultColorStyle,
@ -63,12 +92,6 @@ export const geoShapeProps = {
scale: T.nonZeroNumber, scale: T.nonZeroNumber,
} }
/** @public */
export type TLGeoShapeProps = RecordPropsType<typeof geoShapeProps>
/** @public */
export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>
const geoShapeVersions = createShapePropsMigrationIds('geo', { const geoShapeVersions = createShapePropsMigrationIds('geo', {
AddUrlProp: 1, AddUrlProp: 1,
AddLabelColor: 2, AddLabelColor: 2,

3
packages/tlschema/src/shapes/TLGroupShape.ts
View file

@ -3,7 +3,8 @@ import { RecordProps } from '../recordsWithProps'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
export type TLGroupShapeProps = { [key in never]: undefined } // eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface TLGroupShapeProps {}
/** @public */ /** @public */
export type TLGroupShape = TLBaseShape<'group', TLGroupShapeProps> export type TLGroupShape = TLBaseShape<'group', TLGroupShapeProps>

29
packages/tlschema/src/shapes/TLHighlightShape.ts
View file

@ -1,13 +1,26 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { DefaultColorStyle } from '../styles/TLColorStyle' import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
import { DefaultSizeStyle } from '../styles/TLSizeStyle' import { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
import { DrawShapeSegment } from './TLDrawShape' import { DrawShapeSegment, TLDrawShapeSegment } from './TLDrawShape'
/** @public */ /** @public */
export const highlightShapeProps = { export interface TLHighlightShapeProps {
color: TLDefaultColorStyle
size: TLDefaultSizeStyle
segments: TLDrawShapeSegment[]
isComplete: boolean
isPen: boolean
scale: number
}
/** @public */
export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>
/** @public */
export const highlightShapeProps: RecordProps<TLHighlightShape> = {
color: DefaultColorStyle, color: DefaultColorStyle,
size: DefaultSizeStyle, size: DefaultSizeStyle,
segments: T.arrayOf(DrawShapeSegment), segments: T.arrayOf(DrawShapeSegment),
@ -22,12 +35,6 @@ const Versions = createShapePropsMigrationIds('highlight', {
export { Versions as highlightShapeVersions } export { Versions as highlightShapeVersions }
/** @public */
export type TLHighlightShapeProps = RecordPropsType<typeof highlightShapeProps>
/** @public */
export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>
/** @public */ /** @public */
export const highlightShapeMigrations = createShapePropsMigrationSequence({ export const highlightShapeMigrations = createShapePropsMigrationSequence({
sequence: [ sequence: [

38
packages/tlschema/src/shapes/TLImageShape.ts
View file

@ -1,20 +1,40 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { assetIdValidator } from '../assets/TLBaseAsset' import { assetIdValidator } from '../assets/TLBaseAsset'
import { vecModelValidator } from '../misc/geometry-types' import { VecModel, vecModelValidator } from '../misc/geometry-types'
import { TLAssetId } from '../records/TLAsset'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
export const ImageShapeCrop = T.object({ export interface TLImageShapeCrop {
topLeft: VecModel
bottomRight: VecModel
}
/** @public */
export const ImageShapeCrop: T.ObjectValidator<TLImageShapeCrop> = T.object({
topLeft: vecModelValidator, topLeft: vecModelValidator,
bottomRight: vecModelValidator, bottomRight: vecModelValidator,
}) })
/** @public */
export type TLImageShapeCrop = T.TypeOf<typeof ImageShapeCrop>
/** @public */ /** @public */
export const imageShapeProps = { export interface TLImageShapeProps {
w: number
h: number
playing: boolean
url: string
assetId: TLAssetId | null
crop: TLImageShapeCrop | null
flipX: boolean
flipY: boolean
}
/** @public */
export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>
/** @public */
export const imageShapeProps: RecordProps<TLImageShape> = {
w: T.nonZeroNumber, w: T.nonZeroNumber,
h: T.nonZeroNumber, h: T.nonZeroNumber,
playing: T.boolean, playing: T.boolean,
@ -25,12 +45,6 @@ export const imageShapeProps = {
flipY: T.boolean, flipY: T.boolean,
} }
/** @public */
export type TLImageShapeProps = RecordPropsType<typeof imageShapeProps>
/** @public */
export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>
const Versions = createShapePropsMigrationIds('image', { const Versions = createShapePropsMigrationIds('image', {
AddUrlProp: 1, AddUrlProp: 1,
AddCropProp: 2, AddCropProp: 2,

39
packages/tlschema/src/shapes/TLLineShape.ts
View file

@ -1,11 +1,11 @@
import { IndexKey, getIndices, objectMapFromEntries, sortByIndex } from '@tldraw/utils' import { IndexKey, getIndices, objectMapFromEntries, sortByIndex } from '@tldraw/utils'
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { StyleProp } from '../styles/StyleProp' import { StyleProp } from '../styles/StyleProp'
import { DefaultColorStyle } from '../styles/TLColorStyle' import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
import { DefaultDashStyle } from '../styles/TLDashStyle' import { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'
import { DefaultSizeStyle } from '../styles/TLSizeStyle' import { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
@ -17,7 +17,15 @@ export const LineShapeSplineStyle = StyleProp.defineEnum('tldraw:spline', {
/** @public */ /** @public */
export type TLLineShapeSplineStyle = T.TypeOf<typeof LineShapeSplineStyle> export type TLLineShapeSplineStyle = T.TypeOf<typeof LineShapeSplineStyle>
const lineShapePointValidator = T.object({ /** @public */
export interface TLLineShapePoint {
id: string
index: IndexKey
x: number
y: number
}
const lineShapePointValidator: T.ObjectValidator<TLLineShapePoint> = T.object({
id: T.string, id: T.string,
index: T.indexKey, index: T.indexKey,
x: T.number, x: T.number,
@ -25,7 +33,20 @@ const lineShapePointValidator = T.object({
}) })
/** @public */ /** @public */
export const lineShapeProps = { export interface TLLineShapeProps {
color: TLDefaultColorStyle
dash: TLDefaultDashStyle
size: TLDefaultSizeStyle
spline: TLLineShapeSplineStyle
points: Record<string, TLLineShapePoint>
scale: number
}
/** @public */
export type TLLineShape = TLBaseShape<'line', TLLineShapeProps>
/** @public */
export const lineShapeProps: RecordProps<TLLineShape> = {
color: DefaultColorStyle, color: DefaultColorStyle,
dash: DefaultDashStyle, dash: DefaultDashStyle,
size: DefaultSizeStyle, size: DefaultSizeStyle,
@ -34,12 +55,6 @@ export const lineShapeProps = {
scale: T.nonZeroNumber, scale: T.nonZeroNumber,
} }
/** @public */
export type TLLineShapeProps = RecordPropsType<typeof lineShapeProps>
/** @public */
export type TLLineShape = TLBaseShape<'line', TLLineShapeProps>
/** @public */ /** @public */
export const lineShapeVersions = createShapePropsMigrationIds('line', { export const lineShapeVersions = createShapePropsMigrationIds('line', {
AddSnapHandles: 1, AddSnapHandles: 1,

43
packages/tlschema/src/shapes/TLNoteShape.ts
View file

@ -1,15 +1,38 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { DefaultColorStyle } from '../styles/TLColorStyle' import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
import { DefaultFontStyle } from '../styles/TLFontStyle' import { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'
import { DefaultHorizontalAlignStyle } from '../styles/TLHorizontalAlignStyle' import {
import { DefaultSizeStyle } from '../styles/TLSizeStyle' DefaultHorizontalAlignStyle,
import { DefaultVerticalAlignStyle } from '../styles/TLVerticalAlignStyle' TLDefaultHorizontalAlignStyle,
} from '../styles/TLHorizontalAlignStyle'
import { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'
import {
DefaultVerticalAlignStyle,
TLDefaultVerticalAlignStyle,
} from '../styles/TLVerticalAlignStyle'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
export const noteShapeProps = { export interface TLNoteShapeProps {
color: TLDefaultColorStyle
size: TLDefaultSizeStyle
font: TLDefaultFontStyle
fontSizeAdjustment: number
align: TLDefaultHorizontalAlignStyle
verticalAlign: TLDefaultVerticalAlignStyle
growY: number
url: string
text: string
scale: number
}
/** @public */
export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>
/** @public */
export const noteShapeProps: RecordProps<TLNoteShape> = {
color: DefaultColorStyle, color: DefaultColorStyle,
size: DefaultSizeStyle, size: DefaultSizeStyle,
font: DefaultFontStyle, font: DefaultFontStyle,
@ -22,12 +45,6 @@ export const noteShapeProps = {
scale: T.nonZeroNumber, scale: T.nonZeroNumber,
} }
/** @public */
export type TLNoteShapeProps = RecordPropsType<typeof noteShapeProps>
/** @public */
export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>
const Versions = createShapePropsMigrationIds('note', { const Versions = createShapePropsMigrationIds('note', {
AddUrlProp: 1, AddUrlProp: 1,
RemoveJustify: 2, RemoveJustify: 2,

33
packages/tlschema/src/shapes/TLTextShape.ts
View file

@ -1,14 +1,29 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { DefaultColorStyle } from '../styles/TLColorStyle' import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
import { DefaultFontStyle } from '../styles/TLFontStyle' import { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'
import { DefaultSizeStyle } from '../styles/TLSizeStyle' import { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'
import { DefaultTextAlignStyle } from '../styles/TLTextAlignStyle' import { DefaultTextAlignStyle, TLDefaultTextAlignStyle } from '../styles/TLTextAlignStyle'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
export const textShapeProps = { export interface TLTextShapeProps {
color: TLDefaultColorStyle
size: TLDefaultSizeStyle
font: TLDefaultFontStyle
textAlign: TLDefaultTextAlignStyle
w: number
text: string
scale: number
autoSize: boolean
}
/** @public */
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>
/** @public */
export const textShapeProps: RecordProps<TLTextShape> = {
color: DefaultColorStyle, color: DefaultColorStyle,
size: DefaultSizeStyle, size: DefaultSizeStyle,
font: DefaultFontStyle, font: DefaultFontStyle,
@ -19,12 +34,6 @@ export const textShapeProps = {
autoSize: T.boolean, autoSize: T.boolean,
} }
/** @public */
export type TLTextShapeProps = RecordPropsType<typeof textShapeProps>
/** @public */
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>
const Versions = createShapePropsMigrationIds('text', { const Versions = createShapePropsMigrationIds('text', {
RemoveJustify: 1, RemoveJustify: 1,
AddTextAlign: 2, AddTextAlign: 2,

24
packages/tlschema/src/shapes/TLVideoShape.ts
View file

@ -1,11 +1,25 @@
import { T } from '@tldraw/validate' import { T } from '@tldraw/validate'
import { assetIdValidator } from '../assets/TLBaseAsset' import { assetIdValidator } from '../assets/TLBaseAsset'
import { TLAssetId } from '../records/TLAsset'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape' import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps' import { RecordProps } from '../recordsWithProps'
import { TLBaseShape } from './TLBaseShape' import { TLBaseShape } from './TLBaseShape'
/** @public */ /** @public */
export const videoShapeProps = { export interface TLVideoShapeProps {
w: number
h: number
time: number
playing: boolean
url: string
assetId: TLAssetId | null
}
/** @public */
export type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>
/** @public */
export const videoShapeProps: RecordProps<TLVideoShape> = {
w: T.nonZeroNumber, w: T.nonZeroNumber,
h: T.nonZeroNumber, h: T.nonZeroNumber,
time: T.number, time: T.number,
@ -14,12 +28,6 @@ export const videoShapeProps = {
assetId: assetIdValidator.nullable(), assetId: assetIdValidator.nullable(),
} }
/** @public */
export type TLVideoShapeProps = RecordPropsType<typeof videoShapeProps>
/** @public */
export type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>
const Versions = createShapePropsMigrationIds('video', { const Versions = createShapePropsMigrationIds('video', {
AddUrlProp: 1, AddUrlProp: 1,
MakeUrlsValid: 2, MakeUrlsValid: 2,