ntk 8.1.0 → 8.1.1

package/lib/renderingcontext_2d.js

@@ -2131,7 +2131,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 +2144,32 @@ 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).
+   */
+  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 };
+      });
+    }
+    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 +2178,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 +3342,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/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.1.1",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",