ntk 8.12.6 → 8.12.8

package/lib/fontconfig.js

@@ -16,6 +16,40 @@ function execFileSync(...args) {
   return cp.execFileSync(...args);
 }
 
+let fcMatchFound = null;
+
+/**
+ * fc-match's path, looked up once per PATH. Spawned by its bare name, the
+ * system searches PATH for it, and on macOS that is `posix_spawnp`, which
+ * attempts a spawn in every directory ahead of the one that has it: with
+ * fc-match seventh on a developer's PATH, each spawn took 45 ms where the
+ * path itself takes 15 — and the synchronous ones stall the first text
+ * layout. A directory search here is a few stats. Not found, the bare name
+ * is spawned as before, so a missing fontconfig reports exactly as it did.
+ */
+export function fcMatchFile() {
+  const p = globalThis.process;
+  const path = p?.env?.PATH ?? '';
+  if (fcMatchFound !== null && fcMatchFound.path === path) return fcMatchFound.file;
+  let file = 'fc-match';
+  const fs = p?.platform === 'win32' ? undefined : builtin('node:fs');
+  if (fs) {
+    for (const dir of path.split(':')) {
+      const candidate = `${dir || '.'}/fc-match`;
+      try {
+        if (!fs.statSync(candidate).isFile()) continue;
+        fs.accessSync(candidate, fs.constants.X_OK);
+        file = candidate;
+        break;
+      } catch {
+        // not here, or not ours to run: the next directory
+      }
+    }
+  }
+  fcMatchFound = { path, file };
+  return file;
+}
+
 const DOCS = 'https://github.com/sidorares/ntk/blob/master/docs/fonts.md#environments-without-fontconfig';
 
 /**
@@ -279,7 +313,7 @@ function runFcMatch(fc) {
 
   const entry = { promise: null, base: null };
   entry.promise = new Promise((resolve, reject) => {
-    cp.execFile('fc-match', [...fcMatchArgs, fc], fcMatchOpts, (err, out, stderr) => {
+    cp.execFile(fcMatchFile(), [...fcMatchArgs, fc], fcMatchOpts, (err, out, stderr) => {
       if (inflight.get(fc) === entry) inflight.delete(fc);
       if (!err) return resolve(out);
       // execFile hands stderr to the callback; execFileSync hangs it on the
@@ -576,7 +610,7 @@ export function matchSortedSync(pattern) {
   }
   let out;
   try {
-    out = execFileSync('fc-match', [...fcMatchArgs, fc], fcMatchOpts);
+    out = execFileSync(fcMatchFile(), [...fcMatchArgs, fc], fcMatchOpts);
   } catch (err) {
     throw fcMatchError(err);
   }

package/lib/text/fontmanager.js

@@ -7,6 +7,7 @@ import {
 } from './fontsource.js';
 import { embeddingLevels, normalizedLevels, shapeText } from './shape.js';
 import { TextLayout } from './layout.js';
+import { ParagraphCache } from './paragraphs.js';
 
 // Bound on the resolved-match map. See the sweep in `match()`.
 const MAX_MATCHES = 512;
@@ -181,6 +182,27 @@ function instantiate(font, weight, variations, opticalSize) {
  * fontconfig, e.g. a StaticFontSource in a browser bundle. `source` also
  * takes a font spec: a path, a directory of faces, or font bytes.
  */
