TextShapeUtil

Public class

class TextShapeUtil extends ShapeUtil<TLTextShape> {}

ShapeUtil, TLTextShape

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

Properties

canEdit

Public property

canEdit: () => boolean

isAspectRatioLocked

Public property

isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>

TLShapeUtilFlag, TLTextShape

migrations

Public static property

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

Migrations

onBeforeCreate

Public property

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

TLTextShape, TLParentId, TLShapeId

onBeforeUpdate

Public property

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

TLTextShape, TLParentId, TLShapeId

onDoubleClickEdge

Public property

onDoubleClickEdge: (shape: TLTextShape) =>
  | {
      id: import('@tldraw/editor').TLShapeId
      type: 'text'
      props: {
        autoSize: boolean
        scale?: undefined
      }
    }
  | {
      id: import('@tldraw/editor').TLShapeId
      type: 'text'
      props: {
        scale: number
        autoSize?: undefined
      }
    }
  | undefined

TLTextShape, TLShapeId

onEditEnd

Public property

onEditEnd: TLOnEditEndHandler<TLTextShape>

TLOnEditEndHandler, TLTextShape

onResize

Public property

onResize: TLOnResizeHandler<TLTextShape>

TLOnResizeHandler, TLTextShape

props

Public static property

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

EnumStyleProp, Validator

type

Public static property

static type: 'text'

Methods

component()

Public method

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

TLTextShape

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

TLTextShape

getDefaultProps()

Public method

getDefaultProps(): TLTextShape['props']

TLTextShape

getGeometry()

Public method

getGeometry(shape: TLTextShape): Rectangle2d

TLTextShape

Rectangle2d

TLTextShape, Rectangle2d

getMinDimensions()

Public method

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

TLTextShape

{
  height: number
  width: number
}

TLTextShape

indicator()

Public method

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

TLTextShape

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

TLTextShape

toSvg()

Public method

toSvg(shape: TLTextShape, ctx: SvgExportContext): SVGGElement

TLTextShape

SvgExportContext

SVGGElement

TLTextShape, SvgExportContext