ntk 8.12.13 → 8.13.1

package/lib/app.js

@@ -311,6 +311,67 @@ export default class App {
     for (const wnd of Window._cacheFor(this).values()) wnd._adoptDefaultFrameInterval(ms);
   }
 
+  /**
+   * Whether a compositing manager runs on this connection's screen: `true`,
+   * `false`, or `null` until the server has been asked, which the first
+   * window to present does (see docs/window.md "Under a compositor").
+   *
+   * Under one, the window's frames end on the fence and its blits are
+   * CopyArea (`Window#_preferFence`): the compositor already puts the screen
+   * together at the vertical blank, so a present synced to it buys no tearing
+   * a copy would cause, and its clock costs what issue #402 measured — up to
+   * a frame of latency on every change, and on NVIDIA's driver a completion
+   * whose phase drifts across the whole period, so half the frames a late
+   * one owes miss their vblank. Xwayland is the exception (`xwayland`): its
+   * Present clock is the Wayland compositor's frame callback, which is what
+   * stops an occluded window from rendering.
+   *
+   * Followed for the life of the connection, through the `_NET_WM_CM_S`
+   * selection the EWMH has a compositor own, so one started or stopped
+   * while the app runs moves every window to the clock that fits.
+   */
+  get compositing() {
+    if (this._compositorProbe === undefined) this._probeCompositor();
+    return this._compositing ?? null;
+  }
+
+  /** Whether this server is Xwayland, once `compositing` has asked. */
+  get xwayland() {
+    return this._xwayland ?? false;
+  }
+
+  _probeCompositor() {
+    this._compositorProbe = null; // in progress; only ever started once
+    const X = this.X;
+    if (connectionGone(X)) return;
+    const name = '_NET_WM_CM_S0';
+    // Each answer can arrive after the app has closed — a window that
+    // presented once and was torn down at once — and a request made from it
+    // then throws out of the reply dispatch, where no caller can catch it.
+    X.QueryExtension('XWAYLAND', (xwErr, ext) => {
+      this._xwayland = !xwErr && !!ext?.present;
+      if (connectionGone(X)) return;
+      X.InternAtom(false, name, (atomErr, atom) => {
+        if (atomErr || !atom || connectionGone(X)) return;
+        X.GetSelectionOwner(atom, (ownerErr, owner) => {
+          if (ownerErr || connectionGone(X)) return;
+          this._setCompositing(owner !== 0);
+          this.clipboard
+            .watch(name, (ev) => this._setCompositing(ev.reason === 'new-owner' && ev.owner !== 0))
+            .catch(() => {
+              // no XFixes: the state at startup is what windows go by
+            });
+        });
+      });
+    });
+  }
+
+  _setCompositing(on) {
+    if (this._compositing === on) return;
+    this._compositing = on;
+    for (const wnd of Window._cacheFor(this).values()) wnd._compositingChanged?.();
+  }
+
   /** the text API entry point: font matching/loading, shaping, layout */
   get fonts() {
     if (!this._fonts) this._fonts = new FontManager({ source: this.options.fontSource });

package/lib/clipboard.js

@@ -63,6 +63,7 @@ export default class Clipboard {
     this._fixes = null; // XFixes extension, required on first watch()
     this._fixesFirstEvent = -1; // its event base, to recognise its events
     this._selectionWatchers = new Map(); // selection atom -> { name, handlers }
+    this._listening = false; // _onXEvent is on the raw event stream
     this._onXEvent = this._onXEvent.bind(this);
   }
 
@@ -328,11 +329,17 @@ export default class Clipboard {
       // never delivers them to the Window wrapper — listen on the raw
       // client instead. INCR chunk pacing needs PropertyNotify for the
       // requestor's window, which is not ours either.
-      this.X.on('event', this._onXEvent);
+      this._listen();
     })();
     return this._ready;
   }
 
