react-x11 2.17.1 → 2.18.1

package/package.json

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

package/src/cocoa/glarea.js

@@ -28,6 +28,8 @@
 // so the ladder is visible before it is built. Policy decides, the machine
 // answers — the same rule the GL policy follows everywhere else.
 
+import { withoutActions } from './quiet.js';
+
 const RUNGS = ['auto', 'gl'];
 const KNOWN_RUNGS = ['auto', 'gl', 'gles', 'webgpu'];
 
@@ -145,8 +147,11 @@ export class CocoaGLArea {
     this.scale = this.parent.scale ?? app.scale ?? 1;
     this.destroyed = false;
     this._reactX11Node = null;
-    this.layer = this._native.createLayer();
-    this._native.addSublayer(this.parent._layer, this.layer);
+    this.layer = withoutActions(this._native, () => {
+      const layer = this._native.createLayer();
+      this._native.addSublayer(this.parent._layer, layer);
+      return layer;
+    });
     this.rect = null;
     this.setState({
       x: options.x ?? 0,
@@ -254,7 +259,9 @@ export class CocoaGLArea {
     this.destroyed = true;
     this._context?._destroy();
     this._context = null;
-    this._native.removeFromSuperlayer(this.layer);
+    withoutActions(this._native, () =>
+      this._native.removeFromSuperlayer(this.layer),
+    );
   }
 }
 

package/src/cocoa/overlay.js

@@ -15,6 +15,7 @@
 // was painted on the layer: ntk blits an X window's backing store on its
 // own, where a layer's contents are a copy the bitmap has to be pushed to.
 import { BackendContext2D } from '../backend/context2d.js';
+import { withoutActions } from './quiet.js';
 
 export const OVERLAY_Z = 1e7 + 1;
 
@@ -25,8 +26,11 @@ export class CocoaOverlayPane {
     this._native = app._native;
     this.scale = this.parent.scale ?? app.scale ?? 1;
     this.destroyed = false;
-    this.layer = this._native.createLayer();
-    this._native.addSublayer(this.parent._layer, this.layer);
+    this.layer = withoutActions(this._native, () => {
+      const layer = this._native.createLayer();
+      this._native.addSublayer(this.parent._layer, layer);
+      return layer;
+    });
     this.rect = null;
     this._surface = null;
     this._surfaceSize = null;
@@ -154,6 +158,11 @@ export class CocoaOverlayPane {
     this.destroyed = true;
     this._release();
     this._ctx = null;
-    this._native.removeFromSuperlayer(this.layer);
+    // Actions off, or the layer fades out over a quarter of a second, what
+    // the children last painted going translucent over a surface still
+    // drawing (#638).
+    withoutActions(this._native, () =>
+      this._native.removeFromSuperlayer(this.layer),
+    );
   }
 }

package/src/cocoa/panehost.js

@@ -3,13 +3,18 @@
 // contents are whatever IOSurface the pane process last presented. The pane
 // owns its buffers and its drawing; this side owns the layer, the layout
 // and the input — CPU offloading, not isolation (docs/frame.md).
+import { withoutActions } from './quiet.js';
+
 export class CocoaPaneHost {
   constructor(app, wnd) {
     this.app = app;
     this.wnd = wnd;
     this._native = app._native;
-    this.layer = this._native.createLayer();
-    this._native.addSublayer(wnd._layer, this.layer);
+    this.layer = withoutActions(this._native, () => {
+      const layer = this._native.createLayer();
+      this._native.addSublayer(wnd._layer, layer);
+      return layer;
+    });
     this.destroyed = false;
     this._rect = null;
   }
@@ -73,6 +78,8 @@ export class CocoaPaneHost {
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
-    this._native.removeFromSuperlayer(this.layer);
+    withoutActions(this._native, () =>
+      this._native.removeFromSuperlayer(this.layer),
+    );
   }
 }

package/src/cocoa/quiet.js

@@ -0,0 +1,13 @@
+// Layer changes with Core Animation's implicit actions off, for a layer
+// that is ours rather than a presenter's (a <glarea>'s surface and overlay,
+// a frame pane's host): no frame's transaction covers it, so a bare
+// `addSublayer` or `removeFromSuperlayer` takes the default quarter-second
+// order-in or order-out fade, and a bare property set tweens.
+export function withoutActions(native, fn) {
+  native.txBegin({ disableActions: true });
+  try {
+    return fn();
+  } finally {
+    native.txCommit();
+  }
+}

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

@@ -418,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);
@@ -481,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;
@@ -510,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';