ShapeUtil

Public Class

Signature

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

References

TLUnknownShape

Constructor

Public Constructor

Constructs a new instance of the ShapeUtil class

Parameters

Editor

T['type']

References

Editor

Properties

canBind

Public Property

Whether the shape can be bound to by an arrow.

Parameters

Signature

canBind: <K>(_shape: T, _otherShape?: K | undefined) => boolean

canCrop

Public Property

Whether the shape can be cropped.

Signature

canCrop: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

canEdit

Public Property

Whether the shape can be double clicked to edit.

Signature

canEdit: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

canResize

Public Property

Whether the shape can be resized.

Signature

canResize: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

canScroll

Public Property

Whether the shape can be scrolled while editing.

Signature

canScroll: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

canUnmount

Public Property

Whether the shape should unmount when not visible in the editor. Consider keeping this to false if the shape's component has local state.

Signature

canUnmount: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

editor

Public Property

Signature

editor: Editor

References

Editor

getEditingBounds

Public Property

Bounds of the shape to edit.

Note: this could be a text area within a shape for example arrow labels.

Signature

getEditingBounds: (shape: T) => Box2d

References

Box2d

hideResizeHandles

Public Property

Whether the shape should hide its resize handles when selected.

Signature

hideResizeHandles: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

hideRotateHandle

Public Property

Whether the shape should hide its resize handles when selected.

Signature

hideRotateHandle: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

hideSelectionBoundsBg

Public Property

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

Signature

hideSelectionBoundsBg: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

hideSelectionBoundsFg

Public Property

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

Signature

hideSelectionBoundsFg: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

isAspectRatioLocked

Public Property

Whether the shape's aspect ratio is locked.

Signature

isAspectRatioLocked: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

isClosed

Public Property

Whether the shape's outline is closed.

Signature

isClosed: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

onBeforeCreate

Public Property

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

Example

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

Parameters

Signature

onBeforeCreate?: TLOnBeforeCreateHandler<T>

References

TLOnBeforeCreateHandler

onBeforeUpdate

Public Property

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

Example

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

Parameters

Signature

onBeforeUpdate?: TLOnBeforeUpdateHandler<T>

References

TLOnBeforeUpdateHandler

onChildrenChange

Public Property

A callback called when a shape's children change.

Parameters

Signature

onChildrenChange?: TLOnChildrenChangeHandler<T>

References

TLOnChildrenChangeHandler

onClick

Public Property

A callback called when a shape is clicked.

Parameters

Signature

onClick?: TLOnClickHandler<T>

References

TLOnClickHandler

onDoubleClick

Public Property

A callback called when a shape is double clicked.

Parameters

Signature

onDoubleClick?: TLOnDoubleClickHandler<T>

References

TLOnDoubleClickHandler

onDoubleClickEdge

Public Property

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

Parameters

Signature

onDoubleClickEdge?: TLOnDoubleClickHandler<T>

References

TLOnDoubleClickHandler

onDoubleClickHandle

Public Property

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

Parameters

Signature

onDoubleClickHandle?: TLOnDoubleClickHandleHandler<T>

References

TLOnDoubleClickHandleHandler

onDragShapesOut

Public Property

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

Parameters

Signature

onDragShapesOut?: TLOnDragHandler<T>

References

TLOnDragHandler

onDragShapesOver

Public Property

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

Example

onDragShapesOver = (shape, shapes) => {
  return { shouldHint: true }
}

Parameters

Signature

onDragShapesOver?: TLOnDragHandler<
  T,
  {
    shouldHint: boolean
  }
>

References

TLOnDragHandler

onDropShapesOver

Public Property

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

Parameters

Signature

onDropShapesOver?: TLOnDragHandler<T>

References

TLOnDragHandler

onEditEnd

Public Property

A callback called when a shape finishes being editing.

Parameters

Signature

onEditEnd?: TLOnEditEndHandler<T>

References

TLOnEditEndHandler

onHandleChange

Public Property

A callback called when a shape's handle changes.

Parameters

Signature

onHandleChange?: TLOnHandleChangeHandler<T>

References

TLOnHandleChangeHandler

onResize

Public Property

A callback called when a shape changes from a resize.

Parameters

Signature

onResize?: TLOnResizeHandler<T>

