@quario/layout 0.2.0 → 0.4.0

package/lib/text.js

@@ -3,25 +3,30 @@
  * their resolved typography, and a greedy breaker turns those into lines. Pure
  * measurement against the font registry — nothing here touches the page.
  */
-import { display, format } from "quario";
+import { display, format, styledRuns } from "quario";
 import { ascOf, face, printable, width } from "./fonts.js";
-import { LEAD, col, dressed, sizeOf, upper } from "./style.js";
+import { LEAD, col, merge, sameCol, sizeOf, upper } from "./style.js";
 
 // What measuring needs and no more, and it is exactly the render's settings:
 // the faces to measure against, the base size and family a style falls back to,
-// and the intl three a formatted value resolves in. Declared next door, in
-// `canvas.js`, where it is built and settled — nothing here can touch a page,
-// and a caller hands over `canvas.settings` rather than the canvas.
-/** @typedef {import('./canvas.js').Settings} Settings */
+// and the intl three a formatted value resolves in. Declared in `settings.js`,
+// the module that owns them; a caller hands over `canvas.settings` rather than
+// the canvas, so nothing here can touch a page.
+/** @typedef {import('./settings.js').Settings} Settings */
 
+// The typography one styled run wears, resolved once and stamped on every atom
+// of it. Decoration and the highlight ride here rather than on the line,
+// because a run is what wears them: underlining a word has to stop where the
+// word does (ADR 0061).
 /**
- * @typedef {{ text: string, font: any, size: number, color: any,
- *   space: boolean, hard: boolean }} Atom
+ * @typedef {{ font: any, size: number, color: any, bg: any,
+ *   underline: boolean, strikethrough: boolean }} Look
  */
+/** @typedef {Look & { text: string, space: boolean, hard: boolean }} Atom */
+/** @typedef {Look & { text: string, w: number }} Piece */
 /**
- * @typedef {{ pieces: { text: string, font: any, size: number, color: any,
- *   w: number }[], w: number, h: number, size: number, asc: number,
- *   underline?: boolean, strikethrough?: boolean }} Line
+ * @typedef {{ pieces: Piece[], w: number, h: number, size: number,
+ *   asc: number }} Line
  */
 
 /** @typedef {{ cur: Atom[], w: number, lines: Line[], base: number }} Wrap */
@@ -29,7 +34,7 @@ import { LEAD, col, dressed, sizeOf, upper } from "./style.js";
 /** @type {(token: any, style: any, settings: Settings) => string} */
 let rawOf = (token, style, settings) => {
   if ("literal" in token) return token.literal;
-  return format(token.value, style?.format, settings) ?? display(token.value);
+  return format(token.value, style, settings) ?? display(token.value);
 };
 
 // This layout has no text-transform to defer to, so `uppercase` is applied to
