ArrowShapeUtil • tldraw SDK

Table of contents

Properties
Methods

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

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

Name	Description
`shape`	`TLArrowShape`

Returns

Group2d

References

TLArrowShape, Group2d

`getHandles()`

Public method

Signature

getHandles(shape: TLArrowShape): TLHandle[]

Parameters

Name	Description
`shape`	`TLArrowShape`

Returns

TLHandle[]

References

TLArrowShape, TLHandle

`indicator()`

Public method

Signature

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

Parameters

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

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

Returns

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

References

TLArrowShape, SvgExportContext

ArrowShapeTool ArrowToolbarItem