react-x11 2.17.0 → 2.17.1

package/package.json

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

package/src/cocoa/app.js

@@ -41,7 +41,7 @@ import { CocoaFontManager } from './fonts.js';
 import { releaseImageUpload } from '../backend/context2d.js';
 import { CocoaSurface } from './surface.js';
 import { CocoaSymbols } from './symbols.js';
-import { CocoaWindow } from './window.js';
+import { CocoaWindow, FRAME_SLACK_MS } from './window.js';
 import { decodeKey, modifierMask } from './keymap.js';
 import { loadNative } from './native.js';
 import { requestAppKit, threadedChannel } from './threaded.js';
@@ -55,9 +55,6 @@ import { requestAppKit, threadedChannel } from './threaded.js';
 // bridge that does not report it: a 60Hz floor every Mac clears.
 const RAF_INTERVAL_MS = 16;
 const PUMP_INTERVAL_MS = 8;
-// How early a pump tick may take a frame that is not quite due, in ms — the
-// drift of a timer, not a fraction of the pump (`_frameDue`).
-const FRAME_SLACK_MS = 1;
 // Threaded mode's live-resize handshake (windowkit/appkit#53): how long
 // AppKit may hold a resize tick for a frame painted at the new size, in ms.
 // The edge moves when the delegate returns, so the budget is how long a
@@ -906,6 +903,13 @@ export class CocoaApp {
    * tick alone still does is pump AppKit's events, which is what
    * `pumpInterval` stays the cadence of. With no pump at all — threaded
    * mode, where `_pumpInterval` is Infinity — every frame is one of these.
+   *
+   * The wait is rounded **up** to whole milliseconds, because `setTimeout`
+   * only counts those: a 120Hz panel's 8.333ms gate rounded to 8 fired
+   * before the clock would take the frame, which cost a second timer per
+   * frame to cover the last third of a millisecond. Rounding up costs the
+   * grid nothing — `_frameDue` anchors the next slot to the last one, not
+   * to when the frame ran — and lands on the first tick the clock accepts.
    */
   _armFrameTimer(wait, now) {
     if (!(wait > 0 && wait < this._pumpInterval)) return;
@@ -922,7 +926,7 @@ export class CocoaApp {
         this._tickFrames();
         this._presentAll();
       },
-      Math.max(1, Math.round(wait)),
+      Math.max(1, Math.ceil(wait)),
     );
   }
 

package/src/cocoa/glarea.js

@@ -231,6 +231,16 @@ export class CocoaGLArea {
     return this.parent.requestAnimationFrame(cb);
   }
 
