TLBaseShape • tldraw Docs

Table of contents

id
index
isLocked
meta
opacity
parentId
props
rotation
type
typeName
x
y
Properties

Base interface for all shapes in tldraw.

This interface defines the common properties that all shapes share, regardless of their specific type. Every default shape extends this base with additional type-specific properties.

Custom shapes should be defined by augmenting the TLGlobalShapePropsMap type and getting the shape type from the TLShape type.

interface TLBaseShape<Type extends string, Props extends object> {}

Example

// Define a default shape type
interface TLArrowShape
  extends TLBaseShape<
    'arrow',
    {
      kind: TLArrowShapeKind
      labelColor: TLDefaultColorStyle
      color: TLDefaultColorStyle
      fill: TLDefaultFillStyle
      dash: TLDefaultDashStyle
      size: TLDefaultSizeStyle
      arrowheadStart: TLArrowShapeArrowheadStyle
      arrowheadEnd: TLArrowShapeArrowheadStyle
      font: TLDefaultFontStyle
      start: VecModel
      end: VecModel
      bend: number
      richText: TLRichText
      labelPosition: number
      scale: number
      elbowMidPoint: number
    }
  > {}

// Create a shape instance
const arrowShape: TLArrowShape = {
  id: 'shape:abc123',
  typeName: 'shape',
  type: 'arrow',
  x: 100,
  y: 200,
  rotation: 0,
  index: 'a1',
  parentId: 'page:main',
  isLocked: false,
  opacity: 1,
  props: {
    kind: 'arc',
    start: { x: 0, y: 0 },
    end: { x: 100, y: 100 },
    // ... other props
  },
  meta: {},
}

Properties

id

readonly

readonly id: TLShapeId

index

index: IndexKey

isLocked

isLocked: boolean

opacity

opacity: TLOpacityType

parentId

parentId: TLParentId

props

props: Props

rotation

rotation: number

type

type: Type

typeName

readonly

readonly typeName: 'shape'

x

x: number

y

y: number