pretext.ts

// Pretext - a miniature text layout engine in the spirit of the original:
// measure every glyph run exactly once, then reflow at any width with pure
// arithmetic. No DOM, no reflow cost - layout() is just additions.

export interface PreparedWord {
  text: string;
  width: number;
}

export interface PreparedText {
  words: PreparedWord[];
  spaceWidth: number;
  lineHeight: number;
  font: string;
}

export interface LayoutLine {
  words: PreparedWord[];
  width: number;
}

export interface LayoutResult {
  lines: LayoutLine[];
  wordCount: number;
  /** layout cost in milliseconds - the number worth bragging about */
  ms: number;
}

export function prepare(
  text: string,
  ctx: CanvasRenderingContext2D,
  font: string,
  lineHeight: number
): PreparedText {
  ctx.font = font;
  const cache = new Map<string, number>();
  const measure = (word: string) => {
    let width = cache.get(word);
    if (width === undefined) {
      width = ctx.measureText(word).width;
      cache.set(word, width);
    }
    return width;
  };

  const words = text
    .split(/\s+/)
    .filter(Boolean)
    .map((word) => ({ text: word, width: measure(word) }));

  return {
    words,
    spaceWidth: measure(' '),
    lineHeight,
    font,
  };
}

export function layout(prepared: PreparedText, maxWidth: number): LayoutResult {
  const start = performance.now();
  const lines: LayoutLine[] = [];

  let current: PreparedWord[] = [];
  let currentWidth = 0;

  for (const word of prepared.words) {
    const extra = current.length === 0 ? word.width : prepared.spaceWidth + word.width;
    if (currentWidth + extra > maxWidth && current.length > 0) {
      lines.push({ words: current, width: currentWidth });
      current = [word];
      currentWidth = word.width;
    } else {
      current.push(word);
      currentWidth += extra;
    }
  }
  if (current.length > 0) lines.push({ words: current, width: currentWidth });

  return {
    lines,
    wordCount: prepared.words.length,
    ms: performance.now() - start,
  };
}