react-x11 2.28.0 → 2.30.0

package/src/cocoa/panewindow.js

@@ -14,6 +14,11 @@
 // via emit. Geometry and input arrive as channel messages (the host owns
 // layout and hit-testing — this is CPU offloading, not isolation), and what
 // goes out is pane-present, and pane-cursor for the cursor the host shows.
+//
+// Every other window the pane's tree makes — a menu, a dropdown's sheet, a
+// tooltip, a dialog — is a `CocoaPaneSubwindow`: the same ring and the same
+// presents, naming the window, and an NSWindow the host makes for it
+// (src/cocoa/panehost.js), because nothing in a pane process runs AppKit.
 import { BackendContext2D } from '../backend/context2d.js';
 
 let nextPaneId = 1;
@@ -31,13 +36,15 @@ export class CocoaPaneWindow {
     this.id = this.windowId;
     this.windowNumber = this.windowId;
     this.scale = app.scale ?? 2;
-    this.width = Math.max(
-      1,
-      Math.round((attributes.width ?? 400) * this.scale),
-    );
+    // Device pixels, as every window's attributes are (`windowAttributes`
+    // multiplies the props through once): the size the pane is born at,
+    // until the host's first pane-rect says what it is. Multiplied again
+    // here, a pane was born twice its size, and a dialog it opened in its
+    // first commit was centred over a window that was never there.
+    this.width = Math.max(1, Math.round(attributes.width ?? 400 * this.scale));
     this.height = Math.max(
       1,
-      Math.round((attributes.height ?? 300) * this.scale),
+      Math.round(attributes.height ?? 300 * this.scale),
     );
     this._listeners = new Map();
     this._surface = null;
@@ -52,27 +59,51 @@ export class CocoaPaneWindow {
     this._seq = 0;
     this._presentedAt = -Infinity;
     this._reactX11Node = null;
+    // Where the pane's corner is on the screen, in device pixels, as the
+    // host last said (`setPaneSize`): what a popup the pane anchors to one
+    // of its nodes is placed against (`windowOrigin`, src/anchor.js). The
+    // pane has no window of its own to ask, so until the host says, a menu
+    // dropped from the screen's corner.
+    this.x = 0;
+    this.y = 0;
+    this._screenOrigin = { x: 0, y: 0 };
+    // what the app's window map keys this window by, and the id the host
+    // names it by in a pane-event (`CocoaApp.attachPaneChannel`)
+    this._key = this.windowId;
     app._registerWindow(this);
   }
 
   // --- the channel-facing half --------------------------------------------
 
-  /** The host's layout answer: logical size plus the display scale. */
-  setPaneSize(width, height, scale) {
+  /**
+   * The host's layout answer: logical size plus the display scale, and
+   * where the pane is on the screen — `screen`, device pixels, absent from
+   * a host that does not say. A move alone is a `resize` that `moved`, the
+   * event a window's own move is, so what is anchored here follows it.
+   */
+  setPaneSize(width, height, scale, screen) {
     if (this.destroyed) return;
     if (scale) this.scale = scale;
     const w = Math.max(1, Math.round(width * this.scale));
     const h = Math.max(1, Math.round(height * this.scale));
-    if (w === this.width && h === this.height) return;
+    const moved =
+      screen != null && (screen.x !== this.x || screen.y !== this.y);
+    const resized = w !== this.width || h !== this.height;
+    if (!moved && !resized) return;
+    if (moved) {
+      this.x = screen.x;
+      this.y = screen.y;
+      this._screenOrigin = { x: screen.x, y: screen.y };
+    }
     this.width = w;
     this.height = h;
     this.emit('resize', {
       width: w,
       height: h,
-      x: 0,
-      y: 0,
-      moved: false,
-      resized: true,
+      x: this.x,
+      y: this.y,
+      moved,
+      resized,
     });
   }
 
@@ -103,7 +134,13 @@ export class CocoaPaneWindow {
    */
   setCursor(name) {
     if (this.destroyed) return;
-    this.app._paneSend?.({ type: 'pane-cursor', cursor: name ?? null });
+    this._post({ type: 'pane-cursor', cursor: name ?? null });
+  }
+
+  /** A message about this window, to the host. The pane's own names none:
+   * the host knows it as the pane (`CocoaPaneSubwindow` names itself). */
+  _post(msg) {
+    this.app._paneSend?.(msg);
   }
 
   requestAnimationFrame(cb) {
@@ -264,7 +301,7 @@ export class CocoaPaneWindow {
     const shown = this._ring[this._drawIndex];
     this._native.surfaceUnlock(shown.handle);
     this._flushDamage = null;
-    this.app._paneSend?.({
+    this._post({
       type: 'pane-present',
       seq: ++this._seq,
       id: shown.iosurfaceId,
@@ -304,3 +341,156 @@ export class CocoaPaneWindow {
     this._releaseRing();
   }
 }
+
+/**
+ * Any other window a pane's tree makes: a `<popup>` — a menu, a dropdown's
+ * sheet, a tooltip, the edit menu — or a managed one, a dialog (#824).
+ *
+ * A pane process runs no AppKit (`CocoaApp.start`): no NSApplication, no
+ * event pump. An NSWindow made here exists and is never shown, so a
+ * `<Select>` in a pane took the press, opened, and showed nothing. This
+ * window paints into a shared ring exactly as the pane does, and the host
+ * makes the NSWindow and shows the ring in it (`CocoaPaneHost`,
+ * src/cocoa/panehost.js) — the split the pane already has: the pane draws,
+ * the host owns glass and input.
+ *
+ * Its place is the pane's to decide and the host's to take as given: `x`
+ * and `y` are the screen position the pane's own anchoring worked out,
+ * against the origin the host sends with every pane-rect. What goes out is
+ * the window's life as `pane-window` messages and its frames as
+ * `pane-present`s naming it; what comes back is the input on the host's
+ * window, as `pane-event`s naming it, and for a managed window the moves
+ * and the resizes the user made and the close button.
+ */
+export class CocoaPaneSubwindow extends CocoaPaneWindow {
+  constructor(app, attributes = {}) {
+    super(app, attributes);
+    this.attributes = attributes;
+    this._popup = attributes.overrideRedirect === true;
+    this.mapped = false;
+    // device pixels, as every window's attributes are — unlike the pane's
+    // own, whose size is the host's to say
+    const size = this.snapSize(attributes.width ?? 1, attributes.height ?? 1);
+    this.width = size.width;
+    this.height = size.height;
+    this.x = Math.round(attributes.x ?? 0);
+    this.y = Math.round(attributes.y ?? 0);
+    this._screenOrigin = { x: this.x, y: this.y };
+    this._send({
+      op: 'create',
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height,
+      popup: this._popup,
+      // an ARGB visual is a transparent window here, as in `CocoaWindow`
+      transparent:
+        attributes.visual !== undefined || Boolean(attributes.transparent),
+      grabKeyboard: attributes.grabKeyboard === true,
+      dragPreview: Boolean(attributes.dragPreview),
+      title: attributes.title ?? '',
+      decorations: attributes.decorations,
+      resizable: attributes.resizable,
+      sizeHints: attributes.sizeHints,
+    });
+  }
+
+  /** Named, and held until the host is listening (`CocoaApp._postWindow`). */
+  _post(msg) {
+    this.app._postWindow({ ...msg, window: this.windowId });
+  }
+
+  _send(msg) {
+    if (this.destroyed) return;
+    this._post({ type: 'pane-window', ...msg });
+  }
+
+  /** `CocoaWindow`'s rule, so the size this window records is the size the
+   * host's NSWindow will take: whole points, rounded up. */
+  snapSize(width, height) {
+    const s = this.scale;
+    const up = (v) =>
+      Math.max(1, Math.ceil(Math.max(1, Math.round(v)) / s) * s);
+    return { width: up(width), height: up(height) };
+  }
+
+  map() {
+    this.mapped = true;
+    this._send({ op: 'map' });
+  }
+
+  unmap() {
+    this.mapped = false;
+    this._send({ op: 'unmap' });
+  }
+
+  move(x, y) {
+    this.x = Math.round(x);
+    this.y = Math.round(y);
+    this._screenOrigin = { x: this.x, y: this.y };
+    this._send({ op: 'move', x: this.x, y: this.y });
+  }
+
+  resize(width, height) {
+    const size = this.snapSize(width, height);
+    this.width = size.width;
+    this.height = size.height;
+    this._send({ op: 'resize', width: this.width, height: this.height });
+  }
+
+  setTitle(title) {
+    this._send({ op: 'title', title: String(title ?? '') });
+  }
+
+  setSizeHints(hints = {}) {
+    this._send({ op: 'size-hints', hints: { ...hints } });
+  }
+
+  /** The grab is the host's: a press anywhere in its windows comes here,
+   * outside this window, which is the dismissal (`CocoaApp._grabTarget`). */
+  grabPointer(options, cb) {
+    this._send({ op: 'grab' });
+    cb?.(null, 0);
+  }
+
+  ungrabPointer() {
+    this._send({ op: 'ungrab' });
+  }
+
+  /**
+   * Where the host's window went for a reason of its own — the user moved a
+   * dialog, or resized it — which a `resize` here says as a window's own
+   * move or resize does. A size comes only from the user (`resized`): the
+   * pane's own resizes come back as the host's echo, and one taken as news
+   * would read as the user taking an `'auto'` window over.
+   */
+  _hostGeometry(ev) {
+    if (this.destroyed) return;
+    const moved = ev.x !== this.x || ev.y !== this.y;
+    const resized =
+      Boolean(ev.resized) &&
+      (ev.width !== this.width || ev.height !== this.height);
+    if (!moved && !resized) return;
+    this.x = ev.x;
+    this.y = ev.y;
+    this._screenOrigin = { x: ev.x, y: ev.y };
+    if (resized) {
+      this.width = ev.width;
+      this.height = ev.height;
+    }
+    this.emit('resize', {
+      width: this.width,
+      height: this.height,
+      x: this.x,
+      y: this.y,
+      moved,
+      resized,
+    });
+  }
+
+  destroy() {
+    if (this.destroyed) return;
+    this._send({ op: 'destroy' });
+    super.destroy();
+  }
+}

package/src/cocoa/promotion.js

@@ -45,6 +45,7 @@ import {
   propBoxProps,
   stylePaintsPlain,
 } from './presenter.js';
+import { SpriteLayers } from './sprites.js';
 
 const ORIGIN = Object.freeze({ x: 0, y: 0 });
 
@@ -61,6 +62,17 @@ const IDLE_GRACE_MS = 1000;
 // the repaint they save (the layer presenter's rule, per raster).
 const MAX_DIRTY_RECTS = 16;
 
+/** Paint order, for entries carrying a `_paintKey`: a key the walk would
+ *  not reach sorts last. */
+function byPaintKey(a, b) {
+  if (!a.key || !b.key) return (a.key ? 1 : 0) - (b.key ? 1 : 0);
+  const n = Math.min(a.key.length, b.key.length);
+  for (let i = 0; i < n; i++) {
+    if (a.key[i] !== b.key[i]) return a.key[i] - b.key[i];
+  }
+  return a.key.length - b.key.length;
+}
+
 const rectsOverlap = (a, b) =>
   a.x < b.x + b.width &&
   b.x < a.x + a.width &&
@@ -243,6 +255,9 @@ export class CocoaPromotion {
       layerOf: (node) => this.promoted.get(node)?.visual.layer ?? null,
       onIdle: (node) => this._idle(node),
     });
+    // the parts of elements' drawing they offer (`Node.sprites()`), each on
+    // a layer of its own under the same rules (src/cocoa/sprites.js)
+    this.sprites = new SpriteLayers(this);
     this._claiming = false;
   }
 
@@ -390,8 +405,19 @@ export class CocoaPromotion {
    */
   frame(root, layoutRan) {
     if (layoutRan) this.layoutGen++;
-    if (this.promoted.size === 0 && this.candidates.size === 0) return;
+    // what elements offer, asked before anything is decided: an answer is
+    // about the element's own drawing, not about the layers
+    const offers = this.sprites.ask(root);
+    if (
+      this.promoted.size === 0 &&
+      this.candidates.size === 0 &&
+      offers.size === 0 &&
+      this.sprites.hosts.size === 0
+    ) {
+      return;
+    }
     const native = this.native;
+    let lifted = null;
     native.txBegin({ disableActions: true });
     try {
       // Later-painted first: a node painted after this one that is coming
@@ -416,13 +442,26 @@ export class CocoaPromotion {
           }
         }
       }
+      // Then the parts, against the layers this frame keeps: a node
+      // promoted over a part is a layer above it, not ink on it.
+      lifted = this.sprites.decide(root, offers);
+      // One order for every layer above the bitmap, nodes and parts alike.
       const order = this._inPaintOrder([...this.promoted.keys()]);
+      for (const state of this.sprites.entries()) {
+        order.push({ state, key: state.order });
+      }
+      order.sort(byPaintKey);
       for (let i = 0; i < order.length; i++) {
-        this._sync(order[i].node, i, root, layoutRan);
+        const { node, state } = order[i];
+        if (node) this._sync(node, i, root, layoutRan);
+        else this.sprites.sync(state, i);
       }
     } finally {
       native.txCommit();
     }
+    // An element told which of its parts are on layers now may claim,
+    // restyle or ask for frames; the frame has not taken its damage yet.
+    if (lifted?.size) this.sprites.notify(lifted);
   }
 
   _mayStay(node, key) {
@@ -528,17 +567,22 @@ export class CocoaPromotion {
 
   _inPaintOrder(nodes) {
     const keyed = nodes.map((node) => ({ node, key: this._paintKey(node) }));
-    keyed.sort((a, b) => {
-      if (!a.key || !b.key) return (a.key ? 1 : 0) - (b.key ? 1 : 0);
-      const n = Math.min(a.key.length, b.key.length);
-      for (let i = 0; i < n; i++) {
-        if (a.key[i] !== b.key[i]) return a.key[i] - b.key[i];
-      }
-      return a.key.length - b.key.length;
-    });
+    keyed.sort(byPaintKey);
     return keyed;
   }
 
+  /**
+   * Where an element offering parts stands in the paint order, or null when
+   * none of them may go on a layer: hidden, inside a `<glarea>`, or itself
+   * faded — its group on the bitmap would leave a part's layer out of it. A
+   * faded ancestor is `_clear`'s to find, as it is for a node.
+   */
+  _spritePlace(host) {
+    if (host.destroyed || host.hidden) return null;
+    if (insideGlArea(host) || fadesAsGroup(host)) return null;
+    return this._paintKey(host);
+  }
+
   /**
    * Is nothing painted over this node, is all of it visible, and is it in
    * no faded group? Walked up the chain: at every level, what the parent
@@ -547,15 +591,34 @@ export class CocoaPromotion {
    * node's reach, the parent's clip, if it has one, must hold the whole of
    * it, and the parent must not fade: its group is drawn on the bitmap or on
    * its own layer, and either way a layer of the node's would be outside it.
+   *
+   * With `cut`, the reach is an element's part (src/cocoa/sprites.js),
+   * whose layer can be cut to a rectangle: a clipping ancestor with square
+   * corners narrows `cut.clip` to its padding box — its border is drawn
+   * over what it holds anyway — instead of having to hold the part whole,
+   * and every test from there up is asked of what shows through the clip.
+   * `cut.bounds` comes back as that. A clip that leaves nothing showing is
+   * a refusal.
    */
-  _clear(node) {
+  _clear(node, bounds = node._subtreeBounds(), cut = null) {
     // the exact reach, not `paintBounds()`: that one carries the damage
     // model's pixel of slop, and a section laid out flush under a card
-    // would read as reaching into it
-    const bounds = node._subtreeBounds();
+    // would read as reaching into it. An element's part is asked about at
+    // everywhere it can draw (src/cocoa/sprites.js).
     for (let n = node; !n.isWindow; n = n.parent) {
       const parent = n.parent;
       if (!parent) return false;
+      if (
+        cut &&
+        !parent.isWindow &&
+        parent.clipsChildren?.() &&
+        !(parent.style?.borderRadius > 0)
+      ) {
+        const inner = insetRect(parent.abs, borderReach(parent));
+        cut.clip = cut.clip ? intersectRects(cut.clip, inner) : inner;
+        bounds = cut.clip && intersectRects(bounds, cut.clip);
+        if (!bounds) return false;
+      }
       const order = parent.paintOrder();
       for (let j = order.indexOf(n) + 1; j < order.length; j++) {
         if (this._reaches(order[j], bounds)) return false;
@@ -592,6 +655,7 @@ export class CocoaPromotion {
         }
       }
     }
+    if (cut) cut.bounds = bounds;
     return true;
   }
 
@@ -733,6 +797,7 @@ export class CocoaPromotion {
 
   /** Everything off the root layer and freed: the window is going. */
   destroy() {
+    this.sprites.destroy();
     for (const timer of this.idle.values()) clearTimeout(timer);
     this.idle.clear();
     this.releasing.clear();