react-cheminfo 0.15.0 → 0.16.0

package/lib/parallel/ui/parallelPlotModel.js

@@ -0,0 +1,113 @@
+/**
+ * The small answers the figure needs before it renders: how many rows there
+ * are, what is colouring the lines, which rows are drawn over the mass, and
+ * what a screen reader is told.
+ *
+ * Kept out of the component for the reason `scatterPlotModel.ts` is: none of
+ * them needs React to be read or checked, and a component that is mostly
+ * arithmetic is a component nobody can see the layout in.
+ */
+import { formatInteger } from "../../format/core/numbers.js";
+/**
+ * How many rows the figure draws.
+ * @param axes - The axes, whose columns are read.
+ * @param count - What the caller insists on, if anything.
+ * @returns The count — the shortest column, so no axis is ever read past its
+ * own end.
+ */
+export function parallelRowCount(axes, count) {
+    if (count !== undefined)
+        return Math.max(0, Math.trunc(count));
+    let shortest = 0;
+    for (let index = 0; index < axes.length; index++) {
+        const axis = axes[index];
+        if (axis === undefined)
+            continue;
+        const length = axis.values.length;
+        if (index === 0 || length < shortest)
+            shortest = length;
+    }
+    return shortest;
+}
+/**
+ * The quantity the lines are coloured by.
+ * @param color - The quantity the caller gave outright.
+ * @param colorAxis - The id of an axis already drawn, for the common case.
+ * @param axes - The axes, to find that id among.
+ * @returns The quantity, or `undefined` when the lines all take one ink. An
+ * axis named by `colorAxis` lends its own domain as well as its values, so the
+ * ramp and the axis beside it read the same range.
+ */
+export function parallelColorOf(color, colorAxis, axes) {
+    if (color !== undefined)
+        return color;
+    if (colorAxis === undefined)
+        return undefined;
+    for (const axis of axes) {
+        if (axis.id !== colorAxis)
+            continue;
+        const domain = axis.domain;
+        if (domain === undefined)
+            return { values: axis.values };
+        return {
+            values: axis.values,
+            min: Math.min(domain[0], domain[1]),
+            max: Math.max(domain[0], domain[1]),
+            logarithmic: axis.scale === 'log',
+        };
+    }
+    return undefined;
+}
+/**
+ * Whether any axis on the figure carries an interval at all.
+ * @param axes - The axes, whose ids the intervals are keyed by.
+ * @param ranges - The interval each axis keeps.
+ * @returns Whether anything is brushed, which is what decides whether a line
+ * is ever drawn in the excluded ink.
+ */
+export function parallelIsBrushed(axes, ranges) {
+    for (const axis of axes) {
+        const range = ranges[axis.id];
+        if (range !== null && range !== undefined)
+            return true;
+    }
+    return false;
+}
+/**
+ * The rows drawn over the mass, in the order they are painted.
+ * @param selected - The rows singled out elsewhere.
+ * @param hovered - The row under the pointer, or `-1`.
+ * @param selectionInk - The ink a singled-out row takes.
+ * @param hoverInk - The ink the hovered row takes.
+ * @returns The highlights, the hovered row last so that it paints on top and
+ * a row that is both selected and hovered is drawn once rather than twice.
+ */
+export function parallelHighlightsOf(selected, hovered, selectionInk, hoverInk) {
+    const highlights = [];
+    if (selected !== undefined) {
+        for (const row of selected) {
+            if (row < 0 || row === hovered)
+                continue;
+            highlights.push({ row, color: selectionInk });
+        }
+    }
+    if (hovered >= 0)
+        highlights.push({ row: hovered, color: hoverInk });
+    return highlights;
+}
+/**
+ * What a screen reader is told the figure shows.
+ * @param axes - The axes, from left to right.
+ * @param count - How many rows are drawn.
+ * @returns The sentence, naming every axis and how much is on the figure.
+ */
+export function parallelFigureLabel(axes, count) {
+    const names = [];
+    for (const axis of axes)
+        names.push(axis.label);
+    const rows = count === 1 ? '1 row' : `${formatInteger(count)} rows`;
+    if (names.length === 0)
+        return `Parallel coordinates of ${rows}.`;
+    return `Parallel coordinates of ${rows}, on ${names.join(', ')}.`;
+}
+//# sourceMappingURL=parallelPlotModel.js.map

