TextShapeUtil
See source codeTable of contents
- migrations
- props
- type
- editor
- Properties
- Methods
- canBeLaidOut
- canBind
- canCrop
- canDropShapes
- canEdit
- canEditInReadOnly
- canReceiveNewChildrenOfType
- canResize
- canScroll
- canSnap
- component
- getBoundsSnapGeometry
- getCanvasSvgDefs
- getDefaultProps
- getGeometry
- getHandles
- getHandleSnapGeometry
- getInterpolatedProps
- getMinDimensions
- getText
- hideResizeHandles
- hideRotateHandle
- hideSelectionBoundsBg
- hideSelectionBoundsFg
- indicator
- isAspectRatioLocked
- onBeforeCreate
- onBeforeUpdate
- onChildrenChange
- onClick
- onDoubleClick
- onDoubleClickEdge
- onDoubleClickHandle
- onDragShapesOut
- onDragShapesOver
- onDropShapesOver
- onEditEnd
- onHandleDrag
- onResize
- onResizeEnd
- onResizeStart
- onRotate
- onRotateEnd
- onRotateStart
- onTranslate
- onTranslateEnd
- onTranslateStart
- toBackgroundSvg
- toSvg
Extends ShapeUtil<TLTextShape>
.
class TextShapeUtil extends ShapeUtil<TLTextShape> {}
Constructor
Constructs a new instance of the ShapeUtil
class
Parameters
Name | Description |
---|---|
|
Properties
migrations
static migrations: import('@tldraw/editor').TLPropsMigrations
props
static props: import('@tldraw/editor').RecordProps<TLTextShape>
type
static type: 'text'
editor
editor: Editor
Methods
canBeLaidOut()
Whether the shape participates in stacking, aligning, and distributing.
canBeLaidOut(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
canBind()
Whether the shape can be bound to. See TLShapeUtilCanBindOpts for details.
canBind(_opts: TLShapeUtilCanBindOpts<Shape>): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
canCrop()
Whether the shape can be cropped.
canCrop(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
canDropShapes()
Get whether the shape can receive children of a given type.
canDropShapes(_shape: Shape, _shapes: TLShape[]): boolean
Parameters
Name | Description |
---|---|
|
|
|
|
Returns
boolean
canEdit()
canEdit(): boolean
canEditInReadOnly()
Whether the shape can be edited in read-only mode.
canEditInReadOnly(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
canReceiveNewChildrenOfType()
Get whether the shape can receive children of a given type.
canReceiveNewChildrenOfType(_shape: Shape, _type: TLShape['type']): boolean
Parameters
Name | Description |
---|---|
|
|
|
|
Returns
boolean
canResize()
Whether the shape can be resized.
canResize(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
canScroll()
Whether the shape can be scrolled while editing.
canScroll(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
canSnap()
Whether the shape can be snapped to by another shape.
canSnap(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
component()
component(shape: TLTextShape): import('react/jsx-runtime').JSX.Element
Parameters
Name | Description |
---|---|
|
Returns
import('react/jsx-runtime').JSX.Element
getBoundsSnapGeometry()
Get the geometry to use when snapping to this this shape in translate/resize operations. See BoundsSnapGeometry for details.
getBoundsSnapGeometry(_shape: Shape): BoundsSnapGeometry
Parameters
Name | Description |
---|---|
|
|
Returns
getCanvasSvgDefs()
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()
getDefaultProps(): TLTextShape['props']
getGeometry()
getGeometry(shape: TLTextShape): Rectangle2d
Parameters
Name | Description |
---|---|
|
Returns
getHandles()
Get an array of handle models for the shape. This is an optional method.
getHandles?(shape: Shape): TLHandle[]
Example
util.getHandles?.(myShape)
Parameters
Name | Description |
---|---|
|
The shape. |
Returns
TLHandle[]
getHandleSnapGeometry()
Get the geometry to use when snapping handles to this shape. See HandleSnapGeometry for details.
getHandleSnapGeometry(_shape: Shape): HandleSnapGeometry
Parameters
Name | Description |
---|---|
|
|
Returns
getInterpolatedProps()
Get the interpolated props for an animating shape. This is an optional method.
getInterpolatedProps?(
startShape: Shape,
endShape: Shape,
progress: number
): Shape['props']
Example
util.getInterpolatedProps?.(startShape, endShape, t)
Parameters
Name | Description |
---|---|
|
The initial shape. |
|
The initial shape. |
|
The normalized progress between zero (start) and 1 (end). |
Returns
Shape['props']
getMinDimensions()
getMinDimensions(shape: TLTextShape): {
height: number
width: number
}
Parameters
Name | Description |
---|---|
|
Returns
{
height: number
width: number
}
getText()
getText(shape: TLTextShape): string
Parameters
Name | Description |
---|---|
|
Returns
string
hideResizeHandles()
Whether the shape should hide its resize handles when selected.
hideResizeHandles(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
hideRotateHandle()
Whether the shape should hide its rotation handles when selected.
hideRotateHandle(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
hideSelectionBoundsBg()
Whether the shape should hide its selection bounds background when selected.
hideSelectionBoundsBg(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
hideSelectionBoundsFg()
Whether the shape should hide its selection bounds foreground when selected.
hideSelectionBoundsFg(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
indicator()
indicator(shape: TLTextShape): import('react/jsx-runtime').JSX.Element | null
Parameters
Name | Description |
---|---|
|
Returns
import('react/jsx-runtime').JSX.Element | null
isAspectRatioLocked()
isAspectRatioLocked(): boolean
onBeforeCreate()
A callback called just before a shape is created. This method provides a last chance to modify the created shape.
onBeforeCreate?(next: Shape): Shape | void
Example
onBeforeCreate = (next) => {
return { ...next, x: next.x + 1 }
}
Parameters
Name | Description |
---|---|
|
The next shape. |
Returns
Shape | void
The next shape or void.
onBeforeUpdate()
onBeforeUpdate(
prev: TLTextShape,
next: TLTextShape
):
| {
id: TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
autoSize: boolean
color:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
font: 'draw' | 'mono' | 'sans' | 'serif'
richText: {
content: unknown[]
type: string
}
scale: number
size: 'l' | 'm' | 's' | 'xl'
textAlign: 'end' | 'middle' | 'start'
w: number
}
rotation: number
type: 'text'
typeName: 'shape'
x: number
y: number
}
| undefined
Parameters
Name | Description |
---|---|
| |
|
Returns
| {
id: TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
autoSize: boolean
color:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
font: 'draw' | 'mono' | 'sans' | 'serif'
richText: {
content: unknown[]
type: string
}
scale: number
size: 'l' | 'm' | 's' | 'xl'
textAlign: 'end' | 'middle' | 'start'
w: number
}
rotation: number
type: 'text'
typeName: 'shape'
x: number
y: number
}
| undefined
onChildrenChange()
A callback called when a shape's children change.
onChildrenChange?(shape: Shape): TLShapePartial[] | void
Parameters
Name | Description |
---|---|
|
The shape. |
Returns
TLShapePartial[] | void
An array of shape updates, or void.
onClick()
A callback called when a shape is clicked.
onClick?(shape: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onDoubleClick()
A callback called when a shape is double clicked.
onDoubleClick?(shape: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onDoubleClickEdge()
A callback called when a shape's edge is double clicked.
onDoubleClickEdge?(shape: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onDoubleClickHandle()
A callback called when a shape's handle is double clicked.
onDoubleClickHandle?(
shape: Shape,
handle: TLHandle
): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape. |
| The handle that is double-clicked. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onDragShapesOut()
A callback called when some other shapes are dragged out of this one.
onDragShapesOut?(shape: Shape, shapes: TLShape[]): void
Parameters
Name | Description |
---|---|
|
The shape. |
|
The shapes that are being dragged out. |
Returns
void
onDragShapesOver()
A callback called when some other shapes are dragged over this one.
onDragShapesOver?(shape: Shape, shapes: TLShape[]): void
Example
onDragShapesOver = (shape, shapes) => {
this.editor.reparentShapes(shapes, shape.id)
}
Parameters
Name | Description |
---|---|
|
The shape. |
|
The shapes that are being dragged over this one. |
Returns
void
onDropShapesOver()
A callback called when some other shapes are dropped over this one.
onDropShapesOver?(shape: Shape, shapes: TLShape[]): void
Parameters
Name | Description |
---|---|
|
The shape. |
|
The shapes that are being dropped over this one. |
Returns
void
onEditEnd()
onEditEnd(shape: TLTextShape): void
Parameters
Name | Description |
---|---|
|
Returns
void
onHandleDrag()
A callback called when a shape's handle changes.
onHandleDrag?(
shape: Shape,
info: TLHandleDragInfo<Shape>
): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The current shape. |
|
An object containing the handle and whether the handle is 'precise' or not. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onResize()
onResize(
shape: TLTextShape,
info: TLResizeInfo<TLTextShape>
):
| {
id: TLShapeId
props: {
autoSize: boolean
w: number
}
type: 'text'
x: number
y: number
}
| {
id: TLShapeId
props: {
scale: number
}
type: 'text'
x: number
y: number
}
Parameters
Name | Description |
---|---|
| |
|
Returns
| {
id: TLShapeId
props: {
autoSize: boolean
w: number
}
type: 'text'
x: number
y: number
}
| {
id: TLShapeId
props: {
scale: number
}
type: 'text'
x: number
y: number
}
onResizeEnd()
A callback called when a shape finishes resizing.
onResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape at the start of the resize. |
|
The current shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onResizeStart()
A callback called when a shape starts being resized.
onResizeStart?(shape: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onRotate()
A callback called when a shape changes from a rotation.
onRotate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape at the start of the rotation. |
|
The current shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onRotateEnd()
A callback called when a shape finishes rotating.
onRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape at the start of the rotation. |
|
The current shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onRotateStart()
A callback called when a shape starts being rotated.
onRotateStart?(shape: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onTranslate()
A callback called when a shape changes from a translation.
onTranslate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape at the start of the translation. |
|
The current shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onTranslateEnd()
A callback called when a shape finishes translating.
onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape at the start of the translation. |
|
The current shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
onTranslateStart()
A callback called when a shape starts being translated.
onTranslateStart?(shape: Shape): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape. |
Returns
TLShapePartial<Shape> | void
A change to apply to the shape, or void.
toBackgroundSvg()
Get the shape's background layer as an SVG object.
toBackgroundSvg?(
shape: Shape,
ctx: SvgExportContext
): null | Promise<null | ReactElement> | ReactElement
Parameters
Name | Description |
---|---|
|
The shape. |
| ctx - The export context for the SVG - used for adding e.g. <def>s |
Returns
null | Promise<null | ReactElement> | ReactElement
An SVG element.
toSvg()
toSvg(
shape: TLTextShape,
ctx: SvgExportContext
): import('react/jsx-runtime').JSX.Element
Parameters
Name | Description |
---|---|
| |
|
Returns
import('react/jsx-runtime').JSX.Element