react-x11 2.5.0 → 2.6.0

package/package.json

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

package/src/cocoa/context2d.js

@@ -13,9 +13,24 @@ import { cssColorStraight } from 'ntk';
 
 const BLACK = [0, 0, 0, 1];
 
+// A colour string is parsed once: a frame over a large tree sets the same
+// few fills thousands of times, and the parse — a regex and four numbers —
+// cost a third of `_applyFill` (measured on the presenter bench's `tiny`
+// cell, 5,000 fills of two colours: 100ms of a 200ms frame). Bounded, and
+// dropped whole rather than evicted, since a palette is a few dozen strings.
+const parsedColors = new Map();
+const PARSED_COLORS_MAX = 256;
+
 function parseColor(value) {
   if (value == null) return BLACK;
-  return cssColorStraight(String(value)) ?? BLACK;
+  const key = typeof value === 'string' ? value : String(value);
+  let parsed = parsedColors.get(key);
+  if (parsed === undefined) {
+    parsed = cssColorStraight(key) ?? BLACK;
+    if (parsedColors.size >= PARSED_COLORS_MAX) parsedColors.clear();
+    parsedColors.set(key, parsed);
+  }
+  return parsed;
 }
 
 class LinearGradient {

package/src/cocoa/panehost.js

@@ -36,10 +36,28 @@ export class CocoaPaneHost {
     });
   }
 
