ntk 3.5.0 → 3.5.2

package/lib/renderingcontext_2d.js

@@ -736,6 +736,47 @@ class RenderingContext2d {
     this._markDirty();
   }
 
+  /**
+   * Composite shaped glyph runs onto this context, honouring the clip.
+   *
+   * CompositeGlyphs writes straight to the destination picture, so it has
+   * no way to consult our clip mask — text drawn through it used to spill
+   * out of clipped boxes while every fill and stroke stayed inside. With a
+   * clip active, render the glyph coverage into the scratch a8 mask
+   * instead, intersect that with the clip, and paint the real source
+   * through the result — the same shape as _fillPolys.
+   */
+  drawGlyphs(op, src, positioned) {
+    const app = this.window.app;
+    const R = this.Render;
+    if (!this.clipMask) {
+      drawGlyphRuns(app, op, src.id, this.picture.id, positioned);
+      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]);
+    // solid white through the glyphs leaves their coverage in the a8 mask
+    drawGlyphRuns(app, R.PictOp.Over, this._glyphSource.id, this.fillMask.id, positioned);
+    R.Composite(R.PictOp.In, this.clipMask.id, 0, this.fillMask.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    R.Composite(op, src.id, this.fillMask.id, this.picture.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    this._markDirty();
+  }
+
   // combined clip ∩ globalAlpha mask for direct composites (rect/image
   // fast paths); returns a picture id or 0. Reuses the fill scratch mask.
   _compositeMask() {
@@ -813,9 +854,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]);
 
@@ -928,8 +1026,7 @@ class RenderingContext2d {
       positioned.push({ run, x: cursor, y: oy });
       cursor += run.width;
     }
-    drawGlyphRuns(app, this.Render.PictOp.Over, this._backgroundPicture.id, this.picture.id, positioned);
-    this._markDirty();
+    this.drawGlyphs(this.Render.PictOp.Over, this._backgroundPicture, positioned);
   }
 
   /**

package/lib/text/layout.js

@@ -328,23 +328,33 @@ export class TextLayout {
   draw(ctx, x = 0, y = 0) {
     const app = ctx.window.app;
     const Render = app.display.Render;
-    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;
+    // 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 = [];
-      };
+      }
+      batch = [];
+    };
+    for (const line of this.lines) {
       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.0",
+  "version": "3.5.2",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",