@hncode/hncode 0.5.5 → 0.6.0

package/src/tex/parse.js

@@ -0,0 +1,331 @@
+/**
+ * TeX → a laid-out box tree, measured in font units.
+ *
+ * The output of this module is geometric, not pixels: each node knows where it goes relative to its parent
+ * and how big it is, so the rasteriser only has to walk the tree once. Sizes follow TeX's rules — a
+ * superscript is 0.7 of its base, a sub-subscript 0.5 — because matching them is what makes a formula look
+ * typeset rather than assembled.
+ *
+ * Scope: the constructs that appear in discussion rather than in a paper. Fractions, roots, sub- and
+ * superscripts, big operators with limits, matrices and `cases`, accents, and text runs. Anything else
+ * degrades to its own source rather than to a half-drawn box.
+ */
+
+import { SYMBOLS } from '../latex.js';
+
+const SCRIPT_RATIO = 0.7;
+const SCRIPT_SCRIPT_RATIO = 0.55;
+
+/** Vertical space around a fraction bar, in em fractions. */
+const FRAC_GAP = 0.12;
+/** Gap between a big operator and its limits. */
+const LIMIT_GAP = 0.08;
+/** Space either side of a binary operator, in em. */
+const BIN_SPACE = 0.22;
+/** Space after a comma in a list. */
+const PUNCT_SPACE = 0.16;
+
+/** Glyph classes that need spacing around them. */
+const BINARY = new Set(['+', '−', '-', '±', '∓', '×', '÷', '·', '∗', '∪', '∩', '∧', '∨', '⊕', '⊗']);
+const RELATION = new Set(['=', '≠', '≈', '≡', '≤', '≥', '<', '>', '∈', '∉', '⊂', '⊃', '⊆', '⊇', '→', '←', '↔', '⇒', '⇐', '⇔', '∝']);
+const RELATION_NAMES = new Set(['leq', 'le', 'geq', 'ge', 'neq', 'ne', 'approx', 'equiv', 'sim', 'simeq',
+  'propto', 'in', 'notin', 'subset', 'supset', 'subseteq', 'supseteq', 'to', 'rightarrow', 'leftarrow',
+  'leftrightarrow', 'Rightarrow', 'Leftarrow', 'Leftrightarrow', 'implies', 'iff', 'mapsto']);
+const BINARY_NAMES = new Set(['pm', 'mp', 'times', 'div', 'cdot', 'ast', 'cup', 'cap', 'wedge', 'vee',
+  'oplus', 'otimes', 'land', 'lor', 'setminus']);
+
+/** Operators that take their limits above and below rather than to the right. */
+const BIG_OPERATORS = new Set(['sum', 'prod', 'int', 'oint', 'bigcup', 'bigcap', 'coprod']);
+const BIG_GLYPHS = { sum: '∑', prod: '∏', int: '∫', oint: '∮', bigcup: '⋃', bigcap: '⋂', coprod: '∐' };
+
+/** Accent commands and the combining variant a terminal font carries. */
+const ACCENTS = {
+  hat: '\u0302', widehat: '\u0302',
+  bar: '\u0304', overline: '\u0304',
+  vec: '\u20d7', overrightarrow: '\u20d7',
+  tilde: '\u0303', widetilde: '\u0303',
+  dot: '\u0307', ddot: '\u0308',
+};
+
+/**
+ * A box: width/height/depth in font units, plus the children that paint into it.
+ * `x`/`y` on a child are relative to this box's origin at its baseline on the left edge.
+ */
+function box(width, height, depth) {
+  return { width, height, depth, children: [] };
+}
+
+const em = (n) => Math.round(n);
+
+/**
+ * Tokenise TeX into commands, groups and single characters.
+ * Braces become explicit tokens so the parser can follow them.
+ */
+function tokenize(src) {
+  const out = [];
+  let i = 0;
+  while (i < src.length) {
+    const ch = src[i];
+
+    if (ch === '\\') {
+      const m = /^\\([A-Za-z]+|.)/.exec(src.slice(i));
+      if (!m) { i++; continue; }
+      out.push({ type: 'cmd', name: m[1] });
+      i += m[0].length;
+      // A control word swallows the space that follows it.
+      if (/^[A-Za-z]+$/.test(m[1])) while (src[i] === ' ') i++;
+      continue;
+    }
+
+    if (ch === '{') { out.push({ type: 'open' }); i++; continue; }
+    if (ch === '}') { out.push({ type: 'close' }); i++; continue; }
+    if (ch === '^') { out.push({ type: 'sup' }); i++; continue; }
+    if (ch === '_') { out.push({ type: 'sub' }); i++; continue; }
+    if (ch === '&') { out.push({ type: 'align' }); i++; continue; }
+    if (ch === ' ' || ch === '\t' || ch === '\n') { i++; continue; }
+
+    // Group surrogate pairs so an emoji or a rare symbol stays one token.
+    const cp = src.codePointAt(i);
+    const str = String.fromCodePoint(cp);
+    out.push({ type: 'char', value: str });
+    i += str.length;
+  }
+  return out;
+}
+
+/**
+ * Parse a token stream into an unmeasured node list.
+ * Nodes are the semantic pieces: atom, fraction, root, scripts, bigop, row, matrix.
+ */
+function parse(tokens, opts = {}) {
+  const rows = [];
+  let i = 0;
+
+  const parseGroup = () => {
+    // Called with `i` just past an `open`; consumes through its matching `close`.
+    const inner = [];
+    let depth = 1;
+    while (i < tokens.length && depth > 0) {
+      if (tokens[i].type === 'open') depth++;
+      else if (tokens[i].type === 'close') {
+        depth--;
+        if (depth === 0) { i++; break; }
+      }
+      inner.push(tokens[i]);
+      i++;
+    }
+    return parse(inner, opts);
+  };
+
+  const parseArg = () => {
+    // One argument: a braced group, a single token, or a command.
+    if (i >= tokens.length) return [];
+    if (tokens[i].type === 'open') { i++; return parseGroup(); }
+    const t = tokens[i++];
+    return parse([t], opts);
+  };
+
+  while (i < tokens.length) {
+    const t = tokens[i];
+
+    if (t.type === 'char') {
+      i++;
+      // Attach scripts to the character just read.
+      const node = { kind: 'atom', value: t.value };
+      node.scripts = parseScripts();
+      rows.push(node);
+      continue;
+    }
+
+    if (t.type === 'cmd') {
+      const name = t.name;
+      i++;
+
+      if (name === 'frac' || name === 'dfrac' || name === 'tfrac') {
+        const num = parseArg();
+        const den = parseArg();
+        const node = { kind: 'frac', num, den };
+        node.scripts = parseScripts();
+        rows.push(node);
+        continue;
+      }
+
+      if (name === 'sqrt') {
+        // An optional index `\sqrt[3]{x}`.
+        let index = null;
+        if (tokens[i] && tokens[i].type === 'char' && tokens[i].value === '[') {
+          i++;
+          const idxTokens = [];
+          while (i < tokens.length && !(tokens[i].type === 'char' && tokens[i].value === ']')) idxTokens.push(tokens[i++]);
+          i++;
+          index = parse(idxTokens, opts);
+        }
+        const body = parseArg();
+        const node = { kind: 'root', body, index };
+        node.scripts = parseScripts();
+        rows.push(node);
+        continue;
+      }
+
+      if (name === 'text' || name === 'mathrm' || name === 'mathbf' || name === 'mathit' || name === 'operatorname') {
+        const body = parseArg();
+        rows.push({ kind: 'row', body, upright: true });
+        continue;
+      }
+
+      if (name === 'begin') {
+        const env = readEnvName();
+        const matrix = parseEnvironment(env);
+        rows.push(matrix);
+        continue;
+      }
+
+      if (ACCENTS[name]) {
+        const body = parseArg();
+        const node = { kind: 'accent', accent: ACCENTS[name], body };
+        node.scripts = parseScripts();
+        rows.push(node);
+        continue;
+      }
+
+      if (BIG_OPERATORS.has(name)) {
+        const node = { kind: 'bigop', value: BIG_GLYPHS[name], name };
+        node.scripts = parseScripts();
+        rows.push(node);
+        continue;
+      }
+
+      if (name === 'left' || name === 'right') {
+        // Delimiter sizing is ignored; the delimiter itself is the next token.
+        if (tokens[i] && tokens[i].type === 'char') {
+          const delim = tokens[i].value;
+          i++;
+          if (name === 'left') rows.push({ kind: 'delim', value: delim, side: 'left' });
+          else rows.push({ kind: 'delim', value: delim, side: 'right' });
+        }
+        continue;
+      }
+
+      if (name === 'quad') { rows.push({ kind: 'space', width: 1 }); continue; }
+      if (name === 'qquad') { rows.push({ kind: 'space', width: 2 }); continue; }
+      if (name === ',' || name === ';' || name === ':' || name === '!') { rows.push({ kind: 'space', width: 0.17 }); continue; }
+
+      const sym = SYMBOLS[name];
+      if (sym !== undefined) {
+        const node = { kind: 'atom', value: sym };
+        node.scripts = parseScripts();
+        if (RELATION_NAMES.has(name)) node.cls = 'rel';
+        else if (BINARY_NAMES.has(name)) node.cls = 'bin';
+        rows.push(node);
+        continue;
+      }
+
+      // Unknown command: show its own source rather than dropping it silently.
+      rows.push({ kind: 'atom', value: '\\' + name, cls: 'raw' });
+      continue;
+    }
+
+    if (t.type === 'sup' || t.type === 'sub') {
+      // A script with nothing before it: keep it attached to an empty atom.
+      const node = { kind: 'atom', value: '' };
+      node.scripts = parseScripts();
+      rows.push(node);
+      continue;
+    }
+
+    if (t.type === 'align') {
+      i++;
+      rows.push({ kind: 'align' });
+      continue;
+    }
+
+    // open/close outside a group: treat as grouping noise.
+    i++;
+  }
+
+  return rows;
+
+  function parseScripts() {
+    const s = { sup: null, sub: null };
+    for (;;) {
+      if (i < tokens.length && (tokens[i].type === 'sup' || tokens[i].type === 'sub')) {
+        const which = tokens[i].type;
+        i++;
+        const arg = parseArg();
+        if (which === 'sup') s.sup = arg; else s.sub = arg;
+      } else break;
+    }
+    return (s.sup || s.sub) ? s : null;
+  }
+
+  function readEnvName() {
+    // `\begin{name}`: the name arrives as a group of characters.
+    if (!(tokens[i] && tokens[i].type === 'open')) return '';
+    i++;
+    let name = '';
+    while (i < tokens.length && tokens[i].type !== 'close') {
+      if (tokens[i].type === 'char') name += tokens[i].value;
+      else if (tokens[i].type === 'cmd') name += tokens[i].name;
+      i++;
+    }
+    i++;
+    return name;
+  }
+
+  function parseEnvironment(env) {
+    // Collect the body up to the matching `\end{env}`, splitting on `\\` and `&`.
+    const cells = [[[]]];
+    let depth = 1;
+    while (i < tokens.length) {
+      const tok = tokens[i];
+      if (tok.type === 'cmd' && tok.name === 'begin') {
+        depth++;
+        cells[cells.length - 1][cells[cells.length - 1].length - 1].push(tok);
+        i++;
+        continue;
+      }
+      if (tok.type === 'cmd' && tok.name === 'end') {
+        depth--;
+        i++;
+        // Consume `{env}`.
+        if (tokens[i] && tokens[i].type === 'open') {
+          i++;
+          while (i < tokens.length && tokens[i].type !== 'close') i++;
+          i++;
+        }
+        if (depth === 0) break;
+        continue;
+      }
+      if (tok.type === 'cmd' && tok.name === '\\') {
+        cells.push([[]]);
+        i++;
+        continue;
+      }
+      if (tok.type === 'align') {
+        cells[cells.length - 1].push([]);
+        i++;
+        continue;
+      }
+      cells[cells.length - 1][cells[cells.length - 1].length - 1].push(tok);
+      i++;
+    }
+
+    const kind = /matrix|array/.test(env) ? 'matrix'
+      : /cases/.test(env) ? 'cases'
+        : /align|gather|split/.test(env) ? 'align'
+          : 'matrix';
+
+    return {
+      kind: 'env',
+      env: kind,
+      rows: cells.map((row) => row.map((cell) => parse(cell, opts))),
+    };
+  }
+}
+
+/** Parse TeX source into an unmeasured node tree. */
+export function parseTex(src) {
+  return parse(tokenize(src));
+}
+
+export { FRAC_GAP, LIMIT_GAP, BIN_SPACE, PUNCT_SPACE, SCRIPT_RATIO, SCRIPT_SCRIPT_RATIO, BINARY, RELATION };

