react-cheminfo 0.27.0 → 0.29.0

package/lib/chart/ui/chartStackLevel.d.ts

@@ -0,0 +1,115 @@
+/**
+ * One level of a chart stack: the pane drawn at it, and everything under it.
+ *
+ * `SplitPane` takes exactly two children, so a stack is a recursion rather than
+ * a list — the pane at each level is the controlled side and is given a height
+ * in pixels, everything below it is the other side and takes what is left. It
+ * stands beside `ChartStack.tsx` rather than inside it so that the component is
+ * the state and this is the picture drawn from it. Why a height is held above a
+ * floor, and why every pane is wrapped in a box of its own, is in that file's
+ * header.
+ *
+ * The pane at the foot has nothing under it and so needs no split at all, and is
+ * given one regardless. React rebuilds whatever sits at a position the moment
+ * the element there changes type, so a pane drawn as a bare box while it is last
+ * and as a split once something is appended under it would be torn down and
+ * stood up again by the appending — and a chart stood up again is empty: it has
+ * to be measured, fitted and drawn from its twenty thousand points before it is
+ * a picture of anything. Every pane is therefore a split, the last one holding
+ * nothing on its other side, which is exactly what makes it draw no splitter and
+ * answer no drag.
+ */
+import type { ReactNode } from 'react';
+import type { SplitPaneSize } from 'react-science/ui';
+/** One pane of the stack, and how tall it stands. */
+export interface ChartStackPane {
+    /**
+     * Identity, which is what a height is remembered against.
+     *
+     * A pane leaves the stack whenever what it draws stops existing, and comes
+     * back when it exists again. The height is held against this rather than
+     * against the pane's place in the array, so a pane that returns returns the
+     * size it was left at rather than at its default.
+     */
+    id: string;
+    /** What is drawn in it — a chart, and whatever bar is drawn over it. */
+    content: ReactNode;
+    /**
+     * How tall it stands the first time it is stacked, in pixels.
+     *
+     * A default rather than a controlled value: the stack holds the live height
+     * from then on, so a viewer restoring a layout it saved hands it in here and
+     * hears every later change back through `onHeightChange`. A change to this
+     * number afterwards is ignored, the way a defaulted prop always is — what is
+     * on screen is what a chemist dragged it to.
+     * @default 220
+     */
+    defaultHeight?: number;
+    /**
+     * The shortest it may be dragged to, in pixels.
+     *
+     * A hundred and twenty is a plot that still reads: `MARGIN` spends 44 of them
+     * on the tick row and the axis title, which leaves the trace the rest of it.
+     * @default 120
+     */
+    minimumHeight?: number;
+}
+/** Everything one level of the nesting needs to draw itself and the rest. */
+export interface StackLevel {
+    /** Every pane of the stack, top to bottom. */
+    panes: readonly ChartStackPane[];
+    /**
+     * How tall a pane stands.
+     * @param pane - The pane to measure.
+     * @returns Its height, in pixels.
+     */
+    heightOf: (pane: ChartStackPane) => number;
+    /**
+     * Take what a drag in progress is asking for.
+     * @param pane - The pane being resized.
+     * @param asked - The size its splitter asked for.
+     */
+    resize: (pane: ChartStackPane, asked: SplitPaneSize) => void;
+    /**
+     * Take where a drag came to rest.
+     * @param pane - The pane that was resized.
+     * @param asked - The size its splitter was let go at.
+     */
+    rest: (pane: ChartStackPane, asked: SplitPaneSize) => void;
+}
+/**
+ * The pane at one level of the stack, and everything under it.
+ *
+ * The pane at the foot is given the whole of what it is handed rather than a
+ * height, since there is nothing under it to leave room for, and it is given
+ * neither a close threshold nor anywhere to report a drag: a split with nothing
+ * on its other side draws no splitter, so there is no drag to report and nothing
+ * to close it against — a threshold there would hide the only pane on a stack
+ * squeezed short.
+ * @param level - The panes and what is done with a drag on them.
+ * @param index - Which pane this level draws.
+ * @returns The pane split against the rest below it, the pane alone in a split
+ * of its own at the foot of the stack, and nothing at all for a stack of no
+ * panes.
+ */
+export declare function stackFrom(level: StackLevel, index: number): ReactNode;
+/**
+ * How tall a pane stands, given the height it was last left at.
+ *
+ * The floor is applied to the default as much as to a stored height: a pane
+ * asking for 40 pixels against a minimum of 150 would otherwise draw the stub
+ * with a full set of axes over it that the header of `ChartStack.tsx` describes,
+ * on its first render and until somebody touched a splitter.
+ * @param pane - The pane to measure.
+ * @param stored - The height it was left at, absent until one is dragged.
+ * @returns Its height, in pixels.
+ */
+export declare function paneHeight(pane: ChartStackPane, stored: number | undefined): number;
+/**
+ * The height to keep, given what a splitter asked for.
+ * @param asked - The size the splitter reported, in the pixels it was handed.
+ * @param pane - The pane it belongs to, for its minimum.
+ * @returns The height to store, `null` for a size that is not a length at all.
+ */
+export declare function keptHeight(asked: SplitPaneSize, pane: ChartStackPane): number | null;
+//# sourceMappingURL=chartStackLevel.d.ts.map

