tldraw SDK

Table of contents

migrations
props
type
editor
Properties
Methods

abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {}

Constructor

Constructs a new instance of the ShapeUtil class

Parameters

Name	Description
`editor`	`Editor`

Properties

migrations

staticoptional

Migrations allow you to make changes to a shape's props over time. Read the shape prop migrations guide for more information.

static migrations?: LegacyMigrations | MigrationSequence | TLPropsMigrations

props

staticoptional

Props allow you to define the shape's properties in a way that the editor can understand. This has two main uses:

Validation. Shapes will be validated using these props to stop bad data from being saved.
Styles. Each StyleProp in the props can be set on many shapes at once, and will be remembered from one shape to the next.

static props?: RecordProps<TLUnknownShape>

Example

import {
  DefaultColorStyle,
  ShapeUtil,
  T,
  TLBaseShape,
  TLDefaultColorStyle,
} from 'tldraw'

type MyShape = TLBaseShape<
  'mine',
  {
    color: TLDefaultColorStyle
    text: string
  }
>

class MyShapeUtil extends ShapeUtil<MyShape> {
  static props = {
    // we use tldraw's built-in color style:
    color: DefaultColorStyle,
    // validate that the text prop is a string:
    text: T.string,
  }
}

type

static

The type of the shape util, which should match the shape's type.

static type: string

editor

editor: Editor

Methods

canBeLaidOut()

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

