react-x11 2.13.0 → 2.14.0

package/src/wayland/framestyle.js

@@ -0,0 +1,257 @@
+// What the desktop says a window frame looks like and does — the part of it
+// a client-side frame needs: which buttons go where, the title's font, and
+// what a click on the titlebar means.
+//
+// GTK reads these from GSettings; anything else reads the same keys through
+// the settings portal, which serves the `org.gnome.desktop.*` schemas beside
+// the four standard appearance values (src/appearance.js reads those, and
+// the frame takes its light or dark from there). The keys, with GNOME's
+// defaults:
+//
+//   org.gnome.desktop.wm.preferences
+//     button-layout                  'appmenu:close'     left:right, comma lists
+//     action-double-click-titlebar   'toggle-maximize'
+//     action-middle-click-titlebar   'none'
+//     action-right-click-titlebar    'menu'
+//   org.gnome.desktop.interface
+//     font-name                      'Adwaita Sans 11'   a Pango description
+//     text-scaling-factor            1.0
+//
+// The title is drawn in the *interface* font, bold, because that is what a
+// libadwaita headerbar does: measured against one on a desktop whose
+// `font-name` is 'Sans 23', its title's cap height is a 23pt DejaVu Sans
+// Bold's. `titlebar-font` is for frames the window manager draws (Xwayland
+// windows); a client frame that used it would not match the GTK apps beside
+// it.
+//
+// Where there is no portal — another desktop, a test — the defaults stand.
+// They are GNOME's, so a frame drawn to them is the frame GTK would draw.
+
+import { EventEmitter } from 'node:events';
+import { sessionBus } from '../bus.js';
+import { desktopIntegrationEnabled } from '../desktopintegration.js';
+
+const PORTAL_NAME = 'org.freedesktop.portal.Desktop';
+const PORTAL_PATH = '/org/freedesktop/portal/desktop';
+const SETTINGS_IFACE = 'org.freedesktop.portal.Settings';
+const WM = 'org.gnome.desktop.wm.preferences';
+const IFACE = 'org.gnome.desktop.interface';
+const NAMESPACES = [WM, IFACE];
+
+export const DEFAULTS = Object.freeze({
+  buttonLayout: 'appmenu:close',
+  fontName: 'Adwaita Sans 11',
+  textScaling: 1,
+  doubleClick: 'toggle-maximize',
+  middleClick: 'none',
+  rightClick: 'menu',
+});
+
+/** The buttons a client frame can draw; `appmenu`, `icon`, `spacer` have
+ * nothing to show here and are dropped. */
+const BUTTONS = new Set(['close', 'minimize', 'maximize']);
+
+/**
+ * `'icon,menu:minimize,maximize,close'` → `{ left: [], right: ['minimize',
+ * 'maximize', 'close'] }`. A layout with no colon is all on the left, as in
+ * GTK; a button named twice is drawn once, where it first appears.
+ */
+export function parseButtonLayout(value) {
+  const [left = '', right = ''] = String(value ?? '').split(':');
+  const seen = new Set();
+  const side = (list) =>
+    list
+      .split(',')
+      .map((b) => b.trim())
+      .filter((b) => {
+        if (!BUTTONS.has(b) || seen.has(b)) return false;
+        seen.add(b);
+        return true;
+      });
+  return { left: side(left), right: side(right) };
+}
+
+const WEIGHTS = {
+  thin: 100,
+  ultralight: 200,
+  'ultra-light': 200,
+  extralight: 200,
+  'extra-light': 200,
+  light: 300,
+  semilight: 350,
+  'semi-light': 350,
+  book: 380,
+  regular: 400,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  'semi-bold': 600,
+  demibold: 600,
+  'demi-bold': 600,
+  bold: 700,
+  ultrabold: 800,
+  'ultra-bold': 800,
+  extrabold: 800,
+  'extra-bold': 800,
+  heavy: 900,
+  black: 900,
+};
+const STYLE_WORDS = new Set([
+  'italic',
+  'oblique',
+  'roman',
+  'small-caps',
+  'condensed',
+  'semi-condensed',
+  'extra-condensed',
+  'ultra-condensed',
+  'expanded',
+  'semi-expanded',
+  'extra-expanded',
+  'ultra-expanded',
+]);
+
+/**
+ * A Pango font description — `"Adwaita Sans Bold 11"`, `"Sans 23"`,
+ * `"DejaVu Sans Condensed Italic 12px"` — as `{ family, size, unit, weight,
+ * italic }`. Style words are read off the end until one is not a style
+ * word; what remains is the family (the first of a comma list).
+ */
+export function parseFontName(value) {
+  const words = String(value ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean);
+  let size = null;
+  let unit = 'pt';
+  const last = words.at(-1);
+  if (last && /^\d+(\.\d+)?(px)?$/i.test(last)) {
+    if (/px$/i.test(last)) unit = 'px';
+    size = parseFloat(last);
+    words.pop();
+  }
+  let weight = 400;
+  let italic = false;
+  while (words.length > 1) {
+    const w = words.at(-1).toLowerCase();
+    if (Object.hasOwn(WEIGHTS, w)) weight = WEIGHTS[w];
+    else if (STYLE_WORDS.has(w)) {
+      if (w === 'italic' || w === 'oblique') italic = true;
+    } else break;
+    words.pop();
+  }
+  const family = words.join(' ').split(',')[0].trim() || 'sans-serif';
+  return { family, size: size ?? 11, unit, weight, italic };
+}
+
+/** The title's font: the interface font, bold, at 96dpi times the scaling
+ * factor — in logical pixels. */
+export function titleFont(style = DEFAULTS) {
+  const f = parseFontName(style.fontName);
+  const scaling = Number(style.textScaling) > 0 ? Number(style.textScaling) : 1;
+  const px = (f.unit === 'px' ? f.size : (f.size * 96) / 72) * scaling;
+  return { family: f.family, size: px, weight: 700 };
+}
+
+/** The two namespaces `ReadAll` answered, as a frame style. */
+export function fromPortal(all) {
+  const wm = all?.[WM] ?? {};
+  const iface = all?.[IFACE] ?? {};
+  const str = (v, d) => (typeof v === 'string' && v ? v : d);
+  const num = (v, d) => (typeof v === 'number' && v > 0 ? v : d);
+  return Object.freeze({
+    buttonLayout: str(wm['button-layout'], DEFAULTS.buttonLayout),
+    fontName: str(iface['font-name'], DEFAULTS.fontName),
+    textScaling: num(iface['text-scaling-factor'], DEFAULTS.textScaling),
+    doubleClick: str(wm['action-double-click-titlebar'], DEFAULTS.doubleClick),
+    middleClick: str(wm['action-middle-click-titlebar'], DEFAULTS.middleClick),
+    rightClick: str(wm['action-right-click-titlebar'], DEFAULTS.rightClick),
+  });
+}
+
+/**
+ * The desktop's frame style, followed: `value` is always usable (the
+ * defaults until the portal answers), and 'change' fires when it moves.
+ */
+export class FrameStyle extends EventEmitter {
+  constructor() {
+    super();
+    this.value = DEFAULTS;
+    /** 'portal' once the portal answered; 'defaults' until then, or for good */
+    this.source = 'defaults';
+    this._stop = null;
+  }
+
+  /**
+   * Read once and subscribe. Never throws: no portal means the defaults.
+   * The order is appearance.js's, for its reasons — the match rule and the
+   * handler go on before the read, so a change landing mid-read is caught,
+   * and reads are sequenced so an older answer never overwrites a newer one.
+   * The bus ref is released at the end: the subscription outlives it, and
+   * holding it would keep the process alive for as long as the frame cared
+   * what the desktop said.
+   */
+  async start() {
+    if (!desktopIntegrationEnabled()) return this;
+    let ref = null;
+    try {
+      ref = await sessionBus();
+    } catch {
+      return this;
+    }
+    if (!ref) return this;
+    let sub = null;
+    try {
+      sub = await ref.bus.watch(
+        `type='signal',sender='${PORTAL_NAME}',` +
+          `interface='${SETTINGS_IFACE}',member='SettingChanged'`,
+      );
+      let started = 0;
+      let published = 0;
+      const bus = ref.bus;
+      const refresh = async () => {
+        const mine = ++started;
+        const all = await bus.invoke(
+          {
+            destination: PORTAL_NAME,
+            path: PORTAL_PATH,
+            interface: SETTINGS_IFACE,
+            member: 'ReadAll',
+            signature: 'as',
+            body: [NAMESPACES],
+          },
+          { timeout: 5_000 },
+        );
+        if (!all || mine <= published) return;
+        published = mine;
+        this.value = fromPortal(all);
+        this.source = 'portal';
+        this.emit('change', this.value);
+      };
+      const key = bus.mangle(PORTAL_PATH, SETTINGS_IFACE, 'SettingChanged');
+      const onSignal = ([namespace]) => {
+        if (!NAMESPACES.includes(namespace)) return;
+        refresh().catch(() => {
+          // the portal went away mid-session; the last answer stands
+        });
+      };
+      bus.signals.on(key, onSignal);
+      const subscription = sub;
+      this._stop = () => {
+        bus.signals.off?.(key, onSignal);
+        subscription?.remove().catch(() => {});
+      };
+      await refresh();
+    } catch {
+      await sub?.remove().catch(() => {});
+    } finally {
+      await ref.release();
+    }
+    return this;
+  }
+
+  stop() {
+    this._stop?.();
+    this._stop = null;
+  }
+}

