Paths

Every sketch function returns a Path, a readonly list of PathCommands. A path is plain data. It holds no methods and no state, so it serializes as it is and a test can compare it with a literal.

type PathCommand =
  | { readonly kind: "move"; readonly point: LocalPoint }
  | { readonly kind: "line"; readonly point: LocalPoint }
  | {
      readonly kind: "curve";
      readonly control1: LocalPoint;
      readonly control2: LocalPoint;
      readonly point: LocalPoint;
    };

type Path = readonly PathCommand[];

• move starts a new subpath at point.
• line draws a straight line from the current point to point.
• curve draws a cubic Bézier from the current point to point, with two control points.

All points are LocalPoints from @draw/shapes, so they are in the shape’s frame-local units. A canvas replays them with moveTo, lineTo and bezierCurveTo. An SVG writer maps them to M, L and C.

docs/examples/path-data.ts

import { localPoint } from "@draw/shapes";
import type { Path } from "@draw/sketch";

export const underline: Path = [
  { kind: "move", point: localPoint(0, 10) },
  {
    kind: "curve",
    control1: localPoint(30, 12),
    control2: localPoint(70, 8),
    point: localPoint(100, 10),
  },
];

Comparing kinds

PathCommandKind names the three command kinds, move, line and curve, so a consumer writes command.kind === PathCommandKind.curve. See named values.