ntk 8.23.2 → 8.23.3

package/lib/text/layout.js

@@ -2,7 +2,7 @@ import LineBreaker from 'linebreak';
 
 import { rasterizePolys } from '../rasterize.js';
 import { drawGlyphRuns } from './glyphs.js';
-import { embeddingLevels, normalizedLevels, reorderRuns } from './shape.js';
+import { embeddingLevels, levelZeroThroughout, normalizedLevels, reorderRuns } from './shape.js';
 import { worthKeeping } from './paragraphs.js';
 
 // The white space a line may end on and hang past its edge: spaces and tabs,
@@ -307,57 +307,29 @@ export class TextLayout {
     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 round = itemRounding(options);
+    // the lines of a paragraph asked for its first few, filled from the start
+    // of it alone (`_firstLines`) — the start a layout before this one kept,
+    // where it holds them — or null
+    let first = null;
+    if (!paragraph || paragraph.partial) {
+      first = this._firstLines(content, style, options, maxWidth, round, paragraph);
+      if (first) {
+        if (first.paragraph !== paragraph) kept?.keep(key, options.direction, content, style, first.paragraph);
+        paragraph = first.paragraph;
+      } else {
+        paragraph = this._prepare(content, style, options.direction);
+        kept?.keep(key, options.direction, content, style, paragraph);
+      }
     }
     const { spans, text, tokens } = paragraph;
-    this._text = text;
+    // the whole text, which a caret is placed in, however much was prepared
+    this._text = first ? first.text : text;
     this._cpOffsets = null; // lazy code-point index -> code-unit offset table
     this.baseLevel = paragraph.baseLevel;
 
-    // ---- greedy line fill ----
-    const lineTokens = [];
-    // a word wider than the line stays whole, past the line's end, where
-    // the options say so; cut inside itself where they do not — and in a
-    // script written without spaces, where the breaker's "word" is a phrase
-    // it had no dictionary to cut, cut anyway (CSS Text 3, 5.1)
-    const whole = options.overflowWrap === 'normal';
-    // text that does not wrap is a line to each forced break, however wide
     const wraps = options.wrap !== false;
-    const round = itemRounding(options);
-    {
-      let cur = [];
-      const fit = new LineFit(round);
-      const flush = () => {
-        lineTokens.push(cur);
-        cur = [];
-        fit.reset();
-      };
-      for (let token of tokens) {
-        while (
-          wraps &&
-          fit.with(token, cur.length ? kernBefore(token) : 0) > maxWidth + FIT_SLACK
-        ) {
-          if (cur.length > 0) {
-            flush();
-          } else if (whole && !UNSPACED.test(text.slice(token.start, token.end))) {
-            break;
-          } else {
-            // single token wider than the container: force-break it
-            const [head, rest] = this._forceBreak(token, maxWidth);
-            if (!head) break; // not even one cluster fits: let it overflow
-            cur.push(head);
-            flush();
-            token = rest;
-          }
-        }
-        fit.add(token, cur.length ? kernBefore(token) : 0);
-        cur.push(token);
-        if (token.required) flush();
-      }
-      if (cur.length) lineTokens.push(cur);
-    }
+    const lineTokens = first ? first.lines : this._fill(tokens, text, maxWidth, options, round);
 
     // ---- cap the line count ----
     // The cut happens here, between filling and assembly, so the dropped
@@ -575,6 +547,112 @@ export class TextLayout {
     }
   }
 
