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

fix migration exports (#3586)

Browse source 
We're missing the export for `createShapePropsMigrationIds`, so lets add
it. This also fixes some other bits that were used in examples but not
exported properly from tldraw.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix

### Release Notes

- Expose `createShapePropsMigrationIds`, `defaultEditorAssetUrls`,
`PORTRAIT_BREAKPOINT`, `useDefaultColorTheme`, & `getPerfectDashProps`
This commit is contained in:
alex 2024-04-24 15:36:08 +01:00 committed by GitHub
parent a319ad9497
commit bfc8b6a901
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 782 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.eslintrc.js
View file

@ -46,12 +46,12 @@ module.exports = {
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error',
'import/no-extraneous-dependencies': 'error',
'import/no-internal-modules': ['error', { forbid: ['@tldraw/*/**', 'tldraw/**'] }],
'@typescript-eslint/consistent-type-exports': [
'error',
{ fixMixedExportsWithInlineTypeSpecifier: true },
],
'local/no-export-star': 'error',
'local/no-internal-imports': 'error',
'no-only-tests/no-only-tests': 'error',
'no-restricted-syntax': [
'error',
@ -99,7 +99,6 @@ module.exports = {
{
files: ['apps/examples/**/*'],
rules: {
'import/no-internal-modules': 'off',
'no-restricted-syntax': 'off',
},
},

1
apps/dotcom/src/utils/assetUrls.ts
View file

@ -1,4 +1,3 @@
// eslint-disable-next-line import/no-internal-modules
import { getAssetUrlsByImport } from '@tldraw/assets/imports.vite'
export const assetUrls = getAssetUrlsByImport()

3
apps/examples/src/examples/custom-config/CardShape/card-shape-migrations.ts
View file

@ -1,5 +1,4 @@
import { createShapePropsMigrationIds } from '@tldraw/tlschema/src/records/TLShape'
import { createShapePropsMigrationSequence } from 'tldraw'
import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from 'tldraw'
const versions = createShapePropsMigrationIds(
// this must match the shape type in the shape definition

2
apps/examples/src/examples/exploded/ExplodedExample.tsx
View file

@ -9,12 +9,12 @@ import {
TldrawSelectionBackground,
TldrawSelectionForeground,
TldrawUi,
defaultEditorAssetUrls,
defaultShapeTools,
defaultShapeUtils,
defaultTools,
usePreloadAssets,
} from 'tldraw'
import { defaultEditorAssetUrls } from 'tldraw/src/lib/utils/static-assets/assetUrls'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file!

2
apps/examples/src/examples/image-annotator/ImageAnnotationEditor.tsx
View file

@ -3,6 +3,7 @@ import {
AssetRecordType,
Box,
Editor,
PORTRAIT_BREAKPOINT,
SVGContainer,
TLImageShape,
TLShapeId,
@ -16,7 +17,6 @@ import {
useBreakpoint,
useEditor,
} from 'tldraw'
import { PORTRAIT_BREAKPOINT } from 'tldraw/src/lib/ui/constants'
import { AnnotatorImage } from './types'
// TODO:

2
apps/examples/src/examples/pdf-editor/PdfEditor.tsx
View file

@ -1,6 +1,7 @@
import { useCallback, useEffect, useMemo } from 'react'
import {
Box,
PORTRAIT_BREAKPOINT,
SVGContainer,
TLImageShape,
TLShapeId,
@ -15,7 +16,6 @@ import {
useBreakpoint,
useEditor,
} from 'tldraw'
import { PORTRAIT_BREAKPOINT } from 'tldraw/src/lib/ui/constants'
import { ExportPdfButton } from './ExportPdfButton'
import { Pdf } from './PdfPicker'

120
apps/examples/src/examples/shape-with-migrations/ShapeWithMigrationsExample.tsx
View file

@ -6,6 +6,8 @@ import {
TLOnResizeHandler,
TLStoreSnapshot,
Tldraw,
createShapePropsMigrationIds,
createShapePropsMigrationSequence,
resizeBox,
} from 'tldraw'
import 'tldraw/tldraw.css'
@ -22,6 +24,31 @@ export type IMyShape = TLBaseShape<
}
>
// [1]
const versions = createShapePropsMigrationIds(
// this must match the shape type in the shape definition
'myshape',
{
AddColor: 1,
}
)
// [2]
export const cardShapeMigrations = createShapePropsMigrationSequence({
sequence: [
{
id: versions.AddColor,
up(props) {
// it is safe to mutate the props object here
props.color = 'lightblue'
},
down(props) {
delete props.color
},
},
],
})
export class MigratedShapeUtil extends BaseBoxShapeUtil<IMyShape> {
static override type = 'myshape' as const
@ -31,31 +58,8 @@ export class MigratedShapeUtil extends BaseBoxShapeUtil<IMyShape> {
color: T.string,
}
// [1]
static override migrations = {
firstVersion: 0,
currentVersion: 1,
migrators: {
1: {
up(shape: IMyShape) {
return {
...shape,
props: {
...shape.props,
color: 'lightblue',
},
}
},
down(shape: IMyShape) {
const { color: _, ...propsWithoutColor } = shape.props
return {
...shape,
props: propsWithoutColor,
}
},
},
},
}
// [3]
static override migrations = cardShapeMigrations
getDefaultProps(): IMyShape['props'] {
return {
@ -104,33 +108,36 @@ export default function ShapeWithMigrationsExample() {
/*
Introduction:
Sometimes you'll want to update the way a shape works in your application without
breaking older versions of the shape that a user may have stored or persisted in
memory.
Sometimes you'll want to update the way a shape works in your application without breaking older
versions of the shape that a user may have stored or persisted in memory.
This example shows how you can use our migrations system to upgrade (or downgrade)
user's data between different versions. Most of the code above is general "custom
shape" code—see our custom shape example for more details.
This example shows how you can use our migrations system to upgrade (or downgrade) user's data
between different versions. Most of the code above is general "custom shape" code—see our custom
shape example for more details.
[1]
To define migrations, we can override the migrations property of our shape util. Each migration
had two parts: an `up` migration and `down` migration. In this case, the `up` migration adds
the `color` prop to the shape, and the `down` migration removes it.
[1] First, we need IDs for each migration. List each change with its version number. Once you've
added a migration, it should not change again.
In some cases (mainly in multiplayer sessions) a peer or server may need to take a later
version of a shape and migrate it down to an older version—in this case, it would run the
down migrations in order to get it to the needed version.
[2] Next, we create a migration sequence. This is where we actually write our migration logic. Each
migration had three parts: an `id` (created in [1]), an `up` migration and `down` migration. In this
case, the `up` migration adds the `color` prop to the shape, and the `down` migration removes it.
In some cases (mainly in multiplayer sessions) a peer or server may need to take a later version of
a shape and migrate it down to an older version—in this case, it would run the down migrations in
order to get it to the needed version.
[3] Finally, we add our migrations to the ShapeUtil. This tells tldraw about the migrations so they
can be used with your shapes.
How it works:
Each time the editor's store creates a snapshot (`editor.store.createSnapshot`), it
serializes all of the records (the snapshot's `store`) as well as versions of each
record that it contains (the snapshot's `scena`). When the editor loads a snapshot,
it compares its current schema with the snapshot's schema to determine which migrations
to apply to each record.
Each time the editor's store creates a snapshot (`editor.store.createSnapshot`), it serializes all
of the records (the snapshot's `store`) as well as versions of each record that it contains (the
snapshot's `scena`). When the editor loads a snapshot, it compares its current schema with the
snapshot's schema to determine which migrations to apply to each record.
In this example, we have a snapshot (snapshot.json) that we created in version 0,
however our shape now has a 'color' prop that was added in version 1.
In this example, we have a snapshot (snapshot.json) that we created in version 0, however our shape
now has a 'color' prop that was added in version 1.
The snapshot looks something like this:
@ -144,19 +151,13 @@ The snapshot looks something like this:
"h": 300
},
},
},
"schema": {
...,
"recordVersions": {
"sequences": {
...,
"shape": {
"version": 3,
"subTypeKey": "type",
"subTypeVersions": {
...,
"myshape": 0
}
}
}
"com.tldraw.shape.arrow": 4,
"com.tldraw.shape.myshape": 0
}
}
}
@ -166,9 +167,8 @@ Note that the shape in the snapshot doesn't have a 'color' prop.
Note also that the schema's version for this shape is 0.
When the editor loads the snapshot, it will compare the serialzied schema's version with
its current schema's version for the shape, which is 1 as defined in our shape's migrations.
Since the serialized version is older than its current version, it will use our migration
to bring it up to date: it will run the migration's `up` function, which will add the 'color'
prop to the shape.
When the editor loads the snapshot, it will compare the serialzied schema's version with its current
schema's version for the shape, which is 1 as defined in our shape's migrations. Since the
serialized version is older than its current version, it will use our migration to bring it up to
date: it will run the migration's `up` function, which will add the 'color' prop to the shape.
*/

2
apps/examples/src/examples/shape-with-tldraw-styles/ShapeWithTldrawStylesExample.tsx
View file

@ -8,8 +8,8 @@ import {
TLDefaultColorStyle,
TLDefaultSizeStyle,
Tldraw,
useDefaultColorTheme,
} from 'tldraw'
import { useDefaultColorTheme } from 'tldraw/src/lib/shapes/shared/ShapeFill'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file!

2
apps/examples/src/examples/slides/SlideShapeUtil.tsx
View file

@ -8,10 +8,10 @@ import {
T,
TLBaseShape,
TLOnResizeHandler,
getPerfectDashProps,
resizeBox,
useValue,
} from 'tldraw'
import { getPerfectDashProps } from 'tldraw/src/lib/shapes/shared/getPerfectDashProps'
import { moveToSlide, useSlides } from './useSlides'
export type SlideShape = TLBaseShape<

2
apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx
View file

@ -22,9 +22,9 @@ import {
ZERO_INDEX_KEY,
resizeBox,
structuredClone,
useDefaultColorTheme,
vecModelValidator,
} from 'tldraw'
import { useDefaultColorTheme } from 'tldraw/src/lib/shapes/shared/ShapeFill'
import { getSpeechBubbleVertices, getTailIntersectionPoint } from './helpers'
// Copied from tldraw/tldraw

2
apps/examples/src/misc/EndToEndApi.tsx
View file

@ -1,4 +1,4 @@
import { TLExportType } from 'tldraw/src/lib/utils/export/exportAs'
import { TLExportType } from 'tldraw'
export interface EndToEndApi {
exportAsSvg: () => void

4
apps/vscode/editor/src/app.tsx
View file

@ -1,6 +1,3 @@
// eslint-disable-next-line import/no-internal-modules
import 'tldraw/tldraw.css'
// eslint-disable-next-line import/no-internal-modules
import { getAssetUrlsByImport } from '@tldraw/assets/imports'
import { useCallback, useEffect, useMemo, useState } from 'react'
import {
@ -13,6 +10,7 @@ import {
TldrawUiMenuGroup,
setRuntimeOverrides,
} from 'tldraw'
import 'tldraw/tldraw.css'
import { VscodeMessage } from '../../messages'
import '../public/index.css'
import { ChangeResponder } from './ChangeResponder'

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

@ -63,6 +63,8 @@ import { TLCancelEvent } from '@tldraw/editor';
import { TLClickEvent } from '@tldraw/editor';
import { TLClickEventInfo } from '@tldraw/editor';
import { TLDefaultColorTheme } from '@tldraw/editor';
import { TLDefaultColorThemeColor } from '@tldraw/editor';
import { TLDefaultDashStyle } from '@tldraw/editor';
import { TLDefaultFillStyle } from '@tldraw/editor';
import { TLDefaultFontStyle } from '@tldraw/editor';
import { TLDefaultHorizontalAlignStyle } from '@tldraw/editor';
@ -372,6 +374,9 @@ export function DefaultDebugMenu({ children }: TLUiDebugMenuProps): JSX_2.Elemen
// @public (undocumented)
export function DefaultDebugMenuContent(): JSX_2.Element;
// @public (undocumented)
export let defaultEditorAssetUrls: TLEditorAssetUrls;
// @public (undocumented)
export function DefaultHelperButtons({ children }: TLUiHelperButtonsProps): JSX_2.Element;
@ -835,6 +840,19 @@ export function getEmbedInfo(inputUrl: string): TLEmbedResult;
// @public (undocumented)
export function getOccludedChildren(editor: Editor, parent: TLShape): TLShapeId[];
// @public (undocumented)
export function getPerfectDashProps(totalLength: number, strokeWidth: number, opts?: Partial<{
closed: boolean;
end: 'none' | 'outset' | 'skip';
lengthRatio: number;
snap: number;
start: 'none' | 'outset' | 'skip';
style: TLDefaultDashStyle;
}>): {
strokeDasharray: string;
strokeDashoffset: string;
};
// @public (undocumented)
export function getSvgAsImage(svgString: string, isSafari: boolean, options: {
height: number;
@ -1216,6 +1234,26 @@ export function parseTldrawJsonFile({ json, schema, }: {
// @public (undocumented)
export function PasteMenuItem(): JSX_2.Element;
// @public (undocumented)
export enum PORTRAIT_BREAKPOINT {
// (undocumented)
DESKTOP = 7,
// (undocumented)
MOBILE = 4,
// (undocumented)
MOBILE_SM = 3,
// (undocumented)
MOBILE_XS = 2,
// (undocumented)
MOBILE_XXS = 1,
// (undocumented)
TABLET = 6,
// (undocumented)
TABLET_SM = 5,
// (undocumented)
ZERO = 0
}
// @public (undocumented)
export function PreferencesGroup(): JSX_2.Element;
@ -1720,6 +1758,9 @@ export type TldrawUiProps = Expand<TldrawUiBaseProps & TldrawUiContextProviderPr
// @internal (undocumented)
export const TldrawUiSlider: NamedExoticComponent<TLUiSliderProps>;
// @public (undocumented)
export type TLExportType = 'jpeg' | 'json' | 'png' | 'svg' | 'webp';
// @public (undocumented)
export interface TLUiActionItem<TransationKey extends string = string, IconType extends string = string> {
// (undocumented)
@ -2486,6 +2527,27 @@ export function useCopyAs(): (ids: TLShapeId[], format?: TLCopyType) => void;
// @public (undocumented)
export const useCurrentTranslation: () => TLUiTranslation;
// @public (undocumented)
export function useDefaultColorTheme(): {
"light-blue": TLDefaultColorThemeColor;
"light-green": TLDefaultColorThemeColor;
"light-red": TLDefaultColorThemeColor;
"light-violet": TLDefaultColorThemeColor;
background: string;
black: TLDefaultColorThemeColor;
blue: TLDefaultColorThemeColor;
green: TLDefaultColorThemeColor;
grey: TLDefaultColorThemeColor;
id: "dark" | "light";
orange: TLDefaultColorThemeColor;
red: TLDefaultColorThemeColor;
solid: string;
text: string;
violet: TLDefaultColorThemeColor;
white: TLDefaultColorThemeColor;
yellow: TLDefaultColorThemeColor;
};
// @public (undocumented)
export function useDefaultHelpers(): {
addDialog: (dialog: Omit<TLUiDialog, "id"> & {

475
packages/tldraw/api/api.json
View file

@ -3358,6 +3358,30 @@
"parameters": [],
"name": "DefaultDebugMenuContent"
},
{
"kind": "Variable",
"canonicalReference": "tldraw!defaultEditorAssetUrls:var",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "defaultEditorAssetUrls: "
},
{
"kind": "Reference",
"text": "TLEditorAssetUrls",
"canonicalReference": "tldraw!~TLEditorAssetUrls:type"
}
],
"fileUrlPath": "packages/tldraw/src/lib/utils/static-assets/assetUrls.ts",
"isReadonly": false,
"releaseTag": "Public",
"name": "defaultEditorAssetUrls",
"variableTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "Function",
"canonicalReference": "tldraw!DefaultHelperButtons:function(1)",
@ -6450,7 +6474,7 @@
{
"kind": "Reference",
"text": "TLExportType",
"canonicalReference": "tldraw!~TLExportType:type"
"canonicalReference": "tldraw!TLExportType:type"
},
{
"kind": "Content",
@ -9202,6 +9226,97 @@
],
"name": "getOccludedChildren"
},
{
"kind": "Function",
"canonicalReference": "tldraw!getPerfectDashProps:function(1)",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function getPerfectDashProps(totalLength: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ", strokeWidth: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ", opts?: "
},
{
"kind": "Reference",
"text": "Partial",
"canonicalReference": "!Partial:type"
},
{
"kind": "Content",
"text": "<{\n closed: boolean;\n end: 'none' | 'outset' | 'skip';\n lengthRatio: number;\n snap: number;\n start: 'none' | 'outset' | 'skip';\n style: "
},
{
"kind": "Reference",
"text": "TLDefaultDashStyle",
"canonicalReference": "@tldraw/tlschema!TLDefaultDashStyle:type"
},
{
"kind": "Content",
"text": ";\n}>"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "{\n strokeDasharray: string;\n strokeDashoffset: string;\n}"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/shapes/shared/getPerfectDashProps.ts",
"returnTypeTokenRange": {
"startIndex": 10,
"endIndex": 11
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "totalLength",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"isOptional": false
},
{
"parameterName": "strokeWidth",
"parameterTypeTokenRange": {
"startIndex": 3,
"endIndex": 4
},
"isOptional": false
},
{
"parameterName": "opts",
"parameterTypeTokenRange": {
"startIndex": 5,
"endIndex": 9
},
"isOptional": true
}
],
"name": "getPerfectDashProps"
},
{
"kind": "Function",
"canonicalReference": "tldraw!getSvgAsImage:function(1)",
@ -13950,6 +14065,191 @@
"parameters": [],
"name": "PasteMenuItem"
},
{
"kind": "Enum",
"canonicalReference": "tldraw!PORTRAIT_BREAKPOINT:enum",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare enum PORTRAIT_BREAKPOINT "
}
],
"fileUrlPath": "packages/tldraw/src/lib/ui/constants.ts",
"releaseTag": "Public",
"name": "PORTRAIT_BREAKPOINT",
"preserveMemberOrder": false,
"members": [
{
"kind": "EnumMember",
"canonicalReference": "tldraw!PORTRAIT_BREAKPOINT.DESKTOP:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "DESKTOP = "
},
{
"kind": "Content",
"text": "7"
}
],
"initializerTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"releaseTag": "Public",
"name": "DESKTOP"
},
{
"kind": "EnumMember",
"canonicalReference": "tldraw!PORTRAIT_BREAKPOINT.MOBILE:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "MOBILE = "
},
{
"kind": "Content",
"text": "4"
}
],
"initializerTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"releaseTag": "Public",
"name": "MOBILE"
},
{
"kind": "EnumMember",
"canonicalReference": "tldraw!PORTRAIT_BREAKPOINT.MOBILE_SM:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "MOBILE_SM = "
},
{
"kind": "Content",
"text": "3"
}
],
"initializerTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"releaseTag": "Public",
"name": "MOBILE_SM"
},
{
"kind": "EnumMember",
"canonicalReference": "tldraw!PORTRAIT_BREAKPOINT.MOBILE_XS:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "MOBILE_XS = "
},
{
"kind": "Content",
"text": "2"
}
],
"initializerTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"releaseTag": "Public",
"name": "MOBILE_XS"
},
{
"kind": "EnumMember",
"canonicalReference": "tldraw!PORTRAIT_BREAKPOINT.MOBILE_XXS:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "MOBILE_XXS = "
},
{
"kind": "Content",
"text": "1"
}
],
"initializerTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"releaseTag": "Public",
"name": "MOBILE_XXS"
},
{
"kind": "EnumMember",
"canonicalReference": "tldraw!PORTRAIT_BREAKPOINT.TABLET:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "TABLET = "
},
{
"kind": "Content",
"text": "6"
}
],
"initializerTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"releaseTag": "Public",
"name": "TABLET"
},
{
"kind": "EnumMember",
"canonicalReference": "tldraw!PORTRAIT_BREAKPOINT.TABLET_SM:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "TABLET_SM = "
},
{
"kind": "Content",
"text": "5"
}
],
"initializerTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"releaseTag": "Public",
"name": "TABLET_SM"
},
{
"kind": "EnumMember",
"canonicalReference": "tldraw!PORTRAIT_BREAKPOINT.ZERO:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "ZERO = "
},
{
"kind": "Content",
"text": "0"
}
],
"initializerTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"releaseTag": "Public",
"name": "ZERO"
}
]
},
{
"kind": "Function",
"canonicalReference": "tldraw!PreferencesGroup:function(1)",
@ -19960,6 +20260,32 @@
"endIndex": 7
}
},
{
"kind": "TypeAlias",
"canonicalReference": "tldraw!TLExportType:type",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export type TLExportType = "
},
{
"kind": "Content",
"text": "'jpeg' | 'json' | 'png' | 'svg' | 'webp'"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/utils/export/exportAs.ts",
"releaseTag": "Public",
"name": "TLExportType",
"typeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{
"kind": "Interface",
"canonicalReference": "tldraw!TLUiActionItem:interface",
@ -27339,6 +27665,151 @@
"parameters": [],
"name": "useCurrentTranslation"
},
{
"kind": "Function",
"canonicalReference": "tldraw!useDefaultColorTheme:function(1)",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function useDefaultColorTheme(): "
},
{
"kind": "Content",
"text": "{\n \"light-blue\": import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n \"light-green\": import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n \"light-red\": import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n \"light-violet\": import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n background: string;\n black: import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n blue: import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n green: import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n grey: import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n id: \"dark\" | \"light\";\n orange: import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n red: import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n solid: string;\n text: string;\n violet: import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n white: import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n yellow: import(\"@tldraw/editor\")."
},
{
"kind": "Reference",
"text": "TLDefaultColorThemeColor",
"canonicalReference": "@tldraw/tlschema!TLDefaultColorThemeColor:type"
},
{
"kind": "Content",
"text": ";\n}"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx",
"returnTypeTokenRange": {
"startIndex": 1,
"endIndex": 28
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [],
"name": "useDefaultColorTheme"
},
{
"kind": "Function",
"canonicalReference": "tldraw!useDefaultHelpers:function(1)",
@ -27625,7 +28096,7 @@
{
"kind": "Reference",
"text": "TLExportType",
"canonicalReference": "tldraw!~TLExportType:type"
"canonicalReference": "tldraw!TLExportType:type"
},
{
"kind": "Content",

10
packages/tldraw/src/index.ts
View file

@ -32,7 +32,9 @@ export { LineShapeTool } from './lib/shapes/line/LineShapeTool'
export { LineShapeUtil } from './lib/shapes/line/LineShapeUtil'
export { NoteShapeTool } from './lib/shapes/note/NoteShapeTool'
export { NoteShapeUtil } from './lib/shapes/note/NoteShapeUtil'
export { useDefaultColorTheme } from './lib/shapes/shared/ShapeFill'
export { TextLabel } from './lib/shapes/shared/TextLabel'
export { getPerfectDashProps } from './lib/shapes/shared/getPerfectDashProps'
export { TextShapeTool } from './lib/shapes/text/TextShapeTool'
export { TextShapeUtil } from './lib/shapes/text/TextShapeUtil'
export { VideoShapeUtil } from './lib/shapes/video/VideoShapeUtil'
@ -48,6 +50,7 @@ export { TldrawUi, type TldrawUiBaseProps, type TldrawUiProps } from './lib/ui/T
export { setDefaultUiAssetUrls, type TLUiAssetUrlOverrides } from './lib/ui/assetUrls'
export { OfflineIndicator } from './lib/ui/components/OfflineIndicator/OfflineIndicator'
export { Spinner } from './lib/ui/components/Spinner'
export { PORTRAIT_BREAKPOINT } from './lib/ui/constants'
export {
TldrawUiContextProvider,
type TldrawUiContextProviderProps,
@ -115,9 +118,12 @@ export {
export { getEmbedInfo } from './lib/utils/embeds/embeds'
export { copyAs } from './lib/utils/export/copyAs'
export { exportToBlob, getSvgAsImage } from './lib/utils/export/export'
export { exportAs } from './lib/utils/export/exportAs'
export { exportAs, type TLExportType } from './lib/utils/export/exportAs'
export { fitFrameToContent, removeFrame } from './lib/utils/frames/frames'
export { setDefaultEditorAssetUrls } from './lib/utils/static-assets/assetUrls'
export {
defaultEditorAssetUrls,
setDefaultEditorAssetUrls,
} from './lib/utils/static-assets/assetUrls'
export { truncateStringWithEllipsis } from './lib/utils/text/text'
export {
buildFromV1Document,

1
packages/tldraw/src/lib/shapes/shared/ShapeFill.tsx
View file

@ -18,6 +18,7 @@ export interface ShapeFillProps {
theme: TLDefaultColorTheme
}
/** @public */
export function useDefaultColorTheme() {
return getDefaultColorTheme({ isDarkMode: useIsDarkMode() })
}

1
packages/tldraw/src/lib/shapes/shared/getPerfectDashProps.ts
View file

@ -1,5 +1,6 @@
import { TLDefaultDashStyle } from '@tldraw/editor'
/** @public */
export function getPerfectDashProps(
totalLength: number,
strokeWidth: number,

1
packages/tldraw/src/lib/ui/constants.ts
View file

@ -2,6 +2,7 @@
export const PORTRAIT_BREAKPOINTS = [0, 390, 428, 468, 580, 640, 840, 1023]
// Mapping for above array -- needs to be kept in sync!
/** @public */
export enum PORTRAIT_BREAKPOINT {
ZERO = 0,
MOBILE_XXS = 1,

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

@ -142,6 +142,11 @@ export const createPresenceStateDerivation: ($user: Signal<{
// @public (undocumented)
export function createShapeId(id?: string): TLShapeId;
// @public (undocumented)
export function createShapePropsMigrationIds<S extends string, T extends Record<string, number>>(shapeType: S, ids: T): {
[k in keyof T]: `com.tldraw.shape.${S}/${T[k]}`;
};
// @public (undocumented)
export function createShapePropsMigrationSequence(migrations: TLShapePropsMigrations): TLShapePropsMigrations;

106
packages/tlschema/api/api.json
View file

@ -1114,6 +1114,112 @@
],
"name": "createShapeId"
},
{
"kind": "Function",
"canonicalReference": "@tldraw/tlschema!createShapePropsMigrationIds:function(1)",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function createShapePropsMigrationIds<S extends "
},
{
"kind": "Content",
"text": "string"
},
{
"kind": "Content",
"text": ", T extends "
},
{
"kind": "Reference",
"text": "Record",
"canonicalReference": "!Record:type"
},
{
"kind": "Content",
"text": "<string, number>"
},
{
"kind": "Content",
"text": ">(shapeType: "
},
{
"kind": "Content",
"text": "S"
},
{
"kind": "Content",
"text": ", ids: "
},
{
"kind": "Content",
"text": "T"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "{\n [k in keyof T]: `com.tldraw.shape.${S}/${T[k]}`;\n}"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tlschema/src/records/TLShape.ts",
"returnTypeTokenRange": {
"startIndex": 10,
"endIndex": 11
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "shapeType",
"parameterTypeTokenRange": {
"startIndex": 6,
"endIndex": 7
},
"isOptional": false
},
{
"parameterName": "ids",
"parameterTypeTokenRange": {
"startIndex": 8,
"endIndex": 9
},
"isOptional": false
}
],
"typeParameters": [
{
"typeParameterName": "S",
"constraintTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"defaultTypeTokenRange": {
"startIndex": 0,
"endIndex": 0
}
},
{
"typeParameterName": "T",
"constraintTokenRange": {
"startIndex": 3,
"endIndex": 5
},
"defaultTypeTokenRange": {
"startIndex": 0,
"endIndex": 0
}
}
],
"name": "createShapePropsMigrationIds"
},
{
"kind": "Function",
"canonicalReference": "@tldraw/tlschema!createShapePropsMigrationSequence:function(1)",

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

@ -52,6 +52,7 @@ export { InstancePresenceRecordType, type TLInstancePresence } from './records/T
export { type TLRecord } from './records/TLRecord'
export {
createShapeId,
createShapePropsMigrationIds,
createShapePropsMigrationSequence,
getShapePropKeysByStyle,
isShape,

44
scripts/lib/eslint-plugin.ts
View file

@ -59,4 +59,48 @@ exports.rules = {
},
defaultOptions: [],
}),
'no-internal-imports': ESLintUtils.RuleCreator.withoutDocs({
create(context) {
return {
ImportDeclaration(node) {
const path = node.source.value
const parts = path.split('/')
switch (parts[0]) {
case 'tldraw':
// 'tldraw'
if (parts.length === 1) return
// 'tldraw/**/*.css'
if (path.endsWith('.css')) return
break
case '@tldraw':
// '@tldraw/*'
if (parts.length === 2) return
// '@tldraw/**/*.css'
if (path.endsWith('.css')) return
// '@tldraw/assets/*'
if (parts[1] === 'assets' && parts.length === 3) return
break
default:
return
}
context.report({
messageId: 'internal',
node: node.source,
data: { path },
})
},
}
},
meta: {
messages: {
internal: "Don't import from internal tldraw source ({{path}})",
},
type: 'problem',
schema: [],
},
defaultOptions: [],
}),
}