react-x11 2.18.1 → 2.18.3

package/package.json

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

package/src/cocoa/app.js

@@ -85,6 +85,17 @@ const SCREEN_POLL_MS = 500;
 // have finished moving the window (`_recheckScreens`).
 const SCREEN_RECHECK_MS = 1000;
 
+/** One frame callback; a throw is reported, not allowed to end the tick. */
+function runFrame(entry, now) {
+  try {
+    entry.cb(now);
+  } catch (err) {
+    queueMicrotask(() => {
+      throw err;
+    });
+  }
+}
+
 export class CocoaApp {
   constructor(native, options = {}) {
     this._native = native;
@@ -92,7 +103,7 @@ export class CocoaApp {
     // CocoaWindow._key -> CocoaWindow: the number, or on a worker the handle
     this._windows = new Map();
     this._grabWindow = null;
-    this._rafQueue = []; // [{ cb, wnd }]
+    this._rafQueue = []; // [{ cb, wnd, surface }]
     // the app's own frame clock, for a frame no window owns (a pane's)
     this._rafLast = 0;
     // an explicit interval applies to every window; null means each
@@ -843,8 +854,8 @@ export class CocoaApp {
    * paced claim (src/pacing.js) land at its wait rather than at its wait
    * rounded up to the pump.
    */
-  _requestFrame(cb, wnd = null) {
-    this._rafQueue.push({ cb, wnd });
+  _requestFrame(cb, wnd = null, surface = false) {
+    this._rafQueue.push({ cb, wnd, surface });
     if ((this._pump || this._threaded) && this._rafQueue.length === 1) {
       const now = performance.now();
       this._armFrameTimer(Math.max(1, this._frameWait(wnd ?? this, now)), now);
@@ -947,6 +958,14 @@ export class CocoaApp {
     const queue = this._rafQueue;
     this._rafQueue = [];
     let soonest = Infinity;
+    // A `<glarea>`'s frames, due in this tick, run after every window's
+    // own: its children are laid out, painted and presented in the window's
+    // flush, so a GL frame drawn ahead of that flush reached the screen
+    // under the overlay of the frame before — for as long as the flush took,
+    // which is more than a display frame when the change costs layout
+    // (issue #641). The Wayland backend orders them the same way
+    // (`requestSurfaceFrame`).
+    const surfaces = [];
     for (const entry of queue) {
       // A window whose last flip has not reached its layer yet (threaded
       // mode's fence, `CocoaWindow.frameInFlight`) waits before
@@ -974,14 +993,10 @@ export class CocoaApp {
         this._rafQueue.push(entry);
         continue;
       }
-      try {
-        entry.cb(now);
-      } catch (err) {
-        queueMicrotask(() => {
-          throw err;
-        });
-      }
+      if (entry.surface) surfaces.push(entry);
+      else runFrame(entry, now);
     }
+    for (const entry of surfaces) runFrame(entry, now);
     this._armFrameTimer(soonest, now);
   }
 

package/src/cocoa/glarea.js

@@ -232,8 +232,9 @@ export class CocoaGLArea {
     for (const fn of this._listeners.get(name) ?? []) fn(ev);
   }
 
+  // on the owning window's clock, after its flush in the same tick (#641)
   requestAnimationFrame(cb) {
-    return this.parent.requestAnimationFrame(cb);
+    return this.parent.requestSurfaceFrame(cb);
   }
 
   /**

package/src/cocoa/overlay.js

@@ -11,9 +11,10 @@
 // so where two surfaces overlap, both overlays are above both frames.
 //
 // It speaks the verbs of a window the overlay drives on X11 — `setState`,
-// `map`, `unmap`, `getContext`, `destroy` — plus `present`, which puts what
-// was painted on the layer: ntk blits an X window's backing store on its
-// own, where a layer's contents are a copy the bitmap has to be pushed to.
+// `map`, `unmap`, `getContext`, `scrollRegion`, `destroy` — plus `present`,
+// which puts what was painted on the layer: ntk blits an X window's backing
+// store on its own, where a layer's contents are a copy the bitmap has to be
+// pushed to.
 import { BackendContext2D } from '../backend/context2d.js';
 import { withoutActions } from './quiet.js';
 
@@ -135,6 +136,42 @@ export class CocoaOverlayPane {
     return this._ctx;
   }
 
+  /**
+   * Move the pixels of `rect` (pane coordinates, device px) by (dx, dy)
+   * inside the bitmap — ntk `Window.scrollRegion`'s contract, which the
+   * overlay speaks to either backend: the band that survives the shift
+   * inside `rect` moves, the rest of it is left as it was, and false means
+   * nothing moved, so the caller repaints instead. A child that only moved
+   * is one of these rather than a repaint (src/gloverlay.js, issue #644).
+   *
+   * The bitmap is the pane's own and the layer holds a copy of it, so the
+   * move lands on screen with the frame's `present`, after the strips it
+   * uncovered are painted — never halfway.
+   */
+  scrollRegion(rect, dx, dy) {
+    if (this.destroyed || !this._surface) return false;
+    if (!Number.isInteger(dx) || !Number.isInteger(dy)) return false;
+    // a bitmap of another size is one the next paint replaces, whole
+    const size = this._surfaceSize;
+    if (
+      size.width !== Math.max(1, this.rect.width) ||
+      size.height !== Math.max(1, this.rect.height)
+    ) {
+      return false;
+    }
+    const moved = this._native.scrollSurface(
+      this._surface,
+      Math.round(rect.x),
+      Math.round(rect.y),
+      Math.round(rect.width),
+      Math.round(rect.height),
+      dx,
+      dy,
+    );
+    if (moved) this._dirty = true;
+    return Boolean(moved);
+  }
+
   /** What was painted, onto the layer — a copy, so the bitmap is free to be
    * painted again at once. */
   present() {

package/src/cocoa/panewindow.js

@@ -99,6 +99,11 @@ export class CocoaPaneWindow {
     return this.app._requestFrame(cb);
   }
 
+  /** A `<glarea>`'s frame, after this pane's own (`CocoaWindow`'s). */
+  requestSurfaceFrame(cb) {
+    return this.app._requestFrame(cb, null, true);
+  }
+
   /**
    * Whether the host may still be showing the frame before the last one —
    * the gate `flushPendingFrames` (src/frames.js) is written around: a

package/src/cocoa/window.js

@@ -915,6 +915,15 @@ export class CocoaWindow {
     return this.app._requestFrame(cb, this);
   }
 
+  /**
+   * A `<glarea>`'s frame: on this window's clock, and after this window's
+   * own frame in the tick that runs both, so the GL frame goes out after
+   * the overlay its children were painted on (src/cocoa/glarea.js).
+   */
+  requestSurfaceFrame(cb) {
+    return this.app._requestFrame(cb, this, true);
+  }
+
   /**
    * The earliest moment this window's clock will hand out another frame,
    * for a gate of `interval` ms — the display's period by default, which

package/src/glnodes.js

@@ -11,6 +11,7 @@ import { cssColorStraight } from 'ntk';
 export { directGLFailure, hasDirectGL } from './glbackend.js';
 
 import { GlOverlay, canOverlay } from './gloverlay.js';
+import { layoutDiff } from './nodes/damage.js';
 import { Node } from './nodes/node.js';
 import { FramePacer, resolveFrameRate } from './pacing.js';
 
@@ -320,11 +321,102 @@ export class GlAreaNode extends Node {
     };
   }
 
+  /**
+   * `Node.absolutize`, with the children walked one at a time where a pane
+   * holds them — the frame's layout diff running (a bounded frame), no
+   * scroll shift riding over this node, no layout algorithm of its own
+   * placing them, and this node's own rect where it was, so the panes are
+   * too. A child that moved and changed nothing else is then reported to
+   * the overlay instead of claimed (`_absolutizeChild`); anywhere else the
+   * walk is the plain one.
+   */
   absolutize(originX, originY) {
-    super.absolutize(originX, originY);
+    const overlay = this._overlay;
+    if (
+      !overlay?.panes.length ||
+      !layoutDiff.sink ||
+      layoutDiff.shift ||
+      this._host !== null ||
+      !this.yoga
+    ) {
+      super.absolutize(originX, originY);
+      this._syncGeometry();
+      return;
+    }
+    this._placed = true;
+    const was = this.abs;
+    this._assignAbs(
+      originX + this.yoga.getComputedLeft(),
+      originY + this.yoga.getComputedTop(),
+      this.yoga.getComputedWidth(),
+      this.yoga.getComputedHeight(),
+    );
+    if (this.props.onLayout) this._reportLayout();
+    // `_assignAbs` keeps the object when nothing changed
+    const still = this.abs === was;
+    const { x, y } = this.abs;
+    for (const child of this.children) {
+      if (child.isWindow) continue;
+      if (still) this._absolutizeChild(child, x, y, overlay);
+      else child.absolutize(x, y);
+    }
     this._syncGeometry();
   }
 
+  /**
+   * One child, laid out from (originX, originY). When all that changed is
+   * where it sits — the same size, somewhere else, a plain box drawn where
+   * layout put it — it is walked with the layout diff's `shift` set to the
+   * move (issue #644): every descendant that lands where it was plus the
+   * move claims nothing, exactly as under a scroll blit (issue #398), and
+   * one that lands anywhere else claims both ends. The child itself is one
+   * of the first kind, so the move claims nothing at all here; the overlay
+   * is told of it instead, with the reach its pixels had, and settles it
+   * after the panes are placed (`GlOverlay.settleMoves`) — moved on the
+   * pane, or claimed where it was and where it is.
+   *
+   * `layoutDiff.ride` marks the walk as this kind, for the one node that
+   * drops the diff under a shift: a scroll pane laid out again claims its
+   * own box there, since the move claimed nothing for it
+   * (nodes/scrollable.js).
+   */
+  _absolutizeChild(child, originX, originY, overlay) {
+    const y = child.yoga;
+    const old = child.abs;
+    if (
+      !y ||
+      child.hidden ||
+      child.style?.display === 'none' ||
+      child.isScroller?.() ||
+      !(old.width > 0 && old.height > 0) ||
+      this.root?._placedNodes?.has(child)
+    ) {
+      child.absolutize(originX, originY);
+      return;
+    }
+    const dx = originX + y.getComputedLeft() - old.x;
+    const dy = originY + y.getComputedTop() - old.y;
+    if (
+      (dx === 0 && dy === 0) ||
+      y.getComputedWidth() !== old.width ||
+      y.getComputedHeight() !== old.height
+    ) {
+      child.absolutize(originX, originY);
+      return;
+    }
+    // before it moves: every pixel of it a pane holds
+    const reach = child.paintBounds();
+    layoutDiff.shift = { x: dx, y: dy };
+    layoutDiff.ride = true;
+    try {
+      child.absolutize(originX, originY);
+    } finally {
+      layoutDiff.shift = null;
+      layoutDiff.ride = false;
+    }
+    overlay.noteMove(child, reach, dx, dy);
+  }
+
   // the scroll fast path moves `abs` without coming through absolutize
   // (issue #405), and the real X window has to follow it all the same
   _shiftAbs(dx, dy) {
@@ -537,8 +629,10 @@ export class GlAreaNode extends Node {
 
   /**
    * The owning window's frame, after layout (`WindowNode._syncOverlays`):
-   * panes for where the children are now. True when a pane was made,
-   * resized or dropped — a paint the frame then owes.
+   * panes for where the children are now, and the moves the layout pass
+   * reported settled against them — moved on a pane, or claimed. True when
+   * a pane was made, resized or dropped, or a move claimed something — a
+   * paint the frame then owes.
    */
   _syncOverlay() {
     if (!this._overlay) {
@@ -548,7 +642,8 @@ export class GlAreaNode extends Node {
       }
       this._overlay = new GlOverlay(this);
     }
-    const changed = this._overlay.sync();
+    let changed = this._overlay.sync();
+    if (this._overlay.settleMoves(this.root)) changed = true;
     if (this._overlay.panes.length) this._joinSurfaces();
     if (this.children.length === 0 && this._overlay.panes.length === 0) {
       this._overlay = null;

package/src/gloverlay.js

@@ -40,13 +40,41 @@
 // by the same propagation that brings it the pointer over the surface
 // (src/glnodes.js, `_create`), and lands on the child it is over.
 //
+// A pane keeps what it holds between frames, so a child that only moved is
+// already painted, one shift away (issue #644). The layout pass reports such
+// a child instead of claiming it (`GlAreaNode._absolutizeChild`), and the
+// frame moves its pixels inside the pane — `scrollRegion`, the verb the
+// scroll blit uses on a window — and repaints only what the move uncovered
+// and what it now overlaps differently (`settleMoves`). A pan over a
+// graph's mounted node bodies is that frame, sixty times a second.
+//
 // A leaf module, like src/embedding.js: `appcontext.js` asks `canOverlay`
-// for `useSupports('glOverlay')`, and it imports nothing of ours.
+// for `useSupports('glOverlay')`, and it imports nothing of ours but the
+// damage model's arithmetic, which imports nothing at all.
 import { cssColorStraight } from 'ntk';
 
+import { FULL_DAMAGE, addDamageRect } from './nodes/damage.js';
+import {
+  innerPixels,
+  intersectRects,
+  rectArea,
+  rectContains,
+  unionRect,
+} from './nodes/rects.js';
+
 // ConfigureWindow's stack mode: directly above the sibling it names
 const STACK_ABOVE = 0;
 
+// Past this share of the pixels a move carries, the frame would repaint
+// most of them anyway — around what it claims itself, or around the other
+// children the copy reached — and the copy only adds to the bill.
+const MOVE_BLIT_MAX_REPAINT = 0.75;
+
+// The scroll blit's escape hatch (src/nodes/scrollblit.js), read the same
+// way: every path that moves retained pixels instead of repainting them is
+// one variable away from the plain repaint (docs/debugging.md).
+const NO_BLIT = process.env.REACT_X11_NO_SCROLL_BLIT === '1';
+
 /**
  * Whether the children of a `<glarea>` can be drawn over its surface on this
  * connection: a backend that composites a pane itself, or one that can make
@@ -73,16 +101,6 @@ function whole(r) {
   };
 }
 
-function intersect(a, b) {
-  const x = Math.max(a.x, b.x);
-  const y = Math.max(a.y, b.y);
-  const right = Math.min(a.x + a.width, b.x + b.width);
-  const bottom = Math.min(a.y + a.height, b.y + b.height);
-  return right > x && bottom > y
-    ? { x, y, width: right - x, height: bottom - y }
-    : null;
-}
-
 const overlaps = (a, b) =>
   a.x < b.x + b.width &&
   b.x < a.x + a.width &&
@@ -103,6 +121,48 @@ 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) {
@@ -125,7 +185,7 @@ function shown(node) {
 export function overlayRegions(area, surface) {
   const rects = [];
   for (const child of area.paintOrder()) {
-    const reach = intersect(whole(child._subtreeBounds()), surface);
+    const reach = intersectRects(whole(child._subtreeBounds()), surface);
     if (reach) rects.push(reach);
   }
   for (let merged = true; merged;) {
@@ -172,6 +232,13 @@ class Pane {
     this.transparent = transparent;
     this.full = true;
     this.ctx = null;
+    // placed this frame: what the pane holds is where the children were in
+    // the pane's own corner, not in the window, so nothing in it is a known
+    // shift away from where it goes
+    this.placed = false;
+    // moved pixels this frame, which has to reach the screen even when no
+    // pass follows it (`GlOverlay.paint`)
+    this.blitted = false;
   }
 
   context() {
@@ -188,7 +255,12 @@ class Pane {
     if (rect.width !== this.rect.width || rect.height !== this.rect.height) {
       this.full = true;
     }
+    // pixels a scroll blit moved this frame (nodes/scrollblit.js, which runs
+    // before `sync`) were moved in the pane's own corner, and the pane has
+    // since gone somewhere else
+    if (this.blitted) this.full = true;
     this.rect = rect;
+    this.placed = true;
     if (typeof this.wnd.setState === 'function') this.wnd.setState(rect);
     else {
       this.wnd.move?.(rect.x, rect.y);
@@ -196,6 +268,37 @@ class Pane {
     }
   }
 
+  /** Can the pixels of `rect`, in window coordinates, move inside this
+   * pane? Not when it is owed a paint whole or was placed this frame, and
+   * not where the backend has no verb for it. */
+  canBlit(rect) {
+    return (
+      !this.full &&
+      !this.placed &&
+      typeof this.wnd.scrollRegion === 'function' &&
+      rectContains(this.rect, rect)
+    );
+  }
+
+  /**
+   * Move the pixels of `rect` — window coordinates — by (dx, dy) inside the
+   * pane, with the window verb's contract (ntk `Window.scrollRegion`, and
+   * the Cocoa pane's own): the band that survives inside `rect` moves, the
+   * rest of it is left as it was. False when the backend could not, which
+   * leaves the pane exactly as it was.
+   */
+  blit(rect, dx, dy) {
+    const local = {
+      x: rect.x - this.rect.x,
+      y: rect.y - this.rect.y,
+      width: rect.width,
+      height: rect.height,
+    };
+    if (!this.wnd.scrollRegion(local, dx, dy)) return false;
+    this.blitted = true;
+    return true;
+  }
+
   show(on) {
     if (on) this.wnd.map?.();
     else this.wnd.unmap?.();
@@ -215,6 +318,10 @@ export class GlOverlay {
     // one pane over the whole surface, where the backend composites it
     this.composited = typeof this.app?.createOverlayPane === 'function';
     this.panes = [];
+    // the children this frame's layout moved and nothing else, reported
+    // rather than claimed (`GlAreaNode._absolutizeChild`) and settled after
+    // the panes are (`settleMoves`)
+    this.moves = [];
   }
 
   /**
@@ -229,6 +336,7 @@ export class GlOverlay {
   sync() {
     const area = this.area;
     const abs = area.abs;
+    for (const pane of this.panes) pane.placed = false;
     let rects = [];
     if (shown(area) && abs.width > 0 && abs.height > 0) {
       // the surface's own rect, rounded the way its window's is
@@ -279,7 +387,7 @@ export class GlOverlay {
     pane.full = true;
     const root = this.area.root;
     if (root && !root.destroyed)
-      root.invalidate(false, { ...pane.rect }, 'expose');
+      root.invalidate(false, { ...pane.rect }, 'expose', this.area);
   }
 
   /**
@@ -305,6 +413,145 @@ export class GlOverlay {
     }
   }
 
+  /**
+   * A child the layout pass moved and nothing else — every descendant
+   * landed where it was plus (dx, dy) or claimed where it did not — and
+   * claimed nothing for (`GlAreaNode._absolutizeChild`). `reach` is its
+   * `paintBounds()` from before the move: every pixel of it the panes hold.
+   */
+  noteMove(node, reach, dx, dy) {
+    this.moves.push({ node, reach, dx, dy });
+  }
+
+  /**
+   * The frame's moves, settled after `sync` has put the panes where the
+   * children are and before the frame takes its damage
+   * (`WindowNode._syncOverlays`). The one covering the most of the surface
+   * moves its pixels on its pane where that is safe and saves the repaint
+   * (`_blitMove`); every other one, and that one when not, is claimed where
+   * it was and where it is — the pixels the layout diff would have claimed
+   * for it and every descendant. True when there was anything to settle.
+   *
+   * The claims go to the panes' damage alone (`WindowNode._paneDamage`):
+   * the window paints none of a surface's children, and its pass under the
+   * surface is one nobody sees.
+   */
+  settleMoves(root) {
+    const moves = this.moves;
+    if (moves.length === 0) return false;
+    this.moves = [];
+    // the panes repaint whole this frame: nothing is owed
+    if (!root || root.destroyed || root._paneDamage === FULL_DAMAGE) {
+      return true;
+    }
+    const surface = this.area._geometry();
+    let best = null;
+    let most = 0;
+    for (const move of moves) {
+      const shown = intersectRects(whole(move.reach), surface);
+      const size = shown ? rectArea(shown) : 0;
+      if (size > most) {
+        best = move;
+        most = size;
+      }
+    }
+    // the others first: the pixels they claim are ones the copy may carry,
+    // and `_blitMove` repairs whatever the frame claims by then
+    for (const move of moves) if (move !== best) this._claimMove(root, move);
+    if (best && !this._blitMove(root, best)) this._claimMove(root, best);
+    return true;
+  }
+
+  /** Where a move's child was and where it is, claimed the ordinary way —
+   * cut to the surface's box, which clips the children (`clipsChildren`). */
+  _claimMove(root, { node, reach }) {
+    const box = this.area.abs;
+    for (const rect of [reach, node.paintBounds()]) {
+      const claim = intersectRects(rect, box);
+      if (claim) root._addPaneDamage(claim);
+    }
+  }
+
+  /**
+   * Move a child's pixels on its pane, and narrow what the frame owes the
+   * move to what the copy cannot supply. True when it did; false leaves
+   * the pane and the frame's damage as they were, for `_claimMove`.
+   *
+   * The copy is of what the child showed, moved as far as the child moved
+   * and kept where it is still on show (`dest`). That is right wherever
+   * the child's own drawing is the only thing that changed — and the frame
+   * repaints the rest:
+   *
+   * - what the child uncovered, and whatever of its new reach the copy did
+   *   not land on: its reach before and after, less `dest`;
+   * - the other children: the pixels of theirs the copy carried off with
+   *   the child's, and theirs that the copy covered — over the child or
+   *   under it, their own pixels are not a shift away;
+   * - what the panes are owed already, where the copy would carry it: a
+   *   claim is often a rect named before layout ran, and when it was
+   *   inside the child its content went with the copy. Repainted shifted
+   *   as well as where it stands, which is right whichever it was. A
+   *   claim that cannot reach the panes is not in their list
+   *   (`WindowNode._paneReach`) — a graph pane under the surface that
+   *   claims itself whole on every step of the pan this copy is.
+   *
+   * Past `MOVE_BLIT_MAX_REPAINT` of `dest` those repaint most of what the
+   * copy saves, and the plain claims have the frame.
+   */
+  _blitMove(root, { node, reach, dx, dy }) {
+    if (NO_BLIT || !Number.isInteger(dx) || !Number.isInteger(dy)) {
+      return false;
+    }
+    const area = this.area;
+    // a rounded surface clips its children to an arc, and the arc stays put
+    if ((area.style?.borderRadius ?? 0) > 0) return false;
+    // the whole pixels of the surface's box: a fractional edge is an
+    // antialiased clip, and that does not move either
+    const box = innerPixels(area.abs);
+    if (!box) return false;
+    const was = intersectRects(whole(reach), box);
+    const now = intersectRects(whole(node.paintBounds()), box);
+    // nothing of it was on show, so there is nothing to carry
+    if (!was) return false;
+    const pane = this.panes.find(
+      (p) => p.canBlit(was) && (!now || p.canBlit(now)),
+    );
+    if (!pane) return false;
+    const view = intersectRects(pane.rect, box);
+    const dest = intersectRects(shifted(was, dx, dy), view);
+    if (!dest) return false;
+    const cap = root._damageRectCap();
+    const claimed = root._paneDamage ?? [];
+    let rects = claimed;
+    const add = (rect) => {
+      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);
+    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));
+    }
+    // the list is disjoint, so the sum is the area it covers
+    let repainted = 0;
+    for (const rect of rects) {
+      const inside = intersectRects(rect, dest);
+      if (inside) repainted += rectArea(inside);
+    }
+    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)) {
+      return false;
+    }
+    root._paneDamage = rects;
+    return true;
+  }
+
   /**
    * Paint what the frame owes: every pane whole after it was made, resized
    * or lost its pixels, and otherwise the frame's damage cut to each pane —
@@ -323,10 +570,17 @@ export class GlOverlay {
       } else {
         passes = [];
         for (const rect of damage) {
-          const hit = intersect(rect, pane.rect);
+          const hit = intersectRects(rect, pane.rect);
           if (hit) passes.push(hit);
         }
-        if (passes.length === 0) continue;
+      }
+      const blitted = pane.blitted;
+      pane.blitted = false;
+      pane.placed = false;
+      if (passes.length === 0) {
+        // pixels moved and nothing else owed: they still go out
+        if (blitted) pane.wnd.present?.();
+        continue;
       }
       pane.full = false;
       this._paintPane(pane, passes);