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;