react-x11 2.22.1 → 2.22.2

package/package.json

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

package/src/backend/context2d.js

@@ -285,11 +285,15 @@ export class BackendContext2D {
    * @param surfaceOf () => current surface handle — the owner replaces the
    *   surface on resize, and this context follows it.
    * @param genOf () => surface generation number
+   * @param options.readback whether the bitmap this context draws into can
+   *   be read back while it is being drawn into, cheaply — a CPU bitmap, as
+   *   every Cocoa surface is (`readbackSource`)
    */
-  constructor(native, surfaceOf, genOf) {
+  constructor(native, surfaceOf, genOf, { readback = false } = {}) {
     this._native = native;
     this._surfaceOf = surfaceOf;
     this._genOf = genOf;
+    this._readback = readback;
     this._gen = -1;
     this._stack = [];
     this._state = {
@@ -338,6 +342,28 @@ export class BackendContext2D {
     this._strokeChunking = !NO_STROKE_CHUNKING;
   }
 
+  /**
+   * The bitmap this context draws into, as a source `drawImage` reads — for
+   * a caller that keeps a few of its pixels before drawing over them and
+   * puts them back after, which is how a rounded box clips its children
+   * without a path clip (src/nodes/roundclip.js, issue #693). A `copy` of
+   * it at a whole-pixel translate is `blitSurface`'s memcpy. Null where the
+   * owner has not said the bitmap reads back cheaply while it is drawn
+   * into: a GPU target is a different cost, and nobody has measured it.
+   */
+  readbackSource() {
+    if (!this._readback) return null;
+    const ctx = this;
+    const { width, height } = this._native.surfaceSize(this._s());
+    return {
+      width,
+      height,
+      get _surfaceHandle() {
+        return ctx._s();
+      },
+    };
+  }
+
   _s() {
     const surface = this._surfaceOf();
     const gen = this._genOf();

package/src/cocoa/overlay.js

@@ -127,6 +127,8 @@ export class CocoaOverlayPane {
           this._ensureSurface();
           return this._gen;
         },
+        // a CPU bitmap: a rounded box keeps its corners by reading it back
+        { readback: true },
       );
       this._ctx._fonts = this.app.fonts;
       this._ctx._onDirty = () => {

package/src/cocoa/panewindow.js

@@ -195,6 +195,8 @@ export class CocoaPaneWindow {
           this._ensureSurface();
           return this._surfaceGen;
         },
+        // a CPU bitmap: a rounded box keeps its corners by reading it back
+        { readback: true },
       );
       this._ctx._fonts = this.app.fonts;
       this._ctx._onDirty = () => {

package/src/cocoa/presenter.js

@@ -435,6 +435,8 @@ export class RasterState {
           presenter.native,
           () => this.surface,
           () => this.gen,
+          // a CPU bitmap: a rounded box keeps its corners by reading it back
+          { readback: true },
         );
         this.ctx._fonts = presenter.fonts;
       }

package/src/cocoa/surface.js

@@ -117,6 +117,8 @@ export class CocoaSurface {
         this._native,
         () => this._handle(),
         () => 1,
+        // a CPU bitmap: a rounded box keeps its corners by reading it back
+        { readback: true },
       );
       this._ctx._fonts = this._fonts;
     }

package/src/cocoa/window.js

@@ -806,6 +806,8 @@ export class CocoaWindow {
           this._ensureSurface();
           return this._surfaceGen;
         },
+        // a CPU bitmap: a rounded box keeps its corners by reading it back
+        { readback: true },
       );
       this._ctx._fonts = this.app.fonts;
       this._ctx._onDirty = () => {

package/src/nodes/roundclip.js

@@ -7,8 +7,9 @@
 //
 // That needs a context that can read its own pixels back into a surface of
 // its own and composite a coverage surface: ntk's, whose `picture` is the
-// server-side picture it draws through. Anywhere else the caller clips to the
-// outline as it always has.
+// server-side picture it draws through, and a Cocoa one, whose bitmap is CPU
+// memory it names as a `drawImage` source (`readbackSource`, issue #693).
+// Anywhere else the caller clips to the outline as it always has.
 
 import { Surface } from '../offscreen.js';
 
@@ -65,6 +66,20 @@ function cornerPath(ctx, box, { radius: r, side: s }, corner) {
   ctx.closePath();
 }
 
+/**
+ * A square to hold a coverage in: an a8 surface where the backend has them,
+ * and elsewhere a colour one whose alpha is the coverage — which is all the
+ * `destination-in` and `destination-out` it is drawn with read of it. The
+ * Cocoa backend has no a8 surfaces and says so by throwing.
+ */
+function coverageSurface(app, side) {
+  try {
+    return new Surface(app, { width: side, height: side, format: 'a8' });
+  } catch {
+    return new Surface(app, { width: side, height: side });
+  }
+}
+
 /**
  * How much of each pixel of a corner square lies outside the outline, as an
  * a8 surface the size of the square: the square filled, and the outline's
@@ -77,7 +92,7 @@ function outsideCoverage(app, corners, corner) {
   const key = `${corner}|${corners.radius}|${s}`;
   let surface = state.coverage.get(key);
   if (surface) return surface;
-  surface = new Surface(app, { width: s, height: s, format: 'a8' });
+  surface = coverageSurface(app, s);
   // a box whose corner lands on the square's own, in the square's space
   const far = corner === 'tr' || corner === 'br';
   const low = corner === 'bl' || corner === 'br';
@@ -126,16 +141,21 @@ function readback(ctx) {
   if (!m || m.a !== 1 || m.b !== 0 || m.c !== 0 || m.d !== 1) return null;
   if (!Number.isInteger(m.e) || !Number.isInteger(m.f)) return null;
   // reading it settles the picture's clip, which the next drawing re-stamps
-  if (!ctx.picture || !Number.isFinite(ctx.width)) return null;
-  return {
-    dx: m.e,
-    dy: m.f,
-    source: {
-      width: ctx.width,
-      height: ctx.height,
-      picture: () => ctx.picture,
-    },
-  };
+  if (ctx.picture && Number.isFinite(ctx.width)) {
+    return {
+      dx: m.e,
+      dy: m.f,
+      source: {
+        width: ctx.width,
+        height: ctx.height,
+        picture: () => ctx.picture,
+      },
+    };
+  }
+  // a backend context whose owner says its bitmap reads back cheaply
+  const source =
+    typeof ctx.readbackSource === 'function' ? ctx.readbackSource() : null;
+  return source ? { dx: m.e, dy: m.f, source } : null;
 }
 
 /**