Table of contents

Extends ShapeUtil<TLTextShape>.

class TextShapeUtil extends ShapeUtil<TLTextShape> {}

Constructor

from ShapeUtil

Constructs a new instance of the ShapeUtil class

Parameters
NameDescription

editor

Editor

Properties

migrations

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

props

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>
}

type

static type: 'text'

canBeLaidOut

from ShapeUtil

Whether the shape participates in stacking, aligning, and distributing.

canBeLaidOut: TLShapeUtilFlag<Shape>

canCrop

from ShapeUtil

Whether the shape can be cropped.

canCrop: TLShapeUtilFlag<Shape>

canEdit

canEdit: () => boolean

canEditInReadOnly

from ShapeUtil

Whether the shape can be edited in read-only mode.

canEditInReadOnly: TLShapeUtilFlag<Shape>

canResize

from ShapeUtil

Whether the shape can be resized.

canResize: TLShapeUtilFlag<Shape>

canScroll

from ShapeUtil

Whether the shape can be scrolled while editing.

canScroll: TLShapeUtilFlag<Shape>

canSnap

from ShapeUtil

Whether the shape can be snapped to by another shape.

canSnap: TLShapeUtilFlag<Shape>

editor

from ShapeUtil
editor: Editor

hideResizeHandles

from ShapeUtil

Whether the shape should hide its resize handles when selected.

hideResizeHandles: TLShapeUtilFlag<Shape>

hideRotateHandle

from ShapeUtil

Whether the shape should hide its rotation handles when selected.

hideRotateHandle: TLShapeUtilFlag<Shape>

hideSelectionBoundsBg

from ShapeUtil

Whether the shape should hide its selection bounds background when selected.

hideSelectionBoundsBg: TLShapeUtilFlag<Shape>

hideSelectionBoundsFg

from ShapeUtil

Whether the shape should hide its selection bounds foreground when selected.

hideSelectionBoundsFg: TLShapeUtilFlag<Shape>

isAspectRatioLocked

isAspectRatioLocked: TLShapeUtilFlag<TLTextShape>

onBeforeCreate

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

onBeforeUpdate

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

onChildrenChange

from ShapeUtil

A callback called when a shape's children change.

onChildrenChange?: TLOnChildrenChangeHandler<Shape>
Parameters
NameDescription

shape

The shape.


onClick

from ShapeUtil

A callback called when a shape is clicked.

onClick?: TLOnClickHandler<Shape>
Parameters
NameDescription

shape

The shape.


onDoubleClick

from ShapeUtil

A callback called when a shape is double clicked.

onDoubleClick?: TLOnDoubleClickHandler<Shape>
Parameters
NameDescription

shape

The shape.


onDoubleClickEdge

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

onDoubleClickHandle

from ShapeUtil

A callback called when a shape's handle is double clicked.

onDoubleClickHandle?: TLOnDoubleClickHandleHandler<Shape>
Parameters
NameDescription

shape

The shape.

handle

The handle that is double-clicked.


onDragShapesOut

from ShapeUtil

A callback called when some other shapes are dragged out of this one.

onDragShapesOut?: TLOnDragHandler<Shape>
Parameters
NameDescription

shape

The shape.

shapes

The shapes that are being dragged out.


onDragShapesOver

from ShapeUtil

A callback called when some other shapes are dragged over this one.

onDragShapesOver?: TLOnDragHandler<Shape>
Example
onDragShapesOver = (shape, shapes) => {
  this.editor.reparentShapes(shapes, shape.id)
}
Parameters
NameDescription

shape

The shape.

shapes

The shapes that are being dragged over this one.


onDropShapesOver

from ShapeUtil

A callback called when some other shapes are dropped over this one.

onDropShapesOver?: TLOnDragHandler<Shape>
Parameters
NameDescription

shape

The shape.

shapes

The shapes that are being dropped over this one.


onEditEnd

onEditEnd: TLOnEditEndHandler<TLTextShape>

onHandleDrag

from ShapeUtil

A callback called when a shape's handle changes.

onHandleDrag?: TLOnHandleDragHandler<Shape>
Parameters
NameDescription

shape

The current shape.

info

An object containing the handle and whether the handle is 'precise' or not.


onResize

onResize: TLOnResizeHandler<TLTextShape>

onResizeEnd

from ShapeUtil

A callback called when a shape finishes resizing.

onResizeEnd?: TLOnResizeEndHandler<Shape>
Parameters
NameDescription

initial

The shape at the start of the resize.

current

The current shape.