+  /**
+   * The owning window's clock, asked where a gate of `interval` ms lands
+   * on its grid (`CocoaWindow.nextFrameAt`) — the swap gate phase-locks to
+   * it so the two do not stack. A parent with no clock (a bare stub in a
+   * test) answers one interval from now, the old swap-relative wait.
+   */
+  nextFrameAt(interval) {
+    return this.parent.nextFrameAt?.(interval) ?? performance.now() + interval;
+  }
+
   getContext(kind, config) {
     if (kind !== 'opengl' || this.destroyed) return null;
     if (!this._context) {
@@ -262,7 +272,10 @@ function createGLAreaContext(runtime, area, config) {
   let back = null;
   let width = 0;
   let height = 0;
-  let gateClosed = false;
+  // The moment the swap gate reopens, on the window clock's grid — not a
+  // boolean a timer flips, so a frame that arrives a fraction of a
+  // millisecond before its own timer still reads the true state.
+  let gateOpenAt = -Infinity;
   let gateTimer = null;
   let destroyed = false;
 
@@ -289,7 +302,17 @@ function createGLAreaContext(runtime, area, config) {
   // one, so the honest gate is one display period per swap — the same
   // timer-reopened gate the XQuartz CGL flavor uses (no backpressure
   // exists on either).
-  ctx.canRender = () => !destroyed && !gateClosed;
+  //
+  // One period *per frame*, though, not per swap: timed from the swap the
+  // gate reopened at `slot + drawCost + period`, which overshoots the
+  // window clock's next slot however cheap the frame, and the clock then
+  // rounded it up to the slot after — two display periods, a 120Hz panel
+  // pinned at 60fps whatever the scene cost (issue #631). Anchored to the
+  // slot the frame was due at (`CocoaWindow.nextFrameAt`) the two gates
+  // are on one grid: the clock cannot take a frame the gate would refuse,
+  // because both are the same instant, and the gate still never lets two
+  // frames into one period.
+  ctx.canRender = (now = performance.now()) => !destroyed && now >= gateOpenAt;
 
   ctx.makeCurrent = () => {
     if (destroyed) return;
@@ -305,6 +328,26 @@ function createGLAreaContext(runtime, area, config) {
     runtime.gl.bindFramebuffer(target, fb == null ? (back?.fbo ?? 0) : fb);
   };
 
+  // A frame refused by the gate has nothing else to wake it, so the gate
+  // says when it opens. `setTimeout` counts whole milliseconds and a
+  // display period is rarely one (8.333 at 120Hz), so a timer that lands
+  // early re-arms rather than announcing a gate that is still shut.
+  const armGate = () => {
+    if (gateTimer || destroyed) return;
+    const wait = gateOpenAt - performance.now();
+    gateTimer = setTimeout(
+      () => {
+        gateTimer = null;
+        if (destroyed) return;
+        if (performance.now() < gateOpenAt) armGate();
+        else ctx.onFrameAvailable?.();
+      },
+      Math.max(1, Math.ceil(wait)),
+    );
+    // the timer must not hold the process open for an idle scene
+    gateTimer.unref?.();
+  };
+
   ctx.SwapBuffers = () => {
     if (destroyed || !back) return;
     runtime.gl.flush();
@@ -312,14 +355,9 @@ function createGLAreaContext(runtime, area, config) {
     const shown = back;
     back = front;
     front = shown;
-    gateClosed = true;
-    gateTimer = setTimeout(() => {
-      gateTimer = null;
-      gateClosed = false;
-      ctx.onFrameAvailable?.();
-    }, runtime.frameInterval);
-    // the timer must not hold the process open for an idle scene
-    gateTimer.unref?.();
+    // one display period from the frame's slot, not from this moment
+    gateOpenAt = area.nextFrameAt(runtime.frameInterval);
+    armGate();
   };
 
   ctx._resized = () => {

package/src/cocoa/window.js

@@ -12,6 +12,11 @@ import { CocoaLayerPresenter } from './presenter.js';
 import { CocoaPromotion } from './promotion.js';
 
 let nextWindowId = 1;
+// The slack a frame clock allows under its interval, in ms: a timer's drift
+// and no more (`CocoaApp._frameDue`, `_frameWait`, `nextFrameAt`). It lives
+// here because the window is the clock — `_rafLast` and `_frameInterval`
+// are its fields — and the app imports it from this side.
+export const FRAME_SLACK_MS = 1;
 // How long a worker's flip may hold its window's next frame (`_armFence`).
 // The release is reported once the replacing frame has committed, a
 // fraction of a millisecond later, and a window must not freeze on a report
@@ -910,6 +915,22 @@ export class CocoaWindow {
     return this.app._requestFrame(cb, this);
   }
 
+  /**
+   * 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
+   * is the clock's own.
+   *
+   * It is the grid `_frameDue` decides on, not the wall clock: the anchor
+   * is the slot the running frame was *due* at, so the answer does not
+   * move with how long that frame took or how late its timer fired. A
+   * second gate that wants to compose with this clock rather than be
+   * rounded up by it has to land on this grid — which is what a
+   * `<glarea>`'s swap gate reads it for (src/cocoa/glarea.js).
+   */
+  nextFrameAt(interval = this._frameInterval) {
+    return this._rafLast + interval - FRAME_SLACK_MS;
+  }
+
   /**
    * Push the backing surface at the WindowServer, if anything drew — and
    * tell the window node what it cost. The flip itself is cheap, and the

package/src/glnodes.js

@@ -376,18 +376,21 @@ export class GlAreaNode extends Node {
       typeof this.window.requestAnimationFrame === 'function'
         ? (cb) => this.window.requestAnimationFrame(cb)
         : (cb) => setImmediate(cb);
-    schedule(() => {
+    // the frame clock's own timestamp, not a fresh reading: a gate that
+    // composes with that clock is answered from the same moment it is
+    // (`canRender` on the Cocoa surface, issue #631)
+    schedule((now) => {
       this._frameScheduled = false;
-      this._drawFrame();
+      this._drawFrame(now);
     });
   }
 
-  _drawFrame() {
+  _drawFrame(now) {
     const pacer = this._pacer;
     pacer.began();
     let drawn = false;
     try {
-      drawn = this._drawFrameNow();
+      drawn = this._drawFrameNow(now);
     } finally {
       pacer.ended(undefined, drawn);
     }
@@ -397,14 +400,14 @@ export class GlAreaNode extends Node {
   }
 
   /** The frame itself; true when it drew. */
-  _drawFrameNow() {
+  _drawFrameNow(now) {
     const gl = this.gl;
     if (!gl || this.destroyed) return false;
     const direct = gl.backend === 'direct';
     // On the direct backend every buffer may still be held by the display,
     // and drawing into one before it comes back would paint what is on
     // screen. `onFrameAvailable` asks for this frame again when one frees.
-    if (direct && gl.canRender && !gl.canRender()) {
+    if (direct && gl.canRender && !gl.canRender(now)) {
       this._frameRefused = true;
       return false;
     }