ntk 8.1.0 → 8.2.0

package/lib/renderingcontext_2d.js

@@ -52,6 +52,8 @@ import {
   compositeTraps,
   drawGlyphRuns,
   encodeGlyphItems,
+  positionedRunsInk,
+  runId,
 } from "./text/glyphs.js";
 import { TextLayout } from "./text/layout.js";
 import { reorderRuns } from "./text/shape.js";
@@ -1099,6 +1101,110 @@ class RenderingContext2d {
     );
   }
 
+  /**
+   * The shadow of positioned glyph runs, cached — what `drawGlyphs`, and
+   * therefore every `TextLayout.draw`, casts (issue #283).
+   *
+   * A paragraph gets **one** coverage surface, not one per line: the runs
+   * already carry their own baselines, so they all go into the same surface
+   * exactly as they all go into the same glyph composite. Nothing is
+   * re-shaped — the caller handed us the runs, which is why this path is
+   * cheaper than `_shadowOfText`, not dearer.
+   *
+   * The cached copy is position-independent, as `fillText`'s is: geometry is
+   * stored relative to the first run's origin and the composite carries it
+   * to wherever the text is drawn. The key is that relative geometry plus
+   * the identity of each run, so the same string laid out to two widths —
+   * same runs, different line origins — is two shadows, and re-drawing one
+   * layout is one lookup no matter how many glyphs are in it.
+   *
+   * @param {Array<{run, x, y, textRendering?}>} positioned device-space runs
+   */
+  _shadowOfGlyphs(positioned) {
+    if (!positioned.length) return;
+    const app = this.window.app;
+    const policy = shadowPolicyOf(app);
+    const sigma = shadowSigma(this._shadowBlur, policy);
+    const reach = shadowReach(sigma);
+
+    // Run origins relative to the first, rounded: whole-pixel offsets are
+    // what the bitmap glyph path draws at anyway, and they keep the key
+    // stable as the paragraph moves — `(x + a) - (x + b)` is not exactly
+    // `a - b` in floating point, and an origin-dependent key would miss the
+    // cache on every scroll.
+    const ax = positioned[0].x;
+    const ay = positioned[0].y;
+    const local = positioned.map((p) => ({
+      run: p.run,
+      x: Math.round(p.x - ax),
+      y: Math.round(p.y - ay),
+      textRendering: p.textRendering,
+    }));
+    const key = `${local
+      .map((p) => `${runId(p.run)},${p.x},${p.y},${p.textRendering ?? ""}`)
+      .join("\u0000")}\u0000${sigma}`;
+
+    let ink = null;
+    const surface = cachedShadow(app, key, () => {
+      ink = positionedRunsInk(local);
+      if (!ink) return null; // a line of spaces inks nothing
+      const box = {
+        x: Math.floor(ink.minX) - 1 - reach,
+        y: Math.floor(ink.minY) - 1 - reach,
+      };
+      box.w = Math.ceil(ink.maxX) + 1 + reach - box.x;
+      box.h = Math.ceil(ink.maxY) + 1 + reach - box.y;
+      if (box.w * box.h > policy.maxPixels) return null;
+      let coverage = new Surface(app, {
+        width: box.w,
+        height: box.h,
+        format: "a8",
+      });
+      coverage.render((sctx) => {
+        this._loadShadowState(sctx, 0, 0);
+        // the origins are already device-space and placed by hand
+        sctx._m = [1, 0, 0, 1, 0, 0];
+        sctx._drawGlyphsDevice(
+          this.Render.PictOp.Over,
+          sctx._backgroundPicture,
+          local.map((p) => ({ ...p, x: p.x - box.x, y: p.y - box.y })),
+        );
+      });
+      if (sigma > 0) coverage = blurCoverage(coverage, sigma);
+      // where the anchor sits inside the surface — whole pixels, so the
+      // composite below can carry it anywhere
+      coverage._shadowOrigin = { x: -box.x, y: -box.y };
+      return coverage;
+    });
+    if (surface) {
+      const origin = surface._shadowOrigin;
+      this._paintShadow(
+        surface,
+        Math.round(ax + this._shadowOffsetX) - origin.x,
+        Math.round(ay + this._shadowOffsetY) - origin.y,
+      );
+      return;
+    }
+    if (!ink) return;
+    // Padded ink larger than a shadow surface may be: fall back to the
+    // clipped, uncached path, which sizes itself to the part of the shadow
+    // that can actually be seen — the same escape `_shadowOfText` takes.
+    this._shadowOfDrawing(
+      {
+        minX: ax + ink.minX,
+        maxX: ax + ink.maxX,
+        minY: ay + ink.minY,
+        maxY: ay + ink.maxY,
+      },
+      (sctx, dx, dy) =>
+        sctx._drawGlyphsDevice(
+          this.Render.PictOp.Over,
+          sctx._backgroundPicture,
+          positioned.map((p) => ({ ...p, x: p.x + dx, y: p.y + dy })),
+        ),
+    );
+  }
+
   /** the shadow of a `fill()`/`stroke()`-shaped call, from its arguments */
   _shadowOfPath(args, stroke) {
     if (stroke) {
@@ -2131,7 +2237,9 @@ class RenderingContext2d {
    * @param {Picture} src source picture the glyphs paint with — a solid
    *   (`ctx.createSolidPicture(r, g, b, a)`, premultiplied 0..1) or a gradient
    * @param {Array<{run, x, y, textRendering?}>} positioned runs in visual
-   *   order; `x`/`y` is the run's baseline origin in device space. `run` is
+   *   order; `x`/`y` is the run's baseline origin in **user space** — the
+   *   current transform applies to it, as it does to every other drawing
+   *   call. `run` is
    *   `{ font, size, glyphs }` — a `Font`, a pixel size, and glyphs
    *   `{ id, ax, dx, dy }` in drawing order: `id` a font glyph id
    *   (`Font.shape()`'s `glyphs[].id`, or `Font.glyphIdFor(cp)`), `ax` the
@@ -2142,6 +2250,39 @@ class RenderingContext2d {
    *   (`codePoints`, `width`, …) are ignored. `textRendering` optionally
    *   overrides the bitmap/vector routing per run (docs/text.md).
    *
+   * The transform moves each run's origin, exactly as `fillText` moves its
+   * anchor; the glyphs themselves are not rotated or scaled by it (size the
+   * font via `ctx.font`, or `run.size`, instead). Advances and `dx`/`dy` are
+   * therefore device pixels on both calls. Without this, a `TextLayout`
+   * drawn into a translated context — which is every react-x11 canvas that
+   * is not at the window's origin — landed at the untransformed coordinates
+   * and was then cut by the clip, while the neighbouring `fillRect` and
+   * `drawImage` moved (issue #280).
+   *
+   * The shadow state applies too, as it does to `fillText`: one blurred
+   * coverage surface for the whole call, cached on the runs' identity and
+   * relative positions, painted under the glyphs (issue #283). A paragraph
+   * whose spans change colour draws as several calls, and — as several
+   * `fillText`s would — casts a shadow per call.
+   */
+  drawGlyphs(op, src, positioned) {
+    const m = this._m;
+    if (!matIsIdentity(m)) {
+      positioned = positioned.map((p) => {
+        const [x, y] = matApply(m, p.x, p.y);
+        return { ...p, x, y };
+      });
+    }
+    if (this._shadowed()) this._shadowOfGlyphs(positioned);
+    this._drawGlyphsDevice(op, src, positioned);
+  }
+
+  /**
+   * `drawGlyphs` with the origins already in device space — the primitive
+   * under it, for callers that place glyphs themselves (`fillText`, which
+   * has to add the alignment and baseline offsets *after* the transform,
+   * because glyph advances are device pixels).
+   *
    * 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
@@ -2150,7 +2291,7 @@ class RenderingContext2d {
    * through the result — the same shape as _fillPolys. A rectangular clip
    * takes the server-side fast path below instead of the mask.
    */
-  drawGlyphs(op, src, positioned) {
+  _drawGlyphsDevice(op, src, positioned) {
     const app = this.window.app;
     const R = this.Render;
     if (!prepareStyle(src, this._m)) return;
@@ -3314,7 +3455,9 @@ class RenderingContext2d {
       });
       cursor += run.width;
     }
-    this.drawGlyphs(
+    // already device space: the anchor went through the matrix above, and
+    // the offsets and advances added to it are device pixels
+    this._drawGlyphsDevice(
       this.Render.PictOp.Over,
       this._backgroundPicture,
       positioned,

package/lib/text/glyphs.js

@@ -225,6 +225,67 @@ export function positionGlyphs(positioned) {
   return out;
 }
 
+/**
+ * Ink extents of positioned runs, in whatever coordinates their origins are
+ * given in — the union of every glyph's bounding box, laid out exactly as
+ * `positionGlyphs` lays it out (pen at `x`, glyph at `pen + dx`, `y - dy`,
+ * pen advanced by `ax`).
+ *
+ * Returns `null` when nothing inks: a run of spaces has extents but no
+ * bounding box, and neither does an empty array. Blank glyphs report an
+ * empty `cbox` (`minX` infinite), which the comparisons below drop on their
+ * own.
+ *
+ * This is what sizes a glyph shadow's coverage surface — the run-shaped
+ * counterpart of the context's `_shapedInk`, which measures one shaped
+ * string from its own origin.
+ *
+ * @param {Array<{run, x, y}>} positioned
+ * @returns {{minX: number, minY: number, maxX: number, maxY: number}|null}
+ */
+export function positionedRunsInk(positioned) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const { run, x, y } of positioned) {
+    let cursor = x;
+    for (const g of run.glyphs) {
+      const e = run.font.glyphExtents(g.id, run.size);
+      const gx = cursor + g.dx;
+      const gy = y - g.dy;
+      cursor += g.ax;
+      if (gx + e.minX < minX) minX = gx + e.minX;
+      if (gx + e.maxX > maxX) maxX = gx + e.maxX;
+      if (gy + e.minY < minY) minY = gy + e.minY;
+      if (gy + e.maxY > maxY) maxY = gy + e.maxY;
+    }
+  }
+  return minX <= maxX && minY <= maxY ? { minX, minY, maxX, maxY } : null;
+}
+
+// Identity, not content, for anything that wants to name a run cheaply.
+// A shaped run is immutable and shared — the shaping memo hands the same
+// object back, and a TextLayout holds on to the ones its lines are made of
+// — so a small integer per object is a complete name for the glyphs in it,
+// bought at O(1) instead of O(glyphs). Weak, so naming a run keeps nothing
+// alive.
+const runIds = new WeakMap();
+let nextRunId = 0;
+
+/**
+ * A stable small integer for one run object, for cache keys that would
+ * otherwise have to serialize its glyphs. Runs built fresh on every draw
+ * (rather than kept, as a `TextLayout` keeps them) get a fresh id each time
+ * and so never hit such a cache — which is the honest answer, since nothing
+ * cheap can tell them apart.
+ */
+export function runId(run) {
+  let id = runIds.get(run);
+  if (id === undefined) runIds.set(run, (id = ++nextRunId));
+  return id;
+}
+
 /**
  * Decide how a (face, size) renders: cached bitmap glyphs or per-draw
  * trapezoids. See DEFAULT_TEXT_POLICY for the reasoning; the middle band

package/lib/text/layout.js

@@ -468,9 +468,21 @@ export class TextLayout {
   }
 
   /**
-   * Draw onto a 2d context at (x, y) = top-left of the layout box.
+   * Draw onto a 2d context at (x, y) = top-left of the layout box, in the
+   * context's **user space**: the current transform applies to the origin,
+   * the same way it applies to `fillText`, `fillRect` and `drawImage`, so a
+   * paragraph drawn into a translated context lands where the rest of the
+   * drawing does (issue #280). The glyphs themselves are not rotated or
+   * scaled by it — set the span size instead.
+   *
    * Span `color`s override the context fillStyle; consecutive same-color
    * runs are batched into single CompositeGlyphs requests.
+   *
+   * `caretPosition`/`indexAt` and the line/run geometry speak the same
+   * layout-relative coordinates as the (x, y) here, so hit testing stays
+   * `layout.indexAt(px - x, py - y)` — with (px, py) in user space too,
+   * which for a pointer event under a transformed context means undoing
+   * `ctx.getTransform()` first.
    */
   draw(ctx, x = 0, y = 0) {
     const app = ctx.window.app;
@@ -484,8 +496,9 @@ export class TextLayout {
     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)
+      // via the context so the clip and the transform are applied
+      // (drawGlyphRuns composites straight onto the picture and can see
+      // neither)
       if (typeof ctx.drawGlyphs === 'function') {
         ctx.drawGlyphs(Render.PictOp.Over, src, batch);
       } else {

package/package.json

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