+/** A CSS family list's names, unquoted. */
+function familiesOf(family) {
+  return String(family)
+    .split(',')
+    .map((f) => f.trim().replace(/^["']|["']$/g, ''))
+    .filter(Boolean);
+}
+
+/**
+ * The pattern a family and face are matched with — one spelling for both
+ * `match` and `fallbackFor`, since a source caches its lists by pattern and
+ * the two ask about the same face.
+ */
+function patternOf(family, weight, italic) {
+  return {
+    family: familiesOf(family).join(','),
+    weight,
+    style: italic ? 'italic' : 'normal'
+  };
+}
+
 export default class FontManager {
   constructor({ source } = {}) {
     // coerced here rather than in the getter, which is on the match path;
@@ -195,6 +217,9 @@ export default class FontManager {
     this._shapeCache = new Map();
     this._shapeCacheBefore = new Map();
     this._shapeCount = 0;
+    // a paragraph's layout up to the line fill, for its next width
+    // (text/paragraphs.js, TextLayout)
+    this._paragraphs = new ParagraphCache();
   }
 
   /** the FontSource in effect (explicit, else the process-wide default) */
@@ -248,6 +273,8 @@ export default class FontManager {
     });
     this._matches.clear();
     this._fallbacks.clear();
+    // a kept paragraph's spans hold the faces their families matched before
+    this._paragraphs.clear();
     return font;
   }
 
@@ -298,10 +325,7 @@ export default class FontManager {
       return instantiate(face, weight, opts.variations, opticalSizeFor(opts));
     }
 
-    const families = String(family)
-      .split(',')
-      .map((f) => f.trim().replace(/^["']|["']$/g, ''))
-      .filter(Boolean);
+    const families = familiesOf(family);
 
     face = this._matchRegistered(
       families.map((f) => f.toLowerCase()),
@@ -310,11 +334,7 @@ export default class FontManager {
     );
     if (!face) {
       // sources understand comma-separated family lists natively
-      const candidates = this.source.matchSorted({
-        family: families.join(','),
-        weight,
-        style: italic ? 'italic' : 'normal'
-      });
+      const candidates = this.source.matchSorted(patternOf(family, weight, italic));
       face = this._open(candidates[0]);
     }
     this._matches.set(cacheKey, face);
@@ -363,7 +383,12 @@ export default class FontManager {
       const source = this.source;
       let candidates;
       try {
-        candidates = source.matchSorted({ family, weight: opts.weight, style: opts.style });
+        // The pattern `match` asks for this family and face, so the list the
+        // match or a prewarm already fetched answers: asked with the span's
+        // raw weight — undefined for regular text — it was another pattern,
+        // and the first character to need a fallback waited on a fc-match
+        // of its own.
+        candidates = source.matchSorted(patternOf(family, numWeight(opts.weight), !!opts.style?.includes('italic')));
       } catch (err) {
         // no system fonts to fall back to is an answer, not a crash; a source
         // that failed for any other reason is a real bug and still propagates

package/lib/text/layout.js

@@ -3,6 +3,7 @@ import LineBreaker from 'linebreak';
 import { rasterizePolys } from '../rasterize.js';
 import { drawGlyphRuns } from './glyphs.js';
 import { embeddingLevels, normalizedLevels, reorderRuns } from './shape.js';
+import { worthKeeping } from './paragraphs.js';
 
 const WS = new Set([0x20, 0x09, 0xa0]);
 const HARD_BREAKS = /[\n\r\u2028\u2029]+$/;
@@ -52,79 +53,22 @@ export class TextLayout {
     this.options = options;
     const maxWidth = options.maxWidth ?? Infinity;
 
-    // ---- normalize spans, resolve fonts eagerly ----
-    // unknown span fields ride along untouched, so a caller can attach its
-    // own markers to a span and read them back off the line runs
-    // An empty span list is a legitimate thing to lay out — a document view
-    // reaches it for a blank paragraph while one is being typed —
-    // and every line still needs a style to take its metrics from, so
-    // stand one in rather than crashing on the first empty line.
-    const given = typeof content === 'string' ? [{ text: content }] : content;
-    const spans = (given.length ? given : [{ text: '' }]).map((s) => {
-      const merged = {
-        ...s,
-        text: String(s.text ?? ''),
-        family: s.family ?? style.family ?? 'sans-serif',
-        size: s.size ?? style.size ?? 16,
-        weight: s.weight ?? style.weight,
-        style: s.style ?? style.style,
-        variations: s.variations ?? style.variations,
-        opticalSize: s.opticalSize ?? style.opticalSize,
-        opticalSizing: s.opticalSizing ?? style.opticalSizing,
-        textRendering: s.textRendering ?? style.textRendering,
-        features: s.features ?? style.features,
-        language: s.language ?? style.language,
-        letterSpacing: s.letterSpacing ?? style.letterSpacing,
-        color: s.color ?? style.color ?? null
-      };
-      merged.font = s.font ?? style.font ?? fonts.match(merged.family, merged);
-      return merged;
-    });
-
-    const text = spans.map((s) => s.text).join('');
+    // Everything up to the line fill is the same at every width, and a
+    // font manager keeps it (text/paragraphs.js): a relayout at a new width
+    // starts at the fill.
+    // A short text skips it (`PARAGRAPH_MIN_CHARS`): a label is cheap to
+    // prepare and seldom laid out at another width.
+    const kept = worthKeeping(content) ? fonts._paragraphs : undefined;
+    const key = kept ? kept.keyOf(content) : null;
+    let paragraph = kept?.find(key, options.direction, content, style);
+    if (!paragraph) {
+      paragraph = this._prepare(content, style, options.direction);
+      kept?.keep(key, options.direction, content, style, paragraph);
+    }
+    const { spans, text, tokens } = paragraph;
     this._text = text;
     this._cpOffsets = null; // lazy code-point index -> code-unit offset table
-    const emb = embeddingLevels(text, options.direction);
-    const levels = emb.levels;
-    this.baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level & 1 : 0;
-
-    // span boundaries, for binary search by char position
-    const spanStarts = [];
-    {
-      let pos = 0;
-      for (const s of spans) {
-        spanStarts.push(pos);
-        pos += s.text.length;
-      }
-    }
-    const spanAt = (pos) => {
-      let lo = 0;
-      let hi = spanStarts.length - 1;
-      while (lo < hi) {
-        const mid = (lo + hi + 1) >> 1;
-        if (spanStarts[mid] <= pos) lo = mid;
-        else hi = mid - 1;
-      }
-      return {
-        span: spans[lo],
-        end: lo + 1 < spanStarts.length ? spanStarts[lo + 1] : text.length
-      };
-    };
-
-    // ---- tokenize at UAX#14 break opportunities ----
-    const tokens = [];
-    {
-      const breaker = new LineBreaker(text);
-      let prev = 0;
-      let bk;
-      while ((bk = breaker.nextBreak())) {
-        tokens.push(this._makeToken(text, prev, bk.position, levels, spanAt, bk.required));
-        prev = bk.position;
-      }
-      if (prev < text.length || tokens.length === 0) {
-        tokens.push(this._makeToken(text, prev, text.length, levels, spanAt, false));
-      }
-    }
+    this.baseLevel = paragraph.baseLevel;
 
     // ---- greedy line fill ----
     const lineTokens = [];
@@ -299,6 +243,91 @@ export class TextLayout {
     }
   }
 
+  /**
+   * The part of a layout the width does not decide: the spans normalised
+   * and their faces resolved, the embedding levels, and the text cut into
+   * tokens at UAX#14 break opportunities, each shaped. Kept per font manager
+   * and shared by every layout of the same paragraph (text/paragraphs.js), so
+   * nothing after this may change what it returns — a layout's lines are
+   * built from new objects over it.
+   */
+  _prepare(content, style, direction) {
+    const fonts = this.fonts;
+    // ---- normalize spans, resolve fonts eagerly ----
+    // unknown span fields ride along untouched, so a caller can attach its
+    // own markers to a span and read them back off the line runs
+    // An empty span list is a legitimate thing to lay out — a document view
+    // reaches it for a blank paragraph while one is being typed —
+    // and every line still needs a style to take its metrics from, so
+    // stand one in rather than crashing on the first empty line.
+    const given = typeof content === 'string' ? [{ text: content }] : content;
+    const spans = (given.length ? given : [{ text: '' }]).map((s) => {
+      const merged = {
+        ...s,
+        text: String(s.text ?? ''),
+        family: s.family ?? style.family ?? 'sans-serif',
+        size: s.size ?? style.size ?? 16,
+        weight: s.weight ?? style.weight,
+        style: s.style ?? style.style,
+        variations: s.variations ?? style.variations,
+        opticalSize: s.opticalSize ?? style.opticalSize,
+        opticalSizing: s.opticalSizing ?? style.opticalSizing,
+        textRendering: s.textRendering ?? style.textRendering,
+        features: s.features ?? style.features,
+        language: s.language ?? style.language,
+        letterSpacing: s.letterSpacing ?? style.letterSpacing,
+        color: s.color ?? style.color ?? null
+      };
+      merged.font = s.font ?? style.font ?? fonts.match(merged.family, merged);
+      return merged;
+    });
+
+    const text = spans.map((s) => s.text).join('');
+    const emb = embeddingLevels(text, direction);
+    const levels = emb.levels;
+    const baseLevel = emb.paragraphs.length ? emb.paragraphs[0].level & 1 : 0;
+
+    // span boundaries, for binary search by char position
+    const spanStarts = [];
+    {
+      let pos = 0;
+      for (const s of spans) {
+        spanStarts.push(pos);
+        pos += s.text.length;
+      }
+    }
+    const spanAt = (pos) => {
+      let lo = 0;
+      let hi = spanStarts.length - 1;
+      while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (spanStarts[mid] <= pos) lo = mid;
+        else hi = mid - 1;
+      }
+      return {
+        span: spans[lo],
+        end: lo + 1 < spanStarts.length ? spanStarts[lo + 1] : text.length
+      };
+    };
+
+    // ---- tokenize at UAX#14 break opportunities ----
+    const tokens = [];
+    {
+      const breaker = new LineBreaker(text);
+      let prev = 0;
+      let bk;
+      while ((bk = breaker.nextBreak())) {
+        tokens.push(this._makeToken(text, prev, bk.position, levels, spanAt, bk.required));
+        prev = bk.position;
+      }
+      if (prev < text.length || tokens.length === 0) {
+        tokens.push(this._makeToken(text, prev, text.length, levels, spanAt, false));
+      }
+    }
+
+    return { spans, text, baseLevel, tokens };
+  }
+
   _makeToken(text, start, end, levels, spanAt, required) {
     const fragments = [];
     let width = 0;

package/lib/text/paragraphs.js

@@ -0,0 +1,157 @@
+// A paragraph's layout work that does not depend on the width, kept
+// (`TextLayout`): its spans with their faces resolved, its bidi levels, and
+// its text cut at UAX#14 break opportunities into shaped tokens. A layout at
+// another width — every step of a window resize, and the widths a flexbox
+// asks a paragraph about on the way — needs all of that again, and only the
+// line fill after it depends on the width: on a 600 KB document, 62% of a
+// resize's layout time went on redoing it.
+//
+// A paragraph is filed under its text and direction, and found by comparing
+// every field of every span and of the base style against copies of the ones
+// it was made from. Every field, because a caller's own markers ride on its
+// spans into the line runs (see `TextLayout`), and the runs of a kept
+// paragraph carry the kept spans: two paragraphs that differ only in a link's
+// target must not share one.
+//
+// Bounded the way the shaping memo is (`FontManager#_shapeCached`): two
+// generations, here by characters, so a working set up to twice
+// `PARAGRAPH_GENERATION` survives a relayout — a whole long document, laid
+// out at a new width a frame — and what neither generation used is dropped.
+
+/** How many characters of paragraphs a generation holds. */
+export const PARAGRAPH_GENERATION = 1 << 19;
+
+/**
+ * The shortest paragraph worth keeping, in code units. Shorter text does not
+ * ask the cache at all: a label's preparation is a few microseconds and the
+ * lookup and copies about one of them, while a label is seldom laid out at
+ * a second width. Kept, a UI's labels mounted a quarter slower and a ticking
+ * counter redrew a quarter slower, to save nothing; the paragraphs a resize
+ * lays out again are a document's, and those are longer than this.
+ */
+export const PARAGRAPH_MIN_CHARS = 64;
+
+/** Whether `content` is long enough to keep (`PARAGRAPH_MIN_CHARS`), counted
+ *  without building anything. */
+export function worthKeeping(content) {
+  if (typeof content === 'string') return content.length >= PARAGRAPH_MIN_CHARS;
+  let chars = 0;
+  for (const span of content) {
+    const text = span.text;
+    chars += typeof text === 'string' ? text.length : String(text ?? '').length;
+    if (chars >= PARAGRAPH_MIN_CHARS) return true;
+  }
+  return false;
+}
+
+export class ParagraphCache {
+  constructor(limit = PARAGRAPH_GENERATION) {
+    this._limit = limit;
+    // direction -> text -> the paragraphs of that text, in two generations
+    this._now = new Map();
+    this._before = new Map();
+    this._chars = 0;
+  }
+
+  /**
+   * What a paragraph is filed under within its direction: its text. A span
+   * list's text is joined once per list and remembered by the list — a
+   * caller that lays one paragraph out at many widths hands over the same
+   * list each time, and the same string then hashes once, not once a
+   * lookup. A list changed in place keeps its old key and misses: `find`
+   * compares every field before it answers, so a key can only lose a
+   * paragraph, never find the wrong one.
+   */
+  keyOf(content) {
+    if (typeof content === 'string') return content;
+    let text = joined.get(content);
+    if (text === undefined) {
+      text = '';
+      for (const span of content) text += span.text;
+      joined.set(content, text);
+    }
+    return text;
+  }
+
+  /** The kept paragraph made from exactly these inputs, or undefined. */
+  find(key, direction, content, style) {
+    const dir = direction ?? '';
+    const now = this._now.get(dir)?.get(key);
+    const hit = now && pick(now, content, style);
+    if (hit) return hit.paragraph;
+    const kept = pick(this._before.get(dir)?.get(key), content, style);
+    if (!kept) return undefined;
+    this._add(dir, key, kept);
+    return kept.paragraph;
+  }
+
+  /** Keep a paragraph `TextLayout` made, with copies of what it was made
+   *  from: nothing done to the inputs afterwards can change what finds it. */
+  keep(key, direction, content, style, paragraph) {
+    const spans = typeof content === 'string' ? content : content.map((span) => ({ ...span }));
+    this._add(direction ?? '', key, { spans, style: { ...style }, paragraph });
+  }
+
+  /** Drop everything — the faces a paragraph resolved may not be the ones
+   *  its family matches now. */
+  clear() {
+    this._now = new Map();
+    this._before = new Map();
+    this._chars = 0;
+  }
+
+  _add(dir, key, entry) {
+    const chars = entry.paragraph.text.length + 1;
+    if (this._chars + chars > this._limit) {
+      this._before = this._now;
+      this._now = new Map();
+      this._chars = 0;
+    }
+    let texts = this._now.get(dir);
+    if (!texts) {
+      texts = new Map();
+      this._now.set(dir, texts);
+    }
+    const list = texts.get(key);
+    if (list) list.push(entry);
+    else texts.set(key, [entry]);
+    this._chars += chars;
+  }
+}
+
+// a span list's text, joined once (`ParagraphCache#keyOf`)
+const joined = new WeakMap();
+
+/** The entry among `list` made from these spans and this base style. */
+function pick(list, content, style) {
+  if (!list) return undefined;
+  outer: for (const entry of list) {
+    if (typeof content === 'string') {
+      if (entry.spans !== content) continue;
+    } else {
+      const spans = entry.spans;
+      if (typeof spans === 'string' || spans.length !== content.length) continue;
+      for (let i = 0; i < content.length; i++) {
+        if (!sameFields(spans[i], content[i])) continue outer;
+      }
+    }
+    if (sameFields(entry.style, style)) return entry;
+  }
+  return undefined;
+}
+
+/**
+ * Whether two objects have the same own fields with the same values. Every
+ * field, so that one added to a span later cannot be left out; the values a
+ * span holds are compared as they are — a face, a feature map or a marker
+ * object by identity — which can only miss, never find the wrong paragraph.
+ */
+function sameFields(a, b) {
+  let fields = 0;
+  for (const name in a) {
+    if (!(name in b) || !Object.is(a[name], b[name])) return false;
+    fields++;
+  }
+  for (const _ in b) fields--;
+  return fields === 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "8.12.6",
+  "version": "8.12.8",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",