react-x11 2.17.0 → 2.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "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/events.js

@@ -1270,7 +1270,9 @@ export class EventManager {
       // arrive
       if (!rect?.width || !rect.height) continue;
       if (node.hidden || node.style.display === 'none') continue;
-      if (node.style.pointerEvents === 'none') continue;
+      // neither value lets the pointer arrive at the node itself
+      const pe = node.style.pointerEvents;
+      if (pe === 'none' || pe === 'box-none') continue;
       const eta =
         speed < ATTENTION_MIN_SPEED
           ? attentionEta(native.x, native.y, 0, 0, rect)

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;
     }
@@ -415,8 +418,9 @@ export class GlAreaNode extends Node {
     const { width, height } = this.rect;
     // x/y are where the node's origin sits in the drawable being drawn
     // into (DrawInfo's contract) — a <glarea> draws into its own X window,
-    // so that is the origin.
-    const info = { width, height, x: 0, y: 0, node: this };
+    // so that is the origin. width/height are device pixels; `scale` takes
+    // them back to logical ones.
+    const info = { width, height, x: 0, y: 0, scale: this.scale, node: this };
     if (!this._created) {
       this._created = true;
       this.props.onCreated?.(gl, info);
@@ -478,7 +482,9 @@ export class GlAreaNode extends Node {
    * by those. With no GL surface — not made yet, or given up after
    * `onError` — only the children answer, and a point between them is the
    * tree's. Hidden, or `pointerEvents: 'none'` here or above, lets the
-   * pointer through to what the tree has behind, as it does for any node.
+   * pointer through to what the tree has behind, as it does for any node;
+   * `'box-none'` here does the same for the surface alone and still lets
+   * its children take the pointer.
    */
   hitSurface(x, y) {
     const panes = this._overlay?.panes.length ?? 0;
@@ -507,6 +513,10 @@ export class GlAreaNode extends Node {
         if (hit) return hit;
       }
     }
+    // `box-none`: the children above answered for themselves, and the
+    // surface between them is not a target — the point goes on to the tree
+    // behind, as it does for any node with that value
+    if (this.style?.pointerEvents === 'box-none') return null;
     return this.window ? this : null;
   }
 

package/src/nodes/hittest.js

@@ -170,16 +170,19 @@ export class NodeHitTest {
       return null;
     }
     const inside = this.containsPoint(x, y);
+    // `box-none`: the children are targets and this node is not — a point
+    // over its own area goes to whatever is behind it
+    const self = this.style.pointerEvents !== 'box-none';
     // the children are culled on the strict rect — slop grows this node's
     // target, not the region its clip lets through
     if (!inside && this.clipsChildren()) {
-      return this.containsPointWithSlop(x, y) ? this : null;
+      return self && this.containsPointWithSlop(x, y) ? this : null;
     }
     const order = this.paintOrder();
     for (let i = order.length - 1; i >= 0; i--) {
       const hit = order[i].hitTest(x, y);
       if (hit) return hit;
     }
-    return inside || this.containsPointWithSlop(x, y) ? this : null;
+    return self && (inside || this.containsPointWithSlop(x, y)) ? this : null;
   }
 }

package/src/types/style.d.ts

@@ -72,7 +72,14 @@ export type JustifyItems = 'flex-start' | 'center' | 'flex-end' | 'stretch';
 export type JustifySelf = 'auto' | JustifyItems;
 export type Overflow = 'visible' | 'hidden' | 'scroll';
 export type BorderStyle = 'solid' | 'dashed';
-export type PointerEvents = 'auto' | 'none';
+/**
+ * Whether the pointer can land on a node. `'none'`: not on it nor anything
+ * inside it. `'box-none'` (React Native's): not on the node itself, but on
+ * its children — a press on the node's own area goes through to what is
+ * behind it. The shape an overlay wants when it holds controls but must not
+ * swallow the clicks between them, `<glarea>` included.
+ */
+export type PointerEvents = 'auto' | 'none' | 'box-none';
 export type TextAlign = 'left' | 'right' | 'center' | 'start' | 'end';
 export type FontStyle = 'normal' | 'italic' | 'oblique';
 export type FontWeight = number | 'normal' | 'bold';