canBeLaidOut(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canBind()

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

canBind(_opts: TLShapeUtilCanBindOpts<Shape>): boolean

Parameters

Name	Description
`_opts`	`TLShapeUtilCanBindOpts<Shape>`

Returns

boolean

canCrop()

Whether the shape can be cropped.

canCrop(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canDropShapes()

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

canDropShapes(_shape: Shape, _shapes: TLShape[]): boolean

Parameters

Name	Description
`_shape`	`Shape`
`_shapes`	`TLShape[]`

Returns

boolean

canEdit()

Whether the shape can be double clicked to edit.

canEdit(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canEditInReadOnly()

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

canEditInReadOnly(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canReceiveNewChildrenOfType()

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

canReceiveNewChildrenOfType(_shape: Shape, _type: TLShape['type']): boolean

Parameters

Name	Description
`_shape`	`Shape`
`_type`	`TLShape['type']`

Returns

boolean

canResize()

Whether the shape can be resized.

canResize(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canScroll()

Whether the shape can be scrolled while editing.

canScroll(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canSnap()

Whether the shape can be snapped to by another shape.

canSnap(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

component()

Get a JSX element for the shape (as an HTML element).

abstract component(shape: Shape): any

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

any

getBoundsSnapGeometry()

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

getBoundsSnapGeometry(_shape: Shape): BoundsSnapGeometry

Parameters

Name	Description
`_shape`	`Shape`

Returns

BoundsSnapGeometry

getCanvasSvgDefs()

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()

Get the default props for a shape.

abstract getDefaultProps(): Shape['props']

getGeometry()

Get the shape's geometry.

abstract getGeometry(shape: Shape): Geometry2d

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

Geometry2d

getHandles()

optional

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

getHandles?(shape: Shape): TLHandle[]

Example

util.getHandles?.(myShape)

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLHandle[]

getHandleSnapGeometry()

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

getHandleSnapGeometry(_shape: Shape): HandleSnapGeometry

Parameters

Name	Description
`_shape`	`Shape`

Returns

HandleSnapGeometry

getInterpolatedProps()

optional

Get the interpolated props for an animating shape. This is an optional method.

getInterpolatedProps?(
  startShape: Shape,
  endShape: Shape,
  progress: number
): Shape['props']

Example

util.getInterpolatedProps?.(startShape, endShape, t)

Parameters

Name	Description
`startShape`	`Shape` The initial shape.
`endShape`	`Shape` The initial shape.
`progress`	`number` The normalized progress between zero (start) and 1 (end).

Returns

Shape['props']

getText()

getText(_shape: Shape): string | undefined

Parameters

Name	Description
`_shape`	`Shape`

Returns

string | undefined

hideResizeHandles()

Whether the shape should hide its resize handles when selected.

hideResizeHandles(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

hideRotateHandle()

Whether the shape should hide its rotation handles when selected.

hideRotateHandle(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

hideSelectionBoundsBg()

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

hideSelectionBoundsBg(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

hideSelectionBoundsFg()

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

hideSelectionBoundsFg(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

indicator()

Get JSX describing the shape's indicator (as an SVG element).

abstract indicator(shape: Shape): any

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

any

isAspectRatioLocked()

Whether the shape's aspect ratio is locked.

isAspectRatioLocked(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

onBeforeCreate()

optional

A callback called just before a shape is created. This method provides a last chance to modify the created shape.

onBeforeCreate?(next: Shape): Shape | void

Example

onBeforeCreate = (next) => {
  return { ...next, x: next.x + 1 }
}

Parameters

Name	Description
`next`	`Shape` The next shape.

Returns

Shape | void

The next shape or void.

onBeforeUpdate()

optional

A callback called just before a shape is updated. This method provides a last chance to modify the updated shape.

onBeforeUpdate?(prev: Shape, next: Shape): Shape | void

Example

onBeforeUpdate = (prev, next) => {
  if (prev.x === next.x) {
    return { ...next, x: next.x + 1 }
  }
}

Parameters

Name	Description
`prev`	`Shape` The previous shape.
`next`	`Shape` The next shape.

Returns

Shape | void

The next shape or void.

onChildrenChange()

optional

A callback called when a shape's children change.

onChildrenChange?(shape: Shape): TLShapePartial[] | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial[] | void

An array of shape updates, or void.

onClick()

optional

A callback called when a shape is clicked.

onClick?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDoubleClick()

optional

A callback called when a shape is double clicked.

onDoubleClick?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDoubleClickEdge()

optional

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

onDoubleClickEdge?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDoubleClickHandle()

optional

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

onDoubleClickHandle?(
  shape: Shape,
  handle: TLHandle
): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.
`handle`	`TLHandle` The handle that is double-clicked.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDragShapesOut()

optional

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

onDragShapesOut?(shape: Shape, shapes: TLShape[]): void

Parameters

Name	Description
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dragged out.

Returns

void

onDragShapesOver()

optional

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

onDragShapesOver?(shape: Shape, shapes: TLShape[]): void

Example

onDragShapesOver = (shape, shapes) => {
  this.editor.reparentShapes(shapes, shape.id)
}

Parameters

Name	Description
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dragged over this one.

Returns

void

onDropShapesOver()

optional

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

onDropShapesOver?(shape: Shape, shapes: TLShape[]): void

Parameters

Name	Description
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dropped over this one.

Returns

void

onEditEnd()

optional

A callback called when a shape finishes being editing.

onEditEnd?(shape: Shape): void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

void

onHandleDrag()

optional

A callback called when a shape's handle changes.

onHandleDrag?(
  shape: Shape,
  info: TLHandleDragInfo<Shape>
): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The current shape.
`info`	`TLHandleDragInfo<Shape>` An object containing the handle and whether the handle is 'precise' or not.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onResize()

optional

A callback called when a shape changes from a resize.

onResize?(
  shape: Shape,
  info: TLResizeInfo<Shape>
): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void

Parameters

Name	Description
`shape`	`Shape` The shape at the start of the resize.
`info`	`TLResizeInfo<Shape>` Info about the resize.

Returns

Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void

A change to apply to the shape, or void.

onResizeEnd()

optional

A callback called when a shape finishes resizing.

onResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the resize.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onResizeStart()

optional

A callback called when a shape starts being resized.

onResizeStart?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onRotate()

optional

A callback called when a shape changes from a rotation.

onRotate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the rotation.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onRotateEnd()

optional

A callback called when a shape finishes rotating.

onRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the rotation.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onRotateStart()

optional

A callback called when a shape starts being rotated.

onRotateStart?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onTranslate()

optional

A callback called when a shape changes from a translation.

onTranslate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the translation.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onTranslateEnd()

optional

A callback called when a shape finishes translating.

onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`initial`	`Shape` The shape at the start of the translation.
`current`	`Shape` The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onTranslateStart()

optional

A callback called when a shape starts being translated.

onTranslateStart?(shape: Shape): TLShapePartial<Shape> | void

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

toBackgroundSvg()

optional

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

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

Parameters

Name	Description
`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()

optional

Get the shape as an SVG object.

toSvg?(
  shape: Shape,
  ctx: SvgExportContext
): null | Promise<null | ReactElement> | ReactElement

Parameters

Name	Description
`shape`	`Shape` The shape.
`ctx`	`SvgExportContext` The export context for the SVG - used for adding e.g. <def>s

Returns

null | Promise<null | ReactElement> | ReactElement

An SVG element.