ArrowShapeOptions

See source code
Table of contents

Options for the arrow shape.

interface ArrowShapeOptions {}

Example

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

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

Properties

arcArrowCenterSnapDistance

readonly

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

elbowArrowAxisSnapDistance

readonly

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

elbowArrowCenterSnapDistance

readonly

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

elbowArrowEdgeSnapDistance

readonly

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

elbowArrowPointSnapDistance

readonly

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

elbowMidpointSnapDistance

readonly

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

elbowMinSegmentLengthToShowMidpointHandle

readonly

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

readonly elbowMinSegmentLengthToShowMidpointHandle: number

expandElbowLegLength

readonly

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

readonly expandElbowLegLength: Record<TLDefaultSizeStyle, number>

hoverPreciseTimeout

readonly

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

labelCenterSnapDistance

readonly

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

minElbowHandleDistance

readonly

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

minElbowLegLength

readonly

The minimum length of an elbow arrow's leg.

readonly minElbowLegLength: Record<TLDefaultSizeStyle, number>

pointingPreciseTimeout

readonly

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

readonly pointingPreciseTimeout: number

Methods

shouldBeExact

When creating an arrow, should it stop exactly at the pointer, or should it stop at the edge of the target shape.

Parameters

NameDescription

editor

Editor

isPrecise

boolean

Returns

boolean

shouldIgnoreTargets

When creating an arrow, should it bind to the target shape.

Parameters

NameDescription

editor

Editor

Returns

boolean

Prev
ActionsProviderProps
Next
ArrowTargetState