package/lib/chart/ui/chartStackLevel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartStackLevel.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/chartStackLevel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,qDAAqD;AACrD,MAAM,WAAW,cAAc;IAC7B;;;;;;;OAOG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,6EAA6E;AAC7E,MAAM,WAAW,UAAU;IACzB,8CAA8C;IAC9C,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,MAAM,CAAC;IAC3C;;;;OAIG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D;;;;OAIG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAyBrE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,MAAM,GAAG,SAAS,GACzB,MAAM,CAKR;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,aAAa,EACpB,IAAI,EAAE,cAAc,GACnB,MAAM,GAAG,IAAI,CAIf"}

package/lib/chart/ui/chartStackLevel.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SplitPane } from 'react-science/ui';
+/**
+ * The pane at one level of the stack, and everything under it.
+ *
+ * The pane at the foot is given the whole of what it is handed rather than a
+ * height, since there is nothing under it to leave room for, and it is given
+ * neither a close threshold nor anywhere to report a drag: a split with nothing
+ * on its other side draws no splitter, so there is no drag to report and nothing
+ * to close it against — a threshold there would hide the only pane on a stack
+ * squeezed short.
+ * @param level - The panes and what is done with a drag on them.
+ * @param index - Which pane this level draws.
+ * @returns The pane split against the rest below it, the pane alone in a split
+ * of its own at the foot of the stack, and nothing at all for a stack of no
+ * panes.
+ */
+export function stackFrom(level, index) {
+    const { panes, heightOf, resize, rest } = level;
+    const pane = panes[index];
+    if (pane === undefined)
+        return null;
+    const under = stackFrom(level, index + 1);
+    const isLast = under === null;
+    return (_jsxs(SplitPane, { direction: "vertical", controlledSide: "start", size: isLast ? WHOLE_STACK : `${heightOf(pane)}px`, onSizeChange: isLast ? undefined : (asked) => resize(pane, asked), onResize: isLast ? undefined : (asked) => rest(pane, asked), closeThreshold: isLast ? undefined : CLOSE_THRESHOLD, unmountChildren: false, children: [_jsx("div", { "data-chart-pane": pane.id, style: paneStyle, children: pane.content }, pane.id), under] }, pane.id));
+}
+/**
+ * How tall a pane stands, given the height it was last left at.
+ *
+ * The floor is applied to the default as much as to a stored height: a pane
+ * asking for 40 pixels against a minimum of 150 would otherwise draw the stub
+ * with a full set of axes over it that the header of `ChartStack.tsx` describes,
+ * on its first render and until somebody touched a splitter.
+ * @param pane - The pane to measure.
+ * @param stored - The height it was left at, absent until one is dragged.
+ * @returns Its height, in pixels.
+ */
+export function paneHeight(pane, stored) {
+    return Math.max(stored ?? pane.defaultHeight ?? DEFAULT_PANE_HEIGHT, floorOf(pane));
+}
+/**
+ * The height to keep, given what a splitter asked for.
+ * @param asked - The size the splitter reported, in the pixels it was handed.
+ * @param pane - The pane it belongs to, for its minimum.
+ * @returns The height to store, `null` for a size that is not a length at all.
+ */
+export function keptHeight(asked, pane) {
+    const value = Number.parseFloat(asked);
+    if (!Number.isFinite(value))
+        return null;
+    return Math.max(value, floorOf(pane));
+}
+/**
+ * The shortest a pane may stand, whether it said so itself or not.
+ * @param pane - The pane being held up.
+ * @returns Its floor, in pixels.
+ */
+function floorOf(pane) {
+    return pane.minimumHeight ?? MINIMUM_PANE_HEIGHT;
+}
+/** How tall a pane stands when nobody has said, in pixels. */
+const DEFAULT_PANE_HEIGHT = 220;
+/** The shortest a pane may be dragged to when nobody has said, in pixels. */
+const MINIMUM_PANE_HEIGHT = 120;
+/**
+ * What the pane at the foot is given, having nothing under it to leave room for.
+ *
+ * A share rather than a length: handed a percentage, `SplitPane` lays its
+ * controlled side out as a flexible share instead of at a fixed height, so the
+ * pane takes whatever the panes above it left rather than standing at some
+ * number and leaving a gap under itself.
+ */
+const WHOLE_STACK = '100%';
+/**
+ * The height below which a split closes its pane rather than squeezing it.
+ *
+ * A stack squeezed to under ninety pixels has no room for a chart of any kind,
+ * and that is under the shortest pane this stack will otherwise keep.
+ * `SplitPane` stops doing this the moment a splitter is touched, so it settles
+ * what a pane does before anyone has an opinion and nothing after that.
+ */
+const CLOSE_THRESHOLD = 90;
+/**
+ * The box one pane fills — `minHeight: 0` is the whole reason it exists rather
+ * than the pane's content sitting in the split itself; see the header of
+ * `ChartStack.tsx`.
+ */
+const paneStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 0%',
+    minWidth: 0,
+    minHeight: 0,
+    overflow: 'hidden',
+};
+//# sourceMappingURL=chartStackLevel.js.map

