react-x11 2.27.0 → 2.28.0

package/package.json

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

package/src/cocoa/presenter.js

@@ -356,6 +356,9 @@ const ANIMATED_KEY_PATHS = Object.freeze({
   borderColor: { keyPath: 'borderColor', colour: true },
   borderWidth: { keyPath: 'borderWidth', scaled: true },
   borderRadius: { keyPath: 'cornerRadius', scaled: true },
+  // the subtree's, as CSS has it: a layer under an opacity is drawn with
+  // its sublayers and faded as one (`layerOpacity`)
+  opacity: { keyPath: 'opacity' },
 });
 
 // the ids the bridge reports an animation's end under: unique per process,
@@ -487,9 +490,11 @@ export function propBoxProps(node, app, scale, parentOrigin, order) {
 }
 
 /**
- * `opacity` as a layer's own. On the layer presenter a node's children are
- * its sublayers, so this fades the subtree with it; the bitmap paths draw
- * the group themselves and never promote a faded box.
+ * `opacity` as a layer's own. A node's children are its layer's sublayers —
+ * each its own on the layer presenter, one raster on a promoted box — and
+ * Core Animation draws a layer under an opacity below 1 with its sublayers
+ * and fades them as one (`allowsGroupOpacity`, YES by default on macOS): the
+ * group `NodePaint._paintGroup` draws on the bitmap.
  */
 export function layerOpacity(style) {
   const value = style?.opacity;

package/src/cocoa/promotion.js

@@ -24,11 +24,12 @@
 // promoted only when nothing painted after it in the walk reaches into its
 // bounds — no later sibling at any level, no ancestor's border ring or
 // focus ring, no scrollbar — and only when every clipping ancestor holds
-// the whole of it, because the layer would not be clipped. Declining is
+// the whole of it, because the layer would not be clipped, and no ancestor
+// fades, because the layer would not be faded with it. Declining is
 // always safe: the frame clock runs the animation exactly as it does
 // without this file. And the same test runs again every frame, so a node
-// that becomes overlapped, hidden, clipped or non-plain returns to the
-// bitmap in the frame that finds it, the animation handed back to the
+// that becomes overlapped, hidden, clipped, faded or non-plain returns to
+// the bitmap in the frame that finds it, the animation handed back to the
 // clock. Overlays, toasts, drag ghosts, spinners and floating cards pass by
 // construction; a hover fade on a row in the middle of a list does not,
 // and stays on the clock. docs/macos.md §"Layer promotion" is the account.
@@ -157,12 +158,14 @@ function insideGlArea(node) {
 const faded = (style) => style?.opacity !== undefined && !(style.opacity >= 1);
 
 /**
- * A box whose `opacity` is below 1, now or on its way there, is a group the
- * bitmap composites (`NodePaint._paintGroup`) — the box and everything in it
- * drawn once and faded as one. On a layer of its own the box and its content
- * would be separate layers under the one opacity, fading one over the other,
- * and an opacity the frame clock is still animating would never reach the
- * layer at all.
+ * A box whose `opacity` is below 1, now or on its way there, is a group:
+ * the box and everything in it drawn once and faded as one. The bitmap
+ * composites one (`NodePaint._paintGroup`), and so does Core Animation — a
+ * layer under an opacity below 1 is drawn with its sublayers and faded as
+ * one (`allowsGroupOpacity`, YES by default on macOS), and a promoted box's
+ * children are a sublayer of its layer. So a faded box may be promoted;
+ * what may not is a box inside one, whose layer would be flat on the window
+ * root, outside the group and at full strength (`_clear`).
  */
 function fadesAsGroup(node) {
   return (
@@ -182,7 +185,6 @@ function fadesAsGroup(node) {
 function promotableNode(node) {
   if (node.destroyed || !plainBox(node)) return false;
   if (insideGlArea(node)) return false;
-  if (fadesAsGroup(node)) return false;
   if (!stylePaintsPlain(node, node._targetStyle ?? node.style)) return false;
   if (node.isScroller?.()) return false;
   return !paintsOutline(node);
@@ -438,7 +440,9 @@ export class CocoaPromotion {
       dirty: { all: true, rects: [] },
     });
     node._promoted = true;
-    // the bitmap under it repaints without it, from this frame on
+    // the bitmap under it repaints without it, from this frame on — and so
+    // does the raster of a promoted node it is in, which the claim that
+    // handed us its animation reached (`noteInvalidate`)
     this._claim(root, node.paintBounds());
   }
 
@@ -457,7 +461,32 @@ export class CocoaPromotion {
     this.animations.drop(node, reclaim && !node.destroyed);
     this._dropContent(p);
     p.visual.destroy();
-    if (!node.destroyed && node.abs) this._claim(root, node.paintBounds());
+    if (!node.destroyed && node.abs) {
+      this._repaintHolder(node);
+      this._claim(root, node.paintBounds());
+    }
+  }
+
+  /**
+   * A node coming off its layer inside a promoted node: the bitmap holds a
+   * hole there, and the node's pixels belong in that node's raster — so the
+   * raster repaints where the node reaches, taking it back, in this frame.
+   * Nothing else would ask: `_claim` keeps our claims off our own books, a
+   * raster's layout key is compared only in a frame that ran layout, and
+   * what gives a node back claims its own layer (the grace ran out) or
+   * nothing (an ancestor began to fade, a sibling came over it). Going onto
+   * a layer needs no such call — the claim that handed us the animation
+   * reached the raster. The nearest promoted node alone, since a raster
+   * leaves out the whole subtree of a promoted child.
+   */
+  _repaintHolder(node) {
+    for (let n = node.parent; n && !n.isWindow; n = n.parent) {
+      const holder = this.promoted.get(n);
+      if (holder) {
+        this._dirtyRect(holder, node.paintBounds());
+        return;
+      }
+    }
   }
 
   _dropContent(p) {
@@ -511,11 +540,13 @@ export class CocoaPromotion {
   }
 
   /**
-   * Is nothing painted over this node, and is all of it visible? Walked up
-   * the chain: at every level, what the parent paints after the child on
-   * the way to this node — later siblings, then the parent's own border and
-   * ring, then its bars — must keep out of the node's reach, and the
-   * parent's clip, if it has one, must hold the whole of it.
+   * Is nothing painted over this node, is all of it visible, and is it in
+   * no faded group? Walked up the chain: at every level, what the parent
+   * paints after the child on the way to this node — later siblings, then
+   * the parent's own border and ring, then its bars — must keep out of the
+   * node's reach, the parent's clip, if it has one, must hold the whole of
+   * it, and the parent must not fade: its group is drawn on the bitmap or on
+   * its own layer, and either way a layer of the node's would be outside it.
    */
   _clear(node) {
     // the exact reach, not `paintBounds()`: that one carries the damage
@@ -530,6 +561,7 @@ export class CocoaPromotion {
         if (this._reaches(order[j], bounds)) return false;
       }
       if (!parent.isWindow) {
+        if (fadesAsGroup(parent)) return false;
         const border = borderReach(parent);
         if (
           border > 0 &&

package/src/nodes/scrollable.js

@@ -16,7 +16,7 @@ import {
   XK_END,
   XK_SPACE,
 } from '../keysyms.js';
-import { DAMAGE_SLOP, layoutDiff } from './damage.js';
+import { DAMAGE_SLOP, NO_DAMAGE, layoutDiff } from './damage.js';
 import { describeSize, laidBox, offsetInParent } from './layout.js';
 import { insetRect, intersectRects, rectsOverlap } from './rects.js';
 import {
@@ -340,11 +340,23 @@ export const Scrollable = (Base) =>
       const askedY = this.scrollY;
       this.scrollY = clampScroll(this.scrollY, this._maxScroll('y'));
       this.scrollX = clampScroll(this.scrollX, this._maxScroll('x'));
-      // Of those three moves the clamp's is the one no call claimed when it
-      // was asked for — the diff below claims it
+      // Of those three moves the clamp's is the one nobody asked for, and
+      // where no blit is armed the diff below claims it
       const clamped = this.scrollX !== askedX || this.scrollY !== askedY;
       this._reportViewport();
       this._reportScrollTo(from);
+      // …and whichever of them moved the offsets claims the viewport the
+      // content moved in, once the pass is over. A `scrollIntoView` asks for
+      // its pass claiming nothing (issue #813), so this is the only claim
+      // its move gets, and the blit it armed reads it as the scroll's own,
+      // as it reads the one `scrollTo` makes. Not through the diff, where a
+      // claim reads as content laid out anew, which is not a pure scroll
+      // and declines that blit. A clamp under an armed blit owes it too:
+      // the walk below gives that frame's moves to the blit's ledger, and
+      // without a scrollTo nothing else has claimed the viewport.
+      if (this.scrollX !== from.x || this.scrollY !== from.y) {
+        this.root?._reflowed.add(this);
+      }
       // `scrollX` is how far the content has moved **from its start**, which
       // is the right-hand edge in RTL — so scrolling shifts the children the
       // other way. Keeping it a distance rather than a coordinate is what
@@ -588,43 +600,7 @@ export const Scrollable = (Base) =>
       // A pane no pass has placed arms nothing: its first pass is a layout
       // change rather than a pure scroll.
       if (root && this._childOrigin != null) {
-        // Arming is the one moment the evidence still exists: the viewport
-        // claim recorded below coalesces earlier claims into itself
-        // (addDamageRect keeps the list disjoint), after which a change
-        // inside the viewport is indistinguishable from the scroll's own
-        // claim — the blind spot the claim-time cancel in
-        // WindowNode.invalidate cannot cover (react-x11#295). The scroll
-        // has not claimed yet, so damage already overlapping this viewport
-        // is foreign by construction: poison the frame instead of arming,
-        // and the full-viewport repaint below stays in force.
-        const arming = this._pendingBlitFrom == null;
-        // The ledger this frame's changes inside the viewport are written
-        // to (issue #398). Opened with the blit and read by
-        // _applyScrollBlits, which clears it beside the origin.
-        if (arming) this._blitLedger = [];
-        if (arming && Array.isArray(root._damage)) {
-          const zone = insetRect(this.abs, -(DAMAGE_SLOP * 2 + 1));
-          for (const rect of root._damage) {
-            // Already coalesced, so these rects are as coarse as the frame
-            // has made them — which the ledger reads conservatively: a blob
-            // that swallowed the viewport says so and poisons, exactly as
-            // this gate used to for every claim it saw.
-            if (rectsOverlap(rect, zone) && !this._recordBlitClaim(rect)) {
-              this._pendingBlitFrom = BLIT_POISONED;
-              break;
-            }
-          }
-        }
-        // An element that also shifted its own drawing this frame
-        // (`scrollContents`, issue #303) is two shifts of the same pixels,
-        // and a frame can only have one.
-        if (this._pendingBlitContents) this._pendingBlitFrom = BLIT_POISONED;
-        // The offsets whose pixels are on screen, captured before the first
-        // change of the frame: the frame's blit fast path (issue #138) shifts
-        // from *these* to wherever layout settles, however many scrollTo
-        // calls land in between.
-        this._pendingBlitFrom ??= { x: this.scrollX, y: this.scrollY };
-        (root._pendingScrolls ??= new Set()).add(this);
+        this._armScrollBlit(root);
         // ... and the claim about to be recorded is the scroll itself, not a
         // reason to un-blit it
         root._scrollClaim = this;
@@ -644,6 +620,52 @@ export const Scrollable = (Base) =>
       if (root) root._scrollClaim = null;
     }
 
+    /**
+     * Arm the frame's scroll blit (issue #138) for a move of this pane's
+     * offsets: a `scrollTo` about to make one, or a `scrollIntoView` whose
+     * pass may (`scrollIntoView`). Before the move, and before the claim
+     * that comes with it.
+     *
+     * Arming is the one moment the evidence still exists: the viewport
+     * claim coalesces earlier claims into itself (addDamageRect keeps the
+     * list disjoint), after which a change inside the viewport is
+     * indistinguishable from the scroll's own claim — the blind spot the
+     * claim-time cancel in WindowNode.invalidate cannot cover
+     * (react-x11#295). The scroll has not claimed yet, so damage already
+     * overlapping this viewport is foreign by construction: poison the
+     * frame instead of arming, and the full-viewport repaint stays in force.
+     */
+    _armScrollBlit(root) {
+      const arming = this._pendingBlitFrom == null;
+      // The ledger this frame's changes inside the viewport are written
+      // to (issue #398). Opened with the blit and read by
+      // _applyScrollBlits, which clears it beside the origin.
+      if (arming) this._blitLedger = [];
+      if (arming && Array.isArray(root._damage)) {
+        const zone = insetRect(this.abs, -(DAMAGE_SLOP * 2 + 1));
+        for (const rect of root._damage) {
+          // Already coalesced, so these rects are as coarse as the frame
+          // has made them — which the ledger reads conservatively: a blob
+          // that swallowed the viewport says so and poisons, exactly as
+          // this gate used to for every claim it saw.
+          if (rectsOverlap(rect, zone) && !this._recordBlitClaim(rect)) {
+            this._pendingBlitFrom = BLIT_POISONED;
+            break;
+          }
+        }
+      }
+      // An element that also shifted its own drawing this frame
+      // (`scrollContents`, issue #303) is two shifts of the same pixels,
+      // and a frame can only have one.
+      if (this._pendingBlitContents) this._pendingBlitFrom = BLIT_POISONED;
+      // The offsets whose pixels are on screen, captured before the first
+      // change of the frame: the frame's blit fast path (issue #138) shifts
+      // from *these* to wherever layout settles, however many scrollTo
+      // calls land in between.
+      this._pendingBlitFrom ??= { x: this.scrollX, y: this.scrollY };
+      (root._pendingScrolls ??= new Set()).add(this);
+    }
+
     /**
      * Keep the part of a request the extent in hand cannot answer, for the
      * pass that will measure one that can. `_scrollToDevice` clamps against
@@ -864,13 +886,29 @@ export const Scrollable = (Base) =>
      * that has no geometry yet. `absolutize` resolves it against freshly
      * computed yoga positions, and `onScroll` reports the move once that
      * pass is over (`_reportScrollTo`).
+     *
+     * Asking claims nothing (issue #813). Most of the time the node is in
+     * view already — every Tab between the fields of a form in a pane — and
+     * a claim made now, before anyone knows, repainted the pane's whole
+     * viewport for a frame that moved nothing. So the pass is asked for
+     * with no damage, and a request that finds its node in view costs what
+     * the focus change costs outside a pane. One that does move the pane
+     * moves it the way a scroll does: the blit is armed here, as `scrollTo`
+     * arms it, and the pass claims the viewport once the offsets have
+     * changed (`_absolutizeChildren`), which `_applyScrollBlits` narrows to
+     * the strip the move uncovered.
      */
     scrollIntoView(node) {
       if (!node || !this.isScroller()) return;
       this._scrollIntoViewTarget = node;
-      // whatever the resolved scroll moves is inside this clipped viewport,
-      // so the viewport's own before/after rects bound the frame
-      this._invalidateLayout('scroll');
+      const root = this.root;
+      if (!root) return;
+      // a pane no pass has placed arms nothing, as for `scrollTo`
+      if (this._childOrigin != null) this._armScrollBlit(root);
+      // `'scroll'`: the walk goes everywhere, which is what reaches this
+      // pane however clean the boxes above it are, and the content floors
+      // owe nothing
+      root.invalidate(true, NO_DAMAGE, 'scroll', this);
     }
 
     _resolveScrollIntoView() {