react-x11 2.18.0 → 2.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.18.0",
+  "version": "2.18.2",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [

package/src/cocoa/app.js

@@ -85,6 +85,17 @@ const SCREEN_POLL_MS = 500;
 // have finished moving the window (`_recheckScreens`).
 const SCREEN_RECHECK_MS = 1000;
 
+/** One frame callback; a throw is reported, not allowed to end the tick. */
+function runFrame(entry, now) {
+  try {
+    entry.cb(now);
+  } catch (err) {
+    queueMicrotask(() => {
+      throw err;
+    });
+  }
+}
+
 export class CocoaApp {
   constructor(native, options = {}) {
     this._native = native;
@@ -92,7 +103,7 @@ export class CocoaApp {
     // CocoaWindow._key -> CocoaWindow: the number, or on a worker the handle
     this._windows = new Map();
     this._grabWindow = null;
-    this._rafQueue = []; // [{ cb, wnd }]
+    this._rafQueue = []; // [{ cb, wnd, surface }]
     // the app's own frame clock, for a frame no window owns (a pane's)
     this._rafLast = 0;
     // an explicit interval applies to every window; null means each
@@ -843,8 +854,8 @@ export class CocoaApp {
    * paced claim (src/pacing.js) land at its wait rather than at its wait
    * rounded up to the pump.
    */
-  _requestFrame(cb, wnd = null) {
-    this._rafQueue.push({ cb, wnd });
+  _requestFrame(cb, wnd = null, surface = false) {
+    this._rafQueue.push({ cb, wnd, surface });
     if ((this._pump || this._threaded) && this._rafQueue.length === 1) {
       const now = performance.now();
       this._armFrameTimer(Math.max(1, this._frameWait(wnd ?? this, now)), now);
@@ -947,6 +958,14 @@ export class CocoaApp {
     const queue = this._rafQueue;
     this._rafQueue = [];
     let soonest = Infinity;
+    // A `<glarea>`'s frames, due in this tick, run after every window's
+    // own: its children are laid out, painted and presented in the window's
+    // flush, so a GL frame drawn ahead of that flush reached the screen
+    // under the overlay of the frame before — for as long as the flush took,
+    // which is more than a display frame when the change costs layout
+    // (issue #641). The Wayland backend orders them the same way
+    // (`requestSurfaceFrame`).
+    const surfaces = [];
     for (const entry of queue) {
       // A window whose last flip has not reached its layer yet (threaded
       // mode's fence, `CocoaWindow.frameInFlight`) waits before
@@ -974,14 +993,10 @@ export class CocoaApp {
         this._rafQueue.push(entry);
         continue;
       }
-      try {
-        entry.cb(now);
-      } catch (err) {
-        queueMicrotask(() => {
-          throw err;
-        });
-      }
+      if (entry.surface) surfaces.push(entry);
+      else runFrame(entry, now);
     }
+    for (const entry of surfaces) runFrame(entry, now);
     this._armFrameTimer(soonest, now);
   }
 

package/src/cocoa/glarea.js

@@ -28,6 +28,8 @@
 // so the ladder is visible before it is built. Policy decides, the machine
 // answers — the same rule the GL policy follows everywhere else.
 
+import { withoutActions } from './quiet.js';
+
 const RUNGS = ['auto', 'gl'];
 const KNOWN_RUNGS = ['auto', 'gl', 'gles', 'webgpu'];
 
@@ -145,8 +147,11 @@ export class CocoaGLArea {
     this.scale = this.parent.scale ?? app.scale ?? 1;
     this.destroyed = false;
     this._reactX11Node = null;
-    this.layer = this._native.createLayer();
-    this._native.addSublayer(this.parent._layer, this.layer);
+    this.layer = withoutActions(this._native, () => {
+      const layer = this._native.createLayer();
+      this._native.addSublayer(this.parent._layer, layer);
+      return layer;
+    });
     this.rect = null;
     this.setState({
       x: options.x ?? 0,
@@ -227,8 +232,9 @@ export class CocoaGLArea {
     for (const fn of this._listeners.get(name) ?? []) fn(ev);
   }
 
+  // on the owning window's clock, after its flush in the same tick (#641)
   requestAnimationFrame(cb) {
-    return this.parent.requestAnimationFrame(cb);
+    return this.parent.requestSurfaceFrame(cb);
   }
 
   /**
@@ -254,7 +260,9 @@ export class CocoaGLArea {
     this.destroyed = true;
     this._context?._destroy();
     this._context = null;
-    this._native.removeFromSuperlayer(this.layer);
+    withoutActions(this._native, () =>
+      this._native.removeFromSuperlayer(this.layer),
+    );
   }
 }
 

package/src/cocoa/overlay.js

@@ -15,6 +15,7 @@
 // was painted on the layer: ntk blits an X window's backing store on its
 // own, where a layer's contents are a copy the bitmap has to be pushed to.
 import { BackendContext2D } from '../backend/context2d.js';
+import { withoutActions } from './quiet.js';
 
 export const OVERLAY_Z = 1e7 + 1;
 
@@ -25,8 +26,11 @@ export class CocoaOverlayPane {
     this._native = app._native;
     this.scale = this.parent.scale ?? app.scale ?? 1;
     this.destroyed = false;
-    this.layer = this._native.createLayer();
-    this._native.addSublayer(this.parent._layer, this.layer);
+    this.layer = withoutActions(this._native, () => {
+      const layer = this._native.createLayer();
+      this._native.addSublayer(this.parent._layer, layer);
+      return layer;
+    });
     this.rect = null;
     this._surface = null;
     this._surfaceSize = null;
@@ -154,6 +158,11 @@ export class CocoaOverlayPane {
     this.destroyed = true;
     this._release();
     this._ctx = null;
-    this._native.removeFromSuperlayer(this.layer);
+    // Actions off, or the layer fades out over a quarter of a second, what
+    // the children last painted going translucent over a surface still
+    // drawing (#638).
+    withoutActions(this._native, () =>
+      this._native.removeFromSuperlayer(this.layer),
+    );
   }
 }

package/src/cocoa/panehost.js

@@ -3,13 +3,18 @@
 // contents are whatever IOSurface the pane process last presented. The pane
 // owns its buffers and its drawing; this side owns the layer, the layout
 // and the input — CPU offloading, not isolation (docs/frame.md).
+import { withoutActions } from './quiet.js';
+
 export class CocoaPaneHost {
   constructor(app, wnd) {
     this.app = app;
     this.wnd = wnd;
     this._native = app._native;
-    this.layer = this._native.createLayer();
-    this._native.addSublayer(wnd._layer, this.layer);
+    this.layer = withoutActions(this._native, () => {
+      const layer = this._native.createLayer();
+      this._native.addSublayer(wnd._layer, layer);
+      return layer;
+    });
     this.destroyed = false;
     this._rect = null;
   }
@@ -73,6 +78,8 @@ export class CocoaPaneHost {
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
-    this._native.removeFromSuperlayer(this.layer);
+    withoutActions(this._native, () =>
+      this._native.removeFromSuperlayer(this.layer),
+    );
   }
 }

package/src/cocoa/panewindow.js

@@ -99,6 +99,11 @@ export class CocoaPaneWindow {
     return this.app._requestFrame(cb);
   }
 
+  /** A `<glarea>`'s frame, after this pane's own (`CocoaWindow`'s). */
+  requestSurfaceFrame(cb) {
+    return this.app._requestFrame(cb, null, true);
+  }
+
   /**
    * Whether the host may still be showing the frame before the last one —
    * the gate `flushPendingFrames` (src/frames.js) is written around: a

package/src/cocoa/quiet.js

@@ -0,0 +1,13 @@
+// Layer changes with Core Animation's implicit actions off, for a layer
+// that is ours rather than a presenter's (a <glarea>'s surface and overlay,
+// a frame pane's host): no frame's transaction covers it, so a bare
+// `addSublayer` or `removeFromSuperlayer` takes the default quarter-second
+// order-in or order-out fade, and a bare property set tweens.
+export function withoutActions(native, fn) {
+  native.txBegin({ disableActions: true });
+  try {
+    return fn();
+  } finally {
+    native.txCommit();
+  }
+}

package/src/cocoa/window.js

@@ -915,6 +915,15 @@ export class CocoaWindow {
     return this.app._requestFrame(cb, this);
   }
 
+  /**
+   * A `<glarea>`'s frame: on this window's clock, and after this window's
+   * own frame in the tick that runs both, so the GL frame goes out after
+   * the overlay its children were painted on (src/cocoa/glarea.js).
+   */
+  requestSurfaceFrame(cb) {
+    return this.app._requestFrame(cb, this, true);
+  }
+
   /**
    * The earliest moment this window's clock will hand out another frame,
    * for a gate of `interval` ms — the display's period by default, which