react-x11 2.41.0 → 2.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.41.0",
+  "version": "2.41.1",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -104,14 +104,14 @@
     "ical.js": "^2.2.1",
     "image-in-browser": "^3.6.0",
     "linebreak": "^1.1.0",
-    "ntk": "^8.17.8",
+    "ntk": "^8.23.0",
     "react-reconciler": "^0.34.0",
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
     "@windowkit/appkit": "^0.25.0",
     "@windowkit/wayland": "^3.1.1",
-    "@windowkit/win32": "^0.0.7",
+    "@windowkit/win32": "^0.0.9",
     "dbus-native": "^0.16.0",
     "x11-dri": "^0.9.0"
   },

package/src/cocoa/panehost.js

@@ -31,6 +31,12 @@ const ASKED_KEPT = 16;
  *  drag itself. */
 const GESTURE_GAP_MS = 500;
 
+/** How far inside the budget a frame of a pane that fell behind has to
+ *  come for its frames to be anchored again (`_answered`): a pane whose
+ *  frames come near the budget keeps one look rather than taking the
+ *  other at every frame. */
+const KEPT_UP = 0.75;
+
 /** One shared surface on glass: a sublayer of a window's root layer, its
  * contents the IOSurface the pane last presented into it. */
 class PaneLayer {
@@ -54,6 +60,10 @@ class PaneLayer {
     this._asked = [];
     this._askedAt = null;
     this._behind = false;
+    // when a frame last answered a size, and how many frames in a row came
+    // later than the budget (`_answered`)
+    this._answeredAt = -Infinity;
+    this._late = 0;
   }
 
   /**
@@ -73,13 +83,28 @@ class PaneLayer {
    * size may take before the old one is shown in its place: 0 stretches
    * always, as before. A bridge that predates `contentsGravity` ignores it,
    * and stretches.
+   *
+   * Behind is a pane whose frames come later than the budget, not one with
+   * a size waiting that long. `<Frame>` sends a pane the newest size once
+   * it has painted the last, so the sizes a drag passes through while a
+   * frame is being painted are never sent, and never answered: a size
+   * waits until a frame of a later one lands, two pane frames at most. A
+   * page that painted in 27 ms answered every size it was sent in 31, and
+   * still had one 52 ms old at every step of the drag — so its layer was
+   * stretched at every step and anchored again at every frame, the page
+   * scaling and coming back thirty times a second. Here a size waiting
+   * longer than the budget counts only when no frame has answered any
+   * size in that time, which is a pane that stopped, and a frame that
+   * lands decides the rest (`_answered`).
    */
   _gravityNow() {
     const budget = this.app._resizeWait ?? RESIZE_WAIT_MS;
     if (!(budget > 0)) return 'resize';
-    // a size asked longer ago than the budget, and no frame of it yet
+    // a size asked longer ago than the budget, and no frame of any since
     const oldest = this._asked[0];
-    if (oldest && now() - oldest.at > budget) this._behind = true;
+    if (oldest && now() - Math.max(oldest.at, this._answeredAt) > budget) {
+      this._behind = true;
+    }
     return this._behind ? 'resize' : 'topLeft';
   }
 
@@ -106,20 +131,35 @@ class PaneLayer {
     return { contentsScale: scale };
   }
 
-  /** A frame of `width` by `height` device px landed: what it answers of
-   *  the sizes asked, and how long it took. */
+  /**
+   * A frame of `width` by `height` device px landed: what it answers of
+   * the sizes asked, and how long it took. Two frames in a row later than
+   * the budget put the pane behind, and one well inside it — `KEPT_UP` of
+   * it — brings it back: a frame the collector held up stretches nothing,
+   * and a pane whose frames come near the budget is not stretched and
+   * anchored by turns.
+   */
   _answered(width, height) {
     const asked = this._asked;
     // the pane rounds the logical size it was sent back to device pixels
     const slack = Math.max(2, this.wnd.scale ?? 1);
-    const at = asked.findIndex(
+    // the last time it was asked: a drag back and forth asks a size twice
+    const at = asked.findLastIndex(
       (a) =>
         Math.abs(a.width - width) <= slack &&
         Math.abs(a.height - height) <= slack,
     );
     if (at < 0) return;
-    this._behind =
-      now() - asked[at].at > (this.app._resizeWait ?? RESIZE_WAIT_MS);
+    const budget = this.app._resizeWait ?? RESIZE_WAIT_MS;
+    const took = now() - asked[at].at;
+    this._answeredAt = now();
+    if (took > budget) {
+      this._late += 1;
+      if (this._late >= 2) this._behind = true;
+    } else {
+      this._late = 0;
+      if (took <= budget * KEPT_UP) this._behind = false;
+    }
     asked.splice(0, at + 1);
   }
 
@@ -144,6 +184,7 @@ class PaneLayer {
       if (at - (this._askedAt ?? -Infinity) >= GESTURE_GAP_MS) {
         this._asked = [];
         this._behind = false;
+        this._late = 0;
       }
       this._askedAt = at;
       if (this._asked.length === ASKED_KEPT) this._asked.shift();

package/src/offscreen.js

@@ -5,13 +5,14 @@
 // An app that makes its own surfaces answers `createSurface(options)` — the
 // Cocoa app over a CG bitmap (src/cocoa/surface.js), the Windows app over a
 // Direct2D bitmap, the Wayland app over a GL render target
-// (src/wayland/surface.js) — and an X connection has no such method and gets
-// ntk's pixmap, from ntk's root, which only an X connection loads
-// (src/ntkroot.js). The result is whichever implementation answered, not an
-// instance of this class: the contract is the shape — `width`/`height`,
-// `getContext('2d')`, `render`, `clear`, `copyWithin`, `destroy`, and
-// `ctx.drawImage(surface, …)` — (docs/extending.md "Scrolling the pixels, not
-// just the offset"), and nothing needs `instanceof`.
+// (src/wayland/surface.js), and ntk's own app over an X connection with its
+// pixmap (ntk >= 8.21). An app without the method — an older ntk deduped
+// into the tree — gets that pixmap from ntk's root, which only an X
+// connection loads (src/ntkroot.js). The result is whichever implementation
+// answered, not an instance of this class: the contract is the shape —
+// `width`/`height`, `getContext('2d')`, `render`, `clear`, `copyWithin`,
+// `destroy`, and `ctx.drawImage(surface, …)` — (docs/extending.md "Scrolling
+// the pixels, not just the offset"), and nothing needs `instanceof`.
 //
 // Part of that shape is that a context may be **held**: ntk tells a caller
 // doing many draws to take `getContext('2d')` once rather than one per frame,

package/src/win32/fonts.js

@@ -407,20 +407,68 @@ class Win32TextLayout {
    * where CoreText cannot and the Cocoa engine breaks at `linebreak`'s
    * opportunities itself. */
   get minWidth() {
+    // asked of the bridge the first time, where it left it out of the
+    // metrics: the line breaker over the whole text again, which a layout
+    // made to be drawn is never asked for
+    if (this._metrics.minWidth === undefined) {
+      this._metrics.minWidth =
+        this._handle != null && this._native.layoutMinWidth
+          ? (this._native.layoutMinWidth(this._handle) ?? 0)
+          : 0;
+    }
     return this._metrics.minWidth;
   }
 
+  /**
+   * Keep the first `cap` lines of what was laid out: they are all this
+   * layout reports, answers for and draws (`_keptEnd`, `_keptHeight`). A
+   * capped paragraph is laid out past its cap to find where the cap falls,
+   * and keeping that layout's first lines is the same picture as laying the
+   * kept text out again, for one native layout where it took two.
+   */
+  _keep(cap) {
+    const lines = this._metrics.lines.slice(0, cap);
+    const last = lines[lines.length - 1];
+    if (!last) return;
+    let width = 0;
+    for (const line of lines)
+      width = Math.max(width, Math.ceil(line.width - 1e-3));
+    this._metrics = {
+      ...this._metrics,
+      lines,
+      width,
+      height: Math.ceil(last.y + last.height),
+      minWidth: undefined,
+    };
+    this._keptEnd = last.end;
+    this._keptHeight = last.y + last.height;
+  }
+
   draw(ctx, x, y) {
+    if (this._keptHeight === undefined) {
+      ctx._drawLayout(this, x, y);
+      return;
+    }
+    // the lines past the cap are in the layout, and stay out of the picture
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x - 1e4, y, 2e4 + this._metrics.width, this._keptHeight);
+    ctx.clip();
     ctx._drawLayout(this, x, y);
+    ctx.restore();
   }
 
   indexAt(x, y) {
     const unit = this._native.layoutIndexAt(this._handle, x, y);
-    return this._cpOf(unit);
+    return this._cpOf(Math.min(unit, this._keptEnd ?? unit));
   }
 
   caretPosition(cp) {
-    return this._native.layoutCaret(this._handle, this._cuOf(cp));
+    const unit = this._cuOf(cp);
+    return this._native.layoutCaret(
+      this._handle,
+      Math.min(unit, this._keptEnd ?? unit),
+    );
   }
 
   /**
@@ -567,6 +615,20 @@ export class Win32FontManager {
     // family|weight|italic|size -> the bridge's handle, or null when there is
     // no such face
     this._handles = new Map();
+    // what this bridge's layouts take, asked once (`textFeatures`, from
+    // @windowkit/win32 0.0.9): an older one answers nothing and takes neither
+    this._features = native.textFeatures?.() ?? {};
+  }
+
+  /**
+   * Which of ntk's `justify` modes `layout` takes. DirectWrite justifies
+   * every line but a paragraph's last, which is `justify: true`, and has no
+   * way to justify a last line: `'rest'` says so, and a caller justifies the
+   * other two itself. <Html>, which spaced every justified line through
+   * letter spacing on this engine, lays a justified paragraph out once.
+   */
+  get justifies() {
+    return this._features.justify === true ? 'rest' : false;
   }
 
   /**
@@ -759,7 +821,9 @@ export class Win32FontManager {
       return this._laidOut(sources, base, { ...options, maxWidth: least });
     }
     let laid = sources;
-    let layout = this._laidOut(laid, base, options);
+    let layout =
+      this._prefixLaidOut(sources, base, options, cap) ??
+      this._laidOut(laid, base, options);
     // With no width the bridge lays a paragraph out in a box a million
     // pixels wide, and aligns it there: a centred line's `x` was half a
     // million, an RTL one's a million, and <Html> measured a centred
@@ -776,7 +840,11 @@ export class Win32FontManager {
       layout = this._laidOut(laid, base, { ...options, maxWidth: widest });
     }
     layout.truncated = layout.lines.length > cap;
-    if (layout.truncated) {
+    if (layout.truncated && !elides) {
+      // what was laid out, a prefix or the whole, keeps its first lines
+      laid = spansTo(sources, layout._text.length);
+      layout._keep(cap);
+    } else if (layout.truncated) {
       const last = layout.lines[cap - 1];
       const text = layout._text;
       layout.destroy();
@@ -800,6 +868,43 @@ export class Win32FontManager {
     return layout;
   }
 
+  /**
+   * A capped paragraph laid out only as far as the cap needs: a prefix of
+   * its text that breaks into more lines than `cap`, or null where the
+   * whole text is no longer than a prefix would be. The first lines of a
+   * prefix are the whole text's first lines wherever it reaches past them —
+   * a line's break waits only on the word after it, which then starts a
+   * line of the prefix — and the prefix ends at a break, its last word
+   * whole. <Html> lays a paragraph beside a float out a line at a time,
+   * each `maxLines: 1` over the rest of the paragraph; laid out whole, each
+   * line cost the whole rest of it, twice, and a paragraph cost the square
+   * of its length.
+   */
+  _prefixLaidOut(sources, base, options, cap) {
+    const { maxWidth } = options;
+    if (!(cap < Infinity) || !(maxWidth > 0) || !Number.isFinite(maxWidth)) {
+      return null;
+    }
+    const text = sources.map((span) => String(span.text)).join('');
+    let size = Infinity;
+    for (const span of sources)
+      size = Math.min(size, sizeOf(span.size ?? base.size));
+    // a third of an em a character is narrower than nearly any text is set
+    // in, so a prefix that long nearly always reaches past the lines wanted;
+    // where it does not, one twice as long is tried
+    let take = Math.ceil(maxWidth / (Math.max(1, size) * 0.3)) * cap + 16;
+    while (take < text.length) {
+      let end = take;
+      while (end < text.length && !BREAKING_SPACE.test(text[end])) end++;
+      if (end >= text.length) return null;
+      const layout = this._laidOut(spansTo(sources, end), base, options);
+      if (layout.lines.length > cap) return layout;
+      layout.destroy();
+      take *= 2;
+    }
+    return null;
+  }
+
   /**
    * Where the last line kept of an eliding paragraph ends: as far into
    * `[start, end)` as fits beside the mark in `maxWidth`, white space before
@@ -899,11 +1004,17 @@ export class Win32FontManager {
         align: options.align,
         lineHeight: options.lineHeight,
         rtl: options.direction === 'rtl',
+        // the one mode DirectWrite has (`justifies`); 'last' and 'all' are
+        // the caller's
+        justify: options.justify === true || undefined,
       },
       ranges,
     );
 
-    const raw = this._native.layoutMetrics(handle);
+    const raw = this._native.layoutMetrics(
+      handle,
+      this._features.lazyMinWidth ? { minWidth: false } : undefined,
+    );
     if (DEBUG) {
       // The family is in here because the one way this goes quietly wrong is
       // `resolveStack` not recognising a name and answering `sans-serif`: the