ntk 3.5.0 → 3.5.1

package/lib/renderingcontext_2d.js

@@ -736,6 +736,34 @@ 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;
+    }
+    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() {
@@ -928,8 +956,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

@@ -334,7 +334,13 @@ export class TextLayout {
       const flush = () => {
         if (batch.length === 0) return;
         const src = batchColor ? ctx._stylePicture(batchColor) : ctx._backgroundPicture;
-        drawGlyphRuns(app, Render.PictOp.Over, src.id, ctx.picture.id, batch);
+        // 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) {

package/package.json

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