react-x11 2.5.0 → 2.6.1

package/src/paintcache.js

@@ -22,6 +22,14 @@
 // Multi-colour drawings bake their colours in, which is right, because those
 // colours belong to the drawing. `SvgView.paintKind` decides which is which.
 //
+// Coverage needs a backend that composites a mask through a colour, which
+// X Render does and the Cocoa backend's surfaces do not (src/cocoa/
+// surface.js — no `a8`). There a mono drawing is cached as argb32 with its
+// colour in the key: one entry per colour it is seen in rather than one for
+// all of them, which is still one render per colour instead of one per
+// cell per frame. A coverage-only plan — a blurred shadow, whose blur is a
+// pass over the mask — stays live on that backend.
+//
 // ## Self-limiting, on purpose
 //
 // X gives no back-pressure: the first sign of overspending is `BadAlloc` on
@@ -36,6 +44,12 @@
 // `typeof wnd?.scrollRegion !== 'function'` guard for ntk without #139.
 import * as ntk from 'ntk';
 
+// The surface this cache draws into is `react-x11/ntk`'s: ntk's pixmap on
+// an X connection, the app's own (`app.createSurface`) on a backend that
+// makes them — the Cocoa backend's CG bitmap. One import, so the cache
+// names neither.
+import { Surface } from './ntk.js';
+
 /** Stale pixels are undebuggable, and every other optimization here has an
  * escape hatch — see NO_SCROLL_BLIT. */
 const DISABLED = process.env.REACT_X11_NO_PAINT_CACHE === '1';
