import { type PreparedTextWithSegments, layoutWithLines, prepareWithSegments, } from '@chenglou/pretext'; /** * Default render size in px when callers omit the `size` arg on `layout()`. */ const DEFAULT_RENDER_SIZE_PX = 16; /** * Per-grapheme data computed during dual-font layout. Internal to the engine; * consumed by computeLineRenderModel to derive the per-frame render model. */ export interface ComparisonChar { /** * Grapheme cluster (may be >1 code unit for emoji, combining marks). */ char: string; /** * X offset from line start in fontA, pixels. */ xA: number; /** * Advance width of this grapheme in fontA, pixels. */ widthA: number; /** * X offset from line start in fontB, pixels. */ xB: number; /** * Advance width of this grapheme in fontB, pixels. */ widthB: number; } /** * A single laid-out line. `chars` carries the per-grapheme data needed by * computeLineRenderModel. Consumers should not iterate it directly. */ export interface ComparisonLine { /** * Full text of this line as returned by pretext. */ text: string; /** * Rendered width in pixels — maximum across fontA and fontB. */ width: number; /** * Per-grapheme metadata for both fonts. */ chars: ComparisonChar[]; } /** * Aggregated output of a dual-font layout pass. */ export interface ComparisonResult { /** * Per-line grapheme data. Empty when input text is empty. */ lines: ComparisonLine[]; /** * Total height in pixels. */ totalHeight: number; } /** * Dual-font text layout engine backed by `@chenglou/pretext`. * * Computes identical line breaks for two fonts simultaneously by constructing a * "unified" prepared-text object whose per-glyph widths are the worst-case maximum * of font A and font B. This guarantees that both fonts wrap at exactly the same * positions, making side-by-side or slider comparison visually coherent. * * Relies on pretext's published structural fields on `PreparedTextWithSegments` * (`widths`, `breakableFitAdvances`, `lineEndFitAdvances`, `lineEndPaintAdvances`) * which are exposed via the `PreparedCore` intersection in `@chenglou/pretext@0.0.6`. * * **Two-level caching strategy** * 1. Font-change cache (`#preparedA`, `#preparedB`, `#unifiedPrepared`): rebuilt only * when `text`, `fontA`, or `fontB` changes. `prepareWithSegments` is expensive * (canvas measurement), so this avoids re-measuring during slider interaction. * 2. Layout cache (`#lastResult`): rebuilt when `width` or `lineHeight` changes but * the fonts have not changed. Line-breaking is cheap relative to measurement, but * still worth skipping on every render tick. * * Per-frame slider state derivation lives in `computeLineRenderModel`, not on the * class. This class is pure layout + caching; it holds no reactive state. */ export class DualFontLayout { #segmenter: Intl.Segmenter; // Cached prepared data #preparedA: PreparedTextWithSegments | null = null; #preparedB: PreparedTextWithSegments | null = null; #unifiedPrepared: PreparedTextWithSegments | null = null; #lastText = ''; #lastFontA = ''; #lastFontB = ''; #lastSpacing = 0; #lastSize = 0; // Cached layout results #lastWidth = -1; #lastLineHeight = -1; #lastResult: ComparisonResult | null = null; constructor(locale?: string) { this.#segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' }); } /** * Lay out `text` using both fonts within `width` pixels. * * Line breaks are determined by the worst-case (maximum) glyph widths across * both fonts, so both fonts always wrap at identical positions. * * @param text Raw text to lay out. * @param fontA CSS font string for the first font: `"weight sizepx \"family\""`. * @param fontB CSS font string for the second font: `"weight sizepx \"family\""`. * @param width Available line width in pixels. * @param lineHeight Line height in pixels (passed directly to pretext). * @param spacing Letter spacing in em (from typography settings). * @param size Current font size in pixels (used to convert spacing em to px). * @returns Per-line grapheme data for both fonts. Empty `lines` when `text` is empty. */ layout( text: string, fontA: string, fontB: string, width: number, lineHeight: number, spacing: number = 0, size: number = DEFAULT_RENDER_SIZE_PX, ): ComparisonResult { if (!text) { return { lines: [], totalHeight: 0 }; } const spacingPx = spacing * size; const isFontChange = text !== this.#lastText || fontA !== this.#lastFontA || fontB !== this.#lastFontB || spacing !== this.#lastSpacing || size !== this.#lastSize; const isLayoutChange = width !== this.#lastWidth || lineHeight !== this.#lastLineHeight; if (!isFontChange && !isLayoutChange && this.#lastResult) { return this.#lastResult; } // 1. Prepare (or use cache) if (isFontChange) { this.#preparedA = prepareWithSegments(text, fontA); this.#preparedB = prepareWithSegments(text, fontB); this.#unifiedPrepared = this.#createUnifiedPrepared(this.#preparedA, this.#preparedB, spacingPx); this.#lastText = text; this.#lastFontA = fontA; this.#lastFontB = fontB; this.#lastSpacing = spacing; this.#lastSize = size; } if (!this.#unifiedPrepared || !this.#preparedA || !this.#preparedB) { return { lines: [], totalHeight: 0 }; } const { lines, height } = layoutWithLines(this.#unifiedPrepared, width, lineHeight); // 3. Map results back to both fonts const preparedA = this.#preparedA; const preparedB = this.#preparedB; const resultLines: ComparisonLine[] = lines.map(line => { const chars: ComparisonChar[] = []; let currentXA = 0; let currentXB = 0; const start = line.start; const end = line.end; for (let sIdx = start.segmentIndex; sIdx <= end.segmentIndex; sIdx++) { const segmentText = preparedA.segments[sIdx]; if (segmentText === undefined) { continue; } const graphemes = Array.from(this.#segmenter.segment(segmentText), s => s.segment); const advA = preparedA.breakableFitAdvances[sIdx]; const advB = preparedB.breakableFitAdvances[sIdx]; const gStart = sIdx === start.segmentIndex ? start.graphemeIndex : 0; const gEnd = sIdx === end.segmentIndex ? end.graphemeIndex : graphemes.length; for (let gIdx = gStart; gIdx < gEnd; gIdx++) { const char = graphemes[gIdx]; let wA = advA != null ? advA[gIdx]! : preparedA.widths[sIdx]!; let wB = advB != null ? advB[gIdx]! : preparedB.widths[sIdx]!; // Apply letter spacing (tracking) to the width of each character wA += spacingPx; wB += spacingPx; chars.push({ char, xA: currentXA, widthA: wA, xB: currentXB, widthB: wB, }); currentXA += wA; currentXB += wB; } } return { text: line.text, width: line.width, chars, }; }); this.#lastWidth = width; this.#lastLineHeight = lineHeight; this.#lastResult = { lines: resultLines, totalHeight: height, }; return this.#lastResult; } /** * Merge two prepared texts into a worst-case unified version so both fonts * wrap at identical positions. Per-segment widths are the elementwise max * across both fonts, with `spacingPx` added to model letter-spacing. */ #createUnifiedPrepared( a: PreparedTextWithSegments, b: PreparedTextWithSegments, spacingPx: number = 0, ): PreparedTextWithSegments { const unified: PreparedTextWithSegments = { ...a }; unified.widths = a.widths.map((w, i) => Math.max(w, b.widths[i]) + spacingPx); unified.lineEndFitAdvances = a.lineEndFitAdvances.map((w, i) => Math.max(w, b.lineEndFitAdvances[i]) + spacingPx ); unified.lineEndPaintAdvances = a.lineEndPaintAdvances.map((w, i) => Math.max(w, b.lineEndPaintAdvances[i]) + spacingPx ); unified.breakableFitAdvances = a.breakableFitAdvances.map((advA, i) => { const advB = b.breakableFitAdvances[i]; if (!advA && !advB) { return null; } if (!advA) { return advB!.map(w => w + spacingPx); } if (!advB) { return advA.map(w => w + spacingPx); } return advA.map((w, j) => Math.max(w, advB[j]) + spacingPx); }); return unified; } }