-  /** A pane-present landed: scan out of the named shared surface. */
+  /**
+   * A pane-present landed: scan out of the named shared surface.
+   *
+   * A present names a buffer the pane may since have retired. The channel
+   * is a queue and nothing acknowledges a present, so a pane-rect that
+   * changes the pane's size (or its scale — the host window moved to another
+   * display during startup, which is how this was first hit) can cross a
+   * present already in flight: the pane rebuilds its ring on that rect and
+   * releases the old one (`CocoaPaneWindow._ensureSurface`), and by the
+   * time the host looks the id up the surface is gone. That present is
+   * stale by construction — the pane's full frame on the fresh ring is
+   * queued behind it — so it is dropped, and the layer keeps the frame it
+   * already holds a reference to. Nothing else here throws; any other
+   * error is the bug it says it is.
+   */
   present(iosurfaceId) {
     if (this.destroyed) return;
-    this._native.setLayerContentsIOSurface(this.layer, iosurfaceId);
+    try {
+      this._native.setLayerContentsIOSurface(this.layer, iosurfaceId);
+    } catch (err) {
+      if (!/IOSurfaceLookup/.test(err?.message ?? '')) throw err;
+    }
   }
 
   destroy() {

package/src/cocoa/panewindow.js

@@ -50,6 +50,7 @@ export class CocoaPaneWindow {
     this._dirty = false;
     this._flushDamage = 'full';
     this._seq = 0;
+    this._presentedAt = -Infinity;
     this._reactX11Node = null;
     app._registerWindow(this);
   }
@@ -98,8 +99,24 @@ export class CocoaPaneWindow {
     return this.app._requestFrame(cb);
   }
 
+  /**
+   * Whether the host may still be showing the frame before the last one —
+   * the gate `flushPendingFrames` (src/frames.js) is written around: a
+   * discrete input paints on the spot only when the last frame has landed,
+   * which is what folds a burst into one paced frame instead of a frame per
+   * event. On X11 the server says when a present was shown; a pane hears
+   * nothing back from the host, which flips the layer on its next pump tick
+   * and has Core Animation scan it out at the following refresh — so a
+   * present counts as in flight for one frame interval. Without a gate here
+   * every message the host queued while the pane was busy was answered
+   * with a full frame of its own: a forty-tick resize of a pane whose frame
+   * costs 300ms stepped through forty sizes for twelve seconds after the
+   * drag had ended, each one the previous surface stretched to the layer.
+   */
   frameInFlight() {
-    return false;
+    return (
+      performance.now() - this._presentedAt < this.app.frameIntervalFor(null)
+    );
   }
 
   // Three buffers, not two. A pane is cross-process: the host keeps
@@ -112,6 +129,28 @@ export class CocoaPaneWindow {
   // windows need only two because Core Animation latches the front buffer.
   static RING = 3;
 
+  /**
+   * Free the ring now, not when V8 collects the handles — CocoaWindow's
+   * `_releaseBacking`, for three buffers instead of two: a host window
+   * drag resizes the pane a tick at a time, and each tick retires a ring
+   * that the finalizer would have held until a collection happened to run.
+   * The host keeps its own reference to whichever buffer its layer shows,
+   * so the frame on glass survives the free; a present of a retired buffer
+   * still in the channel finds no surface, and the host drops it
+   * (`CocoaPaneHost.present`) — the next present is the full frame on the
+   * new ring anyway. Bridges before 0.4 have no `releaseSurface`; there the
+   * finalizer is still the only owner, and this is the drop it always was.
+   */
+  _releaseRing() {
+    const ring = this._ring;
+    this._ring = null;
+    this._surface = null;
+    if (!ring) return;
+    const release = this._native.releaseSurface;
+    if (typeof release !== 'function') return;
+    for (const s of ring) release.call(this._native, s.handle);
+  }
+
   _ensureSurface() {
     const w = this.width;
     const h = this.height;
@@ -121,6 +160,7 @@ export class CocoaPaneWindow {
       this._surfaceSize?.height !== h
     ) {
       const hadSurface = Boolean(this._ring);
+      this._releaseRing();
       this._ring = [];
       for (let i = 0; i < CocoaPaneWindow.RING; i += 1) {
         const s = this._native.createSurfaceIOSurface(w, h, this.scale, true);
@@ -134,12 +174,9 @@ export class CocoaPaneWindow {
       this._surfaceSize = { width: w, height: h };
       this._surfaceGen++;
       this._flushDamage = 'full';
-      if (hadSurface) {
-        queueMicrotask(() => {
-          const node = this._reactX11Node;
-          if (node && !node.destroyed) node.invalidate(true, null, 'resize');
-        });
-      }
+      // decided when the flush reports its rects — see CocoaWindow's
+      // `_ensureSurface` for why not a queued full frame from here
+      if (hadSurface) this._freshSurface = true;
     }
     return this._surface;
   }
@@ -163,6 +200,20 @@ export class CocoaPaneWindow {
   }
 
   noteFrameDamage(rects) {
+    if (this._freshSurface) {
+      this._freshSurface = false;
+      // a bounded flush onto a fresh ring leaves garbage outside its rects:
+      // one full frame, and no present until it lands (CocoaWindow's rule)
+      if (rects) {
+        this._holdPresent = true;
+        const node = this._reactX11Node;
+        if (node && !node.destroyed) node.invalidate(false, null, 'resize');
+      } else {
+        this._holdPresent = false;
+      }
+    } else if (!rects) {
+      this._holdPresent = false;
+    }
     if (this._flushDamage === 'full') return;
     if (!rects) {
       this._flushDamage = 'full';
@@ -190,6 +241,7 @@ export class CocoaPaneWindow {
   /** Flip and tell the host, instead of touching any layer of our own. */
   present() {
     if (!this._dirty || !this._ring || this.destroyed) return;
+    if (this._holdPresent) return;
     this._dirty = false;
     const shown = this._ring[this._drawIndex];
     this._native.surfaceUnlock(shown.handle);
@@ -202,6 +254,7 @@ export class CocoaPaneWindow {
       width: this.width,
       height: this.height,
     });
+    this._presentedAt = performance.now();
     this._shownIndex = this._drawIndex;
     // the next buffer round the ring — two behind what the host will be
     // showing, so it is safe to write even before the host has switched
@@ -230,7 +283,6 @@ export class CocoaPaneWindow {
     if (this.destroyed) return;
     this.destroyed = true;
     this.app._unregisterWindow(this);
-    this._ring = null;
-    this._surface = null;
+    this._releaseRing();
   }
 }