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 ID of the handle to use as reference point for shift-modifier angle snapping

snapReferenceHandleId?: 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;