ntk 8.14.1 → 8.14.2

package/lib/text/fontmanager.js

@@ -82,6 +82,13 @@ const shapePrefixes = new WeakMap();
 /** The key a style's words are memoized under, with the embedding levels
  *  they were shaped at: one string per style and level, kept, so a lookup
  *  hashes nothing it has not hashed before. */
+/** A levels key (`normalizedLevels`) for part of the text it was made for. */
+function sliceKey(key, start, end) {
+  if (!key.includes(',')) return key;
+  const levels = key.split(',').slice(start, end);
+  return levels.every((l) => l === levels[0]) ? levels[0] : levels.join(',');
+}
+
 function shapeGroupOf(style, levelsKey) {
   const font = style.font;
   let known = shapePrefixes.get(style);
@@ -221,6 +228,8 @@ export default class FontManager {
     this._shapeCache = new Map();
     this._shapeCacheBefore = new Map();
     this._shapeCount = 0;
+    // whether two letters shape otherwise together than apart (`_meets`)
+    this._meetings = new Map();
     // a paragraph's layout up to the line fill, for its next width
     // (text/paragraphs.js, TextLayout)
     this._paragraphs = new ParagraphCache();
@@ -528,6 +537,32 @@ export default class FontManager {
    * embedding-levels encoding: a single number when uniform for the whole
    * fragment (the common case), else comma-separated per-char levels.
    */
+  /**
+   * Whether the two letters of `pair`, cut at `cut`, shape otherwise
+   * together than apart in this style: their glyphs or their advances
+   * change — a kerning pair, a ligature, a joining script, a mark on the
+   * letter before. Compared as a set and a sum, so a right-to-left pair,
+   * whose glyphs come in visual order, is read as a left-to-right one is.
+   * Kept, since the pairs a paragraph's spans meet at are few and repeat.
+   */
+  _meets(pair, cut, style, levelsKey = '0') {
+    const key = `${shapeGroupOf(style, levelsKey)}|${cut}|${pair}`;
+    let meets = this._meetings.get(key);
+    if (meets !== undefined) return meets;
+    const whole = this._shapeCached(pair, style, levelsKey);
+    const left = this._shapeCached(pair.slice(0, cut), style, sliceKey(levelsKey, 0, cut));
+    const right = this._shapeCached(pair.slice(cut), style, sliceKey(levelsKey, cut, pair.length));
+    const ids = (...shaped) =>
+      shaped
+        .flatMap((s) => s.runs.flatMap((r) => r.glyphs.map((g) => g.id)))
+        .sort((a, b) => a - b)
+        .join(',');
+    meets = Math.abs(whole.width - left.width - right.width) > 1e-6 || ids(whole) !== ids(left, right);
+    if (this._meetings.size >= SHAPE_GENERATION) this._meetings.clear();
+    this._meetings.set(key, meets);
+    return meets;
+  }
+
   _shapeCached(text, style, levelsKey = '0') {
     // A hit in this generation is the whole cost of a word a paragraph has
     // shaped before — a relayout at a new width asks for every word again,

package/lib/text/layout.js

@@ -40,12 +40,16 @@ function isWsGlyph(g) {
  *
  * Content is a plain string or an array of spans
  * `{ text, family?, size?, weight?, style?, features?, language?,
- * letterSpacing?, color?, nowrap? }`;
+ * letterSpacing?, color?, nowrap?, shapeApart? }`;
  * span fields override the base style. Spans that share a truthy `nowrap` —
  * `true`, or any value a caller tells its groups apart by — have no break
  * opportunity inside them or between them, as the text of an element with
  * CSS's `white-space: nowrap` has none: the break after the last of them is
- * the next span's to allow. Options:
+ * the next span's to allow. Neighbouring spans shaped alike — a colour
+ * apart — are shaped as one text, so a word across them keeps its kerning
+ * and its joining; a span with a truthy `shapeApart` is shaped on its own,
+ * as CSS breaks the shaping at an inline box with a margin, border or
+ * padding. Options:
  *
  * - `maxWidth` — target container width (default: unlimited)
  * - `align` — 'left' | 'right' | 'center' | 'start' | 'end'
@@ -393,24 +397,80 @@ export class TextLayout {
     return { spans, text, baseLevel, tokens };
   }
 
+  /**
+   * Whether the letters that meet at an edge between two spans of a group
+   * shape otherwise together than apart: their glyphs or their advances
+   * change. Compared as a set and a sum, which holds in a right-to-left
+   * pair as in a left-to-right one.
+   */
+  _meets(text, group, levels, shaping) {
+    for (let i = 1; i < group.length; i++) {
+      const at = group[i].start;
+      const low = text.charCodeAt(at - 1);
+      const before = low >= 0xdc00 && low < 0xe000 && at >= 2 ? 2 : 1;
+      const after = text.codePointAt(at) > 0xffff ? 2 : 1;
+      const from = at - before;
+      const to = at + after;
+      if (this.fonts._meets(text.slice(from, to), before, shaping, normalizedLevels(levels, from, to))) return true;
+    }
+    return false;
+  }
+
   _makeToken(text, start, end, levels, spanAt, required) {
     const fragments = [];
     let width = 0;
     let pos = start;
     while (pos < end) {
-      const { span, shaping, end: spanEnd } = spanAt(pos);
-      const fragEnd = Math.min(end, spanEnd);
-      // hard-break controls only terminate the line; never shape them
-      const fragText = text.slice(pos, fragEnd).replace(HARD_BREAKS, '');
-      if (fragText.length > 0) {
-        const fragLevels = normalizedLevels(levels, pos, pos + fragText.length);
-        const shaped = this.fonts._shapeCached(fragText, shaping, fragLevels);
+      // The spans of the token shaped alike — a colour apart, say — are
+      // shaped as one text and the glyphs shared out among them after, so
+      // a word that crosses from one to the next keeps the kerning between
+      // its letters there, and a script its joining, as a browser shapes
+      // it: an opening quote an `::before` makes kerned with nothing, and
+      // an Arabic word in two colours came apart into isolated letters.
+      // A span marked `shapeApart` is shaped on its own, as CSS breaks the
+      // shaping at an inline box with a margin, border or padding.
+      const group = [];
+      let shaping = null;
+      for (let at = pos; at < end; ) {
+        const next = spanAt(at);
+        if (shaping && (next.shaping !== shaping || next.span.shapeApart || group[group.length - 1].span.shapeApart))
+          break;
+        shaping = next.shaping;
+        const fragEnd = Math.min(end, next.end);
+        group.push({ span: next.span, start: at, end: fragEnd });
+        at = fragEnd;
+      }
+      const groupEnd = group[group.length - 1].end;
+      // Only where the letters either side of a span's edge shape otherwise
+      // together than apart — a kerning pair, a joining script, a mark on
+      // the letter before — is the word shaped whole: two letters are a
+      // lookup the memo almost always holds, and a syntax-coloured line of
+      // code, a span to a token, shaped each of its words afresh otherwise,
+      // at twice the cost of the line.
+      let pieces = null;
+      if (group.length > 1) {
+        const joined = text.slice(pos, groupEnd);
+        if (!HARD_BREAKS.test(joined) && this._meets(text, group, levels, shaping)) {
+          const whole = this.fonts._shapeCached(joined, shaping, normalizedLevels(levels, pos, groupEnd));
+          pieces = splitShapedOnce(
+            whole,
+            group.slice(1).map((g) => g.start - pos)
+          );
+        }
+      }
+      for (let i = 0; i < group.length; i++) {
+        const { span, start: fragStart, end: fragEnd } = group[i];
+        // hard-break controls only terminate the line; never shape them
+        const fragText = text.slice(fragStart, fragEnd).replace(HARD_BREAKS, '');
+        if (fragText.length === 0) continue;
+        const fragLevels = normalizedLevels(levels, fragStart, fragStart + fragText.length);
+        const shaped = pieces ? pieces[i] : this.fonts._shapeCached(fragText, shaping, fragLevels);
         // the levels ride along so a later split can re-shape a piece at the
         // level it actually has, rather than assuming ltr
-        fragments.push({ text: fragText, span, shaping, shaped, start: pos, levels: fragLevels });
+        fragments.push({ text: fragText, span, shaping, shaped, start: fragStart, levels: fragLevels });
         width += shaped.width;
       }
-      pos = fragEnd;
+      pos = groupEnd;
     }
     // trailing whitespace does not count against the container width
     let wsWidth = 0;
@@ -1077,6 +1137,83 @@ function stripTrailingWhitespace(entries) {
 
 // The levels key for a code-unit slice of a fragment. A uniform key covers
 // any slice of itself; a per-character one has to be cut to match.
+/**
+ * A shaped text (`shapeText`) cut at `cuts` — code-unit offsets inside it,
+ * ascending — into as many shaped texts, each of its own piece of the text
+ * with its runs and their glyphs, or null where a cut falls inside what a
+ * glyph was made from: a ligature, or a cluster the font set as one, which
+ * no cut can share out. A glyph keeps the advance shaping gave it, so the
+ * kerning between the last letter before a cut and the first after it
+ * stays with the first piece. A right-to-left run's glyphs are in visual
+ * order, and are walked from their end.
+ */
+/** `splitShaped`, kept per shaped text and cut, since a shaped text is the
+ *  memo's and never changes, and a word a paragraph lays out again is cut
+ *  the same way. */
+const SPLITS = new WeakMap();
+function splitShapedOnce(shaped, cuts) {
+  const key = cuts.join(',');
+  let byCut = SPLITS.get(shaped);
+  if (!byCut) {
+    byCut = new Map();
+    SPLITS.set(shaped, byCut);
+  }
+  if (byCut.has(key)) return byCut.get(key);
+  const pieces = splitShaped(shaped, cuts);
+  byCut.set(key, pieces);
+  return pieces;
+}
+
+function splitShaped(shaped, cuts) {
+  const bounds = [0, ...cuts, shaped.text.length];
+  const pieces = cuts.concat(shaped.text.length).map((to, i) => ({
+    text: shaped.text.slice(bounds[i], to),
+    width: 0,
+    baseLevel: shaped.baseLevel,
+    runs: []
+  }));
+  for (const run of shaped.runs) {
+    const rtl = (run.level & 1) === 1;
+    const logical = rtl ? [...run.glyphs].reverse() : run.glyphs;
+    let piece = 0;
+    while (bounds[piece + 1] <= run.start) piece++;
+    let at = run.start;
+    let from = at;
+    let glyphs = [];
+    const close = () => {
+      if (at === from && glyphs.length === 0) return;
+      const offset = bounds[piece];
+      let width = 0;
+      for (const g of glyphs) width += g.ax;
+      pieces[piece].runs.push({
+        ...run,
+        glyphs: rtl ? glyphs.reverse() : glyphs,
+        width,
+        text: shaped.text.slice(from, at),
+        start: from - offset,
+        end: at - offset
+      });
+      pieces[piece].width += width;
+    };
+    for (const g of logical) {
+      let units = 0;
+      for (const cp of g.codePoints ?? []) units += cp > 0xffff ? 2 : 1;
+      if (units > 0 && at >= bounds[piece + 1]) {
+        close();
+        while (at >= bounds[piece + 1]) piece++;
+        from = at;
+        glyphs = [];
+      }
+      if (at + units > bounds[piece + 1]) return null;
+      glyphs.push(g);
+      at += units;
+    }
+    if (at !== run.end) return null;
+    close();
+  }
+  return pieces;
+}
+
 function sliceLevels(key, start, end) {
   if (key === undefined) return '0';
   if (!key.includes(',')) return key;

package/package.json

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