react-x11 2.47.2 → 2.47.4

package/src/nodes/window/anchoring.js

@@ -1,7 +1,13 @@
 // A window anchored to a rect in another (#255, #280): where it goes, and
 // following the anchor as it moves.
 
-import { anchorOffscreen, anchorRect, anchorScreenRect } from '../../anchor.js';
+import {
+  anchorOffscreen,
+  anchorRect,
+  anchorScreenRect,
+  deviceAnchorArea,
+} from '../../anchor.js';
+import { availableArea } from '../../screens.js';
 
 /** Anchoring, installed onto `WindowNode.prototype` by window.js. */
 export class WindowAnchoring {
@@ -109,7 +115,10 @@ export class WindowAnchoring {
       }
     }
     if (lost || !size) return;
-    const rect = this._anchorPlacement(size);
+    let rect = this._anchorPlacement(size);
+    if (!rect) return;
+    if (rect.placement === 'center') rect = this._keepCentredTop(rect, size);
+    this._placedSize = { width: size.width, height: size.height };
     if (!rect) return;
     if (this._placedAt?.x === rect.x && this._placedAt?.y === rect.y) return;
     this._placedAt = { x: rect.x, y: rect.y };
@@ -120,6 +129,82 @@ export class WindowAnchoring {
     }
   }
 
+  /**
+   * Where a **centred** window goes when it is placed again: centred
+   * afresh when what it is centred over has moved, and otherwise — its own
+   * size changed, nothing else did — grown from where it already is.
+   *
+   * A centred popup is a dialog, and a dialog that grows is one the user is
+   * reading: an error line under a field, a "details" section opening. Re-
+   * centring it moves its top edge by half the growth, so the title, the
+   * field and the button that was just pressed all jump up under the
+   * pointer. So it keeps its top edge and its horizontal centre, grows down
+   * (and sideways about the middle), and is pulled back only as far as it
+   * takes to stay on its monitor — which is where the actions row of a
+   * dialog that grew past the bottom of the screen would otherwise go.
+   *
+   * A window the window manager frames is the manager's and the user's to
+   * move once it is up — they may have dragged it — so it grows from where
+   * the server says it is, and is moved only when it would leave the
+   * monitor. Never to where it opened: that would undo the drag.
+   *
+   * Returns the rect to place at, or null for "stay put".
+   */
+  _keepCentredTop(rect, size) {
+    const was = this._centredFor;
+    const at = this._placedAt;
+    if (was && at) {
+      const again = this._anchorPlacement(was.size);
+      if (again && again.x === was.x && again.y === was.y) {
+        return this._growInPlace(size);
+      }
+    }
+    this._centredFor = { size: { ...size }, x: rect.x, y: rect.y };
+    return rect;
+  }
+
+  /** `_keepCentredTop`'s other half: this window at `size`, its top edge and
+   *  its middle where they are, clamped into the monitor. */
+  _growInPlace(size) {
+    const managed = this.attributes.overrideRedirect === false;
+    // An override-redirect window is wherever it was last put, and the
+    // record of that is ours; a managed one may have been moved since.
+    const from = managed
+      ? (this.window._screenOrigin ?? this._placedAt)
+      : this._placedAt;
+    const old = this._placedSize ?? size;
+    let x = from.x + Math.round((old.width - size.width) / 2);
+    let y = from.y;
+    const area = this._anchorArea();
+    if (area) {
+      x = Math.max(area.x, Math.min(x, area.x + area.width - size.width));
+      y = Math.max(area.y, Math.min(y, area.y + area.height - size.height));
+    }
+    // Nothing to send. For a managed window that matters beyond the round
+    // trip: a position handed back to an X window manager is read as the
+    // frame's, and would push the window down by its titlebar.
+    if (managed && x === from.x && y === from.y) return null;
+    return { x, y };
+  }
+
+  /** The monitor area this window is kept inside, in device pixels — the
+   *  one its anchor picks (`anchorRect`, `anchorScreenRect`). */
+  _anchorArea() {
+    const anchor = this.props.anchor;
+    if (anchor.rect) {
+      const s = this.scale;
+      const r = anchor.rect;
+      return availableArea(this.app, {
+        x: r.x * s,
+        y: r.y * s,
+        width: (r.width ?? 0) * s,
+        height: (r.height ?? 0) * s,
+      });
+    }
+    const node = this._anchorTarget(anchor.to);
+    return node ? deviceAnchorArea(node) : null;
+  }
+
   /**
    * Whether there is nothing for this window to point at: the anchor's node
    * has scrolled out of view, or is a ref that has not attached yet — which

package/src/nodes/window/flush.js

@@ -175,6 +175,11 @@ export class WindowFlush {
       // so a frame whose first pass is the floors' own collects once.
       this._floorsCollectOwed = true;
       this._refit();
+      // An `'auto'` window waiting for the size its content just asked for
+      // lays out when the echo brings it, not at the size it still has
+      // (`_holdForRefit`). Nothing here is cleared, so that frame owes
+      // everything this one did.
+      if (this._refitHolding()) return false;
     }
     const width = this.window.width ?? this._requestedSize?.width ?? 0;
     const height = this.window.height ?? this._requestedSize?.height ?? 0;

package/src/nodes/window/listeners.js

@@ -47,8 +47,10 @@ export class WindowListeners {
       // the first re-fit — and against all of them still in flight, not
       // only the latest, because a move echo or an earlier re-fit's can land
       // after the record moved on (#929, `_ownSize`).
-      if (this._requestedSize && !this._ownSize(ev)) {
-        this._userSized = true;
+      if (this._requestedSize) {
+        const own = this._ownSize(ev);
+        if (!own) this._userSized = true;
+        this._settleRefitHold(ev, own);
       }
       // Where the window sits on screen decides where popups anchored to it
       // belong — and finding that out is a server round trip

package/src/nodes/window/size.js

@@ -51,6 +51,16 @@ const NO_UNREAD_WIDTHS = process.env.REACT_X11_NO_UNREAD_WIDTHS === '1';
 // is a handful at most.
 const SIZES_IN_FLIGHT = 8;
 
+// How long an `'auto'` window's frames wait for the size a re-fit asked for
+// (`_holdForRefit`). A round trip is well under it locally and on a LAN; a
+// slower link runs past it into the frame at the old size, which is the
+// behaviour without the hold. The bound is there for a request answered
+// with no new size at all — a window manager refusing it — where the
+// content would otherwise wait for good.
+const REFIT_HOLD_MS = 150;
+// …and off, for A/B measurement and as first aid.
+const NO_REFIT_HOLD = process.env.REACT_X11_NO_REFIT_HOLD === '1';
+
 /** Take a node's extents off, as `collectFloorStale` does a dirty child's:
  *  both are measured again, and the minimum yoga holds may no longer be
  *  the one the floors wrote. */