package/lib/parallel/ui/parallelPlotModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallelPlotModel.js","sourceRoot":"","sources":["../../../src/parallel/ui/parallelPlotModel.ts"],"names":[],"mappings":"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"}

package/lib/parallel/ui/parallelStyles.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Every rule the figure is drawn with.
+ *
+ * The library ships no stylesheet for a figure — a chart writes inline style
+ * objects, so a site that never renders one pays nothing and a site that does
+ * cannot forget to import a file. The two colours that are not fixed here, the
+ * axis ink and the band's, are resolved off the page by `parallelInk.ts` and
+ * written onto the elements, so an override applies to the canvas and to the
+ * markup alike.
+ */
+import type { CSSProperties } from 'react';
+/** A layer covering the whole figure, stacked over the ones before it. */
+export declare const PARALLEL_LAYER_STYLE: {
+    readonly position: "absolute";
+    readonly inset: 0;
+};
+/**
+ * The block the figure occupies, which every layer is positioned against.
+ * @param height - Total height of the figure, in pixels.
+ * @returns The wrapper's rules.
+ */
+export declare function parallelFigureStyle(height: number): CSSProperties;
+/**
+ * One of the two canvases, stretched over the figure.
+ * @param height - Total height of the figure, in pixels.
+ * @returns The canvas's rules.
+ */
+export declare function parallelCanvasStyle(height: number): CSSProperties;
+/** The drawing surface the axes, the bands and the pointer target live in. */
+export declare const PARALLEL_SVG_STYLE: {
+    readonly display: "block";
+    readonly overflow: "visible";
+    readonly position: "absolute";
+    readonly inset: 0;
+};
+/**
+ * The layer the axis names sit in. It is HTML rather than SVG text so that a
+ * name can carry a tooltip, and it lets every pointer event through so that a
+ * brush started under a name still starts.
+ */
+export declare const PARALLEL_LABELS_STYLE: {
+    readonly pointerEvents: "none";
+    readonly position: "absolute";
+    readonly inset: 0;
+};
+/**
+ * One axis name, centred over its axis and taking the pointer back.
+ * @param left - Where the axis stands, in pixels from the figure's left edge.
+ * @returns The name's rules.
+ */
+export declare function parallelLabelStyle(left: number): CSSProperties;
+/** One tick written out, tabular so a column of them lines up on the point. */
+export declare const PARALLEL_TICK_LABEL_STYLE: {
+    readonly fontSize: 10;
+    readonly fontVariantNumeric: "tabular-nums";
+    readonly userSelect: "none";
+};
+/** How far a tick mark reaches out of the axis, in pixels. */
+export declare const PARALLEL_TICK_LENGTH = 4;
+/** How far a tick label ends before its axis. */
+export declare const PARALLEL_TICK_LABEL_INSET = 7;
+/**
+ * The interval one brush keeps, filled in the site's own colour.
+ * @param ink - The colour to fill and outline it in.
+ * @returns The band's rules.
+ */
+export declare function parallelBandStyle(ink: string): CSSProperties;
+/**
+ * Either edge of a band, drawn so the reader can see it can be dragged.
+ * @param ink - The colour to draw it in.
+ * @returns The handle's rules.
+ */
+export declare function parallelHandleStyle(ink: string): CSSProperties;
+/** How tall an edge handle is drawn, in pixels. */
+export declare const PARALLEL_HANDLE_HEIGHT = 3;
+/**
+ * The card over the row under the pointer.
+ * @param left - Where it sits, in pixels from the figure's left edge.
+ * @param top - Where it sits, in pixels from its top edge.
+ * @returns The card's rules.
+ */
+export declare function parallelTooltipStyle(left: number, top: number): CSSProperties;
+//# sourceMappingURL=parallelStyles.d.ts.map

package/lib/parallel/ui/parallelStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallelStyles.d.ts","sourceRoot":"","sources":["../../../src/parallel/ui/parallelStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,0EAA0E;AAC1E,eAAO,MAAM,oBAAoB;;;CAGC,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAMjE;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAMjE;AAED,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB;;;;;CAIG,CAAC;AAEnC;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;;;;CAGA,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAY9D;AAED,+EAA+E;AAC/E,eAAO,MAAM,yBAAyB;;;;CAIJ,CAAC;AAEnC,8DAA8D;AAC9D,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAEtC,iDAAiD;AACjD,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAO5D;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAE9D;AAED,mDAAmD;AACnD,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,aAAa,CAiB7E"}

