LineShapeUtil

API reference for the LineShapeUtil class

LineShapeUtil

LineShapeUtil provides functionality for multi-point line shapes with configurable styles and spline interpolation. Lines can be straight segments or smooth curves.

Overview

The line shape allows users to create connected line segments with multiple control points. Each point can be moved independently, and new points can be added by clicking the midpoint handles.

Static properties

type · string · default: "\"line\""

Shape type identifier

props · TLLineShapeProps

Line shape property definitions

migrations · Migrations

Shape migration definitions

Shape properties

dash · 'draw' | 'solid' | 'dashed' | 'dotted' · default: "'draw'"

Line dash style

size · 's' | 'm' | 'l' | 'xl' · default: "'m'"

Line thickness

color · TLColorType · default: "'black'"

Line color

spline · 'line' | 'cubic' · default: "'line'"

Interpolation method - ‘line’ for straight segments, ‘cubic’ for smooth curves

points · Record<string, TLLineShapePoint>

Dictionary of line points with fractional indexing

scale · number · default: "1"

Shape scale factor

Point structure

Each point in the points object has:

interface TLLineShapePoint {
  id: string       // Fractional index (e.g., 'a1', 'a2')
  index: string    // Same as id
  x: number        // X coordinate relative to shape origin
  y: number        // Y coordinate relative to shape origin
}

Methods

getDefaultProps()

Returns default properties for new line shapes with two points.

getDefaultProps(): TLLineShape['props']

getGeometry(shape)

Returns the path geometry for the line, either straight segments or cubic spline.

getGeometry(shape: TLLineShape): PathBuilderGeometry2d

getHandles(shape)

Returns handles for all vertices and midpoint create handles.

getHandles(shape: TLLineShape): TLHandle[]

Returns two types of handles:

• Vertex handles - At each point, can be dragged to move the point
• Create handles - At segment midpoints, click to add new points

component(shape)

Renders the line using SVG path with configurable stroke styles.

component(shape: TLLineShape): JSX.Element

indicator(shape)

Renders a simplified path indicator for selection.

indicator(shape: TLLineShape): JSX.Element

Handle interactions

onHandleDrag(shape, info)

Handles dragging of vertex points and creation of new points.

onHandleDrag(shape: TLLineShape, info: TLHandleDragInfo): TLLineShape | void

Behavior:

• Dragging vertex handles moves existing points
• Clicking create handles inserts new points at that location

onResize(shape, info)

Handles resizing by scaling all points proportionally.

onResize(shape: TLLineShape, info: TLResizeInfo): TLLineShape

Configuration

Spline types

Line (‘line’):

• Straight segments between points
• Sharp corners at vertices
• Simple and precise

Cubic (‘cubic’):

• Smooth curves through all points
• Rounded corners
• More organic appearance

Usage examples

Creating a line programmatically

const lineId = createShapeId()

editor.createShape({
  id: lineId,
  type: 'line',
  x: 100,
  y: 100,
  props: {
    color: 'blue',
    size: 'l',
    spline: 'line',
    dash: 'solid',
    points: {
      'a1': { id: 'a1', index: 'a1', x: 0, y: 0 },
      'a2': { id: 'a2', index: 'a2', x: 100, y: 0 },
      'a3': { id: 'a3', index: 'a3', x: 100, y: 100 },
    }
  }
})

Smooth curve line

editor.createShape({
  type: 'line',
  x: 200,
  y: 200,
  props: {
    color: 'red',
    size: 'm',
    spline: 'cubic', // Smooth curves
    dash: 'draw',
    points: {
      'a1': { id: 'a1', index: 'a1', x: 0, y: 0 },
      'a2': { id: 'a2', index: 'a2', x: 50, y: -30 },
      'a3': { id: 'a3', index: 'a3', x: 100, y: 0 },
      'a4': { id: 'a4', index: 'a4', x: 150, y: 30 },
    }
  }
})

Adding points to existing line

const shape = editor.getShape(lineId) as TLLineShape
const points = Object.values(shape.props.points)
const lastPoint = points[points.length - 1]
const newIndex = getIndexAbove(lastPoint.index)

editor.updateShape({
  id: lineId,
  type: 'line',
  props: {
    points: {
      ...shape.props.points,
      [newIndex]: { id: newIndex, index: newIndex, x: 200, y: 100 }
    }
  }
})

Related

• ArrowShapeUtil - Line with arrowheads and labels
• DrawShapeUtil - Freehand drawing
• ShapeUtil - Base class