react-x11 2.29.0 → 2.31.0

package/README.md

@@ -256,7 +256,7 @@ drawn tree. See [docs/elements.md](docs/elements.md) for the full reference.
 | `<text>`      | shaped, wrapped text (bidi, ligatures, font fallback); nested `<text>` elements are style spans                                                                                                    |
 | `<textinput>` | single-line editor: caret/selection, clipboard, word select, undo/redo, right-click menu                                                                                                           |
 | `<textarea>`  | the same editor, wrapped and multi-line, scrolling with its content                                                                                                                                |
-| `<image>`     | PNG/JPEG from `src`, natural-size aware; also pixels the server already has                                                                                                                        |
+| `<image>`     | PNG/JPEG/WebP from `src` (more formats under Bun), natural-size aware; also pixels the server already has                                                                                          |
 | `<canvas>`    | escape hatch: `onDraw={(ctx, {width, height}) => …}` with a canvas-like 2d context (XRender-backed on X11, CoreGraphics on Cocoa)                                                                  |
 | `<svg>`       | static SVG (paths, shapes, gradients, transforms), sized like `<image>`                                                                                                                            |
 | `<glarea>`    | an OpenGL surface in the layout — see [3D](#3d)                                                                                                                                                    |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.29.0",
+  "version": "2.31.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -102,6 +102,7 @@
   },
   "dependencies": {
     "ical.js": "^2.2.1",
+    "image-in-browser": "^3.6.0",
     "linebreak": "^1.1.0",
     "ntk": "^8.17.8",
     "react-reconciler": "^0.34.0",

package/src/cocoa/app.js

@@ -34,7 +34,7 @@ import { CocoaCalendars } from './calendar.js';
 import { CocoaNotifications } from './notifications.js';
 import { CocoaPaneHost } from './panehost.js';
 import { CocoaPermissions } from './permissions.js';
-import { CocoaPaneWindow } from './panewindow.js';
+import { CocoaPaneSubwindow, CocoaPaneWindow } from './panewindow.js';
 import { CocoaColorSampler } from './screencolor.js';
 import { CocoaFilePanels } from './filepanels.js';
 import { CocoaFontManager } from './fonts.js';
@@ -331,6 +331,11 @@ export class CocoaApp {
     // composites (REACT_X11_FRAME is what the Frame host sets on the fork).
     this._paneMode = options.pane ?? process.env.REACT_X11_FRAME === '1';
     this._paneSend = null;
+    // the pane's own window, the one the host lays out and forwards to
+    this._paneWindow = null;
+    // What the pane's other windows said before the host was listening
+    // (`_postWindow`), until its first pane-rect.
+    this._paneOutbox = [];
 
     // The X stub: just enough for the modules that carry an X escape hatch
     // to no-op the way they do against the headless mock.
@@ -447,7 +452,18 @@ export class CocoaApp {
     // shared IOSurfaces and the HOST composites them (src/cocoa/
     // panewindow.js). Chosen by the same prop the X11 pane uses.
     if (this._paneMode && attributes.embeddable) {
-      return new CocoaPaneWindow(this, attributes);
+      const wnd = new CocoaPaneWindow(this, attributes);
+      if (!this._paneWindow || this._paneWindow.destroyed) {
+        this._paneWindow = wnd;
+      }
+      return wnd;
+    }
+    // Any other window a pane makes — a menu, a tooltip, a dialog — is
+    // drawn here and shown by the host, which has the NSApplication this
+    // process does not (#824). An NSWindow made here exists and is never on
+    // glass.
+    if (this._paneMode && !attributes.parent) {
+      return new CocoaPaneSubwindow(this, attributes);
     }
     if (attributes.parent) {
       // A parented "window" here is a GL child surface — GlAreaNode's
@@ -487,10 +503,88 @@ export class CocoaApp {
   /**
    * The Frame host seam (src/frame/index.js): a pane's composited region
    * in this window. Its presence is what routes <Frame> to the shared-
-   * memory pane path instead of the X foreign-window embed.
+   * memory pane path instead of the X foreign-window embed. `send` is the
+   * pane's channel, for the windows the pane makes besides its own: a pane
+   * process runs no AppKit, so they are made here (src/cocoa/panehost.js).
    */
-  createPaneHost(wnd) {
-    return new CocoaPaneHost(this, wnd);
+  createPaneHost(wnd, { send } = {}) {
+    return new CocoaPaneHost(this, wnd, { send });
+  }
+
+  /**
+   * Whether this backend drops a control's menu as the platform's own — a
+   * bridge with `popUpMenu` (@windowkit/appkit 0.20) — rather than a drawn
+   * `<popup>` sized as one. What `<Select>` asks before it opens.
+   */
+  get nativePopUpMenus() {
+    return typeof this._native?.popUpMenu === 'function';
+  }
+
+  /**
+   * The platform's own menu, dropped from a control in one of this app's
+   * windows as an NSPopUpButton's drops: the item `spec.selected` placed
+   * over `spec.frame` and checked, the menu at least the frame's width.
+   * `spec` is the bridge's (`items`, `selected`, `fontSize`, `fontFamily`,
+   * `appearance`, `rtl`) with `frame` in the window's device pixels, which
+   * every rect on this side is. `onAnswer(id | null)` hears the item chosen,
+   * or null for a menu dismissed, once; the frame that answer causes goes
+   * out with it. Returns a function that cancels the menu.
+   *
+   * Opened on a microtask, after the input that asked for it has been
+   * answered and painted: in pump mode the menu's tracking holds this thread
+   * from the call to the choice, and the press that opened it should be on
+   * glass before it does. From a worker the call returns at once.
+   *
+   * A pane has no NSWindow to drop it from, so in a pane the host does,
+   * over the pane's place in its window (`CocoaPaneHost.popUpMenu`).
+   */
+  popUpMenu(wnd, spec, onAnswer) {
+    let answered = false;
+    const answer = (id) => {
+      if (answered) return;
+      answered = true;
+      onAnswer(id ?? null);
+      this._afterInput();
+    };
+    if (this._paneMode) return this._paneMenu(wnd, spec, answer);
+    let cancelled = false;
+    let handle = null;
+    queueMicrotask(() => {
+      if (cancelled || this._closed || !wnd || wnd.destroyed) {
+        answer(null);
+        return;
+      }
+      const s = wnd.scale ?? this.scale;
+      handle = this._native.popUpMenu(
+        wnd._h,
+        { ...spec, frame: spec.frame.map((v) => v / s) },
+        (id) => answer(id),
+      );
+    });
+    return () => {
+      if (answered) return;
+      cancelled = true;
+      if (handle) this._native.cancelPopUpMenu?.(handle);
+    };
+  }
+
+  /** A pane's menu, asked of the host: `pane-menu` with the frame in the
+   *  window it is in, `pane-menu-answer` back. */
+  _paneMenu(wnd, spec, answer) {
+    const menu = (this._paneMenuSeq = (this._paneMenuSeq ?? 0) + 1);
+    (this._paneMenus ??= new Map()).set(menu, answer);
+    this._paneSend?.({
+      type: 'pane-menu',
+      menu,
+      // the pane's own window is the one the host knows as the pane
+      ...(wnd && wnd !== this._paneWindow && { window: wnd.windowId }),
+      spec,
+    });
+    return () => {
+      if (this._paneMenus?.has(menu)) {
+        this._paneSend?.({ type: 'pane-menu-cancel', menu });
+      }
+    };
   }
 
   /**
@@ -780,18 +874,72 @@ export class CocoaApp {
       }
     };
     channel.onMessage((msg) => {
-      const wnd = [...this._windows.values()][0];
-      if (!wnd) return;
+      const pane = this._paneWindow ?? [...this._windows.values()][0];
+      if (!pane) return;
       if (msg?.type === 'pane-rect') {
-        wnd.setPaneSize(msg.width, msg.height, msg.scale);
+        pane.setPaneSize(msg.width, msg.height, msg.scale, msg.screen);
+        this._flushPaneOutbox();
         this._afterInput();
+      } else if (msg?.type === 'pane-menu-answer') {
+        const answer = this._paneMenus?.get(msg.menu);
+        this._paneMenus?.delete(msg.menu);
+        answer?.(msg.id ?? null);
       } else if (msg?.type === 'pane-event') {
-        wnd.emit(msg.name, msg.ev);
+        // input on one of the windows the host shows for this pane names
+        // it; the pane's own is the one that names none
+        const wnd = msg.window != null ? this._windows.get(msg.window) : pane;
+        if (!wnd || wnd.destroyed) return;
+        if (msg.name === 'resize') wnd._hostGeometry?.(msg.ev);
+        // a close request answers with `preventDefault`, which did not
+        // survive the channel
+        else if (msg.name === 'close')
+          wnd.emit('close', { ...msg.ev, preventDefault() {} });
+        else wnd.emit(msg.name, msg.ev);
         this._afterInput();
       }
     });
   }
 
+  /**
+   * A message about one of the pane's other windows (`CocoaPaneSubwindow`),
+   * held until the host's first pane-rect. The host hears a pane's messages
+   * from the moment it has a `<Frame>`, and knows what to do with these
+   * only once the pane is laid out in it — a menu or a dialog open in the
+   * pane's first commit was made, and announced to nobody. That pane-rect
+   * is also where the pane learns where it is on the screen, so a popup
+   * anchored before it is placed again before anyone shows it.
+   */
+  _postWindow(msg) {
+    if (this._paneOutbox) this._paneOutbox.push(msg);
+    else this._paneSend?.(msg);
+  }
+
+  /**
+   * The host is listening, and the pane knows where it is — `setPaneSize`
+   * has just moved what is anchored to it. Everything held goes out in
+   * order, but a window is announced where it is now: a held move or resize
+   * is where it was before, and sent in order it came after a present the
+   * host showed at the old place.
+   */
+  _flushPaneOutbox() {
+    const held = this._paneOutbox;
+    if (!held) return;
+    this._paneOutbox = null;
+    for (const msg of held) {
+      if (msg.type === 'pane-window') {
+        if (msg.op === 'move' || msg.op === 'resize') continue;
+        const wnd = msg.op === 'create' && this._windows.get(msg.window);
+        if (wnd) {
+          msg.x = wnd.x;
+          msg.y = wnd.y;
+          msg.width = wnd.width;
+          msg.height = wnd.height;
+        }
+      }
+      this._paneSend(msg);
+    }
+  }
+
   _unregisterWindow(wnd) {
     this._windows.delete(wnd._key);
     if (this._grabWindow === wnd) this._grabWindow = null;

package/src/cocoa/panehost.js

@@ -3,9 +3,16 @@
 // contents are whatever IOSurface the pane process last presented. The pane
 // owns its buffers and its drawing; this side owns the layer, the layout
 // and the input — CPU offloading, not isolation (docs/frame.md).
+//
+// And the windows the pane makes besides its own — a menu, a dropdown's
+// sheet, a tooltip, a dialog. A pane process runs no AppKit, so each is an
+// NSWindow made here, showing the ring the pane draws it into the same way
+// (`CocoaPaneSubwindow`, src/cocoa/panewindow.js), with its input sent back.
 import { withoutActions } from './quiet.js';
 
-export class CocoaPaneHost {
+/** 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 {
   constructor(app, wnd) {
     this.app = app;
     this.wnd = wnd;
@@ -67,12 +74,14 @@ export class CocoaPaneHost {
    * error is the bug it says it is.
    */
   present(iosurfaceId) {
-    if (this.destroyed) return;
+    if (this.destroyed) return false;
     try {
       this._native.setLayerContentsIOSurface(this.layer, iosurfaceId);
     } catch (err) {
       if (!/IOSurfaceLookup/.test(err?.message ?? '')) throw err;
+      return false;
     }
+    return true;
   }
 
   destroy() {
@@ -83,3 +92,218 @@ export class CocoaPaneHost {
     );
   }
 }
+
+/**
+ * The input a window shows for the pane hands back, by the names its
+ * events go by (`CocoaApp._route`). A managed window's moves, resizes and
+ * close button go back as well (`_hostGeometry`).
+ */
+const FORWARDED = [
+  'mousedown',
+  'mouseup',
+  'mousemove',
+  'mouseout',
+  'wheel',
+  'keydown',
+  'keyup',
+  'focus',
+  'blur',
+];
+
+/** An event as data: the channel carries structured clones, and a
+ * `preventDefault` does not clone. */
+function plain(ev) {
+  const out = {};
+  for (const key in ev) {
+    const value = ev[key];
+    if (value === null || typeof value !== 'object') {
+      if (typeof value !== 'function') out[key] = value;
+    }
+  }
+  return out;
+}
+
+export class CocoaPaneHost extends PaneLayer {
+  /**
+   * `send` is the pane's channel (`<Frame>`'s session): what the windows
+   * shown here for the pane hear goes back down it.
+   */
+  constructor(app, wnd, { send } = {}) {
+    super(app, wnd);
+    this._send = send ?? null;
+    /** @type {Map<number, object>} the pane's windows, by its id for them */
+    this._windows = new Map();
+    /** @type {Map<number, () => void>} the pane's open menus, by its id */
+    this._menus = new Map();
+  }
+
+  /**
+   * A `pane-menu` message: the pane's `<Select>` asked for the platform's
+   * menu, which a process with no AppKit cannot drop (`CocoaApp.popUpMenu`).
+   * Its frame is in the window it is in — the pane's own, laid out at this
+   * layer's rect in the host's window, or one the pane made, shown here —
+   * and the answer goes back as `pane-menu-answer`.
+   */
+  popUpMenu(msg) {
+    if (this.destroyed || !msg.spec) return;
+    const entry = msg.window != null ? this._windows.get(msg.window) : null;
+    const [x, y, width, height] = msg.spec.frame;
+    const at = entry ? { x: 0, y: 0 } : (this._rect ?? { x: 0, y: 0 });
+    const cancel = this.app.popUpMenu(
+      entry ? entry.wnd : this.wnd,
+      { ...msg.spec, frame: [x + at.x, y + at.y, width, height] },
+      (id) => {
+        this._menus.delete(msg.menu);
+        this._send?.({ type: 'pane-menu-answer', menu: msg.menu, id });
+      },
+    );
+    this._menus.set(msg.menu, cancel);
+  }
+
+  /** `pane-menu-cancel`: the pane's `<Select>` went, or closed it. */
+  cancelMenu(menu) {
+    this._menus.get(menu)?.();
+  }
+
+  /**
+   * A `pane-window` message: one of the pane's other windows was made,
+   * mapped, moved, grabbed with or destroyed. `x`/`y` are the screen
+   * position the pane worked out — its anchoring ran against the origin
+   * this side sent it — so the window goes where it says.
+   */
+  paneWindow(msg) {
+    if (this.destroyed) return;
+    if (msg.op === 'create') {
+      this._create(msg);
+      return;
+    }
+    const entry = this._windows.get(msg.window);
+    if (!entry) return;
+    const { wnd } = entry;
+    switch (msg.op) {
+      case 'map':
+        // on the first frame rather than now: a window mapped before the
+        // pane has drawn it is a window of nothing, for a frame or two
+        if (entry.presented) wnd.map();
+        else entry.mapOnPresent = true;
+        break;
+      case 'unmap':
+        entry.mapOnPresent = false;
+        wnd.unmap();
+        break;
+      case 'move':
+        wnd.move(msg.x, msg.y);
+        break;
+      case 'resize':
+        // the layer follows on the present drawn at the new size
+        wnd.resize(msg.width, msg.height);
+        break;
+      case 'grab':
+        wnd.grabPointer();
+        break;
+      case 'ungrab':
+        wnd.ungrabPointer();
+        break;
+      case 'title':
+        wnd.setTitle(msg.title);
+        break;
+      case 'size-hints':
+        wnd.setSizeHints(msg.hints);
+        break;
+      case 'destroy':
+        this._drop(entry);
+        break;
+      default:
+        break;
+    }
+  }
+
+  /** A pane-present naming one of the pane's other windows. */
+  presentWindow(msg) {
+    const entry = this._windows.get(msg.window);
+    if (!entry || this.destroyed) return;
+    entry.layer.setRect({ x: 0, y: 0, width: msg.width, height: msg.height });
+    if (!entry.layer.present(msg.id)) return;
+    entry.presented = true;
+    // a transparent window's shadow is the shape of what it shows
+    entry.wnd._shadowAfterFlip?.();
+    if (entry.mapOnPresent) {
+      entry.mapOnPresent = false;
+      entry.wnd.map();
+    }
+  }
+
+  /** The cursor a tree names for one of the pane's other windows: the
+   * pointer is over the window shown here, so this side sets it. */
+  windowCursor(msg) {
+    this._windows.get(msg.window)?.wnd.setCursor(msg.cursor ?? 'default');
+  }
+
+  _create(msg) {
+    if (this._windows.has(msg.window)) return;
+    const wnd = this.app.createWindow({
+      overrideRedirect: msg.popup,
+      x: msg.x,
+      y: msg.y,
+      width: msg.width,
+      height: msg.height,
+      transparent: msg.transparent,
+      grabKeyboard: msg.grabKeyboard,
+      dragPreview: msg.dragPreview,
+      title: msg.title,
+      decorations: msg.decorations,
+      resizable: msg.resizable,
+      sizeHints: msg.sizeHints,
+    });
+    const entry = {
+      id: msg.window,
+      wnd,
+      layer: new PaneLayer(this.app, wnd),
+      presented: false,
+      mapOnPresent: false,
+    };
+    this._windows.set(msg.window, entry);
+    const forward = (name, ev) => {
+      if (this.destroyed || entry.dropped) return;
+      this._send?.({ type: 'pane-event', window: entry.id, name, ev });
+    };
+    for (const name of FORWARDED) {
+      wnd.on(name, (ev) => forward(name, plain(ev)));
+    }
+    // A popup goes where the pane puts it and no one else moves it. A
+    // managed window is the user's to move, resize and close as well, and
+    // the pane hears of each — of a resize only the user's, since the
+    // pane's own come back as AppKit's echo of the frame it was asked for.
+    if (!msg.popup) {
+      wnd.on('resize', (ev) =>
+        forward('resize', {
+          x: ev.x,
+          y: ev.y,
+          width: ev.width,
+          height: ev.height,
+          resized: Boolean(ev.resized && wnd.liveResizing),
+        }),
+      );
+      wnd.on('close', () => forward('close', {}));
+    }
+  }
+
+  _drop(entry) {
+    if (entry.dropped) return;
+    entry.dropped = true;
+    this._windows.delete(entry.id);
+    entry.wnd.ungrabPointer();
+    entry.layer.destroy();
+    entry.wnd.destroy();
+  }
+
+  /** The pane is going, and every window it had here goes with it — a pane
+   * that crashed with a menu open leaves no menu behind. */
+  destroy() {
+    if (this.destroyed) return;
+    for (const cancel of [...this._menus.values()]) cancel();
+    this._menus.clear();
+    for (const entry of [...this._windows.values()]) this._drop(entry);
+    super.destroy();
+  }
+}