package/lib/parallel/ui/parallelStyles.js

@@ -0,0 +1,131 @@
+/**
+ * Every rule the figure is drawn with.
+ *
+ * The library ships no stylesheet for a figure — a chart writes inline style
+ * objects, so a site that never renders one pays nothing and a site that does
+ * cannot forget to import a file. The two colours that are not fixed here, the
+ * axis ink and the band's, are resolved off the page by `parallelInk.ts` and
+ * written onto the elements, so an override applies to the canvas and to the
+ * markup alike.
+ */
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+/** A layer covering the whole figure, stacked over the ones before it. */
+export const PARALLEL_LAYER_STYLE = {
+    position: 'absolute',
+    inset: 0,
+};
+/**
+ * The block the figure occupies, which every layer is positioned against.
+ * @param height - Total height of the figure, in pixels.
+ * @returns The wrapper's rules.
+ */
+export function parallelFigureStyle(height) {
+    return {
+        position: 'relative',
+        height: Math.max(0, height),
+        minWidth: 0,
+    };
+}
+/**
+ * One of the two canvases, stretched over the figure.
+ * @param height - Total height of the figure, in pixels.
+ * @returns The canvas's rules.
+ */
+export function parallelCanvasStyle(height) {
+    return {
+        ...PARALLEL_LAYER_STYLE,
+        width: '100%',
+        height: Math.max(0, height),
+    };
+}
+/** The drawing surface the axes, the bands and the pointer target live in. */
+export const PARALLEL_SVG_STYLE = {
+    ...PARALLEL_LAYER_STYLE,
+    display: 'block',
+    overflow: 'visible',
+};
+/**
+ * The layer the axis names sit in. It is HTML rather than SVG text so that a
+ * name can carry a tooltip, and it lets every pointer event through so that a
+ * brush started under a name still starts.
+ */
+export const PARALLEL_LABELS_STYLE = {
+    ...PARALLEL_LAYER_STYLE,
+    pointerEvents: 'none',
+};
+/**
+ * One axis name, centred over its axis and taking the pointer back.
+ * @param left - Where the axis stands, in pixels from the figure's left edge.
+ * @returns The name's rules.
+ */
+export function parallelLabelStyle(left) {
+    return {
+        position: 'absolute',
+        top: 2,
+        left,
+        transform: 'translateX(-50%)',
+        color: TOKEN.text,
+        fontSize: 11,
+        fontWeight: 600,
+        whiteSpace: 'nowrap',
+        pointerEvents: 'auto',
+    };
+}
+/** One tick written out, tabular so a column of them lines up on the point. */
+export const PARALLEL_TICK_LABEL_STYLE = {
+    fontSize: 10,
+    fontVariantNumeric: 'tabular-nums',
+    userSelect: 'none',
+};
+/** How far a tick mark reaches out of the axis, in pixels. */
+export const PARALLEL_TICK_LENGTH = 4;
+/** How far a tick label ends before its axis. */
+export const PARALLEL_TICK_LABEL_INSET = 7;
+/**
+ * The interval one brush keeps, filled in the site's own colour.
+ * @param ink - The colour to fill and outline it in.
+ * @returns The band's rules.
+ */
+export function parallelBandStyle(ink) {
+    return {
+        fill: ink,
+        fillOpacity: 0.16,
+        stroke: ink,
+        strokeOpacity: 0.55,
+    };
+}
+/**
+ * Either edge of a band, drawn so the reader can see it can be dragged.
+ * @param ink - The colour to draw it in.
+ * @returns The handle's rules.
+ */
+export function parallelHandleStyle(ink) {
+    return { fill: ink, fillOpacity: 0.9 };
+}
+/** How tall an edge handle is drawn, in pixels. */
+export const PARALLEL_HANDLE_HEIGHT = 3;
+/**
+ * The card over the row under the pointer.
+ * @param left - Where it sits, in pixels from the figure's left edge.
+ * @param top - Where it sits, in pixels from its top edge.
+ * @returns The card's rules.
+ */
+export function parallelTooltipStyle(left, top) {
+    return {
+        position: 'absolute',
+        zIndex: 5,
+        left,
+        top,
+        padding: '4px 8px',
+        borderRadius: 6,
+        background: TOKEN.text,
+        color: TOKEN.surface,
+        fontSize: 11,
+        fontVariantNumeric: 'tabular-nums',
+        lineHeight: 1.4,
+        pointerEvents: 'none',
+        whiteSpace: 'nowrap',
+        boxShadow: TOKEN.shadowMedium,
+    };
+}
+//# sourceMappingURL=parallelStyles.js.map

