react-x11 2.33.0 → 2.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.33.0",
+  "version": "2.35.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -109,7 +109,7 @@
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.19.0",
+    "@windowkit/appkit": "^0.22.0",
     "@windowkit/wayland": "^3.1.1",
     "@windowkit/win32": "^0.0.6",
     "dbus-native": "^0.16.0",

package/src/cocoa/promotion.js

@@ -79,6 +79,11 @@ const rectsOverlap = (a, b) =>
   a.y < b.y + b.height &&
   b.y < a.y + a.height;
 
+// `a` cut to `b`: their overlap, or a clip of no size where they have none,
+// which hides what it holds rather than holding it whole
+const cutTo = (a, b) =>
+  intersectRects(a, b) ?? { x: b.x, y: b.y, width: 0, height: 0 };
+
 const containsRect = (outer, inner) =>
   inner.x >= outer.x &&
   inner.y >= outer.y &&
@@ -615,13 +620,23 @@ export class CocoaPromotion {
         !(parent.style?.borderRadius > 0)
       ) {
         const inner = insetRect(parent.abs, borderReach(parent));
-        // a clip with round corners cut again is no box's shape
-        if (cut.radius > 0 && cut.clip && !containsRect(inner, cut.clip)) {
-          return false;
+        // a clip with round corners cut again is no one box's shape: the
+        // square ones go in a box of their own around it (`outer`)
+        if (cut.radius > 0 && cut.clip) {
+          if (cut.outer || !containsRect(inner, cut.clip)) {
+            cut.outer = cut.outer ? cutTo(cut.outer, inner) : inner;
+          }
+        } else {
+          cut.clip = cut.clip ? cutTo(cut.clip, inner) : inner;
+        }
+        bounds = intersectRects(bounds, cut.clip);
+        if (bounds && cut.outer) bounds = intersectRects(bounds, cut.outer);
+        // nothing of the part shows: its layer is kept, cut to show nothing,
+        // and there is nothing it could be under or over until it does
+        if (!bounds) {
+          cut.bounds = null;
+          return true;
         }
-        cut.clip = cut.clip ? intersectRects(cut.clip, inner) : inner;
-        bounds = cut.clip && intersectRects(bounds, cut.clip);
-        if (!bounds) return false;
       }
       const order = parent.paintOrder();
       for (let j = order.indexOf(n) + 1; j < order.length; j++) {

package/src/cocoa/sprites.js

@@ -28,11 +28,27 @@
 // delay a part joined half way through needs, so that is the bridge sprites
 // ask for: on an older one nothing is asked and every part is drawn by its
 // element.
+//
+// A part none of which shows — scrolled out of its pane, or outside its own
+// clip — keeps its layer, cut to show nothing, up to a budget of raster for
+// such parts: its element's clock would otherwise run for it, and it is
+// already where its animation has it the frame a scroll brings it back. A
+// clip with round corners that a square ancestor cuts again is a box of its
+// own inside a box of the square one's.
+//
+// A part may be inside another of its element's (`parent`): a spinner in a
+// card that fades. Its layer is lifted inside the parent's, so it fades,
+// turns and is cut with it, and the parent's raster leaves it out — the
+// presenter hands the parent's `paint` the keys of its children lifted with
+// it, and paints it again whenever they change, in the frame they do. The
+// parent was asked about everywhere it can be, so a child is asked about
+// nothing more where it stays inside the parent's raster, and is its
+// element's to draw where it does not, or where its parent is not lifted.
 
 import { RASTER_PAD, RasterState } from './presenter.js';
 import { CocoaPlayer, PlayerLift } from './player.js';
 import { VideoLift, canLiftVideo } from './video.js';
-import { intersectRects } from '../nodes/rects.js';
+import { intersectRects, rectContains } from '../nodes/rects.js';
 import { DEV } from '../nodes/util.js';
 import { isVideoFrames } from '../videoframes.js';
 
@@ -41,12 +57,29 @@ import { isVideoFrames } from '../videoframes.js';
 // upload for every new version.
 const MAX_SIDE = 8192;
 
+// The raster a window keeps for parts that show nothing — scrolled out of
+// their pane, or outside their own clip — in device pixels: 32 MB. Past it
+// such a part is its element's, which runs it on its own clock.
+const HIDDEN_BUDGET = 8 * 1024 * 1024;
+
 // Sorted after the element's children, which its own drawing comes after
 // (`Node.paint` paints the children first), and before its next sibling.
 const AFTER_CHILDREN = Number.MAX_SAFE_INTEGER;
 
 const IDENTITY = Object.freeze([1, 0, 0, 1, 0, 0]);
 
+const ORIGIN = Object.freeze({ x: 0, y: 0 });
+
+// what a part with no part lifted inside it is handed
+const NO_KIDS = Object.freeze(new Set());
+
+// keyframes already found good, by the property they were found good for
+const CHECKED = new WeakMap();
+
+// where a part can be about its origin, by its one transform animation's
+// keyframes, and what that was worked out for (`extentOf`)
+const EXTENTS = new WeakMap();
+
 // what a part's raster holds before its first paint
 const UNPAINTED = Symbol('unpainted');
 
@@ -85,8 +118,13 @@ function isAnimation(a) {
   if (!finite(a.duration) || !(a.duration > 0)) return false;
   const values = a.values;
   if (!Array.isArray(values) || values.length < 2) return false;
-  const value = a.property === 'opacity' ? finite : isMatrix;
-  if (!values.every(value)) return false;
+  // an element hands the same keyframes over from frame to frame: they
+  // are read once
+  if (CHECKED.get(values) !== a.property) {
+    const value = a.property === 'opacity' ? finite : isMatrix;
+    if (!values.every(value)) return false;
+    CHECKED.set(values, a.property);
+  }
   if (a.keyTimes !== undefined) {
     const t = a.keyTimes;
     if (!Array.isArray(t) || t.length !== values.length || t[0] !== 0) {
@@ -127,6 +165,9 @@ function isSprite(sprite) {
   }
   if (sprite.reach !== undefined && !isRect(sprite.reach)) return false;
   if (sprite.clip !== undefined && !isRect(sprite.clip)) return false;
+  if (sprite.parent !== undefined && typeof sprite.parent !== 'string') {
+    return false;
+  }
   if (
     sprite.clipRadius !== undefined &&
     !(finite(sprite.clipRadius) && sprite.clipRadius >= 0)
@@ -210,11 +251,38 @@ function unionRect(a, b) {
 function extentOf(sprite) {
   const reach = sprite.reach ?? sprite.rect;
   const origin = originOf(sprite);
-  let box = mapRect(reach, sprite.transform ?? IDENTITY, origin);
+  const m0 = sprite.transform ?? IDENTITY;
+  // About its origin, where it can be is the same for a part that only
+  // moved: kept by its keyframes, which an element hands over from frame
+  // to frame, rather than every keyframe mapped every frame.
+  const rel = {
+    x: reach.x - origin.x,
+    y: reach.y - origin.y,
+    width: reach.width,
+    height: reach.height,
+  };
+  let turns = null;
   for (const a of sprite.animations ?? []) {
     if (a.property !== 'transform') continue;
-    for (const m of a.values) box = unionRect(box, mapRect(reach, m, origin));
+    turns = turns === null ? a.values : undefined;
+  }
+  const key = `${rel.x},${rel.y},${rel.width},${rel.height},${m0.join(',')}`;
+  let about = turns ? EXTENTS.get(turns) : null;
+  if (about?.key !== key) {
+    let box = mapRect(rel, m0, ORIGIN);
+    for (const a of sprite.animations ?? []) {
+      if (a.property !== 'transform') continue;
+      for (const m of a.values) box = unionRect(box, mapRect(rel, m, ORIGIN));
+    }
+    about = { key, box };
+    if (turns) EXTENTS.set(turns, about);
   }
+  const box = {
+    x: about.box.x + origin.x,
+    y: about.box.y + origin.y,
+    width: about.box.width,
+    height: about.box.height,
+  };
   const x = Math.floor(box.x) - RASTER_PAD;
   const y = Math.floor(box.y) - RASTER_PAD;
   return {
@@ -315,6 +383,8 @@ export class SpriteLayers {
       this.hosts.delete(host);
       if (!host.destroyed) changed.add(host);
     }
+    // the raster kept for parts that show nothing, this frame
+    let hidden = 0;
     for (const [host, list] of offers) {
       const was = this.hosts.get(host);
       const now = new Map();
@@ -331,6 +401,15 @@ export class SpriteLayers {
           continue;
         }
         if (now.has(sprite.key)) continue;
+        // inside another of the element's parts: lifted with it or not at
+        // all, its parent earlier in the list, and neither of them a source
+        let parent = null;
+        if (sprite.parent !== undefined) {
+          parent = now.get(sprite.parent) ?? null;
+          if (!parent || parent.contents !== null || sprite.contents != null) {
+            continue;
+          }
+        }
         const contents = sprite.contents ?? null;
         // a source this bridge cannot show: the element draws it
         if (contents !== null && !this._canShow(contents)) continue;
@@ -352,32 +431,69 @@ export class SpriteLayers {
         };
         const extent = extentOf(sprite);
         const bounds = cut.clip ? intersectRects(extent, cut.clip) : extent;
-        if (!bounds || !this.promotion._clear(host, bounds, cut)) continue;
+        if (parent) {
+          // the parent was asked about everywhere it can be, and its layer
+          // carries this one: nothing more to ask where it stays inside the
+          // parent's raster, and its element draws it where it does not
+          if (bounds && !rectContains(rasterRectOf(parent.sprite), bounds)) {
+            continue;
+          }
+          cut.bounds = bounds;
+        } else if (!bounds) {
+          // its own clip shows nothing of it
+          cut.bounds = null;
+        } else if (!this.promotion._clear(host, bounds, cut)) {
+          continue;
+        }
         const shown = cut.bounds;
+        // A part that shows nothing stays on its layer, cut to show nothing,
+        // so that its element's clock is not kept running for it, and is
+        // where it should be the frame a scroll brings it into view — but
+        // for a source, and past the budget of raster kept for such parts.
+        if (!shown) {
+          if (contents !== null) continue;
+          const px = raster.width * raster.height;
+          if (hidden + px > HIDDEN_BUDGET) continue;
+          hidden += px;
+        }
         let state = was?.get(sprite.key);
         // a clip that comes or goes is a layer in a box or out of one: lifted
         // again, rather than a running layer moved between parents — and so
-        // is a part that shows another source, or stops painting to show one
+        // is a part that shows another source, or stops painting to show
+        // one, and one in another layer than it was
         if (
           state &&
           (Boolean(state.clip) !== Boolean(cut.clip) ||
-            state.contents !== contents)
+            Boolean(state.outer) !== Boolean(cut.outer) ||
+            state.contents !== contents ||
+            state.parent !== parent)
         ) {
           this._drop(state, root);
           state = null;
         }
         const lifting = !state;
         if (lifting) {
-          state = this._lift(host, sprite.key, cut.clip !== null, contents);
+          state = this._lift(
+            host,
+            sprite.key,
+            cut.clip !== null,
+            contents,
+            parent,
+            Boolean(cut.outer),
+          );
         }
         state.sprite = sprite;
         state.clip = cut.clip;
+        state.outer = cut.outer ?? null;
         state.radius = cut.radius;
-        state.order = [...place, AFTER_CHILDREN, index];
+        state.order = parent ? null : [...place, AFTER_CHILDREN, index];
+        state.kids = [];
+        parent?.kids.push(state);
         // the bitmap under where it shows repaints without it, from this
         // frame on; where it went since, it is the element's own claims
-        // that move the hole
-        if (lifting) this.promotion._claim(root, shown);
+        // that move the hole. A child is under its parent's layer, whose
+        // raster leaves it out instead (`sync`).
+        if (lifting && !parent && shown) this.promotion._claim(root, shown);
         state.extent = shown;
         now.set(sprite.key, state);
       }
@@ -396,11 +512,12 @@ export class SpriteLayers {
     return changed;
   }
 
-  /** Every lifted part, with its place in the paint order. */
+  /** Every lifted part above the bitmap, with its place in the paint
+   *  order: not one inside another's layer, which goes with it (`sync`). */
   entries() {
     const out = [];
     for (const lifted of this.hosts.values()) {
-      for (const state of lifted.values()) out.push(state);
+      for (const state of lifted.values()) if (!state.parent) out.push(state);
     }
     return out;
   }
@@ -426,23 +543,41 @@ export class SpriteLayers {
     return isVideoFrames(contents) && this.videos;
   }
 
-  _lift(host, key, clipped, contents = null) {
+  _lift(host, key, clipped, contents = null, parent = null, outered = false) {
     const layer = this.native.createLayer();
     // a part cut to a clip is in a box of the clip's size that masks to it,
-    // and the box is what stands among the layers above the bitmap
+    // and the box is what stands among the layers above the bitmap — or
+    // among its parent's children, for a part inside another's layer. A
+    // clip with round corners that a square one cuts again is in a box of
+    // its own inside a box of the square one's (`outer`).
+    const above = parent ? parent.layer : this.promotion.rootVisual.layer;
     let box = null;
+    let outerBox = null;
     if (clipped) {
       box = this.native.createLayer();
-      this.native.addSublayer(this.promotion.rootVisual.layer, box);
+      if (outered) {
+        outerBox = this.native.createLayer();
+        this.native.addSublayer(above, outerBox);
+        this.native.addSublayer(outerBox, box);
+      } else {
+        this.native.addSublayer(above, box);
+      }
       this.native.addSublayer(box, layer);
     } else {
-      this.native.addSublayer(this.promotion.rootVisual.layer, layer);
+      this.native.addSublayer(above, layer);
     }
     return {
       host,
       key,
       layer,
       box,
+      outerBox,
+      outerProps: {},
+      outer: null, // the square clips around a rounded one, device pixels
+      // the part whose layer this one is in, and the parts in this one's
+      parent,
+      kids: [],
+      paintedKids: '',
       boxProps: {},
       clip: null, // device pixels, window coordinates
       radius: 0, // the clip's corners, device pixels
@@ -475,11 +610,15 @@ export class SpriteLayers {
    *  element drawing it again. */
   _drop(state, root) {
     state.lift?.release();
-    this.native.removeFromSuperlayer(state.box ?? state.layer);
+    this.native.removeFromSuperlayer(
+      state.outerBox ?? state.box ?? state.layer,
+    );
     state.raster.release(this.native);
     for (const run of state.runs.values()) this._ends().delete(run.caId);
     state.runs.clear();
-    if (!state.host.destroyed && state.extent) {
+    // a child's is under its parent's layer, which paints it again or goes
+    // with it
+    if (!state.host.destroyed && state.extent && !state.parent) {
       this.promotion._claim(root, state.extent);
     }
   }
@@ -491,28 +630,65 @@ export class SpriteLayers {
     const rect = rasterRectOf(sprite);
     const reach = sprite.reach ?? sprite.rect;
     const phase = `${reach.x - Math.floor(reach.x)},${reach.y - Math.floor(reach.y)}`;
+    // the parts lifted inside it, which its raster leaves out
+    const kids = state.kids.map((kid) => kid.key).join('\n');
     // painted again for a new version, and for a raster of another size or
-    // with the part at another fraction of a pixel; a move by whole pixels
-    // is the layer's alone. A source paints nothing: it shows itself.
+    // with the part at another fraction of a pixel, or with other parts
+    // lifted inside it; a move by whole pixels is the layer's alone. A
+    // source paints nothing: it shows itself.
     if (
       !state.lift &&
       (state.painted === UNPAINTED ||
         sprite.version !== state.painted ||
         state.rect?.width !== rect.width ||
         state.rect?.height !== rect.height ||
-        state.phase !== phase)
+        state.phase !== phase ||
+        state.paintedKids !== kids)
     ) {
       this._paint(state, sprite, rect);
       state.phase = phase;
+      state.paintedKids = kids;
     }
     state.rect = rect;
     const origin = originOf(sprite);
     const m = sprite.transform ?? IDENTITY;
+    // where its layer's coordinates start: the window's corner, or the
+    // corner of its parent's raster, for a part inside another's layer
+    const base = state.parent?.rect ?? ORIGIN;
+    // in a box of the square clips around its own, where a square one cuts
+    // a rounded clip again: placed from the window's corner, at the part's
+    // place among the layers
+    const outer = state.outer;
+    if (state.outerBox) {
+      const frame = [
+        (outer.x - base.x) / s,
+        (outer.y - base.y) / s,
+        outer.width / s,
+        outer.height / s,
+      ];
+      const was = state.outerProps;
+      if (!sameMatrix(was.frame, frame) || was.zPosition !== z) {
+        this.native.setLayerProps(state.outerBox, {
+          frame,
+          masksToBounds: true,
+          zPosition: z,
+        });
+        state.outerProps = { frame, zPosition: z };
+      }
+    }
     // in its box, where it is cut to a clip: placed from the clip's corner,
-    // and the box at the part's place among the layers
+    // and the box at the part's place among the layers, or from the outer
+    // box's corner inside it
     const clip = state.clip;
     if (state.box) {
-      const frame = [clip.x / s, clip.y / s, clip.width / s, clip.height / s];
+      const from = state.outerBox ? outer : base;
+      const frame = [
+        (clip.x - from.x) / s,
+        (clip.y - from.y) / s,
+        clip.width / s,
+        clip.height / s,
+      ];
+      const boxZ = state.outerBox ? 0 : z;
       // its corners rounded where the clip's are: a circle's arc, as wide
       // as the box allows
       const cornerRadius =
@@ -520,20 +696,20 @@ export class SpriteLayers {
       const was = state.boxProps;
       if (
         !sameMatrix(was.frame, frame) ||
-        was.zPosition !== z ||
+        was.zPosition !== boxZ ||
         was.cornerRadius !== cornerRadius
       ) {
         this.native.setLayerProps(state.box, {
           frame,
           masksToBounds: true,
           cornerRadius,
-          zPosition: z,
+          zPosition: boxZ,
         });
-        state.boxProps = { frame, zPosition: z, cornerRadius };
+        state.boxProps = { frame, zPosition: boxZ, cornerRadius };
       }
     }
-    const ox = state.box ? clip.x : 0;
-    const oy = state.box ? clip.y : 0;
+    const ox = state.box ? clip.x : base.x;
+    const oy = state.box ? clip.y : base.y;
     const next = {
       bounds: [0, 0, rect.width / s, rect.height / s],
       anchorPoint: [
@@ -570,6 +746,10 @@ export class SpriteLayers {
     state.lift?.layout?.(next.bounds);
     // after the model went out, in the same transaction
     this._syncAnimations(state, sprite);
+    // the parts inside it, in the element's order, over its raster
+    for (let i = 0; i < state.kids.length; i++) {
+      this.sync(state.kids[i], i + 1);
+    }
   }
 
   _paint(state, sprite, rect) {
@@ -586,7 +766,10 @@ export class SpriteLayers {
       ctx.translate(-rect.x, -rect.y);
       // a part paints whole: there is no pass to cull it by
       if (root) root._paintDamage = null;
-      sprite.paint(ctx);
+      sprite.paint(
+        ctx,
+        state.kids.length ? new Set(state.kids.map((kid) => kid.key)) : NO_KIDS,
+      );
     } catch (err) {
       this._warn(
         state.host,
@@ -674,7 +857,9 @@ export class SpriteLayers {
     for (const lifted of this.hosts.values()) {
       for (const state of lifted.values()) {
         state.lift?.release();
-        this.native.removeFromSuperlayer(state.box ?? state.layer);
+        this.native.removeFromSuperlayer(
+          state.outerBox ?? state.box ?? state.layer,
+        );
         state.raster.release(this.native);
         for (const run of state.runs.values()) this._ends().delete(run.caId);
       }

package/src/node.d.ts

@@ -297,8 +297,16 @@ export interface Sprite {
    * cannot take both. */
   clipRadius?: number;
   /** Draws the part where it is in the window, as `paint` would, but at
-   * opacity 1 and untransformed. A part with `contents` has none. */
-  paint?(ctx: Context2D): void;
+   * opacity 1 and untransformed — and without the parts lifted inside it
+   * (`parent`), whose keys the presenter hands it as `children`. A part
+   * with `contents` has none. */
+  paint?(ctx: Context2D, children?: ReadonlySet<string>): void;
+  /** The key of another of the element's parts this one is inside, earlier
+   * in the list: its layer goes in that part's layer, fading, turning and
+   * cut with it, and is lifted only with it, and only where everywhere it
+   * can be is inside that part's raster. Its `rect`, `origin` and `clip`
+   * are the window's, with its parent untransformed. */
+  parent?: string;
   /**
    * A source that shows itself on the part's layer instead of a paint — a
    * `VideoFrames` sink, whose every push reaches the layer with no frame of