TextShapeUtil • tldraw SDK

Table of contents

Properties
Methods

Public class

Signature

class TextShapeUtil extends ShapeUtil<TLTextShape> {}

References

ShapeUtil, TLTextShape

Source

packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx

Properties

`canEdit`

Public property

Signature

canEdit: () => boolean

`isAspectRatioLocked`

Public property

Signature

isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>

References

TLShapeUtilFlag, TLTextShape

`migrations`

Public static property

Signature

static migrations: import('@tldraw/editor').TLPropsMigrations

References

TLPropsMigrations

`onBeforeCreate`

Public property

Signature

onBeforeCreate: (shape: TLTextShape) =>
  | {
      id: TLShapeId
      index: import('@tldraw/editor').IndexKey
      isLocked: boolean
      meta: import('@tldraw/editor').JsonObject
      opacity: number
      parentId: import('@tldraw/editor').TLParentId
      props: {
        autoSize: boolean
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        font: 'draw' | 'mono' | 'sans' | 'serif'
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        text: string
        textAlign: 'end' | 'middle' | 'start'
        w: number
      }
      rotation: number
      type: 'text'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

References

TLTextShape, TLShapeId, TLParentId

`onBeforeUpdate`

Public property

Signature

onBeforeUpdate: (
  prev: TLTextShape,
  next: TLTextShape
) =>
  | {
      id: TLShapeId
      index: import('@tldraw/editor').IndexKey
      isLocked: boolean
      meta: import('@tldraw/editor').JsonObject
      opacity: number
      parentId: import('@tldraw/editor').TLParentId
      props: {
        autoSize: boolean
        color:
          | 'black'
          | 'blue'
          | 'green'
          | 'grey'
          | 'light-blue'
          | 'light-green'
          | 'light-red'
          | 'light-violet'
          | 'orange'
          | 'red'
          | 'violet'
          | 'white'
          | 'yellow'
        font: 'draw' | 'mono' | 'sans' | 'serif'
        scale: number
        size: 'l' | 'm' | 's' | 'xl'
        text: string
        textAlign: 'end' | 'middle' | 'start'
        w: number
      }
      rotation: number
      type: 'text'
      typeName: 'shape'
      x: number
      y: number
    }
  | undefined

References

TLTextShape, TLShapeId, TLParentId

`onDoubleClickEdge`

Public property

Signature

onDoubleClickEdge: (shape: TLTextShape) =>
  | {
      id: TLShapeId
      props: {
        autoSize: boolean
        scale?: undefined
      }
      type: 'text'
    }
  | {
      id: TLShapeId
      props: {
        autoSize?: undefined
        scale: number
      }
      type: 'text'
    }
  | undefined

References

TLTextShape, TLShapeId

`onEditEnd`

Public property

Signature

onEditEnd: TLOnEditEndHandler<TLTextShape>

References

TLOnEditEndHandler, TLTextShape

`onResize`

Public property

Signature

onResize: TLOnResizeHandler<TLTextShape>

References

TLOnResizeHandler, TLTextShape

`props`

Public static property

Signature

static props: {
  autoSize: import('@tldraw/editor').Validator<boolean>
  color: import('@tldraw/editor').EnumStyleProp<
    | 'black'
    | 'blue'
    | 'green'
    | 'grey'
    | 'light-blue'
    | 'light-green'
    | 'light-red'
    | 'light-violet'
    | 'orange'
    | 'red'
    | 'violet'
    | 'white'
    | 'yellow'
  >
  font: import('@tldraw/editor').EnumStyleProp<
    'draw' | 'mono' | 'sans' | 'serif'
  >
  scale: import('@tldraw/editor').Validator<number>
  size: import('@tldraw/editor').EnumStyleProp<'l' | 'm' | 's' | 'xl'>
  text: import('@tldraw/editor').Validator<string>
  textAlign: import('@tldraw/editor').EnumStyleProp<
    'end' | 'middle' | 'start'
  >
  w: import('@tldraw/editor').Validator<number>
}

References

Validator, EnumStyleProp

`type`

Public static property

Signature

static type: 'text'

Methods

`component()`

Public method

Signature

component(shape: TLTextShape): import('react/jsx-runtime').JSX.Element

Parameters

Name	Description
`shape`	`TLTextShape`

Returns

import('react/jsx-runtime').JSX.Element

References

TLTextShape

`getDefaultProps()`

Public method

Signature

getDefaultProps(): TLTextShape['props']

References

TLTextShape

`getGeometry()`

Public method

Signature

getGeometry(shape: TLTextShape): Rectangle2d

Parameters

Name	Description
`shape`	`TLTextShape`

Returns

Rectangle2d

References

TLTextShape, Rectangle2d

`getMinDimensions()`

Public method

Signature

getMinDimensions(shape: TLTextShape): {
  height: number
  width: number
}

Parameters

Name	Description
`shape`	`TLTextShape`

Returns

{
  height: number
  width: number
}

References

TLTextShape

`indicator()`

Public method

Signature

indicator(shape: TLTextShape): import('react/jsx-runtime').JSX.Element | null

Parameters

Name	Description
`shape`	`TLTextShape`

Returns

import('react/jsx-runtime').JSX.Element | null

References

TLTextShape

`toSvg()`

Public method

Signature

toSvg(
  shape: TLTextShape,
  ctx: SvgExportContext
): import('react/jsx-runtime').JSX.Element

Parameters

Name	Description
`shape`	`TLTextShape`
`ctx`	`SvgExportContext`

Returns

import('react/jsx-runtime').JSX.Element

References

TLTextShape, SvgExportContext

TextShapeTool TextStylePickerSet