ntk 8.18.0 → 8.19.0

package/lib/text/layout.js

@@ -916,6 +916,9 @@ export class TextLayout {
   draw(ctx, x = 0, y = 0) {
     const app = ctx.window.app;
     const Render = app.display.Render;
+    // The context's composite op, as `fillText` takes it. A context that is
+    // not ntk's has none to give, and its text goes source-over.
+    const op = ctx._op?.() ?? Render.PictOp.Over;
     // 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.
@@ -929,9 +932,9 @@ export class TextLayout {
       // (drawGlyphRuns composites straight onto the picture and can see
       // neither)
       if (typeof ctx.drawGlyphs === 'function') {
-        ctx.drawGlyphs(Render.PictOp.Over, src, batch);
+        ctx.drawGlyphs(op, src, batch);
       } else {
-        drawGlyphRuns(app, Render.PictOp.Over, src.id, ctx.picture.id, batch);
+        drawGlyphRuns(app, op, src.id, ctx.picture.id, batch);
       }
       batch = [];
     };
@@ -942,7 +945,7 @@ export class TextLayout {
     // height and its font's extent again on either side for ink that
     // overhangs the box, is outside the rows the clip lets through: nothing
     // of it could have landed on a pixel.
-    const rows = visibleRows(ctx, y);
+    const rows = visibleRows(ctx, y, op);
     for (const line of this.lines) {
       if (rows) {
         const reach = line.height + line.ascent + line.descent;
@@ -1493,12 +1496,15 @@ function sliceLevels(key, start, end) {
  * The rows of a layout drawn at `y` that the context can show — its clip's
  * box, or the whole surface with no clip — in the layout's own coordinates.
  * Null where that cannot be said, and the whole layout is drawn: a context
- * that is not ntk's, a transform that is more than a translation, or a
- * shadow, which lands where the text is not.
+ * that is not ntk's, a transform that is more than a translation, a
+ * shadow, which lands where the text is not, or an `op` like `copy` that
+ * clears the box round all the glyphs drawn — a line the clip hides still
+ * widens that box along the rows it does not hide.
  */
-function visibleRows(ctx, y) {
+function visibleRows(ctx, y, op) {
   if (typeof ctx.drawGlyphs !== 'function') return null;
   if (typeof ctx._clipExtents !== 'function') return null;
+  if (typeof ctx._maskBounded === 'function' && !ctx._maskBounded(op)) return null;
   const m = ctx._m;
   if (!m || m[0] !== 1 || m[1] !== 0 || m[2] !== 0 || m[3] !== 1) return null;
   if (typeof ctx._shadowed !== 'function' || ctx._shadowed()) return null;

package/lib/trapezoid.js

@@ -37,7 +37,7 @@ export function trapezoidize(polys, dx = 0, dy = 0, out = [], rule = 'nonzero')
   const evenodd = rule === 'evenodd';
   // collect non-horizontal edges, normalized to y0 < y1 with winding dir
   const edges = [];
-  const ys = [];
+  let ys = [];
   // the largest coordinate magnitude, which sets the rounding noise
   let reach = 1;
   for (const poly of polys) {
@@ -66,14 +66,17 @@ export function trapezoidize(polys, dx = 0, dy = 0, out = [], rule = 'nonzero')
   // coordinate that fits one
   const eps = reach * 2 ** -44;
 
-  ys.sort((a, b) => a - b);
+  // a typed array sorts numerically without a comparator call per step
+  ys = Float64Array.from(ys).sort();
   edges.sort((a, b) => a.y0 - b.y0);
 
   const active = [];
   let nextEdge = 0;
-  // spans open from the previous slab, for vertical merging:
-  // { l: leftEdge, r: rightEdge, at: index of the trap in `out` }
+  // spans open from the previous slab, for vertical merging, and the ones
+  // this slab opens: flat [leftEdge, rightEdge, index of the trap in `out`]
+  // triples, two buffers that trade places every slab
   let prevSpans = [];
+  let spans = [];
 
   for (let yi = 0; yi < ys.length - 1; ++yi) {
     const ya = ys[yi];
@@ -81,25 +84,38 @@ export function trapezoidize(polys, dx = 0, dy = 0, out = [], rule = 'nonzero')
     if (yb === ya) continue;
 
     // update the active edge list for this slab
-    for (let i = active.length - 1; i >= 0; --i) {
-      if (active[i].y1 <= ya) active.splice(i, 1);
+    let kept = 0;
+    for (let i = 0; i < active.length; ++i) {
+      if (active[i].y1 > ya) active[kept++] = active[i];
     }
+    active.length = kept;
     while (nextEdge < edges.length && edges[nextEdge].y0 <= ya) {
       if (edges[nextEdge].y1 > ya) active.push(edges[nextEdge]);
       nextEdge++;
     }
     if (active.length === 0) {
-      prevSpans = [];
+      prevSpans.length = 0;
       continue;
     }
 
     // x at slab top/bottom for each active edge; sort left-to-right just
     // below the top (edges leaving one point go by where they are headed)
-    for (const e of active) {
+    for (let i = 0; i < active.length; ++i) {
+      const e = active[i];
       e.xt = e.x0 + (ya - e.y0) * e.slope;
       e.xb = e.x0 + (yb - e.y0) * e.slope;
     }
-    active.sort((a, b) => a.xt - b.xt || a.xb - b.xb);
+    // a slab holds a handful of edges, mostly in last slab's order: an
+    // insertion sort, stable as Array#sort is, so the order is the same
+    for (let i = 1; i < active.length; ++i) {
+      const e = active[i];
+      let j = i - 1;
+      while (j >= 0 && (active[j].xt - e.xt || active[j].xb - e.xb) > 0) {
+        active[j + 1] = active[j];
+        --j;
+      }
+      active[j + 1] = e;
+    }
 
     // cut the slab at each crossing, top to bottom; `y` is where the part
     // still to emit starts, and `xt` each edge's x there
@@ -121,13 +137,18 @@ export function trapezoidize(polys, dx = 0, dy = 0, out = [], rule = 'nonzero')
         }
       }
       if (k < 0 || yc >= yb - eps) {
-        prevSpans = emitSpans(active, y, yb, true, evenodd, prevSpans, out);
+        emitSpans(active, y, yb, true, evenodd, prevSpans, spans, out);
+        [prevSpans, spans] = [spans, prevSpans];
         break;
       }
       if (yc > y + eps) {
-        for (const e of active) e.xc = e.x0 + (yc - e.y0) * e.slope;
-        prevSpans = emitSpans(active, y, yc, false, evenodd, prevSpans, out);
-        for (const e of active) e.xt = e.xc;
+        for (let i = 0; i < active.length; ++i) {
+          const e = active[i];
+          e.xc = e.x0 + (yc - e.y0) * e.slope;
+        }
+        emitSpans(active, y, yc, false, evenodd, prevSpans, spans, out);
+        [prevSpans, spans] = [spans, prevSpans];
+        for (let i = 0; i < active.length; ++i) active[i].xt = active[i].xc;
         y = yc;
       }
       const a = active[k];
@@ -144,15 +165,16 @@ export function trapezoidize(polys, dx = 0, dy = 0, out = [], rule = 'nonzero')
  * parity for even-odd). Each edge is at `xt` at the top, and at the bottom
  * at `xb` when this is the `last` part of its vertex slab, else at `xc`. A
  * span bounded by the same two edges as one ending at `ya` extends that
- * trapezoid instead.
- * @returns the spans, for the next slab to merge with
+ * trapezoid instead. The spans go into `spans`, emptied first, for the next
+ * slab to merge with.
  */
-function emitSpans(active, ya, yb, last, evenodd, prevSpans, out) {
-  const spans = [];
+function emitSpans(active, ya, yb, last, evenodd, prevSpans, spans, out) {
+  spans.length = 0;
   let winding = 0;
   let crossings = 0;
   let left = null;
-  for (const e of active) {
+  for (let i = 0; i < active.length; ++i) {
+    const e = active[i];
     const wasInside = evenodd ? (crossings & 1) === 1 : winding !== 0;
     winding += e.dir;
     crossings++;
@@ -164,24 +186,24 @@ function emitSpans(active, ya, yb, last, evenodd, prevSpans, out) {
       const rb = last ? e.xb : e.xc;
       // merge with a span from the previous slab bounded by the same edges
       let merged = false;
-      for (const p of prevSpans) {
-        if (p.l === left && p.r === e && out[p.at + 5] === ya) {
-          out[p.at + 3] = lb;
-          out[p.at + 4] = rb;
-          out[p.at + 5] = yb;
-          spans.push(p);
+      for (let p = 0; p < prevSpans.length; p += 3) {
+        const at = prevSpans[p + 2];
+        if (prevSpans[p] === left && prevSpans[p + 1] === e && out[at + 5] === ya) {
+          out[at + 3] = lb;
+          out[at + 4] = rb;
+          out[at + 5] = yb;
+          spans.push(left, e, at);
           merged = true;
           break;
         }
       }
       if (!merged && (e.xt > left.xt || rb > lb)) {
-        spans.push({ l: left, r: e, at: out.length });
+        spans.push(left, e, out.length);
         out.push(left.xt, e.xt, ya, lb, rb, yb);
       }
       left = null;
     }
   }
-  return spans;
 }
 
 /** area covered by a trapezoid list (useful for tests/diagnostics) */

package/package.json

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