References

TLOnResizeHandler

onResizeEnd

Public Property

A callback called when a shape finishes resizing.

Parameters

Signature

onResizeEnd?: TLOnResizeEndHandler<T>

References

TLOnResizeEndHandler

onResizeStart

Public Property

A callback called when a shape starts being resized.

Parameters

Signature

onResizeStart?: TLOnResizeStartHandler<T>

References

TLOnResizeStartHandler

onRotate

Public Property

A callback called when a shape changes from a rotation.

Parameters

Signature

onRotate?: TLOnRotateHandler<T>

References

TLOnRotateHandler

onRotateEnd

Public Property

A callback called when a shape finishes rotating.

Parameters

Signature

onRotateEnd?: TLOnRotateEndHandler<T>

References

TLOnRotateEndHandler

onRotateStart

Public Property

A callback called when a shape starts being rotated.

Parameters

Signature

onRotateStart?: TLOnRotateStartHandler<T>

References

TLOnRotateStartHandler

onTranslate

Public Property

A callback called when a shape changes from a translation.

Parameters

Signature

onTranslate?: TLOnTranslateHandler<T>

References

TLOnTranslateHandler

onTranslateEnd

Public Property

A callback called when a shape finishes translating.

Parameters

Signature

onTranslateEnd?: TLOnTranslateEndHandler<T>

References

TLOnTranslateEndHandler

onTranslateStart

Public Property

A callback called when a shape starts being translated.

Parameters

Signature

onTranslateStart?: TLOnTranslateStartHandler<T>

References

TLOnTranslateStartHandler

type

Public Readonly Property

Signature

readonly type: T['type']

type

Public Static Property

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

Signature

static type: string

Methods

bounds()

Public Method

Get the cached bounds for the shape.

Parameters

T

Returns

Box2d

References

Box2d

canDropShapes()

Public Method

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

Parameters

T

TLShape[]

Returns

boolean

References

TLShape

canReceiveNewChildrenOfType()

Public Method

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

Parameters

T

TLShape['type']

Returns

boolean

References

TLShape

center()

Public Method

Get the shape's cached center.

Parameters

T

Returns

Vec2dModel

References

Vec2dModel

defaultProps()

Public Method

Get the default props for a shape.

Parameters

None

Returns

T['props']

getBounds()

Public Method

Get the (not cached) bounds for the shape.

Parameters

T

Returns

Box2d

References

Box2d

getCenter()

Public Method

Get the shape's (not cached) center.

Parameters

T

Returns

Vec2dModel

References

Vec2dModel

getHandles()

Public Method

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

Example

util.getHandles?.(myShape)

Parameters

T

Returns

TLHandle[]

References

TLHandle

getOutline()

Public Method

Get the shape's (not cached) outline. Do not override this method!

Parameters

T

Returns

Vec2dModel[]

References

Vec2dModel

handles()

Public Method

Get the cached handles (this should not be overridden!)

Parameters

T

Returns

TLHandle[]

References

TLHandle

hitTestLineSegment()

Public Method

Get whether a point intersects the shape.

Parameters

T

VecLike

VecLike

Returns

boolean

Whether the line segment intersects the shape.

References

VecLike

hitTestPoint()

Public Method

Get whether a point intersects the shape.

Parameters

T

VecLike

Returns

boolean

Whether the point intersects the shape.

References

VecLike

indicator()

Public Method

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

Parameters

T

Returns

any

outline()

Public Method

Get the shape's outline. Do not override this method!

Parameters

T

Returns

Vec2dModel[]

References

Vec2dModel

render()

Public Method

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

Parameters

T

Returns

any

snapPoints()

Public Method

Get the shape's snap points.

Parameters

T

Returns

import('@tldraw/primitives').Vec2d[]

References

Vec2d

toBackgroundSvg()

Public Method

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

Parameters

T

string | undefined

TLExportColors

Returns

null | Promise<SVGElement> | SVGElement

An SVG element.

References

TLExportColors, Promise, SVGElement

toSvg()

Public Method

Get the shape as an SVG object.

Parameters

T

string | undefined

TLExportColors

Returns

Promise<SVGElement> | SVGElement

An SVG element.

References

TLExportColors, Promise, SVGElement