react-x11 2.47.0 → 2.47.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.47.0",
+  "version": "2.47.2",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -109,7 +109,7 @@
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.27.0",
+    "@windowkit/appkit": "^0.28.0",
     "@windowkit/wayland": "^3.1.1",
     "@windowkit/win32": "^0.0.9",
     "dbus-native": "^0.16.0",

package/src/nodes/window/listeners.js

@@ -41,12 +41,13 @@ export class WindowListeners {
       // is theirs. Growing it back under a user who has just made it smaller
       // is the one behaviour worse than not fitting the content.
       //
-      // Checked against `_requestedSize` rather than ntk's `ev.resized`
-      // because our own configures come back as echoes, and every one of
-      // them would otherwise read as the user taking over on the first
-      // re-fit.
-      const asked = this._requestedSize;
-      if (asked && (ev.width !== asked.width || ev.height !== asked.height)) {
+      // Checked against the sizes we asked for rather than ntk's
+      // `ev.resized`, because our own configures come back as echoes, and
+      // every one of them would otherwise read as the user taking over on
+      // the first re-fit — and against all of them still in flight, not
+      // only the latest, because a move echo or an earlier re-fit's can land
+      // after the record moved on (#929, `_ownSize`).
+      if (this._requestedSize && !this._ownSize(ev)) {
         this._userSized = true;
       }
       // Where the window sits on screen decides where popups anchored to it

package/src/nodes/window/size.js

@@ -46,6 +46,10 @@ const NO_SCOPED_FLOORS = process.env.REACT_X11_NO_SCOPED_FLOORS === '1';
 // …and for the width pass reading only the extents a floor is written from
 // (`markUnreadLeaves`): with it set, every leaf is shaped at no width again.
 const NO_UNREAD_WIDTHS = process.env.REACT_X11_NO_UNREAD_WIDTHS === '1';
+// How many sizes an `'auto'` window keeps as asked for and not yet echoed
+// (`_askSize`). Echoes come back within a round trip, so a re-fit a frame
+// is a handful at most.
+const SIZES_IN_FLIGHT = 8;
 
 /** Take a node's extents off, as `collectFloorStale` does a dirty child's:
  *  both are measured again, and the minimum yoga holds may no longer be
@@ -995,7 +999,7 @@ export class WindowSize {
     if (asked && next.width === asked.width && next.height === asked.height) {
       return;
     }
-    this._requestedSize = { width: next.width, height: next.height };
+    this._askSize({ width: next.width, height: next.height });
     // Asked for, not assumed. `window.width` stays what the server last said
     // until the ConfigureNotify lands, and this frame lays out against that
     // — the echo brings `needsLayout` and an unbounded repaint with it (see
@@ -1038,6 +1042,57 @@ export class WindowSize {
     );
   }
 
+  /**
+   * Record a size this window has asked the backend for. `_requestedSize`
+   * is the latest, which `_refit()` compares against to ask only once; the
+   * echoes still to come are kept beside it, because every one of them is
+   * ours and none has to be the latest (`_ownSize`).
+   */
+  _askSize(size) {
+    this._requestedSize = size;
+    const flight = (this._sizesInFlight ??= []);
+    flight.push(size);
+    // A backend that never echoes — a mock — would grow this for ever, and
+    // a size asked for this many re-fits ago is not coming back.
+    if (flight.length > SIZES_IN_FLIGHT) flight.shift();
+  }
+
+  /**
+   * Whether a resize event's size is one this window chose, as opposed to
+   * the user or the window manager choosing it — the question that ends an
+   * `'auto'` window's tracking for good. Settles the record either way.
+   *
+   * Not "is it the latest size asked for" (#929). Two kinds of echo are ours
+   * and carry another size. A **move** reports the size the window has, and
+   * when it reached the server before a resize that was already asked for —
+   * a popup re-anchored by the same re-fit, an `x` prop moving with the
+   * content — it lands after the record moved on. And a re-fit asked for
+   * before the last one was answered has its echo arrive with the size it
+   * asked for, not the one asked for since. So an event is ours when its
+   * size is the one the server last reported (nothing was resized at all:
+   * a move, or a request the manager refused), or one still in flight —
+   * which spends it, and every one asked for before it, since the server
+   * answers in order. Anything else is somebody else's size: the user and
+   * a window manager can only ever *change* it.
+   */
+  _ownSize(ev) {
+    const is = (size) =>
+      size && size.width === ev.width && size.height === ev.height;
+    const confirmed = this._confirmedSize;
+    this._confirmedSize = { width: ev.width, height: ev.height };
+    // the confirmed size first: a size that came round again (A → B → A)
+    // is in flight too, and spending it there would spend B with it
+    if (is(confirmed)) return true;
+    const flight = this._sizesInFlight ?? [];
+    const at = flight.findIndex(is);
+    if (at < 0) {
+      flight.length = 0;
+      return false;
+    }
+    flight.splice(0, at + 1);
+    return true;
+  }
+
   /** One layout pass at the window's size, with the content floors it
    *  needs: fresh ones when something changed them, the ones in hand during
    *  a live resize, none when nothing moved them. */

package/src/nodes/window/window.js

@@ -271,6 +271,10 @@ export class WindowNode extends Scrollable(Node) {
     // the only thing that ever does is the user dragging an edge.
     this._requestedSize = null;
     this._userSized = false;
+    // what the server last reported, and the sizes asked for since that it
+    // has not echoed yet: both are ours when an echo carries them (_ownSize)
+    this._confirmedSize = null;
+    this._sizesInFlight = [];
     // the last `WM_NORMAL_HINTS` struct written and the size it was written
     // at, so that a bound measured every frame is only *sent* on the frames
     // it moves (see _sendSizeHints for why the size is part of it)
@@ -409,6 +413,7 @@ export class WindowNode extends Scrollable(Node) {
     // resize echo is compared against, so it has to be the size the echo
     // will carry (#586, `_snapSize`).
     this._requestedSize = { width: wnd.width, height: wnd.height };
+    this._confirmedSize = this._requestedSize;
     // Now that the visual is known: settle the capabilities, re-resolve any
     // `@supports` block against them, and start following the compositor.
     // Before the first paint, and before children realize against it.
@@ -862,10 +867,12 @@ export class WindowNode extends Scrollable(Node) {
     const geo = scaleWindowGeometry(newProps, this.scale);
     if (sizeChanged) {
       this._userSized = false;
-      this._requestedSize = this._snapSize({
-        width: isAutoSize(geo.width) ? wnd.width : geo.width,
-        height: isAutoSize(geo.height) ? wnd.height : geo.height,
-      });
+      this._askSize(
+        this._snapSize({
+          width: isAutoSize(geo.width) ? wnd.width : geo.width,
+          height: isAutoSize(geo.height) ? wnd.height : geo.height,
+        }),
+      );
     }
     if (geometryChanged) {
       if (typeof wnd.setState === 'function') {

package/src/wayland/glcontext.js

@@ -255,7 +255,11 @@ export class WaylandGLContext {
     if (this.destroyed) return null;
     const w = this.window.bufferWidth;
     const h = this.window.bufferHeight;
-    const surface = this.chain.surfaceFor(w, h);
+    // a window whose viewport shows part of a buffer keeps its buffers
+    // through a resize that fits them (`surfaceFor`'s slack)
+    const surface = this.chain.surfaceFor(w, h, {
+      slack: this.window.showsPartOfBuffer === true,
+    });
     this._surface = surface;
     this.gpu.makeCurrent(surface);
     let resized = false;
@@ -321,11 +325,12 @@ export class WaylandGLContext {
     // next buffer might be missing. Then the GPU work is settled (optionally
     // through a fence rather than a stall) before the swap hands it over.
     const rects = this.chain.blitHint(damage);
+    // into the top left of a buffer that may be larger than the window
     this.backing.blitTo(
       null,
       rects === 'all' ? null : rects,
-      this.chain.width,
-      this.chain.height,
+      this.chain.allocWidth,
+      this.chain.allocHeight,
     );
     await this._settleGpu();
 
@@ -338,6 +343,9 @@ export class WaylandGLContext {
     // is EGL_BAD_SURFACE (0x300d): the second window of examples/windows.jsx.
     this.gpu.makeCurrent(this._surface);
     const presented = await this.chain.swap(damage);
+    // the part of the buffer just attached that is the window — only with a
+    // buffer, since the one shown otherwise is the last, of its own size
+    if (presented) win.showBufferPart?.(this.chain.width, this.chain.height);
     // `swap` attached and damaged but did not commit; and when nothing went
     // out — every buffer busy — the frame request still needs a commit to be
     // delivered. Either way, exactly one commit.

package/src/wayland/swapchain.js

@@ -59,6 +59,20 @@ import { importDmabuf, DmabufRefused } from './dmabuf.js';
 /** How many frames may be in the compositor's hands at once. */
 const DEFAULT_MAX_IN_FLIGHT = 2;
 
+/**
+ * Buffers are made a multiple of this larger than the window where they
+ * may be (`slack`), so that a resize a few pixels at a time — a window edge
+ * dragged — shows a different part of the same buffers rather than making
+ * new ones at every step.
+ */
+const SLACK_STEP = 128;
+/** A visible area this many times smaller than the buffers makes them
+ *  again, smaller: a window shrunk far is not to hold its old size's
+ *  memory. */
+const SLACK_SHRINK = 4;
+/** Frames at one size before buffers grown for a drag are cut back to it. */
+const SLACK_SETTLE = 60;
+
 /**
  * Damage sets are kept small: past a handful of rectangles the bookkeeping
  * costs more than the full-surface copy it is trying to avoid, and the
@@ -92,8 +106,14 @@ export class WaylandSwapchain {
     this.gbm = null;
     /** `${generation}:${key}` -> { wlBuffer, busy, damage, key, generation } */
     this.buffers = new Map();
+    /** the part of each buffer shown: the window's buffer size */
     this.width = 0;
     this.height = 0;
+    /** the buffers' own size, at least the part shown (`slack`) */
+    this.allocWidth = 0;
+    this.allocHeight = 0;
+    /** frames since the size shown last changed */
+    this._sameSize = 0;
     /** set once the compositor has refused a tiled buffer */
     this.linear = false;
     /** swaps since a buffer was last seen for the first time */
@@ -111,14 +131,66 @@ export class WaylandSwapchain {
   /**
    * Point the chain at a size.
    *
+   * With `slack` — where the window has a viewport, whose source rectangle
+   * shows part of a buffer — the buffers are made larger than the size and
+   * kept while it fits in them: dragging a window's edge used to make the
+   * chain's buffers again at every step, and import each one into the
+   * compositor, a dozen requests and a GPU allocation a step. Without it,
+   * the buffers are the size exactly, as a surface with no viewport shows
+   * all of its buffer.
+   *
+   * @param {number} width
+   * @param {number} height
+   * @param {{ slack?: boolean }} [opts]
    * @returns the GBM surface to draw into
    */
-  surfaceFor(width, height) {
+  surfaceFor(width, height, { slack = false } = {}) {
     const w = Math.max(1, Math.round(width));
     const h = Math.max(1, Math.round(height));
-    if (!this.gbm) return this._create(w, h);
-    if (w === this.width && h === this.height) return this.gbm;
+    if (!this.gbm) {
+      const [aw, ah] = slack ? slackFor(w, h, 1) : [w, h];
+      this._create(aw, ah);
+      this.width = w;
+      this.height = h;
+      return this.gbm;
+    }
+    if (w === this.width && h === this.height) {
+      // A size held a while is given buffers its own size again, where a
+      // drag left them larger than it needs.
+      if (
+        ++this._sameSize === SLACK_SETTLE &&
+        (this.allocWidth !== w || this.allocHeight !== h)
+      ) {
+        const [aw, ah] = slack ? slackFor(w, h, 1) : [w, h];
+        if (aw !== this.allocWidth || ah !== this.allocHeight)
+          this._resize(aw, ah);
+      }
+      return this.gbm;
+    }
+    this._sameSize = 0;
+    if (
+      slack &&
+      w <= this.allocWidth &&
+      h <= this.allocHeight &&
+      w * h * SLACK_SHRINK >= this.allocWidth * this.allocHeight
+    ) {
+      // The buffers hold it: show another part of them. What each holds is
+      // of the old size, so all of it is owed to it.
+      this.width = w;
+      this.height = h;
+      for (const entry of this.buffers.values()) entry.damage = 'all';
+      return this.gbm;
+    }
+    const growing = w > this.allocWidth || h > this.allocHeight;
+    const [aw, ah] = slack ? slackFor(w, h, growing ? 1.25 : 1) : [w, h];
+    this._resize(aw, ah);
+    this.width = w;
+    this.height = h;
+    return this.gbm;
+  }
 
+  /** Give the chain buffers of this size, keeping its GBM surface. */
+  _resize(w, h) {
     // In place: the handle stays valid, the context keeps its GL objects and
     // stays current. Buffers from the old generation are gone, so their
     // `wl_buffer`s go with them — the compositor may still be showing one, so
@@ -132,14 +204,13 @@ export class WaylandSwapchain {
           { cause: err },
         ),
       );
-      return this.gbm;
+      return;
     }
     this._dropBuffers();
-    this.width = w;
-    this.height = h;
+    this.allocWidth = w;
+    this.allocHeight = h;
     this.inFlight = 0;
     this._swapsSinceNew = 0;
-    return this.gbm;
   }
 
   _create(w, h) {
@@ -157,8 +228,8 @@ export class WaylandSwapchain {
         { cause: err },
       );
     }
-    this.width = w;
-    this.height = h;
+    this.allocWidth = w;
+    this.allocHeight = h;
     this._swapsSinceNew = 0;
     return this.gbm;
   }
@@ -285,7 +356,8 @@ export class WaylandSwapchain {
       this.policy.linearFallback &&
       !this.linear
     ) {
-      const { width, height } = this;
+      // the buffers again, at the size they were: the part shown stays
+      const { allocWidth: width, allocHeight: height } = this;
       this.linear = true;
       this._dropBuffers();
       try {
@@ -409,3 +481,14 @@ export function unionDamage(a, b) {
   const merged = [...a, ...b];
   return merged.length > MAX_RECTS ? 'all' : merged;
 }
+
+/**
+ * Buffers for a size, with room to grow: each side rounded up to a
+ * multiple of `SLACK_STEP`, after `grow` — 1.25 for a size outgrowing the
+ * buffers it had, so a window dragged wider makes a few sets of buffers
+ * rather than one a bucket.
+ */
+function slackFor(w, h, grow) {
+  const up = (v) => Math.ceil((v * grow) / SLACK_STEP) * SLACK_STEP;
+  return [up(w), up(h)];
+}

package/src/wayland/window.js

@@ -182,6 +182,8 @@ export class WaylandWindow extends EventEmitter {
       this._onConfigured = resolve;
     });
     this._viewport = null;
+    /** the part of the buffer the viewport shows, once one is attached */
+    this._shownPart = null;
     this._fractional = null;
     this._geometry = null;
     /** the xdg-decoration object, where the compositor has the protocol (ssd.js) */
@@ -545,6 +547,31 @@ export class WaylandWindow extends EventEmitter {
     }
   }
 
+  /**
+   * Whether the surface shows a part of its buffer, the top left
+   * `bufferWidth` by `bufferHeight` of it, rather than all of it: where the
+   * compositor has a viewport to say so. The buffer may then be larger than
+   * the window, and is kept as the window is resized within it.
+   */
+  get showsPartOfBuffer() {
+    return this._viewport !== null;
+  }
+
+  /**
+   * Show the top left `width` by `height` of the buffer the next commit
+   * attaches (`showsPartOfBuffer`). Only with a commit that attaches one at
+   * least that large: a source rectangle past the buffer shown is a protocol
+   * error, and a commit with no new buffer — every buffer busy, a configure
+   * acked — shows the old one. In buffer pixels, the buffer scale being 1.
+   */
+  showBufferPart(width, height) {
+    if (!this._viewport) return;
+    const shown = this._shownPart;
+    if (shown && shown.width === width && shown.height === height) return;
+    this._shownPart = { width, height };
+    this._viewport.$.set_source(0, 0, width, height);
+  }
+
   /** The size the backing buffer has to be for the current scale. */
   get bufferWidth() {
     return Math.max(1, Math.round(this.width * this.scale));