+  /**
+   * The greedy line fill: `tokens` into lines no wider than `maxWidth`, a
+   * line ended early at each forced break.
+   */
+  _fill(tokens, text, maxWidth, options, round) {
+    const lineTokens = [];
+    // a word wider than the line stays whole, past the line's end, where
+    // the options say so; cut inside itself where they do not — and in a
+    // script written without spaces, where the breaker's "word" is a phrase
+    // it had no dictionary to cut, cut anyway (CSS Text 3, 5.1)
+    const whole = options.overflowWrap === 'normal';
+    // text that does not wrap is a line to each forced break, however wide
+    const wraps = options.wrap !== false;
+    {
+      let cur = [];
+      const fit = new LineFit(round);
+      const flush = () => {
+        lineTokens.push(cur);
+        cur = [];
+        fit.reset();
+      };
+      for (let token of tokens) {
+        while (
+          wraps &&
+          fit.with(token, cur.length ? kernBefore(token) : 0) > maxWidth + FIT_SLACK
+        ) {
+          if (cur.length > 0) {
+            flush();
+          } else if (whole && !UNSPACED.test(text.slice(token.start, token.end))) {
+            break;
+          } else {
+            // single token wider than the container: force-break it
+            const [head, rest] = this._forceBreak(token, maxWidth);
+            if (!head) break; // not even one cluster fits: let it overflow
+            cur.push(head);
+            flush();
+            token = rest;
+          }
+        }
+        fit.add(token, cur.length ? kernBefore(token) : 0);
+        cur.push(token);
+        if (token.required) flush();
+      }
+      if (cur.length) lineTokens.push(cur);
+    }
+    return lineTokens;
+  }
+
+  /**
+   * A layout asked for its first lines (`maxLines`) of a paragraph it has
+   * not prepared: the start of the text prepared and filled, where every
+   * line kept is decided before the start ends. `<Html>` lays a paragraph
+   * out beside a float a line at a time, the rest of the paragraph and one
+   * line of it, so each line prepared the whole rest of the paragraph again
+   * — the paragraph's square — at every width of a resize.
+   *
+   * Two lines past the last kept one are filled before the start is trusted:
+   * what a cut can change — the break opportunities and the kerning a
+   * character or two either side of it, the token it falls in — is in the
+   * line it falls in, and no kept line starts or ends there. The levels it
+   * could change are 0 throughout in a text nothing can make right-to-left
+   * (`levelZeroThroughout`), which is the only text this is tried on; other
+   * text, and a start that fills too few lines at every length short of the
+   * whole, is prepared whole, as before.
+   *
+   * The start is kept with the paragraph's (`ParagraphCache`), marked
+   * `partial`, for the next layout of the same text to fill — the same line
+   * of a paragraph at the next width of a drag — or to prepare further, or
+   * whole, where it does not hold that layout's lines.
+   *
+   * @param {object} [known] the start a layout before this one kept
+   * @returns {{paragraph, lines, text}|null} the start prepared, its lines
+   *   filled, and the whole text; null where the whole is to be prepared
+   */
+  _firstLines(content, style, options, maxWidth, round, known) {
+    const maxLines = options.maxLines;
+    if (!Number.isFinite(maxLines) || maxLines < 0) return null;
+    if (options.wrap === false || !Number.isFinite(maxWidth) || !(maxWidth > 0)) return null;
+    const text = typeof content === 'string' ? content : contentText(content);
+    if (!levelZeroThroughout(text, options.direction)) return null;
+    const keep = Math.floor(maxLines);
+    const enough = (paragraph) => {
+      const lines = this._fill(paragraph.tokens, paragraph.text, maxWidth, options, round);
+      return lines.length > keep + 2 ? { paragraph, lines, text } : null;
+    };
+    if (known) {
+      const held = enough(known);
+      if (held) return held;
+    }
+    // a guess at how much text the lines take — a quarter of an em a
+    // character — four times larger at each try that falls short
+    let length = Math.ceil(((keep + 3) * maxWidth) / (0.25 * smallestSize(content, style)));
+    if (known) length = Math.max(length, known.text.length * 4);
+    while (length < text.length) {
+      // a surrogate pair is not cut
+      const code = text.charCodeAt(length - 1);
+      if (code >= 0xd800 && code < 0xdc00) length++;
+      const paragraph = this._prepare(cutContent(content, length), style, options.direction);
+      paragraph.partial = true;
+      const held = enough(paragraph);
+      if (held) return held;
+      length *= 4;
+    }
+    return null;
+  }
+
   /**
    * 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
@@ -723,7 +801,7 @@ export class TextLayout {
     const after = text.codePointAt(at) > 0xffff ? 2 : 1;
     const key = normalizedLevels(levels, at - before, at + after);
     if (key.includes(',') || Number(key) & 1) return 0;
-    return this.fonts._kernAcross(text.slice(at - before, at + after), before, shaping, key);
+    return this.fonts._kernAcross(text.slice(at - before, at + after), before, spacedByOne(shaping), key);
   }
 
   /**
@@ -1622,6 +1700,28 @@ const MAX_SHAPING_STYLES = 16;
  * element's own letter spacing is a change of formatting a browser breaks
  * the shaping at.
  */
