Table of contents

Public class

Signature
References

TLUnknownShape

Source

packages/editor/src/lib/editor/shapes/ShapeUtil.ts


Constructor

Public constructor

Constructs a new instance of the ShapeUtil class

Parameters
NameDescription

editor

References

Editor


Properties

canBind

Public property

Whether the shape can be bound to by an arrow.

Signature
Parameters
NameDescription

_otherShape

The other shape attempting to bind to this shape.


canCrop

Public property

Whether the shape can be cropped.

Signature
References

TLShapeUtilFlag


canEdit

Public property

Whether the shape can be double clicked to edit.

Signature
References

TLShapeUtilFlag


canEditInReadOnly

Public property

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

Signature
References

TLShapeUtilFlag


canResize

Public property

Whether the shape can be resized.

Signature
References

TLShapeUtilFlag


canScroll

Public property

Whether the shape can be scrolled while editing.

Signature
References

TLShapeUtilFlag


canSnap

Public property

Whether the shape can be snapped to by another shape.

Signature
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
References

TLShapeUtilFlag


editor

Public property

Signature
References

Editor


hideResizeHandles

Public property

Whether the shape should hide its resize handles when selected.

Signature
References

TLShapeUtilFlag


hideRotateHandle

Public property

Whether the shape should hide its rotation handles when selected.

Signature
References

TLShapeUtilFlag


hideSelectionBoundsBg

Public property

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

Signature
References

TLShapeUtilFlag


hideSelectionBoundsFg

Public property

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

Signature
References

TLShapeUtilFlag


isAspectRatioLocked

Public property

Whether the shape's aspect ratio is locked.

Signature
References

TLShapeUtilFlag


migrations

Public static property

Signature
References

Migrations


onBeforeCreate

Public property

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

Example
Signature
Parameters
NameDescription

next

The next shape.

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
Signature
Parameters
NameDescription

prev

The previous shape.

next

The next shape.

References

TLOnBeforeUpdateHandler


onChildrenChange

Public property

A callback called when a shape's children change.

Signature
Parameters
NameDescription

shape

The shape.

References

TLOnChildrenChangeHandler


onClick

Public property

A callback called when a shape is clicked.

Signature
Parameters
NameDescription

shape

The shape.

References

TLOnClickHandler


onDoubleClick

Public property

A callback called when a shape is double clicked.

Signature
Parameters
NameDescription

shape

The shape.

References

TLOnDoubleClickHandler


onDoubleClickEdge

Public property

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

Signature
Parameters
NameDescription

shape

The shape.

References

TLOnDoubleClickHandler


onDoubleClickHandle

Public property

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

Signature
Parameters
NameDescription

shape

The shape.

handle

The handle that is double-clicked.

References

TLOnDoubleClickHandleHandler


onDragShapesOut

Public property

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

Signature
Parameters
NameDescription

shape

The shape.

shapes

The shapes that are being dragged out.

References

TLOnDragHandler


onDragShapesOver

Public property

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

Example
Signature
Parameters
NameDescription

shape

The shape.

shapes

The shapes that are being dragged over this one.

References

TLOnDragHandler


onDropShapesOver

Public property

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

Signature
Parameters
NameDescription

shape

The shape.

shapes

The shapes that are being dropped over this one.

References

TLOnDragHandler


onEditEnd

Public property

A callback called when a shape finishes being editing.

Signature
Parameters
NameDescription

shape

The shape.

References

TLOnEditEndHandler


onHandleDrag

Public property

A callback called when a shape's handle changes.

Signature
Parameters
NameDescription

shape

The current shape.

info

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

References

TLOnHandleDragHandler


onResize

Public property

A callback called when a shape changes from a resize.

Signature
Parameters
NameDescription

shape

The shape at the start of the resize.

info

Info about the resize.

References

TLOnResizeHandler


onResizeEnd

Public property

A callback called when a shape finishes resizing.

Signature
Parameters
NameDescription

initial

The shape at the start of the resize.

current

The current shape.

References

TLOnResizeEndHandler


onResizeStart

Public property

A callback called when a shape starts being resized.

Signature
Parameters
NameDescription

shape

The shape.

References

TLOnResizeStartHandler


onRotate

Public property

A callback called when a shape changes from a rotation.

Signature
Parameters
NameDescription

initial

The shape at the start of the rotation.

current

The current shape.

References

TLOnRotateHandler


onRotateEnd

Public property

A callback called when a shape finishes rotating.

Signature
Parameters
NameDescription

initial

The shape at the start of the rotation.

current

The current shape.

References

TLOnRotateEndHandler


onRotateStart

Public property

A callback called when a shape starts being rotated.

Signature
Parameters
NameDescription

shape

The shape.

References

TLOnRotateStartHandler


onTranslate

Public property

A callback called when a shape changes from a translation.

Signature
Parameters
NameDescription

initial

The shape at the start of the translation.

current

The current shape.

References

TLOnTranslateHandler


onTranslateEnd

Public property

A callback called when a shape finishes translating.

Signature
Parameters
NameDescription

initial

The shape at the start of the translation.

current

The current shape.

References

TLOnTranslateEndHandler


onTranslateStart

Public property

A callback called when a shape starts being translated.

Signature
Parameters
NameDescription

shape

The shape.

References

TLOnTranslateStartHandler


props

Public static property

Signature
References

ShapeProps, TLUnknownShape


type

Public static property

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

Signature

Methods

canDropShapes()

Public method

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

Signature
Parameters
NameDescription

shape

The shape type.

shapes

The shapes that are being dropped.

Returns
References

TLShape


canReceiveNewChildrenOfType()

Public method

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

Signature
Parameters
NameDescription

shape

type

The shape type.

Returns
References

TLShape


component()

Public method

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

Signature
Parameters
NameDescription

shape

The shape.

Returns

getCanvasSvgDefs()

Public method

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.

Signature
References

TLShapeUtilCanvasSvgDef


getDefaultProps()

Public method

Get the default props for a shape.

Signature

getGeometry()

Public method

Get the shape's geometry.

Signature
Parameters
NameDescription

shape

The shape.

Returns
References

Geometry2d


getHandles()

Public method

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

Example
Signature
Parameters
NameDescription

shape

The shape.

Returns
References

TLHandle


getOutlineSegments()

Public method

Get an array of outline segments for the shape. For most shapes, this will be a single segment that includes the entire outline. For shapes with handles, this might be segments of the outline between each handle.

Example
Signature
Parameters
NameDescription

shape

The shape.

Returns
References

Vec


indicator()

Public method

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

Signature
Parameters
NameDescription

shape

The shape.

Returns

toBackgroundSvg()

Public method

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

Signature
Parameters
NameDescription

shape

The shape.

ctx

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

Returns

An SVG element.

References

SvgExportContext


toSvg()

Public method

Get the shape as an SVG object.

Signature
Parameters
NameDescription

shape

The shape.

ctx

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

Returns

An SVG element.

References

SvgExportContext


ShapeIndicatorSharedStyle