react-x11 2.34.0 → 2.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.34.0",
+  "version": "2.36.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -109,7 +109,7 @@
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.19.0",
+    "@windowkit/appkit": "^0.22.0",
     "@windowkit/wayland": "^3.1.1",
     "@windowkit/win32": "^0.0.6",
     "dbus-native": "^0.16.0",

package/src/backend/context2d.js

@@ -194,6 +194,19 @@ class LinearGradient {
 
 const clamp01 = (v) => Math.min(1, Math.max(0, Number(v) || 0));
 
+// What `textAlign`, `textBaseline` and `direction` take. A value outside
+// them is ignored and the last one stays, as canvas has it.
+const TEXT_ALIGNS = new Set(['start', 'end', 'left', 'right', 'center']);
+const TEXT_BASELINES = new Set([
+  'top',
+  'hanging',
+  'middle',
+  'alphabetic',
+  'ideographic',
+  'bottom',
+]);
+const DIRECTIONS = new Set(['ltr', 'rtl', 'inherit']);
+
 /**
  * The Render ops text draws with, numbered as XRender numbers them so a
  * caller's `ctx.Render?.PictOp?.Over ?? 3` reads the same on both
@@ -428,6 +441,9 @@ export class BackendContext2D {
       dash: [],
       dashOffset: 0,
       font: '10px sans-serif',
+      textAlign: 'start',
+      textBaseline: 'alphabetic',
+      direction: 'inherit',
       shadowBlur: 0,
       shadowOffsetX: 0,
       shadowOffsetY: 0,
@@ -654,6 +670,37 @@ export class BackendContext2D {
     this._state.font = String(value);
   }
 
+  /** Where `fillText`'s x is on the text: its start, end, left, right or
+   *  centre. */
+  get textAlign() {
+    return this._state.textAlign;
+  }
+
+  set textAlign(value) {
+    if (TEXT_ALIGNS.has(value)) this._state.textAlign = value;
+  }
+
+  /** Where `fillText`'s y is on the text: its alphabetic baseline, or the
+   *  top, middle or bottom of its em box, or its hanging or ideographic
+   *  baseline. */
+  get textBaseline() {
+    return this._state.textBaseline;
+  }
+
+  set textBaseline(value) {
+    if (TEXT_BASELINES.has(value)) this._state.textBaseline = value;
+  }
+
+  /** Which way `start` and `end` face. `inherit`, with no element to take
+   *  it from, is the text's own: right to left where it starts so. */
+  get direction() {
+    return this._state.direction;
+  }
+
+  set direction(value) {
+    if (DIRECTIONS.has(value)) this._state.direction = value;
+  }
+
   get shadowBlur() {
     return this._state.shadowBlur;
   }
@@ -1932,9 +1979,53 @@ export class BackendContext2D {
   fillText(text, x, y) {
     const layout = this._fontLayout(text);
     if (!layout) return;
-    // canvas fillText's y is the baseline; layouts draw from their top
-    const baseline = layout.lines[0]?.baseline ?? 0;
-    this._drawLayout(layout, x, y - baseline);
+    // canvas fillText's y is on the baseline `textBaseline` names, and x on
+    // the side `textAlign` does; a layout draws from its top left
+    const line = layout.lines[0];
+    const baseline = line?.baseline ?? 0;
+    this._drawLayout(
+      layout,
+      x + this._alignOffset(layout, line),
+      y - baseline + this._baselineOffset(line),
+    );
+  }
+
+  /** How far left of x the text starts: ntk's `_alignOffset`, so a label
+   *  centred on X11 is centred here too. */
+  _alignOffset(layout, line) {
+    let align = this._state.textAlign;
+    if (align === 'start' || align === 'end') {
+      const direction = this._state.direction;
+      const rtl =
+        direction === 'rtl' ||
+        (direction === 'inherit' &&
+          !!line?.runs?.find((r) => r.start === 0)?.rtl);
+      align = (align === 'start') !== rtl ? 'left' : 'right';
+    }
+    const width = layout.width ?? 0;
+    if (align === 'center') return -width / 2;
+    if (align === 'right') return -width;
+    return 0;
+  }
+
+  /** How far below y the alphabetic baseline is: ntk's `_baselineOffset`,
+   *  from the face's ascent and descent. */
+  _baselineOffset(line) {
+    const ascent = line?.ascent ?? 0;
+    const descent = line?.descent ?? 0;
+    switch (this._state.textBaseline) {
+      case 'top':
+        return ascent;
+      case 'hanging':
+        return ascent * 0.8;
+      case 'middle':
+        return (ascent - descent) / 2;
+      case 'bottom':
+      case 'ideographic':
+        return -descent;
+      default:
+        return 0;
+    }
   }
 
   _fontLayout(text, color) {

package/src/cocoa/presenter.js

@@ -29,7 +29,12 @@ import { cssColorStraight } from 'ntk/color';
 import { Node } from '../nodes/node.js';
 import { addDamageRect, damageToPaint } from '../nodes/damage.js';
 import { intersectRects } from '../nodes/rects.js';
-import { EASING_CONTROL_POINTS, TRANSITION_CONTROL_POINTS } from '../styles.js';
+import { now as animationNow } from '../nodes/animation.js';
+import {
+  EASING_CONTROL_POINTS,
+  TRANSITION_CONTROL_POINTS,
+  resolveBorderWidths,
+} from '../styles.js';
 import { BackendContext2D } from '../backend/context2d.js';
 
 export const RASTER_PAD = 2; // antialiasing/italic overhang outside the ink bounds
@@ -361,6 +366,33 @@ const ANIMATED_KEY_PATHS = Object.freeze({
   opacity: { keyPath: 'opacity' },
 });
 
+/**
+ * An inset of a node out of the flow moves that node and nothing else — no
+ * sibling, not its parent — so a loop on one is its layer's position: an
+ * offset added to where the layout put the node, which is at the inset's
+ * declared value while the render server runs the loop (the style is the
+ * model). Only for a node no pointer lands on (`pointerEvents: 'none'`),
+ * since input is hit against the layout's rect, which holds still: an
+ * indeterminate bar's block, a highlight that sweeps along a track. Which
+ * axis, and which way a larger value moves the layer; `start` and `end` are
+ * mirrored under RTL.
+ */
+const INSET_KEY_PATHS = Object.freeze({
+  left: { keyPath: 'position.x', axis: 'x', sign: 1 },
+  right: { keyPath: 'position.x', axis: 'x', sign: -1 },
+  start: { keyPath: 'position.x', axis: 'x', sign: 1, logical: true },
+  end: { keyPath: 'position.x', axis: 'x', sign: -1, logical: true },
+  top: { keyPath: 'position.y', axis: 'y', sign: 1 },
+  bottom: { keyPath: 'position.y', axis: 'y', sign: -1 },
+});
+
+/** Does a loop on `prop` move its node, where a presenter runs it
+ *  (`INSET_KEY_PATHS`)? */
+export const movesNode = (prop) => Object.hasOwn(INSET_KEY_PATHS, prop);
+
+// a length or a share of the room: `12`, `'-40%'`
+const PERCENT = /^\s*(-?(?:\d+\.?\d*|\.\d+))%\s*$/;
+
 // the ids the bridge reports an animation's end under: unique per process,
 // looked up per app (`_animationEnds`)
 let animationSeq = 0;
@@ -544,12 +576,16 @@ export class LayerAnimations {
    * is in its bitmap, not on its layer.
    */
   take(node, prop, entry) {
-    const map = ANIMATED_KEY_PATHS[prop];
+    const map = ANIMATED_KEY_PATHS[prop] ?? INSET_KEY_PATHS[prop];
     if (!map || !stylePaintsPlain(node, node._targetStyle ?? node.style)) {
       return false;
     }
-    if (this._value(map, entry.from) == null) return false;
-    if (this._value(map, entry.to) == null) return false;
+    if (map.axis) {
+      if (!this._insetOffsets(node, prop, entry)) return false;
+    } else {
+      if (this._value(map, entry.from) == null) return false;
+      if (this._value(map, entry.to) == null) return false;
+    }
     let pending = this.pending.get(node);
     if (!pending) this.pending.set(node, (pending = new Map()));
     pending.set(prop, entry);
@@ -559,7 +595,12 @@ export class LayerAnimations {
   /** Stop what runs for `prop` on `node`: a loop the window lost sight of,
    *  a declaration that changed, a transition the clock takes back. */
   cancel(node, prop) {
-    this.pending.get(node)?.delete(prop);
+    const pending = this.pending.get(node);
+    // …and nothing left waiting is no entry at all: an empty map still
+    // answers `has`, and a node with nothing to run went onto a layer it
+    // never gave back — a loop that went out of sight between its offer
+    // and its frame did
+    if (pending?.delete(prop) && pending.size === 0) this.pending.delete(node);
     this._removeLive(node, prop);
   }
 
@@ -585,6 +626,78 @@ export class LayerAnimations {
       : null;
   }
 
+  /**
+   * A loop on an inset of `node` as its layer's offsets from where the
+   * layout puts it, `[from, to]` in points — or null where it cannot be
+   * one: not a loop, a node in the flow or one a pointer can land on, an
+   * inset with no declared value to rest at, or a value that is neither a
+   * length nor a percentage. A percentage is a share of the parent's
+   * padding box, which is what the layout places a node out of the flow
+   * in, so the offsets change when the parent's size does (`follow`).
+   */
+  _insetOffsets(node, prop, entry) {
+    const map = INSET_KEY_PATHS[prop];
+    const style = node._targetStyle ?? node.style ?? {};
+    if (!entry.loop || style.position !== 'absolute') return null;
+    if (style.pointerEvents !== 'none') return null;
+    const parent = node.parent;
+    if (!parent?.abs) return null;
+    const edges = resolveBorderWidths(parent.style ?? {}, parent.direction);
+    const room =
+      map.axis === 'x'
+        ? parent.abs.width - edges.left - edges.right
+        : parent.abs.height - edges.top - edges.bottom;
+    const length = (value) => {
+      if (typeof value === 'number')
+        return Number.isFinite(value) ? value : null;
+      const share = typeof value === 'string' ? PERCENT.exec(value) : null;
+      return share ? (Number(share[1]) / 100) * room : null;
+    };
+    const rest = length(style[prop]);
+    const from = length(entry.from);
+    const to = length(entry.to);
+    if (rest === null || from === null || to === null) return null;
+    const sign = map.logical && node.direction === 'rtl' ? -map.sign : map.sign;
+    return [
+      (sign * (from - rest)) / this.scale,
+      (sign * (to - rest)) / this.scale,
+    ];
+  }
+
+  /**
+   * The offsets of a loop moving `node` as the layout has them now: one
+   * whose parent changed size runs again where it has got to in its cycle
+   * (`headStart`), and one that cannot run there any more goes back to the
+   * clock. Before `apply`, which attaches what this hands back.
+   */
+  follow(node, layer) {
+    const live = this.live.get(node);
+    if (!live) return;
+    for (const [id, run] of [...live]) {
+      if (!run.offsets) continue;
+      const offsets = this._insetOffsets(node, run.prop, run.entry);
+      if (
+        offsets &&
+        offsets[0] === run.offsets[0] &&
+        offsets[1] === run.offsets[1]
+      ) {
+        continue;
+      }
+      live.delete(id);
+      this._ends().delete(id);
+      this.native.removeAnimation(layer, run.key);
+      if (!offsets) {
+        node._offloadEnded(run.prop, run.entry);
+        continue;
+      }
+      run.entry.headStart = animationNow() - run.entry.start;
+      let pending = this.pending.get(node);
+      if (!pending) this.pending.set(node, (pending = new Map()));
+      pending.set(run.prop, run.entry);
+    }
+    if (live.size === 0) this.live.delete(node);
+  }
+
   /** The frame's half: attach what `take` accepted to `layer`, after the
    *  model value went out, inside the same transaction. */
   apply(node, layer) {
@@ -592,23 +705,43 @@ export class LayerAnimations {
     if (!pending) return;
     this.pending.delete(node);
     for (const [prop, entry] of pending) {
-      const map = ANIMATED_KEY_PATHS[prop];
+      const map = ANIMATED_KEY_PATHS[prop] ?? INSET_KEY_PATHS[prop];
       const id = `rx${++animationSeq}`;
       const key = `${prop}:${id}`;
       const opts = { duration: entry.duration / 1000, id };
+      let offsets = null;
+      if (map.axis) {
+        // an inset: the layer's offset from where the layout put it, added
+        // to its position — as the layout has the parent now, which may not
+        // be what it was at the swap
+        offsets = this._insetOffsets(node, prop, entry);
+        if (!offsets) {
+          node._offloadDeclined(prop, entry);
+          continue;
+        }
+      }
       if (entry.loop) {
         // a loop replaces whatever ran for the property: its declaration
         // changed, and a loop restarts from the top when it does
         this._removeLive(node, prop);
-        opts.from = this._value(map, entry.from);
-        opts.to = this._value(map, entry.to);
+        if (offsets) {
+          [opts.from, opts.to] = offsets;
+          opts.additive = true;
+        } else {
+          opts.from = this._value(map, entry.from);
+          opts.to = this._value(map, entry.to);
+        }
         opts.timing = EASING_CONTROL_POINTS[entry.easing];
         opts.repeat = Infinity;
         opts.autoreverse = entry.alternate;
         // CA's two halves of one CSS delay: a begin time the layer waits
-        // for showing `from`, or a time offset that starts it that far in
-        if (entry.delay > 0) opts.delay = entry.delay / 1000;
-        else if (entry.delay < 0) opts.timeOffset = -entry.delay / 1000;
+        // for showing `from`, or a time offset that starts it that far in.
+        // A loop the clock has been running comes over where it has got to
+        // (`headStart`, nodes/animation.js `_offerLoopsAgain`), which is
+        // the same delay that much shorter.
+        const wait = (entry.delay ?? 0) - (entry.headStart ?? 0);
+        if (wait > 0) opts.delay = wait / 1000;
+        else if (wait < 0) opts.timeOffset = -wait / 1000;
       } else if (map.colour) {
         // From where the pixels are — which is what "an interrupted
         // transition reverses from where it got to" means here. A colour
@@ -636,7 +769,7 @@ export class LayerAnimations {
       // looked up after the removals above, which may have pruned the map
       let live = this.live.get(node);
       if (!live) this.live.set(node, (live = new Map()));
-      live.set(id, { prop, key, entry });
+      live.set(id, { prop, key, entry, offsets });
       this._ends().set(id, (ev) => this._animationEnded(node, id, ev));
     }
   }
@@ -983,7 +1116,9 @@ export class CocoaLayerPresenter {
     visual.set(
       propBoxProps(node, this.window.app, this.scale, parentOrigin, order),
     );
-    // after the model value went out, inside the same transaction
+    // after the model value went out, inside the same transaction: what
+    // moves the node, as the layout has its parent now, then what waits
+    this.animations.follow(node, visual.layer);
     this.animations.apply(node, visual.layer);
   }