GeoShapeUtil

See source code
Table of contents

Extends BaseBoxShapeUtil<TLGeoShape>.

class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {}

Constructor

Constructs a new instance of the ShapeUtil class

Parameters

NameDescription

editor


Properties

migrations

static
static migrations: import('@tldraw/editor').TLPropsMigrations

props

static
static props: import('@tldraw/editor').RecordProps<TLGeoShape>

type

static
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()

static

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

NameDescription

this

T

options

T extends new (...args: any[]) => {
  options: infer Options
}
  ? Partial<Options>
  : never

Returns

T

canBeLaidOut()

Whether the shape can participate in layout functions such as alignment or distribution.

canBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean

Parameters

NameDescription

_shape

Shape

_info

Returns

boolean

canBind()

Whether the shape can be bound to. See TLShapeUtilCanBindOpts for details.

canBind(_opts: TLShapeUtilCanBindOpts): boolean

Parameters

NameDescription

_opts

Returns

boolean

canCrop()

Whether the shape can be cropped.

canCrop(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canEdit()

canEdit(): boolean

canEditInReadonly()

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

canEditInReadonly(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canReceiveNewChildrenOfType()

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

canReceiveNewChildrenOfType(_shape: Shape, _type: TLShape['type']): boolean

Parameters

NameDescription

_shape

Shape

_type

TLShape['type']

Returns

boolean

canResize()

Whether the shape can be resized.

canResize(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canResizeChildren()

When the shape is resized, whether the shape's children should also be resized.

canResizeChildren(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canScroll()

Whether the shape can be scrolled while editing.

canScroll(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canSnap()

Whether the shape can be snapped to by another shape.

canSnap(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

canTabTo()

Whether the shape can be tabbed to.

canTabTo(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

component()

component(shape: TLGeoShape): import('react/jsx-runtime').JSX.Element

Parameters

NameDescription

shape

Returns

import('react/jsx-runtime').JSX.Element

getAriaDescriptor()

getAriaDescriptor(_shape: Shape): string | undefined

Parameters

NameDescription

_shape

Shape

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

NameDescription

_shape

Shape

Returns


getCanvasSvgDefs()

getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]

getDefaultProps()

getDefaultProps(): TLGeoShape['props']

getFontFaces()

getFontFaces(shape: TLGeoShape): import('@tldraw/editor').TLFontFace[]

Parameters

NameDescription

shape

Returns

import('@tldraw/editor').TLFontFace[]

getGeometry()

getGeometry(shape: TLGeoShape): Group2d

Parameters

NameDescription

shape

Returns


getHandles()

optional

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

getHandles?(shape: Shape): TLHandle[]

Example

util.getHandles?.(myShape)

Parameters

NameDescription

shape

Shape

The shape.

Returns


getHandleSnapGeometry()

getHandleSnapGeometry(shape: TLGeoShape): HandleSnapGeometry

Parameters

NameDescription

shape

Returns


getInterpolatedProps()

getInterpolatedProps(
  startShape: TLGeoShape,
  endShape: TLGeoShape,
  t: number
): TLGeoShapeProps

Parameters

NameDescription

startShape

endShape

t

number

Returns


getText()

getText(shape: TLGeoShape): string

Parameters

NameDescription

shape

Returns

string

hideResizeHandles()

Whether the shape should hide its resize handles when selected.

hideResizeHandles(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

hideRotateHandle()

Whether the shape should hide its rotation handles when selected.

hideRotateHandle(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

hideSelectionBoundsBg()

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

hideSelectionBoundsBg(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

hideSelectionBoundsFg()

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

hideSelectionBoundsFg(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

Returns

boolean

indicator()

indicator(shape: TLGeoShape): import('react/jsx-runtime').JSX.Element

Parameters

NameDescription

shape

Returns

import('react/jsx-runtime').JSX.Element

isAspectRatioLocked()

Whether the shape's aspect ratio is locked.

isAspectRatioLocked(_shape: Shape): boolean

Parameters

NameDescription

_shape

Shape

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

NameDescription

shape

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

NameDescription

prev

next

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()

optional

A callback called when a shape's children change.

onChildrenChange?(shape: Shape): TLShapePartial[] | void

Parameters

NameDescription

shape

Shape

The shape.

Returns

An array of shape updates, or void.


onClick()

optional

A callback called when a shape is clicked.

onClick?(shape: Shape): TLShapePartial<Shape> | void

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onCrop()

optional

A callback called when a shape changes from a crop.

onCrop?(
  shape: Shape,
  info: TLCropInfo<Shape>
): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void

Parameters

NameDescription

shape

Shape

The shape at the start of the crop.

info

TLCropInfo<Shape>

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

NameDescription

shape

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()

optional

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

onDoubleClickCorner?(
  shape: Shape,
  info: TLClickEventInfo
): TLShapePartial<Shape> | void

Parameters

NameDescription

shape

Shape

The shape.

info

Info about the corner.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onDoubleClickEdge()

optional

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

onDoubleClickEdge?(
  shape: Shape,
  info: TLClickEventInfo
): TLShapePartial<Shape> | void

Parameters

NameDescription

shape

Shape

The shape.

info

Info about the edge.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onDoubleClickHandle()

optional

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

onDoubleClickHandle?(
  shape: Shape,
  handle: TLHandle
): TLShapePartial<Shape> | void

Parameters

NameDescription

shape

Shape

The shape.

handle

The handle that is double-clicked.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onDragShapesIn()

optional

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

NameDescription

shape

Shape

The shape.

shapes

The shapes that are being dragged in.

info

Returns

void

onDragShapesOut()

optional

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

onDragShapesOut?(
  shape: Shape,
  shapes: TLShape[],
  info: TLDragShapesOutInfo
): void

Parameters

NameDescription

shape

Shape

The shape.

shapes

The shapes that are being dragged out.

info

Returns

void

onDragShapesOver()

optional

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

NameDescription

shape

Shape

The shape.

shapes

The shapes that are being dragged over this one.

info

Returns

void

onDropShapesOver()

optional

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

onDropShapesOver?(
  shape: Shape,
  shapes: TLShape[],
  info: TLDropShapesOverInfo
): void

Parameters

NameDescription

shape

Shape

The shape.

shapes

The shapes that are being dropped over this one.

info

Returns

void

onEditEnd()

optional

A callback called when a shape finishes being edited.

onEditEnd?(shape: Shape): void

Parameters

NameDescription

shape

Shape

The shape.

Returns

void

onEditStart()

optional

A callback called when a shape starts being edited.

onEditStart?(shape: Shape): void

Parameters

NameDescription

shape

Shape

The shape.

Returns

void

onHandleDrag()

optional

A callback called when a shape's handle changes.

onHandleDrag?(
  shape: Shape,
  info: TLHandleDragInfo<Shape>
): TLShapePartial<Shape> | void

Parameters

NameDescription

shape

Shape

The current shape.

info

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

NameDescription

shape

{ handle, newPoint, scaleX, scaleY, initialShape }

Returns

{
  props: {
    growY: number
    h: number
    w: number
  }
  x: number
  y: number
}

onResizeEnd()

optional

A callback called when a shape finishes resizing.

onResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

NameDescription

initial

Shape

The shape at the start of the resize.

current

Shape

The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onResizeStart()

optional

A callback called when a shape starts being resized.

onResizeStart?(shape: Shape): TLShapePartial<Shape> | void

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onRotate()

optional

A callback called when a shape changes from a rotation.

onRotate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

NameDescription

initial

Shape

The shape at the start of the rotation.

current

Shape

The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onRotateEnd()

optional

A callback called when a shape finishes rotating.

onRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

NameDescription

initial

Shape

The shape at the start of the rotation.

current

Shape

The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onRotateStart()

optional

A callback called when a shape starts being rotated.

onRotateStart?(shape: Shape): TLShapePartial<Shape> | void

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onTranslate()

optional

A callback called when a shape changes from a translation.

onTranslate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

NameDescription

initial

Shape

The shape at the start of the translation.

current

Shape

The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onTranslateEnd()

optional

A callback called when a shape finishes translating.

onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void

Parameters

NameDescription

initial

Shape

The shape at the start of the translation.

current

Shape

The current shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


onTranslateStart()

optional

A callback called when a shape starts being translated.

onTranslateStart?(shape: Shape): TLShapePartial<Shape> | void

Parameters

NameDescription

shape

Shape

The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.


toBackgroundSvg()

optional

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

toBackgroundSvg?(
  shape: Shape,
  ctx: SvgExportContext
): null | Promise<null | ReactElement> | ReactElement

Parameters

NameDescription

shape

Shape

The shape.

ctx

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

NameDescription

shape

ctx

Returns

import('react/jsx-runtime').JSX.Element

Prev
GeoShapeTool
Next
HandTool