+  _listen() {
+    if (this._listening) return;
+    this._listening = true;
+    this.X.on('event', this._onXEvent);
+  }
+
   /**
    * Call `handler` whenever a selection changes hands.
    *
@@ -355,6 +362,9 @@ export default class Clipboard {
    *
    * Watchers share one server-side registration per selection, so watching
    * the same selection twice costs one extra callback and no extra protocol.
+   * The registration is on the root window, as GDK's is, so watching makes
+   * no window of the clipboard's own: an app that only watches — every app
+   * does, through `App#compositing` — has none.
    *
    * @param {string} selection selection atom name, e.g. 'CLIPBOARD' or 'PRIMARY'
    * @param {function} handler called with the event
@@ -364,9 +374,10 @@ export default class Clipboard {
     if (typeof handler !== 'function') {
       throw new TypeError('clipboard: watch needs a handler function');
     }
-    await this._ensure();
     const fixes = await this._ensureFixes();
     const sel = await this._atom(selection);
+    this._listen();
+    const root = this.app.display.screen[0].root;
 
     let entry = this._selectionWatchers.get(sel);
     if (!entry) {
@@ -376,7 +387,7 @@ export default class Clipboard {
         fixes.SelectionEventMask.SetSelectionOwner |
         fixes.SelectionEventMask.SelectionWindowDestroy |
         fixes.SelectionEventMask.SelectionClientClose;
-      safeRelease(this.X, () => fixes.SelectSelectionInput(this._window.id, sel, mask));
+      safeRelease(this.X, () => fixes.SelectSelectionInput(root, sel, mask));
     }
     entry.handlers.add(handler);
 
@@ -390,7 +401,7 @@ export default class Clipboard {
       if (current.handlers.size) return;
       // last watcher for this selection: drop the server-side registration
       this._selectionWatchers.delete(sel);
-      safeRelease(this.X, () => fixes.SelectSelectionInput(this._window.id, sel, 0));
+      safeRelease(this.X, () => fixes.SelectSelectionInput(root, sel, 0));
     };
   }
 
@@ -522,7 +533,6 @@ export default class Clipboard {
   }
 
   _onXEvent(ev) {
-    if (!this._window) return;
     // XFixes events carry a server-assigned type above the core range, so
     // this cannot be confused with core SelectionNotify, which is 31
     if (ev.type === this._fixesFirstEvent && this._selectionWatchers.size) {
@@ -532,6 +542,7 @@ export default class Clipboard {
       );
       return;
     }
+    if (!this._window) return;
     if (ev.type === 28) {
       // PropertyNotify, state 1 = Deleted: a requestor consumed the INCR
       // chunk we gave it and is asking for the next one

package/lib/cliprect.js

@@ -0,0 +1,117 @@
+// Geometry clipped to a rectangle, for what goes to the server in XRender's
+// 16.16 fixed point: trapezoids and triangles. A coordinate past 32,767 there
+// overflows the 32-bit word node-x11 writes it into, and the RangeError comes
+// out of the paint that drew it. A box of a code block twenty thousand lines
+// tall in a scroll pane was one, filled as a rounded rectangle.
+//
+// Only what reaches past the rectangle is clipped: everything else goes out
+// as it came, so a drawing that fits is sent exactly as before.
+
+/** Whether every point of a flat `[x, y, …]` list is inside the rectangle. */
+export function withinRect(pts, x0, y0, x1, y1) {
+  for (let i = 0; i < pts.length; i += 2) {
+    const x = pts[i];
+    const y = pts[i + 1];
+    if (x < x0 || x > x1 || y < y0 || y > y1) return false;
+  }
+  return true;
+}
+
+/**
+ * A closed ring clipped to the rectangle (Sutherland–Hodgman), as a flat
+ * `[x, y, …]` list, empty when nothing of it is inside. Clipping each ring of
+ * a shape on its own keeps its fill, nonzero or even-odd, the same at every
+ * point inside a convex region.
+ */
+export function clipRingToRect(pts, x0, y0, x1, y1) {
+  let ring = pts;
+  // each edge of the rectangle: which coordinate, which bound, which side
+  for (const [axis, bound, keepAbove] of [
+    [0, x0, true],
+    [0, x1, false],
+    [1, y0, true],
+    [1, y1, false],
+  ]) {
+    const n = ring.length / 2;
+    if (n === 0) break;
+    const out = [];
+    const inside = (i) =>
+      keepAbove ? ring[i * 2 + axis] >= bound : ring[i * 2 + axis] <= bound;
+    for (let i = 0; i < n; i++) {
+      const j = (i + n - 1) % n; // the previous point
+      const iin = inside(i);
+      const jin = inside(j);
+      if (iin !== jin) {
+        // where the segment from j to i crosses the bound
+        const a = ring[j * 2 + axis];
+        const b = ring[i * 2 + axis];
+        const t = (bound - a) / (b - a);
+        const other = 1 - axis;
+        const oa = ring[j * 2 + other];
+        const ob = ring[i * 2 + other];
+        const p = [0, 0];
+        p[axis] = bound;
+        p[other] = oa + (ob - oa) * t;
+        out.push(p[0], p[1]);
+      }
+      if (iin) out.push(ring[i * 2], ring[i * 2 + 1]);
+    }
+    ring = out;
+  }
+  return ring;
+}
+
+/**
+ * A flat list of triangles, six numbers each, with every one that reaches
+ * past the rectangle clipped to it and cut back into triangles (a fan: what
+ * is left of a triangle inside a rectangle is convex).
+ */
+export function clipTrianglesToRect(tris, x0, y0, x1, y1) {
+  const out = [];
+  for (let i = 0; i + 5 < tris.length; i += 6) {
+    const tri = tris.slice(i, i + 6);
+    if (withinRect(tri, x0, y0, x1, y1)) {
+      out.push(...tri);
+      continue;
+    }
+    const poly = clipRingToRect(tri, x0, y0, x1, y1);
+    for (let k = 2; k * 2 + 1 < poly.length; k++) {
+      out.push(
+        poly[0],
+        poly[1],
+        poly[(k - 1) * 2],
+        poly[(k - 1) * 2 + 1],
+        poly[k * 2],
+        poly[k * 2 + 1],
+      );
+    }
+  }
+  return out;
+}
+
+/**
+ * A flat `[x, y, w, h, …]` list of rectangles cut to `[0, width) × [0,
+ * height)`, dropping the ones with nothing left: core X's rectangles are 16
+ * bits. The list itself when every rectangle is already on the surface.
+ */
+export function rectsOnSurface(flat, width, height) {
+  let out = null;
+  for (let i = 0; i + 3 < flat.length; i += 4) {
+    const x = flat[i];
+    const y = flat[i + 1];
+    const w = flat[i + 2];
+    const h = flat[i + 3];
+    const inside = x >= 0 && y >= 0 && x + w <= width && y + h <= height;
+    if (inside) {
+      if (out) out.push(x, y, w, h);
+      continue;
+    }
+    if (!out) out = flat.slice(0, i);
+    const x0 = Math.max(x, 0);
+    const y0 = Math.max(y, 0);
+    const x1 = Math.min(x + w, width);
+    const y1 = Math.min(y + h, height);
+    if (x1 > x0 && y1 > y0) out.push(x0, y0, x1 - x0, y1 - y0);
+  }
+  return out ?? flat;
+}

