ntk 6.6.1 → 7.0.0

package/lib/renderingcontext_2d.js

@@ -13,6 +13,7 @@ import {
 } from "./imagedata.js";
 import {
   Path2D,
+  arcSegmentCount,
   flattenPath,
   transformCommands,
   ellipseSegments,
@@ -25,7 +26,24 @@ import {
 import Picture from "./picture.js";
 import Pixmap from "./pixmap.js";
 import { routeRaster } from "./rasterize.js";
-import { compositeTraps, drawGlyphRuns } from "./text/glyphs.js";
+import {
+  BL,
+  BR,
+  TL,
+  TR,
+  cornerKey,
+  countShapeHit,
+  countShapeMiss,
+  getShapeGlyphPage,
+  roundRectBandRects,
+  shapePolicyOf,
+  trimShapeGlyphs,
+} from "./shapeglyphs.js";
+import {
+  compositeTraps,
+  drawGlyphRuns,
+  encodeGlyphItems,
+} from "./text/glyphs.js";
 import { TextLayout } from "./text/layout.js";
 import { reorderRuns } from "./text/shape.js";
 import { trapezoidize } from "./trapezoid.js";
@@ -245,6 +263,10 @@ class RenderingContext2d {
 
     this._path = new Path2D();
     this._m = [1, 0, 0, 1, 0, 0];
+    // Rounded-rect fast-path observability (issue #211): every bail-out is
+    // a silent perf cliff, so hits and misses-by-reason are always counted.
+    // NTK_DEBUG_SHAPES=1 prints the process-wide aggregate at exit.
+    this.shapeStats = { hits: 0, misses: {} };
     this._stack = [];
     this._clips = []; // [{ polys, rule }] in device space, already stacked
     this._gco = "source-over";
@@ -653,7 +675,28 @@ class RenderingContext2d {
   roundRect(x, y, w, h, radii) {
     const tmp = new Path2D();
     tmp.roundRect(x, y, w, h, radii);
+    const wasEmpty = this._path._cmds.length === 0;
     this._path.addPath(tmp, this._m);
+    // Re-derive the recognition tag in device space (addPath cleared it): it
+    // survives only when this roundRect is the whole path and the CTM is a
+    // pure translation at record time — the default path bakes the transform
+    // into its commands here, so this is the last moment the box exists.
+    if (!tmp._roundRect || !wasEmpty) return;
+    const m = this._m;
+    if (m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1) {
+      const t = tmp._roundRect;
+      this._path._roundRect = {
+        x: t.x + m[4],
+        y: t.y + m[5],
+        w: t.w,
+        h: t.h,
+        radii: t.radii,
+      };
+    } else {
+      // a box recorded under rotation/scale can never take the glyph route;
+      // leave the reason behind so fill()/stroke() count the bail-out
+      this._path._roundRectMiss = "transform";
+    }
   }
 
   // args: ([path], [fillRule]) — returns device-space polys + rule
@@ -933,12 +976,29 @@ class RenderingContext2d {
     const thickness = this.lineWidth * scale;
     const roundCap = this.lineCap === "round";
     const roundJoin = this.lineJoin === "round";
+    const cap = LINE_CAP[this.lineCap] || "butt";
+    const join = LINE_JOIN[this.lineJoin] || "miter";
     const stroke = extrudePolyline({
       thickness,
-      cap: LINE_CAP[this.lineCap] || "butt",
-      join: LINE_JOIN[this.lineJoin] || "miter",
+      cap,
+      join,
       miterLimit: this.miterLimit,
     });
+    // A closed subpath has no ends, so the canvas spec gives it no caps.
+    // That cannot share the extruder above: with lineCap 'square'
+    // extrude-polyline pushes the first and last points outward along the
+    // line, which on a closed loop extends the seam over band it already
+    // covers — invisible against an opaque colour, a double-blended edge
+    // against a translucent one.
+    const closedStroke =
+      cap === "butt"
+        ? stroke
+        : extrudePolyline({
+            thickness,
+            cap: "butt",
+            join,
+            miterLimit: this.miterLimit,
+          });
     // dash distances are user-space lengths; scale them like the line width
     const dash = this._lineDash.length
       ? this._lineDash.map((d) => d * scale)
@@ -952,7 +1012,12 @@ class RenderingContext2d {
     // cap, and a disk at an interior vertex fills the bevel notch
     let hasRound = false;
     const r = thickness / 2;
-    const diskSegs = Math.max(8, Math.min(32, Math.ceil(r * 2)));
+    // A disk is an arc like any other: the sagitta formula sizes it to the
+    // flatness tolerance instead of a floor of 8 (which spent 16 triangles
+    // on the half-pixel cap of a 1px line) and a ceiling of 32 (which was
+    // coarse enough to show on a fat one). Three is the fewest that
+    // enclose any area at all.
+    const diskSegs = Math.max(3, arcSegmentCount(2 * Math.PI, r));
     const addDisk = (x, y) => {
       hasRound = true;
       let ex = x + r;
@@ -988,18 +1053,35 @@ class RenderingContext2d {
         return;
       }
       if (pts.length < 2) return;
-      const mesh = stroke.build(pts);
+      if (closed && pts.length >= 3) {
+        // Move the seam to the middle of the first edge. extrude-polyline
+        // treats every polyline as open — it butt-extrudes both ends and
+        // emits no join between them — so a closed loop lost the join at
+        // whichever vertex it happened to start on: a stroked rectangle
+        // came out with three square corners and a notched one, the notch
+        // being a quarter of the line width square. Cutting the loop in
+        // the middle of a straight edge instead leaves the two ends
+        // collinear, so they meet exactly, and makes every real vertex
+        // interior, so extrude-polyline gives each the join it asked for
+        // — miter, bevel and round alike.
+        const mid = [
+          (pts[0][0] + pts[1][0]) / 2,
+          (pts[0][1] + pts[1][1]) / 2,
+        ];
+        pts = [mid, ...pts.slice(1), mid];
+      }
+      const mesh = (closed ? closedStroke : stroke).build(pts);
       for (const tri of mesh.cells) {
         for (let i = 0; i < 3; ++i) {
           tris.push(mesh.positions[tri[i]][0], mesh.positions[tri[i]][1]);
         }
       }
       if (roundJoin) {
+        // every real vertex is interior now, the seam included: a closed
+        // run was rotated to break at a collinear point, which needs no
+        // join disk of its own
         for (let i = 1; i < pts.length - 1; i++)
           maybeJoinDisk(pts[i - 1], pts[i], pts[i + 1]);
-        // the seam of a closed loop is a join too (pts[0] === pts[last])
-        if (closed && pts.length > 2)
-          maybeJoinDisk(pts[pts.length - 2], pts[0], pts[1]);
       }
       if (roundCap && !closed) {
         addDisk(pts[0][0], pts[0][1]);
@@ -1428,17 +1510,34 @@ class RenderingContext2d {
   }
 
   strokeRect(x, y, w, h) {
+    const m = this._m;
+    if (m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1) {
+      const zero = { x: 0, y: 0 };
+      const box = {
+        x: x + m[4],
+        y: y + m[5],
+        w,
+        h,
+        radii: [zero, zero, zero, zero],
+      };
+      if (this._tryStrokeBox(box)) return;
+    } else {
+      this._shapeMiss("transform");
+    }
     const tmp = new Path2D();
     tmp.rect(x, y, w, h);
     this._strokePolys(flattenPath(tmp._cmds, this._m));
   }
 
   fill(...args) {
+    if (this._tryRoundRectFill(args)) return;
     const { polys, rule } = this._polysFor(args);
     this._fillPolys(polys, rule);
   }
 
   stroke(...args) {
+    const box = this._shapeBoxFor(args);
+    if (box && this._tryStrokeBox(box)) return;
     const polys =
       args[0] instanceof Path2D
         ? flattenPath(args[0]._cmds, this._m)
@@ -1446,6 +1545,357 @@ class RenderingContext2d {
     this._strokePolys(polys);
   }
 
+  // ------------------------------------------------------------------
+  // rounded-rect fast path (issue #211)
+  //
+  // A fill/stroke of an axis-aligned rounded rect on integer geometry is
+  // emitted as corner glyphs + FillRectangles — the box's only curved ink
+  // rides the glyph path, cached server-side after first use, and nothing
+  // is rasterized or uploaded afterwards. The pieces partition the pixels
+  // (glyphs own their integer-cut corner boxes, rects the strips between),
+  // so translucent colours are safe with no mask and no accumulation. Every
+  // condition below that fails falls through to the polygon route untouched,
+  // counting the reason in `shapeStats`.
+
+  /** count one fast-path bail-out; always returns false for tail-calling */
+  _shapeMiss(reason) {
+    const misses = this.shapeStats.misses;
+    misses[reason] = (misses[reason] || 0) + 1;
+    countShapeMiss(reason);
+    return false;
+  }
+
+  /**
+   * The device-space rounded-rect a fill/stroke argument list describes, or
+   * null. The default path carries its tag in device space already (recorded
+   * under a translate-only CTM); a Path2D argument is user-space, so the CTM
+   * must be translate-only *now*.
+   */
+  _shapeBoxFor(args) {
+    const path = args[0] instanceof Path2D ? args[0] : this._path;
+    const tag = path._roundRect;
+    if (path === this._path) {
+      if (tag) return tag;
+      // a roundRect that could not be tagged at record time left the reason
+      if (path._roundRectMiss) this._shapeMiss(path._roundRectMiss);
+      return null;
+    }
+    if (!tag) return null;
+    const m = this._m;
+    if (!(m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1)) {
+      this._shapeMiss("transform");
+      return null;
+    }
+    return {
+      x: tag.x + m[4],
+      y: tag.y + m[5],
+      w: tag.w,
+      h: tag.h,
+      radii: tag.radii,
+    };
+  }
+
+  /** premultiplied solid colour with globalAlpha folded in — scaling all
+   * four components of a premultiplied colour is exactly what compositing
+   * it at that opacity means */
+  _foldedColor(style) {
+    const c = parseColor(style);
+    const a = this.globalAlpha;
+    return a >= 1 ? c : [c[0] * a, c[1] * a, c[2] * a, c[3] * a];
+  }
+
+  _tryRoundRectFill(args) {
+    const box = this._shapeBoxFor(args);
+    if (!box) return false;
+    // maxRadius <= 0 is the documented off switch (NTK_NO_SHAPE_GLYPHS
+    // sets it too): everything falls through, including zero-radius boxes
+    const policy = shapePolicyOf(this.window.app);
+    if (policy.maxRadius <= 0) return this._shapeMiss("radius-cap");
+    // (a rounded rect is one simple closed curve, so the fill rule cannot
+    // change what it covers — the rule argument needs no inspection)
+    if (!isPlainColor(this._fillStyle)) return this._shapeMiss("gradient");
+    if (this._gco !== "source-over") return this._shapeMiss("composite-op");
+    const clip = this._clips.length ? this._clipRect() : null;
+    if (this._clips.length && !clip) return this._shapeMiss("clip-mask");
+
+    const { x, y, w, h, radii } = box;
+    if (
+      !Number.isInteger(x) ||
+      !Number.isInteger(y) ||
+      !Number.isInteger(w) ||
+      !Number.isInteger(h)
+    ) {
+      return this._shapeMiss("fractional");
+    }
+    for (const r of radii) {
+      if (!Number.isInteger(r.x) || !Number.isInteger(r.y))
+        return this._shapeMiss("fractional");
+      if (r.x > policy.maxRadius || r.y > policy.maxRadius)
+        return this._shapeMiss("radius-cap");
+    }
+    // wire coordinates are INT16, and glyph position deltas too
+    if (
+      x < -32768 ||
+      y < -32768 ||
+      x + w > 32767 ||
+      y + h > 32767 ||
+      w > 32767 ||
+      h > 32767
+    ) {
+      return this._shapeMiss("geometry");
+    }
+    const [tl, tr, br, bl] = radii;
+    // effective corner boxes — a corner with either radius 0 is square
+    const c = {
+      tlw: tl.x && tl.y ? tl.x : 0,
+      tlh: tl.x && tl.y ? tl.y : 0,
+      trw: tr.x && tr.y ? tr.x : 0,
+      trh: tr.x && tr.y ? tr.y : 0,
+      blw: bl.x && bl.y ? bl.x : 0,
+      blh: bl.x && bl.y ? bl.y : 0,
+      brw: br.x && br.y ? br.x : 0,
+      brh: br.x && br.y ? br.y : 0,
+    };
+    // diagonally opposite corner boxes must not overlap or the partition
+    // would paint pixels twice (same-edge pairs are bounded by the radii
+    // normalization, but the diagonal is not)
+    if (
+      (c.tlw + c.brw > w && c.tlh + c.brh > h) ||
+      (c.trw + c.blw > w && c.trh + c.blh > h)
+    ) {
+      return this._shapeMiss("geometry");
+    }
+    if (this.globalAlpha <= 0 || w <= 0 || h <= 0) {
+      // nothing to draw — and the fallback would draw nothing too
+      countShapeHit();
+      this.shapeStats.hits++;
+      return true;
+    }
+
+    const corners = [];
+    if (c.tlw) {
+      corners.push({
+        key: cornerKey("fill", c.tlw, c.tlh, 0, TL),
+        kind: "fill", rx: c.tlw, ry: c.tlh, bw: 0, corner: TL,
+        px: x, py: y,
+      });
+    }
+    if (c.trw) {
+      corners.push({
+        key: cornerKey("fill", c.trw, c.trh, 0, TR),
+        kind: "fill", rx: c.trw, ry: c.trh, bw: 0, corner: TR,
+        px: x + w - c.trw, py: y,
+      });
+    }
+    if (c.blw) {
+      corners.push({
+        key: cornerKey("fill", c.blw, c.blh, 0, BL),
+        kind: "fill", rx: c.blw, ry: c.blh, bw: 0, corner: BL,
+        px: x, py: y + h - c.blh,
+      });
+    }
+    if (c.brw) {
+      corners.push({
+        key: cornerKey("fill", c.brw, c.brh, 0, BR),
+        kind: "fill", rx: c.brw, ry: c.brh, bw: 0, corner: BR,
+        px: x + w - c.brw, py: y + h - c.brh,
+      });
+    }
+    const rects = roundRectBandRects(x, y, w, h, c);
+    this._emitShapeGlyphs(corners, rects, this._foldedColor(this._fillStyle), clip);
+    return true;
+  }
+
+  /**
+   * Stroke fast path for a device-space box (from a roundRect tag or
+   * strokeRect). Beyond the fill's conditions: uniform lineWidth, no
+   * dashes — and the half-pixel one that matters: the stroke band must land
+   * on pixel boundaries. A border drawn the correct way (path inset by bw/2,
+   * so the band [X, X+bw] sits on integers) passes at any width, odd or even;
+   * a 1px stroke on integer path coordinates is genuinely a two-row 50% band
+   * and must keep falling back, because the fast path would not reproduce it.
+   */
+  _tryStrokeBox(box) {
+    // the same off switch as the fill's — see _tryRoundRectFill
+    const policy = shapePolicyOf(this.window.app);
+    if (policy.maxRadius <= 0) return this._shapeMiss("radius-cap");
+    if (!isPlainColor(this._strokeStyle)) return this._shapeMiss("gradient");
+    if (this._gco !== "source-over") return this._shapeMiss("composite-op");
+    if (this._lineDash.length) return this._shapeMiss("dashes");
+    const clip = this._clips.length ? this._clipRect() : null;
+    if (this._clips.length && !clip) return this._shapeMiss("clip-mask");
+
+    const bw = this.lineWidth;
+    if (!Number.isFinite(bw) || bw <= 0) return this._shapeMiss("geometry");
+    const { x, y, w, h, radii } = box;
+    if (!(w > 0 && h > 0)) return this._shapeMiss("geometry");
+    // one circular radius for all four corners: the ring glyph is keyed on
+    // a single (r, bw) and mixed or elliptical corners fall back
+    const r0 = radii[0];
+    for (const r of radii) {
+      if (r.x !== r0.x || r.y !== r0.y) return this._shapeMiss("radii-mix");
+    }
+    if (r0.x !== r0.y) return this._shapeMiss("radii-mix");
+    const r = r0.x;
+
+    const X0 = x - bw / 2; // outer band corner
+    const Y0 = y - bw / 2;
+    const W = w + bw; // outer band size
+    const H = h + bw;
+    // What the route needs is that the *ink* is pixel-aligned: the band's
+    // four outer edges on integers, which is what the four tests below say,
+    // and an integer width so the straight runs are whole rows and columns
+    // of FillRectangles (fractional extents would be truncated on the wire —
+    // and a fractional lineWidth passes the outer-band tests, e.g. x = 0.75
+    // with bw = 1.5, so this clause carries real weight).
+    //
+    // The *path* radius is free. The corner glyph box is cut at
+    // K = ceil(r + bw/2), and from the arc's tangent point out to that cut
+    // the band is already its own straight continuation — bw whole rows —
+    // so a fractional radius rides inside the glyph, which rasterizes on the
+    // device pixel grid, exactly as it does on the polygon route. This is
+    // what a border inset by bw/2 needs: nesting inside a background corner
+    // of radius R means a path radius of R - bw/2, half-integer for every
+    // odd width (issue #217).
+    if (
+      !Number.isInteger(X0) ||
+      !Number.isInteger(Y0) ||
+      !Number.isInteger(W) ||
+      !Number.isInteger(H) ||
+      !Number.isInteger(bw)
+    ) {
+      return this._shapeMiss("fractional");
+    }
+    if (
+      X0 < -32768 ||
+      Y0 < -32768 ||
+      X0 + W > 32767 ||
+      Y0 + H > 32767 ||
+      W > 32767 ||
+      H > 32767
+    ) {
+      return this._shapeMiss("geometry");
+    }
+    if (this.globalAlpha <= 0) {
+      countShapeHit();
+      this.shapeStats.hits++;
+      return true;
+    }
+    const color = this._foldedColor(this._strokeStyle);
+
+    if (r === 0) {
+      // square corners lower to four FillRectangles with no glyphs at all —
+      // but only when the miter join actually squares them (the default);
+      // bevel or round corners look different and keep the polygon route
+      if (this.lineJoin !== "miter" || this.miterLimit < Math.SQRT2)
+        return this._shapeMiss("join");
+      if (W < 2 * bw || H < 2 * bw) return this._shapeMiss("geometry");
+      const rects = [X0, Y0, W, bw, X0, Y0 + H - bw, W, bw];
+      if (H > 2 * bw) {
+        rects.push(X0, Y0 + bw, bw, H - 2 * bw);
+        rects.push(X0 + W - bw, Y0 + bw, bw, H - 2 * bw);
+      }
+      this._emitShapeGlyphs([], rects, color, clip);
+      return true;
+    }
+
+    // a border thicker than the corner radius swallows the arc's centre;
+    // the ring glyph does not model that, so it stays on the polygon route
+    if (r - bw / 2 < 0) return this._shapeMiss("geometry");
+    const K = Math.ceil(r + bw / 2); // corner glyph box, integer cut lines
+    if (K > policy.maxRadius) return this._shapeMiss("radius-cap");
+    if (2 * K > W || 2 * K > H) return this._shapeMiss("geometry");
+
+    const corners = [
+      {
+        key: cornerKey("stroke", r, r, bw, TL),
+        kind: "stroke", rx: r, ry: r, bw, corner: TL,
+        px: X0, py: Y0,
+      },
+      {
+        key: cornerKey("stroke", r, r, bw, TR),
+        kind: "stroke", rx: r, ry: r, bw, corner: TR,
+        px: X0 + W - K, py: Y0,
+      },
+      {
+        key: cornerKey("stroke", r, r, bw, BL),
+        kind: "stroke", rx: r, ry: r, bw, corner: BL,
+        px: X0, py: Y0 + H - K,
+      },
+      {
+        key: cornerKey("stroke", r, r, bw, BR),
+        kind: "stroke", rx: r, ry: r, bw, corner: BR,
+        px: X0 + W - K, py: Y0 + H - K,
+      },
+    ];
+    const rects = [];
+    if (W > 2 * K) {
+      rects.push(X0 + K, Y0, W - 2 * K, bw);
+      rects.push(X0 + K, Y0 + H - bw, W - 2 * K, bw);
+    }
+    if (H > 2 * K) {
+      rects.push(X0, Y0 + K, bw, H - 2 * K);
+      rects.push(X0 + W - bw, Y0 + K, bw, H - 2 * K);
+    }
+    this._emitShapeGlyphs(corners, rects, color, clip);
+    return true;
+  }
+
+  /**
+   * Emit one recognized box: ensure the corner glyphs, one CompositeGlyphs
+   * run for them, one FillRectangles for the strips — inside a server-side
+   * clip rectangle when the clip stack is rectangular (the way glyph runs
+   * for text already do it).
+   */
+  _emitShapeGlyphs(corners, rects, color, clip) {
+    countShapeHit();
+    this.shapeStats.hits++;
+    if (clip && (clip.w === 0 || clip.h === 0)) return; // clipped away
+    const R = this.Render;
+    const app = this.window.app;
+    if (clip) {
+      R.SetPictureClipRectangles(this.picture.id, 0, 0, [
+        clip.x,
+        clip.y,
+        clip.w,
+        clip.h,
+      ]);
+    }
+    if (corners.length) {
+      const page = getShapeGlyphPage(app);
+      page.ensure(corners);
+      const items = [];
+      for (const spec of corners) {
+        items.push({
+          gs: page.glyphset.id,
+          lid: page.entry(spec.key).lid,
+          adv: 0,
+          x: spec.px,
+          y: spec.py,
+        });
+      }
+      const encoded = encodeGlyphItems(items, page.bits);
+      const src = app.solidPicture(color[0], color[1], color[2], color[3]);
+      R.CompositeGlyphs(
+        encoded.bits,
+        R.PictOp.Over,
+        src.id,
+        this.picture.id,
+        0,
+        encoded.gsid,
+        items[0].x,
+        items[0].y,
+        encoded.elts,
+      );
+      trimShapeGlyphs(app);
+    }
+    if (rects.length) {
+      R.FillRectangles(R.PictOp.Over, this.picture.id, color, rects);
+    }
+    if (clip) this._resetPictureClip();
+    this._markDirty();
+  }
+
   /**
    * Intersect the clip region with the given path (or the current path).
    * Cleared by restore() to the state at the matching save() — like the