package/lib/parallel/ui/parallelStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallelStyles.js","sourceRoot":"","sources":["../../../src/parallel/ui/parallelStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAE1D,0EAA0E;AAC1E,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;CACwB,CAAC;AAEnC;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,MAAc;IAChD,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC;QAC3B,QAAQ,EAAE,CAAC;KACZ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,MAAc;IAChD,OAAO;QACL,GAAG,oBAAoB;QACvB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,GAAG,oBAAoB;IACvB,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,SAAS;CACa,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,GAAG,oBAAoB;IACvB,aAAa,EAAE,MAAM;CACW,CAAC;AAEnC;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAY;IAC7C,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI;QACJ,SAAS,EAAE,kBAAkB;QAC7B,KAAK,EAAE,KAAK,CAAC,IAAI;QACjB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,MAAM;KACtB,CAAC;AACJ,CAAC;AAED,+EAA+E;AAC/E,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,QAAQ,EAAE,EAAE;IACZ,kBAAkB,EAAE,cAAc;IAClC,UAAU,EAAE,MAAM;CACc,CAAC;AAEnC,8DAA8D;AAC9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,CAAC;AAEtC,iDAAiD;AACjD,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAE3C;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,GAAW;IAC3C,OAAO;QACL,IAAI,EAAE,GAAG;QACT,WAAW,EAAE,IAAI;QACjB,MAAM,EAAE,GAAG;QACX,aAAa,EAAE,IAAI;KACpB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,GAAW;IAC7C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC;AACzC,CAAC;AAED,mDAAmD;AACnD,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC;AAExC;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,IAAY,EAAE,GAAW;IAC5D,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,IAAI;QACJ,GAAG;QACH,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,KAAK,CAAC,IAAI;QACtB,KAAK,EAAE,KAAK,CAAC,OAAO;QACpB,QAAQ,EAAE,EAAE;QACZ,kBAAkB,EAAE,cAAc;QAClC,UAAU,EAAE,GAAG;QACf,aAAa,EAAE,MAAM;QACrB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,KAAK,CAAC,YAAY;KAC9B,CAAC;AACJ,CAAC"}

package/lib/parallel/ui/useParallelCanvas.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The two canvases, and when they are repainted.
+ *
+ * Two rather than one, because the mass of lines changes when the data or the
+ * brushes do, while the row under the pointer changes on every frame the
+ * pointer moves. Repainting ten thousand lines to move one highlight is the
+ * difference between a figure that follows the pointer and one that lags it.
+ */
+import type { RefObject } from 'react';
+import type { ParallelAxisLayout } from '../core/parallelAxes.ts';
+import type { ParallelHighlight } from '../core/parallelPaint.ts';
+import type { ParallelInkValues } from './parallelInk.ts';
+/** What {@link useParallelCanvas} needs. */
+export interface ParallelCanvasOptions {
+    /** Total width of the figure, in CSS pixels. */
+    width: number;
+    /** Its total height. */
+    height: number;
+    /** The axes, from left to right. */
+    layouts: readonly ParallelAxisLayout[];
+    /** Each axis's column, in the same order. */
+    values: ReadonlyArray<ArrayLike<number>>;
+    /** How many rows are drawn. */
+    count: number;
+    /** Which rows the brushes keep, or `null` when they keep every one. */
+    included: Uint8Array | null;
+    /** Which colour each row takes, or `null` when nothing is colouring them. */
+    steps: Uint8Array | null;
+    /** The colours a step indexes. */
+    palette: readonly string[];
+    /** The rows drawn over the mass, the last one on top. */
+    highlights: readonly ParallelHighlight[];
+    /** The colours to paint with. */
+    ink: ParallelInkValues;
+}
+/** The two canvases a figure stacks. */
+export interface ParallelCanvases {
+    /** The mass of lines, underneath. */
+    lines: RefObject<HTMLCanvasElement | null>;
+    /** The singled-out rows, over them. */
+    marks: RefObject<HTMLCanvasElement | null>;
+}
+/**
+ * Keep both canvases sized to the device pixel grid and painted.
+ * @param options - See {@link ParallelCanvasOptions}.
+ * @returns The two refs to hand to the `<canvas>` elements.
+ */
+export declare function useParallelCanvas(options: ParallelCanvasOptions): ParallelCanvases;
+//# sourceMappingURL=useParallelCanvas.d.ts.map