onResizeStart

from ShapeUtil

A callback called when a shape starts being resized.

onResizeStart?: TLOnResizeStartHandler<Shape>
Parameters
NameDescription

shape

The shape.


onRotate

from ShapeUtil

A callback called when a shape changes from a rotation.

onRotate?: TLOnRotateHandler<Shape>
Parameters
NameDescription

initial

The shape at the start of the rotation.

current

The current shape.


onRotateEnd

from ShapeUtil

A callback called when a shape finishes rotating.

onRotateEnd?: TLOnRotateEndHandler<Shape>
Parameters
NameDescription

initial

The shape at the start of the rotation.

current

The current shape.


onRotateStart

from ShapeUtil

A callback called when a shape starts being rotated.

onRotateStart?: TLOnRotateStartHandler<Shape>
Parameters
NameDescription

shape

The shape.


onTranslate

from ShapeUtil

A callback called when a shape changes from a translation.

onTranslate?: TLOnTranslateHandler<Shape>
Parameters
NameDescription

initial

The shape at the start of the translation.

current

The current shape.


onTranslateEnd

from ShapeUtil

A callback called when a shape finishes translating.

onTranslateEnd?: TLOnTranslateEndHandler<Shape>
Parameters
NameDescription

initial

The shape at the start of the translation.

current

The current shape.


onTranslateStart

from ShapeUtil

A callback called when a shape starts being translated.

onTranslateStart?: TLOnTranslateStartHandler<Shape>
Parameters
NameDescription

shape

The shape.


Methods

canBind()

from ShapeUtil

Whether the shape can be bound to. See TLShapeUtilCanBindOpts for details.

canBind(opts: TLShapeUtilCanBindOpts<Shape>): boolean
Parameters
NameDescription

opts

TLShapeUtilCanBindOpts<Shape>
Returns
boolean

canDropShapes()

from ShapeUtil

Get whether the shape can receive children of a given type.

canDropShapes(shape: Shape, shapes: TLShape[]): boolean
Parameters
NameDescription

shape

Shape

The shape type.

shapes

TLShape[]

The shapes that are being dropped.

Returns
boolean

canReceiveNewChildrenOfType()

from ShapeUtil

Get whether the shape can receive children of a given type.

canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean
Parameters
NameDescription

shape

Shape

type

TLShape['type']

The shape type.

Returns
boolean

component()

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

shape

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

getBoundsSnapGeometry()

from ShapeUtil

Get the geometry to use when snapping to this this shape in translate/resize operations. See BoundsSnapGeometry for details.

getBoundsSnapGeometry(shape: Shape): BoundsSnapGeometry
Parameters
NameDescription

shape

Shape
Returns
BoundsSnapGeometry

getCanvasSvgDefs()

from ShapeUtil

Return elements to be added to the <defs> section of the canvases SVG context. This can be used to define SVG content (e.g. patterns & masks) that can be referred to by ID from svg elements returned by component.

Each def should have a unique key. If multiple defs from different shapes all have the same key, only one will be used.

getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]

getDefaultProps()

getDefaultProps(): TLTextShape['props']

getGeometry()

getGeometry(shape: TLTextShape): Rectangle2d
Parameters
NameDescription

shape

TLTextShape
Returns
Rectangle2d

getHandles()

from ShapeUtil

Get an array of handle models for the shape. This is an optional method.

getHandles?(shape: Shape): TLHandle[]
Example
util.getHandles?.(myShape)
Parameters
NameDescription

shape

Shape

The shape.

Returns
TLHandle[]

getHandleSnapGeometry()

from ShapeUtil

Get the geometry to use when snapping handles to this shape. See HandleSnapGeometry for details.

getHandleSnapGeometry(shape: Shape): HandleSnapGeometry
Parameters
NameDescription

shape

Shape
Returns
HandleSnapGeometry

getMinDimensions()

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

shape

TLTextShape
Returns
{
  height: number
  width: number
}

indicator()

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

shape

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

toBackgroundSvg()

from ShapeUtil

Get the shape's background layer as an SVG object.

toBackgroundSvg?(
  shape: Shape,
  ctx: SvgExportContext
): null | Promise<null | ReactElement> | ReactElement
Parameters
NameDescription

shape

Shape

The shape.

ctx

SvgExportContext

ctx - The export context for the SVG - used for adding e.g. <def>s

Returns
null | Promise<null | ReactElement> | ReactElement

An SVG element.


toSvg()

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

shape

TLTextShape

ctx

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

TextShapeToolTextStylePickerSet