react-x11 2.39.0 → 2.41.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,15 @@ 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. Text is
+    // edited the Mac way with it too: ⌥ moves by word, ⌘ to the ends of a
+    // line and the document, ⌃ is Emacs's (src/nodes/textkeys.js).
+    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
@@ -927,8 +936,9 @@ 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 and pane-cursor go out. `players` is the
+   * feature-detected so the X11 pane path never notices): geometry, input
+   * and the host's word that it has looked a present up come in,
+   * pane-present and pane-cursor go out. `players` is the
    * host's word that it plays the pane's `<video src>`s, which makes
    * `createPlayer` here — before the pane's first render, which asks.
    */
@@ -956,7 +966,12 @@ export class CocoaApp {
       }
       const pane = this._paneWindow ?? [...this._windows.values()][0];
       if (!pane) return;
-      if (msg?.type === 'pane-rect') {
+      if (msg?.type === 'pane-shown') {
+        // the host has looked up this window's presents to `seq`, so the
+        // buffers they named may go (`CocoaPaneWindow._releaseRing`)
+        const wnd = msg.window != null ? this._windows.get(msg.window) : pane;
+        wnd?._shown?.(msg.seq);
+      } else if (msg?.type === 'pane-rect') {
         pane.setPaneSize(msg.width, msg.height, msg.scale, msg.screen);
         this._flushPaneOutbox();
         this._afterInput();
@@ -1203,11 +1218,12 @@ export class CocoaApp {
     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
-      // its clock is asked, or the clock would count a frame that did not
-      // run. The release is an event, and the batch it arrives in ticks
+      // mode's fence, `CocoaWindow.frameHeld`), or a pane with no buffer the
+      // host is done with (`CocoaPaneWindow.frameHeld`), waits before its
+      // clock is asked, or the clock would count a frame that did not run.
+      // The release is an event — a batch, a `pane-shown` — and it ticks
       // again.
-      if (entry.wnd?.frameInFlight?.()) {
+      if (entry.wnd?.frameHeld?.()) {
         this._rafQueue.push(entry);
         continue;
       }
@@ -1553,6 +1569,8 @@ export class CocoaApp {
       keysym: decoded.keysym,
       baseKeysym: decoded.baseKeysym,
       codepoint: decoded.codepoint,
+      // more than one character, which no code point carries (keymap.js)
+      text: decoded.text,
       buttons: modifierMask(ev),
       group: 0,
       time: ev.time,

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/keymap.js

@@ -5,8 +5,39 @@
 // have fixed keysyms looked up here by kVK_* virtual key code. NSEvent's
 // three character views map onto the three keysym roles events.js reads:
 //
-//   charsBase    (modifiers stripped)  -> baseKeysym — what chords match
-//   charsShifted (only Shift applied)  -> keysym / codepoint — what was typed
+//   charsBase    (modifiers stripped)        -> baseKeysym — what chords match
+//   chars        (every modifier applied)    -> keysym / codepoint — what was
+//                                               typed, unless ⌘ or ⌃ is held
+//   charsShifted (only Shift applied)        -> keysym / codepoint of a ⌘ or
+//                                               ⌃ chord, which types nothing
+//
+// **⌥ types on a Mac.** It is the layout's third and fourth level: ⌥S is ß on
+// a US keyboard, and on a German one ⌥L is @, ⌥5 [ and ⌥8 { — the only way
+// to type them. `charsShifted` is `charactersIgnoringModifiers`, which drops
+// ⌥ along with everything but Shift, so reading the typed character there
+// made ⌥S type `s` and left a German keyboard no @ at all. `chars` is
+// `characters`, the layout's own answer with ⌥, Shift and Caps Lock applied —
+// Caps Lock is the other thing `charsShifted` leaves out, so a field typed
+// lower case with it on. It is also exactly the DOM's `key` on macOS: ⌥S is
+// `ß`, ⌘S is `s`.
+//
+// There is no input method behind this. The bridge's view swallows
+// `keyDown:` without `interpretKeyEvents:` and is no `NSTextInputClient`
+// (docs/macos.md, "IME"), so these fields are all the text there is. Two
+// consequences, both handled below:
+//
+// - **A dead key types nothing.** ⌥E on a US layout leaves `chars` empty, and
+//   the key it is waiting for decides what the accent becomes. Typing the
+//   key's own letter, which is what reading `charsShifted` did, put an `e` in
+//   the field. Whether the next key's `chars` carries the composed `é` is the
+//   window server's business — an NSEvent built in-process does not carry the
+//   state, and a real keyboard was not measured — so nothing here depends on
+//   it: a composed character is taken as typed, and a plain one is the
+//   accent lost rather than a letter too many.
+// - **A key can type more than one character** — the accent and a letter it
+//   does not combine with, `´s`, where the layout composes. No code point
+//   carries two, so the whole string rides `text` and events.js commits it
+//   the way it commits an input method's text.
 //
 // Function and editing keys type Unicode private-use characters (U+F700…),
 // which must never leak out as code points; the kVK table wins over the
@@ -48,30 +79,56 @@ const VK_KEYSYMS = new Map([
   [111, 0xffc9], // F12
 ]);
 
-const PRIVATE_USE = (cp) => cp >= 0xf700 && cp <= 0xf8ff;
+// The block NSEvent's function-key constants live in (NSUpArrowFunctionKey is
+// U+F700). Not the whole U+F700–U+F8FF range Apple reserves: U+F8FF is the
+// Apple logo, which ⌥⇧K types and the system font draws.
+const FUNCTION_KEY = (cp) => cp >= 0xf700 && cp <= 0xf7ff;
+
+const printable = (cp) => cp != null && cp >= 0x20 && cp !== 0x7f;
 
 function keysymFromChars(chars) {
   if (!chars) return 0;
   const cp = chars.codePointAt(0);
-  if (cp == null || cp < 0x20 || PRIVATE_USE(cp)) return 0;
+  if (!printable(cp) || FUNCTION_KEY(cp)) return 0;
   return keysymOf(String.fromCodePoint(cp));
 }
 
 /**
- * The three key facts events.js reads off a native key event, from the raw
- * @windowkit/appkit payload.
+ * The key facts events.js reads off a native key event, from the raw
+ * @windowkit/appkit payload: `keysym`, `baseKeysym` and `codepoint`, and
+ * `text` when the key typed more than one character.
  */
 export function decodeKey(ev) {
   const fixed = VK_KEYSYMS.get(ev.keyCode);
   if (fixed) {
     return { keysym: fixed, baseKeysym: fixed, codepoint: undefined };
   }
-  const keysym = keysymFromChars(ev.charsShifted);
-  const baseKeysym = keysymFromChars(ev.charsBase) || keysym;
-  const cp = ev.charsShifted?.codePointAt(0);
-  const codepoint =
-    cp != null && cp >= 0x20 && !PRIVATE_USE(cp) ? cp : undefined;
-  return { keysym: keysym || baseKeysym, baseKeysym, codepoint };
+  const baseKeysym =
+    keysymFromChars(ev.charsBase) || keysymFromChars(ev.charsShifted);
+  // A ⌘ or ⌃ chord types nothing, and is named by its key: ⌘⌥S is a chord
+  // on S, not on ß. (`chars` for ⌃S is a control character besides.)
+  // `chars` is absent from a bridge older than the field, and from a test's
+  // event that only says which key it was.
+  const chord = ev.command || ev.control;
+  const typed = chord ? ev.charsShifted : (ev.chars ?? ev.charsShifted);
+  const points = typed ? Array.from(typed) : [];
+  if (points.length > 1) {
+    return {
+      keysym: keysymFromChars(ev.charsShifted) || baseKeysym,
+      baseKeysym,
+      codepoint: undefined,
+      text: typed,
+    };
+  }
+  const keysym = keysymFromChars(typed);
+  const cp = typed?.codePointAt(0);
+  const codepoint = printable(cp) && !FUNCTION_KEY(cp) ? cp : undefined;
+  return {
+    // a dead key typed nothing; the key it sits on is what a chord names
+    keysym: keysym || keysymFromChars(ev.charsShifted) || baseKeysym,
+    baseKeysym,
+    codepoint,
+  };
 }
 
 /** AppKit modifier booleans -> the X-style state mask events carry. */