@@ -879,6 +889,20 @@ export class WindowSize {
       // tree holding the max-content one would hand `flush()` a stale
       // arrangement.
       yoga.calculateLayout(width, needH ? undefined : props.height, dir);
+      // **A height floor is a height for a width**, and the ones on hand
+      // were measured at the width the window was last laid out at — which
+      // is not this one whenever the content asked for a new width. A label
+      // that wrapped at the old width carries the two-line floor it earned
+      // there, and read back here it is a window two lines tall at a width
+      // that fits it on one: the window grew, and shrank again a frame
+      // later once the real pass had re-measured (#929). The same probe the
+      // real pass asks (`_applyContentFloors`): whether any leaf's height at
+      // this width differs from the one its floor was taken at, and only
+      // then the measurement and one more pass.
+      if (needH && this._probeHeightFloors().owed) {
+        measuringExactly(() => this._measureHeightFloors(width, false));
+        yoga.calculateLayout(width, undefined, dir);
+      }
       const naturalH = needH
         ? clampExtent(yoga.getComputedHeight(), undefined, availH)
         : undefined;
@@ -1001,18 +1025,26 @@ export class WindowSize {
     }
     this._askSize({ width: next.width, height: next.height });
     // Asked for, not assumed. `window.width` stays what the server last said
-    // until the ConfigureNotify lands, and this frame lays out against that
-    // — the echo brings `needsLayout` and an unbounded repaint with it (see
-    // the 'resize' listener), which is the same one-frame settle a
-    // controlled `width` prop change has always had. Writing the new size
-    // onto the window here would be worse than the wait: ntk allocates the
-    // backing pixmap from the resize event, so a frame painted at a size the
-    // pixmap has not reached yet is a frame clipped to the old one.
+    // until the ConfigureNotify lands — on X11; Cocoa takes a size on the
+    // call — and writing the new size onto the window here would be worse
+    // than waiting: ntk allocates the backing pixmap from the resize event,
+    // so a frame painted at a size the pixmap has not reached yet is a frame
+    // clipped to the old one.
     if (typeof wnd.setState === 'function') {
       wnd.setState({ width: next.width, height: next.height });
     } else {
       wnd.resize?.(next.width, next.height);
     }
+    // …and laying this frame out at the size the window still has would be
+    // worse again: content that changed *because* it needs more room is
+    // content that does not fit the old size — a label one word longer
+    // wraps, and is cut off at the bottom of a window one line tall — and
+    // that frame went up, for a round trip, before the echo laid it out
+    // again (#929). So the frame waits for the echo (`_holdForRefit`); the
+    // old pixels stay up meanwhile, which is the last thing that was right.
+    if (wnd.width !== next.width || wnd.height !== next.height) {
+      this._holdForRefit(next);
+    }
     // A window that grew is a window whose *placement* moved with it, and
     // the anchored ones have to be told: a completion list that gains a row
     // near the bottom of the screen is one that now flips above the caret.
@@ -1042,6 +1074,65 @@ export class WindowSize {
     );
   }
 
