TLShapeUtil

Public Class

Signature

abstract class TLShapeUtil<T extends TLUnknownShape> {}

References

TLUnknownShape

Constructor

Public Constructor

Constructs a new instance of the TLShapeUtil class

Parameters

App

T['type']

References

App

Properties

app

Public Property

Signature

app: App

References

App

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 can be bound to by an arrow.

Signature

canUnmount: TLShapeUtilFlag<T>

References

TLShapeUtilFlag

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?: OnBeforeCreateHandler<T>

References

OnBeforeCreateHandler

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?: OnBeforeUpdateHandler<T>

References

OnBeforeUpdateHandler

onChildrenChange

Public Property

A callback called when a shape's children change.

Parameters

Signature

onChildrenChange?: OnChildrenChangeHandler<T>

References

OnChildrenChangeHandler

onClick

Public Property

A callback called when a shape is clicked.

Parameters

Signature

onClick?: OnClickHandler<T>

References

OnClickHandler

onDoubleClick

Public Property

A callback called when a shape is double clicked.

Parameters

Signature

onDoubleClick?: OnDoubleClickHandler<T>

References

OnDoubleClickHandler

onDoubleClickEdge

Public Property

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

Parameters

Signature

onDoubleClickEdge?: OnDoubleClickHandler<T>

References

OnDoubleClickHandler

onDoubleClickHandle

Public Property

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

Parameters

Signature

onDoubleClickHandle?: OnDoubleClickHandleHandler<T>

References

OnDoubleClickHandleHandler

onDragShapesOut

Public Property

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

Parameters

Signature

onDragShapesOut?: OnDragHandler<T>

References

OnDragHandler

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?: OnDragHandler<
  T,
  {
    shouldHint: boolean
  }
>

References

OnDragHandler

onDropShapesOver

Public Property

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

Parameters

Signature

onDropShapesOver?: OnDragHandler<T>

References

OnDragHandler

onEditEnd

Public Property

A callback called when a shape finishes being editing.

Parameters

Signature

onEditEnd?: OnEditEndHandler<T>

References

OnEditEndHandler

onHandleChange

Public Property

A callback called when a shape's handle changes.

Parameters

Signature

onHandleChange?: OnHandleChangeHandler<T>

References

OnHandleChangeHandler

onResize

Public Property

A callback called when a shape changes from a resize.

Parameters

Signature

onResize?: OnResizeHandler<T>

References

OnResizeHandler

onResizeEnd

Public Property

A callback called when a shape finishes resizing.

Parameters

Signature

onResizeEnd?: OnResizeEndHandler<T>

References

OnResizeEndHandler

onResizeStart

Public Property

A callback called when a shape starts being resized.

Parameters

Signature

onResizeStart?: OnResizeStartHandler<T>

References

OnResizeStartHandler

onRotate

Public Property

A callback called when a shape changes from a rotation.

Parameters

Signature

onRotate?: OnRotateHandler<T>

References

OnRotateHandler

onRotateEnd

Public Property

A callback called when a shape finishes rotating.

Parameters

Signature

onRotateEnd?: OnRotateEndHandler<T>

References

OnRotateEndHandler

onRotateStart

Public Property

A callback called when a shape starts being rotated.

Parameters

Signature

onRotateStart?: OnRotateStartHandler<T>

References

OnRotateStartHandler

onTranslate

Public Property

A callback called when a shape changes from a translation.

Parameters

Signature

onTranslate?: OnTranslateHandler<T>

References

OnTranslateHandler

onTranslateEnd

Public Property

A callback called when a shape finishes translating.

Parameters

Signature

onTranslateEnd?: OnTranslateEndHandler<T>

References

OnTranslateEndHandler

onTranslateStart

Public Property

A callback called when a shape starts being translated.

Parameters

Signature

onTranslateStart?: OnTranslateStartHandler<T>

References

OnTranslateStartHandler

type

Public Readonly Property

Signature

readonly type: T['type']

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

TLShapeType

Returns

boolean

References

TLShapeType

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

is()

Public Method

Check if a shape is of this type.

Parameters

TLBaseShape<string, object>

Returns

shape is T

Whether the shape is of this type.

References

TLBaseShape, shape

outline()

Public Method

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

Parameters

T

Returns

Vec2dModel[]

References

Vec2dModel

point()

Public Method

Get the cached point. 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

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

transform()

Public Method

Get the cached transform. Do not override this method!

Parameters

T

Returns

Matrix2d

References

Matrix2d