@tldraw/tlschema 4.6.0-next.fecc64eee134 → 5.1.0-canary.4a807daabeda
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/index.d.ts +15 -1
- package/dist-cjs/index.js +1 -1
- package/dist-cjs/shapes/TLGeoShape.js.map +1 -1
- package/dist-cjs/styles/StyleProp.js +3 -0
- package/dist-cjs/styles/StyleProp.js.map +1 -1
- package/dist-cjs/styles/TLTheme.js.map +1 -1
- package/dist-esm/index.d.mts +15 -1
- package/dist-esm/index.mjs +1 -1
- package/dist-esm/shapes/TLGeoShape.mjs.map +1 -1
- package/dist-esm/styles/StyleProp.mjs +3 -0
- package/dist-esm/styles/StyleProp.mjs.map +1 -1
- package/package.json +5 -5
- package/src/shapes/TLGeoShape.ts +1 -1
- package/src/styles/TLTheme.ts +21 -0
package/dist-cjs/index.d.ts
CHANGED
|
@@ -6272,6 +6272,20 @@ export declare interface TLThemeDefaultColors {
|
|
|
6272
6272
|
solid: string;
|
|
6273
6273
|
cursor: string;
|
|
6274
6274
|
noteBorder: string;
|
|
6275
|
+
/** Snap indicator line color */
|
|
6276
|
+
snap: string;
|
|
6277
|
+
/** Selection outline stroke */
|
|
6278
|
+
selectionStroke: string;
|
|
6279
|
+
/** Selection handle fill (typically the background color) */
|
|
6280
|
+
selectionFill: string;
|
|
6281
|
+
/** Brush rectangle fill */
|
|
6282
|
+
brushFill: string;
|
|
6283
|
+
/** Brush rectangle stroke */
|
|
6284
|
+
brushStroke: string;
|
|
6285
|
+
/** Selected contrast color (handle fills, etc.) */
|
|
6286
|
+
selectedContrast: string;
|
|
6287
|
+
/** Laser pointer color */
|
|
6288
|
+
laser: string;
|
|
6275
6289
|
black: TLDefaultColor;
|
|
6276
6290
|
grey: TLDefaultColor;
|
|
6277
6291
|
'light-violet': TLDefaultColor;
|
|
@@ -6371,7 +6385,7 @@ export declare interface TLThemes {
|
|
|
6371
6385
|
*
|
|
6372
6386
|
* @public
|
|
6373
6387
|
*/
|
|
6374
|
-
export declare type TLThemeUiColorKeys = 'background' | 'cursor' | 'negativeSpace' | 'noteBorder' | 'solid' | 'text';
|
|
6388
|
+
export declare type TLThemeUiColorKeys = 'background' | 'brushFill' | 'brushStroke' | 'cursor' | 'laser' | 'negativeSpace' | 'noteBorder' | 'selectedContrast' | 'selectionFill' | 'selectionStroke' | 'snap' | 'solid' | 'text';
|
|
6375
6389
|
|
|
6376
6390
|
/**
|
|
6377
6391
|
* A type for an asset that is available in the editor but whose type is
|
package/dist-cjs/index.js
CHANGED
|
@@ -205,7 +205,7 @@ var import_translations = require("./translations/translations");
|
|
|
205
205
|
var import_b64Vecs = require("./misc/b64Vecs");
|
|
206
206
|
(0, import_utils.registerTldrawLibraryVersion)(
|
|
207
207
|
"@tldraw/tlschema",
|
|
208
|
-
"
|
|
208
|
+
"5.1.0-canary.4a807daabeda",
|
|
209
209
|
"cjs"
|
|
210
210
|
);
|
|
211
211
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shapes/TLGeoShape.ts"],
|
|
4
|
-
"sourcesContent": ["import { T } from '@tldraw/validate'\nimport { TLRichText, richTextValidator, toRichText } from '../misc/TLRichText'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { StyleProp } from '../styles/StyleProp'\nimport {\n\tDefaultColorStyle,\n\tDefaultLabelColorStyle,\n\tTLDefaultColorStyle,\n} from '../styles/TLColorStyle'\nimport { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'\nimport { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'\nimport { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'\nimport {\n\tDefaultHorizontalAlignStyle,\n\tTLDefaultHorizontalAlignStyle,\n} from '../styles/TLHorizontalAlignStyle'\nimport { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'\nimport {\n\tDefaultVerticalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n} from '../styles/TLVerticalAlignStyle'\nimport { TLBaseShape } from './TLBaseShape'\n\n/**\n * Style property defining the geometric shape type for geo shapes.\n * Provides a variety of built-in geometric forms including basic shapes,\n * polygons, arrows, and special shapes.\n *\n * @public\n * @example\n * ```ts\n * // Use in shape props\n * const props = {\n * geo: 'rectangle', // or 'ellipse', 'triangle', etc.\n * // other properties...\n * }\n * ```\n */\nexport const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {\n\tdefaultValue: 'rectangle',\n\tvalues: [\n\t\t'cloud',\n\t\t'rectangle',\n\t\t'ellipse',\n\t\t'triangle',\n\t\t'diamond',\n\t\t'pentagon',\n\t\t'hexagon',\n\t\t'octagon',\n\t\t'star',\n\t\t'rhombus',\n\t\t'rhombus-2',\n\t\t'oval',\n\t\t'trapezoid',\n\t\t'arrow-right',\n\t\t'arrow-left',\n\t\t'arrow-up',\n\t\t'arrow-down',\n\t\t'x-box',\n\t\t'check-box',\n\t\t'heart',\n\t],\n})\n\n/**\n * Type representing valid geometric shape styles for geo shapes.\n *\n * @public\n */\nexport type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle>\n\n/**\n * Properties for the geo shape, which renders various geometric forms with styling and text.\n *\n * @public\n */\nexport interface TLGeoShapeProps {\n\t/** Geometric shape type (rectangle, ellipse, triangle, etc.) */\n\tgeo: TLGeoShapeGeoStyle\n\t/** Dash pattern style for the shape outline */\n\tdash: TLDefaultDashStyle\n\t/** URL link associated with the shape */\n\turl: string\n\t/** Width of the shape in pixels */\n\tw: number\n\t/** Height of the shape in pixels */\n\th: number\n\t/** Additional vertical growth for text content */\n\tgrowY: number\n\t/** Scale factor applied to the shape */\n\tscale: number\n\n\t/** Color style for text label */\n\tlabelColor: TLDefaultColorStyle\n\t/** Color style for the shape outline */\n\tcolor: TLDefaultColorStyle\n\t/** Fill style for the shape interior */\n\tfill: TLDefaultFillStyle\n\t/** Size/thickness style for outline and text */\n\tsize: TLDefaultSizeStyle\n\t/** Font style for text content */\n\tfont: TLDefaultFontStyle\n\t/** Horizontal alignment for text content */\n\talign: TLDefaultHorizontalAlignStyle\n\t/** Vertical alignment for text content */\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\t/** Rich text content displayed within the shape */\n\trichText: TLRichText\n}\n\n/**\n * A geo shape represents geometric forms like rectangles, ellipses, triangles, and other\n * predefined shapes. Geo shapes support styling, text content, and can act as containers.\n *\n * @public\n * @example\n * ```ts\n * const geoShape: TLGeoShape = {\n * id: createShapeId(),\n * typeName: 'shape',\n * type: 'geo',\n * x: 100,\n * y: 100,\n * rotation: 0,\n * index: 'a1',\n * parentId: 'page:page1',\n * isLocked: false,\n * opacity: 1,\n * props: {\n * geo: 'rectangle',\n * w: 200,\n * h: 100,\n * color: 'black',\n * fill: 'solid',\n * dash: 'solid',\n * size: 'm',\n * font: 'draw',\n * align: 'middle',\n * verticalAlign: 'middle',\n * richText: toRichText('Hello World'),\n * labelColor: 'black',\n * url: '',\n * growY: 0,\n * scale: 1\n * },\n * meta: {}\n * }\n * ```\n */\nexport type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>\n\n/**\n * Validation schema for geo shape properties.\n *\n * @public\n * @example\n * ```ts\n * // Validate geo shape properties\n * const isValidGeo = geoShapeProps.geo.isValid('rectangle')\n * const isValidSize = geoShapeProps.w.isValid(100)\n * const isValidText = geoShapeProps.richText.isValid(toRichText('Hello'))\n * ```\n */\nexport const geoShapeProps: RecordProps<TLGeoShape> = {\n\tgeo: GeoShapeGeoStyle,\n\tdash: DefaultDashStyle,\n\turl: T.linkUrl,\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tgrowY: T.positiveNumber,\n\tscale: T.nonZeroNumber,\n\n\t// Text properties\n\tlabelColor: DefaultLabelColorStyle,\n\tcolor: DefaultColorStyle,\n\tfill: DefaultFillStyle,\n\tsize: DefaultSizeStyle,\n\tfont: DefaultFontStyle,\n\talign: DefaultHorizontalAlignStyle,\n\tverticalAlign: DefaultVerticalAlignStyle,\n\trichText: richTextValidator,\n}\n\nconst geoShapeVersions = createShapePropsMigrationIds('geo', {\n\tAddUrlProp: 1,\n\tAddLabelColor: 2,\n\tRemoveJustify: 3,\n\tAddCheckBox: 4,\n\tAddVerticalAlign: 5,\n\tMigrateLegacyAlign: 6,\n\tAddCloud: 7,\n\tMakeUrlsValid: 8,\n\tAddScale: 9,\n\tAddRichText: 10,\n\tAddRichTextAttrs: 11,\n})\n\n/**\n * Version identifiers for geo shape migrations.\n *\n * @public\n */\nexport { geoShapeVersions
|
|
4
|
+
"sourcesContent": ["import { T } from '@tldraw/validate'\nimport { TLRichText, richTextValidator, toRichText } from '../misc/TLRichText'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { StyleProp } from '../styles/StyleProp'\nimport {\n\tDefaultColorStyle,\n\tDefaultLabelColorStyle,\n\tTLDefaultColorStyle,\n} from '../styles/TLColorStyle'\nimport { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'\nimport { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'\nimport { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'\nimport {\n\tDefaultHorizontalAlignStyle,\n\tTLDefaultHorizontalAlignStyle,\n} from '../styles/TLHorizontalAlignStyle'\nimport { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'\nimport {\n\tDefaultVerticalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n} from '../styles/TLVerticalAlignStyle'\nimport { TLBaseShape } from './TLBaseShape'\n\n/**\n * Style property defining the geometric shape type for geo shapes.\n * Provides a variety of built-in geometric forms including basic shapes,\n * polygons, arrows, and special shapes.\n *\n * @public\n * @example\n * ```ts\n * // Use in shape props\n * const props = {\n * geo: 'rectangle', // or 'ellipse', 'triangle', etc.\n * // other properties...\n * }\n * ```\n */\nexport const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {\n\tdefaultValue: 'rectangle',\n\tvalues: [\n\t\t'cloud',\n\t\t'rectangle',\n\t\t'ellipse',\n\t\t'triangle',\n\t\t'diamond',\n\t\t'pentagon',\n\t\t'hexagon',\n\t\t'octagon',\n\t\t'star',\n\t\t'rhombus',\n\t\t'rhombus-2',\n\t\t'oval',\n\t\t'trapezoid',\n\t\t'arrow-right',\n\t\t'arrow-left',\n\t\t'arrow-up',\n\t\t'arrow-down',\n\t\t'x-box',\n\t\t'check-box',\n\t\t'heart',\n\t],\n})\n\n/**\n * Type representing valid geometric shape styles for geo shapes.\n *\n * @public\n */\nexport type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle>\n\n/**\n * Properties for the geo shape, which renders various geometric forms with styling and text.\n *\n * @public\n */\nexport interface TLGeoShapeProps {\n\t/** Geometric shape type (rectangle, ellipse, triangle, etc.) */\n\tgeo: TLGeoShapeGeoStyle\n\t/** Dash pattern style for the shape outline */\n\tdash: TLDefaultDashStyle\n\t/** URL link associated with the shape */\n\turl: string\n\t/** Width of the shape in pixels */\n\tw: number\n\t/** Height of the shape in pixels */\n\th: number\n\t/** Additional vertical growth for text content */\n\tgrowY: number\n\t/** Scale factor applied to the shape */\n\tscale: number\n\n\t/** Color style for text label */\n\tlabelColor: TLDefaultColorStyle\n\t/** Color style for the shape outline */\n\tcolor: TLDefaultColorStyle\n\t/** Fill style for the shape interior */\n\tfill: TLDefaultFillStyle\n\t/** Size/thickness style for outline and text */\n\tsize: TLDefaultSizeStyle\n\t/** Font style for text content */\n\tfont: TLDefaultFontStyle\n\t/** Horizontal alignment for text content */\n\talign: TLDefaultHorizontalAlignStyle\n\t/** Vertical alignment for text content */\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\t/** Rich text content displayed within the shape */\n\trichText: TLRichText\n}\n\n/**\n * A geo shape represents geometric forms like rectangles, ellipses, triangles, and other\n * predefined shapes. Geo shapes support styling, text content, and can act as containers.\n *\n * @public\n * @example\n * ```ts\n * const geoShape: TLGeoShape = {\n * id: createShapeId(),\n * typeName: 'shape',\n * type: 'geo',\n * x: 100,\n * y: 100,\n * rotation: 0,\n * index: 'a1',\n * parentId: 'page:page1',\n * isLocked: false,\n * opacity: 1,\n * props: {\n * geo: 'rectangle',\n * w: 200,\n * h: 100,\n * color: 'black',\n * fill: 'solid',\n * dash: 'solid',\n * size: 'm',\n * font: 'draw',\n * align: 'middle',\n * verticalAlign: 'middle',\n * richText: toRichText('Hello World'),\n * labelColor: 'black',\n * url: '',\n * growY: 0,\n * scale: 1\n * },\n * meta: {}\n * }\n * ```\n */\nexport type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>\n\n/**\n * Validation schema for geo shape properties.\n *\n * @public\n * @example\n * ```ts\n * // Validate geo shape properties\n * const isValidGeo = geoShapeProps.geo.isValid('rectangle')\n * const isValidSize = geoShapeProps.w.isValid(100)\n * const isValidText = geoShapeProps.richText.isValid(toRichText('Hello'))\n * ```\n */\nexport const geoShapeProps: RecordProps<TLGeoShape> = {\n\tgeo: GeoShapeGeoStyle,\n\tdash: DefaultDashStyle,\n\turl: T.linkUrl,\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tgrowY: T.positiveNumber,\n\tscale: T.nonZeroNumber,\n\n\t// Text properties\n\tlabelColor: DefaultLabelColorStyle,\n\tcolor: DefaultColorStyle,\n\tfill: DefaultFillStyle,\n\tsize: DefaultSizeStyle,\n\tfont: DefaultFontStyle,\n\talign: DefaultHorizontalAlignStyle,\n\tverticalAlign: DefaultVerticalAlignStyle,\n\trichText: richTextValidator,\n}\n\nconst geoShapeVersions = createShapePropsMigrationIds('geo', {\n\tAddUrlProp: 1,\n\tAddLabelColor: 2,\n\tRemoveJustify: 3,\n\tAddCheckBox: 4,\n\tAddVerticalAlign: 5,\n\tMigrateLegacyAlign: 6,\n\tAddCloud: 7,\n\tMakeUrlsValid: 8,\n\tAddScale: 9,\n\tAddRichText: 10,\n\tAddRichTextAttrs: 11,\n})\n\n/**\n * Version identifiers for geo shape migrations.\n *\n * @public\n */\nexport { geoShapeVersions }\n\n/**\n * Migration sequence for geo shape properties across different schema versions.\n * Handles evolution of geo shapes including URL support, label colors, alignment changes,\n * the transition from plain text to rich text, and support for attrs property on richText.\n *\n * @public\n */\nexport const geoShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [\n\t\t{\n\t\t\tid: geoShapeVersions.AddUrlProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.url = ''\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddLabelColor,\n\t\t\tup: (props) => {\n\t\t\t\tprops.labelColor = 'black'\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.RemoveJustify,\n\t\t\tup: (props) => {\n\t\t\t\tif (props.align === 'justify') {\n\t\t\t\t\tprops.align = 'start'\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddCheckBox,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddVerticalAlign,\n\t\t\tup: (props) => {\n\t\t\t\tprops.verticalAlign = 'middle'\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.MigrateLegacyAlign,\n\t\t\tup: (props) => {\n\t\t\t\tlet newAlign: TLDefaultHorizontalAlignStyle\n\t\t\t\tswitch (props.align) {\n\t\t\t\t\tcase 'start':\n\t\t\t\t\t\tnewAlign = 'start-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t\tcase 'end':\n\t\t\t\t\t\tnewAlign = 'end-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tnewAlign = 'middle-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tprops.align = newAlign\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddCloud,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.MakeUrlsValid,\n\t\t\tup: (props) => {\n\t\t\t\tif (!T.linkUrl.isValid(props.url)) {\n\t\t\t\t\tprops.url = ''\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddScale,\n\t\t\tup: (props) => {\n\t\t\t\tprops.scale = 1\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.scale\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddRichText,\n\t\t\tup: (props) => {\n\t\t\t\tprops.richText = toRichText(props.text)\n\t\t\t\tdelete props.text\n\t\t\t},\n\t\t\t// N.B. Explicitly no down state so that we force clients to update.\n\t\t\t// down: (props) => {\n\t\t\t// \tdelete props.richText\n\t\t\t// },\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddRichTextAttrs,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop - attrs is optional so old records are valid\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\t// Remove attrs from richText when migrating down\n\t\t\t\tif (props.richText && 'attrs' in props.richText) {\n\t\t\t\t\tdelete props.richText.attrs\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t],\n})\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles/StyleProp.ts"],
|
|
4
4
|
"sourcesContent": ["import { T } from '@tldraw/validate'\n\n/**\n * A `StyleProp` is a property of a shape that follows some special rules.\n *\n * 1. The same value can be set on lots of shapes at the same time.\n *\n * 2. The last used value is automatically saved and applied to new shapes.\n *\n * For example, {@link DefaultColorStyle} is a style prop used by tldraw's default shapes to set\n * their color. If you try selecting several shapes on tldraw.com and changing their color, you'll\n * see that the color is applied to all of them. Then, if you draw a new shape, it'll have the same\n * color as the one you just set.\n *\n * You can use styles in your own shapes by either defining your own (see {@link StyleProp.define}\n * and {@link StyleProp.defineEnum}) or using tldraw's default ones, like {@link DefaultColorStyle}.\n * When you define a shape, pass a `props` object describing all of your shape's properties, using\n * `StyleProp`s for the ones you want to be styles. See the\n * {@link https://github.com/tldraw/tldraw/tree/main/apps/examples | custom styles example}\n * for more.\n *\n * @public\n */\nexport class StyleProp<Type> implements T.Validatable<Type> {\n\t/**\n\t * Define a new {@link StyleProp}.\n\t *\n\t * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with\n\t * your app/library name.\n\t * @param options -\n\t * - `defaultValue`: The default value for this style prop.\n\t *\n\t * - `type`: Optionally, describe what type of data you expect for this style prop.\n\t *\n\t * @example\n\t * ```ts\n\t * import {T} from '@tldraw/validate'\n\t * import {StyleProp} from '@tldraw/tlschema'\n\t *\n\t * const MyLineWidthProp = StyleProp.define('myApp:lineWidth', {\n\t * defaultValue: 1,\n\t * type: T.number,\n\t * })\n\t * ```\n\t * @public\n\t */\n\tstatic define<Type>(\n\t\tuniqueId: string,\n\t\toptions: { defaultValue: Type; type?: T.Validatable<Type> }\n\t) {\n\t\tconst { defaultValue, type = T.any } = options\n\t\treturn new StyleProp<Type>(uniqueId, defaultValue, type)\n\t}\n\n\t/**\n\t * Define a new {@link StyleProp} as a list of possible values.\n\t *\n\t * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with\n\t * your app/library name.\n\t * @param options -\n\t * - `defaultValue`: The default value for this style prop.\n\t *\n\t * - `values`: An array of possible values of this style prop.\n\t *\n\t * @example\n\t * ```ts\n\t * import {StyleProp} from '@tldraw/tlschema'\n\t *\n\t * const MySizeProp = StyleProp.defineEnum('myApp:size', {\n\t * defaultValue: 'medium',\n\t * values: ['small', 'medium', 'large'],\n\t * })\n\t * ```\n\t */\n\tstatic defineEnum<const Values extends readonly unknown[]>(\n\t\tuniqueId: string,\n\t\toptions: { defaultValue: Values[number]; values: Values }\n\t) {\n\t\tconst { defaultValue, values } = options\n\t\treturn new EnumStyleProp<Values[number]>(uniqueId, defaultValue, values)\n\t}\n\n\t/** @internal */\n\tprotected constructor(\n\t\treadonly id: string,\n\t\tpublic defaultValue: Type,\n\t\treadonly type: T.Validatable<Type>\n\t) {}\n\n\tsetDefaultValue(value: Type) {\n\t\tthis.defaultValue = value\n\t}\n\n\tvalidate(value: unknown) {\n\t\treturn this.type.validate(value)\n\t}\n\n\tvalidateUsingKnownGoodVersion(prevValue: Type, newValue: unknown) {\n\t\tif (this.type.validateUsingKnownGoodVersion) {\n\t\t\treturn this.type.validateUsingKnownGoodVersion(prevValue, newValue)\n\t\t} else {\n\t\t\treturn this.validate(newValue)\n\t\t}\n\t}\n}\n\n/**\n * See {@link StyleProp} & {@link StyleProp.defineEnum}\n *\n * @public\n */\nexport class EnumStyleProp<T> extends StyleProp<T> {\n\t/** @internal */\n\tconstructor(id: string, defaultValue: T, values: readonly T[]) {\n\t\tsuper(id, defaultValue, T.literalEnum(...values))\n\t\tthis.values = [...values]\n\t}\n\n\treadonly values: T[]\n\n\t/**\n\t * Add new values to this enum style prop at runtime. This is useful for extending\n\t * the built-in styles with custom values (e.g. adding custom colors). Be sure to\n\t * also modify the associated types.\n\t *\n\t * @param newValues - The new values to add.\n\t *\n\t * @public\n\t */\n\taddValues(...newValues: T[]): void {\n\t\tfor (const v of newValues) {\n\t\t\tif (!this.values.includes(v)) {\n\t\t\t\tthis.values.push(v)\n\t\t\t}\n\t\t}\n\t\t// Rebuild the validator with the updated values\n\t\t;(this as any).type = T.literalEnum(...this.values)\n\t}\n\n\t/**\n\t * Remove values from this enum style prop at runtime. This is useful for narrowing\n\t * the built-in styles with custom values (e.g. adding custom colors). Be sure to\n\t * also modify the associated types.\n\t *\n\t * @param valuesToRemove - The values to remove.\n\t *\n\t * @public\n\t */\n\tremoveValues(...valuesToRemove: T[]): void {\n\t\tfor (const v of valuesToRemove) {\n\t\t\tif (this.values.includes(v)) {\n\t\t\t\tthis.values.splice(this.values.indexOf(v), 1)\n\t\t\t}\n\t\t}\n\t\t// Rebuild the validator with the updated values\n\t\t;(this as any).type = T.literalEnum(...this.values)\n\t}\n}\n\n/**\n * @public\n */\nexport type StylePropValue<T extends StyleProp<any>> = T extends StyleProp<infer U> ? U : never\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAuBX,MAAM,UAA+C;AAAA;AAAA,EA4DjD,YACA,IACF,cACE,MACR;AAHQ;AACF;AACE;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAkB;AAuBX,MAAM,UAA+C;AAAA;AAAA,EA4DjD,YACA,IACF,cACE,MACR;AAHQ;AACF;AACE;AAAA,EACP;AAAA,EAHO;AAAA,EACF;AAAA,EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAxCV,OAAO,OACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,kBAAE,IAAI,IAAI;AACvC,WAAO,IAAI,UAAgB,UAAU,cAAc,IAAI;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,OAAO,WACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,IAAI;AACjC,WAAO,IAAI,cAA8B,UAAU,cAAc,MAAM;AAAA,EACxE;AAAA,EASA,gBAAgB,OAAa;AAC5B,SAAK,eAAe;AAAA,EACrB;AAAA,EAEA,SAAS,OAAgB;AACxB,WAAO,KAAK,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAEA,8BAA8B,WAAiB,UAAmB;AACjE,QAAI,KAAK,KAAK,+BAA+B;AAC5C,aAAO,KAAK,KAAK,8BAA8B,WAAW,QAAQ;AAAA,IACnE,OAAO;AACN,aAAO,KAAK,SAAS,QAAQ;AAAA,IAC9B;AAAA,EACD;AACD;AAOO,MAAM,sBAAyB,UAAa;AAAA;AAAA,EAElD,YAAY,IAAY,cAAiB,QAAsB;AAC9D,UAAM,IAAI,cAAc,kBAAE,YAAY,GAAG,MAAM,CAAC;AAChD,SAAK,SAAS,CAAC,GAAG,MAAM;AAAA,EACzB;AAAA,EAES;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWT,aAAa,WAAsB;AAClC,eAAW,KAAK,WAAW;AAC1B,UAAI,CAAC,KAAK,OAAO,SAAS,CAAC,GAAG;AAC7B,aAAK,OAAO,KAAK,CAAC;AAAA,MACnB;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,kBAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,gBAAgB,gBAA2B;AAC1C,eAAW,KAAK,gBAAgB;AAC/B,UAAI,KAAK,OAAO,SAAS,CAAC,GAAG;AAC5B,aAAK,OAAO,OAAO,KAAK,OAAO,QAAQ,CAAC,GAAG,CAAC;AAAA,MAC7C;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,kBAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles/TLTheme.ts"],
|
|
4
|
-
"sourcesContent": ["import type { TLFontFace } from './TLFontFace'\n\n/**\n * Defines the color variants available for each color in the default theme.\n * Each color has multiple variants for different use cases like fills, strokes,\n * patterns, and UI elements like frames and notes.\n *\n * @example\n * ```ts\n * import { TLDefaultColor } from '@tldraw/tlschema'\n *\n * const blueColor: TLDefaultColor = {\n * solid: '#4465e9',\n * semi: '#dce1f8',\n * pattern: '#6681ee',\n * fill: '#4465e9',\n * // ... other variants\n * }\n * ```\n *\n * @public\n */\nexport interface TLDefaultColor {\n\tsolid: string\n\tsemi: string\n\tpattern: string\n\tfill: string // usually same as solid\n\tlinedFill: string // usually slightly lighter than fill\n\tframeHeadingStroke: string\n\tframeHeadingFill: string\n\tframeStroke: string\n\tframeFill: string\n\tframeText: string\n\tnoteFill: string\n\tnoteText: string\n\thighlightSrgb: string\n\thighlightP3: string\n}\n\n/**\n * The color palette for a theme. Contains base UI colors (as strings) and\n * named shape colors (as {@link TLDefaultColor} objects).\n *\n * Extend this interface via module augmentation to add custom colors:\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n * interface TLThemeColors {\n * pink: TLDefaultColor\n * }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeDefaultColors {\n\ttext: string\n\tbackground: string\n\tnegativeSpace: string\n\tsolid: string\n\tcursor: string\n\tnoteBorder: string\n\tblack: TLDefaultColor\n\tgrey: TLDefaultColor\n\t'light-violet': TLDefaultColor\n\tviolet: TLDefaultColor\n\tblue: TLDefaultColor\n\t'light-blue': TLDefaultColor\n\tyellow: TLDefaultColor\n\torange: TLDefaultColor\n\tgreen: TLDefaultColor\n\t'light-green': TLDefaultColor\n\t'light-red': TLDefaultColor\n\tred: TLDefaultColor\n\twhite: TLDefaultColor\n}\n\n/**\n * A font definition within a theme. Maps a font style name to a CSS font-family\n * declaration and optional font face descriptors for loading.\n *\n * @example\n * ```ts\n * import { TLThemeFont } from '@tldraw/tlschema'\n *\n * const customSans: TLThemeFont = {\n * fontFamily: \"'Inter', sans-serif\",\n * faces: [\n * { family: 'Inter', src: { url: 'https://example.com/Inter-Regular.woff2', format: 'woff2' }, weight: 'normal' },\n * { family: 'Inter', src: { url: 'https://example.com/Inter-Bold.woff2', format: 'woff2' }, weight: 'bold' },\n * ]\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeFont {\n\t/** CSS font-family declaration, e.g. `\"'Inter', sans-serif\"` */\n\tfontFamily: string\n\t/** Font face definitions for loading. Omit for system fonts that don't need loading. */\n\tfaces?: TLFontFace[]\n\t/**\n\t * Icon for the style panel. Accepts a string icon ID (resolved via `assetUrls.icons`)\n\t * or a React element (`TLUiIconJsx`). Defaults to the built-in icon for known fonts,\n\t * or `'font-draw'` for custom fonts.\n\t */\n\ticon?: unknown\n}\n\n/**\n * The font palette for a theme. Contains named font definitions mapping font style\n * names to their CSS font-family strings and font face descriptors.\n *\n * Extend this interface via module augmentation to add custom fonts:\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n * interface TLThemeFonts {\n * cursive: TLThemeFont\n * }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeFonts {\n\tdraw: TLThemeFont\n\tsans: TLThemeFont\n\tserif: TLThemeFont\n\tmono: TLThemeFont\n}\n\n/**\n * Augment this interface to remove built-in palette colors from themes.\n * Each key you add will be omitted from {@link TLThemeColors}.\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n * interface TLRemovedDefaultThemeColors {\n * 'light-violet': true\n * 'light-blue': true\n * }\n * }\n * ```\n *\n * @public\n */\n// oxlint-disable-next-line typescript/no-empty-object-type\nexport interface TLRemovedDefaultThemeColors {}\n\n/**\n * Keys in {@link TLThemeDefaultColors} that are required UI infrastructure colors\n * and cannot be removed via {@link TLRemovedDefaultThemeColors}.\n *\n * @public\n */\nexport type TLThemeUiColorKeys =\n\t| 'text'\n\t| 'background'\n\t| 'negativeSpace'\n\t| 'solid'\n\t| 'cursor'\n\t| 'noteBorder'\n\n/**\n * A color palette for one color mode. UI colors are always required.\n * Palette colors removed via {@link TLRemovedDefaultThemeColors} are omitted.\n *\n * @public\n */\nexport type TLThemeColors = Pick<TLThemeDefaultColors, TLThemeUiColorKeys> &\n\tOmit<TLThemeDefaultColors, TLThemeUiColorKeys | keyof TLRemovedDefaultThemeColors>\n\n/**\n * A theme definition containing shared properties and color/font palettes for\n * both light and dark modes.\n *\n * To remove palette colors from themes, augment {@link TLRemovedDefaultThemeColors}.\n * UI colors (`text`, `background`, `negativeSpace`, `solid`, `cursor`, `noteBorder`)\n * are always required.\n *\n * @example\n * ```ts\n * const myTheme: TLTheme = {\n * id: 'custom',\n * fontSize: 16,\n * lineHeight: 1.35,\n * strokeWidth: 2,\n * fonts: DEFAULT_THEME.fonts,\n * colors: {\n * light: { ... },\n * dark: { ... },\n * },\n * }\n * editor.updateTheme(myTheme)\n * ```\n *\n * @public\n */\nexport interface TLTheme {\n\t/** Unique identifier for this theme. Used as the key in the theme registry. */\n\tid: TLThemeId\n\t/** Base font size in pixels. Shape font sizes are derived by multiplying this value. */\n\tfontSize: number\n\t/** Base line height multiplier. */\n\tlineHeight: number\n\t/** Base stroke width in pixels. Shape stroke widths are derived by multiplying this value. */\n\tstrokeWidth: number\n\t/** Font definitions. Individual fonts may be absent if removed by a custom theme. */\n\tfonts: TLThemeFonts\n\tcolors: {\n\t\tlight: TLThemeColors\n\t\tdark: TLThemeColors\n\t}\n}\n\n/**\n * A registry of available themes. Extend this interface via module\n * augmentation to register custom themes for type-safe theme IDs.\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n * interface TLThemes {\n * corporate: TLTheme\n * }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemes {\n\tdefault: TLTheme\n}\n\n/** @public */\nexport type TLThemeId = keyof TLThemes & string\n"],
|
|
4
|
+
"sourcesContent": ["import type { TLFontFace } from './TLFontFace'\n\n/**\n * Defines the color variants available for each color in the default theme.\n * Each color has multiple variants for different use cases like fills, strokes,\n * patterns, and UI elements like frames and notes.\n *\n * @example\n * ```ts\n * import { TLDefaultColor } from '@tldraw/tlschema'\n *\n * const blueColor: TLDefaultColor = {\n * solid: '#4465e9',\n * semi: '#dce1f8',\n * pattern: '#6681ee',\n * fill: '#4465e9',\n * // ... other variants\n * }\n * ```\n *\n * @public\n */\nexport interface TLDefaultColor {\n\tsolid: string\n\tsemi: string\n\tpattern: string\n\tfill: string // usually same as solid\n\tlinedFill: string // usually slightly lighter than fill\n\tframeHeadingStroke: string\n\tframeHeadingFill: string\n\tframeStroke: string\n\tframeFill: string\n\tframeText: string\n\tnoteFill: string\n\tnoteText: string\n\thighlightSrgb: string\n\thighlightP3: string\n}\n\n/**\n * The color palette for a theme. Contains base UI colors (as strings) and\n * named shape colors (as {@link TLDefaultColor} objects).\n *\n * Extend this interface via module augmentation to add custom colors:\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n * interface TLThemeColors {\n * pink: TLDefaultColor\n * }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeDefaultColors {\n\ttext: string\n\tbackground: string\n\tnegativeSpace: string\n\tsolid: string\n\tcursor: string\n\tnoteBorder: string\n\t/** Snap indicator line color */\n\tsnap: string\n\t/** Selection outline stroke */\n\tselectionStroke: string\n\t/** Selection handle fill (typically the background color) */\n\tselectionFill: string\n\t/** Brush rectangle fill */\n\tbrushFill: string\n\t/** Brush rectangle stroke */\n\tbrushStroke: string\n\t/** Selected contrast color (handle fills, etc.) */\n\tselectedContrast: string\n\t/** Laser pointer color */\n\tlaser: string\n\tblack: TLDefaultColor\n\tgrey: TLDefaultColor\n\t'light-violet': TLDefaultColor\n\tviolet: TLDefaultColor\n\tblue: TLDefaultColor\n\t'light-blue': TLDefaultColor\n\tyellow: TLDefaultColor\n\torange: TLDefaultColor\n\tgreen: TLDefaultColor\n\t'light-green': TLDefaultColor\n\t'light-red': TLDefaultColor\n\tred: TLDefaultColor\n\twhite: TLDefaultColor\n}\n\n/**\n * A font definition within a theme. Maps a font style name to a CSS font-family\n * declaration and optional font face descriptors for loading.\n *\n * @example\n * ```ts\n * import { TLThemeFont } from '@tldraw/tlschema'\n *\n * const customSans: TLThemeFont = {\n * fontFamily: \"'Inter', sans-serif\",\n * faces: [\n * { family: 'Inter', src: { url: 'https://example.com/Inter-Regular.woff2', format: 'woff2' }, weight: 'normal' },\n * { family: 'Inter', src: { url: 'https://example.com/Inter-Bold.woff2', format: 'woff2' }, weight: 'bold' },\n * ]\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeFont {\n\t/** CSS font-family declaration, e.g. `\"'Inter', sans-serif\"` */\n\tfontFamily: string\n\t/** Font face definitions for loading. Omit for system fonts that don't need loading. */\n\tfaces?: TLFontFace[]\n\t/**\n\t * Icon for the style panel. Accepts a string icon ID (resolved via `assetUrls.icons`)\n\t * or a React element (`TLUiIconJsx`). Defaults to the built-in icon for known fonts,\n\t * or `'font-draw'` for custom fonts.\n\t */\n\ticon?: unknown\n}\n\n/**\n * The font palette for a theme. Contains named font definitions mapping font style\n * names to their CSS font-family strings and font face descriptors.\n *\n * Extend this interface via module augmentation to add custom fonts:\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n * interface TLThemeFonts {\n * cursive: TLThemeFont\n * }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemeFonts {\n\tdraw: TLThemeFont\n\tsans: TLThemeFont\n\tserif: TLThemeFont\n\tmono: TLThemeFont\n}\n\n/**\n * Augment this interface to remove built-in palette colors from themes.\n * Each key you add will be omitted from {@link TLThemeColors}.\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n * interface TLRemovedDefaultThemeColors {\n * 'light-violet': true\n * 'light-blue': true\n * }\n * }\n * ```\n *\n * @public\n */\n// oxlint-disable-next-line typescript/no-empty-object-type\nexport interface TLRemovedDefaultThemeColors {}\n\n/**\n * Keys in {@link TLThemeDefaultColors} that are required UI infrastructure colors\n * and cannot be removed via {@link TLRemovedDefaultThemeColors}.\n *\n * @public\n */\nexport type TLThemeUiColorKeys =\n\t| 'text'\n\t| 'background'\n\t| 'negativeSpace'\n\t| 'solid'\n\t| 'cursor'\n\t| 'noteBorder'\n\t| 'snap'\n\t| 'selectionStroke'\n\t| 'selectionFill'\n\t| 'brushFill'\n\t| 'brushStroke'\n\t| 'selectedContrast'\n\t| 'laser'\n\n/**\n * A color palette for one color mode. UI colors are always required.\n * Palette colors removed via {@link TLRemovedDefaultThemeColors} are omitted.\n *\n * @public\n */\nexport type TLThemeColors = Pick<TLThemeDefaultColors, TLThemeUiColorKeys> &\n\tOmit<TLThemeDefaultColors, TLThemeUiColorKeys | keyof TLRemovedDefaultThemeColors>\n\n/**\n * A theme definition containing shared properties and color/font palettes for\n * both light and dark modes.\n *\n * To remove palette colors from themes, augment {@link TLRemovedDefaultThemeColors}.\n * UI colors (`text`, `background`, `negativeSpace`, `solid`, `cursor`, `noteBorder`)\n * are always required.\n *\n * @example\n * ```ts\n * const myTheme: TLTheme = {\n * id: 'custom',\n * fontSize: 16,\n * lineHeight: 1.35,\n * strokeWidth: 2,\n * fonts: DEFAULT_THEME.fonts,\n * colors: {\n * light: { ... },\n * dark: { ... },\n * },\n * }\n * editor.updateTheme(myTheme)\n * ```\n *\n * @public\n */\nexport interface TLTheme {\n\t/** Unique identifier for this theme. Used as the key in the theme registry. */\n\tid: TLThemeId\n\t/** Base font size in pixels. Shape font sizes are derived by multiplying this value. */\n\tfontSize: number\n\t/** Base line height multiplier. */\n\tlineHeight: number\n\t/** Base stroke width in pixels. Shape stroke widths are derived by multiplying this value. */\n\tstrokeWidth: number\n\t/** Font definitions. Individual fonts may be absent if removed by a custom theme. */\n\tfonts: TLThemeFonts\n\tcolors: {\n\t\tlight: TLThemeColors\n\t\tdark: TLThemeColors\n\t}\n}\n\n/**\n * A registry of available themes. Extend this interface via module\n * augmentation to register custom themes for type-safe theme IDs.\n *\n * @example\n * ```ts\n * declare module '@tldraw/tlschema' {\n * interface TLThemes {\n * corporate: TLTheme\n * }\n * }\n * ```\n *\n * @public\n */\nexport interface TLThemes {\n\tdefault: TLTheme\n}\n\n/** @public */\nexport type TLThemeId = keyof TLThemes & string\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist-esm/index.d.mts
CHANGED
|
@@ -6272,6 +6272,20 @@ export declare interface TLThemeDefaultColors {
|
|
|
6272
6272
|
solid: string;
|
|
6273
6273
|
cursor: string;
|
|
6274
6274
|
noteBorder: string;
|
|
6275
|
+
/** Snap indicator line color */
|
|
6276
|
+
snap: string;
|
|
6277
|
+
/** Selection outline stroke */
|
|
6278
|
+
selectionStroke: string;
|
|
6279
|
+
/** Selection handle fill (typically the background color) */
|
|
6280
|
+
selectionFill: string;
|
|
6281
|
+
/** Brush rectangle fill */
|
|
6282
|
+
brushFill: string;
|
|
6283
|
+
/** Brush rectangle stroke */
|
|
6284
|
+
brushStroke: string;
|
|
6285
|
+
/** Selected contrast color (handle fills, etc.) */
|
|
6286
|
+
selectedContrast: string;
|
|
6287
|
+
/** Laser pointer color */
|
|
6288
|
+
laser: string;
|
|
6275
6289
|
black: TLDefaultColor;
|
|
6276
6290
|
grey: TLDefaultColor;
|
|
6277
6291
|
'light-violet': TLDefaultColor;
|
|
@@ -6371,7 +6385,7 @@ export declare interface TLThemes {
|
|
|
6371
6385
|
*
|
|
6372
6386
|
* @public
|
|
6373
6387
|
*/
|
|
6374
|
-
export declare type TLThemeUiColorKeys = 'background' | 'cursor' | 'negativeSpace' | 'noteBorder' | 'solid' | 'text';
|
|
6388
|
+
export declare type TLThemeUiColorKeys = 'background' | 'brushFill' | 'brushStroke' | 'cursor' | 'laser' | 'negativeSpace' | 'noteBorder' | 'selectedContrast' | 'selectionFill' | 'selectionStroke' | 'snap' | 'solid' | 'text';
|
|
6375
6389
|
|
|
6376
6390
|
/**
|
|
6377
6391
|
* A type for an asset that is available in the editor but whose type is
|
package/dist-esm/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shapes/TLGeoShape.ts"],
|
|
4
|
-
"sourcesContent": ["import { T } from '@tldraw/validate'\nimport { TLRichText, richTextValidator, toRichText } from '../misc/TLRichText'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { StyleProp } from '../styles/StyleProp'\nimport {\n\tDefaultColorStyle,\n\tDefaultLabelColorStyle,\n\tTLDefaultColorStyle,\n} from '../styles/TLColorStyle'\nimport { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'\nimport { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'\nimport { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'\nimport {\n\tDefaultHorizontalAlignStyle,\n\tTLDefaultHorizontalAlignStyle,\n} from '../styles/TLHorizontalAlignStyle'\nimport { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'\nimport {\n\tDefaultVerticalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n} from '../styles/TLVerticalAlignStyle'\nimport { TLBaseShape } from './TLBaseShape'\n\n/**\n * Style property defining the geometric shape type for geo shapes.\n * Provides a variety of built-in geometric forms including basic shapes,\n * polygons, arrows, and special shapes.\n *\n * @public\n * @example\n * ```ts\n * // Use in shape props\n * const props = {\n * geo: 'rectangle', // or 'ellipse', 'triangle', etc.\n * // other properties...\n * }\n * ```\n */\nexport const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {\n\tdefaultValue: 'rectangle',\n\tvalues: [\n\t\t'cloud',\n\t\t'rectangle',\n\t\t'ellipse',\n\t\t'triangle',\n\t\t'diamond',\n\t\t'pentagon',\n\t\t'hexagon',\n\t\t'octagon',\n\t\t'star',\n\t\t'rhombus',\n\t\t'rhombus-2',\n\t\t'oval',\n\t\t'trapezoid',\n\t\t'arrow-right',\n\t\t'arrow-left',\n\t\t'arrow-up',\n\t\t'arrow-down',\n\t\t'x-box',\n\t\t'check-box',\n\t\t'heart',\n\t],\n})\n\n/**\n * Type representing valid geometric shape styles for geo shapes.\n *\n * @public\n */\nexport type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle>\n\n/**\n * Properties for the geo shape, which renders various geometric forms with styling and text.\n *\n * @public\n */\nexport interface TLGeoShapeProps {\n\t/** Geometric shape type (rectangle, ellipse, triangle, etc.) */\n\tgeo: TLGeoShapeGeoStyle\n\t/** Dash pattern style for the shape outline */\n\tdash: TLDefaultDashStyle\n\t/** URL link associated with the shape */\n\turl: string\n\t/** Width of the shape in pixels */\n\tw: number\n\t/** Height of the shape in pixels */\n\th: number\n\t/** Additional vertical growth for text content */\n\tgrowY: number\n\t/** Scale factor applied to the shape */\n\tscale: number\n\n\t/** Color style for text label */\n\tlabelColor: TLDefaultColorStyle\n\t/** Color style for the shape outline */\n\tcolor: TLDefaultColorStyle\n\t/** Fill style for the shape interior */\n\tfill: TLDefaultFillStyle\n\t/** Size/thickness style for outline and text */\n\tsize: TLDefaultSizeStyle\n\t/** Font style for text content */\n\tfont: TLDefaultFontStyle\n\t/** Horizontal alignment for text content */\n\talign: TLDefaultHorizontalAlignStyle\n\t/** Vertical alignment for text content */\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\t/** Rich text content displayed within the shape */\n\trichText: TLRichText\n}\n\n/**\n * A geo shape represents geometric forms like rectangles, ellipses, triangles, and other\n * predefined shapes. Geo shapes support styling, text content, and can act as containers.\n *\n * @public\n * @example\n * ```ts\n * const geoShape: TLGeoShape = {\n * id: createShapeId(),\n * typeName: 'shape',\n * type: 'geo',\n * x: 100,\n * y: 100,\n * rotation: 0,\n * index: 'a1',\n * parentId: 'page:page1',\n * isLocked: false,\n * opacity: 1,\n * props: {\n * geo: 'rectangle',\n * w: 200,\n * h: 100,\n * color: 'black',\n * fill: 'solid',\n * dash: 'solid',\n * size: 'm',\n * font: 'draw',\n * align: 'middle',\n * verticalAlign: 'middle',\n * richText: toRichText('Hello World'),\n * labelColor: 'black',\n * url: '',\n * growY: 0,\n * scale: 1\n * },\n * meta: {}\n * }\n * ```\n */\nexport type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>\n\n/**\n * Validation schema for geo shape properties.\n *\n * @public\n * @example\n * ```ts\n * // Validate geo shape properties\n * const isValidGeo = geoShapeProps.geo.isValid('rectangle')\n * const isValidSize = geoShapeProps.w.isValid(100)\n * const isValidText = geoShapeProps.richText.isValid(toRichText('Hello'))\n * ```\n */\nexport const geoShapeProps: RecordProps<TLGeoShape> = {\n\tgeo: GeoShapeGeoStyle,\n\tdash: DefaultDashStyle,\n\turl: T.linkUrl,\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tgrowY: T.positiveNumber,\n\tscale: T.nonZeroNumber,\n\n\t// Text properties\n\tlabelColor: DefaultLabelColorStyle,\n\tcolor: DefaultColorStyle,\n\tfill: DefaultFillStyle,\n\tsize: DefaultSizeStyle,\n\tfont: DefaultFontStyle,\n\talign: DefaultHorizontalAlignStyle,\n\tverticalAlign: DefaultVerticalAlignStyle,\n\trichText: richTextValidator,\n}\n\nconst geoShapeVersions = createShapePropsMigrationIds('geo', {\n\tAddUrlProp: 1,\n\tAddLabelColor: 2,\n\tRemoveJustify: 3,\n\tAddCheckBox: 4,\n\tAddVerticalAlign: 5,\n\tMigrateLegacyAlign: 6,\n\tAddCloud: 7,\n\tMakeUrlsValid: 8,\n\tAddScale: 9,\n\tAddRichText: 10,\n\tAddRichTextAttrs: 11,\n})\n\n/**\n * Version identifiers for geo shape migrations.\n *\n * @public\n */\nexport { geoShapeVersions
|
|
4
|
+
"sourcesContent": ["import { T } from '@tldraw/validate'\nimport { TLRichText, richTextValidator, toRichText } from '../misc/TLRichText'\nimport { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '../records/TLShape'\nimport { RecordProps } from '../recordsWithProps'\nimport { StyleProp } from '../styles/StyleProp'\nimport {\n\tDefaultColorStyle,\n\tDefaultLabelColorStyle,\n\tTLDefaultColorStyle,\n} from '../styles/TLColorStyle'\nimport { DefaultDashStyle, TLDefaultDashStyle } from '../styles/TLDashStyle'\nimport { DefaultFillStyle, TLDefaultFillStyle } from '../styles/TLFillStyle'\nimport { DefaultFontStyle, TLDefaultFontStyle } from '../styles/TLFontStyle'\nimport {\n\tDefaultHorizontalAlignStyle,\n\tTLDefaultHorizontalAlignStyle,\n} from '../styles/TLHorizontalAlignStyle'\nimport { DefaultSizeStyle, TLDefaultSizeStyle } from '../styles/TLSizeStyle'\nimport {\n\tDefaultVerticalAlignStyle,\n\tTLDefaultVerticalAlignStyle,\n} from '../styles/TLVerticalAlignStyle'\nimport { TLBaseShape } from './TLBaseShape'\n\n/**\n * Style property defining the geometric shape type for geo shapes.\n * Provides a variety of built-in geometric forms including basic shapes,\n * polygons, arrows, and special shapes.\n *\n * @public\n * @example\n * ```ts\n * // Use in shape props\n * const props = {\n * geo: 'rectangle', // or 'ellipse', 'triangle', etc.\n * // other properties...\n * }\n * ```\n */\nexport const GeoShapeGeoStyle = StyleProp.defineEnum('tldraw:geo', {\n\tdefaultValue: 'rectangle',\n\tvalues: [\n\t\t'cloud',\n\t\t'rectangle',\n\t\t'ellipse',\n\t\t'triangle',\n\t\t'diamond',\n\t\t'pentagon',\n\t\t'hexagon',\n\t\t'octagon',\n\t\t'star',\n\t\t'rhombus',\n\t\t'rhombus-2',\n\t\t'oval',\n\t\t'trapezoid',\n\t\t'arrow-right',\n\t\t'arrow-left',\n\t\t'arrow-up',\n\t\t'arrow-down',\n\t\t'x-box',\n\t\t'check-box',\n\t\t'heart',\n\t],\n})\n\n/**\n * Type representing valid geometric shape styles for geo shapes.\n *\n * @public\n */\nexport type TLGeoShapeGeoStyle = T.TypeOf<typeof GeoShapeGeoStyle>\n\n/**\n * Properties for the geo shape, which renders various geometric forms with styling and text.\n *\n * @public\n */\nexport interface TLGeoShapeProps {\n\t/** Geometric shape type (rectangle, ellipse, triangle, etc.) */\n\tgeo: TLGeoShapeGeoStyle\n\t/** Dash pattern style for the shape outline */\n\tdash: TLDefaultDashStyle\n\t/** URL link associated with the shape */\n\turl: string\n\t/** Width of the shape in pixels */\n\tw: number\n\t/** Height of the shape in pixels */\n\th: number\n\t/** Additional vertical growth for text content */\n\tgrowY: number\n\t/** Scale factor applied to the shape */\n\tscale: number\n\n\t/** Color style for text label */\n\tlabelColor: TLDefaultColorStyle\n\t/** Color style for the shape outline */\n\tcolor: TLDefaultColorStyle\n\t/** Fill style for the shape interior */\n\tfill: TLDefaultFillStyle\n\t/** Size/thickness style for outline and text */\n\tsize: TLDefaultSizeStyle\n\t/** Font style for text content */\n\tfont: TLDefaultFontStyle\n\t/** Horizontal alignment for text content */\n\talign: TLDefaultHorizontalAlignStyle\n\t/** Vertical alignment for text content */\n\tverticalAlign: TLDefaultVerticalAlignStyle\n\t/** Rich text content displayed within the shape */\n\trichText: TLRichText\n}\n\n/**\n * A geo shape represents geometric forms like rectangles, ellipses, triangles, and other\n * predefined shapes. Geo shapes support styling, text content, and can act as containers.\n *\n * @public\n * @example\n * ```ts\n * const geoShape: TLGeoShape = {\n * id: createShapeId(),\n * typeName: 'shape',\n * type: 'geo',\n * x: 100,\n * y: 100,\n * rotation: 0,\n * index: 'a1',\n * parentId: 'page:page1',\n * isLocked: false,\n * opacity: 1,\n * props: {\n * geo: 'rectangle',\n * w: 200,\n * h: 100,\n * color: 'black',\n * fill: 'solid',\n * dash: 'solid',\n * size: 'm',\n * font: 'draw',\n * align: 'middle',\n * verticalAlign: 'middle',\n * richText: toRichText('Hello World'),\n * labelColor: 'black',\n * url: '',\n * growY: 0,\n * scale: 1\n * },\n * meta: {}\n * }\n * ```\n */\nexport type TLGeoShape = TLBaseShape<'geo', TLGeoShapeProps>\n\n/**\n * Validation schema for geo shape properties.\n *\n * @public\n * @example\n * ```ts\n * // Validate geo shape properties\n * const isValidGeo = geoShapeProps.geo.isValid('rectangle')\n * const isValidSize = geoShapeProps.w.isValid(100)\n * const isValidText = geoShapeProps.richText.isValid(toRichText('Hello'))\n * ```\n */\nexport const geoShapeProps: RecordProps<TLGeoShape> = {\n\tgeo: GeoShapeGeoStyle,\n\tdash: DefaultDashStyle,\n\turl: T.linkUrl,\n\tw: T.nonZeroNumber,\n\th: T.nonZeroNumber,\n\tgrowY: T.positiveNumber,\n\tscale: T.nonZeroNumber,\n\n\t// Text properties\n\tlabelColor: DefaultLabelColorStyle,\n\tcolor: DefaultColorStyle,\n\tfill: DefaultFillStyle,\n\tsize: DefaultSizeStyle,\n\tfont: DefaultFontStyle,\n\talign: DefaultHorizontalAlignStyle,\n\tverticalAlign: DefaultVerticalAlignStyle,\n\trichText: richTextValidator,\n}\n\nconst geoShapeVersions = createShapePropsMigrationIds('geo', {\n\tAddUrlProp: 1,\n\tAddLabelColor: 2,\n\tRemoveJustify: 3,\n\tAddCheckBox: 4,\n\tAddVerticalAlign: 5,\n\tMigrateLegacyAlign: 6,\n\tAddCloud: 7,\n\tMakeUrlsValid: 8,\n\tAddScale: 9,\n\tAddRichText: 10,\n\tAddRichTextAttrs: 11,\n})\n\n/**\n * Version identifiers for geo shape migrations.\n *\n * @public\n */\nexport { geoShapeVersions }\n\n/**\n * Migration sequence for geo shape properties across different schema versions.\n * Handles evolution of geo shapes including URL support, label colors, alignment changes,\n * the transition from plain text to rich text, and support for attrs property on richText.\n *\n * @public\n */\nexport const geoShapeMigrations = createShapePropsMigrationSequence({\n\tsequence: [\n\t\t{\n\t\t\tid: geoShapeVersions.AddUrlProp,\n\t\t\tup: (props) => {\n\t\t\t\tprops.url = ''\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddLabelColor,\n\t\t\tup: (props) => {\n\t\t\t\tprops.labelColor = 'black'\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.RemoveJustify,\n\t\t\tup: (props) => {\n\t\t\t\tif (props.align === 'justify') {\n\t\t\t\t\tprops.align = 'start'\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddCheckBox,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddVerticalAlign,\n\t\t\tup: (props) => {\n\t\t\t\tprops.verticalAlign = 'middle'\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.MigrateLegacyAlign,\n\t\t\tup: (props) => {\n\t\t\t\tlet newAlign: TLDefaultHorizontalAlignStyle\n\t\t\t\tswitch (props.align) {\n\t\t\t\t\tcase 'start':\n\t\t\t\t\t\tnewAlign = 'start-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t\tcase 'end':\n\t\t\t\t\t\tnewAlign = 'end-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tnewAlign = 'middle-legacy'\n\t\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tprops.align = newAlign\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddCloud,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t\tdown: 'retired',\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.MakeUrlsValid,\n\t\t\tup: (props) => {\n\t\t\t\tif (!T.linkUrl.isValid(props.url)) {\n\t\t\t\t\tprops.url = ''\n\t\t\t\t}\n\t\t\t},\n\t\t\tdown: (_props) => {\n\t\t\t\t// noop\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddScale,\n\t\t\tup: (props) => {\n\t\t\t\tprops.scale = 1\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\tdelete props.scale\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddRichText,\n\t\t\tup: (props) => {\n\t\t\t\tprops.richText = toRichText(props.text)\n\t\t\t\tdelete props.text\n\t\t\t},\n\t\t\t// N.B. Explicitly no down state so that we force clients to update.\n\t\t\t// down: (props) => {\n\t\t\t// \tdelete props.richText\n\t\t\t// },\n\t\t},\n\t\t{\n\t\t\tid: geoShapeVersions.AddRichTextAttrs,\n\t\t\tup: (_props) => {\n\t\t\t\t// noop - attrs is optional so old records are valid\n\t\t\t},\n\t\t\tdown: (props) => {\n\t\t\t\t// Remove attrs from richText when migrating down\n\t\t\t\tif (props.richText && 'attrs' in props.richText) {\n\t\t\t\t\tdelete props.richText.attrs\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t],\n})\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles/StyleProp.ts"],
|
|
4
4
|
"sourcesContent": ["import { T } from '@tldraw/validate'\n\n/**\n * A `StyleProp` is a property of a shape that follows some special rules.\n *\n * 1. The same value can be set on lots of shapes at the same time.\n *\n * 2. The last used value is automatically saved and applied to new shapes.\n *\n * For example, {@link DefaultColorStyle} is a style prop used by tldraw's default shapes to set\n * their color. If you try selecting several shapes on tldraw.com and changing their color, you'll\n * see that the color is applied to all of them. Then, if you draw a new shape, it'll have the same\n * color as the one you just set.\n *\n * You can use styles in your own shapes by either defining your own (see {@link StyleProp.define}\n * and {@link StyleProp.defineEnum}) or using tldraw's default ones, like {@link DefaultColorStyle}.\n * When you define a shape, pass a `props` object describing all of your shape's properties, using\n * `StyleProp`s for the ones you want to be styles. See the\n * {@link https://github.com/tldraw/tldraw/tree/main/apps/examples | custom styles example}\n * for more.\n *\n * @public\n */\nexport class StyleProp<Type> implements T.Validatable<Type> {\n\t/**\n\t * Define a new {@link StyleProp}.\n\t *\n\t * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with\n\t * your app/library name.\n\t * @param options -\n\t * - `defaultValue`: The default value for this style prop.\n\t *\n\t * - `type`: Optionally, describe what type of data you expect for this style prop.\n\t *\n\t * @example\n\t * ```ts\n\t * import {T} from '@tldraw/validate'\n\t * import {StyleProp} from '@tldraw/tlschema'\n\t *\n\t * const MyLineWidthProp = StyleProp.define('myApp:lineWidth', {\n\t * defaultValue: 1,\n\t * type: T.number,\n\t * })\n\t * ```\n\t * @public\n\t */\n\tstatic define<Type>(\n\t\tuniqueId: string,\n\t\toptions: { defaultValue: Type; type?: T.Validatable<Type> }\n\t) {\n\t\tconst { defaultValue, type = T.any } = options\n\t\treturn new StyleProp<Type>(uniqueId, defaultValue, type)\n\t}\n\n\t/**\n\t * Define a new {@link StyleProp} as a list of possible values.\n\t *\n\t * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with\n\t * your app/library name.\n\t * @param options -\n\t * - `defaultValue`: The default value for this style prop.\n\t *\n\t * - `values`: An array of possible values of this style prop.\n\t *\n\t * @example\n\t * ```ts\n\t * import {StyleProp} from '@tldraw/tlschema'\n\t *\n\t * const MySizeProp = StyleProp.defineEnum('myApp:size', {\n\t * defaultValue: 'medium',\n\t * values: ['small', 'medium', 'large'],\n\t * })\n\t * ```\n\t */\n\tstatic defineEnum<const Values extends readonly unknown[]>(\n\t\tuniqueId: string,\n\t\toptions: { defaultValue: Values[number]; values: Values }\n\t) {\n\t\tconst { defaultValue, values } = options\n\t\treturn new EnumStyleProp<Values[number]>(uniqueId, defaultValue, values)\n\t}\n\n\t/** @internal */\n\tprotected constructor(\n\t\treadonly id: string,\n\t\tpublic defaultValue: Type,\n\t\treadonly type: T.Validatable<Type>\n\t) {}\n\n\tsetDefaultValue(value: Type) {\n\t\tthis.defaultValue = value\n\t}\n\n\tvalidate(value: unknown) {\n\t\treturn this.type.validate(value)\n\t}\n\n\tvalidateUsingKnownGoodVersion(prevValue: Type, newValue: unknown) {\n\t\tif (this.type.validateUsingKnownGoodVersion) {\n\t\t\treturn this.type.validateUsingKnownGoodVersion(prevValue, newValue)\n\t\t} else {\n\t\t\treturn this.validate(newValue)\n\t\t}\n\t}\n}\n\n/**\n * See {@link StyleProp} & {@link StyleProp.defineEnum}\n *\n * @public\n */\nexport class EnumStyleProp<T> extends StyleProp<T> {\n\t/** @internal */\n\tconstructor(id: string, defaultValue: T, values: readonly T[]) {\n\t\tsuper(id, defaultValue, T.literalEnum(...values))\n\t\tthis.values = [...values]\n\t}\n\n\treadonly values: T[]\n\n\t/**\n\t * Add new values to this enum style prop at runtime. This is useful for extending\n\t * the built-in styles with custom values (e.g. adding custom colors). Be sure to\n\t * also modify the associated types.\n\t *\n\t * @param newValues - The new values to add.\n\t *\n\t * @public\n\t */\n\taddValues(...newValues: T[]): void {\n\t\tfor (const v of newValues) {\n\t\t\tif (!this.values.includes(v)) {\n\t\t\t\tthis.values.push(v)\n\t\t\t}\n\t\t}\n\t\t// Rebuild the validator with the updated values\n\t\t;(this as any).type = T.literalEnum(...this.values)\n\t}\n\n\t/**\n\t * Remove values from this enum style prop at runtime. This is useful for narrowing\n\t * the built-in styles with custom values (e.g. adding custom colors). Be sure to\n\t * also modify the associated types.\n\t *\n\t * @param valuesToRemove - The values to remove.\n\t *\n\t * @public\n\t */\n\tremoveValues(...valuesToRemove: T[]): void {\n\t\tfor (const v of valuesToRemove) {\n\t\t\tif (this.values.includes(v)) {\n\t\t\t\tthis.values.splice(this.values.indexOf(v), 1)\n\t\t\t}\n\t\t}\n\t\t// Rebuild the validator with the updated values\n\t\t;(this as any).type = T.literalEnum(...this.values)\n\t}\n}\n\n/**\n * @public\n */\nexport type StylePropValue<T extends StyleProp<any>> = T extends StyleProp<infer U> ? U : never\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,SAAS;AAuBX,MAAM,UAA+C;AAAA;AAAA,EA4DjD,YACA,IACF,cACE,MACR;AAHQ;AACF;AACE;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
5
|
+
"mappings": "AAAA,SAAS,SAAS;AAuBX,MAAM,UAA+C;AAAA;AAAA,EA4DjD,YACA,IACF,cACE,MACR;AAHQ;AACF;AACE;AAAA,EACP;AAAA,EAHO;AAAA,EACF;AAAA,EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAxCV,OAAO,OACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,EAAE,IAAI,IAAI;AACvC,WAAO,IAAI,UAAgB,UAAU,cAAc,IAAI;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,OAAO,WACN,UACA,SACC;AACD,UAAM,EAAE,cAAc,OAAO,IAAI;AACjC,WAAO,IAAI,cAA8B,UAAU,cAAc,MAAM;AAAA,EACxE;AAAA,EASA,gBAAgB,OAAa;AAC5B,SAAK,eAAe;AAAA,EACrB;AAAA,EAEA,SAAS,OAAgB;AACxB,WAAO,KAAK,KAAK,SAAS,KAAK;AAAA,EAChC;AAAA,EAEA,8BAA8B,WAAiB,UAAmB;AACjE,QAAI,KAAK,KAAK,+BAA+B;AAC5C,aAAO,KAAK,KAAK,8BAA8B,WAAW,QAAQ;AAAA,IACnE,OAAO;AACN,aAAO,KAAK,SAAS,QAAQ;AAAA,IAC9B;AAAA,EACD;AACD;AAOO,MAAM,sBAAyB,UAAa;AAAA;AAAA,EAElD,YAAY,IAAY,cAAiB,QAAsB;AAC9D,UAAM,IAAI,cAAc,EAAE,YAAY,GAAG,MAAM,CAAC;AAChD,SAAK,SAAS,CAAC,GAAG,MAAM;AAAA,EACzB;AAAA,EAES;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWT,aAAa,WAAsB;AAClC,eAAW,KAAK,WAAW;AAC1B,UAAI,CAAC,KAAK,OAAO,SAAS,CAAC,GAAG;AAC7B,aAAK,OAAO,KAAK,CAAC;AAAA,MACnB;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,EAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,gBAAgB,gBAA2B;AAC1C,eAAW,KAAK,gBAAgB;AAC/B,UAAI,KAAK,OAAO,SAAS,CAAC,GAAG;AAC5B,aAAK,OAAO,OAAO,KAAK,OAAO,QAAQ,CAAC,GAAG,CAAC;AAAA,MAC7C;AAAA,IACD;AAEA;AAAC,IAAC,KAAa,OAAO,EAAE,YAAY,GAAG,KAAK,MAAM;AAAA,EACnD;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tldraw/tlschema",
|
|
3
3
|
"description": "tldraw infinite canvas SDK (schema).",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "5.1.0-canary.4a807daabeda",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
"vitest": "^3.2.4"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@tldraw/state": "
|
|
54
|
-
"@tldraw/store": "
|
|
55
|
-
"@tldraw/utils": "
|
|
56
|
-
"@tldraw/validate": "
|
|
53
|
+
"@tldraw/state": "5.1.0-canary.4a807daabeda",
|
|
54
|
+
"@tldraw/store": "5.1.0-canary.4a807daabeda",
|
|
55
|
+
"@tldraw/utils": "5.1.0-canary.4a807daabeda",
|
|
56
|
+
"@tldraw/validate": "5.1.0-canary.4a807daabeda"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"react": "^18.2.0 || ^19.2.1",
|
package/src/shapes/TLGeoShape.ts
CHANGED
|
@@ -201,7 +201,7 @@ const geoShapeVersions = createShapePropsMigrationIds('geo', {
|
|
|
201
201
|
*
|
|
202
202
|
* @public
|
|
203
203
|
*/
|
|
204
|
-
export { geoShapeVersions
|
|
204
|
+
export { geoShapeVersions }
|
|
205
205
|
|
|
206
206
|
/**
|
|
207
207
|
* Migration sequence for geo shape properties across different schema versions.
|
package/src/styles/TLTheme.ts
CHANGED
|
@@ -61,6 +61,20 @@ export interface TLThemeDefaultColors {
|
|
|
61
61
|
solid: string
|
|
62
62
|
cursor: string
|
|
63
63
|
noteBorder: string
|
|
64
|
+
/** Snap indicator line color */
|
|
65
|
+
snap: string
|
|
66
|
+
/** Selection outline stroke */
|
|
67
|
+
selectionStroke: string
|
|
68
|
+
/** Selection handle fill (typically the background color) */
|
|
69
|
+
selectionFill: string
|
|
70
|
+
/** Brush rectangle fill */
|
|
71
|
+
brushFill: string
|
|
72
|
+
/** Brush rectangle stroke */
|
|
73
|
+
brushStroke: string
|
|
74
|
+
/** Selected contrast color (handle fills, etc.) */
|
|
75
|
+
selectedContrast: string
|
|
76
|
+
/** Laser pointer color */
|
|
77
|
+
laser: string
|
|
64
78
|
black: TLDefaultColor
|
|
65
79
|
grey: TLDefaultColor
|
|
66
80
|
'light-violet': TLDefaultColor
|
|
@@ -164,6 +178,13 @@ export type TLThemeUiColorKeys =
|
|
|
164
178
|
| 'solid'
|
|
165
179
|
| 'cursor'
|
|
166
180
|
| 'noteBorder'
|
|
181
|
+
| 'snap'
|
|
182
|
+
| 'selectionStroke'
|
|
183
|
+
| 'selectionFill'
|
|
184
|
+
| 'brushFill'
|
|
185
|
+
| 'brushStroke'
|
|
186
|
+
| 'selectedContrast'
|
|
187
|
+
| 'laser'
|
|
167
188
|
|
|
168
189
|
/**
|
|
169
190
|
* A color palette for one color mode. UI colors are always required.
|