react-x11 2.15.3 → 2.16.1

package/src/nodes/window/window.js

@@ -11,7 +11,6 @@ import { forgetTopLevel, hasDropProps } from '../../dnd.js';
 import { clearPendingFrame } from '../../frames.js';
 import { FramePacer } from '../../pacing.js';
 import { endWindowState } from '../../windowstate.js';
-import { anchorOffscreen } from '../../anchor.js';
 import { topLevelWindows } from '../../windowid.js';
 import { WindowAnimation } from '../animation.js';
 import { WindowCascade } from '../cascade.js';
@@ -153,6 +152,12 @@ export class WindowNode extends Scrollable(Node) {
     // one flag everything reads (`_mapNow`, painting, a11y, anchoring).
     this._reactHidden = false;
     this.hidden = Boolean(props.hidden);
+    // A `<ThemeProvider>` this window takes its palette from other than its
+    // parent — one written above it at the root, or one directly inside the
+    // window it is nested in, which handed it on — and a third writer of
+    // `hidden`, since React hides the provider's node rather than the window
+    // under it (nodes/scope.js). Null everywhere else.
+    this._scope = null;
     // whether this is the tree's own top-level window rather than a nested
     // one or a popup — decided by realize(), read when it maps
     this._topLevel = false;
@@ -360,6 +365,11 @@ export class WindowNode extends Scrollable(Node) {
     attributes.eventMask = (attributes.eventMask ?? 0) | WINDOW_EVENT_MASK;
     const wnd = this.app.createWindow(attributes);
     this.window = wnd;
+    // What the window actually took, which is not always what was asked
+    // for: Cocoa puts a window on the point grid. The record is what the
+    // resize echo is compared against, so it has to be the size the echo
+    // will carry (#586, `_snapSize`).
+    this._requestedSize = { width: wnd.width, height: wnd.height };
     // Now that the visual is known: settle the capabilities, re-resolve any
     // `@supports` block against them, and start following the compositor.
     // Before the first paint, and before children realize against it.
@@ -422,8 +432,7 @@ export class WindowNode extends Scrollable(Node) {
     // and vanish.
     if (this.props.anchor) {
       this._watchAnchor();
-      const node = this._anchorTarget(this.props.anchor.to);
-      this._anchorLost = !node || anchorOffscreen(node, this.props.anchor.at);
+      this._anchorLost = this._anchorGone();
     }
     // Queued rather than mapped, when there is a commit to queue behind:
     // React hides a subtree only once it has inserted it (beginWindowMaps).
@@ -747,7 +756,7 @@ export class WindowNode extends Scrollable(Node) {
       // The flag `realize()`'s map will read — set directly, since there is
       // nothing on screen yet for the notification half of `_applyHidden`
       // to be about.
-      this.hidden = this._reactHidden || Boolean(newProps.hidden);
+      this.hidden = this._hiddenByReact() || Boolean(newProps.hidden);
       return;
     }
 
@@ -804,10 +813,10 @@ export class WindowNode extends Scrollable(Node) {
     const geo = scaleWindowGeometry(newProps, this.scale);
     if (sizeChanged) {
       this._userSized = false;
-      this._requestedSize = {
+      this._requestedSize = this._snapSize({
         width: isAutoSize(geo.width) ? wnd.width : geo.width,
         height: isAutoSize(geo.height) ? wnd.height : geo.height,
-      };
+      });
     }
     if (geometryChanged) {
       if (typeof wnd.setState === 'function') {
@@ -821,8 +830,15 @@ export class WindowNode extends Scrollable(Node) {
           height: isAutoSize(geo.height) ? undefined : geo.height,
         });
       } else {
-        if (sizeChanged && !isAutoSize(geo.width) && !isAutoSize(geo.height)) {
-          wnd.resize?.(geo.width, geo.height);
+        // A window with no `setState` — Cocoa's — is resized whole or not at
+        // all, so an axis handed back to `'auto'` goes as the size recorded
+        // for it above: the one the window has, which this change leaves
+        // alone. Skipping the call for one `'auto'` axis dropped the other
+        // axis's change on the floor: `_refit()` then found the record
+        // already matching and sent nothing either (#585). With both axes
+        // `'auto'` there is no size to send, and `_refit()` works one out.
+        if (sizeChanged && !(isAutoSize(geo.width) && isAutoSize(geo.height))) {
+          wnd.resize?.(this._requestedSize.width, this._requestedSize.height);
         }
         if (movedByProps) {
           wnd.move?.(geo.x, geo.y);
@@ -887,14 +903,25 @@ export class WindowNode extends Scrollable(Node) {
   }
 
   /**
-   * Re-derive `this.hidden` from its two writers — the reconciler's flag and
-   * the `hidden` prop — and make the window agree. Either saying "hidden"
-   * wins, so a `<Suspense>` revealing its content does not map a window the
-   * app is holding off screen, and clearing the prop does not map one React
-   * still hides.
+   * Whether React is hiding this window: its own flag, or one on the theme
+   * scope it is written under — a `<Suspense>` around a `<ThemeProvider>` at
+   * the root hides the provider's node, the topmost host instance there.
+   * Kept apart from the window's own flag so an inner boundary that still
+   * hides the window is not overruled when an outer one reveals the scope.
+   */
+  _hiddenByReact() {
+    return this._reactHidden || (this._scope?._hiddenByReact() ?? false);
+  }
+
+  /**
+   * Re-derive `this.hidden` from its writers — React, through
+   * `_hiddenByReact`, and the `hidden` prop — and make the window agree.
+   * Either saying "hidden" wins, so a `<Suspense>` revealing its content does
+   * not map a window the app is holding off screen, and clearing the prop
+   * does not map one React still hides.
    */
   _applyHidden() {
-    const hidden = this._reactHidden || Boolean(this.props.hidden);
+    const hidden = this._hiddenByReact() || Boolean(this.props.hidden);
     if (hidden === this.hidden) return;
     this.hidden = hidden;
     // An unmapped window draws nothing, so a loop inside one is frames

package/src/registry.js

@@ -28,6 +28,7 @@ import {
   DRAWN_KINDS,
   CUSTOM_SEMANTIC_NAMES,
   CUSTOM_SELF_DAMAGED,
+  THEME_SCOPE,
 } from './nodes/kinds.js';
 import { Node } from './nodes/node.js';
 import { markLayoutsHotReloadSession } from './layouts.js';
@@ -35,7 +36,7 @@ import { markLayoutsHotReloadSession } from './layouts.js';
 /** kind -> definition. Insertion-ordered, which is the order errors list. */
 const registry = new Map();
 
-const RESERVED = new Set(['textchunk', 'svgchild']);
+const RESERVED = new Set(['textchunk', 'svgchild', THEME_SCOPE]);
 
 // The re-registration policy for hot reload (issue #318). Module-scope
 // registration is the pattern the docs recommend and tree-shaking forces on

package/src/screens.js

@@ -119,6 +119,11 @@ class ScreenSession {
     this._desktopAtom = null;
     this._snapshot = null;
     this._listeners = new Set();
+    /** A backend that has to be *asked* for its layout rather than told —
+     *  see `setScreenPolling`. `_revalidate` re-reads it now; `_watched` is
+     *  told whether anything is subscribed. */
+    this._revalidate = null;
+    this._watched = null;
     /** Every `X.on('event')` handler installed here, so `stop()` can take
      *  them off again rather than leaving one per root on a shared client. */
     this._handlers = [];
@@ -138,7 +143,11 @@ class ScreenSession {
       }
     }
     this._handlers.length = 0;
+    const watched = this._listeners.size > 0;
     this._listeners.clear();
+    if (watched) this._watch(false);
+    this._revalidate = null;
+    this._watched = null;
   }
 
   /** Install an X event handler that this session owns. */
@@ -183,32 +192,35 @@ class ScreenSession {
 
   subscribe(fn) {
     this._listeners.add(fn);
-    return () => this._listeners.delete(fn);
+    if (this._listeners.size === 1) this._watch(true);
+    return () => {
+      if (!this._listeners.delete(fn)) return;
+      if (!this._listeners.size) this._watch(false);
+    };
   }
-}
 
-/** The monitor a point is on, or the largest one when it is on none (a
- *  window whose owner the WM has not placed yet, or coordinates from a
- *  screen layout that has since changed). */
-function monitorAt(monitors, point) {
-  if (!monitors?.length) return null;
-  if (point) {
-    for (const m of monitors) {
-      if (
-        point.x >= m.x &&
-        point.x < m.x + m.width &&
-        point.y >= m.y &&
-        point.y < m.y + m.height
-      ) {
-        return m;
-      }
+  /** Ask a pulled backend to re-read the layout, now. Synchronous: the
+   *  callers are placement paths with no round trip available to them. */
+  revalidate() {
+    if (!this._revalidate || this.stopped) return;
+    try {
+      this._revalidate();
+    } catch {
+      // a backend that cannot answer leaves the layout it published
+      // standing, which is a better answer than none
     }
   }
-  let best = monitors[0];
-  for (const m of monitors) {
-    if (m.width * m.height > best.width * best.height) best = m;
+
+  /** Whether anything is subscribed, for a backend that only has to keep
+   *  asking while someone is listening. */
+  _watch(on) {
+    if (!this._watched) return;
+    try {
+      this._watched(on);
+    } catch {
+      // as above: its clock, its problem
+    }
   }
-  return best;
 }
 
 /** The overlap of two rects, or `null` where they do not touch. */
@@ -221,6 +233,82 @@ function intersect(a, b) {
   return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
 }
 
+/** How far apart two rects are, squared: zero where they meet, and the gap
+ *  between their nearest edges otherwise. Squared because nothing compares
+ *  it against a length — only against another of these. */
+function gapSquared(a, b) {
+  const dx = Math.max(a.x - (b.x + b.width), b.x - (a.x + a.width), 0);
+  const dy = Math.max(a.y - (b.y + b.height), b.y - (a.y + a.height), 0);
+  return dx * dx + dy * dy;
+}
+
+/** The biggest monitor there is — the stand-in for "the one you look at",
+ *  for a question with no position in it at all. */
+function largestMonitor(monitors) {
+  let best = monitors[0];
+  for (const m of monitors) {
+    if (m.width * m.height > best.width * best.height) best = m;
+  }
+  return best;
+}
+
+/**
+ * The monitor `near` is on. `near` is a rect in screen coordinates, and a
+ * point is the 1x1 rect at it — the same containment a point used to get,
+ * since a 1x1 rect overlaps exactly the monitor that contains its corner.
+ *
+ * **The one it overlaps most**, because one corner of a rect does not say
+ * which monitor the rect is on. A menu-bar item's frame starts a few points
+ * *above* the top of its own display, and on a desk where another display
+ * reaches down past that edge, the corner alone is inside the *other*
+ * monitor — or inside none — and the popup opens there (#618). Every rect
+ * that has a size knows better than its corner does.
+ *
+ * **The nearest one**, by the gap between the rects, when it overlaps none.
+ * A rect that is off every monitor is nearly always just outside one of
+ * them — that same menu-bar furniture, a pointer at the very edge, a window
+ * the WM has not placed yet — and the nearest monitor is the only answer
+ * that has anything to do with where it was. The largest was the old answer
+ * and it can be anywhere on the desk.
+ *
+ * With no position at all (`near` null — an auto-sized window with no owner
+ * to open beside), the largest monitor, which is all there is to go on.
+ */
+function monitorAt(monitors, near) {
+  if (!monitors?.length) return null;
+  if (!near) return largestMonitor(monitors);
+  // A degenerate rect counts as its own thinnest real version, the way
+  // `anchorOffscreen` reads a caret: a point is 1x1, and so is a rect whose
+  // size nobody filled in.
+  const rect = {
+    x: near.x,
+    y: near.y,
+    width: near.width > 1 ? near.width : 1,
+    height: near.height > 1 ? near.height : 1,
+  };
+  let best = null;
+  let most = 0;
+  for (const m of monitors) {
+    const over = intersect(m, rect);
+    const area = over ? over.width * over.height : 0;
+    if (area > most) {
+      best = m;
+      most = area;
+    }
+  }
+  if (best) return best;
+  let nearest = monitors[0];
+  let least = Infinity;
+  for (const m of monitors) {
+    const gap = gapSquared(m, rect);
+    if (gap < least) {
+      nearest = m;
+      least = gap;
+    }
+  }
+  return nearest;
+}
+
 /**
  * The usable part of one monitor.
  *
@@ -262,12 +350,19 @@ function usable(monitor, work) {
 
 /**
  * The rect an auto-sized window may grow into, or `null` where there is
- * nothing to ask. `near` is a screen-coordinate point the window will open
- * next to — a `transientFor` owner's origin, in practice — and picks the
- * monitor when there are several.
+ * nothing to ask. `near` is a screen-coordinate **rect** the window will
+ * open against — a `transientFor` owner's origin, the node a popup hangs
+ * off, the tray item a click reported — and picks the monitor when there
+ * are several (`monitorAt`); `{x, y}` alone is a point.
  */
 export function availableArea(app, near = null) {
   const session = sessions.get(app);
+  // The monitor a popup is flipped and clamped into is picked here, so a
+  // backend whose layout is pulled rather than pushed is asked *now*
+  // rather than answered from whatever it last read (`setScreenPolling`).
+  // A rect the desk has since moved lands inside another monitor's stale
+  // one, and the popup opens at that monitor's edge (#617).
+  session?.revalidate();
   const screen = session?.screenRect ?? null;
   if (!session) return screen;
   const monitor = monitorAt(session.monitors, near) ?? screen;
@@ -364,6 +459,46 @@ export function watchScreens(app, fn) {
   return session.subscribe(fn);
 }
 
+/**
+ * Register a backend whose layout has to be **pulled**.
+ *
+ * X11 and Wayland are told: RandR sends an event, a `wl_output` announces
+ * itself, and a `publish` lands from the handler. The cocoa bridge keeps
+ * its `NSScreen` copy current on macOS's own
+ * `NSApplicationDidChangeScreenParametersNotification` but emits no event
+ * for it, so there a display plugged in, rearranged or made primary is a
+ * question nobody asked (#617). This is where the asking is wired up:
+ *
+ * - `revalidate()` re-reads the layout and publishes any change. Called
+ *   before `availableArea()` picks the monitor a window is sized against
+ *   or a popup is clamped into, which is where a stale rect does visible
+ *   damage, and synchronous for that reason.
+ * - `watched(on)` is told when the *first* subscriber arrives and when the
+ *   last one leaves. A change nobody asked about still has to reach
+ *   `useScreens()`, which needs a clock where there is no event — and a
+ *   clock that only runs while a component is watching costs an app that
+ *   never asks nothing at all.
+ *
+ * Both are optional, and a session with neither behaves exactly as it did:
+ * this adds no work to the X11 path.
+ */
+export function setScreenPolling(
+  app,
+  { revalidate = null, watched = null } = {},
+) {
+  let session = sessions.get(app);
+  if (!session) {
+    session = new ScreenSession(app);
+    sessions.set(app, session);
+  }
+  session._revalidate = revalidate;
+  session._watched = watched;
+  // Registered after a `useScreens()` already mounted — the backend still
+  // has to hear that it is being watched.
+  if (watched && session._listeners.size) session._watch(true);
+  return session;
+}
+
 // --------------------------------------------------------------------------
 // Starting up
 // --------------------------------------------------------------------------