GeoShapeUtil
See source codeTable of contents
- migrations
- props
- type
- editor
- options
- Properties
- Methods
- configure
- canBeLaidOut
- canBind
- canCrop
- canEdit
- canEditInReadonly
- canReceiveNewChildrenOfType
- canResize
- canResizeChildren
- canScroll
- canSnap
- canTabTo
- component
- getAriaDescriptor
- getBoundsSnapGeometry
- getCanvasSvgDefs
- getDefaultProps
- getFontFaces
- getGeometry
- getHandles
- getHandleSnapGeometry
- getInterpolatedProps
- getText
- hideResizeHandles
- hideRotateHandle
- hideSelectionBoundsBg
- hideSelectionBoundsFg
- indicator
- isAspectRatioLocked
- onBeforeCreate
- onBeforeUpdate
- onChildrenChange
- onClick
- onCrop
- onDoubleClick
- onDoubleClickCorner
- onDoubleClickEdge
- onDoubleClickHandle
- onDragShapesIn
- onDragShapesOut
- onDragShapesOver
- onDropShapesOver
- onEditEnd
- onEditStart
- onHandleDrag
- onResize
- onResizeEnd
- onResizeStart
- onRotate
- onRotateEnd
- onRotateStart
- onTranslate
- onTranslateEnd
- onTranslateStart
- toBackgroundSvg
- toSvg
Extends BaseBoxShapeUtil<TLGeoShape>
.
class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {}
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<TLGeoShape>
type
static type: 'geo'
editor
editor: Editor
options
Options for this shape util. If you're implementing a custom shape util, you can override this to provide customization options for your shape. If using an existing shape util, you can customizing this by calling ShapeUtil.configure.
options: {}
Methods
configure()
Configure this shape utils options
.
static configure<T extends TLShapeUtilConstructor<any, any>>(
this: T,
options: T extends new (...args: any[]) => {
options: infer Options
}
? Partial<Options>
: never
): T
Parameters
Name | Description |
---|---|
|
|
|
|
Returns
T
canBeLaidOut()
Whether the shape can participate in layout functions such as alignment or distribution.
canBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean
Parameters
Name | Description |
---|---|
|
|
|
Returns
boolean
canBind()
Whether the shape can be bound to. See TLShapeUtilCanBindOpts for details.
canBind(_opts: TLShapeUtilCanBindOpts): boolean
Parameters
Name | Description |
---|---|
|
Returns
boolean
canCrop()
Whether the shape can be cropped.
canCrop(_shape: Shape): 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
canResizeChildren()
When the shape is resized, whether the shape's children should also be resized.
canResizeChildren(_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
canTabTo()
Whether the shape can be tabbed to.
canTabTo(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
component()
component(shape: TLGeoShape): import('react/jsx-runtime').JSX.Element
Parameters
Name | Description |
---|---|
|
Returns
import('react/jsx-runtime').JSX.Element
getAriaDescriptor()
getAriaDescriptor(_shape: Shape): string | undefined
Parameters
Name | Description |
---|---|
|
|
Returns
string | undefined
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()
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]
getDefaultProps()
getDefaultProps(): TLGeoShape['props']
getFontFaces()
getFontFaces(shape: TLGeoShape): import('@tldraw/editor').TLFontFace[]
Parameters
Name | Description |
---|---|
|
Returns
import('@tldraw/editor').TLFontFace[]
getGeometry()
getGeometry(shape: TLGeoShape): Group2d
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()
getHandleSnapGeometry(shape: TLGeoShape): HandleSnapGeometry
Parameters
Name | Description |
---|---|
|
Returns
getInterpolatedProps()
getInterpolatedProps(
startShape: TLGeoShape,
endShape: TLGeoShape,
t: number
): TLGeoShapeProps
Parameters
Name | Description |
---|---|
| |
| |
|
|
Returns
getText()
getText(shape: TLGeoShape): 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: TLGeoShape): import('react/jsx-runtime').JSX.Element
Parameters
Name | Description |
---|---|
|
Returns
import('react/jsx-runtime').JSX.Element
isAspectRatioLocked()
Whether the shape's aspect ratio is locked.
isAspectRatioLocked(_shape: Shape): boolean
Parameters
Name | Description |
---|---|
|
|
Returns
boolean
onBeforeCreate()
onBeforeCreate(shape: TLGeoShape):
| {
id: import('@tldraw/editor').TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
align:
| 'end-legacy'
| 'end'
| 'middle-legacy'
| 'middle'
| 'start-legacy'
| 'start'
color:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
dash: 'dashed' | 'dotted' | 'draw' | 'solid'
fill: 'fill' | 'none' | 'pattern' | 'semi' | 'solid'
font: 'draw' | 'mono' | 'sans' | 'serif'
geo:
| 'arrow-down'
| 'arrow-left'
| 'arrow-right'
| 'arrow-up'
| 'check-box'
| 'cloud'
| 'diamond'
| 'ellipse'
| 'heart'
| 'hexagon'
| 'octagon'
| 'oval'
| 'pentagon'
| 'rectangle'
| 'rhombus-2'
| 'rhombus'
| 'star'
| 'trapezoid'
| 'triangle'
| 'x-box'
growY: number
h: number
labelColor:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
richText: {
content: unknown[]
type: string
}
scale: number
size: 'l' | 'm' | 's' | 'xl'
url: string
verticalAlign: 'end' | 'middle' | 'start'
w: number
}
rotation: number
type: 'geo'
typeName: 'shape'
x: number
y: number
}
| undefined
Parameters
Name | Description |
---|---|
|
Returns
| {
id: import('@tldraw/editor').TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
align:
| 'end-legacy'
| 'end'
| 'middle-legacy'
| 'middle'
| 'start-legacy'
| 'start'
color:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
dash: 'dashed' | 'dotted' | 'draw' | 'solid'
fill: 'fill' | 'none' | 'pattern' | 'semi' | 'solid'
font: 'draw' | 'mono' | 'sans' | 'serif'
geo:
| 'arrow-down'
| 'arrow-left'
| 'arrow-right'
| 'arrow-up'
| 'check-box'
| 'cloud'
| 'diamond'
| 'ellipse'
| 'heart'
| 'hexagon'
| 'octagon'
| 'oval'
| 'pentagon'
| 'rectangle'
| 'rhombus-2'
| 'rhombus'
| 'star'
| 'trapezoid'
| 'triangle'
| 'x-box'
growY: number
h: number
labelColor:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
richText: {
content: unknown[]
type: string
}
scale: number
size: 'l' | 'm' | 's' | 'xl'
url: string
verticalAlign: 'end' | 'middle' | 'start'
w: number
}
rotation: number
type: 'geo'
typeName: 'shape'
x: number
y: number
}
| undefined
onBeforeUpdate()
onBeforeUpdate(
prev: TLGeoShape,
next: TLGeoShape
):
| {
id: import('@tldraw/editor').TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
align:
| 'end-legacy'
| 'end'
| 'middle-legacy'
| 'middle'
| 'start-legacy'
| 'start'
color:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
dash: 'dashed' | 'dotted' | 'draw' | 'solid'
fill: 'fill' | 'none' | 'pattern' | 'semi' | 'solid'
font: 'draw' | 'mono' | 'sans' | 'serif'
geo:
| 'arrow-down'
| 'arrow-left'
| 'arrow-right'
| 'arrow-up'
| 'check-box'
| 'cloud'
| 'diamond'
| 'ellipse'
| 'heart'
| 'hexagon'
| 'octagon'
| 'oval'
| 'pentagon'
| 'rectangle'
| 'rhombus-2'
| 'rhombus'
| 'star'
| 'trapezoid'
| 'triangle'
| 'x-box'
growY: number
h: number
labelColor:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
richText: {
content: unknown[]
type: string
}
scale: number
size: 'l' | 'm' | 's' | 'xl'
url: string
verticalAlign: 'end' | 'middle' | 'start'
w: number
}
rotation: number
type: 'geo'
typeName: 'shape'
x: number
y: number
}
| undefined
Parameters
Name | Description |
---|---|
| |
|
Returns
| {
id: import('@tldraw/editor').TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
align:
| 'end-legacy'
| 'end'
| 'middle-legacy'
| 'middle'
| 'start-legacy'
| 'start'
color:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
dash: 'dashed' | 'dotted' | 'draw' | 'solid'
fill: 'fill' | 'none' | 'pattern' | 'semi' | 'solid'
font: 'draw' | 'mono' | 'sans' | 'serif'
geo:
| 'arrow-down'
| 'arrow-left'
| 'arrow-right'
| 'arrow-up'
| 'check-box'
| 'cloud'
| 'diamond'
| 'ellipse'
| 'heart'
| 'hexagon'
| 'octagon'
| 'oval'
| 'pentagon'
| 'rectangle'
| 'rhombus-2'
| 'rhombus'
| 'star'
| 'trapezoid'
| 'triangle'
| 'x-box'
growY: number
h: number
labelColor:
| 'black'
| 'blue'
| 'green'
| 'grey'
| 'light-blue'
| 'light-green'
| 'light-red'
| 'light-violet'
| 'orange'
| 'red'
| 'violet'
| 'white'
| 'yellow'
richText: {
content: unknown[]
type: string
}
scale: number
size: 'l' | 'm' | 's' | 'xl'
url: string
verticalAlign: 'end' | 'middle' | 'start'
w: number
}
rotation: number
type: 'geo'
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.
onCrop()
A callback called when a shape changes from a crop.
onCrop?(
shape: Shape,
info: TLCropInfo<Shape>
): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void
Parameters
Name | Description |
---|---|
|
The shape at the start of the crop. |
|
Info about the crop. |
Returns
Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void
A change to apply to the shape, or void.
onDoubleClick()
onDoubleClick(shape: TLGeoShape):
| {
id: import('@tldraw/editor').TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
geo: 'check-box'
}
rotation: number
type: 'geo'
typeName: 'shape'
x: number
y: number
}
| {
id: import('@tldraw/editor').TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
geo: 'rectangle'
}
rotation: number
type: 'geo'
typeName: 'shape'
x: number
y: number
}
| undefined
Parameters
Name | Description |
---|---|
|
Returns
| {
id: import('@tldraw/editor').TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
geo: 'check-box'
}
rotation: number
type: 'geo'
typeName: 'shape'
x: number
y: number
}
| {
id: import('@tldraw/editor').TLShapeId
index: import('@tldraw/editor').IndexKey
isLocked: boolean
meta: import('@tldraw/editor').JsonObject
opacity: number
parentId: import('@tldraw/editor').TLParentId
props: {
geo: 'rectangle'
}
rotation: number
type: 'geo'
typeName: 'shape'
x: number
y: number
}
| undefined
onDoubleClickCorner()
A callback called when a shape's corner is double clicked.
onDoubleClickCorner?(
shape: Shape,
info: TLClickEventInfo
): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape. |
| Info about the corner. |
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,
info: TLClickEventInfo
): TLShapePartial<Shape> | void
Parameters
Name | Description |
---|---|
|
The shape. |
| Info about the edge. |
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.
onDragShapesIn()
A callback called when some other shapes are dragged into this one. This fires when the shapes are dragged over the shape for the first time.
onDragShapesIn?(
shape: Shape,
shapes: TLShape[],
info: TLDragShapesInInfo
): void
Parameters
Name | Description |
---|---|
|
The shape. |
|
The shapes that are being dragged in. |
|
Returns
void
onDragShapesOut()
A callback called when some other shapes are dragged out of this one.
onDragShapesOut?(
shape: Shape,
shapes: TLShape[],
info: TLDragShapesOutInfo
): 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. This fires when the shapes are dragged over the shape for the first time (after the onDragShapesIn callback), and again on every update while the shapes are being dragged.
onDragShapesOver?(
shape: Shape,
shapes: TLShape[],
info: TLDragShapesOverInfo
): 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[],
info: TLDropShapesOverInfo
): void
Parameters
Name | Description |
---|---|
|
The shape. |
|
The shapes that are being dropped over this one. |
|
Returns
void
onEditEnd()
A callback called when a shape finishes being edited.
onEditEnd?(shape: Shape): void
Parameters
Name | Description |
---|---|
|
The shape. |
Returns
void
onEditStart()
A callback called when a shape starts being edited.
onEditStart?(shape: Shape): void
Parameters
Name | Description |
---|---|
|
The shape. |
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: TLGeoShape,
{ handle, newPoint, scaleX, scaleY, initialShape }: TLResizeInfo<TLGeoShape>
): {
props: {
growY: number
h: number
w: number
}
x: number
y: number
}
Parameters
Name | Description |
---|---|
| |
|
Returns
{
props: {
growY: number
h: number
w: number
}
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: TLGeoShape,
ctx: SvgExportContext
): import('react/jsx-runtime').JSX.Element
Parameters
Name | Description |
---|---|
| |
|
Returns
import('react/jsx-runtime').JSX.Element