ntk 8.12.13 → 8.13.0

package/lib/app.js

@@ -311,6 +311,63 @@ 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';
+    X.QueryExtension('XWAYLAND', (xwErr, ext) => {
+      this._xwayland = !xwErr && !!ext?.present;
+      X.InternAtom(false, name, (atomErr, atom) => {
+        if (atomErr || !atom) return;
+        X.GetSelectionOwner(atom, (ownerErr, owner) => {
+          if (ownerErr) 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/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;
       }
     }
   }
@@ -314,12 +360,18 @@ export class TextLayout {
     };
 
     // ---- 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;
       }

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.0",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",