@@ -145,6 +159,9 @@ export class PaintCache {
     this.app = app;
     this.budget = budget;
     this.verify = verify;
+    /** whether an `a8` entry can be painted through a colour here — X
+     * Render composites a mask through the fill; nothing else does yet */
+    this.coverage = Boolean(app?.display?.Render);
     /** key -> entry. Map iteration is insertion order, so re-inserting on
      * access makes this an LRU list for free — same trick as getGlyphPage. */
     this.entries = new Map();
@@ -193,7 +210,7 @@ export class PaintCache {
     return this.drawing(ctx, {
       ...plan,
       label: `<${node.kind}>`,
-      draw: (sctx, box) => node.paintCached(sctx, box),
+      draw: (sctx, box, ink) => node.paintCached(sctx, box, ink),
       live: () => node.paintContent(ctx),
     });
   }
@@ -211,9 +228,22 @@ export class PaintCache {
    *
    * `maxPixels` overrides the per-item cap for a caller whose drawing is
    * legitimately box-sized rather than icon-sized.
+   *
+   * `draw` is handed the ink a mono drawing paints in as its third
+   * argument: white into a coverage surface, where only the alpha survives
+   * and the tint arrives at blit time, and the tint itself on a backend
+   * without coverage, where the entry bakes its colour and carries it in
+   * the key (`_bakeTint`).
    */
   drawing(ctx, plan) {
     if (!isDeviceSpace(ctx)) return plan.live(ctx);
+    if (plan.format === 'a8' && !this.coverage) {
+      // A plan whose `after` pass works on the mask — a blurred shadow —
+      // has no argb32 equivalent: it paints live, which is what the frame
+      // owed with no cache at all.
+      if (plan.after) return plan.live(ctx);
+      plan = this._bakeTint(plan);
+    }
 
     if (plan.width * plan.height > (plan.maxPixels ?? MAX_ITEM_PIXELS)) {
       this.stats.tooBig++;
@@ -254,9 +284,30 @@ export class PaintCache {
     return this._blit(ctx, entry, plan);
   }
 
+  /**
+   * A coverage plan on a backend that cannot composite coverage, as an
+   * argb32 plan that paints its tint: the same pixels, one entry per colour
+   * instead of one per drawing.
+   */
+  _bakeTint(plan) {
+    const tint = plan.tint;
+    return {
+      ...plan,
+      format: 'argb32',
+      key: `${plan.key}|ink:${tint}`,
+      draw: (sctx, box) => plan.draw(sctx, box, tint),
+    };
+  }
+
+  /** The colour a drawing paints in: white into coverage, the tint into a
+   * baked entry, and nothing a multi-colour drawing reads. */
+  static inkFor(plan) {
+    return plan.format === 'a8' ? '#ffffff' : (plan.tint ?? '#ffffff');
+  }
+
   _render(plan) {
     try {
-      const surface = new ntk.Surface(this.app, {
+      const surface = new Surface(this.app, {
         width: plan.width,
         height: plan.height,
         format: plan.format,
@@ -264,7 +315,11 @@ export class PaintCache {
       const box = { x: 0, y: 0, width: plan.width, height: plan.height };
       const state = { digest: 0x811c9dc5 };
       surface.render((sctx) =>
-        plan.draw(this.verify ? recordingContext(sctx, state) : sctx, box),
+        plan.draw(
+          this.verify ? recordingContext(sctx, state) : sctx,
+          box,
+          PaintCache.inkFor(plan),
+        ),
       );
       // `after` may hand back a *different* surface than it was given — a
       // blurred shadow bakes its convolution into a second one and destroys
@@ -310,18 +365,17 @@ export class PaintCache {
     const state = { digest: 0x811c9dc5 };
     let scratch = null;
     try {
-      scratch = new ntk.Surface(this.app, {
+      scratch = new Surface(this.app, {
         width: plan.width,
         height: plan.height,
         format: plan.format,
       });
       scratch.render((sctx) =>
-        plan.draw(recordingContext(sctx, state), {
-          x: 0,
-          y: 0,
-          width: plan.width,
-          height: plan.height,
-        }),
+        plan.draw(
+          recordingContext(sctx, state),
+          { x: 0, y: 0, width: plan.width, height: plan.height },
+          PaintCache.inkFor(plan),
+        ),
       );
     } catch {
       return; // verification is best-effort; never break a frame over it
@@ -365,6 +419,12 @@ export class PaintCache {
  * cannot, and the answer is simply that nothing is cached. */
 export const paintCacheSupported = () => typeof ntk.Surface === 'function';
 
+/** Whether `app` can make an offscreen surface at all: an X connection
+ * with the Render extension (ntk's pixmap surface), or a backend with a
+ * surface of its own — the Cocoa app's `createSurface` (docs/macos.md). */
+const canMakeSurfaces = (app) =>
+  Boolean(app?.display?.Render) || typeof app?.createSurface === 'function';
+
 /**
  * The cache for an app, created on first use. Null when caching is off, when
  * the installed ntk is too old, or when the app cannot make surfaces — the
@@ -372,6 +432,6 @@ export const paintCacheSupported = () => typeof ntk.Surface === 'function';
  * there must paint live.
  */
 export function paintCacheFor(app) {
-  if (DISABLED || !paintCacheSupported() || !app?.display?.Render) return null;
+  if (DISABLED || !paintCacheSupported() || !canMakeSurfaces(app)) return null;
   return (app._paintCache ??= new PaintCache(app));
 }

package/src/screens.js

@@ -72,12 +72,17 @@
  * Letting the WM have the last word costs a clamped-to-the-edge window one
  * correction it would have made anyway.
  *
- * **A per-monitor work area.** `_NET_WORKAREA` is one rect for the whole
- * virtual desktop. Deriving a real per-monitor one means reading
+ * **A per-monitor work area, on X11.** `_NET_WORKAREA` is one rect for the
+ * whole virtual desktop. Deriving a real per-monitor one means reading
  * `_NET_WM_STRUT_PARTIAL` off every window on the screen and intersecting
  * the reservations that fall on each head — a full window-tree walk, redone
  * whenever any panel changes. `available` below is the per-axis
  * approximation instead, and says so.
+ *
+ * A backend that *does* know each monitor's usable rect says so directly
+ * instead: a `visible` rect on the monitor record, which `usable()` prefers
+ * over the whole-desktop compromise. Cocoa's `NSScreen.visibleFrame` is
+ * exactly that, so the macOS backend never goes through the approximation.
  */
 
 import { requireExtension } from './extensions.js';
@@ -206,9 +211,36 @@ function monitorAt(monitors, point) {
   return best;
 }
 
+/** The overlap of two rects, or `null` where they do not touch. */
+function intersect(a, b) {
+  const x0 = Math.max(a.x, b.x);
+  const y0 = Math.max(a.y, b.y);
+  const x1 = Math.min(a.x + a.width, b.x + b.width);
+  const y1 = Math.min(a.y + a.height, b.y + b.height);
+  if (x1 <= x0 || y1 <= y0) return null;
+  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+}
+
 /**
- * The monitor rect clamped per axis by `_NET_WORKAREA` — see the note on
- * per-monitor work areas at the top of the file.
+ * The usable part of one monitor.
+ *
+ * Two ways to get there, and the first one is the real answer:
+ *
+ * - A monitor record may carry its **own** usable rect as `visible`, in the
+ *   same screen coordinates as the monitor itself. That is what Cocoa's
+ *   `NSScreen.visibleFrame` is — per screen, minus that screen's menu bar
+ *   and Dock — and it is taken as a rect, intersected with the monitor in
+ *   case a backend reports one that overhangs.
+ * - Otherwise the monitor rect clamped **per axis** by `_NET_WORKAREA`,
+ *   which is one rect for the whole virtual desktop and so cannot be
+ *   positioned against a single head — see the note at the top of the file.
+ *
+ * The distinction matters the moment the monitors differ in size. A global
+ * work area no wider than the primary, applied as a width bound to a wider
+ * second display, moves that display's right edge inward by the difference
+ * and every anchored popup with it. On X11 the property spans the virtual
+ * desktop and the clamp is a no-op on the width, which is why the
+ * approximation held there and only there.
  *
  * Always **only** a rect. A monitor record carries a name, a primary flag and
  * physical sizes as well, and spreading it here put all of that inside
@@ -221,6 +253,7 @@ function usable(monitor, work) {
     width: monitor.width,
     height: monitor.height,
   };
+  if (monitor.visible) return intersect(rect, monitor.visible) ?? rect;
   if (!work) return rect;
   rect.width = Math.min(rect.width, work.width);
   rect.height = Math.min(rect.height, work.height);
@@ -756,6 +789,8 @@ export function endScreens(app) {
  * `monitors` entries may carry the RandR fields (`name`, `primary`,
  * `widthMM`, `heightMM`, `refreshRate`, `rotation`) as well as the rect, so
  * a test can state a named two-head desktop without a server that has RandR.
+ * An entry may also carry its own `visible` rect — the monitor's usable
+ * area, which takes precedence over the whole-desktop `workArea`.
  */
 export function setScreensForTests(app, { monitors = null, workArea = null }) {
   let session = sessions.get(app);

package/src/svgnodes.js

@@ -294,13 +294,14 @@ export class SvgNode extends Node {
     };
   }
 
-  paintCached(ctx, box) {
+  paintCached(ctx, box, ink = '#ffffff') {
     const view = this._ensureView();
     if (!view) return;
     // Into a coverage surface, only the alpha of a paint survives, and the
-    // tint arrives at blit time — so any opaque colour renders the same mask.
+    // tint arrives at blit time — so any opaque colour renders the same
+    // mask, and the cache says white then, or the tint where it bakes colour.
     view.draw(ctx, box.x, box.y, box.width, box.height, {
-      color: view.paintKind === 'mono' ? '#ffffff' : this._currentColor(),
+      color: view.paintKind === 'mono' ? ink : this._currentColor(),
     });
   }
 }

package/src/types/elements.d.ts

@@ -188,6 +188,19 @@ export interface DrawnProps<T = DrawnNode>
     SelectionProps<T>,
     EventHandlers<T> {
   ref?: Ref<T>;
+  /**
+   * Zoom this subtree, CSS `zoom` rather than a transform: every length
+   * under here — and this element's *own* style — is multiplied by it, so
+   * `scale={2}` is a card twice the size with text shaped at twice the size
+   * inside it, not a 1x picture stretched. Nested props multiply, and the
+   * display scale is the floor they multiply
+   * ([scale.md](scale.md#a-subtree-of-its-own)).
+   *
+   * A positive number; leaving it out means 1. `<window>` and `<popup>`
+   * take no `scale`: a real X window is its own root, so a menu opened from
+   * a zoomed card comes up at the app's own size.
+   */
+  scale?: number;
 }
 
 /**