TLHandle

A handle object representing an interactive control point on a shape.

Handles allow users to manipulate shape geometry by dragging control points. Each handle has a position, type, and various properties that control its behavior during interactions.

interface TLHandle {}

Example

// A vertex handle for a line endpoint
const lineEndHandle: TLHandle = {
  id: 'end',
  label: 'End point',
  type: 'vertex',
  canSnap: true,
  index: 'a1',
  x: 100,
  y: 50,
}

// A virtual handle for adding new points
const virtualHandle: TLHandle = {
  id: 'virtual-1',
  type: 'virtual',
  canSnap: false,
  index: 'a1V',
  x: 75,
  y: 25,
}

// A create handle for extending geometry
const createHandle: TLHandle = {
  id: 'create',
  type: 'create',
  canSnap: true,
  index: 'a2',
  x: 200,
  y: 100,
}

Properties

canSnap?: boolean

A unique identifier for the handle within the shape

id: string

The fractional index used for ordering handles

index: IndexKey

Optional human-readable label for the handle

label?: string

The type of snap to use for this handle

snapType?: 'align' | 'point'

The type of handle, determining its behavior and interaction mode

type: TLHandleType

The x-coordinate of the handle in the shape's local coordinate system

x: number

The y-coordinate of the handle in the shape's local coordinate system

y: number