react-x11 2.22.7 → 2.22.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.22.7",
+  "version": "2.22.9",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -108,7 +108,7 @@
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.14.0",
+    "@windowkit/appkit": "^0.15.0",
     "@windowkit/wayland": "^3.1.1",
     "@windowkit/win32": "^0.0.5",
     "dbus-native": "^0.15.1",

package/src/cocoa/fonts.js

@@ -150,6 +150,15 @@ function unpackLines(lineData = NO_GEOMETRY, runData = NO_GEOMETRY) {
   return lines;
 }
 
+/** Whether two spans read the same, field for field. */
+function sameSpan(a, b) {
+  if (a === b) return true;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) return false;
+  for (const key of keys) if (a[key] !== b[key]) return false;
+  return true;
+}
+
 class CocoaTextLayout {
   constructor(native, raw, text) {
     this._native = native;
@@ -177,6 +186,118 @@ class CocoaTextLayout {
     return t.length - 1;
   }
 
+  /**
+   * Hang each run off the span it was laid out from, as ntk's runs hang:
+   * `span` is the caller's own object, markers and all — what a painter
+   * reads a link's underline or a code chip's background off — and `run`
+   * the face and size it was set in, and its direction. CoreText makes one
+   * run of two neighbouring spans with the same attributes, a link beside
+   * plain text of the same colour, so such a run is cut where the spans
+   * meet, at the offset the native gives for that index.
+   */
+  _hangRuns(sources, runOf) {
+    this._sources = sources;
+    const starts = [];
+    let at = 0;
+    for (const source of sources) {
+      starts.push(at);
+      at += String(source.text).length;
+    }
+    for (const line of this.lines) {
+      const runs = [];
+      for (const r of line.runs) this._cutRun(r, line, starts, runOf, runs);
+      line.runs = runs;
+    }
+  }
+
+  _cutRun(r, line, starts, runOf, out) {
+    // the span holding the run's first unit
+    let lo = 0;
+    let hi = starts.length - 1;
+    while (lo < hi) {
+      const mid = (lo + hi + 1) >> 1;
+      if (starts[mid] <= r.start) lo = mid;
+      else hi = mid - 1;
+    }
+    const hang = (run, source) => {
+      run.span = this._sources[source];
+      run.run = runOf(source, run.rtl);
+      // which span, for a layout found again with another call's spans; out
+      // of sight, so a run is ntk's shape to anything that reads it whole
+      Object.defineProperty(run, '_source', { value: source });
+      return run;
+    };
+    let next = lo + 1;
+    if (next >= starts.length || starts[next] >= r.end) {
+      out.push(hang(r, lo));
+      return;
+    }
+    // where each span that starts inside the run begins, from the line's
+    // origin, as the run's own `x` is measured
+    const edges = [r.start];
+    const at = [r.rtl ? r.x + r.width : r.x];
+    const sources = [lo];
+    for (; next < starts.length && starts[next] < r.end; next += 1) {
+      edges.push(starts[next]);
+      at.push(this._native.layoutCaret(this._handle, starts[next]).x - line.x);
+      sources.push(next);
+    }
+    edges.push(r.end);
+    at.push(r.rtl ? r.x : r.x + r.width);
+    const pieces = [];
+    for (let i = 0; i < sources.length; i += 1) {
+      const a = at[i];
+      const b = at[i + 1];
+      pieces.push(
+        hang(
+          {
+            ...r,
+            start: edges[i],
+            end: edges[i + 1],
+            x: Math.min(a, b),
+            width: Math.abs(b - a),
+          },
+          sources[i],
+        ),
+      );
+    }
+    // a line's runs go left to right, and a right-to-left run's first span
+    // is its rightmost piece
+    if (r.rtl) pieces.reverse();
+    out.push(...pieces);
+  }
+
+  /**
+   * This layout for another call's spans: the same text set the same way,
+   * which is what found it in the cache. Spans that are the same, or read
+   * the same field for field, are the same layout — an immediate-mode caller
+   * that builds its spans afresh every paint is answered with the object it
+   * had. A caller whose markers differ — a link here, plain text there — has
+   * the runs pointed at its own spans, in a copy.
+   */
+  _forSources(sources) {
+    const mine = this._sources;
+    if (
+      !mine ||
+      (mine.length === sources.length &&
+        mine.every((source, i) => sameSpan(source, sources[i])))
+    ) {
+      return this;
+    }
+    const copy = Object.create(CocoaTextLayout.prototype);
+    Object.assign(copy, this);
+    copy._sources = sources;
+    copy.lines = this.lines.map((line) => ({
+      ...line,
+      runs: line.runs.map((r) => {
+        const run = { ...r, span: sources[r._source] };
+        Object.defineProperty(run, '_source', { value: r._source });
+        return run;
+      }),
+    }));
+    return copy;
+  }
+
   draw(ctx, x, y) {
     ctx._drawLayout(this, x, y);
   }
@@ -1084,17 +1205,20 @@ export class CocoaFontManager {
       // refresh LRU position
       this._layouts.delete(signature);
       this._layouts.set(signature, hit);
-      return hit;
+      return hit._forSources(spans.filter((span) => String(span.text ?? '')));
     }
     const { maxWidth, align, lineHeight, maxLines, overflow, direction } =
       options;
     const nativeSpans = [];
+    // the caller's spans with text, which the runs hang off (`_hangRuns`)
+    const sources = [];
     let text = '';
     let contextInk = false;
     for (const span of spans) {
       const t = String(span.text ?? '');
       if (!t) continue;
       text += t;
+      sources.push(span);
       const size = span.size ?? base.size ?? 14;
       const variations = span.variations ?? base.variations;
       // A span may carry the face itself — an ntk Font from openFont(),
@@ -1191,6 +1315,40 @@ export class CocoaFontManager {
       minContent ? laid.map((span) => span.text).join('') : text,
     );
     layout._contextInk = contextInk;
+    if (!minContent) {
+      const runs = new Map();
+      layout._hangRuns(sources, (i, rtl) => {
+        const key = `${i}|${rtl ? 1 : 0}`;
+        let run = runs.get(key);
+        if (!run) {
+          const span = sources[i];
+          const given = span.font ?? base.font;
+          run = {
+            font:
+              typeof given?.metrics === 'function'
+                ? given
+                : this.match(span.family ?? base.family, {
+                    weight: span.weight ?? base.weight,
+                    style: span.style ?? base.style,
+                  }),
+            size: span.size ?? base.size ?? 14,
+            direction: rtl ? 'rtl' : 'ltr',
+          };
+          runs.set(key, run);
+        }
+        return run;
+      });
+      // ntk's `truncated`: whether a line cap dropped anything. An eliding
+      // layout does not say — its last line is cut to the mark, and where
+      // the cut fell is the native's — so a caller asks the line ends.
+      if (!elides) {
+        const last = layout.lines[layout.lines.length - 1];
+        layout.truncated =
+          Number.isFinite(maxLines) &&
+          !!last &&
+          /\S/.test(text.slice(last.end));
+      }
+    }
     this._layouts.set(signature, layout);
     if (this._layouts.size > 64) {
       this._layouts.delete(this._layouts.keys().next().value);

package/src/glnodes.js

@@ -38,6 +38,10 @@ function recordGlxFailure(app, err) {
   if (app && err && !glxFailures.has(app)) glxFailures.set(app, err);
 }
 
+// ChangeWindowAttributes' backing-store value: the server keeps what the
+// window shows while it is mapped (`_create`)
+const BACKING_STORE_WHEN_MAPPED = 1;
+
 // Apps already told that a <glarea>'s children are not drawn on their
 // display. Once per app, as for a <foreign> that cannot embed: the answer
 // belongs to the server, so the next surface to find out carries no news.
@@ -301,6 +305,19 @@ export class GlAreaNode extends Node {
     this.rect = rect;
     this.config = config;
     wnd._reactX11Node = this;
+    // The server keeps what the surface shows while it is mapped (X backing
+    // store), so a pane over it that moves away — a card dragged across a
+    // graph drawn in GL — uncovers the last frame at once. Without it the
+    // uncovered pixels were the pane's until the surface drew again: an
+    // Expose, a frame requested, and the next vblank, which is a trail of
+    // the card behind it on every step. ntk forwards no backing-store
+    // attribute (its `backingStore` is its own double buffer), and a
+    // backend with no X connection has none to set.
+    if (typeof this.app.X?.ChangeWindowAttributes === 'function') {
+      this.app.X.ChangeWindowAttributes(wnd.id, {
+        backingStore: BACKING_STORE_WHEN_MAPPED,
+      });
+    }
     // Above everything 2D in the owning window on both backends, and above
     // every surface made before this one: X stacks a new child window over
     // its siblings, and Core Animation a layer added later over one at the
@@ -328,6 +345,15 @@ export class GlAreaNode extends Node {
     this.gl?.ready?.catch((err) => {
       if (!this.destroyed) this._failed(err, { reported: true });
     });
+    // …and a context that fails after it was ready — a swap the driver
+    // refused mid-life — says so here (ntk >= 8.12.11). Before ntk said so,
+    // the surface kept its last frame, or nothing, with no word to anyone:
+    // on NVIDIA every resize did that (sidorares/ntk#399).
+    if (this.gl && 'onError' in this.gl) {
+      this.gl.onError = (err) => {
+        if (!this.destroyed) this._failed(err);
+      };
+    }
     wnd.on?.('expose', () => this.requestFrame());
     wnd.map?.();
     // made on top of its siblings — over the panes of children that were