ArrowShapeOptions

Options for the arrow shape.

interface ArrowShapeOptions {}

Example

const shapeUtils = [ArrowShapeUtil.configure({ arcArrowCenterSnapDistance: 0 })]

function MyApp() {
  return <Tldraw shapeUtils={shapeUtils} />
}

Properties

The distance, in screen pixels, at which we snap to the center of a target shape when drawing an arc arrow. Set to 0 to disable.

readonly arcArrowCenterSnapDistance: number

The distance, in screen pixels, at which we snap to the axis passing through the center of a shape when drawing an elbow arrow. Set to 0 to disable.

readonly elbowArrowAxisSnapDistance: number

The distance, in screen pixels, at which we snap to the center of a target shape when drawing an elbow arrow. Set to 0 to disable.

readonly elbowArrowCenterSnapDistance: number

The distance, in screen pixels, at which we snap to the edge of a target shape when drawing an elbow arrow. Set to 0 to disable.

readonly elbowArrowEdgeSnapDistance: number

The distance, in screen pixels, at which we snap to one of the 4 directional points (top, right, bottom, left) of a target shape when drawing an elbow arrow. Set to 0 to disable.

readonly elbowArrowPointSnapDistance: number

The distance, in screen pixels, at which we snap an elbow arrow midpoint handle to the midpoint between two shapes. Set to 0 to disable.

readonly elbowMidpointSnapDistance: number

The minimum length, in screen pixels, of an elbow arrows midpoint segment before we show the handle for dragging that segment.

readonly elbowMinSegmentLengthToShowMidpointHandle: number

How far should elbow arrows expand from the shapes they're targeting?

readonly expandElbowLegLength: Record<TLDefaultSizeStyle, number>

When hovering over a shape using the arrow tool, how long should we wait before we assume the user is targeting precisely instead of imprecisely.

readonly hoverPreciseTimeout: number

The distance, in screen pixels, at which we snap an arrow label to center of the arrow when dragging it. Set to 0 to disable.

readonly labelCenterSnapDistance: number

The minimum distance, in screen pixels, between two handles on an elbow arrow. If two handles would be closer than this distance, they're both hidden.

readonly minElbowHandleDistance: number

The minimum length of an elbow arrow's leg.

readonly minElbowLegLength: Record<TLDefaultSizeStyle, number>

When pointing at a shape using the arrow tool or draggin an arrow terminal handle, how long should we wait before we assume the user is targeting precisely instead of imprecisely.

readonly pointingPreciseTimeout: number