ntk 8.14.1 → 8.14.3

package/lib/renderingcontext_2d.js

@@ -1,4 +1,3 @@
-import parseFontStyle from "canvas-fontstyle";
 import extrudePolyline from "extrude-polyline";
 
 import { safeRelease } from "./cleanup.js";
@@ -36,6 +35,7 @@ import {
   WIRE_REACH,
   withinRect,
 } from "./cliprect.js";
+import { dashPolyline } from "./dash.js";
 import {
   blurCoverage,
   cachedShadow,
@@ -66,6 +66,7 @@ import {
   runId,
   snapOrigin,
 } from "./text/glyphs.js";
+import { parseFontCached } from "./text/fontshorthand.js";
 import { TextLayout } from "./text/layout.js";
 import { reorderRuns } from "./text/shape.js";
 import { trapezoidize } from "./trapezoid.js";
@@ -445,80 +446,6 @@ const PIECE_SLACK = 2;
 const LINE_CAP = { butt: "butt", square: "square", round: "butt" };
 const LINE_JOIN = { miter: "miter", bevel: "bevel", round: "bevel" };
 
-/**
- * Split a device-space polyline into dash "on" runs by arc length.
- *
- * `pts` is [[x, y], ...] with no consecutive duplicates; for closed subpaths
- * the closing point is already appended, and the pattern continues around the
- * loop as one uninterrupted walk. Returns null when the pattern cannot
- * produce gaps (all-zero), otherwise { runs, closedLoop }: `runs` is a list
- * of [[x, y], ...] open polylines (caps apply to each), `closedLoop` marks a
- * closed subpath the pattern never split — stroke it closed, with no caps.
- */
-function dashPolyline(pts, closed, pattern, offset) {
-  let total = 0;
-  for (const d of pattern) total += d;
-  if (!(total > 0)) return null;
-
-  // starting phase: offset into the pattern, wrapped into [0, total)
-  let phase = offset % total;
-  if (phase < 0) phase += total;
-  let idx = 0;
-  while (phase > 0 && phase >= pattern[idx]) {
-    phase -= pattern[idx];
-    idx = (idx + 1) % pattern.length;
-  }
-
-  let on = idx % 2 === 0; // even entries are "on", odd are gaps
-  const startedOn = on;
-  let toggled = false;
-  let remain = pattern[idx] - phase;
-  const runs = [];
-  let cur = on ? [pts[0]] : null;
-  let x0 = pts[0][0];
-  let y0 = pts[0][1];
-
-  for (let i = 1; i < pts.length; i++) {
-    const x1 = pts[i][0];
-    const y1 = pts[i][1];
-    let len = Math.hypot(x1 - x0, y1 - y0);
-    while (len > remain) {
-      // cross a dash boundary inside this segment
-      const t = len > 0 ? remain / len : 0;
-      const bx = x0 + (x1 - x0) * t;
-      const by = y0 + (y1 - y0) * t;
-      if (on) {
-        cur.push([bx, by]);
-        runs.push(cur);
-        cur = null;
-      } else {
-        cur = [[bx, by]];
-      }
-      on = !on;
-      toggled = true;
-      x0 = bx;
-      y0 = by;
-      len = Math.hypot(x1 - x0, y1 - y0);
-      idx = (idx + 1) % pattern.length;
-      remain = pattern[idx];
-    }
-    remain -= len;
-    if (on) cur.push([x1, y1]);
-    x0 = x1;
-    y0 = y1;
-  }
-  if (cur) runs.push(cur);
-
-  if (closed && !toggled) return { runs, closedLoop: startedOn };
-  // closed subpath with dashes on both sides of the seam: merge the last
-  // run into the first so no caps appear at the seam
-  if (closed && startedOn && on && runs.length > 1) {
-    const last = runs.pop();
-    runs[0] = last.concat(runs[0].slice(1));
-  }
-  return { runs, closedLoop: false };
-}
-
 // An array is taken as already-premultiplied `[r, g, b, a]` in 0..1 (the
 // documented form in docs/context-2d.md), so it passes through untouched; a
 // string is a CSS colour and gets premultiplied on the way in. Both end up in
@@ -530,6 +457,17 @@ function parseColor(value) {
   return c;
 }
 
+/**
+ * Whether a rectangle call draws at all: canvas draws nothing for one with
+ * a side that is not finite. The callers then turn a negative size round
+ * into the same rectangle drawn the other way, as canvas does. X takes a
+ * rectangle's size unsigned and its corner in 16 bits, so a negative size
+ * that reached the wire threw from inside the paint.
+ */
+function finiteRect(x, y, w, h) {
+  return Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(w) && Number.isFinite(h);
+}
+
 /**
  * Canvas-like 2d rendering context backed by the XRender extension: most
  * operations (composition, gradients, text composition) happen server-side.
@@ -1058,8 +996,10 @@ class RenderingContext2d {
   }
 
   set fillStyle(value) {
+    // the picture first: a value that throws leaves the style as it was
+    const picture = this._stylePicture(value);
     this._fillStyle = value;
-    this._backgroundPicture = this._stylePicture(value);
+    this._backgroundPicture = picture;
   }
 
   get fillStyle() {
@@ -1067,8 +1007,10 @@ class RenderingContext2d {
   }
 
   set strokeStyle(value) {
+    // the picture first: a value that throws leaves the style as it was
+    const picture = this._stylePicture(value);
     this._strokeStyle = value;
-    this._strokePicture = this._stylePicture(value);
+    this._strokePicture = picture;
   }
 
   get strokeStyle() {
@@ -2236,6 +2178,11 @@ class RenderingContext2d {
       ? this._lineDash.map((d) => d * scale)
       : null;
     const dashOffset = this._lineDashOffset * scale;
+    // what a dash beyond cannot be seen: the surface, grown by how far a
+    // miter or a square cap reaches from the point it is drawn at
+    // (lib/dash.js)
+    const reach = (thickness / 2) * Math.max(this.miterLimit, 1.5) + 2;
+    const view = [-reach, -reach, this.width + reach, this.height + reach];
 
     const tris = [];
     // round caps/joins: extrude-polyline extrudes them as butt/bevel (see
@@ -2491,7 +2438,7 @@ class RenderingContext2d {
         extrudeRun(pts, poly.closed);
         continue;
       }
-      const dashed = dashPolyline(pts, poly.closed, dash, dashOffset);
+      const dashed = dashPolyline(pts, poly.closed, dash, dashOffset, view);
       if (!dashed) {
         extrudeRun(pts, poly.closed);
       } else if (dashed.closedLoop) {
@@ -3050,13 +2997,25 @@ class RenderingContext2d {
   // clearing stays opaque white — the paper an opaque window starts from,
   // and what every caller predating ARGB windows expects.
   clearRect(x, y, w, h) {
+    if (!finiteRect(x, y, w, h)) return;
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
     const alpha = this._hasAlpha;
     if (matIsIdentity(this._m) && !this._hasPolyClip && !this._clipRect()) {
+      // the part of it the surface has, as `_fillRect` fills it
+      const onSurface = rectsOnSurface([x, y, w, h], this.width, this.height);
+      if (!onSurface.length) return;
       this.Render.FillRectangles(
         this.Render.PictOp.Src,
         this._dst(),
         alpha ? [0, 0, 0, 0] : [1, 1, 1, 1],
-        [x, y, w, h],
+        onSurface,
       );
       this._markDirty();
       return;
@@ -3080,6 +3039,15 @@ class RenderingContext2d {
   }
 
   fillRect(x, y, w, h) {
+    if (!finiteRect(x, y, w, h)) return;
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
     if (this._shadowed()) this._shadowOfRect(x, y, w, h, false);
     this._fillRect(x, y, w, h);
   }
@@ -3324,6 +3292,15 @@ class RenderingContext2d {
   }
 
   strokeRect(x, y, w, h) {
+    if (!finiteRect(x, y, w, h)) return;
+    if (w < 0) {
+      x += w;
+      w = -w;
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+    }
     if (this._shadowed()) this._shadowOfRect(x, y, w, h, true);
     const m = this._m;
     if (m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1) {
@@ -4335,10 +4312,12 @@ class RenderingContext2d {
    */
   set font(val) {
     if (!val || typeof val !== "string") return;
-    const parsed = parseFontStyle(val);
+    const parsed = parseFontCached(val);
     if (!parsed) return;
     const style = {
-      family: parsed.family,
+      // the whole list, so a letter the first family lacks is set in the
+      // next one the font names, as CSS sets it (`FontManager.match`)
+      family: parsed.families.join(","),
       weight: parsed.weight,
       style: parsed.style,
       size: parsed.size,
@@ -4513,8 +4492,15 @@ class RenderingContext2d {
         `putImageData: data must be ${width * height * 4} RGBA bytes for ${width}x${height}`,
       );
     }
-    dirtyWidth ??= width;
-    dirtyHeight ??= height;
+    // Every position and extent is a WebIDL `long`, as `| 0` makes one: NaN
+    // and infinities are 0, a fraction goes toward 0. A fraction reached
+    // the typed-array copies below and threw.
+    x |= 0;
+    y |= 0;
+    dirtyX |= 0;
+    dirtyY |= 0;
+    dirtyWidth = dirtyWidth === undefined ? width : dirtyWidth | 0;
+    dirtyHeight = dirtyHeight === undefined ? height : dirtyHeight | 0;
     // the spec normalises negative extents by moving the origin
     if (dirtyWidth < 0) {
       dirtyX += dirtyWidth;
@@ -4524,11 +4510,22 @@ class RenderingContext2d {
       dirtyY += dirtyHeight;
       dirtyHeight = -dirtyHeight;
     }
-    const sx = Math.max(0, dirtyX);
-    const sy = Math.max(0, dirtyY);
-    const sw = Math.min(width, dirtyX + dirtyWidth) - sx;
-    const sh = Math.min(height, dirtyY + dirtyHeight) - sy;
+    let sx = Math.max(0, dirtyX);
+    let sy = Math.max(0, dirtyY);
+    let sw = Math.min(width, dirtyX + dirtyWidth) - sx;
+    let sh = Math.min(height, dirtyY + dirtyHeight) - sy;
     if (!(sw > 0) || !(sh > 0)) return;
+    // and only the part the surface has: X takes the corner in 16 bits, and
+    // image data put a million pixels away threw
+    const left = Math.max(x + sx, 0);
+    const top = Math.max(y + sy, 0);
+    const right = Math.min(x + sx + sw, this.width);
+    const bottom = Math.min(y + sy + sh, this.height);
+    if (!(right > left) || !(bottom > top)) return;
+    sx = left - x;
+    sy = top - y;
+    sw = right - left;
+    sh = bottom - top;
 
     let rgba = src;
     if (sx !== 0 || sy !== 0 || sw !== width || sh !== height) {
@@ -4724,6 +4721,11 @@ class RenderingContext2d {
    * rendered copy instead of each needing their own.
    */
   _drawCoverage(picture, sx, sy, sw, sh, dx, dy, dw, dh, op) {
+    // Coverage the surface has none of is drawn as nothing. X takes the
+    // destination's corner in 16 bits, and a shadow thrown past it — an
+    // offset of 65,535, or text a million pixels away with its shadow —
+    // threw out of the paint. A NaN destination fails the test too.
+    if (!(dx < this.width && dy < this.height && dx + dw > 0 && dy + dh > 0)) return;
     const R = this.Render;
     // the coverage is painted in the current fillStyle, on both branches
     // below — a gradient/pattern whose transform collapsed paints nothing
@@ -5162,12 +5164,18 @@ class RenderingContext2d {
  * The picture is created on first use and freed by the GC, through
  * `Picture`'s finalizer.
  */
+/** How far from the origin a gradient's own points and radii may reach and
+ *  still be carried in 16.16 fixed point, with room to spare. */
+const GRADIENT_REACH = 16384;
+
 class CanvasGradient {
   constructor(type, ctx, p0, p1, p2, p3, p4, p5) {
     this.type = type;
     this.stops = [];
     this.ctx = ctx;
     this._id = null;
+    // how much smaller than asked the picture was made, to fit the wire
+    this._scale = 1;
     this._picture = null;
     // what the server currently holds: a fresh gradient picture is
     // untransformed, so an untransformed fill costs no extra request
@@ -5197,37 +5205,55 @@ class CanvasGradient {
     const Render = this.ctx.Render;
     const X = this.ctx.X;
 
-    this._id = X.AllocID();
+    // XRender takes a gradient's points and radii in 16.16 fixed point, and
+    // a coordinate past 32,767 overflows the word it is written into. A
+    // gradient that reaches further is made at a scale that fits, and
+    // `_sync` scales the picture transform to match: the same colours land
+    // on the same pixels.
+    // Geometry that is not finite, which canvas refuses when the gradient
+    // is made, is taken as 0 rather than thrown out of the paint using it.
+    const f = (v) => (Number.isFinite(v) ? v : 0);
+    const [x0, y0, x1, y1, r0, r1] = [this.x0, this.y0, this.x1, this.y1, this.r0, this.r1].map(f);
+    let reach = Math.max(Math.abs(x0), Math.abs(y0));
+    if (this.type !== "conical") reach = Math.max(reach, Math.abs(x1), Math.abs(y1));
+    if (this.type === "radial") reach = Math.max(reach, Math.abs(r0), Math.abs(r1));
+    const k = reach > GRADIENT_REACH ? reach / GRADIENT_REACH : 1;
+    // the id is the gradient's only once the picture exists: one kept after
+    // the request threw named a picture the server never made, in every
+    // fill after it
+    const id = X.AllocID();
     switch (this.type) {
       case "linear":
         Render.LinearGradient(
-          this._id,
-          [this.x0, this.y0],
-          [this.x1, this.y1],
+          id,
+          [x0 / k, y0 / k],
+          [x1 / k, y1 / k],
           this.stops,
         );
         break;
       case "radial":
         Render.RadialGradient(
-          this._id,
-          [this.x0, this.y0],
-          [this.x1, this.y1],
-          this.r0,
-          this.r1,
+          id,
+          [x0 / k, y0 / k],
+          [x1 / k, y1 / k],
+          r0 / k,
+          r1 / k,
           this.stops,
         );
         break;
       case "conical":
         Render.ConicalGradient(
-          this._id,
-          [this.x0, this.y0],
-          this.angle,
+          id,
+          [x0 / k, y0 / k],
+          f(this.angle),
           this.stops,
         );
         break;
       default:
         throw new Error("unknown gradient type");
     }
+    this._id = id;
+    this._scale = k;
     // Past the outermost stop a gradient clamps to that stop's colour, as
     // the canvas and CSS specs say — which is XRender's RepeatPad, not the
     // RepeatNone (transparent) a gradient picture is born with. Without it
@@ -5250,9 +5276,16 @@ class CanvasGradient {
    * nothing, exactly as the canvas spec says.
    */
   _sync(ctm) {
-    const inv = matInvert(ctm);
+    let inv = matInvert(ctm);
     if (!inv) return false;
     const id = this.id; // lazily creates the picture
+    // a gradient made smaller to fit the wire (see `id`) is sampled that
+    // much nearer its origin
+    const k = this._scale;
+    if (k !== 1) inv = inv.map((v) => v / k);
+    // the transform is 16.16 fixed point too: one that cannot be carried
+    // fills nothing, rather than throwing the rest of the paint away
+    if (!inv.every((v) => Math.abs(v) < 32767)) return false;
     const a = this._applied;
     if (
       inv[0] !== a[0] ||

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);
@@ -186,6 +193,10 @@ 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.
  */
+/** Whether a style asks for italics. Anything but a string asks for nothing:
+ *  a style of `7` threw from here, out of whatever paint was measuring. */
+const italicIn = (style) => typeof style === 'string' && style.includes('italic');
+
 /** A CSS family list's names, unquoted. */
 function familiesOf(family) {
   return String(family)
@@ -214,6 +225,7 @@ export default class FontManager {
     this._source = createFontSource(source) ?? null;
     this._fonts = new Map(); // candidate key -> Font
     this._matches = new Map(); // family|weight|style -> Font
+    this._lastMatch = null; // the last of them asked for (`match`)
     this._fallbacks = new Map(); // family|weight|style -> Map(codepoint -> Font|null)
     this._registered = []; // { font, family (lowercase), weight, italic }
     // word-level shaping memo, in two generations (`_shapeCached`): each a
@@ -221,6 +233,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();
@@ -321,9 +335,10 @@ export default class FontManager {
       font,
       family: (opts.family || font.familyName || '').toLowerCase(),
       weight: opts.weight !== undefined ? numWeight(opts.weight) : detected.weight,
-      italic: opts.style !== undefined ? opts.style.includes('italic') : detected.italic
+      italic: typeof opts.style === 'string' ? opts.style.includes('italic') : detected.italic
     });
     this._matches.clear();
+    this._lastMatch = null;
     this._fallbacks.clear();
     // a kept paragraph's spans hold the faces their families matched before
     this._paragraphs.clear();
@@ -367,13 +382,23 @@ export default class FontManager {
    */
   match(family = 'sans-serif', opts = {}) {
     const weight = numWeight(opts.weight);
-    const italic = !!(opts.style && opts.style.includes('italic'));
+    const italic = italicIn(opts.style);
+    // The face the last call matched, asked for again — a paragraph's spans,
+    // a list's rows of one style — is the most recent in the map already: no
+    // key to spell and no move to make, where both were most of the call.
+    // Only a miss below changes the map, and it sets this; `load()` clears
+    // both.
+    const last = this._lastMatch;
+    if (last !== null && last.family === family && last.weight === weight && last.italic === italic) {
+      return instantiate(last.face, weight, opts.variations, opticalSizeFor(opts));
+    }
     const cacheKey = `${family}|${weight}|${italic}`;
     let face = this._matches.get(cacheKey);
     if (face) {
       // insertion order is LRU order; re-inserting a hit moves it to the tail
       this._matches.delete(cacheKey);
       this._matches.set(cacheKey, face);
+      this._lastMatch = { family, weight, italic, face };
       return instantiate(face, weight, opts.variations, opticalSizeFor(opts));
     }
 
@@ -402,6 +427,7 @@ export default class FontManager {
       face = head?.drawable ? head : this._firstDrawable(source.matchSorted(pattern));
     }
     this._matches.set(cacheKey, face);
+    this._lastMatch = { family, weight, italic, face };
     // A long-lived app can name a lot of families. Same sweep as the shaping
     // memo: drop the stale half in one pass rather than one entry per insert.
     if (this._matches.size > MAX_MATCHES) {
@@ -447,7 +473,7 @@ export default class FontManager {
     let found = null;
     if (this._registered.length) {
       const weight = numWeight(opts.weight);
-      const italic = !!opts.style?.includes('italic');
+      const italic = italicIn(opts.style);
       for (const name of familiesOf(family)) {
         const font = this._matchRegistered([name.toLowerCase()], weight, italic);
         if (font && font.hasGlyph(codepoint)) {
@@ -473,7 +499,7 @@ export default class FontManager {
         // 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')));
+        candidates = source.matchSorted(patternOf(family, numWeight(opts.weight), italicIn(opts.style)));
       } 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
@@ -528,6 +554,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,