react-x11 2.38.0 → 2.40.0

package/src/backend/filter.js

@@ -0,0 +1,285 @@
+// `filter` on the native 2d context: canvas's own property, a CSS
+// `<filter-value-list>` (Filter Effects 1), and what this context makes of
+// it — the colour functions, each a matrix over straight RGB with an
+// offset that leaves alpha as it is, and `opacity()`, which scales alpha.
+//
+// They are the functions the context can apply to everything it draws.
+// Each leaves alpha alone, so on premultiplied colour each is a linear map
+// that commutes with source-over: a fill, a stroke, a gradient's stops, a
+// glyph run's ink and a symbol's colour are filtered by filtering the colour
+// they are drawn in, exactly. An image and a surface are filtered pixel by
+// pixel, and a text layout that carries colours of its own on a surface of
+// its own (src/backend/context2d.js). `blur()`, `drop-shadow()` and a
+// `url()` reach past what is drawn, which a colour cannot say; this context
+// does not apply them, so a list with one in it does not stick, and a
+// caller knows from reading the property back.
+
+/** A function's amount where none is written: all of the effect for the
+ *  ones whose argument is how much of it to take, and none for the others
+ *  (Filter Effects 1, 13). */
+const AMOUNTS = {
+  grayscale: 1,
+  sepia: 1,
+  invert: 1,
+  opacity: 1,
+  saturate: 1,
+  brightness: 1,
+  contrast: 1,
+};
+
+/** The functions this context applies; any other leaves a list unapplied. */
+const COLOUR = new Set([...Object.keys(AMOUNTS), 'hue-rotate']);
+
+const ANGLE_UNITS = {
+  deg: 1,
+  grad: 0.9,
+  rad: 180 / Math.PI,
+  turn: 360,
+};
+
+/**
+ * A filter list as this context applies it: `{ matrices, alpha }`, the
+ * colour matrices in the order written, each over straight RGB in 0–1 with
+ * an offset — none for a function that changes no colour — and what alpha
+ * is multiplied by. Null for `none`; undefined for what is no filter list,
+ * or one with a function this context does not apply.
+ */
+export function parseCanvasFilter(value) {
+  const text = String(value).trim();
+  if (text.toLowerCase() === 'none') return null;
+  const matrices = [];
+  let alpha = 1;
+  let rest = text;
+  let seen = 0;
+  while (rest.length) {
+    const m = /^([a-z-]+)\(([^()]*)\)\s*/i.exec(rest);
+    if (!m) return undefined;
+    rest = rest.slice(m[0].length);
+    seen += 1;
+    const name = m[1].toLowerCase();
+    if (!COLOUR.has(name)) return undefined;
+    const arg = m[2].trim();
+    if (name === 'hue-rotate') {
+      const angle = arg ? angleOf(arg) : 0;
+      if (angle === null) return undefined;
+      const matrix = hueRotate(angle);
+      if (matrix) matrices.push(matrix);
+      continue;
+    }
+    const amount = arg ? amountOf(arg) : AMOUNTS[name];
+    if (amount === null || amount < 0) return undefined;
+    if (name === 'opacity') {
+      alpha *= Math.min(1, amount);
+      continue;
+    }
+    const matrix = matrixOf(name, amount);
+    if (matrix) matrices.push(matrix);
+  }
+  if (!seen) return undefined;
+  return { matrices, alpha };
+}
+
+/** Whether a parsed filter changes anything drawn. */
+export function filters(filter) {
+  return !!filter && (filter.matrices.length > 0 || filter.alpha < 1);
+}
+
+/** A number or a percentage of one. */
+function amountOf(arg) {
+  const m = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(%?)$/i.exec(arg);
+  if (!m) return null;
+  const n = Number(m[1]);
+  if (!Number.isFinite(n)) return null;
+  return m[2] ? n / 100 : n;
+}
+
+/** An angle in degrees; a bare 0 is one. */
+function angleOf(arg) {
+  const m = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)([a-z]*)$/i.exec(arg);
+  if (!m) return null;
+  const n = Number(m[1]);
+  const unit = m[2].toLowerCase();
+  if (!unit) return n === 0 ? 0 : null;
+  const scale = ANGLE_UNITS[unit];
+  return scale === undefined ? null : n * scale;
+}
+
+const unit = (a) => (a < 0 ? 0 : a > 1 ? 1 : a);
+
+/** Three rows of red, green and blue weights and an offset, 0–1. */
+function rows(r, g, b) {
+  return Float64Array.of(...r, ...g, ...b);
+}
+
+/** `feComponentTransfer`'s `linear`: each channel times a slope, plus an
+ *  intercept. */
+function linear(slope, intercept) {
+  return Float64Array.of(
+    slope,
+    0,
+    0,
+    intercept,
+    0,
+    slope,
+    0,
+    intercept,
+    0,
+    0,
+    slope,
+    intercept,
+  );
+}
+
+/** One function's matrix (Filter Effects 1, 13); null where it changes no
+ *  colour. */
+function matrixOf(name, amount) {
+  switch (name) {
+    case 'grayscale': {
+      const a = unit(amount);
+      if (a === 0) return null;
+      const k = 1 - a;
+      return rows(
+        [0.2126 + 0.7874 * k, 0.7152 - 0.7152 * k, 0.0722 - 0.0722 * k, 0],
+        [0.2126 - 0.2126 * k, 0.7152 + 0.2848 * k, 0.0722 - 0.0722 * k, 0],
+        [0.2126 - 0.2126 * k, 0.7152 - 0.7152 * k, 0.0722 + 0.9278 * k, 0],
+      );
+    }
+    case 'sepia': {
+      const a = unit(amount);
+      if (a === 0) return null;
+      const k = 1 - a;
+      return rows(
+        [0.393 + 0.607 * k, 0.769 - 0.769 * k, 0.189 - 0.189 * k, 0],
+        [0.349 - 0.349 * k, 0.686 + 0.314 * k, 0.168 - 0.168 * k, 0],
+        [0.272 - 0.272 * k, 0.534 - 0.534 * k, 0.131 + 0.869 * k, 0],
+      );
+    }
+    case 'saturate': {
+      const s = amount;
+      if (s === 1) return null;
+      return rows(
+        [0.213 + 0.787 * s, 0.715 - 0.715 * s, 0.072 - 0.072 * s, 0],
+        [0.213 - 0.213 * s, 0.715 + 0.285 * s, 0.072 - 0.072 * s, 0],
+        [0.213 - 0.213 * s, 0.715 - 0.715 * s, 0.072 + 0.928 * s, 0],
+      );
+    }
+    case 'brightness':
+      return amount === 1 ? null : linear(amount, 0);
+    case 'contrast':
+      return amount === 1 ? null : linear(amount, 0.5 - 0.5 * amount);
+    case 'invert': {
+      const a = unit(amount);
+      return a === 0 ? null : linear(1 - 2 * a, a);
+    }
+  }
+  return null;
+}
+
+function hueRotate(degrees) {
+  if (degrees % 360 === 0) return null;
+  const t = (degrees * Math.PI) / 180;
+  const c = Math.cos(t);
+  const s = Math.sin(t);
+  return rows(
+    [
+      0.213 + c * 0.787 - s * 0.213,
+      0.715 - c * 0.715 - s * 0.715,
+      0.072 - c * 0.072 + s * 0.928,
+      0,
+    ],
+    [
+      0.213 - c * 0.213 + s * 0.143,
+      0.715 + c * 0.285 + s * 0.14,
+      0.072 - c * 0.072 - s * 0.283,
+      0,
+    ],
+    [
+      0.213 - c * 0.213 - s * 0.787,
+      0.715 - c * 0.715 + s * 0.715,
+      0.072 + c * 0.928 + s * 0.072,
+      0,
+    ],
+  );
+}
+
+/** A straight `[r, g, b, a]`, 0–1, through the filter: each function's
+ *  result clamped before the next, as each one's is. */
+export function filterColour([r, g, b, a], filter) {
+  for (const m of filter.matrices) {
+    const r1 = m[0] * r + m[1] * g + m[2] * b + m[3];
+    const g1 = m[4] * r + m[5] * g + m[6] * b + m[7];
+    const b1 = m[8] * r + m[9] * g + m[10] * b + m[11];
+    r = unit(r1);
+    g = unit(g1);
+    b = unit(b1);
+  }
+  return [r, g, b, a * filter.alpha];
+}
+
+/** A gradient's stops, flat as `[offset, r, g, b, a, …]`, through the
+ *  filter: interpolating straight colours commutes with a matrix over them,
+ *  but for what a clamp cuts off between two stops. */
+export function filterStops(flat, filter) {
+  const out = flat.slice();
+  for (let i = 0; i + 4 < out.length; i += 5) {
+    const [r, g, b, a] = filterColour(
+      [out[i + 1], out[i + 2], out[i + 3], out[i + 4]],
+      filter,
+    );
+    out[i + 1] = r;
+    out[i + 2] = g;
+    out[i + 3] = b;
+    out[i + 4] = a;
+  }
+  return out;
+}
+
+/**
+ * Straight RGBA pixels, 0–255, through the filter, `src` into `dst` — the
+ * two may be one. A pixel with no alpha keeps none: its colour is no
+ * colour.
+ */
+export function filterPixels(src, dst, filter) {
+  const { matrices } = filter;
+  const fade = filter.alpha;
+  const one = matrices.length === 1 ? matrices[0] : null;
+  for (let i = 0; i < src.length; i += 4) {
+    const a = src[i + 3];
+    if (a === 0) {
+      dst[i] = 0;
+      dst[i + 1] = 0;
+      dst[i + 2] = 0;
+      dst[i + 3] = 0;
+      continue;
+    }
+    let r = src[i];
+    let g = src[i + 1];
+    let b = src[i + 2];
+    if (one) {
+      const m = one;
+      const r1 = m[0] * r + m[1] * g + m[2] * b + m[3] * 255;
+      const g1 = m[4] * r + m[5] * g + m[6] * b + m[7] * 255;
+      const b1 = m[8] * r + m[9] * g + m[10] * b + m[11] * 255;
+      r = r1;
+      g = g1;
+      b = b1;
+    } else {
+      for (const m of matrices) {
+        const r1 = m[0] * r + m[1] * g + m[2] * b + m[3] * 255;
+        const g1 = m[4] * r + m[5] * g + m[6] * b + m[7] * 255;
+        const b1 = m[8] * r + m[9] * g + m[10] * b + m[11] * 255;
+        r = r1 < 0 ? 0 : r1 > 255 ? 255 : r1;
+        g = g1 < 0 ? 0 : g1 > 255 ? 255 : g1;
+        b = b1 < 0 ? 0 : b1 > 255 ? 255 : b1;
+      }
+    }
+    dst[i] = clampByte(r);
+    dst[i + 1] = clampByte(g);
+    dst[i + 2] = clampByte(b);
+    dst[i + 3] = fade === 1 ? a : clampByte(a * fade);
+  }
+}
+
+function clampByte(v) {
+  return v <= 0 ? 0 : v >= 255 ? 255 : Math.round(v);
+}

