LineShapeUtil
Table of contents
- migrations
- props
- type
- canBeLaidOut
- canCrop
- canEdit
- canEditInReadOnly
- canResize
- canScroll
- canSnap
- editor
- hideResizeHandles
- hideRotateHandle
- hideSelectionBoundsBg
- hideSelectionBoundsFg
- isAspectRatioLocked
- onBeforeCreate
- onBeforeUpdate
- onChildrenChange
- onClick
- onDoubleClick
- onDoubleClickEdge
- onDoubleClickHandle
- onDragShapesOut
- onDragShapesOver
- onDropShapesOver
- onEditEnd
- onHandleDrag
- onResize
- onResizeEnd
- onResizeStart
- onRotate
- onRotateEnd
- onRotateStart
- onTranslate
- onTranslateEnd
- onTranslateStart
- Properties
- Methods
Extends ShapeUtil<TLLineShape>
.
class LineShapeUtil extends ShapeUtil<TLLineShape> {}
ShapeUtil
Constructs a new instance of the ShapeUtil
class
Name | Description |
---|---|
|
|
Properties
static migrations: import('@tldraw/editor').TLPropsMigrations
static props: import('@tldraw/editor').RecordProps<TLLineShape>
static type: 'line'
ShapeUtil
Whether the shape participates in stacking, aligning, and distributing.
canBeLaidOut: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be cropped.
canCrop: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be double clicked to edit.
canEdit: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be edited in read-only mode.
canEditInReadOnly: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be resized.
canResize: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be scrolled while editing.
canScroll: TLShapeUtilFlag<Shape>
ShapeUtil
Whether the shape can be snapped to by another shape.
canSnap: TLShapeUtilFlag<Shape>
ShapeUtil
editor: Editor
hideResizeHandles: () => boolean
hideRotateHandle: () => boolean
hideSelectionBoundsBg: () => boolean
hideSelectionBoundsFg: () => boolean
ShapeUtil
Whether the shape's aspect ratio is locked.
isAspectRatioLocked: TLShapeUtilFlag<Shape>
ShapeUtil
A callback called just before a shape is created. This method provides a last chance to modify the created shape.
onBeforeCreate?: TLOnBeforeCreateHandler<Shape>
onBeforeCreate = (next) => {
return { ...next, x: next.x + 1 }
}
Name | Description |
---|---|
| The next shape. |
ShapeUtil
A callback called just before a shape is updated. This method provides a last chance to modify the updated shape.
onBeforeUpdate?: TLOnBeforeUpdateHandler<Shape>
onBeforeUpdate = (prev, next) => {
if (prev.x === next.x) {
return { ...next, x: next.x + 1 }
}
}
Name | Description |
---|---|
| The previous shape. |
| The next shape. |
ShapeUtil
A callback called when a shape's children change.
onChildrenChange?: TLOnChildrenChangeHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape is clicked.
onClick?: TLOnClickHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape is double clicked.
onDoubleClick?: TLOnDoubleClickHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape's edge is double clicked.
onDoubleClickEdge?: TLOnDoubleClickHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
A callback called when a shape's handle is double clicked.
onDoubleClickHandle?: TLOnDoubleClickHandleHandler<Shape>
Name | Description |
---|---|
| The shape. |
| The handle that is double-clicked. |
ShapeUtil
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. |
ShapeUtil
A callback called when some other shapes are dragged over this one.
onDragShapesOver?: TLOnDragHandler<Shape>
onDragShapesOver = (shape, shapes) => {
this.editor.reparentShapes(shapes, shape.id)
}
Name | Description |
---|---|
| The shape. |
| The shapes that are being dragged over this one. |
ShapeUtil
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. |
ShapeUtil
A callback called when a shape finishes being editing.
onEditEnd?: TLOnEditEndHandler<Shape>
Name | Description |
---|---|
| The shape. |
onHandleDrag: TLOnHandleDragHandler<TLLineShape>
onResize: TLOnResizeHandler<TLLineShape>
ShapeUtil
A callback called when a shape finishes resizing.
onResizeEnd?: TLOnResizeEndHandler<Shape>
Name | Description |
---|---|
| The shape at the start of the resize. |
| The current shape. |
ShapeUtil
A callback called when a shape starts being resized.
onResizeStart?: TLOnResizeStartHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
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. |
ShapeUtil
A callback called when a shape finishes rotating.
onRotateEnd?: TLOnRotateEndHandler<Shape>
Name | Description |
---|---|
| The shape at the start of the rotation. |
| The current shape. |
ShapeUtil
A callback called when a shape starts being rotated.
onRotateStart?: TLOnRotateStartHandler<Shape>
Name | Description |
---|---|
| The shape. |
ShapeUtil
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. |
ShapeUtil
A callback called when a shape finishes translating.
onTranslateEnd?: TLOnTranslateEndHandler<Shape>
Name | Description |
---|---|
| The shape at the start of the translation. |
| The current shape. |
ShapeUtil
A callback called when a shape starts being translated.
onTranslateStart?: TLOnTranslateStartHandler<Shape>
Name | Description |
---|---|
| The shape. |
Methods
ShapeUtil
Whether the shape can be bound to. See TLShapeUtilCanBindOpts for details.
canBind(opts: TLShapeUtilCanBindOpts<Shape>): boolean
Name | Description |
---|---|
|
|
boolean
ShapeUtil
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
ShapeUtil
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(shape: TLLineShape): import('react/jsx-runtime').JSX.Element
Name | Description |
---|---|
|
|
import('react/jsx-runtime').JSX.Element
ShapeUtil
Get the geometry to use when snapping to this this shape in translate/resize operations. See BoundsSnapGeometry for details.
getBoundsSnapGeometry(shape: Shape): BoundsSnapGeometry
Name | Description |
---|---|
|
|
BoundsSnapGeometry
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(): TLLineShape['props']
getGeometry(shape: TLLineShape): CubicSpline2d | Polyline2d
Name | Description |
---|---|
|
|
CubicSpline2d | Polyline2d
getHandles(shape: TLLineShape): TLHandle[]
Name | Description |
---|---|
|
|
TLHandle[]
getHandleSnapGeometry(shape: TLLineShape): HandleSnapGeometry
Name | Description |
---|---|
|
|
HandleSnapGeometry
ShapeUtil
Get the interpolated props for an animating shape. This is an optional method.
getInterpolatedProps?(
startShape: Shape,
endShape: Shape,
progress: number
): Shape['props']
util.getInterpolatedProps?.(startShape, endShape, t)
Name | Description |
---|---|
|
The initial shape. |
|
The initial shape. |
|
The normalized progress between zero (start) and 1 (end). |
Shape['props']
indicator(shape: TLLineShape): import('react/jsx-runtime').JSX.Element
Name | Description |
---|---|
|
|
import('react/jsx-runtime').JSX.Element
ShapeUtil
Get the shape's background layer as an SVG object.
toBackgroundSvg?(
shape: Shape,
ctx: SvgExportContext
): null | Promise<null | ReactElement> | ReactElement
Name | Description |
---|---|
|
The shape. |
|
ctx - The export context for the SVG - used for adding e.g. <def>s |
null | Promise<null | ReactElement> | ReactElement
An SVG element.
toSvg(shape: TLLineShape): import('react/jsx-runtime').JSX.Element
Name | Description |
---|---|
|
|
import('react/jsx-runtime').JSX.Element