react-x11 2.47.0 → 2.47.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.47.0",
+  "version": "2.47.1",
   "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/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));