package/src/cocoa/app.js

@@ -286,6 +286,13 @@ export class CocoaApp {
     // X11's, where every toolkit hovers in a window without the keyboard.
     this.hoverNeedsActiveWindow = true;
 
+    // Shortcuts are pressed with ⌘ here (src/keysyms.js `primaryModifier`):
+    // the text controls' Undo/Cut/Copy/Paste/Select All answer ⌘ rather
+    // than ⌃, and the edit menu prints them the way a Mac menu does. The
+    // menu bar already read a chord's `Control` as ⌘ (cocoa/globalmenu.js);
+    // this is the same rule for everything else that reads one.
+    this.primaryModifier = 'Super';
+
     // AppKit-rendered control bezels. Its *presence* is the capability:
     // `useSupports('nativeControls')` and the widget set's `controls:
     // 'auto'` policy both test for this property, so a backend without it

package/src/cocoa/globalmenu.js

@@ -35,6 +35,9 @@ const FLAG_COMMAND = 1 << 20;
  * user presses. Multi-chord sequences and non-character keys have no
  * NSMenu spelling and are dropped (the shortcut still works — the app's
  * own key handling is untouched; only the menu's hint goes unshown).
+ *
+ * `named` is the modifiers the chord itself asked for, before the ⌘ a bare
+ * key is given so that NSMenu has something to show.
  */
 function keyEquivalent(shortcut) {
   const chord = Array.isArray(shortcut) ? shortcut[0] : null;
@@ -48,7 +51,26 @@ function keyEquivalent(shortcut) {
     else key = part;
   }
   if (typeof key !== 'string' || [...key].length !== 1) return null;
-  return { key: key.toLowerCase(), modifiers: modifiers || FLAG_COMMAND };
+  return {
+    key: key.toLowerCase(),
+    modifiers: modifiers || FLAG_COMMAND,
+    named: modifiers,
+  };
+}
+
+/**
+ * Does the menu bar answer this `shortcut` itself, on the chord the app
+ * wrote? The ones it holds as a key equivalent that carries ⌘ because the
+ * chord said `Control` or `Super`: AppKit offers a ⌘ key to the main menu's
+ * `performKeyEquivalent:` inside `[NSApp sendEvent:]`, so the item fires
+ * with no help from us. A bare key padded out to ⌘ is not one — the chord
+ * names the bare key, and the window still answers that.
+ *
+ * The bridge shows JS every key before AppKit sees it, so a `MenuBar` that
+ * matched these too would run the item twice (`useMenuAccelerators`).
+ */
+export function answersShortcut(shortcut) {
+  return Boolean(keyEquivalent(shortcut)?.named & FLAG_COMMAND);
 }
 
 /**
@@ -117,6 +139,15 @@ export class CocoaGlobalMenuExport {
     if (this.app._activeGlobalMenu === this) this._install();
   }
 
+  /**
+   * The delegate's half of the key: the shortcuts the menu bar answers on
+   * its own, which the window must then leave alone (`answersShortcut`).
+   * The D-Bus export has no such method, because a panel delivers no keys.
+   */
+  answersShortcut(shortcut) {
+    return answersShortcut(shortcut);
+  }
+
   _install() {
     this.app._native.setMainMenu(this._spec());
   }

package/src/cocoa/panehost.js

@@ -12,9 +12,25 @@
 // And the players its `<video src>`s ask for, which a process with no
 // AppKit would never hear from: each is a player here, its events and its
 // frames sent back (`HostedPlayer`, src/cocoa/paneplayer.js).
+import { now } from '../nodes/animation.js';
 import { HostedPlayer } from './paneplayer.js';
 import { withoutActions } from './quiet.js';
 
+/** The live-resize handshake's budget when the app names none
+ *  (`RESIZE_WAIT_MS`, src/cocoa/app.js). */
+const RESIZE_WAIT_MS = 50;
+
+/** How many sizes asked of the pane are remembered until a frame of one
+ *  answers them (`_asked`): a drag asks one a frame. */
+const ASKED_KEPT = 16;
+
+/** How long after the last size asked a new one starts a gesture of its
+ *  own, which finds the pane keeping up until it shows otherwise: a pane
+ *  whose layout at a width it was not dragged to took long — a long page
+ *  laid out whole, as the first step of a drag is — keeps up with the
+ *  drag itself. */
+const GESTURE_GAP_MS = 500;
+
 /** One shared surface on glass: a sublayer of a window's root layer, its
  * contents the IOSurface the pane last presented into it. */
 class PaneLayer {
@@ -29,6 +45,82 @@ class PaneLayer {
     });
     this.destroyed = false;
     this._rect = null;
+    // How the frame the layer holds sits in it while one of the size the
+    // layer was just given is on its way (`_gravityNow`): the gravity set,
+    // Core Animation's own until one is, the sizes asked of the pane with
+    // when each was asked, and whether the pane has fallen behind them.
+    this._gravity = 'resize';
+    this._contentsScale = null;
+    this._asked = [];
+    this._askedAt = null;
+    this._behind = false;
+  }
+
+  /**
+   * The gravity a pane's last frame sits in its layer by, until a frame of
+   * the layer's new size lands. The host gives the layer its new size the
+   * moment the window lays out, and the pane's frame of that size comes a
+   * pane frame later: Core Animation's default, `resize`, stretches the
+   * frame it has to the new bounds meanwhile, and a page's left column was
+   * drawn scaled a little at every step of a window dragged wider, and then
+   * at its size again. A pane that keeps up has its frame anchored at the
+   * top left instead, at its size, what it does not cover yet showing the
+   * window under it for a pane frame; one that falls behind the budget is
+   * stretched, which is the better picture for the long wait — a pane
+   * repainting at three frames a second shows a squeezed page, not a page
+   * and a growing strip. The budget is the window's live-resize handshake's
+   * (`createRoot({ cocoa: { resizeWait } })`), how long a frame of a new
+   * size may take before the old one is shown in its place: 0 stretches
+   * always, as before. A bridge that predates `contentsGravity` ignores it,
+   * and stretches.
+   */
+  _gravityNow() {
+    const budget = this.app._resizeWait ?? RESIZE_WAIT_MS;
+    if (!(budget > 0)) return 'resize';
+    // a size asked longer ago than the budget, and no frame of it yet
+    const oldest = this._asked[0];
+    if (oldest && now() - oldest.at > budget) this._behind = true;
+    return this._behind ? 'resize' : 'topLeft';
+  }
+
+  /** The props that set the gravity, where it changed. */
+  _gravityProps() {
+    const gravity = this._gravityNow();
+    if (gravity === this._gravity) return null;
+    this._gravity = gravity;
+    // a frame anchored and larger than the layer would hang out of it
+    return { contentsGravity: gravity, masksToBounds: gravity !== 'resize' };
+  }
+
+  /**
+   * The props that say how many of the pane's pixels make a point of the
+   * layer, where that changed: the window's scale, which the pane draws
+   * at. A frame stretched to the bounds never asked, and one anchored at
+   * its size is shown at it — pixels over `contentsScale` points, so at
+   * the default of 1 a page at 2x came out twice its size.
+   */
+  _scaleProps() {
+    const scale = this.wnd.scale ?? 1;
+    if (scale === this._contentsScale) return null;
+    this._contentsScale = scale;
+    return { contentsScale: scale };
+  }
+
+  /** A frame of `width` by `height` device px landed: what it answers of
+   *  the sizes asked, and how long it took. */
+  _answered(width, height) {
+    const asked = this._asked;
+    // the pane rounds the logical size it was sent back to device pixels
+    const slack = Math.max(2, this.wnd.scale ?? 1);
+    const at = asked.findIndex(
+      (a) =>
+        Math.abs(a.width - width) <= slack &&
+        Math.abs(a.height - height) <= slack,
+    );
+    if (at < 0) return;
+    this._behind =
+      now() - asked[at].at > (this.app._resizeWait ?? RESIZE_WAIT_MS);
+    asked.splice(0, at + 1);
   }
 
   /** Geometry in device px, the node's abs — points at the layer. */
@@ -46,6 +138,17 @@ class PaneLayer {
       return;
     }
     this._rect = { ...rect };
+    // a size the pane is asked for, answered by the first frame of it
+    if (prev && (prev.width !== rect.width || prev.height !== rect.height)) {
+      const at = now();
+      if (at - (this._askedAt ?? -Infinity) >= GESTURE_GAP_MS) {
+        this._asked = [];
+        this._behind = false;
+      }
+      this._askedAt = at;
+      if (this._asked.length === ASKED_KEPT) this._asked.shift();
+      this._asked.push({ width: rect.width, height: rect.height, at });
+    }
     // Actions off: the layer is ours, not a presenter's, so no frame's
     // transaction covers it, and a bare set tweens the pane into place at
     // mount and after every resize — the trap CocoaGLArea._setLayerProps
@@ -57,6 +160,8 @@ class PaneLayer {
         frame: [rect.x / s, rect.y / s, rect.width / s, rect.height / s],
         zPosition: 1e7,
         hidden: false,
+        ...this._scaleProps(),
+        ...this._gravityProps(),
       });
     } finally {
       native.txCommit();
@@ -78,7 +183,7 @@ class PaneLayer {
    * already holds a reference to. Nothing else here throws; any other
    * error is the bug it says it is.
    */
-  present(iosurfaceId) {
+  present(iosurfaceId, size = null) {
     if (this.destroyed) return false;
     try {
       this._native.setLayerContentsIOSurface(this.layer, iosurfaceId);
@@ -86,6 +191,17 @@ class PaneLayer {
       if (!/IOSurfaceLookup/.test(err?.message ?? '')) throw err;
       return false;
     }
+    // how long the pane took to a frame of a size it was asked for, which
+    // is what the gravity follows (`_gravityNow`)
+    if (size) {
+      this._answered(size.width, size.height);
+      const gravity = this._gravityProps();
+      if (gravity) {
+        withoutActions(this._native, () =>
+          this._native.setLayerProps(this.layer, gravity),
+        );
+      }
+    }
     return true;
   }