ntk 8.12.0 → 8.12.1

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();
     }
@@ -3009,9 +3058,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 +3097,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 +3126,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 +3680,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/package.json

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