react-x11 2.17.1 → 2.18.0

package/package.json

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

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';