Table of contents

Public class

Signature
class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {}
References

ShapeUtil, TLArrowShape

Source

packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx


Properties

canBeLaidOut

Public property

Signature
canBeLaidOut: TLShapeUtilFlag<TLArrowShape>
References

TLShapeUtilFlag, TLArrowShape


canBind

Public property

Signature
canBind: () => boolean

canEdit

Public property

Signature
canEdit: () => boolean

canSnap

Public property

Signature
canSnap: () => boolean

hideResizeHandles

Public property

Signature
hideResizeHandles: TLShapeUtilFlag<TLArrowShape>
References

TLShapeUtilFlag, TLArrowShape


hideRotateHandle

Public property

Signature
hideRotateHandle: TLShapeUtilFlag<TLArrowShape>
References

TLShapeUtilFlag, TLArrowShape


hideSelectionBoundsBg

Public property

Signature
hideSelectionBoundsBg: TLShapeUtilFlag<TLArrowShape>
References

TLShapeUtilFlag, TLArrowShape


hideSelectionBoundsFg

Public property

Signature
hideSelectionBoundsFg: TLShapeUtilFlag<TLArrowShape>
References

TLShapeUtilFlag, TLArrowShape


migrations

Public static property

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

MigrationSequence


onDoubleClickHandle

Public property

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

TLArrowShape, TLHandle, TLShapePartial


onEditEnd

Public property

Signature
onEditEnd: TLOnEditEndHandler<TLArrowShape>
References

TLOnEditEndHandler, TLArrowShape


onHandleDrag

Public property

Signature
onHandleDrag: TLOnHandleDragHandler<TLArrowShape>
References

TLOnHandleDragHandler, TLArrowShape


onResize

Public property

Signature
onResize: TLOnResizeHandler<TLArrowShape>
References

TLOnResizeHandler, TLArrowShape


onResizeStart

Public property

Signature
onResizeStart?: TLOnResizeStartHandler<TLArrowShape>
References

TLOnResizeStartHandler, TLArrowShape


onTranslate

Public property

Signature
onTranslate?: TLOnTranslateHandler<TLArrowShape>
References

TLOnTranslateHandler, TLArrowShape


onTranslateStart

Public property

Signature
onTranslateStart: TLOnTranslateStartHandler<TLArrowShape>
References

TLOnTranslateStartHandler, TLArrowShape


props

Public static property

Signature
static props: {
  arrowheadEnd: import('@tldraw/editor').EnumStyleProp<
    | 'arrow'
    | 'bar'
    | 'diamond'
    | 'dot'
    | 'inverted'
    | 'none'
    | 'pipe'
    | 'square'
    | 'triangle'
  >
  arrowheadStart: import('@tldraw/editor').EnumStyleProp<
    | 'arrow'
    | 'bar'
    | 'diamond'
    | 'dot'
    | 'inverted'
    | 'none'
    | 'pipe'
    | 'square'
    | 'triangle'
  >
  bend: import('@tldraw/editor').Validator<number>
  color: import('@tldraw/editor').EnumStyleProp<
    | 'black'
    | 'blue'
    | 'green'
    | 'grey'
    | 'light-blue'
    | 'light-green'
    | 'light-red'
    | 'light-violet'
    | 'orange'
    | 'red'
    | 'violet'
    | 'white'
    | 'yellow'
  >
  dash: import('@tldraw/editor').EnumStyleProp<
    'dashed' | 'dotted' | 'draw' | 'solid'
  >
  end: import('@tldraw/editor').Validator<import('@tldraw/editor').VecModel>
  fill: import('@tldraw/editor').EnumStyleProp<
    'none' | 'pattern' | 'semi' | 'solid'
  >
  font: import('@tldraw/editor').EnumStyleProp<
    'draw' | 'mono' | 'sans' | 'serif'
  >
  labelColor: import('@tldraw/editor').EnumStyleProp<
    | 'black'
    | 'blue'
    | 'green'
    | 'grey'
    | 'light-blue'
    | 'light-green'
    | 'light-red'
    | 'light-violet'
    | 'orange'
    | 'red'
    | 'violet'
    | 'white'
    | 'yellow'
  >
  labelPosition: import('@tldraw/editor').Validator<number>
  size: import('@tldraw/editor').EnumStyleProp<'l' | 'm' | 's' | 'xl'>
  start: import('@tldraw/editor').Validator<import('@tldraw/editor').VecModel>
  text: import('@tldraw/editor').Validator<string>
}
References

EnumStyleProp, Validator, VecModel


type

Public static property

Signature
static type: 'arrow'

Methods

component()

Public method

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

shape

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

TLArrowShape


getCanvasSvgDefs()

Public method

Signature
getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]
References

TLShapeUtilCanvasSvgDef


getDefaultProps()

Public method

Signature
getDefaultProps(): TLArrowShape['props']
References

TLArrowShape


getGeometry()

Public method

Signature
getGeometry(shape: TLArrowShape): Group2d
Parameters
NameDescription

shape

TLArrowShape
Returns
Group2d
References

TLArrowShape, Group2d


getHandles()

Public method

Signature
getHandles(shape: TLArrowShape): TLHandle[]
Parameters
NameDescription

shape

TLArrowShape
Returns
TLHandle[]
References

TLArrowShape, TLHandle


indicator()

Public method

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

shape

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

TLArrowShape


toSvg()

Public method

Signature
toSvg(
  shape: TLArrowShape,
  ctx: SvgExportContext
): import('react/jsx-runtime').JSX.Element
Parameters
NameDescription

shape

TLArrowShape

ctx

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

TLArrowShape, SvgExportContext


ArrowShapeToolArrowToolbarItem