react-cheminfo 0.11.0 → 0.13.0

package/src/chart/core/chartPalette.ts

@@ -3,15 +3,18 @@
  * read from.
  *
  * - `group` — a species, a batch, a cluster: something a sample belongs to.
- * - `component` — an axis of the embedding: PC 1, PC 2.
+ * - `component` — an axis of the embedding: PC1, PC2.
  *
  * The two roles read the palette in different orders, so that the first four
  * groups and the first four components never share a hue. That is what stops a
- * reader who learnt "blue is setosa" on one tab from reading "blue is PC 1"
+ * reader who learnt "blue is setosa" on one tab from reading "blue is PC1"
  * on the next as though it meant the same thing.
  */
 export type ChartColorRole = 'group' | 'component';
 
+/** The blue a first group takes, and the answer when the palette is read past its end. */
+const FIRST_SERIES_COLOR = '#0072b2';
+
 /**
  * Eight hues that stay apart under deuteranopia, protanopia and tritanopia,
  * and that keep their order when a figure is printed in grey.
@@ -21,7 +24,7 @@ export type ChartColorRole = 'group' | 'component';
  * the eighth is a neutral dark, for the series past the ones anybody reads.
  */
 export const CHART_SERIES_COLORS: readonly string[] = [
-  '#0072b2', // blue
+  FIRST_SERIES_COLOR, // blue
   '#d55e00', // vermillion
   '#009e73', // bluish green
   '#cc79a7', // reddish purple
@@ -47,7 +50,7 @@ export function chartSeriesColor(
   const order = role === 'component' ? COMPONENT_ORDER : GROUP_ORDER;
   const step = Number.isFinite(index) && index > 0 ? Math.floor(index) : 0;
   const position = order[step % order.length] ?? 0;
-  return CHART_SERIES_COLORS[position] ?? DEFAULT_SERIES_COLOR;
+  return CHART_SERIES_COLORS[position] ?? FIRST_SERIES_COLOR;
 }
 
 /**
@@ -66,6 +69,3 @@ const GROUP_ORDER: readonly number[] = [0, 1, 2, 3, 6, 7, 4, 5];
  * entered from the two the groups leave alone longest, orange and sky blue.
  */
 const COMPONENT_ORDER: readonly number[] = [4, 5, 7, 6, 0, 1, 2, 3];
-
-/** The blue a first group takes, and the answer when the palette is read past its end. */
-const DEFAULT_SERIES_COLOR = '#0072b2';

package/src/chart/core/chartScale.ts

@@ -1,3 +1,5 @@
+import { roundTo } from '../../format/core/roundTo.ts';
+
 /**
  * A data-to-pixel mapping, held as the two numbers a multiply-add needs.
  *
@@ -70,3 +72,18 @@ export function chartValue(scale: ChartScale, pixel: number): number {
   const value = (pixel - scale.offset) / scale.factor;
   return value === 0 ? 0 : value;
 }
+
+/**
+ * A pixel coordinate rounded for the markup.
+ *
+ * Two decimals is under a tenth of a device pixel at any zoom a browser offers
+ * and keeps the markup short enough to read in a failing test. One decimal is
+ * for a mark written thousands of times into one `d` — a lasso, a stick chart,
+ * the dots of a pair grid — where the string length is the cost.
+ * @param value - The coordinate, in pixels.
+ * @param decimals - How many decimals to keep: `2` for a mark, `1` for a dense path.
+ * @returns The rounded coordinate.
+ */
+export function chartRoundPixel(value: number, decimals: 1 | 2 = 2): number {
+  return roundTo(value, decimals);
+}

package/src/chart/core/matrix.ts

@@ -45,6 +45,30 @@ export function rowMatrix(rows: ReadonlyArray<ArrayLike<number>>): MatrixLike {
   };
 }
 