package/src/wayland/glarea.js

@@ -0,0 +1,371 @@
+// `<glarea>` on the Wayland backend: a viewport into the window's backing
+// target, not a window of its own.
+//
+// On X11 a `<glarea>` is a child window — a separate drawable the X server
+// stacks above the parent's drawing — and on the Cocoa backend a sublayer
+// the WindowServer composites. Neither exists here. A Wayland client owns
+// one buffer per surface, and a subsurface would be a second swapchain, a
+// second frame clock and a second dma-buf import per frame for what is, on
+// this backend, already one GL context drawing into one target. So the
+// surface is a *rectangle of the backing target*: `makeCurrent()` binds the
+// window's target with the viewport and scissor set to the area's rect, the
+// app's GL calls land inside it, and `SwapBuffers()` is the note that the
+// rect changed. The frame loop orders it — the tree's 2D paint is flushed
+// under it, the area draws over, and the panes its children were painted
+// on are composited over that (backendwindow.js `_runSurfaces`).
+//
+// What `GlAreaNode` (src/glnodes.js) needs is the child-"window" contract:
+// `createWindow({ parent, … })` answering an object with
+// `getContext('opengl', config)`, `setState(rect)`, `map()`, `destroy()`,
+// `requestAnimationFrame`; and from the context `backend`, `ready`,
+// `makeCurrent`, `SwapBuffers`, `canRender`, `onFrameAvailable`, plus the
+// WebGL-shaped GL table itself. The table is the shared one, prototype-
+// delegated as src/cocoa/glarea.js does it, with the entry points that name
+// framebuffer coordinates — `viewport`, `scissor`, `bindFramebuffer`, and
+// the scissor switch — re-based on the rect, so a scene written for a
+// window of its own draws in its corner of ours.
+//
+// Two coordinate systems, as everywhere in this backend: the rect is in the
+// window's content device pixels, y down; GL's viewport and scissor are in
+// the target's pixels from the bottom-left. The content origin (the frame's
+// insets) is added and y is flipped once, here, in `place()`.
+//
+// The pane (`WaylandOverlayPane`) is the other half of the same idea. The
+// children of a `<glarea>` are 2D content drawn *above* its frames
+// (src/gloverlay.js); on a backend that composites, one pane covers the
+// surface and the backend blends it over the GL. Here a pane is an offscreen
+// target the tree paints into during its flush, and the window draws it over
+// the surface with `drawImage` once the surface has drawn — so a translucent
+// legend, an antialiased edge or a shadow blends with the GL frame under it,
+// as on the Cocoa backend and unlike X11's opaque child windows.
+
+import { GLTarget } from './target.js';
+import { WaylandContext2D } from './context2d.js';
+
+/**
+ * The `visual` `chooseGLConfig` answers with. `GlAreaNode` passes the config's
+ * visual and depth straight back to `createWindow`, which is how the app
+ * tells a `<glarea>`'s child "window" apart from a real one.
+ */
+export const GLAREA_VISUAL = 'wayland:glarea';
+
+export class WaylandGLArea {
+  /**
+   * @param {import('./backendwindow.js').WaylandBackendWindow} parent
+   * @param {{x?:number,y?:number,width?:number,height?:number}} options
+   */
+  constructor(parent, options = {}) {
+    this.parent = parent;
+    this.app = parent.app;
+    this.destroyed = false;
+    this.mapped = false;
+    this._reactX11Node = null;
+    this._context = null;
+    this._listeners = new Map();
+    /** set by `SwapBuffers` for the frame it happened in */
+    this.drewThisFrame = false;
+    this.rect = {
+      x: options.x ?? 0,
+      y: options.y ?? 0,
+      width: Math.max(1, options.width ?? 1),
+      height: Math.max(1, options.height ?? 1),
+    };
+    parent._surfaces.add(this);
+  }
+
+  get width() {
+    return this.rect.width;
+  }
+
+  get height() {
+    return this.rect.height;
+  }
+
+  /** Geometry in content device pixels, the unit `GlAreaNode`'s rects are in. */
+  setState(rect) {
+    if (this.destroyed) return this;
+    this.rect = {
+      x: rect.x ?? this.rect.x,
+      y: rect.y ?? this.rect.y,
+      width: Math.max(1, rect.width ?? this.rect.width),
+      height: Math.max(1, rect.height ?? this.rect.height),
+    };
+    return this;
+  }
+
+  move(x, y) {
+    return this.setState({ x, y });
+  }
+
+  resize(width, height) {
+    return this.setState({ width, height });
+  }
+
+  map() {
+    this.mapped = true;
+    return this;
+  }
+
+  unmap() {
+    this.mapped = false;
+    return this;
+  }
+
+  on(name, fn) {
+    let set = this._listeners.get(name);
+    if (!set) this._listeners.set(name, (set = new Set()));
+    set.add(fn);
+    return this;
+  }
+
+  off(name, fn) {
+    this._listeners.get(name)?.delete(fn);
+    return this;
+  }
+
+  emit(name, ev) {
+    for (const fn of this._listeners.get(name) ?? []) fn(ev);
+  }
+
+  /**
+   * The area's frame is a part of its window's: the callback runs after the
+   * tree's paint, in the same frame, so what it draws goes over the 2D and
+   * out with the same present.
+   */
+  requestAnimationFrame(fn) {
+    return this.parent.requestSurfaceFrame(fn);
+  }
+
+  getContext(kind, config) {
+    if (this.destroyed) return null;
+    if (kind !== 'opengl' && kind !== 'gles' && kind !== 'webgl') return null;
+    if (!this._context) this._context = createGLAreaContext(this, config);
+    return this._context;
+  }
+
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this._context?._destroy();
+    this._context = null;
+    this.parent._surfaces.delete(this);
+  }
+}
+
+/**
+ * The `gl` a `<glarea>`'s `onDraw` receives: the shared WebGL-shaped table,
+ * with this area's rect behind the entry points that would otherwise name
+ * the whole target.
+ */
+function createGLAreaContext(area, config) {
+  const parent = area.parent;
+  const gl = parent.glctx.gl;
+  const ctx = Object.create(gl);
+  let destroyed = false;
+  // the rect in the target's GL coordinates, as of the last makeCurrent
+  let bx = 0;
+  let by = 0;
+  let bw = 1;
+  let bh = 1;
+
+  const place = () => {
+    const o = parent.contentOrigin;
+    const r = area.rect;
+    const H = parent.glctx.backing?.height ?? 0;
+    bx = o.x + r.x;
+    bw = r.width;
+    bh = r.height;
+    by = H - (o.y + r.y + r.height);
+  };
+
+  ctx.backend = 'direct';
+  ctx.config = config;
+  ctx.glVersion = parent.glctx.glVersion;
+  ctx.ready = Promise.resolve();
+  ctx.onFrameAvailable = null;
+  // No swapchain of its own to be held up by: the frame it draws in is the
+  // window's, and the window's frame loop only runs it when there is one.
+  ctx.canRender = () => !destroyed && !parent._destroyed;
+
+  ctx.makeCurrent = () => {
+    if (destroyed || parent._destroyed) return;
+    parent.app.makeCurrent();
+    parent.glctx.bindBacking();
+    place();
+    // The scissor is what keeps a `clear()` inside the rect. It stays on for
+    // the whole draw: `disable(SCISSOR_TEST)` below re-asserts it.
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(bx, by, bw, bh);
+    gl.viewport(bx, by, bw, bh);
+  };
+
+  ctx.viewport = (x, y, w, h) => gl.viewport(bx + x, by + y, w, h);
+
+  // A scissor of the scene's own is cut to the rect: nothing it asks for
+  // can reach outside, and `(0, 0, width, height)` is the whole of it.
+  ctx.scissor = (x, y, w, h) => {
+    const x0 = Math.max(bx, bx + x);
+    const y0 = Math.max(by, by + y);
+    const x1 = Math.min(bx + bw, bx + x + w);
+    const y1 = Math.min(by + bh, by + y + h);
+    gl.scissor(x0, y0, Math.max(0, x1 - x0), Math.max(0, y1 - y0));
+  };
+
+  ctx.disable = (cap) => {
+    if (cap === gl.SCISSOR_TEST) {
+      gl.scissor(bx, by, bw, bh);
+      return;
+    }
+    gl.disable(cap);
+  };
+
+  // WebGL's "null means the default framebuffer" — and this surface's
+  // default is the window's backing target, not GL's framebuffer zero,
+  // which here is the swapchain buffer the 2D never draws into. A scene
+  // that renders through its own FBO and unbinds at the end lands back on
+  // the window (the SSAA pattern, the shadow-map pattern).
+  ctx.bindFramebuffer = (target, fb) => {
+    gl.bindFramebuffer(
+      target,
+      fb == null ? (parent.glctx.backing?.fbo ?? null) : fb,
+    );
+  };
+
+  // The frame is in the target already; what a swap means here is "this
+  // rect changed", for the present's damage and for the panes to be drawn
+  // over it again.
+  ctx.SwapBuffers = () => {
+    if (destroyed) return;
+    area.drewThisFrame = true;
+    parent._surfaceDrew(area);
+  };
+
+  ctx._destroy = () => {
+    destroyed = true;
+  };
+  // `GlAreaNode.destroySubtree` calls `gl.destroy?.()` before the window's
+  ctx.destroy = ctx._destroy;
+
+  return ctx;
+}
+
+/**
+ * The pane a `<glarea>`'s children are drawn on: an offscreen target with a
+ * 2d context of its own, painted by the tree inside the window's flush and
+ * blended over the surface by the window's frame loop.
+ *
+ * It speaks the verbs the overlay drives (src/gloverlay.js `Pane`):
+ * `setState`, `map`, `unmap`, `getContext`, `present`, `destroy`. The
+ * context is handed out *inside a frame* — `begin()` has been called — so
+ * the overlay can draw at once, as it does on the other backends where a
+ * context has no frame; `present()` closes that frame and opens the next.
+ */
+export class WaylandOverlayPane {
+  /**
+   * @param {import('./app.js').WaylandApp} app
+   * @param {{parent:object,x?:number,y?:number,width?:number,height?:number}} options
+   */
+  constructor(app, options) {
+    this.app = app;
+    this.parent = options.parent;
+    this.destroyed = false;
+    this.hidden = false;
+    /** something has been painted on it: before that there is nothing to composite */
+    this.presented = false;
+    this.rect = {
+      x: options.x ?? 0,
+      y: options.y ?? 0,
+      width: Math.max(1, options.width ?? 1),
+      height: Math.max(1, options.height ?? 1),
+    };
+    this.target = null;
+    this._ctx = null;
+    this.parent._panes.add(this);
+  }
+
+  get width() {
+    return this.rect.width;
+  }
+
+  get height() {
+    return this.rect.height;
+  }
+
+  /** Geometry in content device pixels. A new size is a new (cleared) target
+   * and the overlay repaints it whole (`Pane.place` says so). */
+  setState(rect) {
+    if (this.destroyed) return this;
+    const resized =
+      rect.width !== this.rect.width || rect.height !== this.rect.height;
+    this.rect = { ...rect };
+    if (resized && this.target) {
+      this.app.makeCurrent();
+      this.target.resize(this.rect.width, this.rect.height);
+      this.presented = false;
+      this._ctx?.begin(this.target.width, this.target.height);
+      this.app.rebindWindowTarget();
+    }
+    return this;
+  }
+
+  map() {
+    this.hidden = false;
+    return this;
+  }
+
+  unmap() {
+    this.hidden = true;
+    return this;
+  }
+
+  /** `Pane` listens for 'draw' — pixels lost to a resize. A target's are
+   * lost too, and `Pane.place` already repaints whole on a size change. */
+  on() {
+    return this;
+  }
+
+  getContext(kind = '2d') {
+    if (kind !== '2d' || this.destroyed) return null;
+    if (!this._ctx) {
+      this.app.makeCurrent();
+      this.target = new GLTarget(this.app.gl, {
+        width: this.rect.width,
+        height: this.rect.height,
+        stencil: true,
+      });
+      this._ctx = new WaylandContext2D(this.app.gl, {
+        fontManager: this.app.fonts,
+        target: this.target,
+      });
+      this._ctx.init();
+      this._ctx.begin(this.target.width, this.target.height);
+      // the window's own context is mid-frame; its target goes back
+      this.app.rebindWindowTarget();
+    }
+    return this._ctx;
+  }
+
+  /** What was painted is complete; the window blends it over the surface
+   * in this frame. The next paint finds the context open again. */
+  present() {
+    if (this.destroyed || !this._ctx) return;
+    this.app.makeCurrent();
+    this._ctx.end();
+    this.presented = true;
+    this.parent._paneDrew(this);
+    this._ctx.begin(this.target.width, this.target.height);
+    this.app.rebindWindowTarget();
+  }
+
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.parent._panes.delete(this);
+    this.app.makeCurrent();
+    this._ctx?.destroy();
+    this._ctx = null;
+    this.target?.destroy();
+    this.target = null;
+    this.app.rebindWindowTarget();
+  }
+}