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)
export interface TLEditorOptions {
autoFocus?: boolean;
bindingUtils: readonly TLBindingUtilConstructor<TLUnknownBinding>[];
bindingUtils: readonly TLAnyBindingUtilConstructor[];
cameraOptions?: Partial<TLCameraOptions>;
getContainer: () => HTMLElement;
inferDarkMode?: boolean;
@ -2685,7 +2685,7 @@ export interface TLEditorOptions {
licenseKey?: string;
// (undocumented)
options?: Partial<TldrawOptions>;
shapeUtils: readonly TLShapeUtilConstructor<TLUnknownShape>[];
shapeUtils: readonly TLAnyShapeUtilConstructor[];
store: TLStore;
tools: readonly TLStateNodeConstructor[];
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 { TLEditorSnapshot, getSnapshot, loadSnapshot } from '../config/TLEditorSnapshot'
import { TLUser, createTLUser } from '../config/createTLUser'
import { checkBindings } from '../config/defaultBindings'
import { checkShapesAndAddCore } from '../config/defaultShapes'
import { TLAnyBindingUtilConstructor, checkBindings } from '../config/defaultBindings'
import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from '../config/defaultShapes'
import {
DEFAULT_ANIMATION_OPTIONS,
DEFAULT_CAMERA_OPTIONS,
@ -113,11 +113,7 @@ import { getIncrementedName } from '../utils/getIncrementedName'
import { getReorderingShapesChanges } from '../utils/reorderShapes'
import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
import { uniqueId } from '../utils/uniqueId'
import {
BindingOnDeleteOptions,
BindingUtil,
TLBindingUtilConstructor,
} from './bindings/BindingUtil'
import { BindingOnDeleteOptions, BindingUtil } from './bindings/BindingUtil'
import { bindingsIndex } from './derivations/bindingsIndex'
import { notVisibleShapes } from './derivations/notVisibleShapes'
import { parentsToChildren } from './derivations/parentsToChildren'
@ -135,7 +131,7 @@ import { TextManager } from './managers/TextManager'
import { TickManager } from './managers/TickManager'
import { UserPreferencesManager } from './managers/UserPreferencesManager'
import { WatermarkManager } from './managers/WatermarkManager'
import { ShapeUtil, TLResizeMode, TLShapeUtilConstructor } from './shapes/ShapeUtil'
import { ShapeUtil, TLResizeMode } from './shapes/ShapeUtil'
import { RootState } from './tools/RootState'
import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
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.
*/
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.
*/
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.
*/

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

@ -6,7 +6,6 @@
/// <reference types="react" />
import { ArrayOfValidator } from '@tldraw/editor';
import { BaseBoxShapeTool } from '@tldraw/editor';
import { BaseBoxShapeUtil } from '@tldraw/editor';
import { BindingOnChangeOptions } from '@tldraw/editor';
@ -18,11 +17,9 @@ import { Box } from '@tldraw/editor';
import { Circle2d } from '@tldraw/editor';
import { ComponentType } from 'react';
import { CubicSpline2d } from '@tldraw/editor';
import { DictValidator } from '@tldraw/editor';
import { Editor } from '@tldraw/editor';
import { EMBED_DEFINITIONS } from '@tldraw/editor';
import { EmbedDefinition } from '@tldraw/editor';
import { EnumStyleProp } from '@tldraw/editor';
import { Geometry2d } from '@tldraw/editor';
import { Group2d } from '@tldraw/editor';
import { HandleSnapGeometry } from '@tldraw/editor';
@ -50,7 +47,6 @@ import { SharedStyle } from '@tldraw/editor';
import { StateNode } from '@tldraw/editor';
import { StyleProp } from '@tldraw/editor';
import { SvgExportContext } from '@tldraw/editor';
import { T } from '@tldraw/editor';
import { TLAnyBindingUtilConstructor } from '@tldraw/editor';
import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
import { TLArrowBinding } from '@tldraw/editor';
@ -71,7 +67,6 @@ import { TLDefaultVerticalAlignStyle } from '@tldraw/editor';
import { TldrawEditorBaseProps } from '@tldraw/editor';
import { TldrawEditorStoreProps } from '@tldraw/editor';
import { TLDrawShape } from '@tldraw/editor';
import { TLDrawShapeSegment } from '@tldraw/editor';
import { TLEditorComponents } from '@tldraw/editor';
import { TLEditorSnapshot } from '@tldraw/editor';
import { TLEmbedShape } from '@tldraw/editor';
@ -113,10 +108,8 @@ import { TLSvgOptions } from '@tldraw/editor';
import { TLTextShape } from '@tldraw/editor';
import { TLVideoShape } from '@tldraw/editor';
import { UnknownRecord } from '@tldraw/editor';
import { Validator } from '@tldraw/editor';
import { Vec } from '@tldraw/editor';
import { VecLike } from '@tldraw/editor';
import { VecModel } from '@tldraw/editor';
// @public (undocumented)
export interface ActionsProviderProps {
@ -226,22 +219,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
// (undocumented)
onTranslateStart: TLOnTranslateStartHandler<TLArrowShape>;
// (undocumented)
static props: {
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>;
};
static props: RecordProps<TLArrowShape>;
// (undocumented)
toSvg(shape: TLArrowShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented)
@ -300,12 +278,7 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
// (undocumented)
onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape>;
// (undocumented)
static props: {
assetId: T.Validator<null | TLAssetId>;
h: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
static props: RecordProps<TLBookmarkShape>;
// (undocumented)
static type: "bookmark";
}
@ -397,7 +370,7 @@ export const DefaultActionsMenu: NamedExoticComponent<TLUiActionsMenuProps>;
export function DefaultActionsMenuContent(): JSX_2.Element;
// @public (undocumented)
export const defaultBindingUtils: TLAnyBindingUtilConstructor[];
export const defaultBindingUtils: readonly [typeof ArrowBindingUtil];
// @public (undocumented)
const DefaultContextMenu: NamedExoticComponent<TLUiContextMenuProps>;
@ -456,10 +429,10 @@ export const DefaultQuickActions: NamedExoticComponent<TLUiQuickActionsProps>;
export function DefaultQuickActionsContent(): JSX_2.Element | undefined;
// @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)
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)
export function DefaultSharePanel(): JSX_2.Element;
@ -483,7 +456,7 @@ export interface DefaultToolbarProps {
}
// @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)
export function DefaultTopPanel(): JSX_2.Element;
@ -548,17 +521,7 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
// (undocumented)
onResize: TLOnResizeHandler<TLDrawShape>;
// (undocumented)
static props: {
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">;
};
static props: RecordProps<TLDrawShape>;
// (undocumented)
toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented)
@ -603,11 +566,7 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
// (undocumented)
onResize: TLOnResizeHandler<TLEmbedShape>;
// (undocumented)
static props: {
h: Validator<number>;
url: Validator<string>;
w: Validator<number>;
};
static props: RecordProps<TLEmbedShape>;
// (undocumented)
static type: "embed";
}
@ -724,11 +683,7 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
// (undocumented)
onResize: TLOnResizeHandler<any>;
// (undocumented)
static props: {
h: Validator<number>;
name: Validator<string>;
w: Validator<number>;
};
static props: RecordProps<TLFrameShape>;
// (undocumented)
providesBackgroundForChildren(): boolean;
// (undocumented)
@ -869,23 +824,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
// (undocumented)
onResize: TLOnResizeHandler<TLGeoShape>;
// (undocumented)
static props: {
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>;
};
static props: RecordProps<TLGeoShape>;
// (undocumented)
toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented)
@ -1000,14 +939,7 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
// (undocumented)
onResize: TLOnResizeHandler<TLHighlightShape>;
// (undocumented)
static props: {
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">;
};
static props: RecordProps<TLHighlightShape>;
// (undocumented)
toBackgroundSvg(shape: TLHighlightShape): JSX_2.Element;
// (undocumented)
@ -1042,19 +974,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
// (undocumented)
onResize: TLOnResizeHandler<any>;
// (undocumented)
static props: {
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>;
};
static props: RecordProps<TLImageShape>;
// (undocumented)
toSvg(shape: TLImageShape): Promise<JSX_2.Element | null>;
// (undocumented)
@ -1129,19 +1049,7 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
// (undocumented)
onResize: TLOnResizeHandler<TLLineShape>;
// (undocumented)
static props: {
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">;
};
static props: RecordProps<TLLineShape>;
// (undocumented)
toSvg(shape: TLLineShape): JSX_2.Element;
// (undocumented)
@ -1244,18 +1152,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
// (undocumented)
onEditEnd: TLOnEditEndHandler<TLNoteShape>;
// (undocumented)
static props: {
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">;
};
static props: RecordProps<TLNoteShape>;
// (undocumented)
toSvg(shape: TLNoteShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented)
@ -1552,16 +1449,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
// (undocumented)
onResize: TLOnResizeHandler<TLTextShape>;
// (undocumented)
static props: {
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>;
};
static props: RecordProps<TLTextShape>;
// (undocumented)
toSvg(shape: TLTextShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented)
@ -3383,14 +3271,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
static props: {
assetId: Validator<TLAssetId | null>;
h: Validator<number>;
playing: Validator<boolean>;
time: Validator<number>;
url: Validator<string>;
w: Validator<number>;
};
static props: RecordProps<TLVideoShape>;
// (undocumented)
toSvg(shape: TLVideoShape): JSX_2.Element;
// (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'
/** @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,
ArrowShapeTool,
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 { BookmarkShapeUtil } from './shapes/bookmark/BookmarkShapeUtil'
import { DrawShapeUtil } from './shapes/draw/DrawShapeUtil'
@ -13,7 +12,7 @@ import { TextShapeUtil } from './shapes/text/TextShapeUtil'
import { VideoShapeUtil } from './shapes/video/VideoShapeUtil'
/** @public */
export const defaultShapeUtils: TLAnyShapeUtilConstructor[] = [
export const defaultShapeUtils = [
TextShapeUtil,
BookmarkShapeUtil,
DrawShapeUtil,
@ -26,4 +25,4 @@ export const defaultShapeUtils: TLAnyShapeUtilConstructor[] = [
EmbedShapeUtil,
ImageShapeUtil,
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'
/** @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;
// @public (undocumented)
export const arrowShapeProps: {
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>;
};
export const arrowShapeProps: RecordProps<TLArrowShape>;
// @public
export const assetIdValidator: T.Validator<TLAssetId>;
@ -75,12 +60,7 @@ export const bindingIdValidator: T.Validator<TLBindingId>;
export const bookmarkShapeMigrations: TLPropsMigrations;
// @public (undocumented)
export const bookmarkShapeProps: {
assetId: T.Validator<TLAssetId | null>;
h: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
export const bookmarkShapeProps: RecordProps<TLBookmarkShape>;
// @public
export interface BoxModel {
@ -95,7 +75,7 @@ export interface BoxModel {
}
// @public (undocumented)
export const boxModelValidator: T.Validator<BoxModel>;
export const boxModelValidator: T.ObjectValidator<BoxModel>;
// @public (undocumented)
export const CameraRecordType: RecordType<TLCamera, never>;
@ -214,7 +194,58 @@ export const DefaultHorizontalAlignStyle: EnumStyleProp<"end-legacy" | "end" | "
// @public (undocumented)
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)
@ -233,17 +264,7 @@ export const DocumentRecordType: RecordType<TLDocument, never>;
export const drawShapeMigrations: TLPropsMigrations;
// @public (undocumented)
export const drawShapeProps: {
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">;
};
export const drawShapeProps: RecordProps<TLDrawShape>;
// @public (undocumented)
export const EMBED_DEFINITIONS: readonly [{
@ -502,11 +523,7 @@ export const embedShapePermissionDefaults: {
};
// @public (undocumented)
export const embedShapeProps: {
h: T.Validator<number>;
url: T.Validator<string>;
w: T.Validator<number>;
};
export const embedShapeProps: RecordProps<TLEmbedShape>;
// @public
export class EnumStyleProp<T> extends StyleProp<T> {
@ -520,11 +537,7 @@ export class EnumStyleProp<T> extends StyleProp<T> {
export const frameShapeMigrations: TLPropsMigrations;
// @public (undocumented)
export const frameShapeProps: {
h: T.Validator<number>;
name: T.Validator<string>;
w: T.Validator<number>;
};
export const frameShapeProps: RecordProps<TLFrameShape>;
// @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">;
@ -533,23 +546,7 @@ export const GeoShapeGeoStyle: EnumStyleProp<"arrow-down" | "arrow-left" | "arro
export const geoShapeMigrations: TLPropsMigrations;
// @public (undocumented)
export const geoShapeProps: {
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>;
};
export const geoShapeProps: RecordProps<TLGeoShape>;
// @public (undocumented)
export function getDefaultColorTheme(opts: {
@ -572,41 +569,19 @@ export const groupShapeProps: RecordProps<TLGroupShape>;
export const highlightShapeMigrations: TLPropsMigrations;
// @public (undocumented)
export const highlightShapeProps: {
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">;
};
export const highlightShapeProps: RecordProps<TLHighlightShape>;
// @public (undocumented)
export function idValidator<Id extends RecordId<UnknownRecord>>(prefix: Id['__type__']['typeName']): T.Validator<Id>;
// @public (undocumented)
export const ImageShapeCrop: T.ObjectValidator<{
bottomRight: VecModel;
topLeft: VecModel;
}>;
export const ImageShapeCrop: T.ObjectValidator<TLImageShapeCrop>;
// @public (undocumented)
export const imageShapeMigrations: TLPropsMigrations;
// @public (undocumented)
export const imageShapeProps: {
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>;
};
export const imageShapeProps: RecordProps<TLImageShape>;
// @public (undocumented)
export const InstancePageStateRecordType: RecordType<TLInstancePageState, "pageId">;
@ -747,19 +722,7 @@ export const LANGUAGES: readonly [{
export const lineShapeMigrations: TLPropsMigrations;
// @public (undocumented)
export const lineShapeProps: {
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">;
};
export const lineShapeProps: RecordProps<TLLineShape>;
// @public (undocumented)
export const LineShapeSplineStyle: EnumStyleProp<"cubic" | "line">;
@ -768,18 +731,7 @@ export const LineShapeSplineStyle: EnumStyleProp<"cubic" | "line">;
export const noteShapeMigrations: TLPropsMigrations;
// @public (undocumented)
export const noteShapeProps: {
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">;
};
export const noteShapeProps: RecordProps<TLNoteShape>;
// @public (undocumented)
export const opacityValidator: T.Validator<number>;
@ -828,7 +780,7 @@ export interface SchemaPropsInfo {
}
// @public (undocumented)
export const scribbleValidator: T.Validator<TLScribble>;
export const scribbleValidator: T.ObjectValidator<TLScribble>;
// @public (undocumented)
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;
// @public (undocumented)
export const textShapeProps: {
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>;
};
export const textShapeProps: RecordProps<TLTextShape>;
// @public
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>;
// @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)
export type TLAsset = TLBookmarkAsset | TLImageAsset | TLVideoAsset;
@ -1044,7 +1016,16 @@ export type TLBookmarkAsset = TLBaseAsset<'bookmark', {
export type TLBookmarkShape = TLBaseShape<'bookmark', TLBookmarkShapeProps>;
// @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
export interface TLCamera extends BaseRecord<'camera', TLCameraId> {
@ -1152,7 +1133,26 @@ export const TLDOCUMENT_ID: RecordId<TLDocument>;
export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>;
// @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)
export interface TLDrawShapeSegment {
@ -1171,27 +1171,74 @@ export type TLEmbedShapePermissions = {
};
// @public (undocumented)
export type TLEmbedShapeProps = RecordPropsType<typeof embedShapeProps>;
export interface TLEmbedShapeProps {
// (undocumented)
h: number;
// (undocumented)
url: string;
// (undocumented)
w: number;
}
// @public (undocumented)
export type TLFrameShape = TLBaseShape<'frame', TLFrameShapeProps>;
// @public (undocumented)
export type TLFrameShapeProps = RecordPropsType<typeof frameShapeProps>;
export interface TLFrameShapeProps {
// (undocumented)
h: number;
// (undocumented)
name: string;
// (undocumented)
w: number;
}
// @public (undocumented)
export type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>;
// @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)
export type TLGroupShape = TLBaseShape<'group', TLGroupShapeProps>;
// @public (undocumented)
export type TLGroupShapeProps = {
[key in never]: undefined;
};
export interface TLGroupShapeProps {
}
// @public
export interface TLHandle {
@ -1215,7 +1262,20 @@ export type TLHandleType = SetValue<typeof TL_HANDLE_TYPES>;
export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>;
// @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
export type TLImageAsset = TLBaseAsset<'image', {
@ -1232,10 +1292,32 @@ export type TLImageAsset = TLBaseAsset<'image', {
export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>;
// @public (undocumented)
export type TLImageShapeCrop = T.TypeOf<typeof ImageShapeCrop>;
export interface TLImageShapeCrop {
// (undocumented)
bottomRight: VecModel;
// (undocumented)
topLeft: VecModel;
}
// @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
export interface TLInstance extends BaseRecord<'instance', TLInstanceId> {
@ -1383,13 +1465,62 @@ export type TLLanguage = (typeof LANGUAGES)[number];
export type TLLineShape = TLBaseShape<'line', TLLineShapeProps>;
// @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)
export type TLNoteShape = TLBaseShape<'note', TLNoteShapeProps>;
// @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)
export type TLOpacityType = number;
@ -1514,7 +1645,24 @@ export type TLStoreSnapshot = StoreSnapshot<TLRecord>;
export type TLTextShape = TLBaseShape<'text', TLTextShapeProps>;
// @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
export type TLUnknownBinding = TLBaseBinding<string, object>;
@ -1537,7 +1685,20 @@ export type TLVideoAsset = TLBaseAsset<'video', {
export type TLVideoShape = TLBaseShape<'video', TLVideoShapeProps>;
// @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
export interface VecModel {
@ -1550,20 +1711,13 @@ export interface VecModel {
}
// @public (undocumented)
export const vecModelValidator: T.Validator<VecModel>;
export const vecModelValidator: T.ObjectValidator<VecModel>;
// @public (undocumented)
export const videoShapeMigrations: TLPropsMigrations;
// @public (undocumented)
export const videoShapeProps: {
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>;
};
export const videoShapeProps: RecordProps<TLVideoShape>;
// (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>
/** @public */
export const defaultShapeSchemas: { [T in TLDefaultShape['type']]: SchemaPropsInfo } = {
export const defaultShapeSchemas = {
arrow: { migrations: arrowShapeMigrations, props: arrowShapeProps },
bookmark: { migrations: bookmarkShapeMigrations, props: bookmarkShapeProps },
draw: { migrations: drawShapeMigrations, props: drawShapeProps },
@ -64,12 +64,12 @@ export const defaultShapeSchemas: { [T in TLDefaultShape['type']]: SchemaPropsIn
note: { migrations: noteShapeMigrations, props: noteShapeProps },
text: { migrations: textShapeMigrations, props: textShapeProps },
video: { migrations: videoShapeMigrations, props: videoShapeProps },
}
} satisfies { [T in TLDefaultShape['type']]: SchemaPropsInfo }
/** @public */
export const defaultBindingSchemas: { [T in TLDefaultBinding['type']]: SchemaPropsInfo } = {
export const defaultBindingSchemas = {
arrow: { migrations: arrowBindingMigrations, props: arrowBindingProps },
}
} satisfies { [T in TLDefaultBinding['type']]: SchemaPropsInfo }
/**
* 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,
geoShapeProps,
type TLGeoShape,
type TLGeoShapeGeoStyle,
type TLGeoShapeProps,
} from './shapes/TLGeoShape'
export {
@ -197,7 +198,9 @@ export {
lineShapeMigrations,
lineShapeProps,
type TLLineShape,
type TLLineShapePoint,
type TLLineShapeProps,
type TLLineShapeSplineStyle,
} from './shapes/TLLineShape'
export {
noteShapeMigrations,

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

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

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

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

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

@ -22,14 +22,14 @@ export interface VecModel {
}
/** @public */
export const vecModelValidator: T.Validator<VecModel> = T.object({
export const vecModelValidator: T.ObjectValidator<VecModel> = T.object({
x: T.number,
y: T.number,
z: T.number.optional(),
})
/** @public */
export const boxModelValidator: T.Validator<BoxModel> = T.object({
export const boxModelValidator: T.ObjectValidator<BoxModel> = T.object({
x: T.number,
y: 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 { createBindingId } from '../records/TLBinding'
import { TLShapeId, createShapePropsMigrationIds } from '../records/TLShape'
import { RecordPropsType, TLPropsMigration, createPropsMigration } from '../recordsWithProps'
import { RecordProps, TLPropsMigration, createPropsMigration } from '../recordsWithProps'
import { StyleProp } from '../styles/StyleProp'
import { DefaultColorStyle, DefaultLabelColorStyle } from '../styles/TLColorStyle'
import { DefaultDashStyle } from '../styles/TLDashStyle'
import { DefaultFillStyle } from '../styles/TLFillStyle'
import { DefaultFontStyle } from '../styles/TLFontStyle'
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
import {
DefaultColorStyle,
DefaultLabelColorStyle,
TLDefaultColorStyle,
} 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'
const arrowheadTypes = [
@ -41,7 +45,28 @@ export const ArrowShapeArrowheadEndStyle = StyleProp.defineEnum('tldraw:arrowhea
export type TLArrowShapeArrowheadStyle = T.TypeOf<typeof ArrowShapeArrowheadStartStyle>
/** @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,
color: DefaultColorStyle,
fill: DefaultFillStyle,
@ -58,12 +83,6 @@ export const arrowShapeProps = {
scale: T.nonZeroNumber,
}
/** @public */
export type TLArrowShapeProps = RecordPropsType<typeof arrowShapeProps>
/** @public */
export type TLArrowShape = TLBaseShape<'arrow', TLArrowShapeProps>
export const arrowShapeVersions = createShapePropsMigrationIds('arrow', {
AddLabelColor: 1,
AddIsPrecise: 2,

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

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

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

@ -1,11 +1,11 @@
import { T } from '@tldraw/validate'
import { VecModel, vecModelValidator } from '../misc/geometry-types'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps'
import { DefaultColorStyle } from '../styles/TLColorStyle'
import { DefaultDashStyle } from '../styles/TLDashStyle'
import { DefaultFillStyle } from '../styles/TLFillStyle'
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
import { RecordProps } from '../recordsWithProps'
import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
import { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'
import { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'
import { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'
import { TLBaseShape } from './TLBaseShape'
/** @public */
@ -14,13 +14,30 @@ export interface TLDrawShapeSegment {
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'),
points: T.arrayOf(vecModelValidator),
})
/** @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,
fill: DefaultFillStyle,
dash: DefaultDashStyle,
@ -32,12 +49,6 @@ export const drawShapeProps = {
scale: T.nonZeroNumber,
}
/** @public */
export type TLDrawShapeProps = RecordPropsType<typeof drawShapeProps>
/** @public */
export type TLDrawShape = TLBaseShape<'draw', TLDrawShapeProps>
const Versions = createShapePropsMigrationIds('draw', {
AddInPen: 1,
AddScale: 2,

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

@ -1,6 +1,6 @@
import { T } from '@tldraw/validate'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps'
import { RecordProps } from '../recordsWithProps'
import { TLBaseShape } from './TLBaseShape'
// 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 }
/** @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,
h: T.nonZeroNumber,
url: T.string,
}
/** @public */
export type TLEmbedShapeProps = RecordPropsType<typeof embedShapeProps>
/** @public */
export type TLEmbedShape = TLBaseShape<'embed', TLEmbedShapeProps>
/** @public */
export interface EmbedDefinition {
readonly type: string

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

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

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

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

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

@ -3,7 +3,8 @@ import { RecordProps } from '../recordsWithProps'
import { TLBaseShape } from './TLBaseShape'
/** @public */
export type TLGroupShapeProps = { [key in never]: undefined }
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface TLGroupShapeProps {}
/** @public */
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 { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'
import { RecordPropsType } from '../recordsWithProps'
import { DefaultColorStyle } from '../styles/TLColorStyle'
import { DefaultSizeStyle } from '../styles/TLSizeStyle'
import { RecordProps } from '../recordsWithProps'
import { DefaultColorStyle, TLDefaultColorStyle } from '../styles/TLColorStyle'
import { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'
import { TLBaseShape } from './TLBaseShape'
import { DrawShapeSegment } from './TLDrawShape'
import { DrawShapeSegment, TLDrawShapeSegment } from './TLDrawShape'
/** @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,
size: DefaultSizeStyle,
segments: T.arrayOf(DrawShapeSegment),
@ -22,12 +35,6 @@ const Versions = createShapePropsMigrationIds('highlight', {
export { Versions as highlightShapeVersions }
/** @public */
export type TLHighlightShapeProps = RecordPropsType<typeof highlightShapeProps>
/** @public */
export type TLHighlightShape = TLBaseShape<'highlight', TLHighlightShapeProps>
/** @public */
export const highlightShapeMigrations = createShapePropsMigrationSequence({
sequence: [

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

@ -1,20 +1,40 @@
import { T } from '@tldraw/validate'
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 { RecordPropsType } from '../recordsWithProps'
import { RecordProps } from '../recordsWithProps'
import { TLBaseShape } from './TLBaseShape'
/** @public */
export const ImageShapeCrop = T.object({
export interface TLImageShapeCrop {
topLeft: VecModel
bottomRight: VecModel
}
/** @public */
export const ImageShapeCrop: T.ObjectValidator<TLImageShapeCrop> = T.object({
topLeft: vecModelValidator,
bottomRight: vecModelValidator,
})
/** @public */
export type TLImageShapeCrop = T.TypeOf<typeof ImageShapeCrop>
/** @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,
h: T.nonZeroNumber,
playing: T.boolean,
@ -25,12 +45,6 @@ export const imageShapeProps = {
flipY: T.boolean,
}
/** @public */
export type TLImageShapeProps = RecordPropsType<typeof imageShapeProps>
/** @public */
export type TLImageShape = TLBaseShape<'image', TLImageShapeProps>
const Versions = createShapePropsMigrationIds('image', {
AddUrlProp: 1,
AddCropProp: 2,

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

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

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

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

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

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

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

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