ShapeUtil
Table of contents
- Properties
- canBind
- canCrop
- canEdit
- canEditInReadOnly
- canResize
- canScroll
- canSnap
- canUnmount
- editor
- hideResizeHandles
- hideRotateHandle
- hideSelectionBoundsBg
- hideSelectionBoundsFg
- isAspectRatioLocked
- migrations
- onBeforeCreate
- onBeforeUpdate
- onChildrenChange
- onClick
- onDoubleClick
- onDoubleClickEdge
- onDoubleClickHandle
- onDragShapesOut
- onDragShapesOver
- onDropShapesOver
- onEditEnd
- onHandleDrag
- onHandleDragEnd
- onHandleDragStart
- onResize
- onResizeEnd
- onResizeStart
- onRotate
- onRotateEnd
- onRotateStart
- onTranslate
- onTranslateEnd
- onTranslateStart
- props
- type
- Methods
Public class
abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {}
packages/editor/src/lib/editor/shapes/ShapeUtil.ts
Constructor
Public constructor
Constructs a new instance of the ShapeUtil class
| Name | Description |
|---|---|
| |
Properties
canBind
Public property
Whether the shape can be bound to by an arrow.
canBind: <K>(_shape: Shape, _otherShape?: K | undefined) => boolean
| Name | Description |
|---|---|
| The other shape attempting to bind to this shape. |
canCrop
Public property
Whether the shape can be cropped.
canCrop: TLShapeUtilFlag<Shape>
canEdit
Public property
Whether the shape can be double clicked to edit.
canEdit: TLShapeUtilFlag<Shape>
canEditInReadOnly
Public property
Whether the shape can be edited in read-only mode.
canEditInReadOnly: TLShapeUtilFlag<Shape>
canResize
Public property
Whether the shape can be resized.
canResize: TLShapeUtilFlag<Shape>
canScroll
Public property
Whether the shape can be scrolled while editing.
canScroll: TLShapeUtilFlag<Shape>
canSnap
Public property
Whether the shape can be snapped to by another shape.
canSnap: TLShapeUtilFlag<Shape>
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.
canUnmount: TLShapeUtilFlag<Shape>
editor
Public property
editor: Editor
hideResizeHandles
Public property
Whether the shape should hide its resize handles when selected.
hideResizeHandles: TLShapeUtilFlag<Shape>
hideRotateHandle
Public property
Whether the shape should hide its rotation handles when selected.
hideRotateHandle: TLShapeUtilFlag<Shape>
hideSelectionBoundsBg
Public property
Whether the shape should hide its selection bounds background when selected.
hideSelectionBoundsBg: TLShapeUtilFlag<Shape>
hideSelectionBoundsFg
Public property
Whether the shape should hide its selection bounds foreground when selected.
hideSelectionBoundsFg: TLShapeUtilFlag<Shape>
isAspectRatioLocked
Public property
Whether the shape's aspect ratio is locked.
isAspectRatioLocked: TLShapeUtilFlag<Shape>
migrations
Public static property
static migrations?: 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
onBeforeCreate = (next) => {
return { ...next, x: next.x + 1 }
}
onBeforeCreate?: TLOnBeforeCreateHandler<Shape>
| Name | Description |
|---|---|
| The next shape. |
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 }
}
}
onBeforeUpdate?: TLOnBeforeUpdateHandler<Shape>
| Name | Description |
|---|---|
| The previous shape. |
| The next shape. |
onChildrenChange
Public property
A callback called when a shape's children change.
onChildrenChange?: TLOnChildrenChangeHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
onClick
Public property
A callback called when a shape is clicked.
onClick?: TLOnClickHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
onDoubleClick
Public property
A callback called when a shape is double clicked.
onDoubleClick?: TLOnDoubleClickHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
onDoubleClickEdge
Public property
A callback called when a shape's edge is double clicked.
onDoubleClickEdge?: TLOnDoubleClickHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
onDoubleClickHandle
Public property
A callback called when a shape's handle is double clicked.
onDoubleClickHandle?: TLOnDoubleClickHandleHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
| The handle that is double-clicked. |
onDragShapesOut
Public property
A callback called when some other shapes are dragged out of this one.
onDragShapesOut?: TLOnDragHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
| The shapes that are being dragged out. |
onDragShapesOver
Public property
A callback called when some other shapes are dragged over this one.
Example
onDragShapesOver = (shape, shapes) => {
return { shouldHint: true }
}
onDragShapesOver?: TLOnDragHandler<
Shape,
{
shouldHint: boolean
}
>
| Name | Description |
|---|---|
| The shape. |
| The shapes that are being dragged over this one. |
onDropShapesOver
Public property
A callback called when some other shapes are dropped over this one.
onDropShapesOver?: TLOnDragHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
| The shapes that are being dropped over this one. |
onEditEnd
Public property
A callback called when a shape finishes being editing.
onEditEnd?: TLOnEditEndHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
onHandleDrag
Public property
A callback called when a shape's handle changes.
onHandleDrag?: TLOnHandleDragHandler<Shape>
| Name | Description |
|---|---|
| The current shape. |
| An object containing the handle and whether the handle is 'precise' or not. |
onHandleDragEnd
Public property
A callback called when a shape starts being dragged.
onHandleDragEnd?: TLOnHandleDragStartHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
onHandleDragStart
Public property
A callback called when a shape starts being dragged.
onHandleDragStart?: TLOnHandleDragStartHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
onResize
Public property
A callback called when a shape changes from a resize.
onResize?: TLOnResizeHandler<Shape>
| Name | Description |
|---|---|
| The shape at the start of the resize. |
| Info about the resize. |
onResizeEnd
Public property
A callback called when a shape finishes resizing.
onResizeEnd?: TLOnResizeEndHandler<Shape>
| Name | Description |
|---|---|
| The shape at the start of the resize. |
| The current shape. |
onResizeStart
Public property
A callback called when a shape starts being resized.
onResizeStart?: TLOnResizeStartHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
onRotate
Public property
A callback called when a shape changes from a rotation.
onRotate?: TLOnRotateHandler<Shape>
| Name | Description |
|---|---|
| The shape at the start of the rotation. |
| The current shape. |
onRotateEnd
Public property
A callback called when a shape finishes rotating.
onRotateEnd?: TLOnRotateEndHandler<Shape>
| Name | Description |
|---|---|
| The shape at the start of the rotation. |
| The current shape. |
onRotateStart
Public property
A callback called when a shape starts being rotated.
onRotateStart?: TLOnRotateStartHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
onTranslate
Public property
A callback called when a shape changes from a translation.
onTranslate?: TLOnTranslateHandler<Shape>
| Name | Description |
|---|---|
| The shape at the start of the translation. |
| The current shape. |
onTranslateEnd
Public property
A callback called when a shape finishes translating.
onTranslateEnd?: TLOnTranslateEndHandler<Shape>
| Name | Description |
|---|---|
| The shape at the start of the translation. |
| The current shape. |
onTranslateStart
Public property
A callback called when a shape starts being translated.
onTranslateStart?: TLOnTranslateStartHandler<Shape>
| Name | Description |
|---|---|
| The shape. |
props
Public static property
static props?: ShapeProps<TLUnknownShape>
type
Public static property
The type of the shape util, which should match the shape's type.
static type: string
Methods
canDropShapes()
Public method
Get whether the shape can receive children of a given type.
canDropShapes(shape: Shape, shapes: TLShape[]): boolean
| Name | Description |
|---|---|
| The shape type. |
| The shapes that are being dropped. |
boolean
canReceiveNewChildrenOfType()
Public method
Get whether the shape can receive children of a given type.
canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean
| Name | Description |
|---|---|
| |
| The shape type. |
boolean
component()
Public method
Get a JSX element for the shape (as an HTML element).
abstract component(shape: Shape): any
| Name | Description |
|---|---|
| The shape. |
any
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.
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]
getDefaultProps()
Public method
Get the default props for a shape.
abstract getDefaultProps(): Shape['props']
getGeometry()
Public method
Get the shape's geometry.
abstract getGeometry(shape: Shape): Geometry2d
| Name | Description |
|---|---|
| The shape. |
Geometry2d
getHandles()
Public method
Get an array of handle models for the shape. This is an optional method.
Example
util.getHandles?.(myShape)
getHandles?(shape: Shape): TLHandle[]
| Name | Description |
|---|---|
| The shape. |
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
util.getOutlineSegments(myShape)
getOutlineSegments(shape: Shape): Vec[][]
| Name | Description |
|---|---|
| The shape. |
Vec[][]
indicator()
Public method
Get JSX describing the shape's indicator (as an SVG element).
abstract indicator(shape: Shape): any
| Name | Description |
|---|---|
| The shape. |
any
toBackgroundSvg()
Public method
Get the shape's background layer as an SVG object.
toBackgroundSvg?(
shape: Shape,
ctx: SvgExportContext
): null | Promise<SVGElement> | SVGElement
| Name | Description |
|---|---|
| The shape. |
| ctx - The export context for the SVG - used for adding e.g. <def>s |
null | Promise<SVGElement> | SVGElement
An SVG element.
toSvg()
Public method
Get the shape as an SVG object.
toSvg?(shape: Shape, ctx: SvgExportContext): Promise<SVGElement> | SVGElement
| Name | Description |
|---|---|
| The shape. |
| The export context for the SVG - used for adding e.g. <def>s |
Promise<SVGElement> | SVGElement
An SVG element.