react-x11 2.22.4 → 2.22.6

package/package.json

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

package/src/nodes/layout.js

@@ -5,6 +5,7 @@
 import { Yoga } from '../yoga.js';
 import { callHandler } from '../errors.js';
 import { DAMAGE_SLOP, layoutDiff } from './damage.js';
+import { resolveBorderWidths } from '../styles.js';
 import { insetRect, intersectRects, outerPixels, outside } from './rects.js';
 import { DEV } from './util.js';
 
@@ -82,6 +83,9 @@ export function offsetInParent(node) {
   };
 }
 
+/** What a leaf a width pass reads nothing from answers with. */
+const UNREAD_SIZE = Object.freeze({ width: 0, height: 0 });
+
 /** Layout, installed onto `Node.prototype` by node.js. */
 export class NodeLayout {
   /**
@@ -140,6 +144,10 @@ export class NodeLayout {
       if (heightMode === Yoga.MEASURE_MODE_UNDEFINED) {
         this._floorMeasureMode = MEASURE_MODES[widthMode];
       }
+      // A leaf a pass over the whole tree reads nothing from
+      // (`markUnreadLeaves`): its width there is one yoga replaces and its
+      // height one the pass does not read, so it is not shaped to find them.
+      if (this._widthUnread) return UNREAD_SIZE;
       const size = this.measureContent({
         width: measureOffer(width, widthMode),
         height: measureOffer(height, heightMode),
@@ -520,12 +528,33 @@ export class NodeLayout {
         ) {
           return;
         }
+        // …and one that rode it and only grew or shrank changed the pixels
+        // along the edges that moved — the column a virtualized document's
+        // blocks sit in, whose spacers re-slice in the scroll's own frame
+        const bands =
+          had && was.x === x && was.y === y && width > 0 && height > 0
+            ? this._edgeBands(was, grow)
+            : null;
+        if (bands) {
+          for (const band of bands) layoutDiff.sink(band, this);
+          return;
+        }
         if (had) layoutDiff.sink(insetRect(was, -grow), this);
         if (width > 0 && height > 0) {
           layoutDiff.sink(insetRect(this.abs, -grow), this);
         }
         return;
       }
+      // A box that stayed where it was and only grew or shrank changed the
+      // pixels along the edges that moved, and no others (`_edgeBands`)
+      const bands =
+        had && old.x === x && old.y === y && width > 0 && height > 0
+          ? this._edgeBands(old, grow)
+          : null;
+      if (bands) {
+        for (const band of bands) layoutDiff.sink(band, this);
+        return;
+      }
       if (had) {
         layoutDiff.sink(insetRect(old, -grow), this);
       }
@@ -535,6 +564,64 @@ export class NodeLayout {
     }
   }
 
+  /**
+   * The pixels a resize changed, for a box whose origin held: a band along
+   * each edge that moved, from where it was to where it is, as deep as the
+   * box's paint reaches in from that edge — a rounded corner, a border, a
+   * shadow's or an outline's reach. Its own paint anywhere else is the same
+   * solid fill it was, and its children claim for themselves when they move.
+   *
+   * A tall box that grows at its far end is the case: a document or a log
+   * or a virtualized list whose column gained a block far below the fold
+   * claimed the column, clipped to its scroll box — the whole viewport — on
+   * every frame it grew, for pixels that were all out of sight.
+   *
+   * Null where the whole box has to be claimed: anything that is not a
+   * plain box, one that scrolls (its bars are sized by it), one whose
+   * gradient is stretched over it, and one drawn through a group surface.
+   */
+  _edgeBands(old, grow) {
+    if (this.kind !== 'box' || this.isScroller?.()) return null;
+    const style = this.style;
+    if (style.backgroundImage) return null;
+    if (style.opacity !== undefined && style.opacity < 1) return null;
+    const bw = resolveBorderWidths(style, this.direction);
+    const reach =
+      Math.max(
+        style.borderRadius ?? 0,
+        bw.top,
+        bw.right,
+        bw.bottom,
+        bw.left,
+        grow,
+      ) + DAMAGE_SLOP;
+    const now = this.abs;
+    const bands = [];
+    const oldBottom = old.y + old.height;
+    const newBottom = now.y + now.height;
+    if (oldBottom !== newBottom) {
+      const top = Math.min(oldBottom, newBottom) - reach;
+      bands.push({
+        x: now.x - reach,
+        y: top,
+        width: Math.max(old.width, now.width) + 2 * reach,
+        height: Math.max(oldBottom, newBottom) + reach - top,
+      });
+    }
+    const oldRight = old.x + old.width;
+    const newRight = now.x + now.width;
+    if (oldRight !== newRight) {
+      const left = Math.min(oldRight, newRight) - reach;
+      bands.push({
+        x: left,
+        y: now.y - reach,
+        width: Math.max(oldRight, newRight) + reach - left,
+        height: Math.max(old.height, now.height) + 2 * reach,
+      });
+    }
+    return bands;
+  }
+
   /**
    * Move an already-laid-out subtree by a constant, without asking yoga
    * anything — the scroll fast path's walk (issue #405).

package/src/nodes/node.js

@@ -111,6 +111,9 @@ export class Node {
     // the width mode yoga last measured this leaf in with no height on
     // offer — the question `_heightForWidth` repeats
     this._floorMeasureMode = null;
+    // set only for the length of a width pass that reads nothing from this
+    // leaf (`markUnreadLeaves`)
+    this._widthUnread = false;
     this.root = null; // owning WindowNode once attached
     this.hidden = false;
     // Composited on a layer of its own above the window's bitmap, by a
@@ -384,8 +387,10 @@ export class Node {
     // captured before the child joins, so it covers the arrangement that is
     // about to be replaced (see _childListChanged). A viewport mid-blit has
     // nothing vacating — the child being added had no pixels — and the
-    // layout diff claims where it lands, so it names no region at all.
-    const before = this._blitLedgerOpen() ? null : this._childListBefore();
+    // layout diff claims where it lands, so it names no region at all. A
+    // child already here is a move, and says so (`_childListFine`).
+    const fine = this._childListFine(child.parent !== this);
+    const before = fine ? null : this._childListBefore();
     // a move has to leave the yoga tree too — yoga aborts on insertChild of
     // a node that still has a parent
     if (child.parent === this && this._joinsYoga(child)) {
@@ -414,7 +419,7 @@ export class Node {
     // against the app's, and only now can see the `scale` props above it.
     child._rescaleSubtree(mounting);
     this._textContentChanged();
-    this._childListChanged(before);
+    this._childListChanged(before, fine);
     a11yHooks.attached?.(this, child);
   }
 
@@ -464,7 +469,7 @@ export class Node {
    * through the layout diff in flush(), which is what lets this claim stay
    * bounded without requiring the node's own size to be pinned.
    */
-  _childListChanged(before) {
+  _childListChanged(before, fine = this._childListFine(true)) {
     // belt for a subtree attached imperatively with its rect already laid
     // out — nothing then re-runs _assignAbs to notice the reach grew
     this._clearHitBounds();
@@ -477,7 +482,7 @@ export class Node {
     // and says nothing about the ones that only rode the scroll. Joining
     // `_reflowed` would undo both — its post-layout claim is this node's
     // box, the whole band the blit is about to move.
-    if (this._blitLedgerOpen()) {
+    if (fine) {
       root.invalidate(true, before ?? NO_DAMAGE, 'child-list', this);
       return;
     }
@@ -485,6 +490,39 @@ export class Node {
     root._reflowed.add(this);
   }
 
+  /**
+   * Whether a child-list change here is claimed the fine way — the child
+   * that leaves claims its own rect, and the layout diff names where an
+   * entering child lands and whatever its arrival displaced — rather than
+   * as this node's box before and after the pass.
+   *
+   * Always for a viewport keeping a ledger this frame (issue #398). And,
+   * for a child that enters or leaves (`entersOrLeaves`), for any node
+   * inside a scroll box, scrolling or not: a document's blocks, the rows
+   * of a virtualized list one box down from its scroll box, a log that
+   * grows. Such a node is usually taller than the view, and its box
+   * clipped to the viewport is the whole viewport — so every re-slice of
+   * a list inside a column, all of it below the fold, repainted the view,
+   * and one landing in a scroll's frame poisoned its blit. The diff runs
+   * over every node that pass laid out, however deep, and a node that
+   * only grew claims the edge that moved (`_edgeBands`).
+   *
+   * Not for a move: a child moved within the list keeps its rect when
+   * what changed is only which sibling it is painted over, and no rect
+   * says that. Nor for a scroll box's own children outside a ledger frame:
+   * its box is also the claim that repaints its bars, which its content
+   * sizes.
+   */
+  _childListFine(entersOrLeaves) {
+    if (this._blitLedgerOpen()) return true;
+    if (!entersOrLeaves) return false;
+    for (let n = this.parent; n; n = n.parent) {
+      if (n.isWindow) return false;
+      if (n.isScroller?.()) return true;
+    }
+    return false;
+  }
+
   removeChild(child) {
     const index = this._indexOfChild(child);
     if (index === -1) return;
@@ -494,7 +532,8 @@ export class Node {
     // captured while the child is still attached, so it covers the rect the
     // child is about to stop occupying — the child's own, for a viewport
     // mid-blit, where this node's box is the whole scrolled band
-    const before = this._blitLedgerOpen()
+    const fine = this._childListFine(true);
+    const before = fine
       ? (child._claimBounds() ?? NO_DAMAGE)
       : this._childListBefore();
     this.children.splice(index, 1);
@@ -515,7 +554,7 @@ export class Node {
       child.yoga = null;
     }
     this._textContentChanged();
-    this._childListChanged(before);
+    this._childListChanged(before, fine);
   }
 
   /** Destroy real resources (X windows) in this subtree. Yoga nodes are

package/src/nodes/scrollblit.js

@@ -855,7 +855,15 @@ export class WindowScrollBlit {
       ? unionArea([strip, ...repairs]) - rectArea(strip)
       : 0;
     if (repairArea > area * BLIT_MAX_CLAIM_AREA) return;
-    if (!this._scrollBlitSafe(node, vp, target.top)) return;
+    // An ancestor's rounded corners reach into the viewport: a scroll box
+    // filling a rounded card, the commonest place a scroll box is. Their
+    // arcs do not translate, but they live in four small squares and
+    // nowhere else, so they are pinned the way an element blit pins them
+    // (issue #691) and repaired below, where they are and where the copy
+    // dragged their image. Refused instead, a list or a document inside a
+    // rounded frame repainted its whole viewport on every step of a scroll.
+    const corners = this._cornerPins(node, vp, target.top);
+    if (!this._scrollBlitSafe(node, vp, target.top, null, corners)) return;
     // The band the scrolled bar's thumb travels in is repaired on its own.
     // The thumb's rects are thin and run along the viewport's edge, and a
     // rect reaching into the band from inside — a column held down the
@@ -932,10 +940,28 @@ export class WindowScrollBlit {
       if (dragged) add(dragged);
     }
     for (const repair of repairs) add(repair);
-    rects = joinAlongEdges(rects).reduce(
-      (capped, rect) => addDamageRect(capped, rect),
-      [],
-    );
+    // Each pinned corner where it is and where the copy put its image — one
+    // box, since a step moves it a few pixels, and less the strip, which
+    // repaints anyway.
+    for (const pin of corners ?? []) {
+      const image = { ...pin, x: pin.x + dx, y: pin.y + dy };
+      const repair = intersectRects(unionRect(pin, image), vp);
+      if (!repair) continue;
+      for (const piece of outside(repair, strip)) add(piece);
+    }
+    // Capped in one call where corners were pinned: two at each end of the
+    // viewport and the strip at one of them are more pieces than the cap
+    // holds, and squeezed under it one at a time a corner joined whatever
+    // box an earlier merge had grown — scrolling back up merged the bottom
+    // corners with the strip at the top, which is the viewport. Offered
+    // together, neighbours merge first (`addDamageRects`), with the room an
+    // element blit's pins get.
+    rects = corners
+      ? addDamageRects([], joinAlongEdges(rects), CONTENTS_BLIT_MAX_RECTS)
+      : joinAlongEdges(rects).reduce(
+          (capped, rect) => addDamageRect(capped, rect),
+          [],
+        );
     // The last gate, and the only one that has to wait until the rects are
     // assembled: damage rects must not overlap, and the frame carries at
     // most MAX_DAMAGE_RECTS of them, so repairs that meet — a column and a

package/src/nodes/window/floors.js

@@ -445,6 +445,142 @@ export function setMeasuringShrink(node, axis, out) {
   }
 }
 
+/**
+ * Mark the leaves whose min-content width the pass over the whole tree has
+ * no use for (`_widthUnread`), listing them in `out`: their measure
+ * function answers without shaping them (`NodeLayout._useMeasureContent`)
+ * until `_measureContentSpans` takes the marks off.
+ *
+ * The pass lays every box out with no room on offer, and for a document that
+ * is every paragraph set a word to a line — 1 s of CoreText for 600 KB of
+ * Markdown, and more than half of the first frame — to read extents that
+ * almost nobody reads. An extent is read where a floor is written from it,
+ * which is a flex item on a `row`'s main axis (`receivesFloor`); by the
+ * extent of a node that is read, which adds up the ones of its children in
+ * flow (`contentSpan`); and at the root, when the window's own size hint is
+ * what is being measured. Down a column from a root nobody reads, none of
+ * that happens: a paragraph in a document is laid out, and nothing reads
+ * what it says.
+ *
+ * It is still laid out, though, and a leaf's answer could reach something
+ * that is read through its size. So it is marked only where it cannot:
+ *
+ * - every box from the root down to it is as wide as something other than
+ *   its content — the root offered no room, a width it names, a column
+ *   stretching it — so the width the leaf answers is one yoga replaces, and
+ *   nothing above it is sized from it;
+ * - no box is handed a share of space the leaf's height changed, which is
+ *   how a height could become somebody's width — an aspect ratio, a column
+ *   that wraps, an image sized to the height it is given. Every column from
+ *   the root down to it is either as tall as its content, and then holds no
+ *   box out of flow whose height it sets, or has a height of its own, and
+ *   then holds nothing that grows or gives way in the pass;
+ * - none of those columns wraps. (One may keep an aspect ratio: a box as
+ *   wide as something other than its content is as tall as that makes it.)
+ *
+ * What is left of its answer is a height, which a pass measuring widths
+ * never reads, and the layouts after the pass run in another config version
+ * (`measuringExactly`), which yoga answers by measuring every leaf again.
+ */
+export function markUnreadLeaves(node, out) {
+  const yoga = node.yoga;
+  const direction = yoga.getFlexDirection();
+  if (
+    (direction !== Yoga.FLEX_DIRECTION_COLUMN &&
+      direction !== Yoga.FLEX_DIRECTION_COLUMN_REVERSE) ||
+    yoga.getFlexWrap() !== Yoga.WRAP_NO_WRAP
+  ) {
+    // a row's items are read, and a column that wraps is as wide as its lines
+    return;
+  }
+  const height = heightOf(yoga);
+  if (height === 'unknown') return;
+  for (const child of node.children) {
+    if (!child.yoga || child.isWindow || child.style.display === 'none') {
+      continue;
+    }
+    if (child.style.position === 'absolute') {
+      // a height that follows this column's follows what is in it
+      if (height === 'content' && heightFollowsParent(child.yoga)) return;
+    } else if (
+      height === 'own' &&
+      // what the pass lets grow or give way (`setMeasuringShrink`)
+      (child.yoga.getFlexGrow() > 0 || namesOwnFloor(child, 'width'))
+    ) {
+      return;
+    }
+  }
+  const items = yoga.getAlignItems();
+  for (const child of node.children) {
+    if (!inFlow(child) || child._host !== null) continue;
+    if (!widthNotItsOwn(child.yoga, items)) continue;
+    if (child._measureFn) {
+      child._widthUnread = true;
+      out.push(child);
+    } else if (child.children.length !== 0) {
+      markUnreadLeaves(child, out);
+    }
+  }
+}
+
+/** The edges a horizontal margin can be set through. */
+const ACROSS_EDGES = [
+  Yoga.EDGE_LEFT,
+  Yoga.EDGE_RIGHT,
+  Yoga.EDGE_START,
+  Yoga.EDGE_END,
+  Yoga.EDGE_HORIZONTAL,
+  Yoga.EDGE_ALL,
+];
+
+/** Whether an in-flow child of a column is as wide as something other than
+ *  its content: a width it names, or the column's, which it stretches to
+ *  unless an alignment or an `auto` margin says otherwise. */
+function widthNotItsOwn(yoga, items) {
+  const width = yoga.getWidth().unit;
+  if (width === Yoga.UNIT_POINT || width === Yoga.UNIT_PERCENT) return true;
+  const self = yoga.getAlignSelf();
+  if ((self === Yoga.ALIGN_AUTO ? items : self) !== Yoga.ALIGN_STRETCH) {
+    return false;
+  }
+  for (const edge of ACROSS_EDGES) {
+    if (yoga.getMargin(edge).unit === Yoga.UNIT_AUTO) return false;
+  }
+  return true;
+}
+
+/**
+ * Where a column's height comes from, down a pass with none on offer: its
+ * `'content'`, when it names nothing that bounds it; its `'own'`, when all it
+ * names are numbers — a height, a basis (a height, down a column), a floor or
+ * a ceiling; and `'unknown'` for a share of something (a percentage), which
+ * a pass with no height on offer resolves as it likes.
+ */
+function heightOf(yoga) {
+  let own = false;
+  for (const value of [
+    yoga.getHeight(),
+    yoga.getFlexBasis(),
+    yoga.getMinHeight(),
+    yoga.getMaxHeight(),
+  ]) {
+    if (value.unit === Yoga.UNIT_PERCENT) return 'unknown';
+    if (value.unit === Yoga.UNIT_POINT) own = true;
+  }
+  return own ? 'own' : 'content';
+}
+
+/** Whether a box out of flow takes its height from its parent's: pinned to
+ *  both edges, or a share of it. */
+function heightFollowsParent(yoga) {
+  const pinned = (edge) => yoga.getPosition(edge).unit !== Yoga.UNIT_UNDEFINED;
+  const both = pinned(Yoga.EDGE_VERTICAL) || pinned(Yoga.EDGE_ALL);
+  if (both || (pinned(Yoga.EDGE_TOP) && pinned(Yoga.EDGE_BOTTOM))) return true;
+  return [yoga.getHeight(), yoga.getMinHeight(), yoga.getMaxHeight()].some(
+    (value) => value.unit === Yoga.UNIT_PERCENT,
+  );
+}
+
 /** …and back to the layout everything else is run from. */
 export function restoreShrink(shrunk) {
   for (const child of shrunk) {
@@ -540,8 +676,15 @@ export function restoreWidths(frozen) {
  * one's: a scroll pane contributes nothing to the floor above it and still
  * needs floors written *inside* it, or the column of rows it holds would
  * shrink to the viewport and there would be nothing left to scroll.
+ *
+ * `read` false is a node whose own extent nobody reads (`markUnreadLeaves`
+ * says which those are), so neither are those of its children in flow: the
+ * walk goes on through them to the rows inside, whose items' floors are
+ * written, and measures nothing on the way. An extent left unmeasured is
+ * asked for when it starts to count — its parent turned into a row, which
+ * leaves the parent dirty (`collectFloorStale`).
  */
-export function contentSpan(node, axis, intrinsic, root) {
+export function contentSpan(node, axis, intrinsic, root, read = true) {
   const yoga = node.yoga;
   const horizontal = axis === 'width';
   const own = horizontal ? yoga.getComputedWidth() : yoga.getComputedHeight();
@@ -564,6 +707,11 @@ export function contentSpan(node, axis, intrinsic, root) {
     // by itself, and a <text> span has no box of its own
     if (!child.yoga || child.isWindow) continue;
     if (child.style.display === 'none') continue;
+    if (!read && !receivesFloor(child, axis)) {
+      if (child._host === null)
+        contentSpan(child, axis, intrinsic, root, false);
+      continue;
+    }
     const laidOut = horizontal
       ? child.yoga.getComputedWidth()
       : child.yoga.getComputedHeight();
@@ -600,6 +748,8 @@ export function contentSpan(node, axis, intrinsic, root) {
     start = Math.min(start, at);
     end = Math.max(end, at + extent);
   }
+  // a span nobody reads, and — for a leaf — a measurement nobody needs
+  if (!read) return 0;
   if (start === Infinity) {
     // A leaf: nothing inside to look at, and what the pass did to it may
     // have been a stretch rather than a measurement. So it is asked again.

package/src/nodes/window/size.js

@@ -9,6 +9,7 @@ import {
   captureLeafHeights,
   collectFloorStale,
   columnHeightSpan,
+  markUnreadLeaves,
   declaresOwnMinimum,
   dirtyOutside,
   floorBoundaryOf,
@@ -41,6 +42,10 @@ import {
 // REACT_X11_NO_SCROLL_BLIT gives.
 const NO_SCOPED_FLOORS = process.env.REACT_X11_NO_SCOPED_FLOORS === '1';
 
+// …and for the width pass reading only the extents a floor is written from
+// (`markUnreadLeaves`): with it set, every leaf is shaped at no width again.
+const NO_UNREAD_WIDTHS = process.env.REACT_X11_NO_UNREAD_WIDTHS === '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. */
@@ -64,8 +69,13 @@ export class WindowSize {
    * they are when nothing has looked yet this frame, and a leaf the probe
    * finds moved has its floor taken off and the pass run again, since a
    * floor still on a node being measured would be read back as content.
+   *
+   * `wantRoot` is whether the root's own width is wanted — a window whose
+   * minimum is its content's (`_measureMinimum`). Otherwise the width pass
+   * reads only the extents a floor is written from, and the leaves nothing
+   * reads are not shaped (`markUnreadLeaves`).
    */
-  _measureContentSpans(axis, forWidth, probe = false) {
+  _measureContentSpans(axis, forWidth, probe = false, wantRoot = false) {
     this._sweepLayoutHosts();
     const yoga = this.yoga;
     const dir = this._rootDirection;
@@ -79,9 +89,24 @@ export class WindowSize {
       if (this._layoutHosts.size !== 0) this._measureHostChildWidths();
       const shrunk = [];
       setMeasuringShrink(this, axis, shrunk);
+      // A layout host reads its own extent and its children's, and a root
+      // with a ceiling is as wide as its content up to it: both read what
+      // nothing else here does, so both are measured whole.
+      const read =
+        wantRoot ||
+        NO_UNREAD_WIDTHS ||
+        this._readEveryWidth ||
+        this._layoutHosts.size !== 0 ||
+        yoga.getMaxWidth().unit !== Yoga.UNIT_UNDEFINED;
+      const unread = [];
+      if (!read) markUnreadLeaves(this, unread);
       this._layoutPasses += 1;
-      yoga.calculateLayout(0, undefined, dir);
-      const span = contentSpan(this, axis, null, this);
+      try {
+        yoga.calculateLayout(0, undefined, dir);
+      } finally {
+        for (const leaf of unread) leaf._widthUnread = false;
+      }
+      const span = contentSpan(this, axis, null, this, read);
       restoreShrink(shrunk);
       return span;
     }
@@ -429,9 +454,9 @@ export class WindowSize {
    * (a stale extent writes the style's own minimum), which is what keeps a
    * floor from ratcheting: read back as content, it could only ever grow.
    */
-  _measureWidthFloors() {
+  _measureWidthFloors(wantRoot = false) {
     this._writeFloors('width');
-    const span = this._measureContentSpans('width');
+    const span = this._measureContentSpans('width', undefined, false, wantRoot);
     this._writeFloors('width');
     return span;
   }
@@ -452,7 +477,7 @@ export class WindowSize {
     return measuringExactly(() =>
       Math.ceil(
         axis === 'width'
-          ? this._measureWidthFloors()
+          ? this._measureWidthFloors(true)
           : this._measureHeightFloors(forWidth, true),
       ),
     );

package/src/nodes/window/window.js

@@ -282,6 +282,9 @@ export class WindowNode extends Scrollable(Node) {
     // (spine.js), and the spines this frame's measurement runs on
     this._floorsOtherSources = new Set();
     this._floorsUnscoped = false;
+    // every width extent measured, read or not (`REACT_X11_NO_UNREAD_WIDTHS`,
+    // per window): what a test holds the width pass that skips them to
+    this._readEveryWidth = false;
     this._floorsScopeNow = null;
     this._floorsSpineNow = null;
     // whether the next layout walk must visit every box (`invalidate`)