package/lib/chart/ui/chartStackLevel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartStackLevel.js","sourceRoot":"","sources":["../../../src/chart/ui/chartStackLevel.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA4D7C;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,SAAS,CAAC,KAAiB,EAAE,KAAa;IACxD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1B,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAEpC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC;IAE9B,OAAO,CACL,MAAC,SAAS,IAER,SAAS,EAAC,UAAU,EACpB,cAAc,EAAC,OAAO,EACtB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAClD,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,EACjE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,EAC3D,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,EACpD,eAAe,EAAE,KAAK,aAEtB,iCAAoC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,YAC1D,IAAI,CAAC,OAAO,IADL,IAAI,CAAC,EAAE,CAEX,EACL,KAAK,KAZD,IAAI,CAAC,EAAE,CAaF,CACb,CAAC;AACJ,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,UAAU,CACxB,IAAoB,EACpB,MAA0B;IAE1B,OAAO,IAAI,CAAC,GAAG,CACb,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,mBAAmB,EACnD,OAAO,CAAC,IAAI,CAAC,CACd,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,KAAoB,EACpB,IAAoB;IAEpB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACzC,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,CAAC;AAED;;;;GAIG;AACH,SAAS,OAAO,CAAC,IAAoB;IACnC,OAAO,IAAI,CAAC,aAAa,IAAI,mBAAmB,CAAC;AACnD,CAAC;AAED,8DAA8D;AAC9D,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEhC,6EAA6E;AAC7E,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEhC;;;;;;;GAOG;AACH,MAAM,WAAW,GAAkB,MAAM,CAAC;AAE1C;;;;;;;GAOG;AACH,MAAM,eAAe,GAAG,EAAE,CAAC;AAE3B;;;;GAIG;AACH,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,QAAQ,EAAE,QAAQ;CACV,CAAC"}