+  /**
+   * Hold this window's frames until the backend reports the size `_refit`
+   * just asked for, so the content that asked for it is laid out once, at
+   * that size, and never at the old one. The echo releases the hold (the
+   * 'resize' listener, `_settleRefitHold`), and so does somebody else's size
+   * arriving instead — the user's or a window manager's. A request that is
+   * never answered with a new size is the one case left: a window manager
+   * may refuse it, and its answer then carries the old size, which a move
+   * echo also does. So a timer ends the hold too, and the frame goes up at
+   * whatever size the window has — what every frame did before the hold.
+   */
+  _holdForRefit(size) {
+    if (NO_REFIT_HOLD) return;
+    clearTimeout(this._refitHeld?.timer);
+    const timer = setTimeout(() => {
+      if (this._refitHeld?.timer !== timer) return;
+      this._releaseRefitHold();
+    }, REFIT_HOLD_MS);
+    timer.unref?.();
+    this._refitHeld = { width: size.width, height: size.height, timer };
+  }
+
+  /** Whether this frame waits for the size `_refit` asked for: held, and
+   *  the window not that size yet. */
+  _refitHolding() {
+    const held = this._refitHeld;
+    if (!held) return false;
+    const wnd = this.window;
+    if (wnd && (wnd.width !== held.width || wnd.height !== held.height)) {
+      return true;
+    }
+    this._releaseRefitHold(false);
+    return false;
+  }
+
+  /**
+   * What a resize event does to a hold: the size it was waiting for, or a
+   * size that is not ours (`own` false), ends it. A move echo at the old
+   * size, or the echo of an earlier re-fit still in flight, does not —
+   * those are exactly the frames the hold is there to skip.
+   */
+  _settleRefitHold(ev, own) {
+    const held = this._refitHeld;
+    if (!held) return;
+    if (!own || (ev.width === held.width && ev.height === held.height)) {
+      this._releaseRefitHold();
+    }
+  }
+
+  /** End a hold, and run the frame it held back unless that is the caller's
+   *  own (`schedule` false). */
+  _releaseRefitHold(schedule = true) {
+    const held = this._refitHeld;
+    if (!held) return;
+    clearTimeout(held.timer);
+    this._refitHeld = null;
+    if (schedule && !this.destroyed && this.needsLayout) this._scheduleFrame();
+  }
+
   /**
    * Record a size this window has asked the backend for. `_requestedSize`
    * is the latest, which `_refit()` compares against to ask only once; the

package/src/nodes/window/window.js

@@ -275,6 +275,9 @@ export class WindowNode extends Scrollable(Node) {
     // has not echoed yet: both are ours when an echo carries them (_ownSize)
     this._confirmedSize = null;
     this._sizesInFlight = [];
+    // the size `_refit` is waiting for before it lays out again, and the
+    // timer that gives up on it (_holdForRefit)
+    this._refitHeld = null;
     // the last `WM_NORMAL_HINTS` struct written and the size it was written
     // at, so that a bound measured every frame is only *sent* on the frames
     // it moves (see _sendSizeHints for why the size is part of it)
@@ -340,6 +343,13 @@ export class WindowNode extends Scrollable(Node) {
       attributes.x = placed.x;
       attributes.y = placed.y;
       this._placedAt = { x: placed.x, y: placed.y };
+      this._placedSize = { width: natural.width, height: natural.height };
+      // what a centred window was centred at, so a later change of its own
+      // size grows it from here rather than centring it again
+      // (`_keepCentredTop`)
+      if (placed.placement === 'center') {
+        this._centredFor = { size: this._placedSize, x: placed.x, y: placed.y };
+      }
     }
     // A bound the content decides is a number by now, and the window manager
     // reads `WM_NORMAL_HINTS` when it frames the window — so it goes in with
@@ -920,6 +930,8 @@ export class WindowNode extends Scrollable(Node) {
       this._followAnchor();
     } else if (before.anchor) {
       this._placedAt = null;
+      this._placedSize = null;
+      this._centredFor = null;
       // A popup that gives up its anchor gives up being hidden by one: it
       // is an ordinary `x`/`y` popup from here, and the configure above
       // has already put it where the app asked.

package/src/types/components.d.ts

@@ -495,8 +495,22 @@ export interface DialogProps extends WidgetProps {
   managed?: boolean;
   onClose?: () => void;
   actions?: ReactNode;
-  width?: number;
-  height?: number;
+  /**
+   * The dialog's width, 360 by default — a number, because a body of prose
+   * wraps to it, where a natural width would be as wide as its longest
+   * sentence. `'auto'` sizes it to its content, capped at the monitor.
+   */
+  width?: number | 'auto';
+  /**
+   * `'auto'` (the default) is the content's height: the dialog is measured,
+   * centred over its owner at that size and only then opened, and it keeps
+   * following its content while open, growing from its top edge rather than
+   * being centred again. Capped at the usable height of the monitor; past
+   * that the body scrolls and the `actions` row stays pinned at the bottom
+   * of the window. A number is that height exactly, with the same scrolling
+   * body when the content needs more.
+   */
+  height?: number | 'auto';
   style?: StyleProp;
 }
 export const Dialog: ComponentType<DialogProps>;
