ntk 8.17.3 → 8.17.5

package/lib/renderingcontext_2d.js

@@ -387,15 +387,63 @@ function patternSourceOf(app, source) {
  * after a `translate` moves with the fill, and one created under a translate
  * and filled without it does not).
  *
- * Returns false when nothing would be painted (a singular matrix), true for
- * anything else, including every plain-colour style.
+ * Returns false when nothing would be painted (a singular matrix, or one
+ * the wire cannot carry), true for anything else, including every
+ * plain-colour style. `width` and `height` are the surface's: the style's
+ * source origin is kept on it (`sourceOrigin`).
  */
-function prepareStyle(src, m) {
+function prepareStyle(src, m, width, height) {
   return src instanceof CanvasPattern || src instanceof CanvasGradient
-    ? src._sync(m)
+    ? src._sync(m, width, height)
     : true;
 }
 
+const NO_ORIGIN = Object.freeze([0, 0]);
+
+/**
+ * Where a composite samples `src` from, as a device point: each composite
+ * that reads a style at its destination's own coordinates passes those
+ * coordinates less this as its source offset.
+ *
+ * A gradient's or a pattern's picture transform is the inverse of the CTM,
+ * and sampling it at device coordinates put the CTM's translation, times
+ * its downscale, into the transform: a box a fortieth of its size at x
+ * 2,200 asked for 88,000, past what 16.16 fixed point carries. `_sync`
+ * folds this origin into the transform instead, and puts it where the
+ * style's own origin lands, so the translation is small wherever on the
+ * surface the style is painted. Everything else — a solid, a picture —
+ * samples at device coordinates, from (0, 0).
+ */
+function sourceOrigin(src) {
+  return src instanceof CanvasPattern || src instanceof CanvasGradient
+    ? src._origin
+    : NO_ORIGIN;
+}
+
+/**
+ * The origin `_sync` picks for a style whose own origin lands at device
+ * (x, y): the nearest whole pixel, kept on the surface. On it, a composite's
+ * source offset — its destination's, less this — is within the surface's
+ * size of 0, which the 16-bit field carries whatever the transform; and the
+ * transform's translation is the style's coordinate there, which for a
+ * style painted on the surface is one the fill samples anyway.
+ */
+function originOn(x, y, width, height) {
+  const on = (v, size) => (v > 0 ? Math.min(Math.round(v), size) : 0);
+  return [on(x, width), on(y, height)];
+}
+
+/**
+ * Whether every entry can be written as XRender's 16.16 fixed point, whose
+ * whole part is a signed 16-bit number. A picture transform is written that
+ * way, and the request encoder throws on an entry past it — out of the paint
+ * that asked for it, and out of everything drawn after it in the same frame.
+ * Not finite fails too.
+ */
+function fitsFixed(values) {
+  return values.every((v) => Math.abs(v) < 32768);
+}
+
 function isPictureSource(image) {
   return (
     image instanceof Image ||
@@ -2376,14 +2424,15 @@ class RenderingContext2d {
       );
     }
     // src is either a 1x1 repeating solid (offset irrelevant) or a
-    // surface-aligned gradient, so it is sampled at the same offset too
+    // gradient/pattern, sampled at the same offset from its own origin
+    const [ox, oy] = sourceOrigin(src);
     R.Composite(
       op,
       src.id,
       this.fillMask.id,
       this._dst(),
-      out.x,
-      out.y,
+      out.x - ox,
+      out.y - oy,
       out.x,
       out.y,
       out.x,
@@ -2406,7 +2455,7 @@ class RenderingContext2d {
     op = op ?? this._op();
     alpha = alpha ?? this.globalAlpha;
     if (alpha <= 0) return;
-    if (!prepareStyle(src, this._m)) return;
+    if (!prepareStyle(src, this._m, this.width, this.height)) return;
 
     // one box per subpath, so a path holding disjoint ones can be masked as
     // the pieces it is rather than as the box around all of them — each the
@@ -2462,7 +2511,7 @@ class RenderingContext2d {
   _strokePolys(polys, { src = null } = {}) {
     src = src ?? this._strokePicture;
     if (this.globalAlpha <= 0) return;
-    if (!prepareStyle(src, this._m)) return;
+    if (!prepareStyle(src, this._m, this.width, this.height)) return;
     // approximate transform-aware line width by the average scale factor
     const det = this._m[0] * this._m[3] - this._m[1] * this._m[2];
     const scale = Math.sqrt(Math.abs(det)) || 1;
@@ -2830,6 +2879,7 @@ class RenderingContext2d {
       op === this.Render.PictOp.Over;
     const chunk = 4000 * 6;
     if (direct) {
+      const [ox, oy] = sourceOrigin(src);
       this._cullTris(tris);
       if (!tris.length) return;
       const cut = this._wireCut(tris);
@@ -2847,11 +2897,12 @@ class RenderingContext2d {
         // convention drawGlyphRuns and compositeTraps use — without it every
         // non-constant stroke style (a gradient, a pattern) is offset by
         // wherever the stroke happens to start, and shifts as it moves.
+        // Less the style's own origin, as every fill samples it.
         this.Render.Triangles(
           op,
           src.id,
-          Math.floor(batch[0]),
-          Math.floor(batch[1]),
+          Math.floor(batch[0]) - ox,
+          Math.floor(batch[1]) - oy,
           this._dst(),
           this.Render.a8,
           batch,
@@ -3117,7 +3168,7 @@ class RenderingContext2d {
   _drawGlyphsDevice(op, src, positioned) {
     const app = this.window.app;
     const R = this.Render;
-    if (!prepareStyle(src, this._m)) return;
+    if (!prepareStyle(src, this._m, this.width, this.height)) return;
     if (!this._hasPolyClip) {
       // Fast path: a rectangular clip is something the server can do itself.
       // Two small requests around the ordinary glyph composite, instead of
@@ -3137,6 +3188,7 @@ class RenderingContext2d {
         this._dst(),
         positioned,
         rect ?? { x: 0, y: 0, w: this.width, h: this.height },
+        sourceOrigin(src),
       );
       if (rect) this._invalidatePictureClip();
       this._markDirty();
@@ -3174,13 +3226,14 @@ class RenderingContext2d {
       this.width,
       this.height,
     );
+    const [ox, oy] = sourceOrigin(src);
     R.Composite(
       op,
       src.id,
       this.fillMask.id,
       this._dst(),
-      0,
-      0,
+      -ox,
+      -oy,
       0,
       0,
       0,
@@ -3207,7 +3260,16 @@ class RenderingContext2d {
         if (rect.w === 0 || rect.h === 0) return;
         this._setPictureClip(rect);
       }
-      compositeTraps(app, op, src.id, this._dst(), traps);
+      compositeTraps(
+        app,
+        op,
+        src.id,
+        this._dst(),
+        traps,
+        undefined,
+        undefined,
+        sourceOrigin(src),
+      );
       if (rect) this._invalidatePictureClip();
       this._markDirty();
       return;
@@ -3242,13 +3304,14 @@ class RenderingContext2d {
       this.width,
       this.height,
     );
+    const [ox, oy] = sourceOrigin(src);
     R.Composite(
       op,
       src.id,
       this.fillMask.id,
       this._dst(),
-      0,
-      0,
+      -ox,
+      -oy,
       0,
       0,
       0,
@@ -3486,7 +3549,8 @@ class RenderingContext2d {
         w = x1 - x0;
         h = y1 - y0;
       }
-      if (!prepareStyle(this._backgroundPicture, this._m)) return;
+      const style = this._backgroundPicture;
+      if (!prepareStyle(style, this._m, this.width, this.height)) return;
       const op = this._op();
       // A rectangular clip is a smaller rectangle to fill, not a mask — this
       // was the one drawing path that still built a surface-sized a8 for one
@@ -3498,13 +3562,14 @@ class RenderingContext2d {
         w > 0 && h > 0 ? this._boxedComposite({ x, y, w, h }, op) : null;
       if (direct && !direct.box) return; // the clip rejects the fill whole
       const box = direct ? direct.box : { x, y, w, h };
+      const [ox, oy] = sourceOrigin(style);
       this.Render.Composite(
         op,
-        this._backgroundPicture.id,
+        style.id,
         direct ? direct.mask : this._compositeMask(box),
         this._dst(),
-        box.x,
-        box.y,
+        box.x - ox,
+        box.y - oy,
         box.x,
         box.y,
         box.x,
@@ -3656,7 +3721,8 @@ class RenderingContext2d {
       if (y + h > y1) y1 = y + h;
     }
     if (!disjointRects(rects)) return false;
-    if (!prepareStyle(this._backgroundPicture, this._m)) return true;
+    const style = this._backgroundPicture;
+    if (!prepareStyle(style, this._m, this.width, this.height)) return true;
     // the box they cover, on the surface: nothing outside it is sampled
     const bx = Math.max(0, x0);
     const by = Math.max(0, y0);
@@ -3690,13 +3756,14 @@ class RenderingContext2d {
       bw,
       bh,
     );
+    const [ox, oy] = sourceOrigin(style);
     R.Composite(
       op,
-      this._backgroundPicture.id,
+      style.id,
       mask,
       this._dst(),
-      bx,
-      by,
+      bx - ox,
+      by - oy,
       bx,
       by,
       bx,
@@ -5145,7 +5212,8 @@ class RenderingContext2d {
     const R = this.Render;
     // the coverage is painted in the current fillStyle, on both branches
     // below — a gradient/pattern whose transform collapsed paints nothing
-    if (!prepareStyle(this._backgroundPicture, this._m)) return;
+    const style = this._backgroundPicture;
+    if (!prepareStyle(style, this._m, this.width, this.height)) return;
     const scaled = dw !== sw || dh !== sh;
     if (scaled) {
       R.SetPictureTransform(picture.id, [
@@ -5235,18 +5303,19 @@ class RenderingContext2d {
         this._setPictureClip(rect);
       }
       // The scratch mask is surface-sized and surface-aligned — the coverage
-      // went into it at (dx, dy) — and so is a gradient source, so both are
-      // sampled at the destination offset. Reading either from (0, 0) draws a
-      // dw x dh window out of the wrong part of a full-surface picture: for
-      // the mask that is the region just cleared to zero, so nothing paints at
-      // all unless dx and dy are both zero.
+      // went into it at (dx, dy) — so it is sampled at the destination
+      // offset, and a gradient or pattern at that offset from its origin.
+      // Reading the mask from (0, 0) draws a dw x dh window out of the wrong
+      // part of a full-surface picture: the region just cleared to zero, so
+      // nothing paints at all unless dx and dy are both zero.
+      const [ox, oy] = sourceOrigin(style);
       R.Composite(
         op,
-        this._backgroundPicture.id,
+        style.id,
         this.fillMask.id,
         this._dst(),
-        dx,
-        dy,
+        dx - ox,
+        dy - oy,
         dx,
         dy,
         dx,
@@ -5258,15 +5327,17 @@ class RenderingContext2d {
     } else if (!rect || (rect.w > 0 && rect.h > 0)) {
       if (rect) this._setPictureClip(rect);
       // the source is a 1x1 repeating solid (offset irrelevant) or the fill
-      // picture, which for a gradient is surface-aligned: same offset as the
-      // destination, exactly as in _fillPolys
+      // style, sampled at the destination's offset from its own origin,
+      // exactly as in _fillPolys
+      const src = this._coverageSource();
+      const [ox, oy] = sourceOrigin(src);
       R.Composite(
         op,
-        this._coverageSource().id,
+        src.id,
         picture.id,
         this._dst(),
-        dx,
-        dy,
+        dx - ox,
+        dy - oy,
         mx,
         my,
         dx,
@@ -5503,6 +5574,11 @@ class RenderingContext2d {
     const M = matMultiply(this._m, [dw / sw, 0, 0, dh / sh, dx, dy]);
     const inv = matInvert(M);
     if (!inv) return;
+    // The inverse's linear part is how many source pixels one device pixel
+    // steps across, and it goes on the wire as 16.16 fixed point. Past
+    // 32,767 the image is drawn at under 1/32,768 of its size: less than a
+    // pixel across for any image X can hold, and nothing to see.
+    if (!fitsFixed(inv.slice(0, 4))) return;
 
     // device bbox of the transformed dest rect, clamped to the canvas
     const corners = [
@@ -5523,6 +5599,24 @@ class RenderingContext2d {
     );
     if (x1 <= x0 || y1 <= y0) return;
 
+    // Device -> source sample, measured from the bounding box's corner: the
+    // corner's device position is folded into the transform, and the
+    // composite's source origin is its box's offset from that corner. With
+    // the source origin at device coordinates instead, the translation was
+    // the device position times the downscale — a 50x30 thumbnail of a
+    // 2000x1200 image at x 2,200 is 88,000, past what 16.16 carries, and
+    // the encoder threw. From the corner it is the source coordinate the
+    // corner samples: the image's own size or so, wherever on the surface it
+    // is drawn. The corner is the unclipped one, so a clip that narrows the
+    // box below samples the same points the mask route does.
+    const [a, b, c, d] = inv;
+    const e = a * x0 + c * y0 + inv[4] + sx;
+    const f = b * x0 + d * y0 + inv[5] + sy;
+    // A corner out of reach even so is a draw near the limit above, or an
+    // image over 20,000 pixels across under a rotation; it is not drawn,
+    // rather than thrown out of the paint.
+    if (!fitsFixed([e, f])) return;
+
     // A rectangular clip shrinks the box instead of becoming a mask (issue
     // #307). Decided before the picture transform is installed, so a draw
     // the clip rejects does not have to put it back.
@@ -5531,27 +5625,15 @@ class RenderingContext2d {
     if (direct && !direct.box) return;
     const box = direct ? direct.box : bbox;
 
-    // device -> source sample (adding the source-rect origin)
-    const srcM = [inv[0], inv[1], inv[2], inv[3], inv[4] + sx, inv[5] + sy];
-    this.Render.SetPictureTransform(picture.id, [
-      srcM[0],
-      srcM[2],
-      srcM[4],
-      srcM[1],
-      srcM[3],
-      srcM[5],
-      0,
-      0,
-      1,
-    ]);
+    this.Render.SetPictureTransform(picture.id, [a, c, e, b, d, f, 0, 0, 1]);
     picture.setFilter("bilinear");
     this.Render.Composite(
       op,
       picture.id,
       direct ? direct.mask : this._compositeMask(box),
       this._dst(),
-      box.x,
-      box.y,
+      box.x - x0,
+      box.y - y0,
       box.x,
       box.y,
       box.x,
@@ -5596,6 +5678,9 @@ class CanvasGradient {
     // what the server currently holds: a fresh gradient picture is
     // untransformed, so an untransformed fill costs no extra request
     this._applied = [1, 0, 0, 1, 0, 0];
+    // the device point fills sample it from (`sourceOrigin`), set with the
+    // transform it belongs with
+    this._origin = NO_ORIGIN;
 
     this.x0 = p0;
     this.y0 = p1;
@@ -5685,13 +5770,14 @@ class CanvasGradient {
   /**
    * Make the server-side mapping match the CTM this paint runs under. The
    * gradient's own coordinates are user space and every fill samples the
-   * source at device coordinates, so the picture transform — which takes a
-   * source coordinate to a gradient one — is the CTM's inverse.
+   * source at device coordinates less `_origin`, so the picture transform —
+   * which takes a source coordinate to a gradient one — is the CTM's
+   * inverse, from that origin.
    *
    * Returns false when the CTM collapses (a zero scale), which paints
    * nothing, exactly as the canvas spec says.
    */
-  _sync(ctm) {
+  _sync(ctm, width = 0, height = 0) {
     let inv = matInvert(ctm);
     if (!inv) return false;
     const id = this.id; // lazily creates the picture
@@ -5699,9 +5785,13 @@ class CanvasGradient {
     // much nearer its origin
     const k = this._scale;
     if (k !== 1) inv = inv.map((v) => v / k);
+    // sampled from where user space's origin lands (`sourceOrigin`)
+    const origin = originOn(ctm[4], ctm[5], width, height);
+    inv = matMultiply(inv, [1, 0, 0, 1, origin[0], origin[1]]);
     // 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;
+    if (!fitsFixed(inv)) return false;
+    this._origin = origin;
     const a = this._applied;
     if (
       inv[0] !== a[0] ||
@@ -5779,6 +5869,7 @@ class CanvasPattern {
     // what the server currently holds: a fresh picture is untransformed and
     // filtered nearest, so an untransformed fill costs no extra request
     this._applied = [1, 0, 0, 1, 0, 0];
+    this._origin = NO_ORIGIN;
     this._filter = "nearest";
   }
 
@@ -5822,15 +5913,36 @@ class CanvasPattern {
    * Make the server-side mapping match `ctm ∘ patternMatrix`. XRender's
    * picture transform runs the other way — it takes a coordinate in the
    * composite's source space (which every fill here keeps equal to device
-   * space) to a texel — so it is the inverse.
+   * space less `_origin`) to a texel — so it is the inverse, from that
+   * origin.
    *
    * Returns false when that composition collapses (a zero scale), which
    * paints nothing, exactly as the canvas spec says.
    */
-  _sync(ctm) {
+  _sync(ctm, width = 0, height = 0) {
     const m = matMultiply(ctm, this._m);
-    const inv = matInvert(m);
+    let inv = matInvert(m);
     if (!inv) return false;
+    // sampled from where the tile's origin lands (`sourceOrigin`)
+    const origin = originOn(m[4], m[5], width, height);
+    inv = matMultiply(inv, [1, 0, 0, 1, origin[0], origin[1]]);
+    // A tile that repeats is the same a whole number of tiles along, so the
+    // translation — the texel the origin samples — is taken to the first
+    // tile. A grid scrolled 100,000 pixels has its origin far off the
+    // surface and samples texels 100,000 along; from the first tile they
+    // are in reach of the wire.
+    const period =
+      this._repeat === 1 ? 1 : this._repeat === 3 ? 2 : 0; // Normal, Reflect
+    if (period && this.width > 0 && this.height > 0) {
+      const pw = this.width * period;
+      const ph = this.height * period;
+      inv[4] -= pw * Math.floor(inv[4] / pw);
+      inv[5] -= ph * Math.floor(inv[5] / ph);
+    }
+    // 16.16 fixed point, as a gradient's is: one that cannot be carried
+    // fills nothing rather than throwing the rest of the paint away
+    if (!fitsFixed(inv)) return false;
+    this._origin = origin;
     const a = this._applied;
     if (
       inv[0] !== a[0] ||

package/lib/text/glyphs.js

@@ -583,8 +583,12 @@ export function routeGlyphSize(app, font, size, policy = policyOf(app), textRend
  * @param {{x: number, y: number, w: number, h: number}} [bounds] the part of
  *   the destination that can show anything — the clip, or the surface. A
  *   glyph wholly outside it is not sent (`visibleGlyph`).
+ * @param {[number, number]} [srcOrigin] the destination point the source's
+ *   (0, 0) is aligned with. A gradient or pattern the 2d context has
+ *   transformed samples from its own origin; anything else is aligned with
+ *   the destination, from (0, 0).
  */
-export function drawGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
+export function drawGlyphRuns(app, op, srcId, dstId, positioned, bounds = null, srcOrigin = [0, 0]) {
   const policy = policyOf(app);
   let bitmap = positioned;
   let vector = null;
@@ -602,8 +606,8 @@ export function drawGlyphRuns(app, op, srcId, dstId, positioned, bounds = null)
       bitmap.push(positioned[i]);
     }
   }
-  if (bitmap.length) drawBitmapGlyphRuns(app, op, srcId, dstId, bitmap, policy, bounds);
-  if (vector) drawVectorGlyphRuns(app, op, srcId, dstId, vector, bounds);
+  if (bitmap.length) drawBitmapGlyphRuns(app, op, srcId, dstId, bitmap, policy, bounds, srcOrigin);
+  if (vector) drawVectorGlyphRuns(app, op, srcId, dstId, vector, bounds, srcOrigin);
 }
 
 /**
@@ -630,7 +634,7 @@ function visibleGlyph(bounds, x, y, size) {
   );
 }
 
-function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy, bounds) {
+function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy, bounds, srcOrigin) {
   const Render = app.display.Render;
   const items = [];
   let bits = 8;
@@ -652,8 +656,9 @@ function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy, bounds)
   const encoded = encodeGlyphItems(items, bits);
   if (!encoded) return;
   // srcX/srcY align the source with the FIRST glyph's origin (RENDER spec);
-  // passing that origin itself makes source coordinates equal destination
-  // coordinates, so gradient fill styles line up with canvas space
+  // passing that origin itself, less the source's own, makes source
+  // coordinates destination coordinates from there, so gradient fill styles
+  // line up with canvas space
   Render.CompositeGlyphs(
     encoded.bits,
     op,
@@ -661,8 +666,8 @@ function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy, bounds)
     dstId,
     0,
     encoded.gsid,
-    items[0].x,
-    items[0].y,
+    items[0].x - srcOrigin[0],
+    items[0].y - srcOrigin[1],
     encoded.elts
   );
   trimGlyphPages(app, policy, new Set(pages.values()));
@@ -683,7 +688,7 @@ const MAX_TRAPS_PER_REQUEST = 6000;
  * Positions are intentionally NOT rounded to whole pixels — fractional
  * advances and origins keep zoom animations smooth.
  */
-function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
+function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null, srcOrigin = [0, 0]) {
   // unrounded glyph origins + ink bounding box
   const placed = [];
   let minX = Infinity;
@@ -742,7 +747,7 @@ function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
     bx = x0;
     by = y0;
   }
-  compositeTraps(app, op, srcId, dstId, traps, bx, by);
+  compositeTraps(app, op, srcId, dstId, traps, bx, by, srcOrigin);
 }
 
 /**
@@ -753,8 +758,10 @@ function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
  *
  * When bx/by are omitted they are derived from the trapezoid bounds (the
  * trap coordinates are then treated as absolute device coordinates).
+ * `srcOrigin` is the destination point the source's (0, 0) is aligned with,
+ * as for `drawGlyphRuns`.
  */
-export function compositeTraps(app, op, srcId, dstId, traps, bx, by) {
+export function compositeTraps(app, op, srcId, dstId, traps, bx, by, srcOrigin = [0, 0]) {
   if (traps.length === 0) return;
   const Render = app.display.Render;
 
@@ -800,8 +807,22 @@ export function compositeTraps(app, op, srcId, dstId, traps, bx, by) {
   for (let i = 0; i < traps.length; i += MAX_TRAPS_PER_REQUEST * 6) {
     Render.AddTraps(mask.picture.id, 0, 0, traps.slice(i, i + MAX_TRAPS_PER_REQUEST * 6));
   }
-  // src coords = dst coords (see drawBitmapGlyphRuns) so gradients line up
-  Render.Composite(op, srcId, mask.picture.id, dstId, bx, by, 0, 0, bx, by, bw, bh);
+  // src coords = dst coords from the source's origin (see
+  // drawBitmapGlyphRuns) so gradients line up
+  Render.Composite(
+    op,
+    srcId,
+    mask.picture.id,
+    dstId,
+    bx - srcOrigin[0],
+    by - srcOrigin[1],
+    0,
+    0,
+    bx,
+    by,
+    bw,
+    bh
+  );
   releaseScratchMask(app);
 }