TLArrowBindingProps

Properties that define how an arrow binds to a target shape. These properties control the visual and behavioral aspects of the arrow-to-shape connection.

interface TLArrowBindingProps {}

Example

const arrowBindingProps: TLArrowBindingProps = {
  terminal: 'end', // Bind the arrow's end point
  normalizedAnchor: { x: 0.5, y: 0.0 }, // Bind to top center of shape
  isExact: true, // Arrow head enters the shape
  isPrecise: true, // Use exact anchor position
  snap: 'edge', // Snap to shape edge
}

Properties

Whether the arrow head 'enters' the bound shape to point directly at the binding anchor point. When true, the arrow head will be positioned inside the target shape.

isExact: boolean

Whether to bind to the exact normalizedAnchor position, or to the center of the shape. When false, the arrow will connect to the shape's center regardless of anchor position.

isPrecise: boolean

Normalized anchor point on the target shape (0,0 = top-left, 1,1 = bottom-right). Coordinates are relative to the shape's bounding box.

normalizedAnchor: VecModel

Snapping behavior for elbow-style arrows

snap: ElbowArrowSnap

Which end of the arrow is bound - either 'start' or 'end'

terminal: 'end' | 'start'