@react-x11/components 0.7.1 → 0.9.0

package/src/internal/scroll.ts

@@ -44,6 +44,7 @@ import type { DrawnNode, ScrollableNode } from 'react-x11';
 import type { RowHeights, RowKey } from './heights.js';
 import { afterLayout, cancelAfterLayout } from './timers.js';
 import type { LayoutTick } from './timers.js';
+import { scaleOf } from './units.js';
 
 /** All a reveal needs of a row: `<TreeRow>` and `<TableRow>` are both this. */
 interface Keyed {
@@ -100,8 +101,9 @@ export interface Reveal {
   /** Scroll the pane, recording that this component is the one that asked. */
   scrollTo(y: number): void;
   /** An `onScroll` arrived. One this component did not ask for is the user
-   *  taking over, and it cancels whatever was owed. */
-  heard(scrollY: number): void;
+   *  taking over, and it cancels whatever was owed. Answers whether it was
+   *  this component's own. */
+  heard(scrollY: number): boolean;
 }
 
 /**
@@ -148,13 +150,17 @@ export function useReveal(sources: RevealSources): Reveal {
   const scrollTo = useCallback((y: number): void => {
     const box = src.current.box.current;
     if (!box) return;
+    // `y` is logical, like everything the reveal computes with; the raw
+    // node properties are device (../internal/units.ts), divided here so the
+    // clamp and the early-out speak the caller's unit.
+    const s = scaleOf(box);
     // Clamped here rather than left to the container, so what comes back on
     // `onScroll` is the number that was asked for and can be recognised.
     const to = Math.min(
       Math.max(0, y),
-      Math.max(0, box.contentHeight - box.abs.height),
+      Math.max(0, (box.contentHeight - box.abs.height) / s),
     );
-    if (to === box.scrollY) return;
+    if (to === box.scrollY / s) return;
     asked.current = to;
     box.scrollTo({ y: to });
   }, []);
@@ -166,9 +172,10 @@ export function useReveal(sources: RevealSources): Reveal {
     const box = src.current.box.current;
     const want = owedShift.current;
     if (!box || want === 0) return;
-    const was = box.scrollY;
+    const s = scaleOf(box);
+    const was = box.scrollY / s;
     scrollTo(was + want);
-    owedShift.current = want - (box.scrollY - was);
+    owedShift.current = want - (box.scrollY / s - was);
   }, [scrollTo]);
 
   const nudge = useCallback(
@@ -208,7 +215,10 @@ export function useReveal(sources: RevealSources): Reveal {
         settled.current = null;
         return;
       }
-      const viewport = box.abs.height;
+      // Logical, like the height index the unmounted arithmetic mixes with —
+      // the raw properties are device (../internal/units.ts).
+      const s = scaleOf(box);
+      const viewport = box.abs.height / s;
       if (viewport <= 0) return; // nothing laid out to scroll inside yet
 
       // How far the row is outside the pane, in pixels of scrolling. The row's
@@ -223,16 +233,20 @@ export function useReveal(sources: RevealSources): Reveal {
           : null;
       const placed = mounted
         ? {
-            above: box.abs.y - mounted.abs.y,
-            below: mounted.abs.y + mounted.abs.height - (box.abs.y + viewport),
-            height: mounted.abs.height,
+            above: (box.abs.y - mounted.abs.y) / s,
+            below:
+              (mounted.abs.y +
+                mounted.abs.height -
+                (box.abs.y + box.abs.height)) /
+              s,
+            height: mounted.abs.height / s,
           }
         : {
-            above: box.scrollY - heights.offsetAt(at),
+            above: box.scrollY / s - heights.offsetAt(at),
             below:
               heights.offsetAt(at) +
               heights.heightAt(at) -
-              (box.scrollY + viewport),
+              (box.scrollY / s + viewport),
             height: heights.heightAt(at),
           };
       /**
@@ -254,8 +268,8 @@ export function useReveal(sources: RevealSources): Reveal {
        */
       let certain = mounted !== null || heights.isMeasured(at);
       if (certain && heights.hasMeasurements()) {
-        const from = Math.min(at, heights.indexAt(box.scrollY));
-        const to = Math.max(at, heights.indexAt(box.scrollY + viewport));
+        const from = Math.min(at, heights.indexAt(box.scrollY / s));
+        const to = Math.max(at, heights.indexAt(box.scrollY / s + viewport));
         for (let i = from; i <= to && certain; i++) {
           certain = heights.isMeasured(i);
         }
@@ -283,8 +297,10 @@ export function useReveal(sources: RevealSources): Reveal {
       }
       // A move the pane cannot make yet leaves the debt standing: the layout
       // that admits the rows just appended is the one that will let it finish.
+      // `was` in device, compared against the same raw property — whether it
+      // moved is unit-free; the request itself goes through logical scrollTo.
       const was = box.scrollY;
-      scrollTo(was + move);
+      scrollTo(was / s + move);
       if (box.scrollY !== was) {
         stuck.current = null; // it moved; the scroll it caused brings us back
         return;
@@ -321,15 +337,20 @@ export function useReveal(sources: RevealSources): Reveal {
     [retry],
   );
 
-  const heard = useCallback((scrollY: number): void => {
+  const heard = useCallback((scrollY: number): boolean => {
     // A scroll this component did not ask for ends the whole chase, not just
-    // the outstanding half of it.
-    if (scrollY !== asked.current) {
+    // the outstanding half of it. Within half a pixel is ours: the payload
+    // is the device offset divided back to logical, and at a fractional
+    // scale that round trip need not be bit-identical to what was asked.
+    const ours =
+      asked.current !== null && Math.abs(scrollY - asked.current) < 0.5;
+    if (!ours) {
       owed.current = null;
       settled.current = null;
       owedShift.current = 0;
     }
     asked.current = null;
+    return ours;
   }, []);
 
   // One stable object, not a fresh literal per render: callbacks built on

package/src/internal/units.ts

@@ -0,0 +1,34 @@
+// One logical pixel is `scale` device pixels — react-x11's docs/scale.md.
+//
+// **Shared between `<Tree>` and `<Table>`** like the rest of this directory;
+// see the header of `./heights.ts` for why it is internal rather than a
+// shared module with a subpath.
+//
+// The virtualizers keep their whole model in logical pixels: style lengths,
+// the `onScroll`/`onViewport` payloads, the height index, and the props
+// (`rowHeight`, `estimatedRowHeight`) are all logical. But the **raw node
+// properties** they read back between events — `scrollY`, `contentHeight`,
+// `abs` — are device pixels. At scale 1 the two units coincide, which is how
+// every harness test and every Xvfb check passed while a retina display
+// doubled every raw read: the offset re-read after layout landed at twice
+// the logical value, the slice was rebuilt a viewport below where the user
+// was looking, and the table example went blank on a flick (and stayed
+// blank after an append-and-reveal). Every raw read goes through this
+// divisor so the arithmetic stays in one unit.
+//
+// **A pointer is the other half of this.** An event's `x`/`y` are logical,
+// so a gesture measured against a laid-out box wants the box in that unit:
+// `node.getClientRects()[0]`, which is `abs` already divided, rather than
+// `abs` and a multiply. `<ColorPicker>` compared the two directly and put
+// its thumb a quarter of the way from the corner on every retina panel.
+// Reach for `scaleOf` where there is no rect to ask for — a raw `scrollY`,
+// a `contentHeight`, a constant that never passes through a style.
+//
+// `scale` is on every retained node at run time but not on the public
+// `DrawnNode` type — hence the structural read, and `object` rather than
+// `{ scale?: unknown }` in the signature: a weak type with no property in
+// common with `DrawnNode` fails TS2559 at every call site.
+export function scaleOf(node: object | null | undefined): number {
+  const s = node ? (node as { scale?: unknown }).scale : undefined;
+  return typeof s === 'number' && s > 0 ? s : 1;
+}

package/src/internal/window.ts

@@ -48,6 +48,7 @@ import type { ScrollableNode } from 'react-x11';
 import type { RowHeights, RowKey } from './heights.js';
 import { cancelLater, later } from './timers.js';
 import type { DelayTick } from './timers.js';
+import { scaleOf } from './units.js';
 
 /** All this needs of a row — `TreeRow` and `TableRow` are both this. */
 interface Keyed {
@@ -298,7 +299,6 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
       // one has no slice to rebuild, and re-rendering it on a scroll it
       // already drew would be work for nothing.
       if (!inp.current.virtualizing) return;
-      (globalThis as any).__scrolls = ((globalThis as any).__scrolls ?? 0) + 1;
       const now = Date.now();
       const s = vel.current;
       const dt = now - s.t;
@@ -332,7 +332,9 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
     const { box, virtualizing } = inp.current;
     const node = box.current;
     if (!node || !virtualizing) return;
-    const y = node.scrollY;
+    // The raw property is device pixels; the viewport model — like the
+    // `onScroll` payload `scrolled` is fed — is logical (../internal/units.ts).
+    const y = node.scrollY / scaleOf(node);
     setView((prev) => (prev.top === y ? prev : { ...prev, top: y }));
   }, []);