react-x11 2.18.2 → 2.18.4

package/src/nodes/invalidate.js

@@ -18,6 +18,20 @@ import { BLIT_POISONED } from './scrollblit.js';
 import { DEV } from './util.js';
 import { debugPaint } from './window/debugpaint.js';
 
+// Which damage lists a claim belongs in (`WindowInvalidate._paneReach`).
+const WINDOW_ONLY = 0;
+const BOTH = 1;
+const PANES_ONLY = 2;
+
+/** Is `node` inside a `<glarea>` below `root` — drawn on its panes, and
+ * never by the window's own paint walk? */
+function insideSurface(node, root) {
+  for (let n = node.parent; n && n !== root; n = n.parent) {
+    if (n.isGlArea) return true;
+  }
+  return false;
+}
+
 /** Node's half of invalidation, installed onto `Node.prototype` by node.js. */
 export class NodeInvalidate {
   /**
@@ -40,7 +54,10 @@ export class NodeInvalidate {
     // reaches — a shadow, an outline, a scene element's ink — so its cached
     // paint reach goes with the claim
     if (damage === this || damage === null) this._clearPaintBounds();
-    this.root?.invalidate(layoutChanged, damage, reason);
+    // …and names itself, so a rect it claims goes to the damage lists it can
+    // reach — the window's, a `<glarea>`'s panes', or both
+    // (`WindowNode._paneReach`)
+    this.root?.invalidate(layoutChanged, damage, reason, this);
   }
 
   /**
@@ -112,7 +129,7 @@ export class NodeInvalidate {
     // Same walk, same frame, same answer — see `_childListBefore`, whose
     // record this shares so that a reflow and a child-list change on one
     // node in one frame walk the subtree once between them.
-    root.invalidate(true, this._childListBefore(), reason);
+    root.invalidate(true, this._childListBefore(), reason, this);
     root._reflowed.add(this);
   }
 
@@ -235,8 +252,14 @@ export class WindowInvalidate {
    * diagnostic, collected per frame into `_lastReasons` so the frame log,
    * REACT_X11_DEBUG_PAINT=full and the tracer can attribute a repaint.
    * Omitting it costs nothing but attribution.
+   *
+   * `source` is the node making a claim that names a rect rather than a
+   * node — `Node.invalidate` passes itself — and is what decides which of
+   * the frame's two lists the claim goes to: the window's, the one the
+   * panes over its `<glarea>`s paint from, or both (`_paneReach`). Left
+   * out, both.
    */
-  invalidate(layoutChanged, damage = null, reason = null) {
+  invalidate(layoutChanged, damage = null, reason = null, source = null) {
     if (this.destroyed || !this.window) return;
     if (!layoutChanged && damage === NO_DAMAGE) {
       // Nothing this node draws changed, so it contributes no region — and
@@ -274,6 +297,16 @@ export class WindowInvalidate {
       this._scheduleFrame();
       return;
     }
+    // The panes over this window's `<glarea>`s paint from a list of their
+    // own (`_paneDamage`): a claim goes to the window's list, the panes',
+    // or both, by what its source can reach (`_paneReach`). One `size`
+    // read for a window with no surface children.
+    const reach =
+      this._overlaid.size !== 0
+        ? this._paneReach(damage?.kind ? damage : source)
+        : WINDOW_ONLY;
+    const panes = reach !== WINDOW_ONLY;
+    const windowToo = reach !== PANES_ONLY;
     if (layoutChanged) {
       this.needsLayout = true;
       // The content floors are measured from the tree, so anything that
@@ -314,8 +347,11 @@ export class WindowInvalidate {
     // where nothing can be seen, so it owes no pixels), and null on a frame
     // that is already unbounded, which owes neither a rect nor the subtree
     // walk that measures one — a blit cannot fire there either.
+    const bounded =
+      (windowToo && this._damage !== FULL_DAMAGE) ||
+      (panes && this._paneDamage !== FULL_DAMAGE);
     const bounds =
-      damage && damage !== NO_DAMAGE && this._damage !== FULL_DAMAGE
+      damage && damage !== NO_DAMAGE && bounded
         ? damage._claimBounds
           ? damage._claimBounds()
           : damage
@@ -324,6 +360,9 @@ export class WindowInvalidate {
     if (pendingScrolls?.size && bounds && this._scrollClaim !== damage) {
       const rect = bounds;
       for (const sv of pendingScrolls) {
+        // A claim the window's list never sees is no change to the pixels
+        // a blit of the window's moves: a surface's children are on panes
+        if (!windowToo && !insideSurface(sv, this)) continue;
         // An element blitting a region of its own drawing (issue #303) is
         // waiting on that region, not on the whole node it lives in — and
         // it is waiting on it *exactly* (issue #309). Its claim is the rect
@@ -363,25 +402,102 @@ export class WindowInvalidate {
         }
       }
     }
-    if (layoutChanged && !damage) this._damage = FULL_DAMAGE;
-    else if (!layoutChanged && !damage) this._damage = FULL_DAMAGE;
-    else if (!bounds) {
+    if (!damage) {
+      // "something, somewhere" — in the panes alone, for a node whose
+      // pixels are only ever on one; everywhere, for anything else
+      if (windowToo) this._damage = FULL_DAMAGE;
+      else this._damage ??= [];
+      if (panes) this._paneDamage = FULL_DAMAGE;
+    } else if (!bounds) {
       // A layout change that names no region: either NO_DAMAGE, from a
       // caller with a finer claim already in flight, or a node whose reach
       // a clipping ancestor left nothing of (issue #398). Unlike `!damage`
-      // neither is "something, somewhere", so neither costs a full repaint.
-    } else if (this._damage !== FULL_DAMAGE) {
+      // neither is "something, somewhere", so neither costs a full repaint
+      // — which a frame with no list at all would be, however little its
+      // layout pass goes on to claim (`_takeDamage`). A child of a
+      // `<glarea>` that only moved is this claim (issue #644), and a frame
+      // whose move is settled on a pane claims only the strips it uncovered.
+      this._damage ??= [];
+    } else {
       // a node, or a bare rect for a caller that has a region rather than a
       // node — a subtree that is about to be removed, say. Claims accumulate
       // as a list of rects rather than one box around them all, so two changes
       // at opposite corners of the window no longer repaint everything
       // between them.
-      this._damage = addDamageRect(this._damage, bounds, this._damageRectCap());
+      if (!windowToo) {
+        // the window owes nothing, and a frame with no list is unbounded
+        this._damage ??= [];
+      } else if (this._damage !== FULL_DAMAGE) {
+        this._damage = addDamageRect(
+          this._damage,
+          bounds,
+          this._damageRectCap(),
+        );
+      }
+      if (panes) this._addPaneDamage(bounds);
     }
     this.needsPaint = true;
     this._scheduleFrame();
   }
 
+  /**
+   * Which damage lists a claim from `node` belongs in: the window's, the
+   * panes' over its `<glarea>`s, or both. The panes hold the surfaces'
+   * children and nothing else (src/gloverlay.js), and the window paints
+   * none of those, so:
+   *
+   * - a node inside a surface is the panes' alone — the window's pass under
+   *   the surface would repaint pixels no child of it ever had;
+   * - a node above a surface is both: its colour or font is what the
+   *   children below it paint with. So is a surface itself, whose
+   *   `clearColor` an X11 pane's ground is, and so is a claim with no
+   *   source to go by;
+   * - anything else is the window's alone. It draws only into the window,
+   *   where the surface covers it: a graph pane under the surface that its
+   *   own pan claims whole every frame (issue #644) is the claim this keeps
+   *   out of the panes' repaint.
+   */
+  _paneReach(node) {
+    if (!node || node === this) return BOTH;
+    if (insideSurface(node, this)) return PANES_ONLY;
+    if (node.isGlArea) return BOTH;
+    for (const area of this._overlaid) {
+      for (let n = area.parent; n && n !== this; n = n.parent) {
+        if (n === node) return BOTH;
+      }
+    }
+    return WINDOW_ONLY;
+  }
+
+  /** One rect more for the panes, unless they repaint whole already. */
+  _addPaneDamage(rect) {
+    if (this._paneDamage === FULL_DAMAGE) return;
+    this._paneDamage = addDamageRect(
+      this._paneDamage,
+      rect,
+      this._damageRectCap(),
+    );
+  }
+
+  /**
+   * What the panes repaint this frame: null for all of them, and — unlike
+   * the window's list — an empty list when nothing reached them, which is
+   * most frames of a window whose surface children hold still.
+   */
+  _takePaneDamage(width, height) {
+    const damage = this._paneDamage;
+    this._paneDamage = null;
+    if (damage === FULL_DAMAGE) return null;
+    if (!damage || damage.length === 0) return [];
+    const rects = [];
+    for (const claimed of damage) {
+      const clamped = this._clampDamage(claimed, width, height);
+      if (clamped === FULL_DAMAGE) return null;
+      if (clamped) rects.push(clamped);
+    }
+    return damageToPaint(rects);
+  }
+
   /**
    * The rects this frame will repaint, or null for the whole window.
    *

package/src/nodes/node.js

@@ -13,6 +13,7 @@ import {
   applyLayoutStyle,
   applyLayoutDefaults,
   createLayoutNode,
+  onlyInsetsChanged,
   paintPropsChanged,
   isEventProp,
 } from '../styles.js';
@@ -473,10 +474,10 @@ export class Node {
     // `_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()) {
-      root.invalidate(true, before ?? NO_DAMAGE, 'child-list');
+      root.invalidate(true, before ?? NO_DAMAGE, 'child-list', this);
       return;
     }
-    root.invalidate(true, before, 'child-list');
+    root.invalidate(true, before, 'child-list', this);
     root._reflowed.add(this);
   }
 
@@ -604,7 +605,21 @@ export class Node {
     // which is what keeps a commit from widening the region to every node
     // it touched.
     if (layoutChanged) {
-      this._invalidateLayout('props');
+      // A child of a `<glarea>` that only moved (issue #644): its pixels are
+      // on a pane, one shift away, and the layout pass reports the move to
+      // the overlay rather than claiming it (src/glnodes.js). A claim of the
+      // subtree here, before and after, would be the repaint the overlay
+      // exists to skip — and the pass claims both ends of the move itself
+      // whenever the overlay cannot move the pixels.
+      if (
+        this.parent?.isGlArea &&
+        onlyInsetsChanged(style, prevStyle) &&
+        !this.paintChanged(newProps, prev)
+      ) {
+        this.invalidate(true, NO_DAMAGE, 'props');
+      } else {
+        this._invalidateLayout('props');
+      }
     } else {
       // The style half is asked here rather than inside `paintChanged`, and
       // stays core's answer: what a style change moves is the background,
@@ -632,12 +647,16 @@ export class Node {
    * safe without knowing about subclasses: `<image src>`, `<canvas onDraw>`,
    * a `value`, a `placeholder`, a `caretColor` — any prop a subclass paints
    * from is a prop, so a change to it lands here as an inequality and damages
-   * the node. Three kinds are skipped because they cannot affect this node's
+   * the node. Four kinds are skipped because they cannot affect this node's
    * own drawing:
    *
    *  - `children`, which the reconciler mutates through appendChild /
    *    removeChild / commitTextUpdate, each of which invalidates on its own;
    *  - event handlers, rebuilt every render and never painted;
+   *  - `ref`, which is React's rather than the element's. Since React 19 it
+   *    arrives as an ordinary prop, so an inline callback is a new function
+   *    every render, like a handler. `key` would be the same if React ever
+   *    passed it on; today React strips it;
    *  - `style`, compared by value by the caller — so a style object React
    *    rebuilt with the same contents costs nothing, which is the whole
    *    point, since React rebuilds sibling styles on every render and a
@@ -669,6 +688,7 @@ export class Node {
     const keys = new Set([...Object.keys(newProps), ...Object.keys(prev)]);
     for (const key of keys) {
       if (key === 'children' || key === 'style' || isEventProp(key)) continue;
+      if (key === 'ref' || key === 'key') continue;
       if (claimed.has(key)) continue;
       if (newProps[key] !== prev[key]) return true;
     }

package/src/nodes/position.js

@@ -317,6 +317,7 @@ export class WindowPosition {
       nodes.sort((a, b) => depth.get(a) - depth.get(b));
     }
     const cap = this._damageRectCap();
+    const panes = this._overlaid.size !== 0;
     const t = now();
     let claimed = false;
     for (const node of nodes) {
@@ -330,7 +331,12 @@ export class WindowPosition {
           ? node.paintBounds()
           : null;
       node._placedShown = after;
-      if (this._damage === FULL_DAMAGE) continue;
+      if (
+        this._damage === FULL_DAMAGE &&
+        (!panes || this._paneDamage === FULL_DAMAGE)
+      ) {
+        continue;
+      }
       const sv = node._blitViewport();
       let was = before;
       if (was && sv) {
@@ -354,7 +360,10 @@ export class WindowPosition {
         if (sv && !sv._recordBlitClaim(claim)) {
           sv._pendingBlitFrom = BLIT_POISONED;
         }
-        this._damage = addDamageRect(this._damage, claim, cap);
+        if (this._damage !== FULL_DAMAGE) {
+          this._damage = addDamageRect(this._damage, claim, cap);
+        }
+        if (panes) this._addPaneDamage(claim);
         claimed = true;
       }
     }

package/src/nodes/scrollable.js

@@ -297,8 +297,11 @@ export const Scrollable = (Base) =>
             // …which holds for a scroll's shift and not for the clamp's: the
             // content shrank, or the viewport grew, under the offset — a row
             // collapsing at the end of a list scrolled to its end — and
-            // nothing claimed the viewport every child just moved in.
-            if (clamped) outer(vp);
+            // nothing claimed the viewport every child just moved in. Nor
+            // for a `<glarea>` child's move that this pane rides (issue
+            // #644): its box claimed nothing, and a pane laid out again may
+            // have moved rows the move's copy carries where they were.
+            if (clamped || layoutDiff.ride) outer(vp);
           } else {
             layoutDiff.sink = (rect) => {
               const clipped = intersectRects(rect, vp);

package/src/nodes/scrollblit.js

@@ -409,7 +409,7 @@ export class NodeScrollBlit {
     // reason to un-blit it. `state.rect` by identity, so a second call this
     // frame is recognised as the same claim rather than as foreign damage.
     root._scrollClaim = state.rect;
-    root.invalidate(false, state.rect, 'scroll');
+    root.invalidate(false, state.rect, 'scroll', this);
     root._scrollClaim = null;
     return this._pendingBlitFrom !== BLIT_POISONED;
   }
@@ -485,8 +485,10 @@ export class WindowScrollBlit {
     // claim the scroll recorded, like every other declined gate here
     if (from === BLIT_POISONED) return;
     if (NO_SCROLL_BLIT || !from || node.destroyed || node.root !== this) return;
-    const wnd = this.window;
-    if (typeof wnd?.scrollRegion !== 'function') return; // ntk without #139
+    // the window's backing store, or the pane over a `<glarea>` that holds
+    // the pixels of a node inside it — none where neither can move them
+    const target = this._blitTarget(node);
+    if (!target) return;
     // the debug overlays and the DevTools highlight draw over the whole
     // window; a blit would drag shifted copies of them along
     if (
@@ -497,7 +499,8 @@ export class WindowScrollBlit {
     ) {
       return;
     }
-    if (!Array.isArray(this._damage)) return; // unbounded frame already
+    // unbounded already, on the surface the blit would move
+    if (!Array.isArray(target.damage)) return;
     // the layout diff claimed real movement this pass — the frame is not a
     // pure scroll, and a blit under rearranged content would shift stale
     // pixels into place the repaint no longer covers
@@ -506,7 +509,7 @@ export class WindowScrollBlit {
     // region and the shift itself (issue #303), where a scroll container is
     // its whole viewport shifted by the change in its offsets.
     if (contents) {
-      this._applyContentsBlit(node, contents, width, height);
+      this._applyContentsBlit(node, contents, width, height, target);
       return;
     }
     // Back where the frame started: a burst of scrolls that went one way
@@ -518,14 +521,14 @@ export class WindowScrollBlit {
     // (Every pixel-shift gate below is moot for a shift of nothing.)
     if (from.x === node.scrollX && from.y === node.scrollY) {
       const box = node.abs;
-      const kept = this._blitKeptDamage(box);
+      const kept = this._blitKeptDamage(box, false, target.damage);
       if (!kept) return;
       let rects = kept;
       for (const claim of ledger ?? []) {
         const inside = intersectRects(claim, box);
         if (inside) rects = addDamageRect(rects, inside);
       }
-      this._damage = rects;
+      target.damage = rects;
       return;
     }
     // children clip to the border box, so a border ring or rounded corner
@@ -575,7 +578,7 @@ export class WindowScrollBlit {
     ) {
       return;
     }
-    const keep = this._blitKeptDamage(vp);
+    const keep = this._blitKeptDamage(vp, false, target.damage);
     if (!keep) return;
     // What changed inside the viewport while the blit was armed, in the
     // coordinates the frame is about to paint in (issue #398). A claim made
@@ -635,7 +638,7 @@ export class WindowScrollBlit {
       ? unionArea([strip, ...repairs]) - rectArea(strip)
       : 0;
     if (repairArea > area * BLIT_MAX_CLAIM_AREA) return;
-    if (!this._scrollBlitSafe(node, vp)) return;
+    if (!this._scrollBlitSafe(node, vp, target.top)) 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
@@ -730,8 +733,8 @@ export class WindowScrollBlit {
       if (inside) painted += inside.width * inside.height;
     }
     if (painted > area * SCROLL_BLIT_MAX_REPAINT) return;
-    if (!wnd.scrollRegion({ ...vp }, dx, dy)) return;
-    this._damage = rects;
+    if (!target.blit({ ...vp }, dx, dy)) return;
+    target.damage = rects;
   }
 
   /**
@@ -751,12 +754,15 @@ export class WindowScrollBlit {
    * damage cap merges neighbours on its own, without a claim-time gate to
    * poison first. Requiring the rect back unchanged is what lets the
    * claim-time gate narrow to `vp` itself and let furniture beside it live.
+   *
+   * `damage` is the list the blit's surface paints from: the window's, or
+   * its panes' for a node inside a `<glarea>` (`_blitTarget`).
    */
-  _blitKeptDamage(vp, exact = false) {
+  _blitKeptDamage(vp, exact = false, damage = this._damage) {
     const keep = [];
     let sawClaim = false;
     const slopped = insetRect(vp, -(DAMAGE_SLOP + 1));
-    for (const rect of this._damage) {
+    for (const rect of damage) {
       if (!rectsOverlap(rect, vp)) {
         keep.push(rect);
         continue;
@@ -795,7 +801,7 @@ export class WindowScrollBlit {
    * balloon back towards the whole viewport. With no bars the L is two
    * disjoint rects and stays two.
    */
-  _applyContentsBlit(node, { rect: vp, dx, dy }, width, height) {
+  _applyContentsBlit(node, { rect: vp, dx, dy }, width, height, target) {
     // only a whole-pixel shift of a whole-pixel region is a copy
     if (!isIntegerRect(vp)) return;
     if (!Number.isInteger(dx) || !Number.isInteger(dy)) return;
@@ -840,14 +846,14 @@ export class WindowScrollBlit {
       if (child.style?.display === 'none') continue;
       if (rectsOverlap(child._subtreeBounds(), vp)) return;
     }
-    const keep = this._blitKeptDamage(vp, true);
+    const keep = this._blitKeptDamage(vp, true, target.damage);
     if (!keep) return;
     // An ancestor's rounded corners reach into the top and bottom rows of
     // the region (a graph pane inside a rounded card is the common shape):
     // those rows do not translate, so they leave the blit and get repainted
     // as bands — the same carve the element does for its own furniture —
     // and the band that shifts is what is left between them.
-    const bands = this._cornerBands(node, vp);
+    const bands = this._cornerBands(node, vp, target.top);
     const shifted =
       bands.top || bands.bottom
         ? {
@@ -864,11 +870,11 @@ export class WindowScrollBlit {
     ) {
       return;
     }
-    if (!this._scrollBlitSafe(node, shifted)) return;
+    if (!this._scrollBlitSafe(node, shifted, target.top)) return;
     // the element's deltas are already how far the pixels moved, the sense
     // scrollRegion takes (0 + x rather than x: a caller's -0 would survive
     // into request buffers and test comparisons)
-    if (!this.window.scrollRegion({ ...shifted }, 0 + dx, 0 + dy)) return;
+    if (!target.blit({ ...shifted }, 0 + dx, 0 + dy)) return;
     let rects = keep;
     if (bands.top) {
       rects = addDamageRect(rects, {
@@ -908,7 +914,7 @@ export class WindowScrollBlit {
         height: vp.height - Math.abs(dy),
       });
     }
-    this._damage = rects;
+    target.damage = rects;
   }
 
   /**
@@ -916,11 +922,13 @@ export class WindowScrollBlit {
    * corners reach into — the rows an element blit has to leave behind and
    * repaint, so that what shifts stays clear of every corner square
    * (`_scrollBlitSafe`). Whole pixels, and zero when no corner reaches in.
+   * Ancestors below `upTo`, the node the blit's surface belongs to
+   * (`_blitTarget`): a pane is a rectangle no corner above it clips.
    */
-  _cornerBands(node, vp) {
+  _cornerBands(node, vp, upTo = this) {
     let top = 0;
     let bottom = 0;
-    for (let n = node.parent; n && n !== this; n = n.parent) {
+    for (let n = node.parent; n && n !== upTo; n = n.parent) {
       const radius = n.style?.borderRadius ?? 0;
       if (!(radius > 0) || !n.abs) continue;
       if (!cornerSquaresOverlap(n.abs, radius, vp)) continue;
@@ -940,13 +948,18 @@ export class WindowScrollBlit {
    * the viewport — an overlapping sibling, an ancestor's border ring or
    * rounded corner, an enclosing viewport's scrollbar — would have its
    * pixels dragged along by the blit, so any of them is a no.
+   *
+   * "Outside" is below `top`, the node whose subtree the blit's surface
+   * holds (`_blitTarget`): the window, or a `<glarea>` whose pane holds
+   * only its own children — what the window draws under the surface was
+   * never in the pane's pixels.
    */
-  _scrollBlitSafe(scroller, vp) {
+  _scrollBlitSafe(scroller, vp, top = this) {
     // the window itself scrolls: everything inside it *is* the scrolled
     // content, so there is nothing that could be dragged along
     if (scroller === this) return true;
     const ancestors = new Set();
-    for (let n = scroller.parent; n && n !== this; n = n.parent) {
+    for (let n = scroller.parent; n && n !== top; n = n.parent) {
       ancestors.add(n);
     }
     const check = (parent) => {
@@ -993,7 +1006,60 @@ export class WindowScrollBlit {
       }
       return true;
     };
-    return check(this);
+    return check(top);
+  }
+
+  /**
+   * Where a blit for `node` moves pixels, as `{ top, blit(rect, dx, dy),
+   * damage }` — `blit` with `Window.scrollRegion`'s contract, `top` the node
+   * whose subtree that surface holds, `damage` the list it paints from and
+   * the blit narrows — or null when nothing can.
+   *
+   * The window's backing store, for a node the window paints. A node inside
+   * a `<glarea>` is painted on the pane over the surface instead
+   * (src/gloverlay.js), and the window's pixels under the surface are none
+   * of its: shifting them moved nothing on screen while the strip-only
+   * repaint left the pane holding the scroll's old frame (issue #644). So
+   * the pane that holds the rect moves it, or the frame repaints — a pane
+   * owed a paint whole, or none holding the whole rect, is a refusal like
+   * any other here.
+   */
+  _blitTarget(node) {
+    for (let n = node.parent; n && n !== this; n = n.parent) {
+      if (!n.isGlArea) continue;
+      const overlay = n._overlay;
+      if (!overlay) return null;
+      const root = this;
+      return {
+        top: n,
+        blit: (rect, dx, dy) => {
+          const pane = overlay.panes.find((p) => p.canBlit(rect));
+          return pane ? pane.blit(rect, dx, dy) : false;
+        },
+        // the panes' list: a scroll inside a surface claims nothing in the
+        // window's, which paints none of its children (`_paneReach`)
+        get damage() {
+          return root._paneDamage;
+        },
+        set damage(rects) {
+          root._paneDamage = rects;
+        },
+      };
+    }
+    const wnd = this.window;
+    // an ntk without #139, or a presenter with no bitmap to move
+    if (typeof wnd?.scrollRegion !== 'function') return null;
+    const root = this;
+    return {
+      top: this,
+      blit: (rect, dx, dy) => wnd.scrollRegion(rect, dx, dy),
+      get damage() {
+        return root._damage;
+      },
+      set damage(rects) {
+        root._damage = rects;
+      },
+    };
   }
 
   /**