+/**
+ * Parallel columns read as a matrix, one column per array.
+ *
+ * How a figure holding its coordinates as separate `x` and `y` runs hands them
+ * to anything that reads a matrix, without zipping them into rows first.
+ * @param columns - One array per column, in column order.
+ * @returns The matrix view, as many rows as the shortest column holds.
+ */
+export function columnMatrix(
+  columns: ReadonlyArray<ArrayLike<number>>,
+): MatrixLike {
+  let rows = columns.length === 0 ? 0 : Number.POSITIVE_INFINITY;
+  for (const column of columns) rows = Math.min(rows, column.length);
+  return {
+    rows,
+    columns: columns.length,
+    get(rowIndex: number, columnIndex: number): number {
+      if (rowIndex < 0 || rowIndex >= rows) return Number.NaN;
+      const value = columns[columnIndex]?.[rowIndex];
+      return value === undefined ? Number.NaN : value;
+    },
+  };
+}
+
 /**
  * A matrix whose values pass through a function on the way out.
  *

package/src/chart/ui/ChartAxis.tsx

@@ -150,7 +150,9 @@ function axisMarks(
       const value = scale.values[index];
       const text = scale.labels[index];
       if (value === undefined || text === undefined) continue;
-      marks.push(tickMark(horizontal, chartPixel(pixels, value), text, plot));
+      marks.push(
+        tickMark(horizontal, value, chartPixel(pixels, value), text, plot),
+      );
     }
   }
   if (title !== '') marks.push(axisTitle(horizontal, plot, showTicks, title));
@@ -159,6 +161,7 @@ function axisMarks(
 
 function tickMark(
   horizontal: boolean,
+  value: number,
   at: number,
   text: string,
   plot: ChartPlotArea,
@@ -175,7 +178,7 @@ function tickMark(
         dominantBaseline: 'middle',
       };
   return (
-    <g key={`tick-${at}`}>
+    <g key={`tick-${value}`}>
       <line {...mark} style={CHART_TICK_MARK_STYLE} />
       <text {...caption} style={CHART_TICK_LABEL_STYLE}>
         {text}

package/src/chart/ui/ChartFrame.tsx

@@ -2,18 +2,13 @@ import type { ReactElement, ReactNode } from 'react';
 import { useId } from 'react';
 
 import { OverlayLayer } from '../../overlay/ui/OverlayLayer.tsx';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import type { ChartAxisScale } from '../core/chartAxisScale.ts';
-import { chartAxisScale } from '../core/chartAxisScale.ts';
 import type { ChartScale } from '../core/chartScale.ts';
-import { chartScale } from '../core/chartScale.ts';
 
 import { ChartAxis } from './ChartAxis.tsx';
-import {
-  CHART_SVG_STYLE,
-  chartFrameStyle,
-  chartOuterRoom,
-  chartPlotArea,
-} from './chartStyles.ts';
+import { chartFrameGeometry } from './chartFrameGeometry.ts';
+import { CHART_SVG_STYLE, chartFrameStyle } from './chartStyles.ts';
 
 /** How one axis of a {@link ChartFrame} is drawn. */
 export interface ChartAxisSpec {
@@ -132,6 +127,18 @@ export interface ChartFrameProps {
    * @default {}
    */
   margins?: Partial<ChartMargins>;
+  /**
+   * The plot rectangle and mappings, already worked out by
+   * `chartFrameGeometry` from the same size, axes and margins — for a figure
+   * that needed them before it rendered.
+   * @default undefined — the frame works them out itself
+   */
+  geometry?: ChartFrameRender;
+  /**
+   * A class added to the wrapper, for a site placing the figure.
+   * @default undefined
+   */
+  className?: string;
   /**
    * Value of the `data-testid` attribute of the wrapper, for the end-to-end
    * tests.
@@ -162,28 +169,19 @@ export function ChartFrame(props: ChartFrameProps): ReactElement {
     busy = false,
     label = '',
     margins = {},
+    geometry,
+    className,
     testId,
   } = props;
   const clipId = useId();
 
-  const xAxis = chartAxisScale(x.domain[0], x.domain[1], {
-    count: x.tickCount,
-    nice: x.nice,
-  });
-  const yAxis = chartAxisScale(y.domain[0], y.domain[1], {
-    count: y.tickCount,
-    nice: y.nice,
-  });
-
-  const plot = chartPlotArea(width, height, margins, {
-    bottom: chartOuterRoom('bottom', x, xAxis),
-    left: chartOuterRoom('left', y, yAxis),
-  });
+  const frame = geometry ?? chartFrameGeometry(width, height, x, y, margins);
+  const { plot, xAxis, yAxis, x: xPixels, y: yPixels } = frame;
 
   const horizontal = {
     orientation: 'bottom',
     scale: xAxis,
-    pixels: chartScale(xAxis.domain[0], xAxis.domain[1], plot.left, plot.right),
+    pixels: xPixels,
     plot,
     label: x.label,
     showGrid: x.showGrid,
@@ -192,23 +190,16 @@ export function ChartFrame(props: ChartFrameProps): ReactElement {
   const vertical = {
     orientation: 'left',
     scale: yAxis,
-    pixels: chartScale(yAxis.domain[0], yAxis.domain[1], plot.bottom, plot.top),
+    pixels: yPixels,
     plot,
     label: y.label,
     showGrid: y.showGrid,
     showTicks: y.showTicks ?? true,
   } as const;
-  const frame: ChartFrameRender = {
-    plot,
-    x: horizontal.pixels,
-    y: vertical.pixels,
-    xAxis,
-    yAxis,
-  };
 
   return (
     <div
-      className="chart-frame"
+      className={joinClassNames('chart-frame', className)}
       style={chartFrameStyle(width, height)}
       data-testid={testId}
     >

package/src/chart/ui/ChartSeriesMarks.tsx

@@ -11,6 +11,7 @@ import type { ReactElement } from 'react';
 
 import type { ChartBand } from '../core/chartBand.ts';
 import type { ChartScale } from '../core/chartScale.ts';
+import { chartRoundPixel } from '../core/chartScale.ts';
 
 import type { ChartSeries } from './TrackedLineChart.tsx';
 
@@ -48,7 +49,7 @@ export function ChartSeriesMarks(props: ChartSeriesMarksProps): ReactElement {
   const muted = item.muted === true;
   const grounded = item.kind === 'bar';
   const lanes = Math.max(1, lane.count);
-  const wide = round(band.bandWidth / lanes);
+  const wide = chartRoundPixel(band.bandWidth / lanes);
   const shift = band.bandWidth * ((lane.index + 0.5) / lanes - 0.5);
   const rects: ReactElement[] = [];
   let path = '';
@@ -62,13 +63,13 @@ export function ChartSeriesMarks(props: ChartSeriesMarksProps): ReactElement {
     const x = band.offset + band.step * (index + 0.5);
     const at = y.offset + value * y.factor;
     if (!grounded) {
-      path += `${pen}${round(x)} ${round(at)}`;
+      path += `${pen}${chartRoundPixel(x)} ${chartRoundPixel(at)}`;
       pen = 'L';
       continue;
     }
-    const near = round(x + shift - band.bandWidth / lanes / 2);
-    const high = round(Math.min(at, y.offset));
-    const tall = round(Math.abs(at - y.offset));
+    const near = chartRoundPixel(x + shift - band.bandWidth / lanes / 2);
+    const high = chartRoundPixel(Math.min(at, y.offset));
+    const tall = chartRoundPixel(Math.abs(at - y.offset));
     rects.push(
       <rect key={index} x={near} y={high} width={wide} height={tall} />,
     );
@@ -94,5 +95,3 @@ export function ChartSeriesMarks(props: ChartSeriesMarksProps): ReactElement {
 
 /** What a series drawn on its own is told, which is that it has the slot. */
 const SOLE_LANE = { index: 0, count: 1 } as const;
-
-const round = (value: number): number => Math.round(value * 100) / 100;

package/src/chart/ui/ChartTrackingLayer.tsx

@@ -12,6 +12,7 @@ import type { ChartAxisScale } from '../core/chartAxisScale.ts';
 import type { ChartBand } from '../core/chartBand.ts';
 import { chartBandCenter, chartBandIndexAt } from '../core/chartBand.ts';
 import type { ChartScale } from '../core/chartScale.ts';
+import { chartRoundPixel } from '../core/chartScale.ts';
 
 import { ChartAxis } from './ChartAxis.tsx';
 import type { ChartPlotArea } from './ChartFrame.tsx';
@@ -159,7 +160,7 @@ function markers(
   for (const item of series) {
     const value = item.values[slot];
     if (value === undefined || !Number.isFinite(value)) continue;
-    const cy = round(y.offset + value * y.factor);
+    const cy = chartRoundPixel(y.offset + value * y.factor);
     dots.push(
       <circle key={item.id} cx={at} cy={cy} r={3.5} fill={item.color} />,
     );
@@ -188,5 +189,3 @@ const CROSSHAIR_STYLE = {
   strokeWidth: 1,
   strokeDasharray: '3 3',
 } as const satisfies CSSProperties;
-
-const round = (value: number): number => Math.round(value * 100) / 100;

package/src/chart/ui/TrackedLineChart.tsx

@@ -25,7 +25,7 @@ export type ChartSeriesKind = 'line' | 'bar';
 export interface ChartSeries {
   /** A stable id, used as the React key and named in the tracking callback. */
   id: string;
-  /** What the legend calls it, e.g. `PC 1`. */
+  /** What the legend calls it, e.g. `PC1`. */
   label: string;
   /** One value per slot, in the slots' order. */
   values: ArrayLike<number>;
@@ -142,6 +142,11 @@ export interface TrackedLineChartProps {
    * @default undefined
    */
   testId?: string;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -155,7 +160,16 @@ export interface TrackedLineChartProps {
  * @returns The chart.
  */
 export function TrackedLineChart(props: TrackedLineChartProps): ReactElement {
-  const { categories, series, width, height, y, trackedIndex, xLabel } = props;
+  const {
+    className,
+    categories,
+    series,
+    width,
+    height,
+    y,
+    trackedIndex,
+    xLabel,
+  } = props;
   const { onTrack, onSelect, overlay, label, testId, maxTickLabels } = props;
   const { tickLabels = categories } = props;
   const [ownIndex, setOwnIndex] = useState<number | null>(null);
@@ -187,6 +201,7 @@ export function TrackedLineChart(props: TrackedLineChartProps): ReactElement {
       margins={margins}
       label={label}
       testId={testId}
+      className={className}
       x={{ domain: [0, slots], showTicks: false, showGrid: false, nice: false }}
       y={{ ...y, domain }}
       overlay={

package/src/chart/ui/TrackedStickChart.tsx

@@ -36,8 +36,6 @@ import {
   valueAt,
 } from './stickChartModel.ts';
 
-export type { ChartStickSeries } from './stickChartModel.ts';
-
 /** What {@link TrackedStickChart} needs. */
 export interface TrackedStickChartProps {
   /**
@@ -91,6 +89,11 @@ export interface TrackedStickChartProps {
    * @default undefined
    */
   testId?: string;
+  /**
+   * Class names added to the root element, after the component's own.
+   * @default undefined
+   */
+  className?: string;
 }
 
 /**
@@ -99,7 +102,8 @@ export interface TrackedStickChartProps {
  * @returns The chart.
  */
 export function TrackedStickChart(props: TrackedStickChartProps): ReactElement {
-  const { positions, categories, series, width, height, y, xLabel } = props;
+  const { className, positions, categories, series, width, height, y, xLabel } =
+    props;
   const { onTrack, label, overlay, testId, trackedIndex } = props;
   const [ownIndex, setOwnIndex] = useState<number | null>(null);
   const held = trackedIndex === undefined ? ownIndex : trackedIndex;
@@ -144,6 +148,7 @@ export function TrackedStickChart(props: TrackedStickChartProps): ReactElement {
       height={height}
       label={label}
       testId={testId}
+      className={className}
       overlay={overlay}
       x={{ domain: across, label: xLabel, showGrid: false }}
       y={{ ...y, domain }}

package/src/chart/ui/chartFrameGeometry.ts

@@ -0,0 +1,53 @@
+import { chartAxisScale } from '../core/chartAxisScale.ts';
+import { chartScale } from '../core/chartScale.ts';
+
+import type {
+  ChartAxisSpec,
+  ChartFrameRender,
+  ChartMargins,
+} from './ChartFrame.tsx';
+import { chartOuterRoom, chartPlotArea } from './chartStyles.ts';
+
+/**
+ * Where a `ChartFrame` puts its plot, and how it maps data into it,
+ * worked out without drawing anything.
+ *
+ * A figure that needs its points in pixels before it renders — to hand a hit
+ * test its positions, which a hook cannot read from inside the frame's render
+ * callback — calls this once and passes the result to the frame as `geometry`.
+ * The frame and the figure then read one answer rather than two that could
+ * drift apart.
+ * @param width - Total width of the figure, in pixels.
+ * @param height - Total height.
+ * @param x - The horizontal axis, as the frame is given it.
+ * @param y - The vertical axis.
+ * @param margins - Room the caller insists on, merged over what the axes ask for.
+ * @returns The plot rectangle, the two data-to-pixel mappings and the two niced axes.
+ */
+export function chartFrameGeometry(
+  width: number,
+  height: number,
+  x: ChartAxisSpec,
+  y: ChartAxisSpec,
+  margins: Partial<ChartMargins> = {},
+): ChartFrameRender {
+  const xAxis = chartAxisScale(x.domain[0], x.domain[1], {
+    count: x.tickCount,
+    nice: x.nice,
+  });
+  const yAxis = chartAxisScale(y.domain[0], y.domain[1], {
+    count: y.tickCount,
+    nice: y.nice,
+  });
+  const plot = chartPlotArea(width, height, margins, {
+    bottom: chartOuterRoom('bottom', x, xAxis),
+    left: chartOuterRoom('left', y, yAxis),
+  });
+  return {
+    plot,
+    x: chartScale(xAxis.domain[0], xAxis.domain[1], plot.left, plot.right),
+    y: chartScale(yAxis.domain[0], yAxis.domain[1], plot.bottom, plot.top),
+    xAxis,
+    yAxis,
+  };
+}

package/src/chart/ui/index.ts

@@ -16,6 +16,7 @@ export type {
   ChartPlotArea,
 } from './ChartFrame.tsx';
 export { ChartFrame } from './ChartFrame.tsx';
+export { chartFrameGeometry } from './chartFrameGeometry.ts';
 export type { ChartSeriesMarksProps } from './ChartSeriesMarks.tsx';
 export { ChartSeriesMarks } from './ChartSeriesMarks.tsx';
 export type { ChartTrackingLayerProps } from './ChartTrackingLayer.tsx';
@@ -27,8 +28,6 @@ export type {
   TrackedLineChartProps,
 } from './TrackedLineChart.tsx';
 export { TrackedLineChart } from './TrackedLineChart.tsx';
-export type {
-  ChartStickSeries,
-  TrackedStickChartProps,
-} from './TrackedStickChart.tsx';
+export type { ChartStickSeries } from './stickChartModel.ts';
+export type { TrackedStickChartProps } from './TrackedStickChart.tsx';
 export { TrackedStickChart } from './TrackedStickChart.tsx';

package/src/chart/ui/stickChartModel.ts

@@ -14,12 +14,13 @@ import {
   chartValuesExtent,
 } from '../core/chartExtent.ts';
 import type { ChartScale } from '../core/chartScale.ts';
+import { chartRoundPixel } from '../core/chartScale.ts';
 
 /** One set of sticks. */
 export interface ChartStickSeries {
   /** A stable id, used as the React key and named in the tracking callback. */
   id: string;
-  /** What the legend calls it, e.g. `PC 1`. */
+  /** What the legend calls it, e.g. `PC1`. */
   label: string;
   /** Where each stick ends, one value per measurement. */
   values: ArrayLike<number>;
@@ -45,7 +46,7 @@ export interface ChartStickSeries {
   muted?: boolean;
 }
 /** What the geometry needs of a drawn frame: the two scales and the rectangle. */
-export interface StickFrame {
+interface StickFrame {
   /** The rectangle to draw in. */
   plot: { top: number; bottom: number; left: number; right: number };
   /** Data to pixels, horizontally. */
@@ -75,8 +76,8 @@ export function stickPath(
     if (at === undefined || value === undefined || !Number.isFinite(value)) {
       continue;
     }
-    const pixelX = round(x.offset + at * x.factor);
-    const top = round(y.offset + value * y.factor);
+    const pixelX = chartRoundPixel(x.offset + at * x.factor, 1);
+    const top = chartRoundPixel(y.offset + value * y.factor, 1);
     const start = item.from === undefined ? foot : startOf(item, index, y);
     if (start === null || !Number.isFinite(top)) continue;
     path += `M${pixelX} ${start}V${top}`;
@@ -98,23 +99,7 @@ function startOf(
 ): number | null {
   const value = item.from?.[index];
   if (value === undefined || !Number.isFinite(value)) return null;
-  return round(y.offset + value * y.factor);
-}
-
-/**
- * Where zero sits, which is what a stick stands on.
- *
- * The frame rules the plot at zero itself whenever the domain crosses it, so
- * this only says where a stick's foot goes and never draws anything.
- * @param frame - The rectangle and the two scales.
- * @returns The pixel, clamped into the plot so a domain above zero still has a
- * foot to stand on.
- */
-export function zeroAt(frame: StickFrame): number {
-  const { plot, y } = frame;
-  const at = y.offset;
-  if (!Number.isFinite(at)) return plot.bottom;
-  return round(Math.min(plot.bottom, Math.max(plot.top, at)));
+  return chartRoundPixel(y.offset + value * y.factor, 1);
 }
 
 /**
@@ -196,6 +181,18 @@ export function valueAt(scale: ChartScale, pixel: number): number {
     : (pixel - scale.offset) / scale.factor;
 }
 
-function round(pixel: number): number {
-  return Math.round(pixel * 10) / 10;
+/**
+ * Where zero sits, which is what a stick stands on.
+ *
+ * The frame rules the plot at zero itself whenever the domain crosses it, so
+ * this only says where a stick's foot goes and never draws anything.
+ * @param frame - The rectangle and the two scales.
+ * @returns The pixel, clamped into the plot so a domain above zero still has a
+ * foot to stand on.
+ */
+function zeroAt(frame: StickFrame): number {
+  const { plot, y } = frame;
+  const at = y.offset;
+  if (!Number.isFinite(at)) return plot.bottom;
+  return chartRoundPixel(Math.min(plot.bottom, Math.max(plot.top, at)), 1);
 }

package/src/chart/ui/useWheelZoom.ts

@@ -3,6 +3,9 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { CHART_WHEEL_SPEED, chartWheelFactor } from '../core/chartViewport.ts';
 
+import type { WheelDwellEvent } from './wheelDwell.ts';
+import { WHEEL_DWELL_IDLE, wheelDwellStep, wheelShare } from './wheelDwell.ts';
+
 /** How long the pointer rests on a chart before its wheel is caught, in ms. */
 export const CHART_WHEEL_DWELL = 500;
 
@@ -63,7 +66,8 @@ export interface WheelZoomApi<T extends Element> {
  * their scroll, however slowly they pass over it — and the momentum a trackpad
  * keeps sending after the fingers lift holds it off for exactly as long as it
  * lasts. A reader who came to look at the picture has already rested on it by
- * the time they reach for the wheel, and pays nothing.
+ * the time they reach for the wheel, and pays nothing. The rules themselves
+ * are in `wheelDwell`; this hook carries them out.
  *
  * The listener is attached by hand rather than through `onWheel`, because
  * React registers that one on the root as passive: `preventDefault` inside a
@@ -83,7 +87,6 @@ export function useWheelZoom<T extends Element>(
   } = options;
 
   const ref = useRef<T | null>(null);
-  const armedRef = useRef(false);
   const [armed, setArmed] = useState(false);
 
   // Held in a ref so the inline arrow every caller writes does not tear the
@@ -98,32 +101,34 @@ export function useWheelZoom<T extends Element>(
     if (target === null || !enabled) return undefined;
 
     let timer: ReturnType<typeof setTimeout> | null = null;
-    function arm(state: boolean): void {
-      armedRef.current = state;
-      setArmed(state);
-    }
-    function rest(): void {
-      if (timer !== null) clearTimeout(timer);
-      timer = setTimeout(() => {
+    let dwell = WHEEL_DWELL_IDLE;
+    function apply(event: WheelDwellEvent): boolean {
+      const step = wheelDwellStep(dwell, event);
+      if (step.timer !== 'keep' && timer !== null) {
+        clearTimeout(timer);
         timer = null;
-        arm(true);
-      }, delay);
-    }
-    function forget(): void {
-      if (timer !== null) clearTimeout(timer);
-      timer = null;
-      arm(false);
+      }
+      if (step.timer === 'restart') {
+        timer = setTimeout(() => {
+          timer = null;
+          apply({ type: 'elapsed' });
+        }, delay);
+      }
+      if (step.state.armed !== dwell.armed) setArmed(step.state.armed);
+      dwell = step.state;
+      return step.zoom;
     }
     function enter(): void {
-      if (!armedRef.current) rest();
+      apply({ type: 'enter' });
     }
     // A pointer already resting over the plot when this was attached — a panel
     // that has just been resized under it — never sends an enter event, so the
-    // dwell also starts on the first move that finds nothing pending. It must
-    // be the first: restarting it on every move would ask the reader to hold
-    // the pointer perfectly still, which is not what resting means.
+    // dwell also starts on a move.
     function move(): void {
-      if (!armedRef.current && timer === null) rest();
+      apply({ type: 'move' });
+    }
+    function forget(): void {
+      apply({ type: 'leave' });
     }
     // An arrow rather than a declaration, and typed as the plain `Event` the
     // element's own listener map hands it: a hoisted function would be told
@@ -131,19 +136,12 @@ export function useWheelZoom<T extends Element>(
     // the guard above.
     const wheel = (event: Event): void => {
       if (!(event instanceof WheelEvent)) return;
-      // A wheel with a button down belongs to the drag that claimed the
-      // pointer: moving the ground under a lasso would leave the outline
-      // pointing at rows nobody drew a ring around.
-      if (event.buttons !== 0) return;
-      if (!armedRef.current) {
-        rest();
-        return;
-      }
+      if (!apply({ type: 'wheel', buttons: event.buttons })) return;
       event.preventDefault();
       const box = target.getBoundingClientRect();
       zoom.current(
-        share(event.clientX - box.left, box.width),
-        share(event.clientY - box.top, box.height),
+        wheelShare(event.clientX - box.left, box.width),
+        wheelShare(event.clientY - box.top, box.height),
         chartWheelFactor(event.deltaY, event.deltaMode, speed),
       );
     };
@@ -163,15 +161,3 @@ export function useWheelZoom<T extends Element>(
 
   return { ref, armed: enabled && armed };
 }
-
-/**
- * How far along a side a position sits, from 0 to 1.
- * @param position - The position, in pixels from the near edge.
- * @param size - The side's length.
- * @returns The share. The middle of an element with no size, which is the only
- * place a pointer can be said to be on one.
- */
-function share(position: number, size: number): number {
-  if (!(size > 0) || !Number.isFinite(position)) return 0.5;
-  return Math.min(1, Math.max(0, position / size));
-}