react-x11 2.2.0 → 2.3.0

package/src/events.js

@@ -733,7 +733,16 @@ export class EventManager {
    * way somewhere rather than one, and React must be free to interrupt the
    * render it started for the notch before.
    */
-  _onWheel(native) {
+  /**
+   * @param {object} native ntk's wheel event, in this window's coordinates
+   * @param {object} [over] the node the wheel happened over, when the caller
+   *   already knows. A `<glarea>` owns its own X window, so the server
+   *   delivers the event *there* and the surface hands it back translated
+   *   (src/glnodes.js) — and a hit test would answer with the box behind it,
+   *   because a window-owning child is not in its parent's paint order.
+   *   Knowing beats guessing; everything after this line is the same.
+   */
+  _onWheel(native, over = null) {
     // The first wheel is what says this window wants smooth scrolling. It was
     // created on core events — an XI2 selection costs four times as many
     // bytes per *pointer move*, which a window that is never scrolled would
@@ -747,7 +756,7 @@ export class EventManager {
     // outside gets, and for the same reason (`_pressOutside`).
     if (this._dismissOutside(native)) return;
     runWithPriority(ContinuousEventPriority, () => {
-      const target = this._hit(native);
+      const target = over ?? this._hit(native);
       // Shift turns a vertical wheel sideways — the convention for the mouse
       // and the touchpad that have no horizontal axis. Read off the delta
       // rather than off the source: a plain wheel mouse on an XI2 connection

package/src/frame/childmain.js

@@ -233,6 +233,15 @@ export async function runFrameChild(transport, options = {}) {
     return fatal('connect', err);
   }
 
+  // A backend that presents panes over shared memory instead of a server
+  // (the Cocoa one) takes the channel itself: geometry and input in,
+  // presents out. Feature-detected — the X11 pane path has a real window
+  // and a real server and needs none of this.
+  root.app.attachPaneChannel?.({
+    send: (msg) => transport.send(msg),
+    onMessage: (cb) => transport.onMessage(cb),
+  });
+
   let closing = false;
   const close = async () => {
     if (closing) return;

package/src/frame/index.js

@@ -43,6 +43,7 @@ import React, {
   useState,
 } from 'react';
 
+import { useAppOrNull } from '../appcontext.js';
 import { FrameEnv } from './env.js';
 import { CallbackTable, PROTOCOL } from './protocol.js';
 
@@ -220,6 +221,11 @@ export function Frame({
   ref,
 }) {
   const env = useContext(FrameEnv);
+  // A backend that composites panes from shared memory (Cocoa) declares
+  // itself with createPaneHost; everything else embeds the pane's real
+  // window through <foreign>, exactly as before.
+  const appOrNull = useAppOrNull();
+  const paneApp = appOrNull?.createPaneHost ? appOrNull : null;
   const [state, setState] = useState({
     phase: 'starting',
     windowId: null,
@@ -365,9 +371,10 @@ export function Frame({
     // rather than one frame of default before an update lands.
     const { props: p, env: e, bridge: b } = current.current;
     const node = containerRef.current;
+    const sc = node?.scale ?? 1;
     const rect = {
-      width: Math.max(1, Math.round(node?.abs?.width || 0)) || 400,
-      height: Math.max(1, Math.round(node?.abs?.height || 0)) || 300,
+      width: Math.round((node?.abs?.width || 0) / sc) || 400,
+      height: Math.round((node?.abs?.height || 0) / sc) || 300,
     };
     s.sent = { props: p, env: e, bridge: b };
     trySend({
@@ -413,6 +420,23 @@ export function Frame({
   }, [props, env, bridge, generation]);
 
   if (state.phase === 'running') {
+    if (paneApp) {
+      return h(PaneHostView, {
+        containerRef,
+        session,
+        app: paneApp,
+        style,
+        focusable,
+        onEmbedError: (err) => {
+          session.current?.shutdown?.();
+          setState({
+            phase: 'failed',
+            windowId: null,
+            error: Object.assign(err, { phase: 'embed' }),
+          });
+        },
+      });
+    }
     return h('foreign', {
       ref: containerRef,
       windowId: state.windowId,
@@ -442,3 +466,139 @@ export function Frame({
       : null,
   );
 }
+
+/**
+ * The Cocoa pane region: a box for layout, focus and input — hit-tested
+ * here, in the host, and forwarded over the channel — with a backend pane
+ * host object carrying the composited layer. The pane process presents by
+ * message; this view points the layer at each presented buffer.
+ */
+function PaneHostView({
+  containerRef,
+  session,
+  app,
+  style,
+  focusable,
+  onEmbedError,
+}) {
+  // `onEmbedError` is a fresh closure every host render (it captures
+  // setState), and the host ticks its own state many times a second — so it
+  // must not be an effect dependency, or the effect below tears the pane
+  // layer down and rebuilds it on every host render, and the gap between
+  // `host.destroy()` and the next present is a visible full-pane flash. A
+  // ref carries the latest callback into a once-per-session effect.
+  const embedErrorRef = useRef(onEmbedError);
+  embedErrorRef.current = onEmbedError;
+
+  useEffect(() => {
+    const s = session.current;
+    const node = containerRef.current;
+    const wnd = node?.root?.window;
+    if (!s || !node || !wnd) {
+      embedErrorRef.current?.(
+        new Error('the pane region has no window to sit in'),
+      );
+      return undefined;
+    }
+    let host;
+    try {
+      host = app.createPaneHost(wnd);
+    } catch (err) {
+      embedErrorRef.current?.(err);
+      return undefined;
+    }
+    s.paneHost = host;
+
+    // The pane's size is this box's laid-out size, told to the pane whenever
+    // it changes — the same absolutize hook a <foreign> child window uses
+    // (src/foreignnodes.js), because onViewport fires only for scrollers.
+    let sentSize = null;
+    const syncSize = () => {
+      host.setRect(node.abs);
+      const sc = node.scale ?? 1;
+      const width = Math.max(1, Math.round(node.abs.width / sc));
+      const height = Math.max(1, Math.round(node.abs.height / sc));
+      if (sentSize && sentSize.width === width && sentSize.height === height) {
+        return;
+      }
+      sentSize = { width, height };
+      s.trySend?.({ type: 'pane-rect', width, height, scale: sc });
+    };
+    const origAbsolutize = node.absolutize.bind(node);
+    node.absolutize = (ox, oy) => {
+      origAbsolutize(ox, oy);
+      syncSize();
+    };
+    const origShift = node._shiftAbs?.bind(node);
+    if (origShift) {
+      node._shiftAbs = (dx, dy) => {
+        origShift(dx, dy);
+        host.setRect(node.abs);
+      };
+    }
+    if (node.abs?.width) syncSize();
+
+    const off = s.transport.onMessage((msg) => {
+      if (msg?.type === 'pane-present') {
+        host.setRect(node.abs);
+        host.present(msg.id);
+      }
+    });
+    return () => {
+      off();
+      node.absolutize = origAbsolutize;
+      if (origShift) node._shiftAbs = origShift;
+      if (s.paneHost === host) s.paneHost = null;
+      host.destroy();
+    };
+  }, [app, session, containerRef]);
+
+  const forward = (name, data) => (ev) => {
+    const s = session.current;
+    const node = containerRef.current;
+    if (!s || !node) return;
+    const sc = node.scale ?? 1;
+    const payload = {
+      x: Math.max(0, Math.round(ev.x * sc - node.abs.x)),
+      y: Math.max(0, Math.round(ev.y * sc - node.abs.y)),
+      rootx: Math.round(ev.x * sc),
+      rooty: Math.round(ev.y * sc),
+      buttons: ev.buttons ?? 0,
+      time: Date.now(),
+      ...data(ev),
+    };
+    try {
+      s.trySend?.({ type: 'pane-event', name, ev: payload });
+    } catch {
+      // the exit path owns the failure story
+    }
+  };
+
+  return h('box', {
+    ref: containerRef,
+    style,
+    focusable: focusable ?? true,
+    onMouseDown: forward('mousedown', (ev) => ({ keycode: ev.button ?? 1 })),
+    onMouseUp: forward('mouseup', (ev) => ({ keycode: ev.button ?? 1 })),
+    onMouseMove: forward('mousemove', () => ({})),
+    onWheel: forward('wheel', (ev) => ({
+      deltaX: ev.deltaX ?? 0,
+      deltaY: ev.deltaY ?? 0,
+      deltaMode: ev.deltaMode ?? 'line',
+      smooth: Boolean(ev.smooth),
+      source: 'forwarded',
+    })),
+    onKeyDown: forward('keydown', (ev) => ({
+      keysym: ev.keysym,
+      baseKeysym: ev.baseKeysym ?? ev.keysym,
+      codepoint: ev.codepoint,
+      keycode: ev.keycode ?? 0,
+    })),
+    onKeyUp: forward('keyup', (ev) => ({
+      keysym: ev.keysym,
+      baseKeysym: ev.baseKeysym ?? ev.keysym,
+      codepoint: ev.codepoint,
+      keycode: ev.keycode ?? 0,
+    })),
+  });
+}

package/src/glnodes.js

@@ -194,6 +194,21 @@ export class GlAreaNode extends Node {
       // GL draws into the window itself: no 2d backing pixmap, and the
       // frame clock is ours to drive
       backingStore: false,
+      // The wheel, and only the wheel. A GL surface owns a real X window, so
+      // the pointer events over it are delivered *there* rather than to the
+      // window the rest of the tree is hit-tested in — which is why nothing
+      // over a `<glarea>` reached an application before. Selecting it here
+      // and handing it back to the owning window's manager (`_onWheel`
+      // below) is the whole of it: from there the event is an ordinary
+      // synthetic `Wheel` at this node, so it bubbles, `preventDefault()`
+      // takes it back for a scene that zooms instead, and the default action
+      // scrolls the nearest container the way it does anywhere else.
+      //
+      // Selected unconditionally rather than when a handler is declared: the
+      // default action is what a reader expects from a wheel over a page,
+      // and an element that wants it back has `preventDefault()`. One
+      // ButtonPress per notch is not a cost worth a conditional.
+      onWheel: (ev) => this._onWheel(ev),
     });
     this.window = wnd;
     this.rect = rect;
@@ -313,6 +328,34 @@ export class GlAreaNode extends Node {
     if (this.props.frameLoop === 'always') this.requestFrame();
   }
 
+  /**
+   * A wheel over the surface, handed to the window the tree lives in.
+   *
+   * ntk reports the position inside *this* window; the manager hit-tests in
+   * the owning window's space, so the node's own origin goes back on. Both
+   * are device pixels — the scale is applied at the far end, where a handler
+   * reads `ev.x` (src/events.js).
+   *
+   * Smooth deltas are not part of this yet: XI2 is selected on the window
+   * the manager owns, not on this child, so a touchpad's fractions arrive
+   * here as whole notches from buttons 4-7.
+   */
+  _onWheel(native) {
+    const events = this.root?.events;
+    if (!events || this.destroyed) return;
+    events._onWheel(
+      {
+        ...native,
+        x: (native.x ?? 0) + this.abs.x,
+        y: (native.y ?? 0) + this.abs.y,
+      },
+      // named rather than hit-tested: a window-owning child is not in its
+      // parent's paint order, so the hit test would answer with the box
+      // behind this surface
+      this,
+    );
+  }
+
   applyProps(newProps, oldProps) {
     super.applyProps(newProps, oldProps);
     // onDraw/clearColor are read at frame time, so any update is a new frame

package/src/globalmenu.js

@@ -67,6 +67,7 @@ import {
   snapshot,
   IdAllocator,
 } from './dbusmenu.js';
+import { useAppOrNull } from './appcontext.js';
 import { useTopLevelWindow, windowIdOf } from './windowid.js';
 
 export const REGISTRAR_NAME = 'com.canonical.AppMenu.Registrar';
@@ -649,6 +650,7 @@ export function useGlobalMenu(
   { onSelect, onAboutToShow, enabled = true } = {},
 ) {
   const target = useTopLevelWindow();
+  const app = useAppOrNull();
   const [exported, setExported] = useState(false);
   const exportRef = useRef(null);
 
@@ -661,7 +663,7 @@ export function useGlobalMenu(
 
   useEffect(() => {
     if (!enabled) return undefined;
-    const owner = new GlobalMenuExport({
+    const config = {
       getMenus: () => live.current.menus ?? [],
       onSelect: (item) => {
         item.onSelect?.(item);
@@ -670,7 +672,13 @@ export function useGlobalMenu(
       onAboutToShow: (item) => live.current.onAboutToShow?.(item),
       target,
       onChange: setExported,
-    });
+    };
+    // The transport is the backend's where it has one — the Cocoa backend
+    // owns the macOS menu bar and answers immediately — and D-Bus with the
+    // registrar dance everywhere else. Same owner contract either way.
+    const owner = app?.createGlobalMenuExport
+      ? app.createGlobalMenuExport(config)
+      : new GlobalMenuExport(config);
     exportRef.current = owner;
     owner.start().catch(() => {});
     return () => {
@@ -678,7 +686,7 @@ export function useGlobalMenu(
       setExported(false);
       owner.stop().catch(() => {});
     };
-  }, [enabled, target]);
+  }, [enabled, target, app]);
 
   useEffect(() => {
     exportRef.current?.update(menus ?? []);

package/src/index.d.ts

@@ -170,6 +170,16 @@ export interface ErrorInfo {
 }
 
 export interface RootOptions {
+  /**
+   * Which display system a root that opens its own connection talks to.
+   * `'auto'` (the default) uses the native Core Animation backend on macOS
+   * and X11 via `$DISPLAY` everywhere else; on a mac without the
+   * `@windowkit/appkit` bridge installed it falls back to X11. Naming
+   * `'cocoa'` makes the bridge required. `REACT_X11_BACKEND` overrides.
+   * Ignored when {@link RootOptions.app} is passed — a connection already
+   * is a backend.
+   */
+  backend?: 'auto' | 'x11' | 'cocoa';
   /** `':1'`, `'host:0.0'`, or a unix socket path. Defaults to `$DISPLAY`. */
   display?: string;
   /**