ntk 3.7.0 → 3.7.1

package/lib/renderingcontext_2d.js

@@ -17,7 +17,7 @@ import {
 } from './path.js';
 import Picture from './picture.js';
 import Pixmap from './pixmap.js';
-import { drawGlyphRuns } from './text/glyphs.js';
+import { compositeTraps, drawGlyphRuns } from './text/glyphs.js';
 import { TextLayout } from './text/layout.js';
 import { reorderRuns } from './text/shape.js';
 import { trapezoidize } from './trapezoid.js';
@@ -810,6 +810,39 @@ class RenderingContext2d {
     this._markDirty();
   }
 
+  /**
+   * Trapezoid coverage under the clip — `drawGlyphs` for vector shapes that
+   * are already trapezoidized (KaTeX radicals and rules go this way).
+   * Without it they composite straight to the destination picture and spill
+   * out of clipped boxes, which is what glyphs used to do.
+   */
+  drawTraps(op, src, traps) {
+    if (!traps.length) return;
+    const app = this.window.app;
+    const R = this.Render;
+    if (!this.clipMask) {
+      compositeTraps(app, op, src.id, this.picture.id, traps);
+      this._markDirty();
+      return;
+    }
+    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]);
+      compositeTraps(app, op, src.id, this.picture.id, traps);
+      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]);
+    compositeTraps(app, R.PictOp.Over, this._glyphSource.id, this.fillMask.id, traps);
+    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() {

package/lib/widgets/tex.js

@@ -22,7 +22,6 @@ import { parseSvgPath } from '../path.js';
 import { flatten } from '../rasterize.js';
 import { trapezoidize } from '../trapezoid.js';
 import Font from '../text/font.js';
-import { compositeTraps, drawGlyphRuns } from '../text/glyphs.js';
 
 // node builtins are fetched lazily so browser bundles never resolve them;
 // there, inject the assets with configureTex() instead.
@@ -571,7 +570,7 @@ export class TexBox {
       Render.Composite(
         Render.PictOp.Over,
         src.id,
-        ctx.clipMask ? ctx.clipMask.id : 0,
+        ctx._compositeMask(),
         ctx.picture.id,
         Math.round(x + item.x),
         Math.round(base + item.y),
@@ -598,7 +597,9 @@ export class TexBox {
         }
         trapezoidize([clipped], x + item.x, base + item.y, traps);
       }
-      compositeTraps(app, Render.PictOp.Over, src.id, ctx.picture.id, traps);
+      // through the context, so the clip applies — compositing straight to
+      // ctx.picture spills out of scrollviews and clipped boxes
+      ctx.drawTraps(Render.PictOp.Over, src, traps);
     }
 
     // batch every run of the same color into a single CompositeGlyphs
@@ -612,7 +613,7 @@ export class TexBox {
     }
     for (const { color, runs } of byColor.values()) {
       const src = color ? ctx._stylePicture(color) : ctx._backgroundPicture;
-      drawGlyphRuns(app, Render.PictOp.Over, src.id, ctx.picture.id, runs);
+      ctx.drawGlyphs(Render.PictOp.Over, src, runs);
     }
 
     ctx._markDirty();

package/package.json

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