package/lib/renderingcontext_2d.js

@@ -29,6 +29,12 @@ import { formatForDepth } from "./pictformat.js";
 import Pixmap from "./pixmap.js";
 import { REGION_DOCS, regionId } from "./region.js";
 import { routeRaster } from "./rasterize.js";
+import {
+  clipRingToRect,
+  clipTrianglesToRect,
+  rectsOnSurface,
+  withinRect,
+} from "./cliprect.js";
 import {
   blurCoverage,
   cachedShadow,
@@ -1868,9 +1874,36 @@ class RenderingContext2d {
     });
   }
 
-  _rasterizePolys(picture, shapes, rule, dx = 0, dy = 0) {
+  _rasterizePolys(
+    picture,
+    shapes,
+    rule,
+    dx = 0,
+    dy = 0,
+    w = this.width,
+    h = this.height,
+  ) {
     if (!shapes.length) return;
-    const traps = trapezoidize(shapes, dx, dy, [], rule);
+    // Trapezoids are 16.16 fixed point, and a coordinate past 32,767 throws
+    // out of the paint (lib/cliprect.js). A shape that reaches past the
+    // picture is cut to it first, a pixel to spare on every side: nothing
+    // outside the picture is ever composited.
+    const x0 = -dx - 1;
+    const y0 = -dy - 1;
+    const x1 = w - dx + 1;
+    const y1 = h - dy + 1;
+    let fitted = null;
+    for (let i = 0; i < shapes.length; i++) {
+      const shape = shapes[i];
+      if (withinRect(shape, x0, y0, x1, y1)) {
+        if (fitted) fitted.push(shape);
+        continue;
+      }
+      if (!fitted) fitted = shapes.slice(0, i);
+      const ring = clipRingToRect(shape, x0, y0, x1, y1);
+      if (ring.length >= 6) fitted.push(ring);
+    }
+    const traps = trapezoidize(fitted ?? shapes, dx, dy, [], rule);
     // stay under the server's maximum request size
     const chunk = 4000 * 6;
     for (let i = 0; i < traps.length; i += chunk) {
@@ -2480,6 +2513,18 @@ class RenderingContext2d {
     }
     if (w < tris.length) tris.length = w;
     if (!tris.length) return;
+    // Triangles are 16.16 fixed point, and the source origin a direct stroke
+    // hands the server is 16 bits: a stroke that reaches past the surface is
+    // cut to it first (lib/cliprect.js), a pixel to spare on every side, so
+    // what the surface shows is drawn exactly as before.
+    const edgeX = this.width + 1;
+    const edgeY = this.height + 1;
+    if (!withinRect(tris, -1, -1, edgeX, edgeY)) {
+      const cut = clipTrianglesToRect(tris, -1, -1, edgeX, edgeY);
+      tris.length = 0;
+      for (let i = 0; i < cut.length; i++) tris.push(cut[i]);
+      if (!tris.length) return;
+    }
 
     const op = this._op();
     // round-cap/join disks overlap the stroke body; overlapping coverage
@@ -3018,6 +3063,20 @@ class RenderingContext2d {
    * for the whole list and then draws the rectangles through here */
   _fillRect(x, y, w, h) {
     if (matIsIdentity(this._m)) {
+      // X coordinates and sizes are 16 bits, and a coordinate past 32,767
+      // throws out of the paint (lib/cliprect.js): a rectangle that reaches
+      // past the surface is filled as the part of it the surface has.
+      if (x < 0 || y < 0 || x + w > this.width || y + h > this.height) {
+        const x0 = Math.max(x, 0);
+        const y0 = Math.max(y, 0);
+        const x1 = Math.min(x + w, this.width);
+        const y1 = Math.min(y + h, this.height);
+        if (!(x1 > x0 && y1 > y0)) return;
+        x = x0;
+        y = y0;
+        w = x1 - x0;
+        h = y1 - y0;
+      }
       if (!prepareStyle(this._backgroundPicture, this._m)) return;
       const op = this._op();
       // A rectangular clip is a smaller rectangle to fill, not a mask — this
@@ -3113,6 +3172,10 @@ class RenderingContext2d {
     }
     if (this._hasPolyClip) return;
     if (clip && (clip.w === 0 || clip.h === 0)) return; // clipped away
+    // the part of each the surface has, as `_fillRect` fills it: the wire's
+    // coordinates are 16 bits
+    const onSurface = rectsOnSurface(flat, this.width, this.height);
+    if (!onSurface.length) return;
     const R = this.Render;
     if (clip) this._setPictureClip(clip);
     // globalAlpha folds into the premultiplied colour — scaling all four
@@ -3122,12 +3185,14 @@ class RenderingContext2d {
     const color = this._foldedColor(this._fillStyle);
     // stay under the server's maximum request size
     const chunk = 10000 * 4;
-    for (let i = 0; i < flat.length; i += chunk) {
+    for (let i = 0; i < onSurface.length; i += chunk) {
       R.FillRectangles(
         this._op(),
         this._dst(),
         color,
-        i === 0 && flat.length <= chunk ? flat : flat.slice(i, i + chunk),
+        i === 0 && onSurface.length <= chunk
+          ? onSurface
+          : onSurface.slice(i, i + chunk),
       );
     }
     if (clip) this._invalidatePictureClip();
@@ -3166,10 +3231,13 @@ class RenderingContext2d {
     let x1 = -Infinity;
     let y1 = -Infinity;
     for (let i = 0; i < flat.length; i += 4) {
-      const x = Math.trunc(flat[i]);
-      const y = Math.trunc(flat[i + 1]);
-      const w = Math.trunc(flat[i + 2]);
-      const h = Math.trunc(flat[i + 3]);
+      // the part of it on the surface: the wire's coordinates are 16 bits
+      const left = Math.trunc(flat[i]);
+      const top = Math.trunc(flat[i + 1]);
+      const x = Math.max(0, left);
+      const y = Math.max(0, top);
+      const w = Math.min(this.width, left + Math.trunc(flat[i + 2])) - x;
+      const h = Math.min(this.height, top + Math.trunc(flat[i + 3])) - y;
       if (w <= 0 || h <= 0) continue;
       rects.push(x, y, w, h);
       if (x < x0) x0 = x;
@@ -3953,6 +4021,8 @@ class RenderingContext2d {
         entry.rule,
         -bb.x,
         -bb.y,
+        bb.w,
+        bb.h,
       );
     }
     R.Composite(

package/lib/text/layout.js

@@ -12,6 +12,19 @@ const WS = new Set([0x20, 0x09]);
 const HARD_BREAKS = /[\n\r\u2028\u2029]+$/;
 const TRAILING_WS = /[ \t]+$/;
 
+/** Scripts written without spaces between words, whose line breaking
+ *  needs a dictionary (UAX #14's SA class, and Javanese, Balinese and
+ *  Buginese, which are AL there): a token of theirs is a run of words. */
+const UNSPACED =
+  /[\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}\p{Script=Tai_Le}\p{Script=New_Tai_Lue}\p{Script=Tai_Tham}\p{Script=Tai_Viet}\p{Script=Ahom}\p{Script=Javanese}\p{Script=Balinese}\p{Script=Buginese}]/u;
+
+/** How wide a line's tokens are, the white space it ends on left out. */
+function tokensWidth(toks) {
+  let width = 0;
+  for (const token of toks) width += token.width;
+  return toks.length ? width - toks[toks.length - 1].wsWidth : 0;
+}
+
 function isWsGlyph(g) {
   return g.codePoints.length > 0 && g.codePoints.every((cp) => WS.has(cp));
 }
@@ -27,8 +40,12 @@ function isWsGlyph(g) {
  *
  * Content is a plain string or an array of spans
  * `{ text, family?, size?, weight?, style?, features?, language?,
- * letterSpacing?, color? }`;
- * span fields override the base style. Options:
+ * letterSpacing?, color?, nowrap? }`;
+ * span fields override the base style. Spans that share a truthy `nowrap` —
+ * `true`, or any value a caller tells its groups apart by — have no break
+ * opportunity inside them or between them, as the text of an element with
+ * CSS's `white-space: nowrap` has none: the break after the last of them is
+ * the next span's to allow. Options:
  *
  * - `maxWidth` — target container width (default: unlimited)
  * - `align` — 'left' | 'right' | 'center' | 'start' | 'end'
@@ -36,7 +53,16 @@ function isWsGlyph(g) {
  * - `direction` — 'ltr' | 'rtl' | 'auto' base paragraph direction
  * - `maxLines` — cap the number of lines (default: unlimited)
  * - `overflow` — 'clip' (default) or 'ellipsis', what a `maxLines` cut looks
- *   like. See `_elide`.
+ *   like, and a line that does not wrap cut at `maxWidth`. See `_elide`.
+ * - `wrap` — false lays the text out a line to each forced break however
+ *   wide it is; with `overflow: 'ellipsis'` a line wider than `maxWidth` is
+ *   cut there with an ellipsis, inside a word if need be, as CSS's
+ *   `text-overflow` cuts text that does not wrap. Default true.
+ * - `overflowWrap` — 'break-word' (default) cuts a word wider than the line
+ *   at a grapheme boundary; 'normal' keeps it whole on a line of its own,
+ *   past the line's end, as CSS's `overflow-wrap: normal` does — but for
+ *   text in a script written without spaces (Thai, Khmer, Javanese…), whose
+ *   words the breaker cannot find, which is cut as a fallback
  *
  * The result is inspectable before/without drawing: `width`, `height`,
  * `truncated`, and `lines[] = { x, y, height, baseline, width, ascent,
@@ -75,6 +101,13 @@ export class TextLayout {
 
     // ---- greedy line fill ----
     const lineTokens = [];
+    // a word wider than the line stays whole, past the line's end, where
+    // the options say so; cut inside itself where they do not — and in a
+    // script written without spaces, where the breaker's "word" is a phrase
+    // it had no dictionary to cut, cut anyway (CSS Text 3, 5.1)
+    const whole = options.overflowWrap === 'normal';
+    // text that does not wrap is a line to each forced break, however wide
+    const wraps = options.wrap !== false;
     {
       let cur = [];
       let curWidth = 0;
@@ -84,9 +117,11 @@ export class TextLayout {
         curWidth = 0;
       };
       for (let token of tokens) {
-        while (curWidth + token.width - token.wsWidth > maxWidth) {
+        while (wraps && curWidth + token.width - token.wsWidth > maxWidth) {
           if (cur.length > 0) {
             flush();
+          } else if (whole && !UNSPACED.test(text.slice(token.start, token.end))) {
+            break;
           } else {
             // single token wider than the container: force-break it
             const [head, rest] = this._forceBreak(token, maxWidth);
@@ -109,10 +144,13 @@ export class TextLayout {
     const maxLines = Number.isFinite(options.maxLines)
       ? Math.max(0, Math.floor(options.maxLines))
       : Infinity;
-    /** did `maxLines` drop content? */
+    /** did `maxLines` drop content, or a line that does not wrap its end? */
     this.truncated = lineTokens.length > maxLines;
     if (this.truncated) lineTokens.length = maxLines;
-    const elide = this.truncated && options.overflow === 'ellipsis';
+    const ellipses = options.overflow === 'ellipsis';
+    const elide = this.truncated && ellipses;
+    // and a line that does not wrap is cut where it runs past the width
+    const cutWide = ellipses && !wraps && Number.isFinite(maxWidth);
 
     // ---- assemble lines: strip trailing ws, bidi-reorder, position ----
     const baseSpan = spans[0];
@@ -126,10 +164,15 @@ export class TextLayout {
       const lineStart = toks.length ? toks[0].start : 0;
       let lineEnd = toks.length ? toks[toks.length - 1].end : lineStart;
 
-      // Elision is the last kept line's business only, and it happens before
-      // entries exist, because dropping content means re-shaping the tail.
-      const ellipsis = elide && li === lineTokens.length - 1 ? this._elide(toks, baseSpan) : null;
-      if (ellipsis) toks = this._fitBefore(toks, maxWidth - ellipsis.width);
+      // Elision is the last kept line's business, or a line's that does not
+      // wrap and runs past the width, and it happens before entries exist,
+      // because dropping content means re-shaping the tail.
+      const cut = (elide && li === lineTokens.length - 1) || (cutWide && tokensWidth(toks) > maxWidth);
+      const ellipsis = cut ? this._elide(toks, baseSpan) : null;
+      if (ellipsis) {
+        toks = this._fitBefore(toks, maxWidth - ellipsis.width);
+        this.truncated = true;
+      }
 
       // entries carry .level so reorderRuns can order them (UAX#9 L2);
       // .start/.end are absolute code-unit ranges into the full text, kept
@@ -238,10 +281,13 @@ export class TextLayout {
     let align = options.align ?? 'start';
     if (align === 'start') align = this.baseLevel ? 'right' : 'left';
     if (align === 'end') align = this.baseLevel ? 'left' : 'right';
-    if (align !== 'left') {
+    if (align !== 'left' || this.baseLevel) {
       for (const line of this.lines) {
         const free = container - line.width;
-        line.x = align === 'right' ? free : free / 2;
+        // a line too long for its container starts at its start edge and
+        // runs past its end, whatever the alignment (CSS Text 3, 7.1)
+        if (free < 0) line.x = this.baseLevel ? free : 0;
+        else if (align !== 'left') line.x = align === 'right' ? free : free / 2;
       }
     }
   }
@@ -264,6 +310,13 @@ export class TextLayout {
     // and every line still needs a style to take its metrics from, so
     // stand one in rather than crashing on the first empty line.
     const given = typeof content === 'string' ? [{ text: content }] : content;
+    // What a span is shaped with, one per distinct style rather than one a
+    // span (`shapingStyleOf`): the spans of a highlighted source file are its
+    // tokens, half a million for twenty thousand lines over a handful of
+    // styles, and the font lookup and the shaping memo's key, worked out
+    // afresh for each, were most of what laying such a file out cost.
+    const styles = [];
+    const shapings = [];
     const spans = (given.length ? given : [{ text: '' }]).map((s) => {
       const merged = {
         ...s,
@@ -281,7 +334,9 @@ export class TextLayout {
         letterSpacing: s.letterSpacing ?? style.letterSpacing,
         color: s.color ?? style.color ?? null
       };
-      merged.font = s.font ?? style.font ?? fonts.match(merged.family, merged);
+      const shaping = shapingStyleOf(styles, merged, s.font ?? style.font, fonts);
+      merged.font = shaping.font;
+      shapings.push(shaping);
       return merged;
     });
 
@@ -309,17 +364,24 @@ export class TextLayout {
       }
       return {
         span: spans[lo],
+        shaping: shapings[lo],
         end: lo + 1 < spanStarts.length ? spanStarts[lo + 1] : text.length
       };
     };
 
     // ---- tokenize at UAX#14 break opportunities ----
+    // none between two characters of spans that share a `nowrap`
+    const held = spans.some((s) => s.nowrap);
     const tokens = [];
     {
       const breaker = new LineBreaker(text);
       let prev = 0;
       let bk;
       while ((bk = breaker.nextBreak())) {
+        if (held && !bk.required && bk.position < text.length) {
+          const before = spanAt(bk.position - 1).span.nowrap;
+          if (before && before === spanAt(bk.position).span.nowrap) continue;
+        }
         tokens.push(this._makeToken(text, prev, bk.position, levels, spanAt, bk.required));
         prev = bk.position;
       }
@@ -336,13 +398,13 @@ export class TextLayout {
     let width = 0;
     let pos = start;
     while (pos < end) {
-      const { span, end: spanEnd } = spanAt(pos);
+      const { span, shaping, end: spanEnd } = spanAt(pos);
       const fragEnd = Math.min(end, spanEnd);
       // hard-break controls only terminate the line; never shape them
       const fragText = text.slice(pos, fragEnd).replace(HARD_BREAKS, '');
       if (fragText.length > 0) {
         const fragLevels = normalizedLevels(levels, pos, pos + fragText.length);
-        const shaped = this.fonts._shapeCached(fragText, span, fragLevels);
+        const shaped = this.fonts._shapeCached(fragText, shaping, fragLevels);
         // the levels ride along so a later split can re-shape a piece at the
         // level it actually has, rather than assuming ltr
         fragments.push({ text: fragText, span, shaped, start: pos, levels: fragLevels });
@@ -543,7 +605,20 @@ export class TextLayout {
       }
       batch = [];
     };
+    // Only the lines the context can show. A layout taller than the view it
+    // is drawn in — a code block of twenty thousand lines in a scroll pane —
+    // built every line's glyphs, sent them, and had the server clip them
+    // away, on every paint. A line is skipped when its box, grown by its
+    // 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);
     for (const line of this.lines) {
+      if (rows) {
+        const reach = line.height + line.ascent + line.descent;
+        if (line.y + line.height + reach < rows.top) continue;
+        if (line.y - reach > rows.bottom) continue;
+      }
       for (const r of line.runs) {
         const color = r.span.color;
         if (batch.length && color !== batchColor) flush();
@@ -963,3 +1038,77 @@ function sliceLevels(key, start, end) {
   if (!key.includes(',')) return key;
   return key.split(',').slice(start, end).join(',');
 }
+
+/**
+ * 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.
+ */
+function visibleRows(ctx, y) {
+  if (typeof ctx.drawGlyphs !== 'function') return null;
+  if (typeof ctx._clipExtents !== 'function') 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;
+  const height = ctx.height;
+  if (!(height > 0)) return null;
+  // the clip's extents skip a region clip, so they are never smaller than
+  // what the server lets through
+  const box = ctx._clipExtents() ?? { y: 0, h: height };
+  const top = box.y - (y + m[5]);
+  return { top, bottom: top + box.h };
+}
+
+/**
+ * How many distinct styles one layout shares shaping styles among. Past it a
+ * span is shaped with a style of its own, as every span once was, rather
+ * than the search growing with the document.
+ */
+const MAX_SHAPING_STYLES = 16;
+
+/**
+ * The style `span` is shaped with: one already made for a span whose every
+ * property shaping reads is the same (`===`), or a new one. Its font is the
+ * one the span or the layout named (`given`), else the one its family
+ * matches, looked up once for all the spans that share it. What shaping
+ * reads is what `shapeText`, `fallbackFor` and the memo key read: the face
+ * and what picks it, the size, and features, language and spacing.
+ */
+function shapingStyleOf(known, span, given, fonts) {
+  for (let i = 0; i < known.length; i++) {
+    const k = known[i];
+    if (
+      k.given === given &&
+      k.family === span.family &&
+      k.size === span.size &&
+      k.weight === span.weight &&
+      k.style === span.style &&
+      k.variations === span.variations &&
+      k.opticalSize === span.opticalSize &&
+      k.opticalSizing === span.opticalSizing &&
+      k.features === span.features &&
+      k.language === span.language &&
+      k.letterSpacing === span.letterSpacing
+    ) {
+      return k;
+    }
+  }
+  const k = {
+    given,
+    font: given ?? fonts.match(span.family, span),
+    family: span.family,
+    size: span.size,
+    weight: span.weight,
+    style: span.style,
+    variations: span.variations,
+    opticalSize: span.opticalSize,
+    opticalSizing: span.opticalSizing,
+    features: span.features,
+    language: span.language,
+    letterSpacing: span.letterSpacing
+  };
+  if (known.length < MAX_SHAPING_STYLES) known.push(k);
+  return k;
+}

package/lib/window.js

@@ -448,6 +448,16 @@ function decodeProperty(prop, as, X) {
   return { type: prop.type, data: prop.data };
 }
 
+/**
+ * The frame clock `NTK_FRAME_CLOCK` names for every window that does not
+ * name one itself: `'auto'`, `'present'` or `'fence'` (see `frameClock`),
+ * for trying a machine both ways without touching the app.
+ */
+function envFrameClock() {
+  const v = globalThis.process?.env?.NTK_FRAME_CLOCK;
+  return v === 'auto' || v === 'present' || v === 'fence' ? v : undefined;
+}
+
 export default class Window extends Drawable {
   // one wrapper per X window id and connection: constructing a Window for a
   // known id returns the cached instance. Keyed by connection as well as
@@ -545,7 +555,7 @@ export default class Window extends Drawable {
     // everywhere else, including a server whose Present has no display behind
     // it (see _probeMsc); 'present' takes Present's clock even there; 'fence'
     // pins the round-trip clock
-    this._frameClockPref = args.frameClock ?? 'auto';
+    this._frameClockPref = args.frameClock ?? envFrameClock() ?? 'auto';
     // _NET_WM_SYNC_REQUEST (see enableSyncRequest): the counter the window
     // manager watches, the value it last asked for, and the watchdog that
     // guarantees an answer even when nothing repaints
@@ -766,7 +776,10 @@ export default class Window extends Drawable {
     }
     // EWMH wants a pid and a client machine on top-level windows; child
     // windows are an implementation detail nothing asks about
-    if (!args.id && args.pid !== false && parentId === app.display.screen[0].root) {
+    // a window of ours at the root: the one a window manager and a
+    // compositor treat as the app's window (see `_askNotToBypass`)
+    this._topLevel = !args.id && parentId === app.display.screen[0].root;
+    if (this._topLevel && args.pid !== false) {
       this.setPid(typeof args.pid === 'number' ? args.pid : undefined);
     }
     if (args.alwaysOnTop) {
@@ -1539,6 +1552,7 @@ export default class Window extends Drawable {
       this._frameSyncEnabled &&
       !this._clockStalled &&
       !this._presentAbandoned() &&
+      !this._preferFence() &&
       !!this._presentExt &&
       !!this._presentEid
     );
@@ -2432,6 +2446,10 @@ export default class Window extends Drawable {
    * caller who opted out is not sent events it will not read.
    */
   _selectPresentInput() {
+    // whether a compositor runs decides how this window's frames end, so the
+    // first window to present asks (App#compositing)
+    void this.app?.compositing;
+    if (this._preferFence()) this._askNotToBypass();
     const P = this._presentExt;
     if (!P || this._presentEid || this._destroyed) return;
     if (this._frameClockPref === 'fence' || !this._frameSyncEnabled) return;
@@ -2453,10 +2471,62 @@ export default class Window extends Drawable {
    */
   _blitsThroughPresent() {
     return (
-      !!this._presentExt && !!this._fixesExt && !!this._updateRegion && !this._presentAbandoned()
+      !!this._presentExt &&
+      !!this._fixesExt &&
+      !!this._updateRegion &&
+      !this._presentAbandoned() &&
+      !this._preferFence()
     );
   }
 
+  /**
+   * Whether this window leaves Present to the compositor: under a
+   * compositing manager (`app.compositing`) the fence ends its frames and
+   * CopyArea blits them, the configuration a window whose server makes its
+   * vblanks up already runs on (`_presentAbandoned`). The blit goes with the
+   * clock for the same reason as there — a present owns the backing store
+   * until it executes, and a frame drawn behind one on the fence can put
+   * half of itself on the screen (#223).
+   *
+   * Not on Xwayland, whose Present clock is the Wayland compositor's frame
+   * callback; not while `frameClock: 'present'` asks for Present's clock by
+   * name; and not until the server has said whether a compositor runs.
+   * Reversible, unlike `_presentAbandoned`: a compositor that stops hands
+   * the window back to Present's clock at its next frame.
+   */
+  _preferFence() {
+    const app = this.app;
+    return this._frameClockPref === 'auto' && app?.compositing === true && !app.xwayland;
+  }
+
+  /**
+   * EWMH `_NET_WM_BYPASS_COMPOSITOR` = 2 on a top-level window leaving
+   * Present to the compositor: "do not unredirect me". Mutter, Muffin and
+   * KWin unredirect a window that covers the screen, and its CopyArea blits
+   * would then go to the scanout directly, where a copy can tear — what a
+   * present synced to the vertical blank was there to prevent. Asked once;
+   * a compositor that ignores it is one that keeps every window redirected.
+   */
+  _askNotToBypass() {
+    if (this._bypassAsked || !this._topLevel || this._destroyed) return;
+    this._bypassAsked = true;
+    const X = this.X;
+    this._withAtoms(['_NET_WM_BYPASS_COMPOSITOR'], (atoms) => {
+      safeRelease(X, () => {
+        X.ChangeProperty(0, this.id, atoms._NET_WM_BYPASS_COMPOSITOR, X.atoms.CARDINAL, 32, [2]);
+      });
+    });
+  }
+
+  /** The compositor started or stopped: the next frame goes by the clock
+   *  that fits. A present in flight still gates it until its completion
+   *  hands the backing store back, whichever clock is running. */
+  _compositingChanged() {
+    if (this._preferFence()) this._askNotToBypass();
+    const f = this._frame;
+    if (f.pending.size || f.rafCbs.length || f.needsRedraw) this._scheduleFrame();
+  }
+
   /**
    * The Present form of the blit. Returns false when it did not happen, so
    * the caller falls back to CopyArea — which is also what runs before the
@@ -2601,13 +2671,21 @@ export default class Window extends Drawable {
       needConfigureWindow = true;
       configureProps.y = newState.y;
     }
-    if (newState.width !== undefined && this.width !== newState.width) {
-      needConfigureWindow = true;
-      configureProps.width = newState.width;
-    }
-    if (newState.height !== undefined && this.height !== newState.height) {
+    // A new size goes out whole, both axes, even when only one of them
+    // changed. A window manager answers a request that names one axis with
+    // its own idea of the other, and Muffin (Cinnamon) takes the height as its
+    // frame's, title bar included: every width-only request grew the window
+    // by 32 px, the next one by 32 more. Xlib's XResizeWindow and GTK always
+    // send both, which is why nobody else trips over it.
+    if (
+      (newState.width !== undefined && this.width !== newState.width) ||
+      (newState.height !== undefined && this.height !== newState.height)
+    ) {
+      const width = newState.width ?? this.width;
+      const height = newState.height ?? this.height;
       needConfigureWindow = true;
-      configureProps.height = newState.height;
+      if (width !== undefined) configureProps.width = width;
+      if (height !== undefined) configureProps.height = height;
     }
     if (needConfigureWindow) {
       this.X.ConfigureWindow(this.id, configureProps);

package/package.json

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