react-x11 2.21.2 → 2.22.1

package/src/nodes/paint.js

@@ -7,7 +7,13 @@ import { Surface } from '../offscreen.js';
 import { isPaintedColor } from './boxpaint.js';
 import { DAMAGE_SLOP } from './damage.js';
 import { DRAWN_KINDS } from './kinds.js';
-import { rectsOverlap } from './rects.js';
+import {
+  intersectRects,
+  isIntegerRect,
+  rectsOverlap,
+  roundedCorners,
+} from './rects.js';
+import { keepCorners } from './roundclip.js';
 import { DEV } from './util.js';
 import { devWarnWindowShadow } from './window/capabilities.js';
 import { FLASH_COLORS, debugPaint } from './window/debugpaint.js';
@@ -289,12 +295,12 @@ export class NodePaint {
    * truncates, and then almost every cell's text fits — 191 clips a frame, of
    * which a handful do anything.
    *
-   * Rounded corners are never skipped: the clip is not a rectangle then, and
-   * the rounding can cut a child that a rect test says fits. The one-pixel
-   * inset is for antialiasing, which can put ink just outside a glyph's box.
+   * A rectangle test, so it answers for the box's rectangle only: rounded
+   * corners can cut a child this says fits, which `_paintRoundedChildren`
+   * settles before it asks. The one-pixel inset is for antialiasing, which
+   * can put ink just outside a glyph's box.
    */
   _childrenCanOverflow() {
-    if (this.style?.borderRadius) return true;
     const box = this.abs;
     for (const child of this.children) {
       if (child.isWindow || !child.yoga || child.hidden) continue;
@@ -320,19 +326,108 @@ export class NodePaint {
     if (this._ownPaintOnly) return;
     const order = this.paintOrder();
     if (order.length === 0) return;
-    const clip = this.clipsChildren() && this._childrenCanOverflow();
+    if (!this.clipsChildren()) {
+      this._paintChildList(ctx, order);
+      return;
+    }
+    // a context with no `roundRect` has always clipped a rounded box to its
+    // rectangle, the way `_roundedPath` degrades
+    const radius =
+      typeof ctx.roundRect === 'function' ? (this.style.borderRadius ?? 0) : 0;
+    if (radius > 0 && this._paintRoundedChildren(ctx, order, radius)) return;
+    const clip = this._childrenCanOverflow();
     if (clip) {
       ctx.save();
-      this._roundedPath(ctx, this.style.borderRadius ?? 0);
+      this._roundedPath(ctx, 0);
       ctx.clip();
     }
+    this._paintChildList(ctx, order);
+    if (clip) ctx.restore();
+  }
+
+  /** `order` painted in turn, each child culled against the window, its
+   *  clipping ancestors and the pass. */
+  _paintChildList(ctx, order) {
     for (const child of order) {
       if (child._promoted) continue; // on a layer of its own: a hole here
       if (child._offscreen(child.abs, DAMAGE_SLOP)) continue;
       if (child._outsideDamage()) continue;
       child.paint(ctx);
     }
-    if (clip) ctx.restore();
+  }
+
+  /**
+   * Would a pass over `rect` paint this node? The culling `_paintChildList`
+   * does, asked of a rect before it is the pass.
+   */
+  _paintsInto(rect) {
+    if (this._promoted) return false;
+    if (!rectsOverlap(this._subtreeBounds(), rect, DAMAGE_SLOP)) return false;
+    return !this._offscreen(this.abs, DAMAGE_SLOP);
+  }
+
+  /**
+   * Children clipped to a rounded outline (issue #685) — false when this pass
+   * needs no more than a square box's clip, which the caller then applies.
+   *
+   * A clip that is not a rectangle is one ntk builds as an a8 mask the size
+   * of the window, and every fill and glyph run under it leaves the
+   * server-side fast paths for composites through that mask: a pane that
+   * clipped its content to a rounded border paid it for every drawing in
+   * every pass, to decide a few pixels in each corner. A `<Flow>` with
+   * `borderRadius: 6` panned at 10 fps where the square pane ran at 56.
+   *
+   * The outline is the box's rectangle everywhere but its four corner
+   * squares, so this asks which squares the pass reaches that a child draws
+   * into. None — a pass that misses them, or a box whose padding keeps its
+   * children off them — and the outline clips nothing the rectangle would
+   * not. Otherwise the children are drawn once, under the rectangle,
+   * and those squares are put back the way they were outside the arc
+   * (`keepCorners`): a few composites the size of a corner, whatever the
+   * children drew. A context that cannot read its pixels back clips to the
+   * outline, as does a box off the pixel grid or one that is corner all the
+   * way along — a pill.
+   */
+  _paintRoundedChildren(ctx, order, radius) {
+    const damage = this.root?._paintDamage ?? null;
+    const corners =
+      !damage || isIntegerRect(damage)
+        ? roundedCorners(this.abs, radius)
+        : null;
+    let kept = null;
+    if (corners) {
+      // nothing inside the outline is being repainted
+      const pass = damage ? intersectRects(damage, this.abs) : this.abs;
+      if (!pass) return true;
+      const cut = corners.squares.filter((square) => {
+        const piece = intersectRects(square, pass);
+        return piece && order.some((child) => child._paintsInto(piece));
+      });
+      if (cut.length === 0) return false;
+      kept = keepCorners(ctx, this.app, corners, cut);
+    }
+    if (!kept) {
+      ctx.save();
+      this._roundedPath(ctx, radius);
+      ctx.clip();
+      this._paintChildList(ctx, order);
+      ctx.restore();
+      return true;
+    }
+    try {
+      const clip = this._childrenCanOverflow();
+      if (clip) {
+        ctx.save();
+        this._roundedPath(ctx, 0);
+        ctx.clip();
+      }
+      this._paintChildList(ctx, order);
+      if (clip) ctx.restore();
+      kept.restore();
+    } finally {
+      kept.release();
+    }
+    return true;
   }
 
   /**

package/src/nodes/position.js

@@ -362,6 +362,7 @@ export class WindowPosition {
         }
         if (this._damage !== FULL_DAMAGE) {
           this._damage = addDamageRect(this._damage, claim, cap);
+          this._logClaim(claim, node);
         }
         if (panes) this._addPaneDamage(claim);
         claimed = true;

package/src/nodes/rects.js

@@ -57,6 +57,16 @@ export function intersectRects(a, b) {
   return { x, y, width: right - x, height: bottom - y };
 }
 
+/** `rect` moved by (dx, dy). */
+export function shiftRect(rect, dx, dy) {
+  return {
+    x: rect.x + dx,
+    y: rect.y + dy,
+    width: rect.width,
+    height: rect.height,
+  };
+}
+
 export function unionRect(a, b) {
   if (!b) return a ?? null;
   if (!a) return { ...b };
@@ -81,12 +91,12 @@ export function rectsBounds(rects) {
   return out;
 }
 
-/** Does `rect` reach into any of the four `radius`-sized corner squares of
- * `box` — the only part of a rounded border a translation cannot keep? */
-export function cornerSquaresOverlap(box, radius, rect) {
+/** The four `radius`-sized corner squares of `box` — the only part of a
+ * rounded border a translation cannot keep — none when there is no radius. */
+export function cornerSquares(box, radius) {
   const r = Math.min(radius, box.width / 2, box.height / 2);
-  if (!(r > 0)) return false;
-  const corners = [
+  if (!(r > 0)) return [];
+  return [
     { x: box.x, y: box.y, width: r, height: r },
     { x: box.x + box.width - r, y: box.y, width: r, height: r },
     { x: box.x, y: box.y + box.height - r, width: r, height: r },
@@ -97,7 +107,47 @@ export function cornerSquaresOverlap(box, radius, rect) {
       height: r,
     },
   ];
-  return corners.some((square) => rectsOverlap(square, rect));
+}
+
+/** Does `rect` reach into any of the four `radius`-sized corner squares of
+ * `box`? */
+export function cornerSquaresOverlap(box, radius, rect) {
+  return cornerSquares(box, radius).some((square) =>
+    rectsOverlap(square, rect),
+  );
+}
+
+/**
+ * The four squares of `box` a rounded outline of `radius` is not a rectangle
+ * in: whole pixels, `side` on a side — the radius taken up to a whole pixel,
+ * since the arc spans exactly `radius` from each edge and a pixel it crosses
+ * is one it shades — and named for their corner. Outside them the outline
+ * *is* the box, so a clip to it can be the box's rectangle there.
+ *
+ * Null when that cut cannot be made: a box off the pixel grid, whose own
+ * edges are antialiased wherever they run, and a radius whose squares would
+ * overlap — a pill, which is corner all the way along.
+ */
+export function roundedCorners(box, radius) {
+  if (!isIntegerRect(box)) return null;
+  // the radius a canvas `roundRect` draws: scaled down so that two corners
+  // never meet — for a uniform radius, half the shorter side
+  const r = Math.min(radius, box.width / 2, box.height / 2);
+  if (!(r > 0)) return null;
+  const side = Math.ceil(r);
+  if (side * 2 > box.width || side * 2 > box.height) return null;
+  const right = box.x + box.width - side;
+  const bottom = box.y + box.height - side;
+  return {
+    radius: r,
+    side,
+    squares: [
+      { corner: 'tl', x: box.x, y: box.y, width: side, height: side },
+      { corner: 'tr', x: right, y: box.y, width: side, height: side },
+      { corner: 'br', x: right, y: bottom, width: side, height: side },
+      { corner: 'bl', x: box.x, y: bottom, width: side, height: side },
+    ],
+  };
 }
 
 /**
@@ -113,3 +163,48 @@ export function rectsOverlap(a, b, margin = 0) {
     b.y < a.y + a.height + margin
   );
 }
+
+/** The parts of `rect` outside `hole`: up to four bands, full width above
+ *  and below, the rest beside. */
+export 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;
+}

package/src/nodes/roundclip.js

@@ -0,0 +1,214 @@
+// A rounded outline clipping a box's children, made without a clip mask
+// (issue #685). The outline is the box's rectangle everywhere but its four
+// corner squares, so the children are drawn once under the rectangle — the
+// clip every server-side fast path takes — and each corner square a child
+// reaches is put back the way it was outside the arc: kept before the
+// children draw, returned through the coverage of the arc's outside after.
+//
+// That needs a context that can read its own pixels back into a surface of
+// its own and composite a coverage surface: ntk's, whose `picture` is the
+// server-side picture it draws through. Anywhere else the caller clips to the
+// outline as it always has.
+
+import { Surface } from '../offscreen.js';
+
+// per app: the coverage of each corner's outside, by corner, radius and
+// side, and the surfaces a corner is kept in between the two halves
+const states = new WeakMap();
+
+function stateFor(app) {
+  let state = states.get(app);
+  if (!state) {
+    state = { coverage: new Map(), spare: [] };
+    states.set(app, state);
+  }
+  return state;
+}
+
+/**
+ * The outline inside one corner square, as a path: the square with the
+ * outside of the arc cut away. The arc is `roundRect`'s own — the same
+ * centre, radius and quarter, reached by the same line — so the pixels it
+ * shades are the ones a clip to the whole outline shades.
+ */
+function cornerPath(ctx, box, { radius: r, side: s }, corner) {
+  const left = box.x;
+  const top = box.y;
+  const right = box.x + box.width;
+  const bottom = box.y + box.height;
+  ctx.beginPath();
+  if (corner === 'tl') {
+    ctx.moveTo(left, top + s);
+    ctx.lineTo(left, top + r);
+    ctx.arc(left + r, top + r, r, Math.PI, Math.PI * 1.5);
+    ctx.lineTo(left + s, top);
+    ctx.lineTo(left + s, top + s);
+  } else if (corner === 'tr') {
+    ctx.moveTo(right - s, top);
+    ctx.lineTo(right - r, top);
+    ctx.arc(right - r, top + r, r, -Math.PI / 2, 0);
+    ctx.lineTo(right, top + s);
+    ctx.lineTo(right - s, top + s);
+  } else if (corner === 'br') {
+    ctx.moveTo(right, bottom - s);
+    ctx.lineTo(right, bottom - r);
+    ctx.arc(right - r, bottom - r, r, 0, Math.PI / 2);
+    ctx.lineTo(right - s, bottom);
+    ctx.lineTo(right - s, bottom - s);
+  } else {
+    ctx.moveTo(left + s, bottom);
+    ctx.lineTo(left + r, bottom);
+    ctx.arc(left + r, bottom - r, r, Math.PI / 2, Math.PI);
+    ctx.lineTo(left, bottom - s);
+    ctx.lineTo(left + s, bottom - s);
+  }
+  ctx.closePath();
+}
+
+/**
+ * How much of each pixel of a corner square lies outside the outline, as an
+ * a8 surface the size of the square: the square filled, and the outline's
+ * corner taken out of it. One per corner, radius and side on an app, and
+ * kept — every box with that radius shares it.
+ */
+function outsideCoverage(app, corners, corner) {
+  const state = stateFor(app);
+  const s = corners.side;
+  const key = `${corner}|${corners.radius}|${s}`;
+  let surface = state.coverage.get(key);
+  if (surface) return surface;
+  surface = new Surface(app, { width: s, height: s, format: 'a8' });
+  // a box whose corner lands on the square's own, in the square's space
+  const far = corner === 'tr' || corner === 'br';
+  const low = corner === 'bl' || corner === 'br';
+  const box = { x: far ? -s : 0, y: low ? -s : 0, width: 2 * s, height: 2 * s };
+  surface.render((sctx) => {
+    sctx.fillStyle = '#ffffff';
+    sctx.fillRect(0, 0, s, s);
+    sctx.globalCompositeOperation = 'destination-out';
+    cornerPath(sctx, box, corners, corner);
+    sctx.fill();
+  });
+  state.coverage.set(key, surface);
+  return surface;
+}
+
+/**
+ * A surface at least `side` square to keep a corner in, from the app's
+ * spares, with the context it is drawn through: a box nested in a box keeps
+ * its corners while the outer one's are still kept, so there is one per
+ * corner being held, not one in all. The context is held with the surface —
+ * ntk makes a new one per `getContext`, and a surface drawn into every frame
+ * would otherwise make one a frame.
+ */
+function takeSpare(app, side) {
+  const spare = stateFor(app).spare;
+  for (let i = 0; i < spare.length; i++) {
+    const { surface } = spare[i];
+    if (surface.width >= side && surface.height >= side) {
+      return spare.splice(i, 1)[0];
+    }
+  }
+  const size = Math.max(16, side);
+  const surface = new Surface(app, { width: size, height: size });
+  return { surface, ctx: surface.getContext('2d') };
+}
+
+/**
+ * Where the context puts window coordinate (0, 0) on the picture it draws
+ * into — the only transform the paint walk runs under is a whole-pixel
+ * translation (a faded group's surface, a pane's) — and that picture, as
+ * something `drawImage` can read from; null when either is missing, and the
+ * corners cannot be kept this way.
+ */
+function readback(ctx) {
+  const m = typeof ctx.getTransform === 'function' ? ctx.getTransform() : null;
+  if (!m || m.a !== 1 || m.b !== 0 || m.c !== 0 || m.d !== 1) return null;
+  if (!Number.isInteger(m.e) || !Number.isInteger(m.f)) return null;
+  // reading it settles the picture's clip, which the next drawing re-stamps
+  if (!ctx.picture || !Number.isFinite(ctx.width)) return null;
+  return {
+    dx: m.e,
+    dy: m.f,
+    source: {
+      width: ctx.width,
+      height: ctx.height,
+      picture: () => ctx.picture,
+    },
+  };
+}
+
+/**
+ * Keep the corner squares in `cut` — the ones a child is about to draw into
+ * — before the children draw, and hand back what puts them back afterwards:
+ * `restore()` composites each square the way it was outside the arc, over
+ * whatever the children left there, and `release()` returns the surfaces.
+ * Null when the context cannot read its pixels back.
+ *
+ * Each kept square is premultiplied by the outside's coverage, so putting it
+ * back is two composites and no mask: the destination scaled by the inside's
+ * coverage (`destination-out` through the outside's), then the kept pixels
+ * added (`lighter`). Where the outline covers a pixel wholly, nothing of what
+ * the children drew changes; where it misses it wholly, what was there
+ * before comes back exactly; the antialiased pixels on the arc blend the two
+ * by the arc's coverage. That is the children clipped as one layer, which is
+ * what a clip means — a per-drawing clip lets a covered layer bleed into
+ * those pixels, and a stack of them darkens the edge.
+ */
+export function keepCorners(ctx, app, corners, cut) {
+  const at = app ? readback(ctx) : null;
+  if (!at) return null;
+  const s = corners.side;
+  const kept = [];
+  const release = () => {
+    const spare = stateFor(app).spare;
+    for (const { held } of kept) spare.push(held);
+    kept.length = 0;
+  };
+  try {
+    for (const square of cut) {
+      const outside = outsideCoverage(app, corners, square.corner);
+      const held = takeSpare(app, s);
+      kept.push({ square, outside, held });
+      const sctx = held.ctx;
+      sctx.save();
+      sctx.globalAlpha = 1;
+      sctx.globalCompositeOperation = 'copy';
+      sctx.drawImage(
+        at.source,
+        square.x + at.dx,
+        square.y + at.dy,
+        s,
+        s,
+        0,
+        0,
+        s,
+        s,
+      );
+      sctx.globalCompositeOperation = 'destination-in';
+      sctx.fillStyle = '#000000';
+      sctx.drawImage(outside, 0, 0);
+      sctx.restore();
+    }
+  } catch {
+    // no surface to keep a corner in: the caller clips to the outline, and
+    // what was taken goes back
+    release();
+    return null;
+  }
+  return {
+    restore() {
+      for (const { square, outside, held } of kept) {
+        ctx.save();
+        ctx.globalAlpha = 1;
+        ctx.globalCompositeOperation = 'destination-out';
+        ctx.fillStyle = '#000000';
+        ctx.drawImage(outside, square.x, square.y);
+        ctx.globalCompositeOperation = 'lighter';
+        ctx.drawImage(held.surface, 0, 0, s, s, square.x, square.y, s, s);
+        ctx.restore();
+      }
+    },
+    release,
+  };
+}

package/src/nodes/scrollable.js

@@ -163,7 +163,10 @@ export const Scrollable = (Base) =>
           this.abs.y - wasY,
         );
       } finally {
-        if (move) layoutDiff.shift = null;
+        if (move) {
+          layoutDiff.shift = null;
+          layoutDiff.ride = false;
+        }
       }
       if (move) this._claimRigidMove(move);
     }
@@ -316,9 +319,11 @@ export const Scrollable = (Base) =>
             // 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. 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.
+            // for a move this pane rides whose pixels are copied — a
+            // `<glarea>` child's on its pane (issue #644), a subtree's in
+            // the window (issue #681): 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, this);
           } else {
             layoutDiff.sink = (rect, node) => {

package/src/nodes/scrollbars.js

@@ -67,9 +67,15 @@ export function scrollbarGeometry({
   // radius downstream draw from the same number.
   const barWidth = SCROLLBAR_WIDTH * scale;
   const rtl = direction === 'rtl';
-  const thumbLength = Math.max(
-    SCROLLBAR_MIN_THUMB * scale,
-    (length * length) / content,
+  // Never longer than the track: a pane shorter than the minimum gets a
+  // thumb that fills it and has no travel. The bar paints outside the
+  // pane's clip, and a node that clips its children reaches no further than
+  // its own box (`_subtreeBounds`), so a thumb run past the track put ink
+  // where no damage claim could reach — left behind by every move of the
+  // pane, and on a part the pointer could not hit.
+  const thumbLength = Math.min(
+    length,
+    Math.max(SCROLLBAR_MIN_THUMB * scale, (length * length) / content),
   );
   const range = content - viewport;
   const travel = Math.max(0, length - thumbLength);