TLArrowShapeProps • tldraw Docs

Table of contents

arrowheadEnd
arrowheadStart
bend
color
dash
elbowMidPoint
end
fill
font
kind
labelColor
labelPosition
richText
scale
size
start
Properties

Properties specific to arrow shapes.

Defines all the configurable aspects of an arrow shape, including visual styling, geometry, text labeling, and positioning. Arrows can connect two points and optionally display text labels.

interface TLArrowShapeProps {}

Example

const arrowProps: TLArrowShapeProps = {
  kind: 'arc',
  labelColor: 'black',
  color: 'blue',
  fill: 'none',
  dash: 'solid',
  size: 'm',
  arrowheadStart: 'none',
  arrowheadEnd: 'arrow',
  font: 'draw',
  start: { x: 0, y: 0 },
  end: { x: 100, y: 100 },
  bend: 0.2,
  richText: toRichText('Label'),
  labelPosition: 0.5,
  scale: 1,
  elbowMidPoint: 0.5,
}

Properties

arrowheadEnd

arrowheadEnd: TLArrowShapeArrowheadStyle

arrowheadStart

arrowheadStart: TLArrowShapeArrowheadStyle

bend

bend: number

color

color: TLDefaultColorStyle

dash

dash: TLDefaultDashStyle

elbowMidPoint

elbowMidPoint: number

end

end: VecModel

fill

fill: TLDefaultFillStyle

font

font: TLDefaultFontStyle

kind

kind: TLArrowShapeKind

labelColor

labelColor: TLDefaultColorStyle

labelPosition

labelPosition: number

richText

richText: TLRichText

scale

scale: number

size

size: TLDefaultSizeStyle

start

start: VecModel