ArrowShapeUtil • tldraw Docs

Table of contents

migrations
props
type
editor
options
Properties
Methods

Extends ShapeUtil<TLArrowShape>.

class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {}

Constructor

from ShapeUtil

Constructs a new instance of the ShapeUtil class

Parameters

Name	Description
`editor`	`Editor`

Properties

migrations

static

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

props

static

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

type

static

static type: 'arrow'

editor

from ShapeUtil

editor: Editor

options

options: ArrowShapeOptions

Methods

configure()

static

from ShapeUtil

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
`this`	`T`
`options`	`T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never`

Returns

canBeLaidOut()

canBeLaidOut(shape: TLArrowShape, info: TLShapeUtilCanBeLaidOutOpts): boolean

Parameters

Name	Description
`shape`	`TLArrowShape`
`info`	`TLShapeUtilCanBeLaidOutOpts`

Returns

boolean

canBind()

canBind({ toShapeType }: TLShapeUtilCanBindOpts<TLArrowShape>): boolean

Parameters

Name	Description
`{ toShapeType }`	`TLShapeUtilCanBindOpts<TLArrowShape>`

Returns

boolean

canCrop()

from ShapeUtil

Whether the shape can be cropped.

canCrop(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canEdit()

canEdit(): boolean

canEditInReadonly()

from ShapeUtil

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

canEditInReadonly(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canReceiveNewChildrenOfType()

from ShapeUtil

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

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

Parameters

Name	Description
`_shape`	`Shape`
`_type`	`TLShape['type']`

Returns

boolean

canResize()

from ShapeUtil

Whether the shape can be resized.

canResize(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canResizeChildren()

from ShapeUtil

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

canResizeChildren(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canScroll()

from ShapeUtil

Whether the shape can be scrolled while editing.

canScroll(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

canSnap()

canSnap(): boolean

canTabTo()

canTabTo(shape: TLArrowShape): boolean

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

boolean

component()

component(shape: TLArrowShape): import('react/jsx-runtime').JSX.Element | null

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

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

getAriaDescriptor()

from ShapeUtil

getAriaDescriptor(_shape: Shape): string | undefined

Parameters

Name	Description
`_shape`	`Shape`

Returns

string | undefined

getBoundsSnapGeometry()

from ShapeUtil

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
`_shape`	`Shape`

Returns

BoundsSnapGeometry

getCanvasSvgDefs()

getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]

getDefaultProps()

getDefaultProps(): TLArrowShape['props']

getFontFaces()

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

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

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

getGeometry()

getGeometry(shape: TLArrowShape): Group2d

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

Group2d

getHandles()

getHandles(shape: TLArrowShape): TLHandle[]

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

TLHandle[]

getHandleSnapGeometry()

from ShapeUtil

Get the geometry to use when snapping handles to this shape. See HandleSnapGeometry for details.

getHandleSnapGeometry(_shape: Shape): HandleSnapGeometry

Parameters

Name	Description
`_shape`	`Shape`

Returns

HandleSnapGeometry

getInterpolatedProps()

getInterpolatedProps(
  startShape: TLArrowShape,
  endShape: TLArrowShape,
  progress: number
): TLArrowShapeProps

Parameters

Name	Description
`startShape`	`TLArrowShape`
`endShape`	`TLArrowShape`
`progress`	`number`

Returns

TLArrowShapeProps

getText()

getText(shape: TLArrowShape): string

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

string

hideResizeHandles()

hideResizeHandles(): boolean

hideRotateHandle()

hideRotateHandle(): boolean

hideSelectionBoundsBg()

hideSelectionBoundsBg(): boolean

hideSelectionBoundsFg()

hideSelectionBoundsFg(): boolean

indicator()

indicator(shape: TLArrowShape): import('react/jsx-runtime').JSX.Element | null

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

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

isAspectRatioLocked()

from ShapeUtil

Whether the shape's aspect ratio is locked.

isAspectRatioLocked(_shape: Shape): boolean

Parameters

Name	Description
`_shape`	`Shape`

Returns

boolean

onBeforeCreate()

optional

from ShapeUtil

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
`next`	`Shape` The next shape.

Returns

Shape | void

The next shape or void.

onBeforeUpdate()

optional

from ShapeUtil

A callback called just before a shape is updated. This method provides a last chance to modify the updated shape.

onBeforeUpdate?(prev: Shape, next: Shape): Shape | void

Example

onBeforeUpdate = (prev, next) => {
  if (prev.x === next.x) {
    return { ...next, x: next.x + 1 }
  }
}

Parameters

Name	Description
`prev`	`Shape` The previous shape.
`next`	`Shape` The next shape.

Returns

Shape | void

The next shape or void.

onChildrenChange()

optional

from ShapeUtil

A callback called when a shape's children change.

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

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial[] | void

An array of shape updates, or void.

onClick()

optional

from ShapeUtil

A callback called when a shape is clicked.

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

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onCrop()

optional

from ShapeUtil

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

optional

from ShapeUtil

A callback called when a shape is double clicked.

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

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDoubleClickCorner()

optional

from ShapeUtil

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

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

Parameters

Name	Description
`shape`	`Shape` The shape.
`info`	`TLClickEventInfo` Info about the corner.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDoubleClickEdge()

optional

from ShapeUtil

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

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

Parameters

Name	Description
`shape`	`Shape` The shape.
`info`	`TLClickEventInfo` Info about the edge.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onDoubleClickHandle()

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

Parameters

Name	Description
`shape`	`TLArrowShape`
`handle`	`TLHandle`

Returns

TLShapePartial<TLArrowShape> | void

onDragShapesIn()

optional

from ShapeUtil

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
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dragged in.
`info`	`TLDragShapesInInfo`

Returns

void

onDragShapesOut()

optional

from ShapeUtil

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

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

Parameters

Name	Description
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dragged out.
`info`	`TLDragShapesOutInfo`

Returns

void

onDragShapesOver()

optional

from ShapeUtil

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
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dragged over this one.
`info`	`TLDragShapesOverInfo`

Returns

void

onDropShapesOver()

optional

from ShapeUtil

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

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

Parameters

Name	Description
`shape`	`Shape` The shape.
`shapes`	`TLShape[]` The shapes that are being dropped over this one.
`info`	`TLDropShapesOverInfo`

Returns

void

onEditEnd()

onEditEnd(shape: TLArrowShape): void

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

void

onEditStart()

onEditStart(shape: TLArrowShape): void

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

void

onHandleDrag()

onHandleDrag(
  shape: TLArrowShape,
  info: TLHandleDragInfo<TLArrowShape>
):
  | ({
      id: import('@tldraw/editor').TLShapeId
      meta?: Partial<import('@tldraw/editor').JsonObject> | undefined
      props?: Partial<TLArrowShapeProps> | undefined
      type: 'arrow'
    } & Partial<Omit<TLArrowShape, 'id' | 'meta' | 'props' | 'type'>>)
  | {
      id: import('@tldraw/editor').TLShapeId
      props: {
        bend: number
      }
      type: 'arrow'
    }
  | {
      id: import('@tldraw/editor').TLShapeId
      props: {
        elbowMidPoint: number
      }
      type: 'arrow'
    }
  | undefined

Parameters

Name	Description
`shape`	`TLArrowShape`
`info`	`TLHandleDragInfo<TLArrowShape>`

Returns

  | ({
      id: import('@tldraw/editor').TLShapeId
      meta?: Partial<import('@tldraw/editor').JsonObject> | undefined
      props?: Partial<TLArrowShapeProps> | undefined
      type: 'arrow'
    } & Partial<Omit<TLArrowShape, 'id' | 'meta' | 'props' | 'type'>>)
  | {
      id: import('@tldraw/editor').TLShapeId
      props: {
        bend: number
      }
      type: 'arrow'
    }
  | {
      id: import('@tldraw/editor').TLShapeId
      props: {
        elbowMidPoint: number
      }
      type: 'arrow'
    }
  | undefined

onResize()

onResize(
  shape: TLArrowShape,
  info: TLResizeInfo<TLArrowShape>
): {
  props: {
    bend: number
    end: import('@tldraw/editor').VecModel
    start: import('@tldraw/editor').VecModel
  }
}

Parameters

Name	Description
`shape`	`TLArrowShape`
`info`	`TLResizeInfo<TLArrowShape>`

Returns

{
  props: {
    bend: number
    end: import('@tldraw/editor').VecModel
    start: import('@tldraw/editor').VecModel
  }
}

onResizeEnd()

optional

from ShapeUtil

A callback called when a shape finishes resizing.

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

Parameters

Name	Description
`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

from ShapeUtil

A callback called when a shape starts being resized.

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

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onRotate()

optional

from ShapeUtil

A callback called when a shape changes from a rotation.

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

Parameters

Name	Description
`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

from ShapeUtil

A callback called when a shape finishes rotating.

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

Parameters

Name	Description
`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

from ShapeUtil

A callback called when a shape starts being rotated.

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

Parameters

Name	Description
`shape`	`Shape` The shape.

Returns

TLShapePartial<Shape> | void

A change to apply to the shape, or void.

onTranslate()

onTranslate(initialShape: TLArrowShape, shape: TLArrowShape): void

Parameters

Name	Description
`initialShape`	`TLArrowShape`
`shape`	`TLArrowShape`

Returns

void

onTranslateEnd()

optional

from ShapeUtil

A callback called when a shape finishes translating.

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

Parameters

Name	Description
`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()

onTranslateStart(shape: TLArrowShape):
  | ({
      id: import('@tldraw/editor').TLShapeId
      meta?: Partial<import('@tldraw/editor').JsonObject> | undefined
      props?: Partial<TLArrowShapeProps> | undefined
      type: 'arrow'
    } & Partial<Omit<TLArrowShape, 'id' | 'meta' | 'props' | 'type'>>)
  | undefined

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

  | ({
      id: import('@tldraw/editor').TLShapeId
      meta?: Partial<import('@tldraw/editor').JsonObject> | undefined
      props?: Partial<TLArrowShapeProps> | undefined
      type: 'arrow'
    } & Partial<Omit<TLArrowShape, 'id' | 'meta' | 'props' | 'type'>>)
  | undefined

toBackgroundSvg()

optional

from ShapeUtil

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

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

Parameters

Name	Description
`shape`	`Shape` The shape.
`ctx`	`SvgExportContext` 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: TLArrowShape,
  ctx: SvgExportContext
): import('react/jsx-runtime').JSX.Element

Parameters

Name	Description
`shape`	`TLArrowShape`
`ctx`	`SvgExportContext`

Returns

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