@react-x11/components 0.9.0 → 0.11.0

package/src/terminal-output/index.ts

@@ -32,6 +32,7 @@ import { ansiPalette, parseAnsi } from '../ansi/index.js';
 import type {
   AnsiDocument,
   AnsiInput,
+  AnsiLine,
   AnsiPaletteOptions,
 } from '../ansi/index.js';
 import {
@@ -40,14 +41,15 @@ import {
   useLinkClicks,
   useSelectionMenu,
 } from '../richtext/index.js';
-import type { RichTextProps, TextRun } from '../richtext/index.js';
+import type { RichTextProps } from '../richtext/index.js';
 import {
   codeBlockLook,
   codeBlockStyle,
   codeTextStyle,
 } from '../codeblock/index.js';
-import { documentRuns } from './runs.js';
+import { linesRuns } from './runs.js';
 import { hx } from './hx.js';
+import { useFontPrewarm } from '../internal/prewarm.js';
 
 const h = React.createElement;
 
@@ -55,6 +57,27 @@ const h = React.createElement;
 // the note in `../richtext/node.ts`.
 registerRichText();
 
+/**
+ * Lines a block of output holds.
+ *
+ * The output is a column of blocks rather than one element, so an append
+ * lays out again the block it lands in and not the whole capture: one
+ * `<richtext>` for all of it was laid out whole for every line appended,
+ * 0.9 s an append at 20,000 lines. A block keeps its element while its lines
+ * are the same objects, which the parser shares from one snapshot to the
+ * next. Blocks start at multiples of this in the capture's own numbering,
+ * `truncated` counted in, so `maxLines` dropping lines off the top changes
+ * only the first block.
+ */
+const BLOCK_LINES = 256;
+
+/** One block's lines, and the elements they were drawn as. */
+interface Block {
+  lines: readonly AnsiLine[];
+  output: ReactElement;
+  gutter: ReactElement | null;
+}
+
 /** What `data` accepts on top of raw bytes: a document parsed elsewhere. */
 export type TerminalOutputSource = AnsiInput | AnsiDocument;
 
@@ -257,6 +280,7 @@ export function TerminalOutput(props: TerminalOutputProps): ReactElement {
       }),
     [theme, props.fontSize, props.monoFamily],
   );
+  useFontPrewarm(look.family);
 
   // The colour maths (dim, inverse, conceal) resolves against the *page*
   // rather than against the block's tint: the tint is translucent, and an
@@ -271,38 +295,105 @@ export function TerminalOutput(props: TerminalOutputProps): ReactElement {
     [colors, look.color, theme.background],
   );
 
-  const runs: TextRun[] = React.useMemo(
-    () =>
-      documentRuns(document, { family: look.family, size: look.size }, palette),
-    [document, look.family, look.size, palette],
-  );
+  // Kept across renders while what a block is drawn with holds.
+  const blocks = React.useRef<{
+    look: typeof look;
+    palette: typeof palette;
+    wrap: boolean;
+    lineNumbers: boolean;
+    byIndex: Map<number, Block>;
+  } | null>(null);
+  if (
+    blocks.current?.look !== look ||
+    blocks.current.palette !== palette ||
+    blocks.current.wrap !== wrap ||
+    blocks.current.lineNumbers !== lineNumbers
+  ) {
+    blocks.current = { look, palette, wrap, lineNumbers, byIndex: new Map() };
+  }
+  const byIndex = blocks.current.byIndex;
+  const font = { family: look.family, size: look.size };
+  const outputStyle = codeTextStyle(look, wrap);
+  const gutterStyle: Style = {
+    lineHeight: look.lineHeight,
+    textAlign: 'right',
+  };
 
