ntk 8.12.0 → 8.12.2

package/lib/renderingcontext_2d.js

@@ -94,6 +94,51 @@ function intersectBox(a, b) {
   return { x, y, w: right - x, h: bottom - y };
 }
 
+/**
+ * Whether no two of a flat `[x, y, w, h, …]` list of whole-pixel rectangles
+ * share a pixel — touching edges do not. A sweep along x holding the
+ * rectangles it is inside as disjoint y spans in order, so a list that is
+ * disjoint, which is the list this is asked about, costs a binary search
+ * per rectangle: a chart's per-column spans, an occupancy grid's cells.
+ */
+function disjointRects(rects) {
+  const n = rects.length / 4;
+  if (n < 2) return true;
+  // events: where a rectangle starts and where it ends, ends first at a tie
+  const events = [];
+  for (let i = 0; i < n; i++) {
+    events.push([rects[i * 4], 1, i], [rects[i * 4] + rects[i * 4 + 2], 0, i]);
+  }
+  events.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+  // the y spans the sweep is inside, sorted by their top, as rectangle ids
+  const active = [];
+  const top = (i) => rects[i * 4 + 1];
+  const bottom = (i) => rects[i * 4 + 1] + rects[i * 4 + 3];
+  const find = (y) => {
+    let lo = 0;
+    let hi = active.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (top(active[mid]) < y) lo = mid + 1;
+      else hi = mid;
+    }
+    return lo;
+  };
+  for (const [, starts, i] of events) {
+    if (!starts) {
+      let at = find(top(i));
+      while (active[at] !== i) at++;
+      active.splice(at, 1);
+      continue;
+    }
+    const at = find(top(i));
+    if (at > 0 && bottom(active[at - 1]) > top(i)) return false;
+    if (at < active.length && top(active[at]) < bottom(i)) return false;
+    active.splice(at, 0, i);
+  }
+  return true;
+}
+
 /** The device-space ink bounds of a flattened path, unclamped. */
 function polysInk(polys) {
   let minX = Infinity;
@@ -1854,42 +1899,47 @@ class RenderingContext2d {
    * well as the AddTraps: two requests become one, and the one that is left
    * touches only the bounding box.
    */
-  _uploadCoverage(job, b, edges) {
+  _uploadCoverage(job, b, out, edges) {
     const rasterizer = this.window.app.rasterizer;
     if (!rasterizer) return false;
     if (routeRaster(b.w, b.h, edges, this.window.app.rasterPolicy) !== "local")
       return false;
 
+    // Rasterized over the whole box, as always, so a drawing that clips
+    // split across passes — a pan's strips, a full repaint — gets the same
+    // coverage in every one of them, byte for byte. Only `out`, the part the
+    // clip lets through, goes on the wire (issue #372).
     const coverage = rasterizer.rasterize({ ...job, width: b.w, height: b.h });
     if (!coverage) return false;
 
     // X wants scanlines padded to 4 bytes; the rasterizer contract is
-    // unpadded rows. When the width is already a multiple of 4 — which every
-    // power-of-two icon box is — the coverage goes out as a view over the
-    // rasterizer's own bytes, with no copy at all.
-    const stride = (b.w + 3) & ~3;
+    // unpadded rows. When the part sent is the whole box and its width is
+    // already a multiple of 4 — which every power-of-two icon box is — the
+    // coverage goes out as a view over the rasterizer's own bytes, with no
+    // copy at all.
+    const stride = (out.w + 3) & ~3;
     let data;
-    if (stride === b.w) {
+    if (out.w === b.w && out.h === b.h && stride === b.w) {
       data = Buffer.isBuffer(coverage)
         ? coverage
         : Buffer.from(coverage.buffer, coverage.byteOffset, coverage.length);
     } else {
-      data = Buffer.alloc(stride * b.h);
-      for (let y = 0; y < b.h; ++y) {
-        Buffer.from(coverage.buffer, coverage.byteOffset + y * b.w, b.w).copy(
-          data,
-          y * stride,
-        );
+      data = Buffer.alloc(stride * out.h);
+      const left = out.x - b.x;
+      const top = out.y - b.y;
+      for (let y = 0; y < out.h; ++y) {
+        const from = coverage.byteOffset + (top + y) * b.w + left;
+        Buffer.from(coverage.buffer, from, out.w).copy(data, y * stride);
       }
     }
     this.X.PutImage(
       2,
       this.fillMaskDrawable.id,
       this._maskGC(),
-      b.w,
-      b.h,
-      b.x,
-      b.y,
+      out.w,
+      out.h,
+      out.x,
+      out.y,
       0,
       8,
       data,
@@ -1982,30 +2032,29 @@ class RenderingContext2d {
    */
   _paintThroughMask(b, job, { edges, src, op, alpha, server }) {
     const R = this.Render;
-    // A rectangular clip narrows where the coverage is *composited*; the
-    // mask content outside it is stale by the same argument as outside `b`,
-    // and a box the clip rejects outright needs no coverage at all. A stack
-    // whose mask was dropped by restore() may still hold a poly, and the mask
-    // comes back on demand. A region clip needs nothing here: the picture
-    // carries it, and it applies to the composite below like any other.
+    // Everything is bounded to the part of the box the clip lets through:
+    // the clip's rectangle, or the extents of a stack with a path in it —
+    // the coverage rasterized and uploaded, the clip applied, the composite.
+    // A stroke across a rounded pane used to upload its whole box through
+    // the mask to paint a few rows of it (issue #372). The mask content
+    // outside `out` is stale by the same argument as outside `b`, and a box
+    // the clip rejects outright needs no coverage at all. A stack whose mask
+    // was dropped by restore() may still hold a poly, and the mask comes
+    // back on demand. A region clip needs nothing here: the picture carries
+    // it, and it applies to the composite below like any other.
+    const clip = this._hasPolyClip ? this._clipExtents() : this._clipRect();
     let out = b;
-    if (!this.clipMask) {
-      if (this._hasPolyClip) {
-        this._requireClipMask();
-      } else {
-        const cr = this._clipRect();
-        if (cr) {
-          out = intersectBox(b, cr);
-          if (!out) return false;
-        }
-      }
+    if (clip) {
+      out = intersectBox(b, clip);
+      if (!out) return false;
     }
-    if (!this._uploadCoverage({ ...job, dx: -b.x, dy: -b.y }, b, edges)) {
+    if (this._hasPolyClip) this._requireClipMask();
+    if (!this._uploadCoverage({ ...job, dx: -b.x, dy: -b.y }, b, out, edges)) {
       R.FillRectangles(
         R.PictOp.Src,
         this.fillMask.id,
         [0, 0, 0, 0],
-        [b.x, b.y, b.w, b.h],
+        [out.x, out.y, out.w, out.h],
       );
       server();
     }
@@ -2667,7 +2716,14 @@ class RenderingContext2d {
         if (rect.w === 0 || rect.h === 0) return;
         this._setPictureClip(rect);
       }
-      drawGlyphRuns(app, op, src.id, this._dst(), positioned);
+      drawGlyphRuns(
+        app,
+        op,
+        src.id,
+        this._dst(),
+        positioned,
+        rect ?? { x: 0, y: 0, w: this.width, h: this.height },
+      );
       if (rect) this._invalidatePictureClip();
       this._markDirty();
       return;
@@ -2688,6 +2744,7 @@ class RenderingContext2d {
       this._glyphSource.id,
       this.fillMask.id,
       positioned,
+      { x: 0, y: 0, w: this.width, h: this.height },
     );
     R.Composite(
       R.PictOp.In,
@@ -3009,9 +3066,12 @@ class RenderingContext2d {
    * A solid-colour fillStyle under an identity transform and a rectangular
    * (or absent) clip compiles the whole list into a single
    * `Render.FillRectangles`, where N `fillRect` calls cost N composites.
-   * Gradient/Picture styles, transforms and non-rectangular clips fall
-   * back to that `fillRect` loop, so the answer is always right and only
-   * the request count varies.
+   * Under a clip that is not a rectangle, rectangles that do not overlap
+   * still cost three requests however many there are
+   * (`_fillRectsThroughClip`). Gradient/Picture styles, transforms, and
+   * overlapping rectangles or `copy` under a non-rectangular clip fall back
+   * to that `fillRect` loop, so the answer is always right and only the
+   * request count varies.
    */
   fillRects(rects) {
     if (!rects || !rects.length || this.globalAlpha <= 0) return;
@@ -3045,12 +3105,13 @@ class RenderingContext2d {
     if (
       !matIsIdentity(this._m) ||
       !isPlainColor(this._fillStyle) ||
-      this._hasPolyClip
+      (this._hasPolyClip && !this._fillRectsThroughClip(flat))
     ) {
       for (let i = 0; i < flat.length; i += 4)
         this._fillRect(flat[i], flat[i + 1], flat[i + 2], flat[i + 3]);
       return;
     }
+    if (this._hasPolyClip) return;
     if (clip && (clip.w === 0 || clip.h === 0)) return; // clipped away
     const R = this.Render;
     if (clip) this._setPictureClip(clip);
@@ -3073,6 +3134,102 @@ class RenderingContext2d {
     this._markDirty();
   }
 
+  /**
+   * `fillRects` under a clip that is not a rectangle — a rounded card, a
+   * path: every rectangle's coverage into the scratch a8 mask with one
+   * `FillRectangles`, `globalAlpha` and the clip applied to it once each,
+   * and the style composited through it once. One rectangle at a time is a
+   * composite through the clip each, and a chart's marks inside a rounded
+   * box a zoom had put off the pixel grid were sixty thousand of them a
+   * frame (issue #374).
+   *
+   * Only where that is the loop's picture. The rectangles must not overlap:
+   * the loop blends a pixel once per rectangle over it, at the clip's
+   * coverage each time, so where two overlap on the clip's antialiased edge
+   * it is darker than one blend through the mask — and where they do not,
+   * every pixel is blended once either way, whatever the colour's alpha.
+   * And the operator must leave the destination alone where the mask is
+   * zero: `copy` clears every pixel of its box the mask misses, the gaps
+   * between the rectangles here. The rectangles reach the mask as the wire
+   * carries every box, in whole pixels truncated toward zero, which is what
+   * `_fillRect`'s composites are cut to as well.
+   *
+   * @returns {boolean} whether the rectangles were drawn here
+   */
+  _fillRectsThroughClip(flat) {
+    const R = this.Render;
+    const op = this._op();
+    if (!this._maskBounded(op)) return false;
+    const rects = [];
+    let x0 = Infinity;
+    let y0 = Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    for (let i = 0; i < flat.length; i += 4) {
+      const x = Math.trunc(flat[i]);
+      const y = Math.trunc(flat[i + 1]);
+      const w = Math.trunc(flat[i + 2]);
+      const h = Math.trunc(flat[i + 3]);
+      if (w <= 0 || h <= 0) continue;
+      rects.push(x, y, w, h);
+      if (x < x0) x0 = x;
+      if (y < y0) y0 = y;
+      if (x + w > x1) x1 = x + w;
+      if (y + h > y1) y1 = y + h;
+    }
+    if (!disjointRects(rects)) return false;
+    if (!prepareStyle(this._backgroundPicture, this._m)) 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);
+    const bw = Math.min(this.width, x1) - bx;
+    const bh = Math.min(this.height, y1) - by;
+    if (!(bw > 0 && bh > 0)) return true;
+    this._ensureFillMask();
+    const mask = this.fillMask.id;
+    R.FillRectangles(R.PictOp.Src, mask, [0, 0, 0, 0], [bx, by, bw, bh]);
+    // stay under the server's maximum request size
+    const chunk = 10000 * 4;
+    for (let i = 0; i < rects.length; i += chunk) {
+      R.FillRectangles(
+        R.PictOp.Src,
+        mask,
+        [0, 0, 0, this.globalAlpha < 1 ? this.globalAlpha : 1],
+        i === 0 && rects.length <= chunk ? rects : rects.slice(i, i + chunk),
+      );
+    }
+    R.Composite(
+      R.PictOp.In,
+      this._requireClipMask().id,
+      0,
+      mask,
+      bx,
+      by,
+      0,
+      0,
+      bx,
+      by,
+      bw,
+      bh,
+    );
+    R.Composite(
+      op,
+      this._backgroundPicture.id,
+      mask,
+      this._dst(),
+      bx,
+      by,
+      bx,
+      by,
+      bx,
+      by,
+      bw,
+      bh,
+    );
+    this._markDirty();
+    return true;
+  }
+
   strokeRect(x, y, w, h) {
     if (this._shadowed()) this._shadowOfRect(x, y, w, h, true);
     const m = this._m;
@@ -3531,6 +3688,40 @@ class RenderingContext2d {
     return { x, y, w, h };
   }
 
+  /**
+   * The box the clip stack lets anything through, in device pixels on the
+   * surface: the intersection of its rectangles and of its paths' bounding
+   * boxes. Null when the stack holds no shape — region entries are the
+   * picture's, as in `_clipRect` — and an empty box when it holds a path
+   * that lands nowhere. What a drawing through the a8 mask is bounded to
+   * (issue #372). Cached against the stack, which is replaced on every
+   * change rather than edited.
+   */
+  _clipExtents() {
+    if (this._extentsOf === this._clips) return this._extents;
+    let out = null;
+    for (const entry of this._clips) {
+      if (entry.region) continue;
+      const box = entry.rect ?? (entry.bbox ??= this._polysBBox(entry.polys));
+      const next = box && (out ? intersectBox(out, box) : box);
+      if (!next) {
+        out = { x: 0, y: 0, w: 0, h: 0 };
+        break;
+      }
+      out = next;
+    }
+    if (out) {
+      const x = Math.max(0, Math.min(out.x, this.width));
+      const y = Math.max(0, Math.min(out.y, this.height));
+      const w = Math.max(0, Math.min(out.x + out.w, this.width) - x);
+      const h = Math.max(0, Math.min(out.y + out.h, this.height) - y);
+      out = { x, y, w, h };
+    }
+    this._extentsOf = this._clips;
+    this._extents = out;
+    return out;
+  }
+
   /**
    * Replace the clip stack and re-derive what kinds of entry are in it.
    *

package/lib/text/glyphs.js

@@ -571,8 +571,11 @@ export function routeGlyphSize(app, font, size, policy = policyOf(app), textRend
  * @param {number} srcId source picture (fill color/gradient)
  * @param {number} dstId destination picture
  * @param {Array<{run, x, y}>} positioned visual-order runs with baseline origins
+ * @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`).
  */
-export function drawGlyphRuns(app, op, srcId, dstId, positioned) {
+export function drawGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
   const policy = policyOf(app);
   let bitmap = positioned;
   let vector = null;
@@ -590,11 +593,35 @@ export function drawGlyphRuns(app, op, srcId, dstId, positioned) {
       bitmap.push(positioned[i]);
     }
   }
-  if (bitmap.length) drawBitmapGlyphRuns(app, op, srcId, dstId, bitmap, policy);
-  if (vector) drawVectorGlyphRuns(app, op, srcId, dstId, vector);
+  if (bitmap.length) drawBitmapGlyphRuns(app, op, srcId, dstId, bitmap, policy, bounds);
+  if (vector) drawVectorGlyphRuns(app, op, srcId, dstId, vector, bounds);
 }
 
-function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy) {
+/**
+ * Whether a glyph whose origin is at (x, y) can put any ink inside `bounds`,
+ * give or take two ems — no glyph reaches further from its origin than that,
+ * swashes and all.
+ *
+ * Not only a saving: the glyphs of a line wider than 32767 device pixels —
+ * a minified file in a code editor, a long label in a narrow cell — have
+ * origins no request can carry. CompositeGlyphs places its first glyph and
+ * every element after it in 16-bit coordinates, and the vector path's trap
+ * mask would span the whole line, so drawing such a line threw a RangeError
+ * out of the paint however little of it was on screen. What is left after
+ * the cull sits inside a surface, and every coordinate in it fits.
+ */
+function visibleGlyph(bounds, x, y, size) {
+  if (bounds === null) return true;
+  const reach = size * 2;
+  return (
+    x + reach > bounds.x &&
+    x - reach < bounds.x + bounds.w &&
+    y + reach > bounds.y &&
+    y - reach < bounds.y + bounds.h
+  );
+}
+
+function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy, bounds) {
   const Render = app.display.Render;
   const items = [];
   let bits = 8;
@@ -608,6 +635,7 @@ function drawBitmapGlyphRuns(app, op, srcId, dstId, positioned, policy) {
     if (page.bits > bits) bits = page.bits;
   }
   for (const pos of positionGlyphs(positioned)) {
+    if (!visibleGlyph(bounds, pos.x, pos.y, pos.run.size)) continue;
     const page = pages.get(pos.run);
     const e = page.entry(pos.glyph.id);
     items.push({ gs: e.gs, lid: e.lid, adv: e.adv, x: pos.x, y: pos.y });
@@ -646,7 +674,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) {
+function drawVectorGlyphRuns(app, op, srcId, dstId, positioned, bounds = null) {
   // unrounded glyph origins + ink bounding box
   const placed = [];
   let minX = Infinity;
@@ -657,6 +685,7 @@ function drawVectorGlyphRuns(app, op, srcId, dstId, positioned) {
       const gx = cursor + g.dx;
       const gy = y - g.dy;
       cursor += g.ax;
+      if (!visibleGlyph(bounds, gx, gy, run.size)) continue;
       const e = run.font.glyphExtents(g.id, run.size);
       if (!Number.isFinite(e.minX) || e.maxX <= e.minX) continue; // blank glyph
       placed.push({ run, glyph: g, x: gx, y: gy });

package/package.json

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