react-x11 2.21.2 → 2.22.0

package/package.json

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

package/src/gloverlay.js

@@ -66,8 +66,10 @@ import { FULL_DAMAGE, addDamageRect } from './nodes/damage.js';
 import {
   innerPixels,
   intersectRects,
+  outside,
   rectArea,
   rectContains,
+  shiftRect,
   unionRect,
 } from './nodes/rects.js';
 
@@ -197,48 +199,6 @@ function around(a, b) {
 const sameRect = (a, b) =>
   a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 
-const shifted = (r, dx, dy) => ({
-  x: r.x + dx,
-  y: r.y + dy,
-  width: r.width,
-  height: r.height,
-});
-
-/** `a` with `b` taken out of it: up to four rects — the full-width bands
- * above and below `b`, and the pieces either side of it between them. */
-function subtractRect(a, b) {
-  const cut = intersectRects(a, b);
-  if (!cut) return [a];
-  const out = [];
-  const right = a.x + a.width;
-  const bottom = a.y + a.height;
-  const cutRight = cut.x + cut.width;
-  const cutBottom = cut.y + cut.height;
-  if (cut.y > a.y) {
-    out.push({ x: a.x, y: a.y, width: a.width, height: cut.y - a.y });
-  }
-  if (cutBottom < bottom) {
-    out.push({
-      x: a.x,
-      y: cutBottom,
-      width: a.width,
-      height: bottom - cutBottom,
-    });
-  }
-  if (cut.x > a.x) {
-    out.push({ x: a.x, y: cut.y, width: cut.x - a.x, height: cut.height });
-  }
-  if (cutRight < right) {
-    out.push({
-      x: cutRight,
-      y: cut.y,
-      width: right - cutRight,
-      height: cut.height,
-    });
-  }
-  return out;
-}
-
 /** On screen: nothing from here to the window hidden or `display: 'none'`. */
 function shown(node) {
   for (let n = node; n; n = n.parent) {
@@ -594,7 +554,7 @@ export class GlOverlay {
     );
     if (!pane) return false;
     const view = intersectRects(pane.rect, box);
-    const dest = intersectRects(shifted(was, dx, dy), view);
+    const dest = intersectRects(shiftRect(was, dx, dy), view);
     if (!dest) return false;
     const cap = root._damageRectCap();
     const claimed = root._paneDamage ?? [];
@@ -603,14 +563,14 @@ export class GlOverlay {
       if (rect) rects = addDamageRect(rects, rect, cap);
     };
     for (const claim of claimed)
-      add(intersectRects(shifted(claim, dx, dy), dest));
-    for (const piece of subtractRect(was, dest)) add(piece);
-    if (now) for (const piece of subtractRect(now, dest)) add(piece);
+      add(intersectRects(shiftRect(claim, dx, dy), dest));
+    for (const piece of outside(was, dest)) add(piece);
+    if (now) for (const piece of outside(now, dest)) add(piece);
     for (const other of area.paintOrder()) {
       if (other === node) continue;
       const theirs = whole(other.paintBounds());
       add(intersectRects(theirs, dest));
-      add(intersectRects(shifted(theirs, dx, dy), dest));
+      add(intersectRects(shiftRect(theirs, dx, dy), dest));
     }
     // the list is disjoint, so the sum is the area it covers
     let repainted = 0;
@@ -621,7 +581,7 @@ export class GlOverlay {
     if (repainted > rectArea(dest) * MOVE_BLIT_MAX_REPAINT) return false;
     // the verb moves the band that survives inside the rect it is handed,
     // so handed where the pixels are and where they go, that band is `dest`
-    if (!pane.blit(unionRect(shifted(dest, -dx, -dy), dest), dx, dy)) {
+    if (!pane.blit(unionRect(shiftRect(dest, -dx, -dy), dest), dx, dy)) {
       return false;
     }
     root._paneDamage = rects;

package/src/node.d.ts

@@ -553,12 +553,22 @@ export declare class Node {
    * what it leaves or reaches outside `rect` is repainted, so keep what it
    * can paint inside the element (a box that clips it). Anything else it
    * does is claimed as usual, which declines the blit.
+   *
+   * `pinned` is the other way round: furniture inside `rect` that stays put
+   * while everything around it moves — a minimap, zoom controls — as rects
+   * in the same coordinates. The copy drags a stale image of each along, so
+   * the frame repaints the pinned rect and that image on every pan frame,
+   * changed or not; a claim inside a pinned rect, or a node that lies inside
+   * one, leaves the blit standing. Pin furniture in a corner rather than
+   * carving it out of `rect`: what shifts is one rectangle, so a carved
+   * corner takes the rows beside it too.
    */
   scrollContents(
     rect: Rect,
     dx: number,
     dy: number,
-    riders?: Iterable<Node>,
+    riders?: Iterable<Node> | null,
+    pinned?: Iterable<Rect> | null,
   ): boolean;
   /**
    * Did anything this node draws change? True damages the whole node, false

package/src/nodes/damage.js

@@ -50,12 +50,14 @@ export const layoutDiff = {
   // else, and restored through `finally` like the sink beside it.
   shift: null,
 
-  // True when `shift` is a `<glarea>` child's own move rather than a scroll
-  // (src/glnodes.js, `_absolutizeChild`, issue #644): the overlay moves the
-  // child's pixels on its pane, and a node that lands where it was plus the
-  // shift is carried by that. A node that turns the diff off under a shift —
-  // a scroll pane laid out again, whose box would have claimed its children
-  // — claims its own box instead, since the move claimed nothing for it.
+  // True when `shift` is a subtree's own move whose pixels a copy may carry,
+  // rather than a scroll: a `<glarea>` child's, moved on its pane
+  // (src/glnodes.js, `_absolutizeChild`, issue #644), or one the window may
+  // copy in its backing (nodes/moveblit.js, issue #681). A node that lands
+  // where it was plus the shift is carried by that copy. A node that turns
+  // the diff off under a shift — a scroll pane laid out again, whose box
+  // would have claimed its children — claims its own box instead, since the
+  // move claimed nothing for it.
   ride: false,
 };
 
@@ -65,6 +67,7 @@ export const layoutDiff = {
 // DEV validates against this list.
 export const INVALIDATE_REASONS = new Set([
   'props', // a React commit changed what a node draws
+  'position', // an absolute box of a set size moved and changed nothing else
   'style-state', // :hover/:focus/:active/:disabled restyle
   'shadow', // a boxShadow got smaller: where it *was* still owes a repaint
   'outline', // …and the same for an outline a style swap took away

package/src/nodes/invalidate.js

@@ -387,7 +387,7 @@ export class WindowInvalidate {
         // viewport — and the wider zone is what keeps it out.
         //
         // The difference is what lets an element carve furniture out of the
-        // rect it blits — a minimap pinned to a corner, a strip it repaints
+        // rect it blits — a HUD strip along the pane's edge that it repaints
         // itself — and keep the pan at blit cost while that furniture
         // claims beside it.
         const contents = sv._pendingBlitContents;
@@ -404,6 +404,12 @@ export class WindowInvalidate {
           if (sv._blitLedgerOpen() && sv._recordBlitClaim(rect)) {
             continue;
           }
+          // …or it lies inside furniture an element pinned over what it
+          // shifts (issue #682): the frame repaints the pinned rect, and
+          // the image of it the copy drags along, whether or not anything
+          // claims there — so a claim inside one changes nothing about
+          // the pixels the blit moves.
+          if (sv._pinnedHolds(rect)) continue;
           // Poison rather than disarm (react-x11#295): a null here would
           // let a second scrollTo in the same frame re-arm from a
           // mid-frame origin, and the blit would then move pixels that
@@ -446,6 +452,9 @@ export class WindowInvalidate {
           bounds,
           this._damageRectCap(),
         );
+        // …and whose claim it was, for a copy of a subtree that moved
+        // (`_settleRigidMoves`): what is under the subtree it covers
+        this._logClaim(bounds, damage?.kind ? damage : source);
       }
       if (panes) this._addPaneDamage(bounds);
     }
@@ -497,6 +506,7 @@ export class WindowInvalidate {
     let windowTook = false;
     if (reach !== PANES_ONLY && this._damage !== FULL_DAMAGE) {
       this._damage = addDamageRect(this._damage, rect, cap);
+      this._logClaim(rect, node ?? null);
       windowTook = true;
     }
     if (reach !== WINDOW_ONLY) this._addPaneDamage(rect);
@@ -557,6 +567,8 @@ export class WindowInvalidate {
   _takeDamage(width, height) {
     const damage = this._damage;
     this._damage = null;
+    // the next frame's claims start a log of their own
+    this._claimLog = [];
     // what the frame about to run settled on, for the tests and for
     // REACT_X11_DEBUG_LAYOUT to report; null means it repainted everything.
     // `_lastDamage` is the box around the rects, which is what a caller

package/src/nodes/layout.js

@@ -5,54 +5,9 @@
 import { Yoga } from '../yoga.js';
 import { callHandler } from '../errors.js';
 import { DAMAGE_SLOP, layoutDiff } from './damage.js';
-import { insetRect, intersectRects, outerPixels } from './rects.js';
+import { insetRect, intersectRects, outerPixels, outside } from './rects.js';
 import { DEV } from './util.js';
 
-/** The parts of `rect` outside `hole`: up to four bands, full width above
- *  and below, the rest beside. */
-function outside(rect, hole) {
-  const cut = intersectRects(rect, hole);
-  if (!cut) return [rect];
-  const out = [];
-  const right = rect.x + rect.width;
-  const bottom = rect.y + rect.height;
-  if (cut.y > rect.y) {
-    out.push({
-      x: rect.x,
-      y: rect.y,
-      width: rect.width,
-      height: cut.y - rect.y,
-    });
-  }
-  const cutBottom = cut.y + cut.height;
-  if (cutBottom < bottom) {
-    out.push({
-      x: rect.x,
-      y: cutBottom,
-      width: rect.width,
-      height: bottom - cutBottom,
-    });
-  }
-  if (cut.x > rect.x) {
-    out.push({
-      x: rect.x,
-      y: cut.y,
-      width: cut.x - rect.x,
-      height: cut.height,
-    });
-  }
-  const cutRight = cut.x + cut.width;
-  if (cutRight < right) {
-    out.push({
-      x: cutRight,
-      y: cut.y,
-      width: right - cutRight,
-      height: cut.height,
-    });
-  }
-  return out;
-}
-
 export const MEASURE_MODES = [];
 MEASURE_MODES[Yoga.MEASURE_MODE_UNDEFINED] = 'unconstrained';
 MEASURE_MODES[Yoga.MEASURE_MODE_EXACTLY] = 'exactly';
@@ -264,7 +219,10 @@ export class NodeLayout {
         }
       }
     } finally {
-      if (move) layoutDiff.shift = null;
+      if (move) {
+        layoutDiff.shift = null;
+        layoutDiff.ride = false;
+      }
     }
     if (move) this._claimRigidMove(move);
   }
@@ -357,6 +315,12 @@ export class NodeLayout {
    *
    * Null when the move is not of that kind, or no diff is listening; the
    * walk is then the plain one.
+   *
+   * A move the window may copy rather than repaint (`_mayBlitMove`, issue
+   * #681) is walked as a ride as well, the way a `<glarea>` child's is
+   * (`layoutDiff.ride`): a scroll pane inside it that is laid out again
+   * claims its viewport, since a copy of the pane would carry rows that
+   * moved inside it and nothing else claims them.
    */
   _beginRigidMove(x, y, width, height) {
     if (!layoutDiff.sink || layoutDiff.shift) return null;
@@ -379,7 +343,9 @@ export class NodeLayout {
       contents && contents.dx === shift.x && contents.dy === shift.y
         ? contents.rect
         : null;
-    return { sink: layoutDiff.sink, was, shift, carried };
+    const defer = !carried && this.root._mayBlitMove(this, shift);
+    if (defer) layoutDiff.ride = true;
+    return { sink: layoutDiff.sink, was, shift, carried, defer };
   }
 
   /**
@@ -391,9 +357,18 @@ export class NodeLayout {
    * Named for the node that moved, which is what sends each claim to the
    * lists that paint it (`_paneReach`): the panes alone inside a
    * `<glarea>`, both for a subtree holding one.
+   *
+   * A move the window may copy is handed to it instead, and claimed once
+   * the frame's other claims are in (`WindowNode._settleRigidMoves`): the
+   * copy, and so the question of what is left to paint, needs to know what
+   * else changed around the subtree.
    */
-  _claimRigidMove({ sink, was, shift, carried }) {
+  _claimRigidMove({ sink, was, shift, carried, defer }) {
     const root = this.root;
+    if (defer) {
+      root._deferRigidMove(this, was, shift);
+      return;
+    }
     const to = {
       x: was.x + shift.x,
       y: was.y + shift.y,