@@ -672,7 +686,14 @@ export const MenuBar: ComponentType<MenuBarProps>;
 export interface TabItem {
   id: string;
   label: string;
-  content?: ReactNode;
+  /**
+   * The panel shown while this tab is selected. A function is the lazy form:
+   * it is called with no arguments, only while its tab is selected, and again
+   * on each render of `Tabs` while it stays selected — nothing is memoised, so
+   * a hidden tab's panel is never built. Leave it out to use `Tabs` as a pure
+   * navigator whose panel lives elsewhere.
+   */
+  content?: ReactNode | (() => ReactNode);
   disabled?: boolean;
 }
 
@@ -748,12 +769,17 @@ export const SplitPane: ComponentType<SplitPaneProps>;
 /**
  * The side a popup is asked for. `'start'`/`'end'` are the **logical** ones
  * and mirror with the anchor's direction, which is what a submenu wants;
- * `'left'`/`'right'` stay physical.
+ * `'left'`/`'right'` stay physical. `'center'` is no side: the popup goes
+ * over the anchor, middle on middle, and is only clamped into the monitor —
+ * what `Dialog` uses over its owner window. On a `<popup anchor>` a centred
+ * popup is centred when it opens and grows from its top edge when its own
+ * size changes afterwards.
  */
-export type AnchorPlacement = Placement | 'start' | 'end';
+export type AnchorPlacement = Placement | 'start' | 'end' | 'center';
 
 export interface AnchorOptions {
-  /** Preferred side, flipped at a screen edge (default `'bottom'`). */
+  /** Preferred side, flipped at a screen edge (default `'bottom'`);
+   *  `'center'` goes over the anchor instead, and ignores `align`/`offset`. */
   placement?: AnchorPlacement;
   /** Which edges line up on the cross axis (default `'start'`). */
   align?: 'start' | 'center' | 'end';
@@ -786,7 +812,7 @@ export interface AnchorOptions {
 
 /** An anchored rect, and the side it actually ended up on. */
 export interface AnchorRect extends Rect {
-  placement: Placement;
+  placement: Placement | 'center';
 }
 
 /**
@@ -820,7 +846,8 @@ export interface ScreenAnchorRect {
   height?: number;
 }
 
-/** Centre a popup of this size on the node's screen. */
+/** Centre a popup of this size over the window the node is in, clamped
+ *  into the monitor — `placement: 'center'` against the window's rect. */
 export function centerRect(
   node: DrawnNode,
   size: { width: number; height: number },

package/src/types/elements.d.ts

@@ -739,7 +739,11 @@ export interface TextInputProps extends DrawnProps<TextInputNode> {
    * both read naturally.
    */
   onChange?: (ev: ChangeEvent<TextInputNode>) => void;
-  /** Enter — or Ctrl+Enter in a `<textarea>` (⌘↩ on the Cocoa backend). */
+  /**
+   * Enter or Shift+Enter — or Ctrl+Enter in a `<textarea>` (⌘↩ on the Cocoa
+   * backend). Any other chord on Enter is left to the shortcuts, and so is
+   * Enter itself in a field with no `onSubmit`.
+   */
   onSubmit?: (ev: SubmitEvent<TextInputNode>) => void;
   placeholder?: string;
   placeholderColor?: Color;

package/src/types/system.d.ts

@@ -169,7 +169,9 @@ export function useWindowState(
  *
  * Costs no timer where the X server carries an `IDLETIME` counter (Xorg
  * does): a SYNC alarm fires on each crossing. Falls back to polling
- * MIT-SCREEN-SAVER, and stays `false` on a display with neither.
+ * MIT-SCREEN-SAVER, and stays `false` on an X display with neither. On win32
+ * and macOS it polls the session's own idle time on the same adaptive
+ * schedule.
  */
 export function useIdle(timeout: number): boolean;