@react-x11/components 0.9.0 → 0.11.0

package/src/charts/render.ts

@@ -104,14 +104,51 @@ export const canPath = (
 /** One batched fill for many rectangles, or the loop where the context has
  * no batch — same pixels, more requests, which is the mock's documented
  * contract too. */
-function fillRects(ctx: PlotContext, rects: number[]): void {
+/** Fill a flat `[x, y, w, h, …]` list, less what `clip` leaves out;
+ *  answers how many rects went out, which is what the wire estimate
+ *  counts. */
+function fillRects(
+  ctx: PlotContext,
+  rects: number[],
+  clip?: PlotRect | null,
+): number {
+  if (clip) rects = within(rects, clip);
+  if (rects.length === 0) return 0;
   if (typeof ctx.fillRects === 'function') {
     ctx.fillRects(rects);
-    return;
+    return rects.length / 4;
   }
   for (let i = 0; i + 3 < rects.length; i += 4) {
     ctx.fillRect(rects[i], rects[i + 1], rects[i + 2], rects[i + 3]);
   }
+  return rects.length / 4;
+}
+
+/**
+ * The rects of a flat `[x, y, w, h, …]` list that reach `clip` — a pass's
+ * damage, which clips away everything else. A chart the pass merely
+ * touches, a strip a pan exposed along its edge, drew every mark it has,
+ * all but a few of them into the clip; scatter plots in a panned graph
+ * spent most of each step there.
+ */
+function within(rects: number[], clip: PlotRect): number[] {
+  const x0 = clip.x;
+  const y0 = clip.y;
+  const x1 = clip.x + clip.width;
+  const y1 = clip.y + clip.height;
+  let out: number[] | null = null;
+  for (let i = 0; i + 3 < rects.length; i += 4) {
+    const x = rects[i];
+    const y = rects[i + 1];
+    const inside =
+      x < x1 && x + rects[i + 2] > x0 && y < y1 && y + rects[i + 3] > y0;
+    if (inside) {
+      if (out) out.push(x, y, rects[i + 2], rects[i + 3]);
+    } else if (!out) {
+      out = rects.slice(0, i);
+    }
+  }
+  return out ?? rects;
 }
 
 /** Mutable accumulator behind `ChartFrameStats`. */
@@ -159,6 +196,9 @@ export interface SeriesEnv {
    *  a spec's `strokeWidth`, `dot`, `barRadius` and `size` are lengths the
    *  application wrote, so they are logical and multiply here. Default 1. */
   scale?: number;
+  /** The pass's damage, device pixels, or null for all of the plot: what
+   *  lies outside it the pass clips away, so it is not drawn at all. */
+  clip?: PlotRect | null;
 }
 
 /** A spec length on the device grid. */
@@ -173,12 +213,15 @@ export interface RenderHost {
   /**
    * Composite a straight-RGBA image over the plot, preserving what is
    * already painted underneath. False when this backend cannot (no
-   * XRender surface — the mock), in which case the caller uses rects.
+   * offscreen surface — the mock), in which case the caller uses rects.
    * `contentKey` names what `fill` would produce: an unchanged key lets
    * the host re-composite its retained surface without refilling or
-   * re-uploading a pixel.
+   * re-uploading a pixel. `id` is the series': each keeps a surface of its
+   * own, or two dense series in one plot would refill one surface for each
+   * other on every frame.
    */
   blitImage(
+    id: string,
     x: number,
     y: number,
     w: number,
@@ -597,18 +640,18 @@ export function renderLineArea(env: SeriesEnv, g: SeriesGeometry): void {
     ctx.save();
     if (ctx.globalAlpha !== undefined) ctx.globalAlpha = g.spec.fillOpacity;
     ctx.fillStyle = g.color;
-    fillRects(ctx, fillRectsArr);
+    const sent = fillRects(ctx, fillRectsArr, env.clip);
     ctx.restore();
     stats.commands++;
-    stats.estimatedWireBytes += (fillRectsArr.length / 4) * BYTES_PER_RECT;
+    stats.estimatedWireBytes += sent * BYTES_PER_RECT;
   }
   if (strokeRects.length) {
     ctx.save();
     ctx.fillStyle = g.color;
-    fillRects(ctx, strokeRects);
+    const sent = fillRects(ctx, strokeRects, env.clip);
     ctx.restore();
     stats.commands++;
-    stats.estimatedWireBytes += (strokeRects.length / 4) * BYTES_PER_RECT;
+    stats.estimatedWireBytes += sent * BYTES_PER_RECT;
   }
   stats.series.push({ id: g.spec.id, mode: 'columns', points: count });
 }
@@ -624,10 +667,20 @@ function renderDots(
   let total = 0;
   for (const run of runsX) total += run.length;
   if (total <= CIRCLE_MAX && ctx.arc && ctx.fill && ctx.beginPath) {
+    const clip = env.clip;
     ctx.save();
     ctx.fillStyle = color;
     for (let k = 0; k < runsX.length; k++) {
       for (let i = 0; i < runsX[k].length; i++) {
+        if (
+          clip &&
+          (runsX[k][i] + r < clip.x ||
+            runsX[k][i] - r > clip.x + clip.width ||
+            runsY[k][i] + r < clip.y ||
+            runsY[k][i] - r > clip.y + clip.height)
+        ) {
+          continue;
+        }
         ctx.beginPath();
         ctx.arc(runsX[k][i], runsY[k][i], r, 0, Math.PI * 2);
         ctx.fill();
@@ -651,10 +704,10 @@ function renderDots(
   }
   ctx.save();
   ctx.fillStyle = color;
-  fillRects(ctx, rects);
+  const sent = fillRects(ctx, rects, env.clip);
   ctx.restore();
   stats.commands++;
-  stats.estimatedWireBytes += (rects.length / 4) * BYTES_PER_RECT;
+  stats.estimatedWireBytes += sent * BYTES_PER_RECT;
 }
 
 // --- bars ------------------------------------------------------------------
@@ -705,10 +758,10 @@ export function renderBars(env: SeriesEnv, g: SeriesGeometry): void {
     }
     ctx.save();
     ctx.fillStyle = g.color;
-    fillRects(ctx, rects);
+    const sent = fillRects(ctx, rects, env.clip);
     ctx.restore();
     stats.commands++;
-    stats.estimatedWireBytes += (rects.length / 4) * BYTES_PER_RECT;
+    stats.estimatedWireBytes += sent * BYTES_PER_RECT;
     stats.series.push({ id: g.spec.id, mode: 'columns', points: n });
     return;
   }
@@ -749,9 +802,9 @@ export function renderBars(env: SeriesEnv, g: SeriesGeometry): void {
     }
   }
   if (rects.length) {
-    fillRects(ctx, rects);
+    const sent = fillRects(ctx, rects, env.clip);
     stats.commands++;
-    stats.estimatedWireBytes += (rects.length / 4) * BYTES_PER_RECT;
+    stats.estimatedWireBytes += sent * BYTES_PER_RECT;
   }
   ctx.restore();
   stats.series.push({
@@ -777,6 +830,10 @@ export interface ScatterGrid {
   consumedN: number;
   /** rects per alpha bucket, rebuilt only when the grid changed */
   buckets: number[][] | null;
+  /** the content the last paint drew — see `renderScatter` */
+  painted: string;
+  /** the content last handed to the host as an image, which it keeps */
+  imaged: string;
 }
 
 export function makeScatterGrid(
@@ -795,11 +852,27 @@ export function makeScatterGrid(
     maxCount: 0,
     consumedN: 0,
     buckets: null,
+    painted: '',
+    imaged: '',
   };
 }
 
 const ALPHA_LEVELS = 8;
 
+/** The alpha bucket a cell's count falls in: square-root density, so a
+ *  lone point stays visible beside a pile of a thousand. */
+function alphaLevel(count: number, maxCount: number): number {
+  return Math.min(
+    ALPHA_LEVELS - 1,
+    Math.floor(Math.sqrt(count / maxCount) * ALPHA_LEVELS),
+  );
+}
+
+/** The opacity a bucket is drawn at, by either path. */
+function levelAlpha(level: number): number {
+  return 0.3 + (0.7 * (level + 1)) / ALPHA_LEVELS;
+}
+
 /** #rgb/#rrggbb/#rrggbbaa → [r,g,b,a?]; null for anything fancier, which
  * simply keeps the rect path. */
 export function parseHexColor(
@@ -887,21 +960,38 @@ export function renderScatter(env: SeriesEnv, g: SeriesGeometry): void {
   const rectBytes = grid.occupied * BYTES_PER_RECT;
   const imageBytes = plot.width * plot.height * BYTES_PER_PIXEL;
   const rgb = parseHexColor(g.color);
-  if (rectBytes > imageBytes && rgb) {
+  // The crossover is a question about one frame, and a grid painted again
+  // unchanged — a pan or a drag carrying the plot, a crosshair over it —
+  // answers it differently: the host keeps the surface it filled, so every
+  // paint of it after the first is one composite, while the rects go out
+  // again in full every frame. On a backend where each rect is a primitive
+  // of its own rather than a line of one request, that was 30,000 of them
+  // a frame across a board of scatter plots. A grid whose data moves keeps
+  // the crossover, because every paint of it is its first.
+  const contentKey = `${grid.key}#${grid.consumedN}|${g.color}`;
+  const repeat = grid.painted === contentKey;
+  grid.painted = contentKey;
+  if ((repeat || rectBytes > imageBytes) && rgb) {
+    const kept = grid.imaged === contentKey;
     const drawn = env.host.blitImage(
+      g.spec.id,
       plot.x,
       plot.y,
       gw * cell,
       gh * cell,
       (data) => {
-        const [r, gg, b] = rgb;
+        const [r, gg, b, ca] = rgb;
+        // The rects' opacities exactly, colour alpha included, so which
+        // path drew a frame never shows — and a plot that changes path as
+        // it goes from moving to still does not change shade.
+        const alphas = Array.from({ length: ALPHA_LEVELS }, (_, level) =>
+          Math.round(levelAlpha(level) * ca),
+        );
         for (let cy = 0; cy < gh; cy++) {
           for (let cx = 0; cx < gw; cx++) {
             const count = grid.counts[cy * gw + cx];
             if (count === 0) continue;
-            const a = Math.round(
-              255 * (0.3 + 0.7 * Math.sqrt(count / grid.maxCount)),
-            );
+            const a = alphas[alphaLevel(count, grid.maxCount)];
             for (let dy = 0; dy < cell; dy++) {
               let at = ((cy * cell + dy) * gw * cell + cx * cell) * 4;
               for (let dx = 0; dx < cell; dx++) {
@@ -917,11 +1007,12 @@ export function renderScatter(env: SeriesEnv, g: SeriesGeometry): void {
       },
       // same grid content + colour → the host recomposites its retained
       // surface: no refill, no upload
-      `${grid.key}#${grid.consumedN}|${g.color}`,
+      contentKey,
     );
     if (drawn) {
+      grid.imaged = contentKey;
       stats.commands++;
-      stats.estimatedWireBytes += imageBytes;
+      stats.estimatedWireBytes += kept ? 0 : imageBytes;
       stats.series.push({ id: g.spec.id, mode: 'image', points: n });
       return;
     }
@@ -938,11 +1029,12 @@ export function renderScatter(env: SeriesEnv, g: SeriesGeometry): void {
       for (let cx = 0; cx < gw; cx++) {
         const count = grid.counts[cy * gw + cx];
         if (count === 0) continue;
-        const level = Math.min(
-          ALPHA_LEVELS - 1,
-          Math.floor(Math.sqrt(count / grid.maxCount) * ALPHA_LEVELS),
+        buckets[alphaLevel(count, grid.maxCount)].push(
+          cx * cell,
+          cy * cell,
+          cell,
+          cell,
         );
-        buckets[level].push(cx * cell, cy * cell, cell, cell);
       }
     }
     grid.buckets = buckets;
@@ -952,9 +1044,7 @@ export function renderScatter(env: SeriesEnv, g: SeriesGeometry): void {
   for (let level = 0; level < ALPHA_LEVELS; level++) {
     const local = grid.buckets[level];
     if (!local.length) continue;
-    if (ctx.globalAlpha !== undefined) {
-      ctx.globalAlpha = 0.3 + (0.7 * (level + 1)) / ALPHA_LEVELS;
-    }
+    if (ctx.globalAlpha !== undefined) ctx.globalAlpha = levelAlpha(level);
     // translate manually: ctx.translate would kick fillRects off ntk's
     // single-FillRectangles fast path (it requires an identity transform)
     const rects = new Array<number>(local.length);
@@ -964,9 +1054,9 @@ export function renderScatter(env: SeriesEnv, g: SeriesGeometry): void {
       rects[i + 2] = local[i + 2];
       rects[i + 3] = local[i + 3];
     }
-    fillRects(ctx, rects);
+    const sent = fillRects(ctx, rects, env.clip);
     stats.commands++;
-    stats.estimatedWireBytes += (rects.length / 4) * BYTES_PER_RECT;
+    stats.estimatedWireBytes += sent * BYTES_PER_RECT;
   }
   ctx.restore();
   stats.series.push({ id: g.spec.id, mode: 'columns', points: n });

package/src/code/index.ts

@@ -17,20 +17,18 @@ import type { ReactElement } from 'react';
 import { useTheme } from 'react-x11';
 import type { Style } from 'react-x11/style';
 
-import {
-  registerRichText,
-  RICHTEXT_ELEMENT,
-  useSelectionMenu,
-} from '../richtext/index.js';
-import type { RichTextProps, TextRun } from '../richtext/index.js';
+import { registerRichText, useSelectionMenu } from '../richtext/index.js';
+import type { TextRun } from '../richtext/index.js';
 import {
   codeBlockLook,
-  codeBlockRuns,
+  CodeBlockRunCache,
   codeBlockStyle,
   codeTextStyle,
 } from '../codeblock/index.js';
 import type { Language, TokenStyles } from '../code-language/index.js';
 import { hx } from './hx.js';
+import { useFontPrewarm } from '../internal/prewarm.js';
+import { CodeGutter, CodeLines } from '../internal/codelines.js';
 
 const h = React.createElement;
 
@@ -104,40 +102,46 @@ export function Code(props: CodeProps): ReactElement {
       }),
     [theme, props.fontSize, props.monoFamily, props.tokenStyles],
   );
+  useFontPrewarm(look.family);
 
+  // Kept between renders, so a source that changes at its end is tokenized
+  // again from the line that changed (`CodeBlockRunCache`).
+  const runCache = React.useRef<CodeBlockRunCache | null>(null);
+  runCache.current ??= new CodeBlockRunCache();
+  React.useEffect(() => () => runCache.current?.dispose(), []);
   const runs: TextRun[] = React.useMemo(
-    () => codeBlockRuns(source, look, { lang, language, resolveLanguage }),
+    () =>
+      runCache.current!.runs(source, look, { lang, language, resolveLanguage }),
     [source, lang, language, resolveLanguage, look],
   );
 
   const lineCount = React.useMemo(() => source.split('\n').length, [source]);
 
-  const codeProps: RichTextProps = { runs, style: codeTextStyle(look) };
-  if (!wrap) codeProps.wrap = false;
+  // In blocks of lines, so a change lays out the blocks it touches
+  // (`../internal/codelines.ts`).
+  const code = h(CodeLines, { runs, style: codeTextStyle(look, wrap), wrap });
 
   const gutter = lineNumbers
-    ? h(RICHTEXT_ELEMENT, {
-        // one richtext for all the numbers: same font, same line height, so
-        // it stays in register with the code beside it. `selectable={false}`
-        // is what keeps it out of a drag and out of the copied text — the
-        // numbering is chrome, and CSS spells that `user-select: none`.
-        selectable: false,
-        runs: Array.from({ length: lineCount }, (_, i) => ({
-          text: `${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(lineCount).length, 2) *
+              Math.ceil(look.size * 0.62),
+            marginRight: look.padding,
+            flexShrink: 0,
+          },
         },
-      } as Record<string, unknown>)
+        // numbers in the same font and line height as the code, blocked the
+        // same way, so the two stay in register
+        h(CodeGutter, {
+          lines: lineCount,
+          run: { family: look.family, size: look.size, color: look.dim },
+          style: { lineHeight: look.lineHeight, textAlign: 'right' },
+        }),
+      )
     : null;
 
   const rootStyle: Style = {
@@ -168,7 +172,7 @@ export function Code(props: CodeProps): ReactElement {
     hx(
       'box',
       { style: { overflow: 'scroll', flexDirection: 'column', flexGrow: 1 } },
-      h(RICHTEXT_ELEMENT, codeProps as unknown as Record<string, unknown>),
+      code,
     ),
   );
 }

package/src/code-editor/completion.ts

@@ -11,6 +11,7 @@ import type {
   CompletionResult,
   CompletionSource,
 } from '../code-language/types.js';
+import { compareText } from '../internal/collate.js';
 
 /**
  * Rank `items` against what has been typed: prefix matches first (case
@@ -24,7 +25,7 @@ export function rankCompletions(
   if (typed.length === 0) {
     return [...items].sort(
       (a, b) =>
-        (b.boost ?? 0) - (a.boost ?? 0) || a.label.localeCompare(b.label),
+        (b.boost ?? 0) - (a.boost ?? 0) || compareText(a.label, b.label),
     );
   }
   const lower = typed.toLowerCase();
@@ -41,7 +42,7 @@ export function rankCompletions(
     scored.push({ item, score: score * 1000 + (item.boost ?? 0) });
   }
   scored.sort(
-    (a, b) => b.score - a.score || a.item.label.localeCompare(b.item.label),
+    (a, b) => b.score - a.score || compareText(a.item.label, b.item.label),
   );
   return scored.map((s) => s.item);
 }

package/src/code-editor/index.ts

@@ -60,6 +60,7 @@ import type {
   Position,
 } from '../code-language/types.js';
 import { wordRangeAt } from './doc.js';
+import { styleFamily, useFontPrewarm } from '../internal/prewarm.js';
 
 export { ELEMENT as CODE_EDITOR_ELEMENT };
 export { CodeEditorNode };
@@ -74,6 +75,22 @@ if (!registeredElements().includes(ELEMENT)) {
     // near-misses, so a future style vocabulary addition fails loudly here
     // rather than silently in an app.
     semanticNames: ['rows', 'tabSize'],
+    // The props the node's own `applyProps` claims the damage of — the rows
+    // an external `value` changed, the rows a linter's squiggles are on —
+    // or that change nothing drawn. Left to core, a new value or a new
+    // diagnostics array (a controlled editor gets both on every keystroke)
+    // was the whole editor repainted over the rows it had claimed.
+    selfDamagedProps: [
+      'value',
+      'defaultValue',
+      'name',
+      'language',
+      'tokenStyles',
+      'tabSize',
+      'diagnostics',
+      'lineNumbers',
+      'insertSpaces',
+    ],
     childrenAllowed: false,
   });
 }
@@ -169,6 +186,8 @@ export function CodeEditor(props: CodeEditorComponentProps): ReactElement {
   } = props;
 
   const theme = useTheme();
+  // the editor's text is all in this family, from its first frame
+  useFontPrewarm(styleFamily(style, 'monospace'));
   const nodeRef = useRef<CodeEditorNode | null>(null);
   const [completion, setCompletion] = useState<CompletionState | null>(null);
   // bumped per query; a stale async result compares and drops itself