@@ -40,40 +45,74 @@ let rawOf = (token, style, settings) => {
 /** @type {(text: string, style: any) => string} */
 let cased = (text, style) => (upper(style) ? text.toUpperCase() : text);
 
-/** @type {(out: Atom[], font: any, size: number, color: any, line: string) => void} */
-let pushParts = (out, font, size, color, line) => {
-  for (let part of printable(font, line).split(/( +)/).filter(Boolean))
-    out.push({ text: part, font, size, color, space: part[0] === " ", hard: false });
+/** @type {(out: Atom[], look: Look, line: string) => void} */
+let pushParts = (out, look, line) => {
+  for (let part of printable(look.font, line).split(/( +)/).filter(Boolean))
+    out.push({ ...look, text: part, space: part[0] === " ", hard: false });
 };
 
-/** @type {(out: Atom[], font: any, size: number, color: any, i: number, line: string) => void} */
-let pushLine = (out, font, size, color, i, line) => {
-  if (i) out.push({ text: "", font, size, color, space: false, hard: true });
-  pushParts(out, font, size, color, line);
+/** @type {(out: Atom[], look: Look, i: number, line: string) => void} */
+let pushLine = (out, look, i, line) => {
+  if (i) out.push({ ...look, text: "", space: false, hard: true });
+  pushParts(out, look, line);
 };
 
-/** @type {(settings: Settings, style: any) => { font: any, size: number, color: any }} */
+/** @type {(settings: Settings, style: any) => Look} */
 let look = (settings, style) => {
   let resolved = style || {};
   return {
     font: face(settings.fonts, resolved, settings.family),
     size: sizeOf(resolved, settings.base),
     color: col(resolved.color),
+    bg: col(resolved.background),
+    underline: resolved.underline === true,
+    strikethrough: resolved.strikethrough === true,
   };
 };
 
-// Flatten a cell's tokens to word/space atoms carrying the cell's resolved
-// typography — one face, size and colour for the whole cell. CR, LF, and
-// CRLF are one hard break each (SCHEMA.md, Cell values).
+/** @type {(seen: Look, base: any) => Look} */
+let highlighted = (seen, base) => (sameCol(seen.bg, base) ? { ...seen, bg: null } : seen);
+
+// What one styled run draws in: the style it presents its values through, and
+// the look its atoms wear. Its own declarations over the cell's where it
+// carries a block, and the cell's answer unchanged where it does not — asked
+// once, so the run's two questions cannot be branched on separately.
+/** @type {(settings: Settings, style: any, styled: any, bare: Look, base: any) =>
+ *   { worn: any, seen: Look} }*/
+let wornBy = (settings, style, styled, bare, base) => {
+  if (!styled.style) return { worn: style, seen: bare };
+  let worn = merge(style, styled.style);
+  return { worn, seen: highlighted(look(settings, worn), base) };
+};
+
+// One styled run's tokens flattened to atoms, all of them wearing its look.
+/** @type {(out: Atom[], settings: Settings, styled: any, dress: { worn: any, seen: Look }) => void} */
+let pushStyledRun = (out, settings, styled, { worn, seen }) => {
+  for (let token of styled.tokens)
+    for (let [i, line] of cased(rawOf(token, worn, settings), worn)
+      .split(/\r\n|\r|\n/)
+      .entries())
+      pushLine(out, seen, i, line);
+};
+
+// Flatten a cell's tokens to word/space atoms carrying their run's resolved
+// typography. A run's style is the engine's fully-resolved answer for that
+// stretch, so it lays over the cell's *effective* style -- the row's, the band
+// role's or the split's, whichever reached this cell -- rather than replacing
+// it: the run says what it says and the layers outside the cell stand where it
+// is silent. A cell with no authored runs is one run wearing the cell's own
+// look, which is what it always was. CR, LF, and CRLF are one hard break each
+// (SCHEMA.md, Cell values).
 /** @type {(settings: Settings, tokens: any[], style: any) => Atom[]} */
 let atoms = (settings, tokens, style) => {
   let out = /** @type {Atom[]} */ ([]);
-  let { font, size, color } = look(settings, style);
-  for (let token of tokens)
-    for (let [i, line] of cased(rawOf(token, style, settings), style)
-      .split(/\r\n|\r|\n/)
-      .entries())
-      pushLine(out, font, size, color, i, line);
+  let own = look(settings, style);
+  // The cell's own `background` is already painted at cell scope, so a run
+  // highlights only where it names a different one -- otherwise every ordinary
+  // cell with a background would paint it twice, once per line.
+  let bare = { ...own, bg: null };
+  for (let styled of styledRuns(tokens))
+    pushStyledRun(out, settings, styled, wornBy(settings, style, styled, bare, own.bg));
   return out;
 };
 
@@ -82,10 +121,22 @@ let trimEnd = (cur) => {
   while (cur.length && cur[cur.length - 1].space) cur.pop();
 };
 
-/** @type {(pieces: Line['pieces'], atom: Atom, atomWidth: number) => void} */
+// Whether two stretches draw identically, and so may be one piece. Colours
+// compare channel-wise because `col()` mints a fresh object per read and
+// interns nothing, so identity would split every run in two.
+/** @type {(a: Look, b: Look) => boolean} */
+let sameFace = (a, b) => a.font === b.font && a.size === b.size;
+/** @type {(a: Look, b: Look) => boolean} */
+let sameInk = (a, b) => sameCol(a.color, b.color) && sameCol(a.bg, b.bg);
+/** @type {(a: Look, b: Look) => boolean} */
+let sameRule = (a, b) => a.underline === b.underline && a.strikethrough === b.strikethrough;
+/** @type {(a: Look, b: Look) => boolean} */
+let sameLook = (a, b) => sameFace(a, b) && sameInk(a, b) && sameRule(a, b);
+
+/** @type {(pieces: Piece[], atom: Atom, atomWidth: number) => void} */
 let mergeAtom = (pieces, atom, atomWidth) => {
   let last = pieces[pieces.length - 1];
-  if (last) {
+  if (last && sameLook(last, atom)) {
     last.text += atom.text;
     last.w += atomWidth;
     return;
@@ -95,6 +146,9 @@ let mergeAtom = (pieces, atom, atomWidth) => {
     font: atom.font,
     size: atom.size,
     color: atom.color,
+    bg: atom.bg,
+    underline: atom.underline,
+    strikethrough: atom.strikethrough,
     w: atomWidth,
   });
 };
@@ -219,9 +273,9 @@ let placeAtom = (state, atom, avail) => {
 };
 
 // Greedy wrap against `avail`: spaces never start a line, an over-wide word
-// breaks by character, hard breaks always break. A cell's atoms share one
-// typography, so a line's atoms merge into a single draw piece. `size` is the
-// empty-run height — a blank item, a hard-break hole.
+// breaks by character, hard breaks always break. Atoms that draw alike merge
+// into one piece, so a cell with no styled runs is still one piece per line.
+// `size` is the empty-run height — a blank item, a hard-break hole.
 /** @type {(list: Atom[], avail: number, size: number) => Line[]} */
 let wrap = (list, avail, size) => {
   /** @type {Wrap} */
@@ -231,22 +285,7 @@ let wrap = (list, avail, size) => {
   return state.lines;
 };
 
-// Stamp cell-level decorations onto every wrapped fragment. Measurement does
-// not need them; drawing does, and wrapping must not lose them.
-/** @type {(line: Line, underline: boolean, strikethrough: boolean) => void} */
-let stamp = (line, underline, strikethrough) => {
-  if (underline) line.underline = true;
-  if (strikethrough) line.strikethrough = true;
-};
-
-/** @type {(lines: Line[], style: any) => Line[]} */
-let dress = (lines, style) => {
-  if (!dressed(style)) return lines;
-  for (let line of lines) stamp(line, !!style.underline, !!style.strikethrough);
-  return lines;
-};
-
 /** @type {(lines: Line[]) => number} */
 let heightOf = (lines) => lines.reduce((total, line) => total + line.h, 0);
 
-export { atoms, dress, heightOf, wrap };
+export { atoms, heightOf, wrap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quario/layout",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The paged display list for quario — the layout the PDF target writes and the viewer paints — in the makings, not yet released",
   "homepage": "https://getquario.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -43,13 +43,13 @@
     "@size-limit/preset-small-lib": "^13.0.3",
     "@types/fontkit": "^2.0.9",
     "fontkit": "^2.0.4",
-    "quario": "^0.5.0",
+    "quario": "^0.7.0",
     "size-limit": "^13.0.3",
     "typescript": "^7.0.2"
   },
   "peerDependencies": {
     "fontkit": "^2.0.4",
-    "quario": "^0.5.0"
+    "quario": "^0.7.0"
   },
   "peerDependenciesMeta": {
     "fontkit": {