react-x11 2.18.6 → 2.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.18.6",
+  "version": "2.19.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -110,7 +110,7 @@
   "optionalDependencies": {
     "@windowkit/appkit": "^0.12.0",
     "@windowkit/wayland": "^3.1.1",
-    "@windowkit/win32": "^0.0.2",
+    "@windowkit/win32": "^0.0.3",
     "dbus-native": "^0.15.1",
     "x11-dri": "^0.9.0"
   },

package/src/backend/context2d.js

@@ -577,6 +577,20 @@ export class BackendContext2D {
    * dashes of an animated edge were repainted sixteen times a second and
    * never moved.
    */
+  /**
+   * Text drawn under a transform that scales is drawn scaled, glyphs and
+   * all: both bridges lay a text layout out once and draw its outlines
+   * through the context's matrix (Direct2D's `DrawTextLayout`, CoreText's
+   * `CTFrameDraw`). ntk's context on X11 cannot — its glyphs come out of a
+   * cache rasterized at the size they were shaped at, and a transform
+   * moves where each lands, not how big it is — and says nothing, which is
+   * the same answer. So an element that would rather draw a layout it has
+   * than shape a new one at every step of a zoom asks this first.
+   */
+  get scalesText() {
+    return true;
+  }
+
   get lineDashOffset() {
     return this._state.dashOffset;
   }

package/src/node.d.ts

@@ -142,6 +142,15 @@ export interface Context2D {
   strokeRect(x: number, y: number, width: number, height: number): void;
   clearRect(x: number, y: number, width: number, height: number): void;
   fillText(text: string, x: number, y: number): void;
+  /**
+   * `true` where text drawn under a transform that scales is drawn scaled,
+   * glyphs and all — the Windows and macOS contexts. Absent on X11, where
+   * ntk rasterizes glyphs at the size the text was shaped at and a
+   * transform moves only where each one lands. An element that would draw
+   * a layout it already has at another size, rather than shape a new one,
+   * asks this first.
+   */
+  readonly scalesText?: boolean;
   measureText(text: string): { width: number; [key: string]: unknown };
   /**
    * Composite an offscreen `Surface` (`react-x11/ntk`) — whole at a point,

package/src/nodes/animation.js

@@ -490,6 +490,7 @@ export class NodeAnimation {
       if (this.root) {
         this.root.needsLayout = true;
         this.root._floorsDirty = true;
+        this.root._floorsSources.add(this);
       }
     }
     // A tick writes `this.style` without going through `_retarget`, so it

package/src/nodes/invalidate.js

@@ -322,6 +322,11 @@ export class WindowInvalidate {
       // panned — was a full measurement of the content floors a step.
       if (reason !== 'scroll' && reason !== 'position') {
         this._floorsDirty = true;
+        // …and which node changed, so that a change inside a box that sizes
+        // itself measures that box and nothing around it (`_floorsScope`).
+        // A claim that names no node, or names the window, is the tree's.
+        if (source && source !== this) this._floorsSources.add(source);
+        else this._floorsUnscoped = true;
       }
       if (reason !== 'scroll' && reason !== 'resize' && reason !== 'position') {
         this._floorsContentDirty = true;

package/src/nodes/layouthost.js

@@ -415,6 +415,7 @@ export class NodeLayoutHost {
       // content floors were measured from, as any style change is
       root._floorsDirty = true;
       root._floorsContentDirty = true;
+      root._floorsUnscoped = true;
     }
   }
 
@@ -944,6 +945,7 @@ export class WindowLayoutHost {
     this._failedHosts.clear();
     this._floorsDirty = true;
     this._floorsContentDirty = true;
+    this._floorsUnscoped = true;
     return true;
   }
 }

package/src/nodes/queries.js

@@ -196,6 +196,7 @@ export class NodeQueries {
       if (applyLayoutStyle(this.yoga, this.style, before) && this.root) {
         this.root._floorsDirty = true;
         this.root._floorsContentDirty = true;
+        this.root._floorsSources.add(this);
       }
     }
   }
@@ -233,6 +234,7 @@ export class WindowQueries {
     // a query block may carry layout properties, so the floors measured from
     // the styles it is replacing are not the answer any more
     this._floorsDirty = true;
+    this._floorsUnscoped = true;
     for (const node of [...this._sizeQueryNodes]) {
       if (node.destroyed) this._sizeQueryNodes.delete(node);
       else node._sizeQueriesChanged();
@@ -324,7 +326,10 @@ export class WindowQueries {
     // a block may carry layout properties, so the floors measured from the
     // styles it is replacing are not the answer any more — the same debt a
     // window query leaves (`_resolveSizeQueries`)
-    if (changed) this._floorsDirty = true;
+    if (changed) {
+      this._floorsDirty = true;
+      this._floorsUnscoped = true;
+    }
     return changed;
   }
 }

package/src/nodes/window/floors.js

@@ -197,6 +197,88 @@ export function collectFloorStale(node, stale, found, sweep) {
   }
 }
 
+/**
+ * Whether `node` is a box its content cannot size and its surroundings cannot
+ * size either — an edge a floor measurement may stop at
+ * (`WindowNode._floorsScope`).
+ *
+ * Absolutely positioned, with a width and a height its style names as
+ * numbers: it is out of its parent's flow, so nothing measured inside it
+ * reaches anything above it (`contentSpan` skips it, and no floor is written
+ * on it), and every pass lays it out at those numbers wherever it sits, so
+ * what is inside it is measured the same in a pass over the window and in a
+ * pass over it alone. Nothing in its own box resolves against its parent —
+ * a percentage of padding would — and neither it nor its parent is a layout
+ * host, whose children are measured tree by tree.
+ *
+ * A card on a graph, a popover laid out inside the window, a sized overlay:
+ * the boxes a change inside is most often confined to. An in-flow box with a
+ * size of its own would do as well along its cross axis, but on its main
+ * axis a flex line can grow it past its width or shrink it under a minimum
+ * the author named, and that is a question about its siblings.
+ */
+export function isFloorBoundary(node) {
+  const style = node.style;
+  return (
+    node.yoga != null &&
+    !node.isWindow &&
+    style.position === 'absolute' &&
+    style.display !== 'none' &&
+    typeof style.width === 'number' &&
+    typeof style.height === 'number' &&
+    typeof style.minWidth !== 'string' &&
+    typeof style.minHeight !== 'string' &&
+    typeof style.maxWidth !== 'string' &&
+    typeof style.maxHeight !== 'string' &&
+    !PADDINGS.some((key) => typeof style[key] === 'string') &&
+    node._host === null &&
+    (node.parent?._host ?? null) === null
+  );
+}
+
+const PADDINGS = [
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingHorizontal',
+  'paddingVertical',
+  'paddingStart',
+  'paddingEnd',
+];
+
+/**
+ * The box that holds a change to `node` in (`isFloorBoundary`), or null when
+ * none does below `root`. Looked for from the parent up: a node that changed
+ * may have changed its own size, and it is what is *around* the change that
+ * has to hold still.
+ */
+export function floorBoundaryOf(node, root) {
+  for (let n = node.parent; n && n !== root; n = n.parent) {
+    if (n.isWindow) return null;
+    if (isFloorBoundary(n)) return n;
+  }
+  return null;
+}
+
+/**
+ * Whether yoga has a change on record anywhere but inside `boundaries` and on
+ * the way down to them (`paths`) — something that changed with no node
+ * saying so, which a measurement confined to the boundaries would miss. A
+ * dirty node's ancestors are dirty too, so the walk goes down dirty nodes
+ * only, and a clean one has nothing under it to find.
+ */
+export function dirtyOutside(node, boundaries, paths) {
+  for (const child of node.children) {
+    if (!child.yoga || child.isWindow || !child.yoga.isDirty()) continue;
+    if (boundaries.has(child)) continue;
+    if (!paths.has(child)) return true;
+    if (dirtyOutside(child, boundaries, paths)) return true;
+  }
+  return false;
+}
+
 /**
  * After a pass that settled the widths: which of the height floors, each a
  * height *for a width*, were measured for a width their node no longer has.
@@ -216,7 +298,7 @@ export function collectFloorStale(node, stale, found, sweep) {
  * the pixel grid off and the real one with it on, so the same layout reads
  * a fraction apart between them.
  */
-export function probeHeightFloors(node, root, hit) {
+export function probeHeightFloors(node, root, hit, stop = root) {
   for (const child of node.children) {
     if (!child.yoga || child.isWindow) continue;
     if (child.style.display === 'none') continue;
@@ -230,10 +312,10 @@ export function probeHeightFloors(node, root, hit) {
         at !== undefined &&
         child._heightForWidth(width) !== child._heightForWidth(at)
       ) {
-        markHeightStale(child, root, hit);
+        markHeightStale(child, root, hit, stop);
       }
     } else {
-      probeHeightFloors(child, root, hit);
+      probeHeightFloors(child, root, hit, stop);
     }
     // whatever the extent is, it is the extent for this width now — a
     // stale one is about to be measured here, a clean one was just checked
@@ -241,10 +323,12 @@ export function probeHeightFloors(node, root, hit) {
   }
 }
 
-/** A leaf whose height moved takes every extent above it with it. */
-function markHeightStale(node, root, hit) {
+/** A leaf whose height moved takes every extent above it with it — up to
+ *  `stop`, a box that sizes itself (`isFloorBoundary`), whose extent is its
+ *  style's whatever moved inside it. */
+function markHeightStale(node, root, hit, stop = root) {
   hit.marked = true;
-  for (let n = node; n && n !== root; n = n.parent) {
+  for (let n = node; n && n !== stop; n = n.parent) {
     if (n._floorH === undefined) continue;
     n._floorH = undefined;
     root._floorsStale.add(n);

package/src/nodes/window/size.js

@@ -4,9 +4,12 @@
 
 import { measuringExactly } from '../../styles.js';
 import { availableArea } from '../../screens.js';
+import { Yoga } from '../../yoga.js';
 import {
   captureLeafHeights,
   collectFloorStale,
+  dirtyOutside,
+  floorBoundaryOf,
   probeHeightFloors,
   setMeasuringShrink,
   restoreShrink,
@@ -27,6 +30,26 @@ import {
   scaleWindowGeometry,
 } from './hints.js';
 
+// Escape hatch, read once like the others: for measuring the scoped floors
+// against the whole-tree ones on the same build, and as first aid if a
+// change inside a card is ever measured wrong. `=== '1'` for the reason
+// REACT_X11_NO_SCROLL_BLIT gives.
+const NO_SCOPED_FLOORS = process.env.REACT_X11_NO_SCOPED_FLOORS === '1';
+
+/**
+ * Mark a box laid out alone (`_measureBoundary`) for the window's pass to lay
+ * out again. It was laid out at the size that pass will give it, so yoga
+ * would answer from its cache and keep what the measurement left inside —
+ * placed off the pixel grid, with the shrink borrowed. A style set to
+ * something else and back is how a box with no measure function says it
+ * changed.
+ */
+function relayOut(node) {
+  const shrink = node.style.flexShrink ?? 1;
+  node.yoga.setFlexShrink(shrink + 1);
+  node.yoga.setFlexShrink(shrink);
+}
+
 /** Content-sized windows, installed onto `WindowNode.prototype` by window.js. */
 export class WindowSize {
   /**
@@ -102,6 +125,21 @@ export class WindowSize {
     this._sweepLayoutHosts();
     const found = { width: false, height: false };
     this._floorsStale.clear();
+    // Decided afresh on every call rather than once a frame: something
+    // between the two calls a frame makes — a size query resolving — can
+    // turn a scoped change into one that is not, and the wider collection
+    // is the one that is always right.
+    const scope = this._floorsScope();
+    this._floorsScopeNow = scope;
+    if (scope !== null) {
+      for (const boundary of scope) {
+        // its children's floors are written from here; its own extent is
+        // its style's, and stands
+        this._floorsStale.add(boundary);
+        collectFloorStale(boundary, this._floorsStale, found, false);
+      }
+      return found;
+    }
     // the root's own children are written from here too, and its direction
     // can move like any node's
     this._floorsStale.add(this);
@@ -109,6 +147,123 @@ export class WindowSize {
     return found;
   }
 
+  /**
+   * The boxes the changes since the last measurement are confined to, or
+   * null when a measurement has to look at the whole tree.
+   *
+   * Every change to a box tree announces itself through `invalidate` with
+   * the node it changed (`_floorsSources`), and every node above it is
+   * dirty in yoga for it — which is all `collectFloorStale` can see, so a
+   * text that changed inside a card took every extent from the card up to
+   * the window with it, and the measurement that followed laid the whole
+   * tree out three times to read them back. A box that sizes itself
+   * (`isFloorBoundary`) holds the change in: its extent is its style's, the
+   * extents above it are what they were, and what is inside it can be
+   * measured by laying it out alone.
+   *
+   * Scoped only when all of that is known to hold: every change has such a
+   * box around it, yoga has nothing dirty outside them and the way down to
+   * them (a change nobody named), the tree has been measured once already,
+   * the window is the width it was measured at and sizes itself from no
+   * content, and no layout host or container query is in play. Anything
+   * else is the whole tree, as it always was.
+   */
+  _floorsScope() {
+    const sources = this._floorsSources;
+    if (
+      NO_SCOPED_FLOORS ||
+      this._floorsUnscoped ||
+      sources.size === 0 ||
+      !this._floorsSwept ||
+      this._layoutHosts.size !== 0 ||
+      this._containerQueryNodes.size !== 0 ||
+      this._floorsWidth !== (this.window?.width ?? this._requestedSize?.width)
+    ) {
+      return null;
+    }
+    const props = this.props;
+    if (
+      isAutoSize(props.width) ||
+      isAutoSize(props.height) ||
+      CONTENT_BOUND_PROPS.some((key) => isContentBound(props[key]))
+    ) {
+      return null;
+    }
+    const boundaries = new Set();
+    for (const source of sources) {
+      // gone, or moved to another window: its old parent's child list is
+      // the change that counts, and that parent said so itself
+      if (source.destroyed || source.root !== this) continue;
+      const boundary = floorBoundaryOf(source, this);
+      if (boundary === null) return null;
+      boundaries.add(boundary);
+    }
+    if (boundaries.size === 0) return null;
+    // the outermost of nested ones: measuring it measures what it holds
+    const paths = new Set();
+    for (const boundary of [...boundaries]) {
+      for (let n = boundary.parent; n && n !== this; n = n.parent) {
+        if (boundaries.has(n)) {
+          boundaries.delete(boundary);
+          break;
+        }
+      }
+    }
+    for (const boundary of boundaries) {
+      for (let n = boundary.parent; n && n !== this; n = n.parent) {
+        paths.add(n);
+      }
+    }
+    if (dirtyOutside(this, boundaries, paths)) return null;
+    return boundaries;
+  }
+
+  /**
+   * One boundary's floors, measured with it laid out alone — the passes
+   * `_measureContentSpans` runs over the whole tree, run over the box: its
+   * size is its style's in either, so the space everything inside it is
+   * laid out in is the same. `probe` is the height measurement's check for
+   * leaves whose width moved, stopped at the box, whose own extent stands.
+   */
+  _measureBoundary(boundary, axis, probe = false) {
+    const yoga = boundary.yoga;
+    const dir =
+      boundary.direction === 'rtl' ? Yoga.DIRECTION_RTL : Yoga.DIRECTION_LTR;
+    if (axis === 'width') {
+      const shrunk = [];
+      setMeasuringShrink(boundary, axis, shrunk);
+      this._scopedFloorPasses += 1;
+      yoga.calculateLayout(undefined, undefined, dir);
+      contentSpan(boundary, axis, null, this);
+      restoreShrink(shrunk);
+      relayOut(boundary);
+      return;
+    }
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(undefined, undefined, dir);
+    if (probe) {
+      const hit = { marked: false, owed: false };
+      probeHeightFloors(boundary, this, hit, boundary);
+      if (hit.marked) {
+        this._writeFloors('height');
+        this._scopedFloorPasses += 1;
+        yoga.calculateLayout(undefined, undefined, dir);
+      }
+    }
+    const intrinsic = new Map();
+    captureLeafHeights(boundary, intrinsic);
+    const frozen = [];
+    freezeWidths(boundary, frozen);
+    const shrunk = [];
+    setMeasuringShrink(boundary, axis, shrunk);
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(undefined, 0, dir);
+    contentSpan(boundary, axis, intrinsic, this);
+    restoreWidths(frozen);
+    restoreShrink(shrunk);
+    relayOut(boundary);
+  }
+
   /** The floors on the children of every node found stale, from the extents
    *  they carry — `writeFloors` for each. */
   _writeFloors(axis) {
@@ -203,28 +358,77 @@ export class WindowSize {
    */
   _applyContentFloors(width, height) {
     const found = this._collectFloorStale();
+    const scope = this._floorsScopeNow;
+    if (scope !== null) {
+      this._applyScopedFloors(scope, found, width, height);
+    } else {
+      measuringExactly(() => {
+        if (found.width) this._measureWidthFloors();
+        else this._writeFloors('width');
+        // from the extents on hand; a stale one writes the style's minimum,
+        // which is the floor coming off ahead of its measurement below
+        this._writeFloors('height');
+      });
+      let heights = found.height;
+      let probed = false;
+      if (!heights) {
+        this._layoutRoot(width, height);
+        heights = this._probeHeightFloors().owed;
+        probed = true;
+      }
+      if (heights) {
+        measuringExactly(() => this._measureHeightFloors(width, !probed));
+        this._layoutRoot(width, height);
+      }
+    }
+    this._floorsDirty = false;
+    this._floorsContentDirty = false;
+    this._floorsSwept = true;
+    this._floorsWidth = width;
+    this._floorsSources.clear();
+    this._floorsUnscoped = false;
+    this._floorsScopeNow = null;
+  }
+
+  /**
+   * `_applyContentFloors` for changes confined to boxes that size
+   * themselves (`_floorsScope`): the same measurements in the same order,
+   * each over one box laid out alone rather than over the window, and the
+   * window's one real pass after them — which yoga answers from its cache
+   * everywhere but the boxes and the way down to them.
+   */
+  _applyScopedFloors(boundaries, found, width, height) {
     measuringExactly(() => {
-      if (found.width) this._measureWidthFloors();
-      else this._writeFloors('width');
-      // from the extents on hand; a stale one writes the style's minimum,
-      // which is the floor coming off ahead of its measurement below
+      if (found.width) {
+        this._writeFloors('width');
+        for (const boundary of boundaries) {
+          this._measureBoundary(boundary, 'width');
+        }
+      }
+      this._writeFloors('width');
       this._writeFloors('height');
     });
     let heights = found.height;
     let probed = false;
     if (!heights) {
       this._layoutRoot(width, height);
-      heights = this._probeHeightFloors().owed;
+      const hit = { marked: false, owed: false };
+      for (const boundary of boundaries) {
+        probeHeightFloors(boundary, this, hit, boundary);
+      }
+      heights = hit.owed;
       probed = true;
     }
     if (heights) {
-      measuringExactly(() => this._measureHeightFloors(width, !probed));
+      measuringExactly(() => {
+        this._writeFloors('height');
+        for (const boundary of boundaries) {
+          this._measureBoundary(boundary, 'height', !probed);
+        }
+        this._writeFloors('height');
+      });
       this._layoutRoot(width, height);
     }
-    this._floorsDirty = false;
-    this._floorsContentDirty = false;
-    this._floorsSwept = true;
-    this._floorsWidth = width;
   }
 
   /**

package/src/nodes/window/window.js

@@ -267,6 +267,12 @@ export class WindowNode extends Scrollable(Node) {
     this._floorsDirty = true;
     this._floorsWidth = null;
     this._floorsStale = new Set();
+    // the nodes whose changes the next measurement owes, and whether one
+    // came with no node to name (`_floorsScope`)
+    this._floorsSources = new Set();
+    this._floorsUnscoped = false;
+    this._floorsScopeNow = null;
+    this._scopedFloorPasses = 0;
     // whether the first floors pass has run (`collectFloorStale`'s sweep)
     this._floorsSwept = false;
     this._floorsMeasured = 0;

package/src/paintcache.js

@@ -83,19 +83,26 @@ const MAX_ITEM_PIXELS = 256 * 256;
  * grow this forever; the cost of forgetting is one extra live paint. */
 const MAX_PENDING = 4096;
 
-/** Whether a context is drawing 1:1 into device space.
- *
- * A cached surface is pixels at a fixed size and orientation. Under a scaled
- * or rotated CTM, compositing it would *resample* those pixels where a live
- * paint would re-rasterize at the right size, so the cache has to stand
- * aside. react-x11 only ever translates during paint, and only inside
- * `<canvas>`, so this is insurance rather than a live case.
+/**
+ * Whether `ctx` draws on the device's pixel grid, wherever its origin is: a
+ * surface rendered at device resolution composites through it pixel for
+ * pixel. An integer translation keeps that — and it is how an overlay pane
+ * over a `<glarea>` draws, from the window's coordinates into its layer's
+ * (src/win32/overlay.js) — so declining it painted every cached drawing on a
+ * surface's children live, every time a pane repainted: every card of a
+ * graph, on every step of a pan. A scale, a rotation or a fraction of a
+ * pixel does not, and paints live.
  */
 function isDeviceSpace(ctx) {
   const m = ctx.getTransform?.();
   if (!m) return true;
   return (
-    m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0
+    m.a === 1 &&
+    m.b === 0 &&
+    m.c === 0 &&
+    m.d === 1 &&
+    Number.isInteger(m.e) &&
+    Number.isInteger(m.f)
   );
 }