Table of contents

Extends ShapeUtil<Shape>.

abstract class BaseBoxShapeUtil<
  Shape extends TLBaseBoxShape,
> extends ShapeUtil<Shape> {}

Constructor

from ShapeUtil

Constructs a new instance of the ShapeUtil class

Parameters
NameDescription

editor

Editor

Properties

migrations

from ShapeUtil

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

from ShapeUtil

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

  1. Validation. Shapes will be validated using these props to stop bad data from being saved.
  2. 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

from ShapeUtil

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

static type: string

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

from ShapeUtil

Whether the shape can be double clicked to edit.

canEdit: TLShapeUtilFlag<Shape>

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

from ShapeUtil

Whether the shape's aspect ratio is locked.

isAspectRatioLocked: TLShapeUtilFlag<Shape>

onBeforeCreate

from ShapeUtil

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

onBeforeCreate?: TLOnBeforeCreateHandler<Shape>
Example
onBeforeCreate = (next) => {
  return { ...next, x: next.x + 1 }
}
Parameters
NameDescription

next

The next shape.


onBeforeUpdate

from ShapeUtil

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

onBeforeUpdate?: TLOnBeforeUpdateHandler<Shape>
Example
onBeforeUpdate = (prev, next) => {
  if (prev.x === next.x) {
    return { ...next, x: next.x + 1 }
  }
}
Parameters
NameDescription

prev

The previous shape.

next

The next shape.


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

from ShapeUtil

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

onDoubleClickEdge?: TLOnDoubleClickHandler<Shape>
Parameters
NameDescription

shape

The shape.


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

from ShapeUtil

A callback called when a shape finishes being editing.

onEditEnd?: TLOnEditEndHandler<Shape>
Parameters
NameDescription

shape

The shape.


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

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

from ShapeUtil

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

abstract component(shape: Shape): any
Parameters
NameDescription

shape

Shape

The shape.

Returns
any

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

from ShapeUtil

Get the default props for a shape.

abstract getDefaultProps(): Shape['props']

getGeometry()

getGeometry(shape: Shape): Geometry2d
Parameters
NameDescription

shape

Shape
Returns
Geometry2d

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

getHandleSnapGeometry(shape: Shape): HandleSnapGeometry
Parameters
NameDescription

shape

Shape
Returns
HandleSnapGeometry

getInterpolatedProps()

getInterpolatedProps(
  startShape: Shape,
  endShape: Shape,
  t: number
): Shape['props']
Parameters
NameDescription

startShape

Shape

endShape

Shape

t

number
Returns
Shape['props']

indicator()

from ShapeUtil

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

abstract indicator(shape: Shape): any
Parameters
NameDescription

shape

Shape

The shape.

Returns
any

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

from ShapeUtil

Get the shape as an SVG object.

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

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.


BaseBoxShapeToolBindingUtil