package/lib/chart/ui/chartSurface.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The style the SVG a chart is drawn on carries, and the one thing about it
+ * that moves: the cursor.
+ *
+ * A chart drawing its own crosshair has two pointers on it — the dashed rules
+ * that read the axes, and the operating system's arrow beside them — and only
+ * one of the two is saying anything. The arrow is also the one in the way: it
+ * is drawn down and to the right of its own hot spot, which is exactly where
+ * the crosshair meets and exactly the place being read. So the arrow is hidden
+ * while the crosshair is up, and it comes back the moment the pointer leaves
+ * the plot, where there is no crosshair and the margins are ordinary furniture.
+ *
+ * `target` is why this is a function rather than a constant. Something under
+ * the pointer can be opened — a ring on a peak a survey scan was fragmented at
+ * — and a cursor that never changes is a chart with no way of saying so. The
+ * hand wins over the hidden arrow, and the crosshair goes on being drawn under
+ * it, since where you are is still worth reading while you decide to click.
+ *
+ * One helper for every chart in this package rather than a `svgStyle` constant
+ * in each: a mass spectrum stacked under a chromatogram is two charts a reader
+ * takes to be one instrument, and an arrow over one of them and nothing over
+ * the other is the sort of difference that reads as a fault.
+ */
+import type { CSSProperties } from 'react';
+/**
+ * What the SVG a chart is drawn on is styled with.
+ * @param tracked - Whether the chart is drawing its crosshair where the pointer
+ *   is, which is true exactly while the pointer is over the plot.
+ * @param target - Whether what is under the pointer can be clicked open.
+ *   Defaults to `false`, which is every chart offering nothing to click.
+ * @returns The style, one of three objects that never change — a fresh one per
+ * pointer move would replace the `style` prop on every tremor of a hand.
+ */
+export declare function chartSurfaceStyle(tracked: boolean, target?: boolean): CSSProperties;
+//# sourceMappingURL=chartSurface.d.ts.map

package/lib/chart/ui/chartSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartSurface.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/chartSurface.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,OAAO,EAChB,MAAM,UAAQ,GACb,aAAa,CAGf"}

package/lib/chart/ui/chartSurface.js

@@ -0,0 +1,58 @@
+/**
+ * The style the SVG a chart is drawn on carries, and the one thing about it
+ * that moves: the cursor.
+ *
+ * A chart drawing its own crosshair has two pointers on it — the dashed rules
+ * that read the axes, and the operating system's arrow beside them — and only
+ * one of the two is saying anything. The arrow is also the one in the way: it
+ * is drawn down and to the right of its own hot spot, which is exactly where
+ * the crosshair meets and exactly the place being read. So the arrow is hidden
+ * while the crosshair is up, and it comes back the moment the pointer leaves
+ * the plot, where there is no crosshair and the margins are ordinary furniture.
+ *
+ * `target` is why this is a function rather than a constant. Something under
+ * the pointer can be opened — a ring on a peak a survey scan was fragmented at
+ * — and a cursor that never changes is a chart with no way of saying so. The
+ * hand wins over the hidden arrow, and the crosshair goes on being drawn under
+ * it, since where you are is still worth reading while you decide to click.
+ *
+ * One helper for every chart in this package rather than a `svgStyle` constant
+ * in each: a mass spectrum stacked under a chromatogram is two charts a reader
+ * takes to be one instrument, and an arrow over one of them and nothing over
+ * the other is the sort of difference that reads as a fault.
+ */
+/**
+ * What the SVG a chart is drawn on is styled with.
+ * @param tracked - Whether the chart is drawing its crosshair where the pointer
+ *   is, which is true exactly while the pointer is over the plot.
+ * @param target - Whether what is under the pointer can be clicked open.
+ *   Defaults to `false`, which is every chart offering nothing to click.
+ * @returns The style, one of three objects that never change — a fresh one per
+ * pointer move would replace the `style` prop on every tremor of a hand.
+ */
+export function chartSurfaceStyle(tracked, target = false) {
+    if (!tracked)
+        return IDLE_SURFACE;
+    return target ? TARGET_SURFACE : TRACKED_SURFACE;
+}
+/**
+ * Everything about the surface that is not the cursor.
+ *
+ * `touchAction` because every gesture is a pointer gesture and a browser that
+ * scrolled the page instead would take the drag with it; `userSelect` because a
+ * drag across a chart is a gesture and not a selection — without it the tick
+ * labels come up highlighted behind the rectangle, and stay highlighted in the
+ * picture the chart is exported as.
+ */
+const SURFACE = {
+    display: 'block',
+    touchAction: 'none',
+    userSelect: 'none',
+};
+/** The pointer is off the plot: whatever cursor the page would have shown. */
+const IDLE_SURFACE = { ...SURFACE };
+/** The chart is drawing the crosshair, so the arrow beside it is hidden. */
+const TRACKED_SURFACE = { ...SURFACE, cursor: 'none' };
+/** Something under the pointer can be opened. */
+const TARGET_SURFACE = { ...SURFACE, cursor: 'pointer' };
+//# sourceMappingURL=chartSurface.js.map