-  const outputProps: RichTextProps = { runs, style: codeTextStyle(look) };
-  if (!wrap) outputProps.wrap = false;
+  // The capture's own numbering: the first line shown is the one after
+  // every line `maxLines` has dropped.
+  const first = document.truncated;
+  const end = first + document.lines.length;
+  const outputs: ReactElement[] = [];
+  const gutters: ReactElement[] = [];
+  const kept = new Set<number>();
+  for (
+    let start = first - (first % BLOCK_LINES);
+    start < end || outputs.length === 0;
+    start += BLOCK_LINES
+  ) {
+    const index = start / BLOCK_LINES;
+    const from = Math.max(start, first) - first;
+    const to = Math.min(start + BLOCK_LINES, end) - first;
+    const lines = document.lines.slice(from, to);
+    let block = byIndex.get(index);
+    if (!block || !sameLines(block.lines, lines)) {
+      const outputProps: RichTextProps = {
+        runs: linesRuns(lines, font, palette),
+        style: outputStyle,
+      };
+      if (!wrap) outputProps.wrap = false;
+      block = {
+        lines,
+        output: h(RICHTEXT_ELEMENT, {
+          key: index,
+          ...outputProps,
+        } as Record<string, unknown>),
+        gutter: lineNumbers
+          ? h(RICHTEXT_ELEMENT, {
+              key: index,
+              // The numbers are chrome, not text: `selectable={false}` keeps
+              // them out of a drag and out of the copied text.
+              selectable: false,
+              runs: lines.map((_, i) => ({
+                text:
+                  i === lines.length - 1
+                    ? `${first + from + i + 1}`
+                    : `${first + from + i + 1}\n`,
+                family: look.family,
+                size: look.size,
+                color: look.dim,
+              })),
+              wrap: false,
+              style: gutterStyle,
+            } as Record<string, unknown>)
+          : null,
+      };
+      byIndex.set(index, block);
+    }
+    kept.add(index);
+    outputs.push(block.output);
+    if (block.gutter) gutters.push(block.gutter);
+  }
+  for (const index of byIndex.keys()) {
+    if (!kept.has(index)) byIndex.delete(index);
+  }
 
-  const lineCount = document.lines.length;
+  // One column of numbers per column of output, block beside block: the
+  // same font and line height keep them in register.
   const gutter = lineNumbers
