StyleProp

Public class

A StyleProp is a property of a shape that follows some special rules.

1. The same value can be set on lots of shapes at the same time.

2. The last used value is automatically saved and applied to new shapes.

For example, DefaultColorStyle is a style prop used by tldraw's default shapes to set their color. If you try selecting several shapes on tldraw.com and changing their color, you'll see that the color is applied to all of them. Then, if you draw a new shape, it'll have the same color as the one you just set.

You can use styles in your own shapes by either defining your own (see StyleProp.define and StyleProp.defineEnum) or using tldraw's default ones, like DefaultColorStyle. When you define a shape, pass a props object describing all of your shape's properties, using StyleProps for the ones you want to be styles. See the custom styles example for more.

class StyleProp<Type> implements T.Validatable<Type> {}

packages/tlschema/src/styles/StyleProp.ts

Properties

defaultValue

Public readonly property

readonly defaultValue: Type

id

Public readonly property

readonly id: string

type

Public readonly property

readonly type: T.Validatable<Type>

Methods

define()

Public static method

Define a new StyleProp.

import { StyleProp } from '@tldraw/tlschema'
import { T } from '@tldraw/validate'

const MyLineWidthProp = StyleProp.define('myApp:lineWidth', {
  defaultValue: 1,
  type: T.number,
})

static define<Type>(
  uniqueId: string,
  options: {
    defaultValue: Type
    type?: T.Validatable<Type>
  }
): StyleProp<Type>

string

{
  defaultValue: Type
  type?: T.Validatable<Type>
}

StyleProp<Type>

StyleProp

defineEnum()

Public static method

Define a new StyleProp as a list of possible values.

import { StyleProp } from '@tldraw/tlschema'

const MySizeProp = StyleProp.defineEnum('myApp:size', {
  defaultValue: 'medium',
  values: ['small', 'medium', 'large'],
})

static defineEnum<const Values extends readonly unknown[]>(
  uniqueId: string,
  options: {
    defaultValue: Values[number]
    values: Values
  }
): EnumStyleProp<Values[number]>

string

{
  defaultValue: Values[number]
  values: Values
}

EnumStyleProp<Values[number]>

EnumStyleProp

validate()

Public method

validate(value: unknown): Type

unknown

Type

validateUsingKnownGoodVersion()

Public method

validateUsingKnownGoodVersion(prevValue: Type, newValue: unknown): Type

Type

unknown

Type