react-x11 2.5.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -66,7 +66,8 @@
     "docs:dev": "npm --prefix website start",
     "docs:build": "npm --prefix website run build",
     "docs:test": "npm --prefix website test",
-    "bench:presenters": "node --import tsx scripts/bench/presenters.js"
+    "bench:presenters": "node --import tsx scripts/bench/presenters.js",
+    "bench:touched": "node scripts/bench/touched.js"
   },
   "repository": {
     "type": "git",
@@ -90,7 +91,7 @@
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.3.0",
+    "@windowkit/appkit": "^0.4.0",
     "dbus-native": "^0.15.1",
     "x11-dri": "^0.7.0"
   },

package/src/Reconciler.js

@@ -31,6 +31,7 @@ import {
   flushWindowMaps,
   flushWindowRestacks,
   windowAttributes,
+  setTextStripBelow,
 } from './nodes.js';
 import { hasDropProps } from './dnd.js';
 import { AppProvider } from './appcontext.js';
@@ -790,6 +791,11 @@ export async function createRoot(options = {}) {
   // anything from disk.
   beginCompose(app, rest.compose);
 
+  // Under what size a paragraph is painted as a strip of its ink instead
+  // of as glyphs (nodes.js, `TextNode._paintsStrip`): six logical pixels by
+  // default, 0 for glyphs at every size.
+  setTextStripBelow(app, rest.textStripBelow);
+
   // Whether a subtree coming back out of hiding — a `<Suspense>` boundary
   // resolving, an `<Activity>` shown again — takes the keyboard back with it
   // (src/events.js, `subtreeRevealed`). On by default; `false` is the

package/src/cocoa/app.js

@@ -29,7 +29,18 @@ import { CocoaWindow } from './window.js';
 import { decodeKey, modifierMask } from './keymap.js';
 import { loadNative } from './native.js';
 
+// The frame interval: how often a scheduled frame may paint, in ms. The
+// default is the period of the display the window is on — `listScreens`
+// reports each panel's `fps` (NSScreen.maximumFramesPerSecond, bridge 0.4),
+// so a 120Hz panel paints every 8.3ms and a 60Hz monitor every 16.7 —
+// and `createRoot({ cocoa: { frameInterval } })` overrides it for every
+// window. 16 stands in where the OS cannot say (`fps: 0`) and under a
+// 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;
 
 export class CocoaApp {
   constructor(native, options = {}) {
@@ -37,8 +48,18 @@ export class CocoaApp {
     this.options = options;
     this._windows = new Map(); // windowNumber -> CocoaWindow
     this._grabWindow = null;
-    this._rafQueue = [];
+    this._rafQueue = []; // [{ cb, wnd }]
+    // 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
+    // window paces itself on its own display (`frameIntervalFor`)
+    this._frameInterval = options.cocoa?.frameInterval ?? null;
+    this._pumpInterval = PUMP_INTERVAL_MS;
+    // the one-shot that runs a frame due between two pump ticks, and when
+    // it is due (`_armFrameTimer`)
+    this._frameTimer = null;
+    this._frameTimerAt = 0;
+    this._geometryFlushQueued = false;
     this._shadowStale = new Set();
     this._pump = null;
     this._closed = false;
@@ -243,6 +264,35 @@ export class CocoaApp {
     this._windows.set(wnd.windowNumber, wnd);
   }
 
+  /**
+   * How often `wnd` may paint, in ms: the explicit `frameInterval` when the
+   * root was given one, else the period of the screen under the window's
+   * centre — the display's own rate is the only honest cadence, and on a
+   * desk with a 120Hz panel and a 60Hz monitor the two windows differ. A
+   * window on no screen (mid-drag between two, or off the edge) and a
+   * screen the OS reports no rate for take the primary's, then 16ms.
+   */
+  frameIntervalFor(wnd) {
+    if (this._frameInterval != null) return this._frameInterval;
+    const s = this.scale;
+    const screens = this._screens ?? [];
+    let screen = null;
+    if (wnd) {
+      const cx = (wnd.x + wnd.width / 2) / s;
+      const cy = (wnd.y + wnd.height / 2) / s;
+      screen =
+        screens.find(
+          (sc) =>
+            cx >= sc.x &&
+            cx < sc.x + sc.width &&
+            cy >= sc.y &&
+            cy < sc.y + sc.height,
+        ) ?? null;
+    }
+    const fps = screen?.fps || screens[0]?.fps || 0;
+    return fps > 0 ? 1000 / fps : RAF_INTERVAL_MS;
+  }
+
   /**
    * The pane's end of the frame channel (childmain hands it over,
    * feature-detected so the X11 pane path never notices): geometry and
@@ -277,8 +327,9 @@ export class CocoaApp {
 
   // --- the pump ------------------------------------------------------------
 
-  start({ pumpInterval = 8 } = {}) {
+  start({ pumpInterval = PUMP_INTERVAL_MS } = {}) {
     if (this._pump) return;
+    this._pumpInterval = pumpInterval;
     const native = this._native;
     // A pane process has no NSApplication to pump — no windows, no events,
     // no dock presence. Its loop is frames and presents only.
@@ -292,6 +343,7 @@ export class CocoaApp {
     native.initApp();
     native.setBackendEventCallback((ev) => this._route(ev));
     this._pump = setInterval(() => {
+      this._endLiveResizes();
       native.pump2(); // flushes the previous tick's CATransaction
       if (this._shadowStale.size) {
         for (const wnd of this._shadowStale) {
@@ -304,27 +356,129 @@ export class CocoaApp {
     }, pumpInterval);
   }
 
-  _requestFrame(cb) {
-    this._rafQueue.push(cb);
+  /**
+   * A pump tick means no modal loop owns the thread, so no window is being
+   * resized live right now: the flag the delegate set on the last tick of a
+   * drag comes off here, ahead of the frames that tick, and the catch-up
+   * frame a deferred layout owes (nodes.js) runs on this very tick.
+   */
+  _endLiveResizes() {
+    for (const wnd of this._windows.values()) wnd.liveResizing = false;
+  }
+
+  _requestFrame(cb, wnd = null) {
+    this._rafQueue.push({ cb, wnd });
     return this._rafQueue.length;
   }
 
+  /**
+   * Whether `clock` — a window, or the app for a frame no window owns —
+   * is due a frame at `now`, and if so, stamps it.
+   *
+   * The clock keeps the display's period, not the pump's: a frame that ran
+   * is stamped one interval after the last one was due rather than at the
+   * moment it happened to run, so a tick that took it a little early or a
+   * timer that fired a little late moves nothing — the next frame is still
+   * due where the display's next refresh is. A frame that arrives more than
+   * an interval late (a slow one) re-anchors the clock instead of owing the
+   * frames it missed.
+   *
+   * The gate is a millisecond of slack under the interval, which is a
+   * timer's drift and no more. It used to be half a pump, so that a frame
+   * would land on the first tick at or after the interval instead of
+   * alternating between the tick before and the one after; that quantized
+   * the period to the pump — a 75Hz monitor's 13.3ms gate of 9.3 fell on
+   * the 16ms tick, and the window painted at 62.5fps. A frame due between
+   * two ticks now gets a timer of its own (`_armFrameTimer`), and the
+   * period is the display's whatever the pump's cadence.
+   */
+  _frameDue(clock, now) {
+    const interval =
+      clock === this ? this.frameIntervalFor(null) : clock._frameInterval;
+    const since = now - clock._rafLast;
+    if (since < interval - FRAME_SLACK_MS) return false;
+    clock._rafLast = since < 2 * interval ? clock._rafLast + interval : now;
+    return true;
+  }
+
+  /** How long until `clock` is due, from `now`. */
+  _frameWait(clock, now) {
+    const interval =
+      clock === this ? this.frameIntervalFor(null) : clock._frameInterval;
+    return interval - FRAME_SLACK_MS - (now - clock._rafLast);
+  }
+
+  /**
+   * A frame that falls between two pump ticks gets a tick of its own: a
+   * one-shot timer at the moment it is due, which runs the frame queue and
+   * presents what it painted. Only when the next pump tick would be late
+   * for it — a frame due after that tick waits for the tick, which decides
+   * again. One timer at a time, at the soonest of what is owed; a pump tick
+   * that comes first runs whatever is due and re-arms for the rest.
+   *
+   * The timer costs the frame nothing the tick does not: a present commits
+   * its own transaction (the bridge flushes on the flip), so what is
+   * painted here is on glass without waiting for the next pump. What the
+   * tick alone still does is pump AppKit's events, which is what
+   * `pumpInterval` stays the cadence of.
+   */
+  _armFrameTimer(wait, now) {
+    if (!(wait > 0 && wait < this._pumpInterval)) return;
+    const at = now + wait;
+    if (this._frameTimer) {
+      if (at >= this._frameTimerAt) return;
+      clearTimeout(this._frameTimer);
+    }
+    this._frameTimerAt = at;
+    this._frameTimer = setTimeout(
+      () => {
+        this._frameTimer = null;
+        if (this._closed) return;
+        this._tickFrames();
+        this._presentAll();
+      },
+      Math.max(1, Math.round(wait)),
+    );
+  }
+
   _tickFrames() {
     if (!this._rafQueue.length) return;
-    const now = Date.now();
-    if (now - this._rafLast < RAF_INTERVAL_MS) return;
-    this._rafLast = now;
+    const now = performance.now();
+    // Each window keeps its own clock, so a window on a 120Hz panel paints
+    // every refresh while one on a 60Hz monitor paints every other pump
+    // tick. Decided once per clock per tick: every frame a window queued
+    // runs when it is due, not just the first.
+    const due = new Map();
     const queue = this._rafQueue;
     this._rafQueue = [];
-    for (const cb of queue) {
+    let soonest = Infinity;
+    for (const entry of queue) {
+      const clock = entry.wnd ?? this;
+      if (!due.has(clock)) due.set(clock, this._frameDue(clock, now));
+      if (!due.get(clock)) {
+        this._rafQueue.push(entry);
+        soonest = Math.min(soonest, this._frameWait(clock, now));
+        continue;
+      }
+      // A window nobody can see owes no frame: its callback waits here until
+      // it is back on glass, and the damage it answers accumulates on the
+      // node — one catch-up frame then, instead of a full paint per tick
+      // into a backing store no one reads. `_visible` is the window's own
+      // rule (mapped, not ordered out, not miniaturized, not entirely
+      // behind another application's window).
+      if (entry.wnd && !entry.wnd._visible()) {
+        this._rafQueue.push(entry);
+        continue;
+      }
       try {
-        cb(now);
+        entry.cb(now);
       } catch (err) {
         queueMicrotask(() => {
           throw err;
         });
       }
     }
+    this._armFrameTimer(soonest, now);
   }
 
   _presentAll() {
@@ -366,6 +520,8 @@ export class CocoaApp {
         return this._routeFocus(ev, 'focus');
       case 'window-blur':
         return this._routeFocus(ev, 'blur');
+      case 'window-occlusion':
+        return this._routeOcclusion(ev);
       case 'menu-activate':
         this._activeGlobalMenu?.activate(ev.id);
         return this._afterInput();
@@ -459,6 +615,13 @@ export class CocoaApp {
       smooth: Boolean(ev.precise),
       source: ev.precise ? 'valuator' : 'button',
     });
+    // Painted now, like a press. On X11 the wheel is paced on the frame
+    // clock because ntk coalesces a touchpad's dozens of reports per frame
+    // into one event; AppKit already delivers scroll events at the
+    // display's rate, so answering each one is answering once per refresh
+    // — and answering it on the next frame tick instead was a 15ms median
+    // between the notch and the scroll, most of a refresh period of nothing.
+    this._afterInput();
   }
 
   _routeKey(ev) {
@@ -499,9 +662,31 @@ export class CocoaApp {
     // handler returns, and the pump that would paint it is the thing the
     // modal loop stalled. A second flush queued BEHIND that commit is what
     // lets an open menu resize with the drag instead of on release.
-    queueMicrotask(() => {
-      if (!this._closed) this._afterInput();
-    });
+    //
+    // One, not one per event: inside the modal loop no microtask runs until
+    // the drag ends, so a drag's every tick queued another — and they all
+    // ran on the release, each finding the frame the previous one had just
+    // paid. Coalesced, the release owes at most one flush.
+    if (!this._geometryFlushQueued) {
+      this._geometryFlushQueued = true;
+      queueMicrotask(() => {
+        this._geometryFlushQueued = false;
+        if (!this._closed) this._afterInput();
+      });
+    }
+  }
+
+  /**
+   * `windowDidChangeOcclusionState`: `visible` is "some pixel of the window
+   * is on glass". Off, the window's frames wait in the queue and its
+   * present waits with them (`CocoaWindow._visible`); on, the next pump
+   * tick runs the catch-up frame and puts it on glass — no early flush,
+   * since nothing was asked for and the pump is at most one interval away.
+   */
+  _routeOcclusion(ev) {
+    const wnd = this._window(ev);
+    if (!wnd || wnd.destroyed) return;
+    wnd._occluded = ev.visible === false;
   }
 
   _routeClose(ev) {
@@ -528,6 +713,8 @@ export class CocoaApp {
     this._closed = true;
     if (this._pump) clearInterval(this._pump);
     this._pump = null;
+    if (this._frameTimer) clearTimeout(this._frameTimer);
+    this._frameTimer = null;
     this._cocoaGL?.destroy();
     this._cocoaGL = null;
     this._native.setBackendEventCallback(null);
@@ -536,6 +723,46 @@ export class CocoaApp {
   }
 }
 
+/**
+ * `listScreens()` turned into the screen layout `src/screens.js` publishes.
+ *
+ * **One scale for every screen, and it is the app's.** macOS lays all the
+ * displays out in a single global point space, and `app.scale` is this
+ * app's points-to-device-pixels factor for the whole of it — window
+ * origins, event coordinates, these rects. Converting a 1x external
+ * display by *its own* 1 while windows on it still report `points * 2`
+ * would put the monitor somewhere no window ever is, and `monitorAt()`
+ * would answer with the wrong head. (What backing scale a window on a
+ * mixed-DPI desk should raster at is a real and separate question; the
+ * layout is not where it is answered.)
+ *
+ * **A usable rect per monitor.** `NSScreen.visibleFrame` is per screen —
+ * that display's own menu bar and Dock taken off — so each monitor carries
+ * its `visible` and `usable()` takes it as a rect. Publishing only the
+ * primary's, the way `_NET_WORKAREA` forces on X11, applied the primary's
+ * *width* as a bound to every other head: a second display wider than the
+ * built-in had its right edge pulled in by the difference, and every
+ * anchored popup that reached past it was clamped back (issue #453).
+ */
+export function screenLayout(screens, scale) {
+  const rect = (r) => ({
+    x: Math.round(r.x * scale),
+    y: Math.round(r.y * scale),
+    width: Math.round(r.width * scale),
+    height: Math.round(r.height * scale),
+  });
+  const primary = screens?.[0];
+  return {
+    monitors: (screens ?? []).map((screen) => ({
+      ...rect(screen),
+      ...(screen.visible ? { visible: rect(screen.visible) } : null),
+    })),
+    // Still published for `useScreens().workArea`, which is one rect for
+    // the desktop by definition; the primary's is the closest macOS has.
+    workArea: primary?.visible ? rect(primary.visible) : null,
+  };
+}
+
 /**
  * Build the app and seed the platform stores the way the mock seeds them —
  * `beginScale`/`beginScreens`/`beginCompositing` find a session already
@@ -546,25 +773,7 @@ export async function createCocoaApp(options = {}) {
   const app = new CocoaApp(native, options);
 
   setScaleForTests(app, app.scale, 'cocoa');
-  const s = app.scale;
-  const monitors = app._screens.map((screen) => ({
-    x: Math.round(screen.x * s),
-    y: Math.round(screen.y * s),
-    width: Math.round(screen.width * s),
-    height: Math.round(screen.height * s),
-  }));
-  const primary = app._screens[0];
-  setScreensForTests(app, {
-    monitors,
-    workArea: primary
-      ? {
-          x: Math.round(primary.visible.x * s),
-          y: Math.round(primary.visible.y * s),
-          width: Math.round(primary.visible.width * s),
-          height: Math.round(primary.visible.height * s),
-        }
-      : null,
-  });
+  setScreensForTests(app, screenLayout(app._screens, app.scale));
   setCompositingForTests(app, true);
 
   app.start(options.cocoa ?? {});