package/lib/chart/ui/chartSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartSurface.js","sourceRoot":"","sources":["../../../src/chart/ui/chartSurface.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH;;;;;;;;GAQG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAAgB,EAChB,MAAM,GAAG,KAAK;IAEd,IAAI,CAAC,OAAO;QAAE,OAAO,YAAY,CAAC;IAClC,OAAO,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC;AACnD,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,OAAO,GAAG;IACd,OAAO,EAAE,OAAO;IAChB,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,MAAM;CACV,CAAC;AAEX,8EAA8E;AAC9E,MAAM,YAAY,GAAkB,EAAE,GAAG,OAAO,EAAE,CAAC;AAEnD,4EAA4E;AAC5E,MAAM,eAAe,GAAkB,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAEtE,iDAAiD;AACjD,MAAM,cAAc,GAAkB,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC"}

package/lib/chart/ui/index.d.ts

@@ -19,4 +19,28 @@ export { TrackedLineChart } from './TrackedLineChart.tsx';
 export type { ChartStickSeries } from './stickChartModel.ts';
 export type { TrackedStickChartProps } from './TrackedStickChart.tsx';
 export { TrackedStickChart } from './TrackedStickChart.tsx';
+export type { AxesProps } from './Axes.tsx';
+export { Axes } from './Axes.tsx';
+export type { AxisGuideProps } from './AxisGuide.tsx';
+export { AxisGuide } from './AxisGuide.tsx';
+export type { ChartStackPane, ChartStackProps } from './ChartStack.tsx';
+export { ChartStack } from './ChartStack.tsx';
+export type { ChartTrackerProps } from './ChartTracker.tsx';
+export { ChartTracker } from './ChartTracker.tsx';
+export type { PlotCaptionProps } from './PlotCaption.tsx';
+export { PlotCaption } from './PlotCaption.tsx';
+export type { SelectionRectProps } from './SelectionRect.tsx';
+export { SelectionRect } from './SelectionRect.tsx';
+export type { LegendEntry, TraceLegendProps } from './TraceLegend.tsx';
+export { TraceLegend } from './TraceLegend.tsx';
+export type { ChartClickModifiers } from './chartGestures.ts';
+export { NO_MODIFIERS } from './chartGestures.ts';
+export { chartSurfaceStyle } from './chartSurface.ts';
+export type { ChartPointer, ChartPointerOptions } from './useChartPointer.ts';
+export { isInsidePlot, leftChart, nextChartPointer, sameReading, useChartPointer, } from './useChartPointer.ts';
+export type { ChartSizeHandle } from './useChartSize.ts';
+export { nextChartSize, useChartSize } from './useChartSize.ts';
+export type { ChartZoom, ChartZoomHandlers, ChartZoomOptions, } from './useChartZoom.ts';
+export { useChartZoom } from './useChartZoom.ts';
+export { useWheelListener } from './useWheelListener.ts';
 //# sourceMappingURL=index.d.ts.map

package/lib/chart/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EACV,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAa,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EACV,WAAW,EACX,eAAe,EACf,eAAe,EACf,qBAAqB,GACtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EACV,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAa,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EACV,WAAW,EACX,eAAe,EACf,eAAe,EACf,qBAAqB,GACtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EACL,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAChE,YAAY,EACV,SAAS,EACT,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/chart/ui/index.js

@@ -11,4 +11,17 @@ export { ChartSeriesMarks } from "./ChartSeriesMarks.js";
 export { ChartTrackingLayer } from "./ChartTrackingLayer.js";
 export { TrackedLineChart } from "./TrackedLineChart.js";
 export { TrackedStickChart } from "./TrackedStickChart.js";