package/lib/parallel/ui/useParallelCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParallelCanvas.d.ts","sourceRoot":"","sources":["../../../src/parallel/ui/useParallelCanvas.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAOlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,4CAA4C;AAC5C,MAAM,WAAW,qBAAqB;IACpC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,OAAO,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACvC,6CAA6C;IAC7C,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;IACzC,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,6EAA6E;IAC7E,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,kCAAkC;IAClC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,yDAAyD;IACzD,UAAU,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACzC,iCAAiC;IACjC,GAAG,EAAE,iBAAiB,CAAC;CACxB;AAED,wCAAwC;AACxC,MAAM,WAAW,gBAAgB;IAC/B,qCAAqC;IACrC,KAAK,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC3C,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAC5C;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,qBAAqB,GAC7B,gBAAgB,CA0ClB"}

package/lib/parallel/ui/useParallelCanvas.js

@@ -0,0 +1,58 @@
+/**
+ * The two canvases, and when they are repainted.
+ *
+ * Two rather than one, because the mass of lines changes when the data or the
+ * brushes do, while the row under the pointer changes on every frame the
+ * pointer moves. Repainting ten thousand lines to move one highlight is the
+ * difference between a figure that follows the pointer and one that lags it.
+ */
+import { useEffect, useRef } from 'react';
+import { paintParallelHighlights, paintParallelLines, preparePlotCanvas, } from "../core/parallelPaint.js";
+/**
+ * Keep both canvases sized to the device pixel grid and painted.
+ * @param options - See {@link ParallelCanvasOptions}.
+ * @returns The two refs to hand to the `<canvas>` elements.
+ */
+export function useParallelCanvas(options) {
+    const { width, height, layouts, values, count } = options;
+    const { included, steps, palette, highlights, ink } = options;
+    const lines = useRef(null);
+    const marks = useRef(null);
+    const { line, excluded, includedAlpha, halo } = ink;
+    useEffect(() => {
+        const context = preparePlotCanvas(lines.current, width, height);
+        if (context === null)
+            return;
+        paintParallelLines(context, {
+            layouts,
+            values,
+            count,
+            included,
+            steps,
+            palette,
+            line,
+            excluded,
+            includedAlpha,
+        });
+    }, [
+        width,
+        height,
+        layouts,
+        values,
+        count,
+        included,
+        steps,
+        palette,
+        line,
+        excluded,
+        includedAlpha,
+    ]);
+    useEffect(() => {
+        const context = preparePlotCanvas(marks.current, width, height);
+        if (context === null)
+            return;
+        paintParallelHighlights(context, { highlights, layouts, values, halo });
+    }, [width, height, highlights, layouts, values, halo]);
+    return { lines, marks };
+}
+//# sourceMappingURL=useParallelCanvas.js.map

package/lib/parallel/ui/useParallelCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParallelCanvas.js","sourceRoot":"","sources":["../../../src/parallel/ui/useParallelCanvas.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAoClC;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAA8B;IAE9B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;IAC1D,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC;IAC9D,MAAM,KAAK,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC9C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAChE,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAC7B,kBAAkB,CAAC,OAAO,EAAE;YAC1B,OAAO;YACP,MAAM;YACN,KAAK;YACL,QAAQ;YACR,KAAK;YACL,OAAO;YACP,IAAI;YACJ,QAAQ;YACR,aAAa;SACd,CAAC,CAAC;IACL,CAAC,EAAE;QACD,KAAK;QACL,MAAM;QACN,OAAO;QACP,MAAM;QACN,KAAK;QACL,QAAQ;QACR,KAAK;QACL,OAAO;QACP,IAAI;QACJ,QAAQ;QACR,aAAa;KACd,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAChE,IAAI,OAAO,KAAK,IAAI;YAAE,OAAO;QAC7B,uBAAuB,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAEvD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AAC1B,CAAC"}

package/lib/parallel/ui/useParallelGesture.d.ts