+/**
+ * The shaping a pair's kern is asked under: spaced by one pixel where it is
+ * spaced at all. How far spacing sets two letters apart is no part of the
+ * kern they make — it is added to every glyph's advance (`spaceGlyphs`), to
+ * the pair shaped whole and to each half alike, and drops out of
+ * `_kernAcross`'s difference — but whether they are spaced is, since
+ * spacing turns optional ligatures off. A justified line spaces each of its
+ * spaces by its own share, and a share is new at each line and each width,
+ * so the kern memo, keyed by the shaping's spacing, missed at every pair of
+ * every justified line laid out at a new width, and shaped three strings
+ * for each: most of what laying out a justified paragraph beside a float
+ * cost at each step of a resize.
+ */
+function spacedByOne(shaping) {
+  if (!shaping.letterSpacing || shaping.letterSpacing === 1) return shaping;
+  let one = SPACED_BY_ONE.get(shaping);
+  if (!one) SPACED_BY_ONE.set(shaping, (one = { ...shaping, letterSpacing: 1 }));
+  return one;
+}
+
+const SPACED_BY_ONE = new WeakMap();
+
 function pairShaping(fa, fb) {
   const a = fa.shaping;
   const b = fb.shaping;
@@ -1689,3 +1789,38 @@ function shapingStyleOf(known, span, given, fonts) {
   if (known.length < MAX_SHAPING_STYLES) known.push(k);
   return k;
 }
+
+/** A span list's text, joined (`_firstLines`). */
+function contentText(spans) {
+  let text = '';
+  for (const span of spans) text += String(span.text ?? '');
+  return text;
+}
+
+/** The first `length` code units of a layout's content: a string, or the
+ *  spans that hold them, the last cut short (`_firstLines`). */
+function cutContent(content, length) {
+  if (typeof content === 'string') return content.slice(0, length);
+  const out = [];
+  let at = 0;
+  for (const span of content) {
+    if (at >= length) break;
+    const text = String(span.text ?? '');
+    out.push(at + text.length <= length ? span : { ...span, text: text.slice(0, length - at) });
+    at += text.length;
+  }
+  return out;
+}
+
+/** The smallest size any of a layout's text is set at, for a guess at how
+ *  much of it a line takes (`_firstLines`). */
+function smallestSize(content, style) {
+  const base = style.size ?? 16;
+  if (typeof content === 'string') return base > 0 ? base : 16;
+  let least = Infinity;
+  for (const span of content) {
+    const size = span.size ?? base;
+    if (size > 0 && size < least) least = size;
+  }
+  return least < Infinity ? least : 16;
+}

package/lib/text/paragraphs.js

@@ -86,10 +86,19 @@ export class ParagraphCache {
   }
 
   /** Keep a paragraph `TextLayout` made, with copies of what it was made
-   *  from: nothing done to the inputs afterwards can change what finds it. */
+   *  from: nothing done to the inputs afterwards can change what finds it.
+   *  One kept from the same inputs already — the start of the paragraph
+   *  alone, prepared for its first lines (`partial`) — is replaced. */
   keep(key, direction, content, style, paragraph) {
+    const dir = direction ?? '';
+    const known = pick(this._now.get(dir)?.get(key), content, style);
+    if (known) {
+      this._chars += paragraph.text.length - known.paragraph.text.length;
+      known.paragraph = paragraph;
+      return;
+    }
     const spans = typeof content === 'string' ? content : content.map((span) => ({ ...span }));
-    this._add(direction ?? '', key, { spans, style: { ...style }, paragraph });
+    this._add(dir, key, { spans, style: { ...style }, paragraph });
   }
 
   /** Drop everything — the faces a paragraph resolved may not be the ones

package/lib/text/shape.js

@@ -41,7 +41,7 @@ export function embeddingLevels(text, direction = 'auto') {
   // Text that nothing can make right-to-left is level 0 throughout, which
   // is what the algorithm would work out a character at a time: every
   // layout asks, and most text is Latin, CJK or digits with no bidi at all.
-  if (explicit !== 'rtl' && !MAY_REVERSE.test(text)) {
+  if (levelZeroThroughout(text, explicit)) {
     return {
       levels: new Uint8Array(text.length),
       paragraphs: [{ start: 0, end: text.length - 1, level: 0 }]
@@ -61,6 +61,17 @@ export function embeddingLevels(text, direction = 'auto') {
 const MAY_REVERSE =
   /[\u0590-\u08FF\u200F\u202A-\u202E\u2066-\u2069\uFB1D-\uFDFF\uFE70-\uFEFF]|[\uD802\uD803\uD83A\uD83B]/;
 
+/**
+ * Whether every character of `text` is at embedding level 0 in a paragraph
+ * of this direction: one not right-to-left by request, with nothing in it
+ * that can raise a level (`MAY_REVERSE`). So is every part of such a text,
+ * wherever it is cut — which is what lets a layout prepare only the start
+ * of one (`TextLayout`'s `_firstLines`).
+ */
+export function levelZeroThroughout(text, direction) {
+  return direction !== 'rtl' && !MAY_REVERSE.test(text);
+}
+
 /**
  * Compact embedding-levels encoding for the shaping memo key: a single
  * number when uniform over [start, end) — the common case — else

package/package.json

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