package/src/tex/raster.js

@@ -0,0 +1,216 @@
+/**
+ * Glyph outlines → antialiased coverage.
+ *
+ * The rasteriser is a scanline fill with 4×4 supersampling: for each pixel row, every contour crossing adds
+ * a sub-sample hit, and a pixel's coverage is the fraction of its 16 sub-samples inside the shape. That is
+ * enough for text at the sizes a formula uses, and it avoids the winding-number machinery a vector
+ * renderer would carry.
+ *
+ * Coverage, not colour: the caller decides what colour to composite, which keeps one raster useful for any
+ * theme.
+ */
+
+/** Sub-samples per pixel axis. 4 gives 16 levels of antialiasing. */
+const SS = 4;
+
+/**
+ * An axis-aligned path flattened from a glyph outline.
+ *
+ * TrueType contours mix on-curve and off-curve points; consecutive off-curve points imply the control point
+ * halfway between them. Flattening to line segments first keeps the fill loop simple.
+ */
+function flattenContours(contours, scale, offsetX, offsetY, scaleY) {
+  const polys = [];
+  for (const contour of contours) {
+    if (contour.length < 2) continue;
+    const pts = [];
+    const n = contour.length;
+
+    // A contour need not start on a curve point; when it does not, the start is the midpoint between
+    // the first two off-curve points.
+    let startIdx = contour.findIndex((p) => p.on);
+    let startX, startY;
+    if (startIdx < 0) {
+      startX = (contour[0].x + contour[1].x) / 2;
+      startY = (contour[0].y + contour[1].y) / 2;
+      startIdx = 0;
+    } else {
+      startX = contour[startIdx].x;
+      startY = contour[startIdx].y;
+    }
+    const toX = (x) => x * scale + offsetX;
+    const toY = (y) => y * scaleY + offsetY;
+    pts.push([toX(startX), toY(startY)]);
+
+    let prevX = startX;
+    let prevY = startY;
+    let ctrl = null;
+
+    for (let k = 1; k <= n; k++) {
+      const p = contour[(startIdx + k) % n];
+      if (p.on) {
+        if (ctrl) {
+          emitQuad(pts, prevX, prevY, ctrl.x, ctrl.y, p.x, p.y, toX, toY);
+          ctrl = null;
+        } else {
+          pts.push([toX(p.x), toY(p.y)]);
+        }
+        prevX = p.x; prevY = p.y;
+      } else {
+        if (ctrl) {
+          // Two off-curve points in a row imply an on-curve point halfway between them.
+          const mx = (ctrl.x + p.x) / 2;
+          const my = (ctrl.y + p.y) / 2;
+          emitQuad(pts, prevX, prevY, ctrl.x, ctrl.y, mx, my, toX, toY);
+          prevX = mx; prevY = my;
+        }
+        ctrl = p;
+      }
+    }
+
+    // Close the contour back to where it started.
+    if (ctrl) emitQuad(pts, prevX, prevY, ctrl.x, ctrl.y, startX, startY, toX, toY);
+    polys.push(pts);
+  }
+  return polys;
+}
+
+/** Flatten one quadratic bezier into line segments, appending to `pts`. */
+function emitQuad(pts, x0, y0, cx, cy, x1, y1, toX, toY) {
+  const steps = Math.max(2, Math.min(16, Math.ceil(Math.hypot(toX(x1) - toX(x0), toY(y1) - toY(y0)) / 2) || 2));
+  for (let i = 1; i <= steps; i++) {
+    const t = i / steps;
+    const mt = 1 - t;
+    const x = mt * mt * x0 + 2 * mt * t * cx + t * t * x1;
+    const y = mt * mt * y0 + 2 * mt * t * cy + t * t * y1;
+    pts.push([toX(x), toY(y)]);
+  }
+}
+
+/**
+ * Rasterise contours into a coverage bitmap.
+ *
+ * @param {Array<Array<{x:number,y:number,on:boolean}>>} contours Glyph outline in font units.
+ * @param {number} scale Font units → pixels.
+ * @param {number} offsetX Where the glyph origin lands, in pixels.
+ * @param {number} offsetY Where the baseline lands, in pixels (y grows DOWN in the output).
+ * @param {number} width Bitmap width in pixels.
+ * @param {number} height Bitmap height in pixels.
+ * @returns {Float32Array} Coverage 0..1 per pixel, row-major.
+ */
+export function rasterize(contours, scale, offsetX, offsetY, width, height) {
+  const cover = new Float32Array(width * height);
+  if (!contours.length || width <= 0 || height <= 0) return cover;
+
+  // The outline's y grows up; the bitmap's grows down, so the offset flips it.
+  // Negating the y scale flips the outline into bitmap space, so `offsetY` is a real baseline row.
+  const polys = flattenContours(contours, scale, offsetX, offsetY, -scale);
+  if (!polys.length) return cover;
+
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (const poly of polys) for (const [, y] of poly) { if (y < minY) minY = y; if (y > maxY) maxY = y; }
+
+  const y0 = Math.max(0, Math.floor(minY));
+  const y1 = Math.min(height - 1, Math.ceil(maxY));
+
+  // Horizontal edges never contribute a crossing; skip them.
+  const edges = [];
+  for (const poly of polys) {
+    for (let i = 0; i < poly.length; i++) {
+      const [ax, ay] = poly[i];
+      const [bx, by] = poly[(i + 1) % poly.length];
+      if (ay === by) continue;
+      edges.push(ax < bx ? [ax, ay, bx, by] : [bx, by, ax, ay]);
+    }
+  }
+  if (!edges.length) return cover;
+
+  const rowHits = new Map();   // pixel index -> sub-sample hits
+
+  for (let py = y0; py <= y1; py++) {
+    for (let sy = 0; sy < SS; sy++) {
+      const y = py + (sy + 0.5) / SS;
+      const xs = [];
+      for (const [ax, ay, bx, by] of edges) {
+        if ((y >= ay && y < by) || (y >= by && y < ay)) {
+          const t = (y - ay) / (by - ay);
+          xs.push(ax + (bx - ax) * t);
+        }
+      }
+      if (xs.length < 2) continue;
+      xs.sort((a, b) => a - b);
+      // Even-odd fill: spans between crossing pairs are inside.
+      for (let i = 0; i + 1 < xs.length; i += 2) {
+        const spanFrom = xs[i];
+        const spanTo = xs[i + 1];
+        if (spanTo <= spanFrom) continue;
+        const pxFrom = Math.max(0, Math.floor(spanFrom));
+        const pxTo = Math.min(width - 1, Math.ceil(spanTo) - 1);
+        for (let px = pxFrom; px <= pxTo; px++) {
+          // Sub-sample coverage of this pixel by this span.
+          const left = Math.max(spanFrom, px);
+          const right = Math.min(spanTo, px + 1);
+          if (right <= left) continue;
+          for (let sx = 0; sx < SS; sx++) {
+            const x = px + (sx + 0.5) / SS;
+            if (x >= left && x < right) {
+              const key = py * width + px;
+              rowHits.set(key, (rowHits.get(key) || 0) + 1);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  const total = SS * SS;
+  for (const [key, hits] of rowHits) cover[key] = Math.min(1, hits / total);
+  return cover;
+}
+
+/**
+ * Composite a coverage bitmap onto an RGBA buffer.
+ *
+ * @param {Uint8ClampedArray} rgba Destination, length width*height*4.
+ * @param {Float32Array} cover Coverage 0..1, row-major.
+ * @param {number} width Bitmap width.
+ * @param {number} height Bitmap height.
+ * @param {{r:number,g:number,b:number}} colour Ink colour.
+ * @param {{x:number,y:number}} at Where the coverage bitmap's top-left goes.
+ */
+/**
+ * Composite a coverage bitmap onto an RGBA buffer.
+ *
+ * `stride` is the destination width, which is not the coverage width: the glyph is a small patch placed
+ * inside a larger image, and using one width for both wrote every row at the wrong offset.
+ *
+ * @param {Uint8ClampedArray} rgba Destination, length stride*height*4.
+ * @param {Float32Array} cover Coverage 0..1, row-major, width*height.
+ * @param {number} width Coverage width.
+ * @param {number} height Coverage height.
+ * @param {number} stride Destination width in pixels.
+ * @param {{r:number,g:number,b:number}} colour Ink colour.
+ * @param {{x:number,y:number}} at Where the coverage patch goes, in destination pixels.
+ */
+export function composite(rgba, cover, width, height, stride, colour, at) {
+  for (let y = 0; y < height; y++) {
+    const dy = at.y + y;
+    if (dy < 0) continue;
+    for (let x = 0; x < width; x++) {
+      const a = cover[y * width + x];
+      if (a <= 0) continue;
+      const dx = at.x + x;
+      if (dx < 0 || dx >= stride) continue;
+      const i = (dy * stride + dx) * 4;
+      if (i + 3 >= rgba.length) continue;
+      const dstA = rgba[i + 3] / 255;
+      const outA = a + dstA * (1 - a);
+      if (outA <= 0) continue;
+      rgba[i] = (colour.r * a + rgba[i] * dstA * (1 - a)) / outA;
+      rgba[i + 1] = (colour.g * a + rgba[i + 1] * dstA * (1 - a)) / outA;
+      rgba[i + 2] = (colour.b * a + rgba[i + 2] * dstA * (1 - a)) / outA;
+      rgba[i + 3] = outA * 255;
+    }
+  }
+}