+export { Axes } from "./Axes.js";
+export { AxisGuide } from "./AxisGuide.js";
+export { ChartStack } from "./ChartStack.js";
+export { ChartTracker } from "./ChartTracker.js";
+export { PlotCaption } from "./PlotCaption.js";
+export { SelectionRect } from "./SelectionRect.js";
+export { TraceLegend } from "./TraceLegend.js";
+export { NO_MODIFIERS } from "./chartGestures.js";
+export { chartSurfaceStyle } from "./chartSurface.js";
+export { isInsidePlot, leftChart, nextChartPointer, sameReading, useChartPointer, } from "./useChartPointer.js";
+export { nextChartSize, useChartSize } from "./useChartSize.js";
+export { useChartZoom } from "./useChartZoom.js";
+export { useWheelListener } from "./useWheelListener.js";
 //# sourceMappingURL=index.js.map

package/lib/chart/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/chart/ui/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAQ5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAA0B,CAAC;AAO9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/chart/ui/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAQ5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAA0B,CAAC;AAO9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAG5D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EACL,YAAY,EACZ,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMhE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/chart/ui/useChartPointer.d.ts

@@ -0,0 +1,124 @@
+/**
+ * Where the pointer is over a chart, and what that place means.
+ *
+ * What it *means* is the one thing this hook does not decide. A mass spectrum
+ * reads an m/z, an intensity and the peak within reach; an infrared spectrum
+ * reads a wavenumber, an absorbance and the band it falls in. Both are the same
+ * mechanism — place the pointer in user units, refuse the margins, and report
+ * only when the answer changed — so the mechanism is here and the reading is
+ * handed in.
+ *
+ * Every value is compared before it is stored or reported. A pointer resting on
+ * one feature fires `pointermove` on every sub-pixel tremor of a hand, and a
+ * fresh answer each time would re-render the panel beside the chart — and, where
+ * that panel is a linked viewer that reports its own hovers back, would
+ * ping-pong between the two until the tab stops answering.
+ */
+import type { RefObject } from 'react';
+import type { PlotRect } from '../core/chartGeometry.ts';
+import type { ChartPoint } from '../core/svgPoint.ts';
+/** Where the pointer is, and what that place means. */
+export interface ChartPointer<TReadout> {
+    /** Its position in user units, `null` whenever it is off the plot. */
+    position: ChartPoint | null;
+    /** What the chart reads under it, `null` whenever it is off the plot. */
+    readout: TReadout | null;
+}
+export interface ChartPointerOptions<TReadout> {
+    /** The SVG the chart is drawn on, as it was handed to its `ref`. */
+    svgRef: RefObject<SVGSVGElement | null>;
+    /**
+     * Where the plot sits inside that SVG. The pointer is only followed inside
+     * it: the margins carry the axis labels, and a crosshair drawn across them
+     * claims to read a value off a place where none is drawn.
+     */
+    plot: PlotRect;
+    /**
+     * What the chart reads at a point. Called on every move the pointer makes
+     * inside the plot, and read live rather than closed over, so it may capture
+     * the scales as they are currently zoomed.
+     */
+    read: (point: ChartPoint) => TReadout;
+    /**
+     * Whether two readings say the same thing, which is what suppresses the
+     * report of a hand resting still.
+     *
+     * A viewer normally compares less than the whole reading: the pointer's own
+     * position has already been compared by the time this is asked, so what is
+     * left is whichever *feature* the reading is about — the peak, the band — and
+     * not the fractional value under the crosshair, which changes on every pixel.
+     */
+    sameReadout: (current: TReadout, next: TReadout) => boolean;
+    /**
+     * Told what the chart reads under the pointer, and told `null` when it leaves
+     * the plot — called only when `sameReadout` says the answer changed, so it is
+     * safe to hang a highlight that redraws half the page on it.
+     * @default undefined
+     */
+    onReadout?: (readout: TReadout | null) => void;
+}
+/**
+ * Follow the pointer over a chart.
+ *
+ * The listeners are attached to the element rather than returned as props, so
+ * that a chart already spreading another hook's `onPointerMove` onto its SVG
+ * does not have to merge two handlers into one — and so that the options are
+ * read live, at the moment the pointer moves, rather than closed over when the
+ * listener was attached.
+ *
+ * The pointer leaving is heard as `pointerout` and not as the `pointerleave`
+ * that reads so much more naturally, because a chart with a control laid over
+ * it — a legend whose rows answer a hover — has two writers of one highlight
+ * and they must be sequenced. React synthesises the overlay's `pointerenter`
+ * from the *earlier* `pointerout` and dispatches it at the root, so a browser
+ * fires `pointerout` on the SVG, then React's `onPointerEnter` on the row, then
+ * `pointerleave` on the SVG: listening for the leave puts this hook's "nothing
+ * is under the pointer" **after** the row's "this trace is being read", and
+ * wipes it. Heard as `pointerout`, the report lands first and the row has the
+ * last word. The containment test is what `pointerleave` was giving for free.
+ * @param options - The chart, and how to read a point on it.
+ * @returns Where the pointer is and what it reads, both `null` while it is
+ * anywhere but over the plot.
+ */
+export declare function useChartPointer<TReadout>(options: ChartPointerOptions<TReadout>): ChartPointer<TReadout>;
+/**
+ * Whether a `pointerout` means the pointer has left the chart.
+ *
+ * It also fires on the way *into* a child of the SVG — a trace, a label, the
+ * rectangle behind a legend — which is not leaving the chart at all, and is the
+ * one thing `pointerleave` was giving for free.
+ * @param svg - The chart, `null` before it is on screen.
+ * @param related - What the pointer moved onto, `null` when it left the window
+ * altogether.
+ * @returns Whether the chart no longer has the pointer.
+ */
+export declare function leftChart(svg: Element | null, related: EventTarget | null): boolean;
+/**
+ * Whether two readings — either of which may be absent — say the same thing.
+ * @param current - What was last read, `null` while the pointer was away.
+ * @param next - What has just been read, `null` when it has left the plot.
+ * @param sameReadout - The viewer's own comparison.
+ * @returns Whether the report can be skipped.
+ */
+export declare function sameReading<TReadout>(current: TReadout | null, next: TReadout | null, sameReadout: (current: TReadout, next: TReadout) => boolean): boolean;
+/**
+ * What to hold, given where the pointer has just been seen.
+ *
+ * The answer already held comes back whenever it still stands, so the whole
+ * chart is left alone while a hand rests on a feature — `pointermove` fires on
+ * every tremor, and several of those land on the very same user-unit position.
+ * @param current - What is held.
+ * @param next - What has just been read.
+ * @param sameReadout - The viewer's own comparison, asked only once the pointer
+ * turns out not to have moved.
+ * @returns `current` itself when it already says it, `next` otherwise.
+ */
+export declare function nextChartPointer<TReadout>(current: ChartPointer<TReadout>, next: ChartPointer<TReadout>, sameReadout: (current: TReadout, next: TReadout) => boolean): ChartPointer<TReadout>;
+/**
+ * Whether a point is over the data rather than over an axis.
+ * @param plot - Where the plot sits inside the SVG.
+ * @param point - The point to test, in user units.
+ * @returns Whether it is inside the plot, edges included.
+ */
+export declare function isInsidePlot(plot: PlotRect, point: ChartPoint): boolean;
+//# sourceMappingURL=useChartPointer.d.ts.map

package/lib/chart/ui/useChartPointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartPointer.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/useChartPointer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtD,uDAAuD;AACvD,MAAM,WAAW,YAAY,CAAC,QAAQ;IACpC,sEAAsE;IACtE,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,yEAAyE;IACzE,OAAO,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB,CAAC,QAAQ;IAC3C,oEAAoE;IACpE,MAAM,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACxC;;;;OAIG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;OAIG;IACH,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,QAAQ,CAAC;IACtC;;;;;;;;OAQG;IACH,WAAW,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;IAC5D;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EACtC,OAAO,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GACrC,YAAY,CAAC,QAAQ,CAAC,CA6CxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,OAAO,GAAG,IAAI,EACnB,OAAO,EAAE,WAAW,GAAG,IAAI,GAC1B,OAAO,CAGT;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAClC,OAAO,EAAE,QAAQ,GAAG,IAAI,EACxB,IAAI,EAAE,QAAQ,GAAG,IAAI,EACrB,WAAW,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,KAAK,OAAO,GAC1D,OAAO,CAIT;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EACvC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,EAC/B,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,EAC5B,WAAW,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,KAAK,OAAO,GAC1D,YAAY,CAAC,QAAQ,CAAC,CAcxB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,OAAO,CAOvE"}