-    ? h(RICHTEXT_ELEMENT, {
-        // One richtext for all the numbers: same font, same line height, so
-        // it stays in register with the output beside it. `selectable={false}`
-        // is what keeps it out of a drag and out of the copied text.
-        selectable: false,
-        runs: Array.from({ length: lineCount }, (_, i) => ({
-          text: i === lineCount - 1 ? `${i + 1}` : `${i + 1}\n`,
-          family: look.family,
-          size: look.size,
-          color: look.dim,
-        })),
-        wrap: false,
-        style: {
-          lineHeight: look.lineHeight,
-          textAlign: 'right',
-          minWidth:
-            Math.max(String(lineCount).length, 2) * Math.ceil(look.size * 0.62),
-          marginRight: look.padding,
-          flexShrink: 0,
+    ? hx(
+        'box',
+        {
+          style: {
+            flexDirection: 'column',
+            minWidth:
+              Math.max(String(end).length, 2) * Math.ceil(look.size * 0.62),
+            marginRight: look.padding,
+            flexShrink: 0,
+          },
         },
-      } as Record<string, unknown>)
+        ...gutters,
+      )
     : null;
 
   const rootStyle: Style = {
@@ -334,7 +425,14 @@ export function TerminalOutput(props: TerminalOutputProps): ReactElement {
     hx(
       'box',
       { style: { overflow: 'scroll', flexDirection: 'column', flexGrow: 1 } },
-      h(RICHTEXT_ELEMENT, outputProps as unknown as Record<string, unknown>),
+      ...outputs,
     ),
   );
 }
+
+/** Whether two runs of lines are the same objects, one for one. */
+function sameLines(a: readonly AnsiLine[], b: readonly AnsiLine[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+  return true;
+}

package/src/terminal-output/runs.ts

@@ -5,7 +5,12 @@
 // parser said "ANSI 2", `../ansi/palette.ts` said which pixels that is, and
 // here it becomes a run the text layout can take.
 import { resolveAnsiColors } from '../ansi/index.js';
-import type { AnsiDocument, AnsiPalette, AnsiSpan } from '../ansi/index.js';
+import type {
+  AnsiDocument,
+  AnsiLine,
+  AnsiPalette,
+  AnsiSpan,
+} from '../ansi/index.js';
 import type { TextRun } from '../richtext/index.js';
 
 /** The font a capture is set in. The palette is separate because it changes
@@ -64,9 +69,18 @@ export function documentRuns(
   document: AnsiDocument,
   font: OutputFont,
   palette: AnsiPalette,
+): TextRun[] {
+  return linesRuns(document.lines, font, palette);
+}
+
+/** Some of a document's lines as runs, the way {@link documentRuns} makes
+ *  all of them: a block of `<TerminalOutput>`'s output. */
+export function linesRuns(
+  lines: readonly AnsiLine[],
+  font: OutputFont,
+  palette: AnsiPalette,
 ): TextRun[] {
   const runs: TextRun[] = [];
-  const { lines } = document;
   for (let i = 0; i < lines.length; i++) {
     for (const span of lines[i]!.spans) {
       if (span.text) runs.push(spanRun(span, font, palette));

package/src/three/canvas.ts

@@ -3,7 +3,9 @@
 //
 // The division of labour: `<glarea>` owns everything that is renderer
 // internals — the child X window on a GL visual, the context, the frame
-// clock, the swap — and exposes it as `onCreated`/`onDraw`/`frameLoop`.
+// clock, the swap — and exposes it as `onCreated`/`onDraw`/`frameLoop`. On
+// a core with react-x11#545 the pointer over the surface is the tree's too,
+// dispatched at the `<glarea>` like the pointer over any node.
 // This component owns everything that is scene: the second reconciler
 // rendering `children` into the object graph, the store `useThree`/`useFrame`
 // read, the backend-appropriate renderer, picking, and post-processing.
@@ -24,7 +26,7 @@ import {
 } from 'react';
 import type { ReactNode, Ref } from 'react';
 import { useSupports } from 'react-x11';
-import type { ReactX11Elements } from 'react-x11';
+import type { ReactX11Elements, SyntheticEvent } from 'react-x11';
 // Loads the module the JSX augmentation in jsx.ts targets (see flow/index.ts
 // for the same pattern). Type-only, so it is erased.
 import type {} from 'react-x11/jsx-runtime';
@@ -42,9 +44,10 @@ import { IndirectRenderer } from './renderer-indirect.js';
 import { DirectRenderer } from './renderer-direct.js';
 import { PostProcessor } from './postprocess.js';
 import type { EffectComposer } from './passes.js';
-import { ScenePointer, type ThreeEvent } from './events.js';
+import { ForwardedPointer, ScenePointer, type ThreeEvent } from './events.js';
 import { sceneWantsPointer } from './raycast.js';
 import { now, warn } from './globals.js';
+import { scaleOf } from '../internal/units.js';
 
 /**
  * Failures that mean "one thing in this scene is broken", not "this machine
@@ -64,12 +67,43 @@ type GlAreaProps = ReactX11Elements['glarea'];
 /** The glarea node surface this component reaches through its ref. */
 interface SurfaceNode {
   requestFrame?: () => void;
+  /** `true` where core dispatches the pointer over the surface at this node,
+   *  through the tree (react-x11#545); absent on a core that does not. */
+  forwardsPointer?: boolean;
+  /** The node's box, which is the surface's: device pixels, in the owning
+   *  window's space. */
+  abs?: { x: number; y: number };
   window?: {
+    /** The X window's id — the Cocoa backend's surface is a layer, and has
+     *  none. */
+    id?: unknown;
     on(name: string, handler: (event: { x: number; y: number }) => void): void;
+    /** The cursor X shows over the window. The Cocoa backend's layer has
+     *  none: there the only cursor is the owning window's, and core's. */
     setCursor?(cursor: string | null): void;
   } | null;
 }
 
+/**
+ * A pointer event where the scene measures it: device pixels from the
+ * surface's corner, as the surface's own X window reports them. Core hands a
+ * handler the point in the window's logical pixels — divided by the node's
+ * scale — while the surface covers the node's box, `abs`, in device pixels:
+ * so the point goes back to device pixels and the box's corner comes off.
+ * (The content box's corner would be out by any padding or border, which the
+ * surface covers too.)
+ */
+function surfacePoint(
+  node: SurfaceNode | null,
+  ev: { x: number; y: number },
+): { x: number; y: number } {
+  const scale = scaleOf(node);
+  return {
+    x: ev.x * scale - (node?.abs?.x ?? 0),
+    y: ev.y * scale - (node?.abs?.y ?? 0),
+  };
+}
+
 interface DrawInfo {
   width: number;
   height: number;
@@ -119,6 +153,8 @@ interface CanvasKit {
   store: ThreeStore;
   container: SceneContainer;
   pointer: ScenePointer;
+  /** The pointer as core forwards it, which the surface's handlers feed. */
+  forwarded: ForwardedPointer;
   renderer: IndirectRenderer | DirectRenderer | null;
   post: PostProcessor | null;
   gl: unknown;
@@ -148,6 +184,9 @@ export function Canvas({
   const supportsShaders = useSupports('shaders');
   const [error, setError] = useState<Error | null>(null);
   const areaRef = useRef<unknown>(null);
+  // The hovered object's cursor, where the surface cannot wear it itself
+  // (`forwarded` below).
+  const [sceneCursor, setSceneCursor] = useState<string | null>(null);
 
   // Everything with the canvas's lifetime, made once. The camera the scene
   // starts with is the default one; `<perspectiveCamera makeDefault>`
@@ -193,6 +232,23 @@ export function Canvas({
           missedRef.current?.(event);
         },
       }),
+      // Where a hovered object's cursor goes. An X window wears a cursor of
+      // its own, and X shows it over the window — or, while it is null, the
+      // parent's, which is core's — so on X11 the scene's goes straight
+      // onto the surface: on at once, and off again onto whatever the tree
+      // asked for. The Cocoa backend's surface is a layer, and there the
+      // only cursor is the window's, which core puts on from the style of
+      // the node under the pointer and remembers having put on. Set behind
+      // core's back, it would outlast the hover wherever core saw nothing
+      // to change. So there the scene's becomes the `<glarea>`'s own
+      // `cursor`, and core applies it like any other: from the motion after
+      // the one the scene heard, because core picks the window's cursor
+      // before it dispatches the motion.
+      forwarded: new ForwardedPointer((cursor) => {
+        const surface = (areaRef.current as SurfaceNode | null)?.window;
+        if (typeof surface?.setCursor === 'function') surface.setCursor(cursor);
+        else setSceneCursor(cursor);
+      }),
       renderer: null,
       post: null,
       gl: null,
@@ -359,14 +415,24 @@ export function Canvas({
       clock.delta = delta;
       store.runFrames(store.getState(), delta);
 
-      // pointer events are only worth selecting on the X window when
-      // something in the scene listens — checked when the tree said it
-      // changed, attached the first time it is true
+      // The pointer is only worth taking when something in the scene
+      // listens — checked when the tree said it changed, attached the first
+      // time it is true. Where core forwards it (react-x11#545) it comes from
+      // the surface's own handlers and nowhere else: a listener on the
+      // surface's X window would select the events there, and X would
+      // deliver every press, and the wheel, to that window rather than to
+      // the tree. An older core delivers nothing over the surface, so there
+      // it is the X window's own events — X11 only, since the Cocoa surface
+      // is a layer, with no X window id and no pointer events of its own.
       if (store.eventsDirty) {
         store.eventsDirty = false;
         if (!kit.pointer.attached && sceneWantsPointer(kit.scene.children)) {
           const node = areaRef.current as SurfaceNode | null;
-          if (node?.window) kit.pointer.attach(node.window);
+          if (node?.forwardsPointer === true) {
+            kit.pointer.attach(kit.forwarded);
+          } else if (node?.window && typeof node.window.id === 'number') {
+            kit.pointer.attach(node.window);
+          }
         }
       }
 
@@ -425,6 +491,31 @@ export function Canvas({
     [kit],
   );
 
+  // The pointer core dispatches at the surface, into the scene — through
+  // `kit.forwarded`, which passes it on only once the frame loop attached
+  // the scene to it. Where the pointer comes from the surface's X window
+  // instead, these hear nothing of it and pass nothing on.
+  const pointerHandlers = useMemo(() => {
+    const at = (ev: SyntheticEvent) =>
+      surfacePoint(areaRef.current as SurfaceNode | null, ev);
+    return {
+      onMouseDown: (ev: SyntheticEvent) => {
+        // Held until the release, as X's grab held it for the surface's
+        // window: a drag that leaves the canvas still reaches the scene.
+        if (kit.forwarded.emit('mousedown', at(ev))) ev.capturePointer();
+      },
+      onMouseMove: (ev: SyntheticEvent) => {
+        kit.forwarded.emit('mousemove', at(ev));
+      },
+      onMouseUp: (ev: SyntheticEvent) => {
+        kit.forwarded.emit('mouseup', at(ev));
+      },
+      onMouseLeave: (ev: SyntheticEvent) => {
+        kit.forwarded.emit('mouseout', at(ev));
+      },
+    };
+  }, [kit]);
+
   if (error && fallback !== undefined) {
     return hx(
       'box',
@@ -440,12 +531,15 @@ export function Canvas({
 
   return hx('glarea', {
     ref: areaRef as Ref<never>,
-    style,
+    // over the canvas's own, as a child's cursor is over its parent's: the
+    // object is what the pointer is on
+    style: sceneCursor === null ? style : [style, { cursor: sceneCursor }],
     clearColor,
     glx,
     frameLoop: loop,
     onCreated: handleCreated as GlAreaProps['onCreated'],
     onDraw: handleDraw as GlAreaProps['onDraw'],
     onError: handleError,
+    ...pointerHandlers,
   });
 }

package/src/three/events.ts

@@ -1,8 +1,14 @@
-// Pointer events for the scene: X mouse events on the `<glarea>`'s child
-// window, raycast against the CPU-side geometry, dispatched to the object
-// they hit and bubbled up its ancestors — a port of react-x11's
-// `src/pointer3d.js` onto the object graph, with the event shaped the way
-// r3f handlers expect (`object`, `point`, `distance`, `stopPropagation`).
+// Pointer events for the scene: the pointer over the `<glarea>`, raycast
+// against the CPU-side geometry, dispatched to the object it hit and
+// bubbled up its ancestors — a port of react-x11's `src/pointer3d.js` onto
+// the object graph, with the event shaped the way r3f handlers expect
+// (`object`, `point`, `distance`, `stopPropagation`).
+//
+// Where the pointer comes from is the canvas's to say (canvas.ts): the
+// `<glarea>`'s own handlers, on a core that dispatches the pointer over a
+// surface through the tree (react-x11#545), or the surface's child X window
+// on one that does not. Either way it arrives here as a `PointerSource`, in
+// device pixels from the surface's corner.
 import type { Mesh, Object3D, Scene } from './objects.js';
 import { raycast } from './raycast.js';
 import type { RayHit } from './raycast.js';
@@ -37,6 +43,40 @@ export interface PointerSource {
   setCursor?(cursor: string | null): void;
 }
 
+/**
+ * The pointer a core dispatches through the tree, as a `PointerSource`: the
+ * canvas's `<glarea>` handlers `emit` what they are handed, already in the
+ * surface's device pixels, and the scene subscribes to it as it would to a
+ * window. Where a hovered object's cursor goes is the canvas's to say, as
+ * where the pointer comes from is: onto the surface's own X window, or,
+ * where the surface is a layer that cannot wear one, into the `<glarea>`'s
+ * style.
+ */
+export class ForwardedPointer implements PointerSource {
+  private handlers = new Map<string, (event: NativeMouse) => void>();
+  private applyCursor: (cursor: string | null) => void;
+
+  constructor(applyCursor: (cursor: string | null) => void) {
+    this.applyCursor = applyCursor;
+  }
+
+  on(name: string, handler: (event: NativeMouse) => void): void {
+    this.handlers.set(name, handler);
+  }
+
+  /** Hand an event to the scene: false while nothing has subscribed. */
+  emit(name: string, event: NativeMouse): boolean {
+    const handler = this.handlers.get(name);
+    if (!handler) return false;
+    handler(event);
+    return true;
+  }
+
+  setCursor(cursor: string | null): void {
+    this.applyCursor(cursor);
+  }
+}
+
 /** The dispatch path: the object that was hit, then its ancestors. */
 function bubblePath(node: Object3D, scene: Scene): Object3D[] {
   const path: Object3D[] = [];
@@ -51,10 +91,10 @@ function bubblePath(node: Object3D, scene: Scene): Object3D[] {
 }
 
 /**
- * One canvas's pointer pipeline. The canvas attaches it to the surface's
- * child X window once anything in the scene listens; hover and press state
- * live here so enter/leave pairs and click (down and up on the same object)
- * come out right.
+ * One canvas's pointer pipeline. The canvas attaches it to where the pointer
+ * comes from — the tree, or the surface's child X window — once anything in
+ * the scene listens; hover and press state live here so enter/leave pairs
+ * and click (down and up on the same object) come out right.
  */
 export class ScenePointer {
   private scene: Scene;

package/src/tree/index.ts

@@ -919,6 +919,24 @@ export function Tree<T = TreeItem>({
   const index = heights;
   index.sync(rows, estimate);
 
+  /**
+   * One drawn row into the height index, for the window's trim: it may drop
+   * a row only once the index knows the height the row is laid out at, and
+   * a flick reaches the trailing rows long before `measureRows` does (see
+   * `measure` on the window's inputs).
+   */
+  const measureDrawn = useCallback(
+    (id: TreeItemId, at: number): boolean => {
+      const drawn = rowNodes.current.get(id);
+      if (!drawn || drawn.at !== at) return false;
+      heights.measure(id, at, drawn.node.abs.height / scaleOf(drawn.node));
+      return heights.isMeasured(at);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `heights` is a
+    // stable instance
+    [],
+  );
+
   /** The viewport, and the slice worth building from it — the machinery
    *  shared with `<Table>` (`../internal/window.ts`). */
   const win = useVirtualWindow({
@@ -934,6 +952,7 @@ export function Tree<T = TreeItem>({
     threshold: catchup?.threshold ?? SKELETON_THRESHOLD,
     burstBudget: catchup?.burst ?? BURST_BUDGET,
     settleBudget: catchup?.settle ?? SETTLE_BUDGET,
+    measure: measureDrawn,
   });
   const { view, viewRef } = win;
   /** Whether the fast-scroll pill is up — kept across renders so it does not