ntk 3.5.1 → 3.5.3

package/lib/renderingcontext_2d.js

@@ -552,6 +552,34 @@ class RenderingContext2d {
    * Core fill: rasterize device-space polys into the scratch a8 mask,
    * scale by globalAlpha, intersect with the clip, composite the source.
    */
+  /**
+   * Device-space bounding box of flattened polys, with a pixel of slack for
+   * the antialiased edge, clamped to the surface. Null when nothing lands
+   * on it.
+   */
+  _polysBBox(polys) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const poly of polys) {
+      const pts = poly.pts;
+      for (let i = 0; i < pts.length; i += 2) {
+        if (pts[i] < minX) minX = pts[i];
+        if (pts[i] > maxX) maxX = pts[i];
+        if (pts[i + 1] < minY) minY = pts[i + 1];
+        if (pts[i + 1] > maxY) maxY = pts[i + 1];
+      }
+    }
+    if (maxX === -Infinity) return null;
+    const x = Math.max(0, Math.floor(minX) - 1);
+    const y = Math.max(0, Math.floor(minY) - 1);
+    const w = Math.min(this.width, Math.ceil(maxX) + 1) - x;
+    const h = Math.min(this.height, Math.ceil(maxY) + 1) - y;
+    if (w <= 0 || h <= 0) return null;
+    return { x, y, w, h };
+  }
+
   _fillPolys(polys, rule, { src = null, op = null, alpha = null } = {}) {
     if (!polys.length) return;
     src = src ?? this._backgroundPicture;
@@ -559,26 +587,31 @@ class RenderingContext2d {
     alpha = alpha ?? this.globalAlpha;
     if (alpha <= 0) return;
 
+    // Everything below is bounded to the shape's bounding box rather than
+    // the whole surface. On the wire it makes no difference — a Composite
+    // request is the same size either way — but it is the difference
+    // between the server touching a 34x34 box and a 400x400 one per fill.
+    // Stale mask content outside the box is never composited, so clearing
+    // only the box is safe.
+    const b = this._polysBBox(polys);
+    if (!b) return;
+    const R = this.Render;
+
     this._ensureFillMask();
-    this.Render.FillRectangles(this.Render.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
+    R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [b.x, b.y, b.w, b.h]);
     this._rasterizePolys(this.fillMask, polys, rule);
 
     if (alpha < 1) {
       // In with a constant color scales the a8 coverage by that alpha
-      this.Render.FillRectangles(this.Render.PictOp.In, this.fillMask.id, [0, 0, 0, alpha], [0, 0, this.width, this.height]);
+      R.FillRectangles(R.PictOp.In, this.fillMask.id, [0, 0, 0, alpha], [b.x, b.y, b.w, b.h]);
     }
     if (this.clipMask) {
-      this.Render.Composite(
-        this.Render.PictOp.In,
-        this.clipMask.id,
-        0,
-        this.fillMask.id,
-        0, 0, 0, 0, 0, 0,
-        this.width,
-        this.height
-      );
+      // clipMask is surface-aligned, so it is sampled at the same offset
+      R.Composite(R.PictOp.In, this.clipMask.id, 0, this.fillMask.id, b.x, b.y, 0, 0, b.x, b.y, b.w, b.h);
     }
-    this.Render.Composite(op, src.id, this.fillMask.id, this.picture.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    // src is either a 1x1 repeating solid (offset irrelevant) or a
+    // surface-aligned gradient, so it is sampled at the same offset too
+    R.Composite(op, src.id, this.fillMask.id, this.picture.id, b.x, b.y, b.x, b.y, b.x, b.y, b.w, b.h);
     this._markDirty();
   }
 
@@ -754,6 +787,19 @@ class RenderingContext2d {
       this._markDirty();
       return;
     }
+    // Fast path: a rectangular clip is something the server can do itself.
+    // Two small requests around the ordinary glyph composite, instead of
+    // clearing and compositing a full-surface a8 mask three times — which
+    // costs the same on the wire but many times the pixel work.
+    const rect = this._clipRect();
+    if (rect) {
+      if (rect.w === 0 || rect.h === 0) return;
+      R.SetPictureClipRectangles(this.picture.id, 0, 0, [rect.x, rect.y, rect.w, rect.h]);
+      drawGlyphRuns(app, op, src.id, this.picture.id, positioned);
+      R.SetPictureClipRectangles(this.picture.id, 0, 0, [0, 0, this.width, this.height]);
+      this._markDirty();
+      return;
+    }
     this._ensureFillMask();
     this._glyphSource ??= this.createSolidPicture(1, 1, 1, 1);
     R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
@@ -841,9 +887,66 @@ class RenderingContext2d {
    * Cleared by restore() to the state at the matching save() — like the
    * browser canvas, there is no other way to widen the clip again.
    */
+  /**
+   * The axis-aligned rectangle a flattened path describes, or null. Clips
+   * in practice are almost always rectangles — a content box, a scroll
+   * viewport, `overflow: hidden` — and a rectangular clip can be pushed
+   * to the server instead of rasterized into a mask.
+   */
+  static _rectOfPolys(polys) {
+    if (polys.length !== 1) return null;
+    const { pts } = polys[0];
+    if (pts.length !== 8) return null;
+    const [x0, y0, x1, y1, x2, y2, x3, y3] = pts;
+    const axis =
+      (y0 === y1 && x1 === x2 && y2 === y3 && x3 === x0) ||
+      (x0 === x1 && y1 === y2 && x2 === x3 && y3 === y0);
+    if (!axis) return null;
+    const xs = [x0, x1, x2, x3];
+    const ys = [y0, y1, y2, y3];
+    const x = Math.min(...xs);
+    const y = Math.min(...ys);
+    const w = Math.max(...xs) - x;
+    const h = Math.max(...ys) - y;
+    if (!(w > 0 && h > 0)) return null;
+    // Server clip rectangles are integers, so a fractional edge could only
+    // be honoured by rounding — which would differ from the mask path's
+    // antialiased edge by up to a pixel. Rare, so leave those to the mask
+    // rather than quietly changing what they look like.
+    const integral = (v) => Math.abs(v - Math.round(v)) < 1e-6;
+    if (![x, y, w, h].every(integral)) return null;
+    return { x: Math.round(x), y: Math.round(y), w: Math.round(w), h: Math.round(h) };
+  }
+
+  /** Intersection of the whole clip stack, or null if any part is not a
+   *  rectangle (or the stack is empty). */
+  _clipRect() {
+    if (!this._clips.length) return null;
+    let out = null;
+    for (const entry of this._clips) {
+      const r = entry.rect;
+      if (!r) return null;
+      if (!out) {
+        out = { ...r };
+        continue;
+      }
+      const x = Math.max(out.x, r.x);
+      const y = Math.max(out.y, r.y);
+      const right = Math.min(out.x + out.w, r.x + r.w);
+      const bottom = Math.min(out.y + out.h, r.y + r.h);
+      out = { x, y, w: Math.max(0, right - x), h: Math.max(0, bottom - y) };
+    }
+    // clamp into the surface: the server rejects out-of-range rectangles
+    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);
+    return { x, y, w, h };
+  }
+
   clip(...args) {
     const { polys, rule } = this._polysFor(args);
-    const entry = { polys, rule };
+    const entry = { polys, rule, rect: RenderingContext2d._rectOfPolys(polys) };
     // copy-on-write: earlier save() snapshots keep their own clip list
     this._clips = this._clips.concat([entry]);
 

package/lib/text/layout.js

@@ -328,29 +328,33 @@ export class TextLayout {
   draw(ctx, x = 0, y = 0) {
     const app = ctx.window.app;
     const Render = app.display.Render;
+    // One batch for the whole layout, not one per line: every positioned
+    // run carries its own absolute baseline, so a uniformly coloured
+    // paragraph becomes a single glyph composite instead of one per line.
+    // Only a colour change forces a flush.
+    let batch = [];
+    let batchColor;
+    const flush = () => {
+      if (batch.length === 0) return;
+      const src = batchColor ? ctx._stylePicture(batchColor) : ctx._backgroundPicture;
+      // via the context so the clip is applied (drawGlyphRuns composites
+      // straight onto the picture and cannot see it)
+      if (typeof ctx.drawGlyphs === 'function') {
+        ctx.drawGlyphs(Render.PictOp.Over, src, batch);
+      } else {
+        drawGlyphRuns(app, Render.PictOp.Over, src.id, ctx.picture.id, batch);
+      }
+      batch = [];
+    };
     for (const line of this.lines) {
-      let batch = [];
-      let batchColor;
-      const flush = () => {
-        if (batch.length === 0) return;
-        const src = batchColor ? ctx._stylePicture(batchColor) : ctx._backgroundPicture;
-        // via the context so the clip mask is applied (drawGlyphRuns
-        // composites straight onto the picture and cannot see it)
-        if (typeof ctx.drawGlyphs === 'function') {
-          ctx.drawGlyphs(Render.PictOp.Over, src, batch);
-        } else {
-          drawGlyphRuns(app, Render.PictOp.Over, src.id, ctx.picture.id, batch);
-        }
-        batch = [];
-      };
       for (const r of line.runs) {
         const color = r.span.color;
         if (batch.length && color !== batchColor) flush();
         batchColor = color;
         batch.push({ run: r.run, x: x + line.x + r.x, y: y + line.baseline });
       }
-      flush();
     }
+    flush();
     ctx._markDirty();
     return this;
   }

package/package.json

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