react-x11 2.18.3 → 2.18.5

package/src/win32/app.js

@@ -16,6 +16,8 @@ import { setScreensForTests } from '../screens.js';
 import { createBezels } from './bezels.js';
 import { Win32InputMethod } from './ime.js';
 import { decodeKey, modifierMask } from './keymap.js';
+import { refuseOverlay } from '../gloverlay.js';
+import { Win32OverlayPane } from './overlay.js';
 import { Win32PaneHost } from './panehost.js';
 import { Win32PaneWindow } from './panewindow.js';
 import { Win32Surface } from './surface.js';
@@ -80,6 +82,8 @@ export class Win32App {
     // an in-app drop reads to keep `e.items` by reference (src/dnd.js).
     this._activeDrag = null;
     this._rafQueue = [];
+    /** Windows holding input for the next frame (`Win32Window._queueInput`). */
+    this._inputHeld = new Set();
     this._frameTimer = null;
     /** A frame has been asked for and not yet delivered — one outstanding
      *  request at a time, whether the clock or the timer is answering it. */
@@ -118,6 +122,7 @@ export class Win32App {
     this.nativeBezels = null;
 
     this.fonts = new Win32FontManager(native);
+    this._installOverlay();
 
     const screens = native.listScreens?.() ?? [];
     const primary = screens[0] ?? {
@@ -275,10 +280,19 @@ export class Win32App {
    * A copy of the set is walked because `onDismiss` is what unmounts the
    * popup, and unmounting runs `ungrabPointer` — which deletes from the set
    * this loop would otherwise still be reading.
+   *
+   * `open` is the popups to judge — for a press, the ones that were open
+   * *before* it (`_route`). The press is delivered first, and a press that
+   * opens a menu — a `<Select>`, a menu button — opens it and takes its
+   * grab synchronously, in the same dispatch; judged afterwards, the new
+   * menu heard the press that opened it as a press outside itself and
+   * closed at once. Every `<Select>` did that. An X11 grab taken during a
+   * press does not see that press either.
    */
-  _dismissOutsidePopups(pressed) {
+  _dismissOutsidePopups(pressed, open = null) {
     if (this._dismissOnOutside.size === 0) return;
-    for (const wnd of [...this._dismissOnOutside]) {
+    for (const wnd of open ?? [...this._dismissOnOutside]) {
+      if (!this._dismissOnOutside.has(wnd)) continue;
       if (wnd === pressed) continue;
       if (wnd.destroyed) {
         this._dismissOnOutside.delete(wnd);
@@ -367,6 +381,29 @@ export class Win32App {
     return new Win32PaneHost(this, wnd);
   }
 
+  /**
+   * The pane a `<glarea>`'s children are drawn on (src/gloverlay.js): a
+   * composited layer above the window's swap chains, where the children's
+   * transparent pixels show the GL frame (src/win32/overlay.js). Having this
+   * at all is how the overlay knows it composites — and the X11 fallback it
+   * would otherwise reach for, a plain child window, is a GL surface here.
+   * Installed in the constructor where the bridge has layers.
+   */
+  _installOverlay() {
+    if (typeof this._native.layerCreate === 'function') {
+      this.createOverlayPane = (attributes) =>
+        new Win32OverlayPane(this, attributes);
+      return;
+    }
+    refuseOverlay(
+      this,
+      "this @windowkit/win32 predates layers, which are what a <glarea>'s " +
+        'children are drawn on here, and a child window on this backend is ' +
+        'a GL surface of its own. Update the bridge, or draw the overlay ' +
+        'beside the surface',
+    );
+  }
+
   /**
    * The pane process's end of the frame channel: geometry and input in,
    * presents out. Feature-detected by the pane bootstrap
@@ -421,7 +458,18 @@ export class Win32App {
 
   _requestFrame(cb, wnd = null) {
     this._rafQueue.push({ cb, wnd });
-    if (this._framePending || this._closed) return this._rafQueue.length;
+    this._armFrame();
+    return this._rafQueue.length;
+  }
+
+  /** A window is holding input for the next frame: there has to be one. */
+  _holdInput(wnd) {
+    this._inputHeld.add(wnd);
+    this._armFrame();
+  }
+
+  _armFrame() {
+    if (this._framePending || this._closed) return;
     this._framePending = true;
     // One tick, from the compositor if this Windows has a clock to wait on.
     // It answers false when it has not, and then — and only then — a timer.
@@ -434,7 +482,7 @@ export class Win32App {
         this._tickFrames();
       }, CLOCK_WATCHDOG_MS);
       this._frameTimer.unref?.();
-      return this._rafQueue.length;
+      return;
     }
     this._frameTimer = setTimeout(() => {
       this._frameTimer = null;
@@ -442,10 +490,24 @@ export class Win32App {
       this._tickFrames();
     }, FRAME_INTERVAL_MS);
     this._frameTimer.unref?.();
-    return this._rafQueue.length;
   }
 
   _tickFrames() {
+    // The input held for this frame goes first: what it changes is what the
+    // frame paints, and the frames its handlers ask for are this one —
+    // the callbacks are taken after it.
+    if (this._inputHeld.size !== 0) {
+      const held = [...this._inputHeld];
+      this._inputHeld.clear();
+      for (const wnd of held) {
+        if (wnd.destroyed) continue;
+        try {
+          wnd._flushInput();
+        } catch (err) {
+          if (process.env.NODE_ENV !== 'production') console.error(err);
+        }
+      }
+    }
     const due = this._rafQueue;
     this._rafQueue = [];
     const now = performance.now();
@@ -515,6 +577,11 @@ export class Win32App {
 
     const wnd = this._windows.get(event.id);
     if (!wnd) return;
+    // Whatever this is happened after the motion and the wheel the window is
+    // holding for its next frame, so they go first (`_queueInput`).
+    if (event.type !== 'mousemove' && event.type !== 'wheel') {
+      wnd._flushInput?.();
+    }
     switch (event.type) {
       case 'window-ready':
         wnd._onReady(event.a, event.b);
@@ -533,7 +600,7 @@ export class Win32App {
         break;
       }
       case 'mousemove':
-        wnd.emit('mousemove', {
+        wnd._queueInput('mousemove', {
           x: event.a,
           y: event.b,
           ...rootOf(wnd, event),
@@ -545,7 +612,7 @@ export class Win32App {
       case 'wheel': {
         const deltaX = event.c;
         const deltaY = event.d;
-        wnd.emit('wheel', {
+        wnd._queueInput('wheel', {
           name: 'wheel',
           x: event.a,
           y: event.b,
@@ -564,7 +631,13 @@ export class Win32App {
         break;
       }
       case 'mousedown':
-      case 'mouseup':
+      case 'mouseup': {
+        // the menus this press may close: those open before it (see
+        // `_dismissOutsidePopups`)
+        const open =
+          event.type === 'mousedown' && this._dismissOnOutside.size !== 0
+            ? [...this._dismissOnOutside]
+            : null;
         // `keycode` is the button, numbered as X numbers them — the bridge
         // already speaks that vocabulary. It used to be hardcoded to 1, so
         // a right-click arrived as a left-click and no context menu ever
@@ -579,8 +652,9 @@ export class Win32App {
         // A press in one window is a press *outside* every open menu but the
         // one it landed in — which on X11 the grab would have delivered to
         // the menu instead of to this window.
-        if (event.type === 'mousedown') this._dismissOutsidePopups(wnd);
+        if (open) this._dismissOutsidePopups(wnd, open);
         break;
+      }
       case 'keydown':
       case 'keyup': {
         // The bridge asked the active layout what the key types before the

package/src/win32/fonts.js

@@ -187,13 +187,25 @@ class Win32Face {
     this.italic = style === 'italic' || style === 'oblique';
   }
 
+  /**
+   * Kept per size: a face's metrics never change, and the bridge answers
+   * each call by resolving the family through DirectWrite again. A trimmed
+   * `<text>` asks on every placement of its layout (`_trim`), which on a
+   * graph of widget cards was every body on every step of a drag.
+   */
   metrics(size) {
-    return this._manager._native.fontMetrics(
-      this.family,
-      size,
-      this.weight,
-      this.italic,
-    );
+    this._metrics ??= new Map();
+    let m = this._metrics.get(size);
+    if (m === undefined) {
+      m = this._manager._native.fontMetrics(
+        this.family,
+        size,
+        this.weight,
+        this.italic,
+      );
+      this._metrics.set(size, m);
+    }
+    return m;
   }
 
   /**
@@ -474,7 +486,14 @@ export class Win32FontManager {
   }
 
   match(family, options = {}) {
-    const name = familyOf(this._native, family);
+    // the stack resolved once: a named family is a DirectWrite lookup, and
+    // every text layout asks
+    this._families ??= new Map();
+    let name = this._families.get(family);
+    if (name === undefined) {
+      name = familyOf(this._native, family);
+      this._families.set(family, name);
+    }
     const key = `${name}|${weightOf(options.weight)}|${options.style ?? 'normal'}`;
     let face = this._faces.get(key);
     if (!face) {

package/src/win32/overlay.js

@@ -0,0 +1,244 @@
+// The pane a `<glarea>`'s children are drawn on, on the Windows backend: a
+// DirectComposition visual with a premultiplied surface of its own, above
+// every swap chain in the window's tree (src/gloverlay.js; the bridge's
+// src/layer.cc).
+//
+// Without it a pane was whatever `app.createWindow({ parent })` answers,
+// which here is a GL surface (src/win32/glarea.js) — a WGL context and a
+// swap chain per pane, and no 2D context at all. The children were laid out,
+// claimed and painted nowhere, and a component that drew their cards under
+// them had nothing left on screen where they were.
+//
+// Composited, like the Cocoa pane (src/cocoa/overlay.js): what the children
+// leave transparent shows the GL frame, and a translucent fill, an
+// antialiased edge or a shadow blends with it. Text on it is grayscale
+// rather than ClearType, which Direct2D does on any surface with alpha
+// (docs/windows.md §Text).
+//
+// Drawn like the window it lives in (src/win32/window.js): a DirectComposition
+// surface hands out a context per `BeginDraw`, valid until `EndDraw`, so the
+// overlay's passes come through `paintPasses` — one `BeginDraw` each — rather
+// than through a context that is always there. `present` asks for the commit
+// the window's own frame makes, so a pane and the window land together.
+import { BackendContext2D } from '../backend/context2d.js';
+
+export class Win32OverlayPane {
+  constructor(app, options) {
+    this.app = app;
+    this.parent = options.parent;
+    this._native = app._native;
+    this.destroyed = false;
+    this.rect = {
+      x: options.x ?? 0,
+      y: options.y ?? 0,
+      width: options.width ?? 1,
+      height: options.height ?? 1,
+    };
+    // the bridge's layer, made once the window has a composition tree to
+    // hang it in — the tree renders before the window is ready
+    this._layer = 0;
+    this._visible = true;
+    // non-zero only between a pass's BeginDraw and its EndDraw
+    this._surface = 0;
+    this._gen = 0;
+    this._ctx = null;
+    this._handlers = {};
+    this._ensureLayer();
+  }
+
+  get width() {
+    return this.rect.width;
+  }
+
+  get height() {
+    return this.rect.height;
+  }
+
+  on(name, fn) {
+    (this._handlers[name] ??= []).push(fn);
+  }
+
+  emit(name, ev) {
+    for (const fn of this._handlers[name] ?? []) fn(ev);
+  }
+
+  _ensureLayer() {
+    if (this._layer || this.destroyed) return this._layer;
+    if (!this.parent?._composed || this.parent.destroyed) return 0;
+    const { x, y, width, height } = this.rect;
+    this._layer = this._native.layerCreate(
+      this.parent.id,
+      Math.round(x),
+      Math.round(y),
+      Math.max(1, Math.round(width)),
+      Math.max(1, Math.round(height)),
+    );
+    if (this._layer && !this._visible) {
+      this._native.layerSetVisible(this._layer, false);
+    }
+    return this._layer;
+  }
+
+  /** Geometry in device px, the unit the overlay's rects are in. */
+  setState(rect) {
+    if (this.destroyed) return;
+    this.rect = rect;
+    if (!this._layer) return;
+    this._native.layerSetRect(
+      this._layer,
+      Math.round(rect.x),
+      Math.round(rect.y),
+      Math.max(1, Math.round(rect.width)),
+      Math.max(1, Math.round(rect.height)),
+    );
+    this._owe();
+  }
+
+  map() {
+    this._setVisible(true);
+  }
+
+  unmap() {
+    this._setVisible(false);
+  }
+
+  _setVisible(on) {
+    if (this._visible === on) return;
+    this._visible = on;
+    if (!this._layer || this.destroyed) return;
+    this._native.layerSetVisible(this._layer, on);
+    this._owe();
+  }
+
+  getContext() {
+    if (!this._ctx) {
+      this._ctx = new BackendContext2D(
+        this._native,
+        () => this._surface,
+        () => this._gen,
+      );
+      this._ctx._fonts = this.app.fonts;
+    }
+    return this._ctx;
+  }
+
+  /**
+   * The overlay's passes, each its own `BeginDraw` — `rect`s in window
+   * coordinates, each painted by `paint(ctx, rect)` with the context drawing
+   * in window coordinates too. A pass is grown to whole pixels first:
+   * everything inside a `BeginDraw` rect is undefined until it is painted,
+   * so the rect the painter clears and the rect the surface hands out have
+   * to be the same one.
+   */
+  paintPasses(passes, paint) {
+    if (this.destroyed) return;
+    if (!this._ensureLayer()) {
+      // Nothing to draw into yet. The overlay believes these passes landed,
+      // so it is told they did not: all of the pane is owed, on the next
+      // frame, when the window will have a tree to hang the layer in.
+      setImmediate(() => {
+        if (!this.destroyed) this.emit('draw', {});
+      });
+      return;
+    }
+    const ctx = this.getContext();
+    const ox = Math.round(this.rect.x);
+    const oy = Math.round(this.rect.y);
+    let drawn = false;
+    for (const pass of passes) {
+      const x0 = Math.max(Math.floor(pass.x), ox);
+      const y0 = Math.max(Math.floor(pass.y), oy);
+      const x1 = Math.min(
+        Math.ceil(pass.x + pass.width),
+        ox + Math.max(1, Math.round(this.rect.width)),
+      );
+      const y1 = Math.min(
+        Math.ceil(pass.y + pass.height),
+        oy + Math.max(1, Math.round(this.rect.height)),
+      );
+      if (x1 <= x0 || y1 <= y0) continue;
+      const handle = this._native.layerBeginDraw(
+        this._layer,
+        x0 - ox,
+        y0 - oy,
+        x1 - x0,
+        y1 - y0,
+      );
+      if (!handle) continue;
+      this._surface = handle;
+      this._gen++;
+      try {
+        // the surface draws in the layer's own coordinates; the painter
+        // draws in the window's
+        ctx.save();
+        try {
+          ctx.translate(-ox, -oy);
+          paint(ctx, { x: x0, y: y0, width: x1 - x0, height: y1 - y0 });
+        } finally {
+          ctx.restore();
+        }
+        drawn = true;
+      } finally {
+        this._surface = 0;
+        this._native.layerEndDraw(this._layer);
+      }
+    }
+    if (drawn) this._owe();
+  }
+
+  /**
+   * Move the pixels of `rect` (pane coordinates, device px) by (dx, dy) —
+   * ntk `Window.scrollRegion`'s contract: the band that survives the shift
+   * inside `rect` moves, the rest of it is left as it was, and false means
+   * nothing moved, so the caller repaints instead (issue #644).
+   */
+  scrollRegion(rect, dx, dy) {
+    if (this.destroyed || !this._layer) return false;
+    if (!Number.isInteger(dx) || !Number.isInteger(dy)) return false;
+    const moved = this._native.layerScroll(
+      this._layer,
+      Math.round(rect.x),
+      Math.round(rect.y),
+      Math.round(rect.width),
+      Math.round(rect.height),
+      dx,
+      dy,
+    );
+    if (moved) this._owe();
+    return Boolean(moved);
+  }
+
+  /** What was painted or moved, onto the screen with the window's frame. */
+  present() {
+    this._owe();
+  }
+
+  /**
+   * A commit is owed. The window's frame makes one after the overlay has
+   * painted (`presentFrame`, src/win32/window.js), so a pane's pixels and
+   * the window's land together; a change made outside a frame — a pane
+   * hidden between two — is committed on a microtask instead, once.
+   */
+  _owe() {
+    const wnd = this.parent;
+    if (!wnd || wnd.destroyed) return;
+    if (wnd._owesCommit) return;
+    wnd._owesCommit = true;
+    queueMicrotask(() => {
+      if (!wnd._owesCommit) return;
+      wnd._owesCommit = false;
+      if (!wnd.destroyed) this._native.commit();
+    });
+  }
+
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this._ctx = null;
+    if (this._layer) {
+      this._native.layerDestroy(this._layer);
+      this._layer = 0;
+      this._owe();
+    }
+  }
+}

package/src/win32/panewindow.js

@@ -287,6 +287,12 @@ export class Win32PaneWindow {
     }
   }
 
+  /** The frame is the ordinary paint walk, so it paints through core's
+   * paint cache (src/nodes/window/flush.js), as the window does. */
+  get usesPaintCache() {
+    return true;
+  }
+
   /**
    * No scroll blit. The fast path moves a band of pixels *within the surface
    * being drawn into*, and this one is `STALE_FRAMES` frames behind — the

package/src/win32/window.js

@@ -53,6 +53,11 @@ export class Win32Window {
     this._pendingFrames = [];
     this._owesFullPaint = false;
     this._dirty = false;
+    // a pane over a `<glarea>` here changed and its commit is this frame's
+    // (src/win32/overlay.js)
+    this._owesCommit = false;
+    // pointer motion and wheel held for the next frame (`_queueInput`)
+    this._pendingInput = null;
 
     // `overrideRedirect` is how a `<popup>` says what it is — a menu, a
     // select's list, a tooltip. On X11 it means "the window manager does not
@@ -104,6 +109,58 @@ export class Win32Window {
     for (const fn of this._handlers[name] ?? []) fn(ev);
   }
 
+  /**
+   * Hold a pointer motion or a wheel for the next frame, merged with any
+   * already held: ntk's coalescing on X11 (its lib/window.js,
+   * `_deliverEvent`), which the rest of the event path was written against
+   * — src/events.js paces motion on the strength of it.
+   *
+   * Windows merges WM_MOUSEMOVE itself, but only while a queue waits to be
+   * read, and the bridge reads its messages on a UI thread of its own and
+   * posts every one of them to the loop. So a mouse reporting a thousand
+   * times a second was a thousand events on the loop, and a handler slower
+   * than a millisecond fell behind the pointer — then replayed every
+   * position it had missed, a frame of work each, long after the pointer
+   * had stopped: a box selection over a large graph trailed the pointer by
+   * seconds. Held here, a burst is one event a frame: the newest motion,
+   * with the rest riding along in `ev.coalesced`, and the wheel's deltas
+   * added up at its last position.
+   */
+  _queueInput(name, ev) {
+    const pending = (this._pendingInput ??= new Map());
+    const prev = pending.get(name);
+    if (!prev) {
+      ev.coalesced = [ev];
+      pending.set(name, ev);
+    } else if (name === 'wheel') {
+      // scroll distance adds up — the last delta alone would throw away all
+      // but the final step of a fast scroll
+      prev.coalesced.push(ev);
+      prev.deltaX += ev.deltaX;
+      prev.deltaY += ev.deltaY;
+      prev.x = ev.x;
+      prev.y = ev.y;
+      prev.rootx = ev.rootx;
+      prev.rooty = ev.rooty;
+      prev.smooth = prev.smooth || ev.smooth;
+    } else {
+      ev.coalesced = prev.coalesced;
+      ev.coalesced.push(ev);
+      pending.set(name, ev);
+    }
+    this.app._holdInput(this);
+  }
+
+  /** Deliver what `_queueInput` held: at the top of the next frame, and
+   *  before any other event of this window's, so a handler sees events in
+   *  the order they happened — a drag its last move, then the release. */
+  _flushInput() {
+    const pending = this._pendingInput;
+    if (pending === null) return;
+    this._pendingInput = null;
+    for (const [name, ev] of pending) this.emit(name, ev);
+  }
+
   /**
    * The bridge says the HWND exists. Composition is set up here and not at
    * construction because there is no HWND to target until now — the command
@@ -168,6 +225,7 @@ export class Win32Window {
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
+    this._pendingInput = null;
     this._native.destroyWindow?.(this.id);
     this.app._unregister(this);
   }
@@ -577,7 +635,13 @@ export class Win32Window {
         this._native.endDraw(this.id);
       }
     }
-    if (painted) this._native.commit();
+    // …and the panes over a `<glarea>` in this window, painted before this
+    // (src/win32/overlay.js), in the same commit: a frame whose only change
+    // was theirs still owes one
+    if (painted || this._owesCommit) {
+      this._owesCommit = false;
+      this._native.commit();
+    }
   }
 
   /**
@@ -604,6 +668,12 @@ export class Win32Window {
     );
   }
 
+  /** The frame is the ordinary paint walk, a pass per damage rect, so it
+   * paints through core's paint cache (src/nodes/window/flush.js). */
+  get usesPaintCache() {
+    return true;
+  }
+
   /** DirectComposition does not hold a frame back the way an X server's fence
    * or a WindowServer's buffer does: Commit is asynchronous and the surface
    * retains its own pixels. So there is never a frame in flight to wait for. */