react-x11 2.23.1 → 2.23.2

package/package.json

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

package/src/cocoa/app.js

@@ -762,7 +762,7 @@ export class CocoaApp {
   /**
    * The pane's end of the frame channel (childmain hands it over,
    * feature-detected so the X11 pane path never notices): geometry and
-   * input come in, pane-present goes out.
+   * input come in, pane-present and pane-cursor go out.
    */
   attachPaneChannel(channel) {
     if (!this._paneMode) return;

package/src/cocoa/panewindow.js

@@ -12,8 +12,8 @@
 // What the node tree sees is the ordinary window contract: getContext,
 // present, scrollRegion, noteFrameDamage, requestAnimationFrame, events
 // via emit. Geometry and input arrive as channel messages (the host owns
-// layout and hit-testing — this is CPU offloading, not isolation), and the
-// only outbound traffic is pane-present.
+// layout and hit-testing — this is CPU offloading, not isolation), and what
+// goes out is pane-present, and pane-cursor for the cursor the host shows.
 import { BackendContext2D } from '../backend/context2d.js';
 
 let nextPaneId = 1;
@@ -95,6 +95,17 @@ export class CocoaPaneWindow {
 
   setTitle() {}
 
+  /**
+   * The cursor this pane's tree names, sent to the host. A pane has no
+   * window the pointer is over — the host's window is — so the host shows
+   * it (`<Frame>`'s pane box, src/frame/index.js). Core asks only when the
+   * cursor changes, so this is a message per change, not per motion.
+   */
+  setCursor(name) {
+    if (this.destroyed) return;
+    this.app._paneSend?.({ type: 'pane-cursor', cursor: name ?? null });
+  }
+
   requestAnimationFrame(cb) {
     return this.app._requestFrame(cb);
   }

package/src/events.js

@@ -1322,6 +1322,19 @@ export class EventManager {
     callHandler(node, 'unstable_onAttention', handler, ev);
   }
 
+  /**
+   * Apply the cursor again with no motion: for a node whose cursor changed
+   * under a pointer standing still — a `<Frame>` pane's, which arrives from
+   * the pane's process after the motion that changed it was answered here.
+   * A point cursor is not asked again, as there is no new point: each node
+   * keeps what it last named. Nothing, once the window is gone — a pane's
+   * box lets go of its cursor as it unmounts.
+   */
+  refreshCursor() {
+    if (this.node.destroyed || !this.node.window) return;
+    this._updateCursor(this.hoverPath);
+  }
+
   /** Apply the deepest hovered node's cursor to the window: its `cursor`
    * style, or what it says of the point under the pointer (`cursorAt`), or
    * its `defaultCursor` — and failing all three, its parent's. Asked on

package/src/frame/index.js

@@ -569,10 +569,20 @@ function PaneHostView({
       if (msg?.type === 'pane-present') {
         host.setRect(node.abs);
         host.present(msg.id);
+      } else if (msg?.type === 'pane-cursor') {
+        // The pane names its cursor as an element that draws names one for
+        // a point: this box is the node the host's pointer is over, so the
+        // cursor is its default — a `cursor` style on the <Frame> still
+        // wins — and it is shown now, because the motion that changed it
+        // was answered in the host before the pane had said
+        node.defaultCursor = msg.cursor ?? undefined;
+        node.root?.events?.refreshCursor();
       }
     });
     return () => {
       off();
+      node.defaultCursor = undefined;
+      node.root?.events?.refreshCursor();
       node.absolutize = origAbsolutize;
       if (origShift) node._shiftAbs = origShift;
       if (s.paneHost === host) s.paneHost = null;

package/src/nodes/layout.js

@@ -510,6 +510,8 @@ export class NodeLayout {
       return;
     }
     this.abs = { x, y, width, height };
+    const placed = this._absAssigned;
+    this._absAssigned = true;
     // moving or resizing changes where this subtree can be hit, and the
     // cached unions all the way up with it
     this._clearHitBounds();
@@ -517,10 +519,16 @@ export class NodeLayout {
       // the reach `_ownPaintBounds` names, ring and shadow alike: a card
       // pushed down by a row above it leaves its old shadow on the surface
       // unless the claim for where it was covers that shadow too
-      const grow =
-        Math.max(this._outlineExtent(), this._shadowExtent()) + DAMAGE_SLOP;
+      const reach = Math.max(this._outlineExtent(), this._shadowExtent());
+      const grow = reach + DAMAGE_SLOP;
       const shift = layoutDiff.shift;
-      const had = old.width > 0 && old.height > 0;
+      // A rect of no area has no pixels of its own — but an outline or a
+      // shadow is drawn round it all the same, and a box of no height
+      // arriving with a ring round it claimed nothing, and was never drawn.
+      // The old rect counts only once layout has placed the node at all:
+      // before that it is the origin, where it never was.
+      const had =
+        (old.width > 0 && old.height > 0) || (reach > 0 && placed === true);
       if (shift) {
         // Riding a blit (issue #398): the rect this node *would* have had if
         // nothing but the scroll had happened. Landing there is the blit's
@@ -555,7 +563,7 @@ export class NodeLayout {
           return;
         }
         if (had) layoutDiff.sink(insetRect(was, -grow), this);
-        if (width > 0 && height > 0) {
+        if ((width > 0 && height > 0) || reach > 0) {
           layoutDiff.sink(insetRect(this.abs, -grow), this);
         }
         return;
@@ -573,7 +581,7 @@ export class NodeLayout {
       if (had) {
         layoutDiff.sink(insetRect(old, -grow), this);
       }
-      if (width > 0 && height > 0) {
+      if ((width > 0 && height > 0) || reach > 0) {
         layoutDiff.sink(insetRect(this.abs, -grow), this);
       }
     }
@@ -600,6 +608,19 @@ export class NodeLayout {
     const style = this.style;
     if (style.backgroundImage) return null;
     if (style.opacity !== undefined && style.opacity < 1) return null;
+    // A radius the box is too small for is drawn at half its shorter side
+    // (`roundedCorners`), so a resize that moves that moves all four
+    // corners — and their outline and shadow with them — and the ones at the
+    // edges that held are in no band along the edges that moved.
+    const radius = style.borderRadius ?? 0;
+    const now = this.abs;
+    if (
+      radius > 0 &&
+      Math.min(radius, old.width / 2, old.height / 2) !==
+        Math.min(radius, now.width / 2, now.height / 2)
+    ) {
+      return null;
+    }
     const bw = resolveBorderWidths(style, this.direction);
     const reach =
       Math.max(
@@ -610,7 +631,6 @@ export class NodeLayout {
         bw.left,
         grow,
       ) + DAMAGE_SLOP;
-    const now = this.abs;
     const bands = [];
     const oldBottom = old.y + old.height;
     const newBottom = now.y + now.height;

package/src/nodes/node.js

@@ -31,7 +31,7 @@ import { dropVisibleSelection, selectionSurfaceOf } from '../textselection.js';
 import { NodeAnimation } from './animation.js';
 import { NodeBoxPaint } from './boxpaint.js';
 import { NodeCascade } from './cascade.js';
-import { NO_DAMAGE } from './damage.js';
+import { DAMAGE_SLOP, NO_DAMAGE } from './damage.js';
 import { NodeHitTest } from './hittest.js';
 import { installMethods } from './install.js';
 import { NodeInvalidate } from './invalidate.js';
@@ -40,6 +40,7 @@ import { NodeLayout } from './layout.js';
 import { NodeLayoutHost } from './layouthost.js';
 import { NodeMoveBlit } from './moveblit.js';
 import { NodePaint } from './paint.js';
+import { unionRect } from './rects.js';
 import { NodePosition } from './position.js';
 import { NodeQueries } from './queries.js';
 import { NodeScrollBlit } from './scrollblit.js';
@@ -66,6 +67,9 @@ const NO_SELF_DAMAGED = new Set();
  * `_nonYogaKids` counts, so the count stays right for a parent that has no
  * box of its own either. */
 const outsideYoga = (child) => !child.yoga || child.isWindow;
+// Drawn by the box it is in: a `<text>`'s characters, a span. A popup has no
+// box here either, but draws in a window of its own.
+const isBoxless = (child) => !child.yoga && !child.isPopup;
 
 export class Node {
   get ownerDocument() {
@@ -126,6 +130,8 @@ export class Node {
     this.destroyed = false;
     // absolute rect within the owning window, filled by absolutize()
     this.abs = { x: 0, y: 0, width: 0, height: 0 };
+    // whether layout has ever given this node a rect (`_assignAbs`)
+    this._absAssigned = false;
     // node states that style blocks can react to, owned by EventManager
     this.states = {
       ':hover': false,
@@ -392,8 +398,9 @@ export class Node {
     // nothing vacating — the child being added had no pixels — and the
     // layout diff claims where it lands, so it names no region at all. A
     // child already here is a move, and says so (`_childListFine`).
-    const fine = this._childListFine(child.parent !== this);
-    const before = fine ? null : this._childListBefore();
+    const boxless = isBoxless(child);
+    const fine = !boxless && this._childListFine(child.parent !== this);
+    const before = fine || boxless ? null : this._childListBefore();
     // a move has to leave the yoga tree too — yoga aborts on insertChild of
     // a node that still has a parent
     if (child.parent === this && this._joinsYoga(child)) {
@@ -422,7 +429,8 @@ export class Node {
     // against the app's, and only now can see the `scale` props above it.
     child._rescaleSubtree(mounting);
     this._textContentChanged();
-    this._childListChanged(before, fine);
+    if (boxless) this._boxlessChildChanged();
+    else this._childListChanged(before, fine);
     a11yHooks.attached?.(this, child);
   }
 
@@ -535,10 +543,13 @@ export class Node {
     // captured while the child is still attached, so it covers the rect the
     // child is about to stop occupying — the child's own, for a viewport
     // mid-blit, where this node's box is the whole scrolled band
-    const fine = this._childListFine(true);
-    const before = fine
-      ? (child._claimBounds() ?? NO_DAMAGE)
-      : this._childListBefore();
+    const boxless = isBoxless(child);
+    const fine = !boxless && this._childListFine(true);
+    const before = boxless
+      ? null
+      : fine
+        ? (child._claimBounds() ?? NO_DAMAGE)
+        : this._childListBefore();
     this.children.splice(index, 1);
     if (outsideYoga(child)) this._nonYogaKids--;
     if (this._joinsYoga(child)) {
@@ -557,7 +568,30 @@ export class Node {
       child.yoga = null;
     }
     this._textContentChanged();
-    this._childListChanged(before, fine);
+    if (boxless) this._boxlessChildChanged();
+    else this._childListChanged(before, fine);
+  }
+
+  /**
+   * A child with no box of its own — a `<text>`'s run of characters, or a
+   * `<text>` nested in one — arrived or left. It is drawn by the nearest box
+   * above it, so what changed is that box's pixels, and no rect: the box
+   * claims where it is now and again once layout has run, the way a string
+   * that changes in place claims (`TextChunkNode.setText`).
+   *
+   * Not through `_childListChanged`. Under a scroll pane its claims are the
+   * finer ones (`_childListFine`): the leaving child's own rect, and the
+   * layout diff's claim of where an arriving one lands. A boxless child has
+   * neither, so a label emptied or filled inside a pane claimed nothing, and
+   * its old glyphs stayed on the screen. And a span that gains a child has
+   * no rect of its own to claim either.
+   */
+  _boxlessChildChanged() {
+    this._clearHitBounds();
+    let owner = this;
+    while (owner && !owner.yoga) owner = owner.parent;
+    if (owner) owner._invalidateLayout('text');
+    else this.root?.invalidate(true, null, 'text');
   }
 
   /** Destroy real resources (X windows) in this subtree. Yoga nodes are
@@ -623,7 +657,10 @@ export class Node {
     // factor. The walk restyles this node too, so the call after it hits
     // the identity check and costs nothing twice.
     if (newProps.scale !== prev.scale) this._rescaleSubtree();
+    // asked of the style still in force: see `_clipStarted`
+    const clipped = this.clipsChildren();
     const style = this._syncStyle(newProps);
+    if (!clipped && this.clipsChildren()) this._clipStarted();
     let layoutChanged = false;
     // hoisted styles hit the identity check and skip the whole update
     if (this.yoga && style !== prevStyle) {
@@ -696,6 +733,34 @@ export class Node {
     a11yHooks.propsChanged?.(this);
   }
 
+  /**
+   * This node started clipping what it holds (`overflow: 'hidden'` or
+   * `'scroll'`), so whatever its children drew past its box is gone, and
+   * nothing moved for the layout diff to notice. Its own claims are made
+   * after the new style is in, when its paint bounds already stop at its
+   * box, so the old reach is claimed here: what the children drew, which is
+   * theirs, and the same whether or not this node clips them.
+   *
+   * The other way — a box that stops clipping — needs nothing of its own:
+   * the claim once layout has run reaches as far as the children now do.
+   */
+  _clipStarted() {
+    let reach = null;
+    for (const child of this.children) {
+      if (child.isWindow || !child.yoga || child.hidden) continue;
+      if (child.style?.display === 'none') continue;
+      const bounds = child._subtreeBounds();
+      reach = reach ? unionRect(reach, bounds) : bounds;
+    }
+    if (!reach) return;
+    this.invalidate(false, {
+      x: reach.x - DAMAGE_SLOP,
+      y: reach.y - DAMAGE_SLOP,
+      width: reach.width + 2 * DAMAGE_SLOP,
+      height: reach.height + 2 * DAMAGE_SLOP,
+    });
+  }
+
   /**
    * Did anything this node *draws* change? Answering true damages the whole
    * node; answering false contributes no damage at all.

package/src/nodes/scrollbars.js

@@ -66,6 +66,12 @@ export function scrollbarGeometry({
   // carries `scale` so the track, the hit slop and the thumb's corner
   // radius downstream draw from the same number.
   const barWidth = SCROLLBAR_WIDTH * scale;
+  // …and never wider than the pane across: a pane thinner than the bar and
+  // its inset shows none. Laid a bar's width in from its far edge, the bar
+  // of a pane four pixels tall stood four pixels above it, painted past the
+  // pane's box where none of the pane's claims reach — the same stray ink as
+  // a thumb run past its track, below, the other way round.
+  if (crossSize < barWidth + inset) return null;
   const rtl = direction === 'rtl';
   // 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

package/src/nodes/text.js

@@ -9,8 +9,9 @@ import {
 import { cssColorStraight } from 'ntk/color';
 import { hooks as a11yHooks } from '../a11y.js';
 import { codePointAtOffset, codeUnitOffsets } from '../textrange.js';
-import { NO_DAMAGE } from './damage.js';
+import { DAMAGE_SLOP, NO_DAMAGE, layoutDiff } from './damage.js';
 import { Node } from './node.js';
+import { insetRect, unionRect } from './rects.js';
 
 /**
  * Yoga's measure modes, in words. Indexed by the integer yoga hands a
@@ -37,6 +38,17 @@ const STRIP_COVERAGE = 0.45;
 
 const textStripBelow = new WeakMap();
 
+/** `ink`, when any of it lies outside `box`; else null. */
+function outside(ink, box) {
+  if (!ink) return null;
+  return ink.x < box.x ||
+    ink.y < box.y ||
+    ink.x + ink.width > box.x + box.width ||
+    ink.y + ink.height > box.y + box.height
+    ? ink
+    : null;
+}
+
 /** `TextNode._trim`'s answer, per layout. */
 const trims = new WeakMap();
 
@@ -186,6 +198,8 @@ export class TextNode extends Node {
     super('text', props, app, { yoga: !span });
     this.isSpan = span;
     this._layouts = new Map();
+    // how far the ink of the last paint reached past the box (`_keepInkReach`)
+    this._inkReach = null;
   }
 
   /** Height for a width: the paragraph shaped into whatever is on offer.
@@ -217,6 +231,8 @@ export class TextNode extends Node {
       return;
     }
     this._layouts.clear();
+    // the ink goes with the layout it was placed from (`_ownPaintBounds`)
+    this._clearPaintBounds();
     if (this.yoga) this.yoga.markDirty();
   }
 
@@ -236,6 +252,7 @@ export class TextNode extends Node {
       return;
     }
     this._layouts.clear();
+    this._clearPaintBounds();
   }
 
   /**
@@ -408,7 +425,10 @@ export class TextNode extends Node {
     return this._elides() ? maxWidth : Infinity;
   }
 
-  _layoutFor(maxWidth) {
+  /** The layout at `maxWidth`: kept, or shaped now. With `shape` false, only
+   *  a kept one — for a question that must not cost a shaping, such as how
+   *  far a paragraph not yet painted will ink (`_inkPlaced`). */
+  _layoutFor(maxWidth, shape = true) {
     const fonts = this.app?.fonts;
     if (!fonts) return null; // mock container in tests: no text metrics
     const maxLines = this._maxLines();
@@ -435,6 +455,7 @@ export class TextNode extends Node {
       layout = this._shapedWider(maxWidth, maxLines, overflow);
       if (layout) this._layouts.set(maxWidth, { layout, maxLines, overflow });
     }
+    if (!layout && !shape) return null;
     if (!layout) {
       const spans = this.collectSpans([]);
       const base = this.resolvedTextStyle();
@@ -585,9 +606,12 @@ export class TextNode extends Node {
    * a differently-placed layout is a caret in the wrong place, and nothing
    * about it would look like a bug in this function.
    */
-  _placedLayout() {
+  _placedLayout(shape = true) {
     const content = this.contentBox();
-    const layout = this._layoutFor(this._wrapWidth(content.width || Infinity));
+    const layout = this._layoutFor(
+      this._wrapWidth(content.width || Infinity),
+      shape,
+    );
     if (!layout) return null;
     // the box was shortened from the top, so the glyphs come up with it
     const trim = this._trim(layout);
@@ -641,6 +665,7 @@ export class TextNode extends Node {
   paintContent(ctx) {
     const placed = this._placedLayout();
     if (!placed) return;
+    this._keepInkReach(placed);
     this._paintSelection(ctx);
     if (this._paintsStrip()) {
       this._paintStrip(ctx, placed);
@@ -649,6 +674,146 @@ export class TextNode extends Node {
     placed.layout.draw(ctx, placed.x, placed.y);
   }
 
+  /**
+   * Where this paragraph puts ink, when that is outside its box: the box
+   * grown by the ink it has on the screen now, before a layout pass, and by
+   * the ink the frame is about to draw, after one.
+   *
+   * The glyphs are drawn where the layout puts them, and two things put them
+   * past the box. A word too wide for the box and with nowhere to break is
+   * drawn whole, across the box's edge. And a box trimmed to its capitals
+   * (`textBoxTrim`) leaves every descender and every ascender taller than a
+   * capital outside it, by design. A change that repaints the paragraph —
+   * its colour, its characters — claimed the box, so the ink outside it kept
+   * the old colour, or stayed after the word was gone.
+   */
+  _ownPaintBounds() {
+    let bounds = super._ownPaintBounds();
+    // Both, whenever it is asked. A claim made before this frame's layout
+    // wants the ink on the screen, one made after it the ink about to be
+    // drawn — and so does everything the paint sizes from these bounds,
+    // which asks before this paragraph has ever drawn: an ancestor's
+    // `opacity` draws the subtree into a surface this big, and one sized
+    // before the ink was known cut a word's overflow off at the box, on the
+    // first frame only. The union is never smaller than either.
+    const shown = this._inkOnScreen();
+    if (shown) bounds = unionRect(bounds, shown);
+    const placed = this._inkPlaced();
+    if (placed) bounds = unionRect(bounds, placed);
+    return bounds;
+  }
+
+  /**
+   * A paragraph that moved claims its ink past its box, where it was and
+   * where it lands, beside the claims the box makes (`Node._assignAbs`).
+   *
+   * Those are the box's rect, grown by its outline and shadow, and a rect
+   * of no area claims nothing — there were, or will be, no pixels there. A
+   * paragraph squeezed to no height by the row it sits in still draws its
+   * lines, though, below a box of none: moved along by a sibling, it left
+   * its old glyphs on the screen and drew its new ones nowhere.
+   */
+  _assignAbs(x, y, width, height) {
+    const old = this.abs;
+    const shown = this._inkOnScreen();
+    super._assignAbs(x, y, width, height);
+    if (this.abs === old || !layoutDiff.sink) return;
+    const shift = layoutDiff.shift;
+    // riding a blit: the ink moved with the pixels, and claims nothing
+    if (
+      shift &&
+      old.x + shift.x === x &&
+      old.y + shift.y === y &&
+      old.width === width &&
+      old.height === height
+    ) {
+      return;
+    }
+    if (shown) {
+      const was = shift
+        ? { ...shown, x: shown.x + shift.x, y: shown.y + shift.y }
+        : shown;
+      layoutDiff.sink(insetRect(was, -DAMAGE_SLOP), this);
+    }
+    const placed = this._inkPlaced();
+    if (placed) layoutDiff.sink(insetRect(placed, -DAMAGE_SLOP), this);
+  }
+
+  /** The rect the lines of a placed layout cover, in window coordinates. */
+  _inkOf({ layout, x, y }) {
+    const lines = layout.lines;
+    if (!lines?.length) return null;
+    let left = Infinity;
+    let right = -Infinity;
+    for (const line of lines) {
+      left = Math.min(left, line.x);
+      right = Math.max(right, line.x + line.width);
+    }
+    return {
+      x: x + left,
+      y,
+      width: right - left,
+      height: layout.height,
+    };
+  }
+
+  /** The ink the frame will draw, where it reaches past the box. */
+  _inkPlaced() {
+    // a paragraph not laid out yet has no box to be placed in
+    const box = this.abs;
+    if (!(box.width > 0 || box.height > 0)) return null;
+    // Shaped only once this frame's layout has run, when the paint is about
+    // to need the very same layout: before it, a claim at the commit would
+    // shape every string a batch of input passes through, painted or not.
+    // The measure pass does not always make the one the paint draws — a
+    // box of no width is drawn unwrapped — and a paragraph moved into one
+    // claimed none of its new ink.
+    const placed = this._placedLayout(this.root?._laidOut === true);
+    return placed ? outside(this._inkOf(placed), box) : null;
+  }
+
+  /** The ink on the screen, where it reaches past the box: kept by the last
+   *  paint as distances from the box's edges, so it rides a scroll's shift
+   *  with the box. */
+  _inkOnScreen() {
+    const reach = this._inkReach;
+    if (!reach) return null;
+    const box = this.abs;
+    return {
+      x: box.x - reach.left,
+      y: box.y - reach.top,
+      width: box.width + reach.left + reach.right,
+      height: box.height + reach.top + reach.bottom,
+    };
+  }
+
+  /** Remember how far past the box this paint's ink reaches. A reach that
+   *  changed is a changed paint bound, so the cached ones above it go. */
+  _keepInkReach(placed) {
+    const ink = outside(this._inkOf(placed), this.abs);
+    const box = this.abs;
+    const reach = ink && {
+      left: Math.max(0, box.x - ink.x),
+      top: Math.max(0, box.y - ink.y),
+      right: Math.max(0, ink.x + ink.width - (box.x + box.width)),
+      bottom: Math.max(0, ink.y + ink.height - (box.y + box.height)),
+    };
+    const was = this._inkReach;
+    if (
+      reach === was ||
+      (reach &&
+        was &&
+        reach.left === was.left &&
+        reach.top === was.top &&
+        reach.right === was.right &&
+        reach.bottom === was.bottom)
+    ) {
+      return;
+    }
+    this._inkReach = reach;
+    this._clearPaintBounds();
+  }
+
   /**
    * Whether this paragraph is too small to read, and is painted as a strip
    * where its lines are instead of as glyphs (`_paintStrip`).

package/src/win32/app.js

@@ -416,7 +416,7 @@ export class Win32App {
 
   /**
    * The pane process's end of the frame channel: geometry and input in,
-   * presents out. Feature-detected by the pane bootstrap
+   * presents and the cursor out. Feature-detected by the pane bootstrap
    * (src/frame/childmain.js), and a no-op in a process that is not a pane.
    */
   attachPaneChannel(channel) {

package/src/win32/panewindow.js

@@ -205,6 +205,15 @@ export class Win32PaneWindow {
     this.title = title;
   }
 
+  /** The cursor this pane's tree names, sent to the host, which shows it:
+   *  the pointer is over the host's window, not this one (the Cocoa pane's
+   *  `setCursor`). */
+  setCursor(name) {
+    this.cursor = name;
+    if (this.destroyed) return;
+    this.app._paneSend?.({ type: 'pane-cursor', cursor: name ?? null });
+  }
+
   setSizeHints() {}
 
   /** The host sizes a pane, not the pane itself: a `<Frame>`'s box is laid