ntk 8.12.5 → 8.12.7

package/lib/text/font.js

@@ -69,8 +69,49 @@ export function variationKey(coords) {
  * Fonts are cheap-ish to open (tables parse lazily) and are cached by the
  * FontManager — always obtain them via `app.fonts`.
  */
+/**
+ * fontkit keeps one Glyph object per id and gives it the characters of
+ * whichever call made it first. A glyph asked for by id alone — its extents,
+ * its outline, or a component of a composite, which fontkit makes from inside
+ * the composite's path with no characters — is made with none, and every
+ * later shaping of that letter was handed the same object: a run read `e` as
+ * no characters at all, so every caret, selection edge and hit test after it
+ * on the line was a character over. Two code points that share a glyph (a
+ * space and a no-break space) had the same trouble the other way round.
+ *
+ * Asked with characters the cached glyph does not carry, the face answers a
+ * view of it that does — its prototype is the cached glyph, so the outline,
+ * the metrics and every cache on it stay shared — one view per glyph and
+ * characters. Installed once per fontkit font, on the instance, which is
+ * where fontkit's own shaping looks it up.
+ */
+function answerWithCharacters(fk) {
+  if (fk.__ntkCharacters) return;
+  const getGlyph = fk.getGlyph;
+  const views = new Map();
+  fk.getGlyph = function (id, characters = []) {
+    const glyph = getGlyph.call(this, id, characters);
+    if (!glyph || characters.length === 0) return glyph;
+    const had = glyph.codePoints;
+    if (had.length === characters.length && had.every((cp, i) => cp === characters[i])) {
+      return glyph;
+    }
+    const key = `${id}:${characters.join(',')}`;
+    let view = views.get(key);
+    if (view === undefined) {
+      view = Object.create(glyph, {
+        codePoints: { value: characters.slice(), enumerable: true }
+      });
+      views.set(key, view);
+    }
+    return view;
+  };
+  Object.defineProperty(fk, '__ntkCharacters', { value: true });
+}
+
 export default class Font {
   constructor(fkFont, path, postscriptName) {
+    answerWithCharacters(fkFont);
     this.fk = fkFont;
     this.path = path;
     /** stable cache key for glyph pages and font caches */

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;
@@ -195,6 +196,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 +252,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;
   }
 

package/lib/text/layout.js

@@ -52,79 +52,20 @@ 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.
+    const kept = fonts._paragraphs;
+    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 +240,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,134 @@
+// 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;
+
+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.5",
+  "version": "8.12.7",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",