ntk 8.23.1 → 8.23.3

package/lib/renderingcontext_2d.js

@@ -805,6 +805,10 @@ class RenderingContext2d {
     this.fillMaskDrawable = null;
     this.clipMask = null;
     this.clipMaskDrawable = null;
+    // a clip mask a restore let go of, for the next path clip (`_rebuildClipMask`)
+    this._keptClipMask = null;
+    // where the clip mask may hold coverage, [x, y, w, h]; null for nowhere
+    this._clipMaskInk = null;
     this._textStyle = null;
     this._lastFontString = null;
     this.textAlign = "start";
@@ -1224,6 +1228,8 @@ class RenderingContext2d {
       this.clipMaskDrawable.destroy();
       this.clipMask = this.clipMaskDrawable = null;
     }
+    // one kept is the size the surface was
+    this._dropKeptClipMask();
     // clip paths are device-space and survive the resize; rebuild the mask
     if (this._clips && this._clips.length) this._rebuildClipMask();
   }
@@ -2361,6 +2367,16 @@ class RenderingContext2d {
 
   _ensureClipMask() {
     if (this.clipMask) return;
+    const kept = this._keptClipMask;
+    if (kept) {
+      // the one a restore let go of: what it holds is cleared where it was
+      // written, by `_materializeClipMask`
+      this._keptClipMask = null;
+      this.clipMask = kept.mask;
+      this.clipMaskDrawable = kept.drawable;
+      this._clipMaskInk = kept.ink;
+      return;
+    }
     this.clipMaskDrawable = new Pixmap(this.window.app, {
       depth: 8,
       width: this.width,
@@ -2370,6 +2386,8 @@ class RenderingContext2d {
       drawable: this.clipMaskDrawable,
       format: this.Render.a8,
     });
+    // a fresh pixmap's contents are undefined, all of them
+    this._clipMaskInk = [0, 0, this.width, this.height];
   }
 
   /**
@@ -4900,12 +4918,16 @@ class RenderingContext2d {
   _materializeClipMask() {
     const R = this.Render;
     this._ensureClipMask();
-    R.FillRectangles(
-      R.PictOp.Src,
-      this.clipMask.id,
-      [0, 0, 0, 0],
-      [0, 0, this.width, this.height],
-    );
+    // Cleared where it may hold coverage, not all over: the mask is the size
+    // of the surface, and a clip a rounded row of a list puts on a window
+    // cleared the whole window's worth of it for each row of each frame.
+    // What it holds is never outside its first shape's box, since what is
+    // intersected with it only takes coverage away (`_clipMaskInk`).
+    const ink = this._clipMaskInk;
+    if (ink && ink[2] > 0 && ink[3] > 0) {
+      R.FillRectangles(R.PictOp.Src, this.clipMask.id, [0, 0, 0, 0], ink);
+    }
+    this._clipMaskInk = null;
     // region entries are the picture's clip, not the mask's business
     const shapes = this._clips.filter((entry) => !entry.region);
     if (!shapes.length) {
@@ -4915,6 +4937,7 @@ class RenderingContext2d {
         [0, 0, 0, 1],
         [0, 0, this.width, this.height],
       );
+      this._clipMaskInk = [0, 0, this.width, this.height];
       return;
     }
     const first = shapes[0];
@@ -4931,9 +4954,20 @@ class RenderingContext2d {
           [0, 0, 0, 1],
           [x, y, right - x, bottom - y],
         );
+        this._clipMaskInk = [x, y, right - x, bottom - y];
       }
     } else {
       this._applyPolyClip(first, R.PictOp.Src);
+      const bb = this._polysBBox(first.polys);
+      if (bb && bb.w > 0 && bb.h > 0) {
+        const x = Math.max(0, Math.floor(bb.x));
+        const y = Math.max(0, Math.floor(bb.y));
+        const right = Math.min(this.width, Math.ceil(bb.x + bb.w));
+        const bottom = Math.min(this.height, Math.ceil(bb.y + bb.h));
+        if (right > x && bottom > y) {
+          this._clipMaskInk = [x, y, right - x, bottom - y];
+        }
+      }
     }
     for (let i = 1; i < shapes.length; i++) this._intersectClip(shapes[i]);
   }
@@ -5084,9 +5118,18 @@ class RenderingContext2d {
     if (!rasterizer) return false;
     const { shapes, edges } = fillableShapes(entry.polys);
     if (!shapes.length) return false;
-    // routed by the clip's own extent, as a fill is (`_rawBox`), and
-    // rasterized over the part of it on the surface
-    if (this._routeFor(this._polysExtent(entry.polys) ?? bb, edges) !== "local")
+    // A clip's coverage is rasterized here up to the policy's byte bound,
+    // whatever its edges, where a fill is routed by its cost (`_routeFor`).
+    // The server route is AddTraps into the pixmap the coverage lands on,
+    // and AddTraps adds into a picture that exists: glamor — Xwayland's,
+    // and Xorg's on most GPUs — has no GPU path for it, and reads the
+    // pixmap back, rasterizes in software and uploads it again, a GPU sync
+    // for every clip. A rounded row clipped that way took 5.6 ms on a virgl
+    // Xwayland, where its raster here and a PutImage took 0.14; pixman,
+    // which adds the traps itself, takes 0.03 ms less for it.
+    const extent = this._polysExtent(entry.polys) ?? bb;
+    const area = Math.min(extent.w, this.width) * Math.min(extent.h, this.height);
+    if (!(area > 0 && area <= this.window.app.rasterPolicy.maxBytes) || !edges)
       return false;
 
     const coverage = rasterizer.rasterize({
@@ -5148,17 +5191,33 @@ class RenderingContext2d {
   }
 
   _rebuildClipMask() {
-    // The stack changed shape (restore, resize): drop the mask rather than
+    // The stack changed shape (restore, resize): let the mask go rather than
     // rebuild it eagerly. A stack that went back to rectangles never needs
     // one again, and one that still holds a poly rebuilds on first demand
     // through _requireClipMask — same work, paid only if something draws.
+    // It is kept, not destroyed, for the next path clip to fill again: a
+    // pixmap the size of the surface was made and freed for every rounded
+    // clip, sixteen a frame for a list of eight rounded rows, where the fill
+    // mask beside it is kept for the context's life.
     if (this.clipMask) {
-      this.clipMask.destroy();
-      this.clipMaskDrawable.destroy();
+      this._dropKeptClipMask();
+      this._keptClipMask = {
+        mask: this.clipMask,
+        drawable: this.clipMaskDrawable,
+        ink: this._clipMaskInk,
+      };
       this.clipMask = this.clipMaskDrawable = null;
     }
   }
 
+  _dropKeptClipMask() {
+    const kept = this._keptClipMask;
+    if (!kept) return;
+    this._keptClipMask = null;
+    kept.mask.destroy();
+    kept.drawable.destroy();
+  }
+
   isPointInPath(...args) {
     let path = null;
     let rest = args;

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.1",
+  "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",