react-x11 2.18.2 → 2.18.4

package/package.json

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

package/src/Reconciler.js

@@ -67,6 +67,7 @@ import { watchAppearance } from './appearance.js';
 import { setDesktopIntegration } from './desktopintegration.js';
 import { ForeignNode } from './foreignnodes.js';
 import { GlAreaNode } from './glnodes.js';
+import { beginGlOverlay } from './gloverlay.js';
 import {
   createRegisteredNode,
   elementDefinition,
@@ -954,11 +955,17 @@ export async function createRoot(options = {}) {
   // extension; the scale ladder; the monitor layout and the work-area
   // property), so they run concurrently: each is internally a chain of one
   // to three round trips, and awaiting them in sequence made every app pay
-  // the sum where the slowest chain is the true floor.
+  // the sum where the slowest chain is the true floor. The fourth is a
+  // single extension query, too short to set that floor: whether this is
+  // XQuartz, the X server nothing can be drawn over a GL surface on, which
+  // decides whether a `<glarea>`'s children get panes and what
+  // `useSupports('glOverlay')` answers on the first render
+  // (src/gloverlay.js).
   await Promise.all([
     beginCompositing(app),
     beginScale(app, rest.scale),
     beginScreens(app),
+    beginGlOverlay(app),
   ]);
 
   // How fast a caret blinks, how long a double click has, how far a press

package/src/appcontext.js

@@ -60,9 +60,10 @@ export function useApp() {
 }
 
 // 'nativeControls', 'embedding' and 'glOverlay' are properties of the
-// backend, decided before the first render and never changing after — so
-// their subscription has nothing to deliver and their snapshot is a property
-// test.
+// backend — and 'glOverlay' of the X server too, which `createRoot` asks
+// before the first render (src/gloverlay.js) — decided before anything
+// renders and never changing after, so their subscription has nothing to
+// deliver and their snapshot is a property test.
 const NEVER_CHANGES = () => () => {};
 
 // What `useSupports` watches and reads, per feature. `read` answers a
@@ -169,7 +170,10 @@ const FEATURES = {
  * GL surface on this connection — laid out in its box, painted on panes over
  * the surface, hit before it. Both backends draw them; what differs is
  * translucency, composited by Core Animation on the Cocoa backend and opaque
- * on X11 (docs/elements.md says exactly how). It is the question to ask
+ * on X11 (docs/elements.md says exactly how). The exception is XQuartz,
+ * where it is false: the macOS window server composites every GL surface
+ * above everything the X server draws, so nothing can be drawn over one, and
+ * the children are laid out but never drawn. It is the question to ask
  * before handing a surface its HUD rather than drawing that some other way:
  *
  * ```jsx
@@ -177,7 +181,8 @@ const FEATURES = {
  * <glarea onDraw={drawMap}>{overlay && <Legend />}</glarea>
  * ```
  *
- * A property of the backend too, and it never changes.
+ * A property of the backend and the display, settled before the first
+ * render, and it never changes.
  */
 export function useSupports(feature) {
   const app = useApp();

package/src/cocoa/overlay.js

@@ -11,9 +11,10 @@
 // so where two surfaces overlap, both overlays are above both frames.
 //
 // It speaks the verbs of a window the overlay drives on X11 — `setState`,
-// `map`, `unmap`, `getContext`, `destroy` — plus `present`, which puts what
-// 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.
+// `map`, `unmap`, `getContext`, `scrollRegion`, `destroy` — plus `present`,
+// which puts what 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';
 
@@ -135,6 +136,42 @@ export class CocoaOverlayPane {
     return this._ctx;
   }
 
+  /**
+   * Move the pixels of `rect` (pane coordinates, device px) by (dx, dy)
+   * inside the bitmap — ntk `Window.scrollRegion`'s contract, which the
+   * overlay speaks to either backend: the band that survives the shift
+   * inside `rect` moves, the rest of it is left as it was, and false means
+   * nothing moved, so the caller repaints instead. A child that only moved
+   * is one of these rather than a repaint (src/gloverlay.js, issue #644).
+   *
+   * The bitmap is the pane's own and the layer holds a copy of it, so the
+   * move lands on screen with the frame's `present`, after the strips it
+   * uncovered are painted — never halfway.
+   */
+  scrollRegion(rect, dx, dy) {
+    if (this.destroyed || !this._surface) return false;
+    if (!Number.isInteger(dx) || !Number.isInteger(dy)) return false;
+    // a bitmap of another size is one the next paint replaces, whole
+    const size = this._surfaceSize;
+    if (
+      size.width !== Math.max(1, this.rect.width) ||
+      size.height !== Math.max(1, this.rect.height)
+    ) {
+      return false;
+    }
+    const moved = this._native.scrollSurface(
+      this._surface,
+      Math.round(rect.x),
+      Math.round(rect.y),
+      Math.round(rect.width),
+      Math.round(rect.height),
+      dx,
+      dy,
+    );
+    if (moved) this._dirty = true;
+    return Boolean(moved);
+  }
+
   /** What was painted, onto the layer — a copy, so the bitmap is free to be
    * painted again at once. */
   present() {

package/src/glnodes.js

@@ -10,8 +10,10 @@ import { cssColorStraight } from 'ntk';
 // re-exported so the GL element layer stays one import for consumers
 export { directGLFailure, hasDirectGL } from './glbackend.js';
 
-import { GlOverlay, canOverlay } from './gloverlay.js';
+import { GlOverlay, canOverlay, overlayRefusal } from './gloverlay.js';
+import { layoutDiff } from './nodes/damage.js';
 import { Node } from './nodes/node.js';
+import { DEV } from './nodes/util.js';
 import { FramePacer, resolveFrameRate } from './pacing.js';
 
 // One visual query per (app, spec): GetFBConfigs is a round trip and every
@@ -36,6 +38,27 @@ function recordGlxFailure(app, err) {
   if (app && err && !glxFailures.has(app)) glxFailures.set(app, err);
 }
 
+// Apps already told that a <glarea>'s children are not drawn on their
+// display. Once per app, as for a <foreign> that cannot embed: the answer
+// belongs to the server, so the next surface to find out carries no news.
+const warnedNoOverlay = new WeakSet();
+
+/**
+ * Say, once per app and in development only, that the children of a
+ * `<glarea>` are not drawn here. They lay out and render like anyone's and
+ * nothing fails, so without this a HUD that never shows looks like a bug in
+ * the HUD.
+ */
+function warnNoOverlay(app) {
+  if (!DEV || !app || warnedNoOverlay.has(app)) return;
+  warnedNoOverlay.add(app);
+  const why = overlayRefusal(app);
+  console.warn(
+    'react-x11: the children of a <glarea> are not drawn on this connection, ' +
+      `and useSupports('glOverlay') is false${why ? ` — ${why}` : ''}.`,
+  );
+}
+
 /**
  * The visual and depth to create the GL child window with.
  *
@@ -120,7 +143,9 @@ const px = (v) => Math.max(1, Math.round(v || 0));
  * The X child window is stacked above everything drawn in the parent, so the
  * parent's 2D content cannot overlap it — but this node's own children do:
  * they are laid out in its box like a `<box>`'s and drawn above the surface,
- * on panes of their own (src/gloverlay.js).
+ * on panes of their own (src/gloverlay.js). Everywhere but XQuartz, where
+ * nothing can be drawn over a GL surface: there they are laid out and not
+ * drawn (`canOverlay`).
  *
  * Pointer input over the surface is the tree's, on both backends: a press,
  * a drag or a wheel over it is a synthetic event at the child under the
@@ -320,11 +345,102 @@ export class GlAreaNode extends Node {
     };
   }
 
+  /**
+   * `Node.absolutize`, with the children walked one at a time where a pane
+   * holds them — the frame's layout diff running (a bounded frame), no
+   * scroll shift riding over this node, no layout algorithm of its own
+   * placing them, and this node's own rect where it was, so the panes are
+   * too. A child that moved and changed nothing else is then reported to
+   * the overlay instead of claimed (`_absolutizeChild`); anywhere else the
+   * walk is the plain one.
+   */
   absolutize(originX, originY) {
-    super.absolutize(originX, originY);
+    const overlay = this._overlay;
+    if (
+      !overlay?.panes.length ||
+      !layoutDiff.sink ||
+      layoutDiff.shift ||
+      this._host !== null ||
+      !this.yoga
+    ) {
+      super.absolutize(originX, originY);
+      this._syncGeometry();
+      return;
+    }
+    this._placed = true;
+    const was = this.abs;
+    this._assignAbs(
+      originX + this.yoga.getComputedLeft(),
+      originY + this.yoga.getComputedTop(),
+      this.yoga.getComputedWidth(),
+      this.yoga.getComputedHeight(),
+    );
+    if (this.props.onLayout) this._reportLayout();
+    // `_assignAbs` keeps the object when nothing changed
+    const still = this.abs === was;
+    const { x, y } = this.abs;
+    for (const child of this.children) {
+      if (child.isWindow) continue;
+      if (still) this._absolutizeChild(child, x, y, overlay);
+      else child.absolutize(x, y);
+    }
     this._syncGeometry();
   }
 
+  /**
+   * One child, laid out from (originX, originY). When all that changed is
+   * where it sits — the same size, somewhere else, a plain box drawn where
+   * layout put it — it is walked with the layout diff's `shift` set to the
+   * move (issue #644): every descendant that lands where it was plus the
+   * move claims nothing, exactly as under a scroll blit (issue #398), and
+   * one that lands anywhere else claims both ends. The child itself is one
+   * of the first kind, so the move claims nothing at all here; the overlay
+   * is told of it instead, with the reach its pixels had, and settles it
+   * after the panes are placed (`GlOverlay.settleMoves`) — moved on the
+   * pane, or claimed where it was and where it is.
+   *
+   * `layoutDiff.ride` marks the walk as this kind, for the one node that
+   * drops the diff under a shift: a scroll pane laid out again claims its
+   * own box there, since the move claimed nothing for it
+   * (nodes/scrollable.js).
+   */
+  _absolutizeChild(child, originX, originY, overlay) {
+    const y = child.yoga;
+    const old = child.abs;
+    if (
+      !y ||
+      child.hidden ||
+      child.style?.display === 'none' ||
+      child.isScroller?.() ||
+      !(old.width > 0 && old.height > 0) ||
+      this.root?._placedNodes?.has(child)
+    ) {
+      child.absolutize(originX, originY);
+      return;
+    }
+    const dx = originX + y.getComputedLeft() - old.x;
+    const dy = originY + y.getComputedTop() - old.y;
+    if (
+      (dx === 0 && dy === 0) ||
+      y.getComputedWidth() !== old.width ||
+      y.getComputedHeight() !== old.height
+    ) {
+      child.absolutize(originX, originY);
+      return;
+    }
+    // before it moves: every pixel of it a pane holds
+    const reach = child.paintBounds();
+    layoutDiff.shift = { x: dx, y: dy };
+    layoutDiff.ride = true;
+    try {
+      child.absolutize(originX, originY);
+    } finally {
+      layoutDiff.shift = null;
+      layoutDiff.ride = false;
+    }
+    overlay.noteMove(child, reach, dx, dy);
+  }
+
   // the scroll fast path moves `abs` without coming through absolutize
   // (issue #405), and the real X window has to follow it all the same
   _shiftAbs(dx, dy) {
@@ -537,18 +653,28 @@ export class GlAreaNode extends Node {
 
   /**
    * The owning window's frame, after layout (`WindowNode._syncOverlays`):
-   * panes for where the children are now. True when a pane was made,
-   * resized or dropped — a paint the frame then owes.
+   * panes for where the children are now, and the moves the layout pass
+   * reported settled against them — moved on a pane, or claimed. True when
+   * a pane was made, resized or dropped, or a move claimed something — a
+   * paint the frame then owes.
    */
   _syncOverlay() {
     if (!this._overlay) {
-      if (this.children.length === 0 || !canOverlay(this.app)) {
+      // Where nothing can be drawn over the surface the children get no
+      // panes at all, rather than panes nobody sees: on XQuartz a pane over
+      // the whole surface is what hides the GL frame (src/gloverlay.js). So
+      // they are laid out and never drawn, and the pointer over them is the
+      // surface's.
+      const refused = this.children.length !== 0 && !canOverlay(this.app);
+      if (refused) warnNoOverlay(this.app);
+      if (this.children.length === 0 || refused) {
         this.root?._overlaid?.delete(this);
         return false;
       }
       this._overlay = new GlOverlay(this);
     }
-    const changed = this._overlay.sync();
+    let changed = this._overlay.sync();
+    if (this._overlay.settleMoves(this.root)) changed = true;
     if (this._overlay.panes.length) this._joinSurfaces();
     if (this.children.length === 0 && this._overlay.panes.length === 0) {
       this._overlay = null;

package/src/globalmenu.js

@@ -108,6 +108,13 @@ const NO_AUTO_START = 2;
  */
 const menuPathFor = (xid) => `/com/react_x11/menus/${xid}`;
 
+/**
+ * Per window, the moment it is free: settles once every exporter that has
+ * published on it so far has stopped. The next one to publish there waits for
+ * it — see `GlobalMenuExport.takeTurn()`.
+ */
+const vacancies = new Map();
+
 /**
  * The feature's off switch.
  *
@@ -167,6 +174,20 @@ export class GlobalMenuExport extends DbusMenuExport {
     this.path = null;
     this.xid = null;
     this.window = null;
+    /** The windows this exporter has queued for, by xid. Each is held until
+     *  `stop()`, so publishing on one again does not queue behind itself —
+     *  see `takeTurn()`. */
+    this.claimed = new Set();
+    /** Settles when `stop()` is called, `stopped` as a promise, so a publish
+     *  still waiting for its window stops waiting. */
+    this.halted = new Promise((resolve) => {
+      this.halt = resolve;
+    });
+    /** Settles once `stop()` has finished, which is what the next exporter on
+     *  a window this one claimed waits for — see `takeTurn()`. */
+    this.gone = new Promise((resolve) => {
+      this.markGone = resolve;
+    });
   }
 
   // ------------------------------------------------------------------ setup
@@ -281,6 +302,21 @@ export class GlobalMenuExport extends DbusMenuExport {
     // call" case rather than the "too early" one.
     if (!xid) return;
 
+    // One menu per window at a time — see `takeTurn()`.
+    const before = this.takeTurn(xid);
+    if (before) {
+      // Given up if this one is stopped meanwhile. That frees the window no
+      // sooner: whoever is next in line waits for `before` as well.
+      await Promise.race([before, this.halted]);
+      // How long that took is up to the menu ahead, and for a second bar in
+      // the window it is that bar's whole mount. So what `_sync()` decided
+      // before it is stale, and it decides again. A panel that went meanwhile
+      // would otherwise get a RegisterWindow sent to nobody, and the error
+      // ends `start()` in a teardown: a menu that never reaches the next
+      // panel either.
+      return this._sync();
+    }
+
     const dbus = await loadTransport();
     const path = menuPathFor(xid);
     if (!dbus.isValidObjectPath(path)) return;
@@ -320,6 +356,49 @@ export class GlobalMenuExport extends DbusMenuExport {
     this.onChange(true);
   }
 
+  /**
+   * Queue for a window, the first time this exporter publishes on it, and
+   * hand back what to wait for: the moment every exporter that published
+   * there before this one has stopped, or `null` when there is nothing to
+   * wait for.
+   *
+   * **One menu per window at a time.** Everything a menu holds is per window:
+   * the object at `menuPathFor(xid)`, the registrar's entry for the xid, and
+   * the two X properties. A `<MenuBar>` remounted in its window, or one with
+   * `globalMenu` switched off and on, puts a new exporter on all three while
+   * the old one is still leaving — its teardown asks `ListNames` and waits
+   * for `UnregisterWindow` before it unexports. That unexport is
+   * dbus-native's `registration.remove()`, which removes whatever is at the
+   * path when it runs, whoever exported it. So the new menu lost its object
+   * while the registrar and the properties still named it, and its bar,
+   * told `exported`, drew nothing: no menu anywhere. The old one's
+   * unregistration and property deletes race the new one's registration and
+   * property writes the same way. They happened to land first, which is
+   * harmless, but nothing made them, so the whole publish waits and not only
+   * the export. A second bar in a window that already has one waits too: it
+   * stays drawn in the window until the first one goes, rather than
+   * displacing it.
+   *
+   * Every one before it, not only the last: a menu stopped while it was
+   * still waiting is gone at once, and the one it was waiting for may not
+   * be.
+   *
+   * A window is held until this exporter stops, not only while it is
+   * published, so a panel that restarts gets the menu back from the same
+   * exporter without it queueing behind itself.
+   */
+  takeTurn(xid) {
+    if (this.claimed.has(xid)) return null;
+    this.claimed.add(xid);
+    const before = vacancies.get(xid);
+    const vacated = Promise.all([before, this.gone]);
+    vacancies.set(xid, vacated);
+    void vacated.then(() => {
+      if (vacancies.get(xid) === vacated) vacancies.delete(xid);
+    });
+    return before ?? null;
+  }
+
   /**
    * Plasma reads these instead of asking the registrar.
    *
@@ -390,15 +469,24 @@ export class GlobalMenuExport extends DbusMenuExport {
   async stop() {
     if (this.stopped) return;
     // Set first, so a publish already in flight sees it and undoes itself at
-    // its next checkpoint rather than finishing.
+    // its next checkpoint rather than finishing, and one still waiting for
+    // its window stops waiting.
     this.stopped = true;
-    // Then wait for it. `teardown()` reads `registration`, `xid` and `window`
-    // across several awaits of its own, so running it *beside* a publish lets
-    // each undo the other's work: the classic end state is `exported === true`
-    // with the object unexported and the window unregistered — no bar in the
-    // window, nothing in the panel, and no event left that could recover it.
-    await this.syncing?.catch(() => {});
-    await this.teardown();
+    this.halt();
+    try {
+      // Then wait for it. `teardown()` reads `registration`, `xid` and
+      // `window` across several awaits of its own, so running it *beside* a
+      // publish lets each undo the other's work: the classic end state is
+      // `exported === true` with the object unexported and the window
+      // unregistered — no bar in the window, nothing in the panel, and no
+      // event left that could recover it.
+      await this.syncing?.catch(() => {});
+      await this.teardown();
+    } finally {
+      // Whatever happened, the window is free: the next menu on it would
+      // otherwise wait for good, and never reach the panel.
+      this.markGone();
+    }
   }
 
   async teardown() {
@@ -427,6 +515,14 @@ export class GlobalMenuExport extends DbusMenuExport {
   }
 }
 
+/** Test seam, not public: forget which windows are held. A previous test's
+ *  menus are on a bus it has closed, so there is nothing to wait for, and one
+ *  a failed test never stopped would otherwise hold its window for the rest
+ *  of the run — every mock app numbers its first window alike. */
+export function _resetGlobalMenuState() {
+  vacancies.clear();
+}
+
 /**
  * Is this window's menu bar being drawn by the desktop?
  *