@@ -0,0 +1,67 @@
+/**
+ * One pointer over the whole figure, serving both the brush and the hover.
+ *
+ * A hook cannot be called inside a `map`, so a brush per axis would have to
+ * live in refs and be attached by hand; one surface that works out from the
+ * press which axis was grabbed has no such problem, and it gives the hover
+ * search the same once-a-frame coalescing the drag already pays for.
+ *
+ * The band follows the pointer live and the interval is reported on release
+ * only: a table filtering on the reported interval is asked to re-render once
+ * per gesture rather than sixty times a second.
+ */
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import type { ScatterSurfaceProps } from '../../scatter/ui/lassoGesture.ts';
+import type { ParallelAxisLayout } from '../core/parallelAxes.ts';
+import type { ParallelBand } from '../core/parallelBrush.ts';
+import type { ParallelRange, ParallelRanges } from '../core/parallelTypes.ts';
+/** What {@link useParallelGesture} needs. */
+export interface ParallelGestureOptions {
+    /** The axes, from left to right. */
+    layouts: readonly ParallelAxisLayout[];
+    /** Each axis's column, in the same order. */
+    values: ReadonlyArray<ArrayLike<number>>;
+    /** How many rows are drawn. */
+    count: number;
+    /** Height of the drawing area, in pixels. */
+    innerHeight: number;
+    /** Which rows a brush keeps, so an excluded line cannot be pointed at. */
+    included: Uint8Array | null;
+    /** The intervals in force, whoever owns them. */
+    ranges: ParallelRanges;
+    /** Called when a brush is released, with the interval it keeps or `null`. */
+    onRangeChange: (axisId: string, range: ParallelRange | null) => void;
+    /** Called on every frame a band grows. */
+    onRangePreview?: ((axisId: string, range: ParallelRange | null) => void) | undefined;
+    /** The row the caller says is hovered, if it owns that. */
+    hovered?: number | undefined;
+    /** Called with the row under the pointer, or `-1`. */
+    onHoverChange?: ((index: number) => void) | undefined;
+    /** Called when a line is clicked, with the row, or `-1` for empty ground. */
+    onRowClick?: ((index: number) => void) | undefined;
+}
+/** The gesture, as the figure renders it. */
+export interface ParallelGesture {
+    /** Spread onto the transparent rectangle laid over the figure. */
+    surface: ScatterSurfaceProps;
+    /** Put on the same rectangle, for the click that picks a line. */
+    onClick: (event: ReactMouseEvent<Element>) => void;
+    /** The band to draw on each axis, the one being dragged included. */
+    bands: ReadonlyMap<string, ParallelBand>;
+    /** The row under the pointer, or `-1`. */
+    hovered: number;
+    /** Where the pointer is in the figure, or `null` when it is away. */
+    pointer: {
+        x: number;
+        y: number;
+    } | null;
+    /** Whether a band is being dragged right now. */
+    brushing: boolean;
+}
+/**
+ * The brush and the hover, over one surface.
+ * @param options - See {@link ParallelGestureOptions}.
+ * @returns The gesture. See {@link ParallelGesture}.
+ */
+export declare function useParallelGesture(options: ParallelGestureOptions): ParallelGesture;
+//# sourceMappingURL=useParallelGesture.d.ts.map

package/lib/parallel/ui/useParallelGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParallelGesture.d.ts","sourceRoot":"","sources":["../../../src/parallel/ui/useParallelGesture.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EACV,mBAAmB,EAEpB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,KAAK,EAAE,YAAY,EAAqB,MAAM,0BAA0B,CAAC;AAShF,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAU9E,6CAA6C;AAC7C,MAAM,WAAW,sBAAsB;IACrC,oCAAoC;IACpC,OAAO,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACvC,6CAA6C;IAC7C,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;IACzC,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,0EAA0E;IAC1E,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,iDAAiD;IACjD,MAAM,EAAE,cAAc,CAAC;IACvB,6EAA6E;IAC7E,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IACrE,0CAA0C;IAC1C,cAAc,CAAC,EACb,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtE,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,6EAA6E;IAC7E,UAAU,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACpD;AAED,6CAA6C;AAC7C,MAAM,WAAW,eAAe;IAC9B,kEAAkE;IAClE,OAAO,EAAE,mBAAmB,CAAC;IAC7B,kEAAkE;IAClE,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACnD,qEAAqE;IACrE,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACzC,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACzC,iDAAiD;IACjD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,sBAAsB,GAC9B,eAAe,CAsIjB"}