inkplot 0.0.0-stage → 1.0.0-beta.1

package/dist/furniture.js

@@ -0,0 +1,166 @@
+/**
+ * Chart furniture: the title (and its subtitle and caption) and the tooltip, which reads a `Cursor`. Annotations, which belong to a plane, are
+ * in annotation.ts.
+ */
+import { STRING } from './attrs.js';
+import { ChartElement } from './element.js';
+import { EVENT_ARRANGE, EVENT_ATTACH, EVENT_MEASURE, EVENT_PAINT } from './events.js';
+import { f2 } from './geometry.js';
+import { calloutSize, clearCallout, paintCallout } from './callout.js';
+import { applyText, measureBlock, paintLines } from './text.js';
+/** Which selector holds each role's look. */
+const ROLE_SELECTOR = { title: 'chartTitle', subtitle: 'chartSubtitle', caption: 'chartCaption' };
+/** Room above and below a line of text, so bands do not touch what they sit against. */
+const BAND_PADDING = 4;
+/**
+ * Text across the top or bottom of the chart. One element serves every role: a title, a subtitle, a caption or a
+ * footnote differ only in their `role` (and so their look) and `side`. Several on one edge stack outwards from it in the
+ * order they were added, so a title followed by a subtitle puts the subtitle underneath.
+ *
+ * Where the text sits along its band is the style property `align` (`style: { chartTitle: { align: 'middle' } }`).
+ */
+export class ChartTitle extends ChartElement {
+    static attrTypes = { ...ChartElement.attrTypes, text: STRING };
+    #rect = { x: 0, y: 0, width: 0, height: 0 };
+    #lines = 0;
+    get role() { return this.attrs.role ?? 'title'; }
+    get side() { return this.attrs.side ?? (this.role === 'caption' ? 'bottom' : 'top'); }
+    get look() { return this.styleFor([ROLE_SELECTOR[this.role], 'text']); }
+    onEvent(ev) {
+        switch (ev.type) {
+            case EVENT_ATTACH:
+                this.surface.wrapper();
+                break;
+            case EVENT_MEASURE: {
+                const size = measureBlock(this.requireParent().measureText, this.attrs.text, this.look);
+                const request = { width: size.width, height: size.height + BAND_PADDING };
+                ev.request = { min: request, max: request, side: this.side, band: true };
+                break;
+            }
+            case EVENT_ARRANGE:
+                this.#rect = ev.rect;
+                break;
+            case EVENT_PAINT: {
+                const s = this.surface, r = this.#rect, look = this.look;
+                s.set(s.wrapper(), 'transform', `translate(${f2(r.x)} ${f2(r.y)})`);
+                applyText(s, s.wrapper(), look);
+                // The anchor is the text's own: start, middle or end of the band.
+                const x = look.align === 'start' ? 0 : look.align === 'middle' ? r.width / 2 : r.width;
+                this.#lines = paintLines(s, 'line-', this.attrs.text, x, BAND_PADDING / 2, look, this.#lines);
+                break;
+            }
+        }
+    }
+}
+/** The gap between the pointer or point and the box of a tooltip that follows. */
+const FOLLOW_OFFSET = 14;
+/** Which way the box sits from what it points at, in the order tried: up and right, then the other corners. */
+const CORNERS = [[1, -1], [-1, -1], [1, 1], [-1, 1]];
+/** The default words for one hit. */
+function describe(hit) {
+    const { series } = hit, lines = [];
+    const name = series.attrs.name;
+    if (name)
+        lines.push(name);
+    const part = (axis, value) => `${axis.attrs.title ? axis.attrs.title + ': ' : ''}${axis.formatValue(value)}`;
+    lines.push(part(series.firstAxis, hit.first), part(series.secondAxis, hit.second));
+    for (const [channel, value] of Object.entries(hit.channels))
+        lines.push(`${channel}: ${String(+value.toPrecision(5))}`);
+    return lines.join('\n');
+}
+/**
+ * Shows what the cursor reads, in a box styled like a callout. It is a child of a `Cursor`, which finds the reading (the
+ * nearest point, or every series at the cursor's place) from the pointer or the keyboard; this only draws it, above whatever
+ * comes before it in the cursor, so put a `Crosshair` first to have the lines under the box. It takes no room of its own.
+ *
+ * It looks like a callout (`tooltipBox`, `tooltipText` and `tooltip` metrics, each falling back to the callout's own), so a
+ * theme that styles callouts styles tooltips too. Touch has no hover, so it shows while a finger is down. It hides while
+ * a button is held, which is when something is being dragged.
+ */
+export class ChartTooltip extends ChartElement {
+    #lines = 0;
+    #announced = '';
+    #samples = new Map();
+    /** Moves with the cursor when it has no arm. */
+    get follows() { return this.#follow(this.requireParent().attrs.mode === 'shared'); }
+    #follow(shared) { return this.attrs.follow ?? shared; }
+    onEvent(ev) {
+        switch (ev.type) {
+            case EVENT_ATTACH:
+                this.surface.wrapper();
+                break;
+            case EVENT_PAINT:
+                this.paint();
+                break;
+        }
+    }
+    look() {
+        return {
+            metrics: this.styleFor(['tooltip', 'callout']), text: this.styleFor(['tooltipText', 'calloutText', 'text']),
+            box: this.styleFor(['tooltipBox', 'calloutBox', 'shape']), arm: this.styleFor(['calloutArm', 'line']),
+        };
+    }
+    paint() {
+        const s = this.surface, cursor = this.requireParent(), state = cursor.state, a = this.attrs, chart = cursor.requireParent();
+        s.wrapper();
+        if (!state || state.hits.length === 0) {
+            clearCallout(s, this.#lines, this.#samples);
+            this.#lines = 0;
+            this.#announced = '';
+            return;
+        }
+        const { plane, hits } = state, shared = cursor.attrs.mode === 'shared', follow = this.#follow(shared);
+        // oxlint-disable-next-line typescript/no-non-null-assertion -- in range: the index comes from a loop bound or a length checked in the same function
+        const look = this.look(), r = plane.rect, first = hits[0];
+        const format = a.format ?? describe;
+        // The words in blocks: a heading in shared mode, then one block for each hit. A hit's colour dots its block's first line.
+        const blocks = [];
+        if (shared && !a.format) {
+            // The heading says where the reading is: the point the series are read at, or, reading the line between points, the cursor's own place.
+            const at = cursor.attrs.interpolate === true ? plane.unplace(state.x, state.y, first.series.firstAxis, first.series.secondAxis)[0] : first.first;
+            blocks.push({ text: first.series.firstAxis.formatValue(at), series: null });
+            for (const h of hits) {
+                const name = h.series.attrs.name;
+                blocks.push({ text: `${name ? name + ': ' : ''}${h.series.secondAxis.formatValue(h.second)}`, series: h.series });
+            }
+        }
+        else {
+            for (const h of hits)
+                blocks.push({ text: format(h), series: h.series });
+        }
+        const text = blocks.map((b) => b.text).join('\n');
+        const swatches = a.swatch ? blocks.flatMap((b) => b.text.split('\n').map((_, i) => (i === 0 ? b.series : null))) : undefined;
+        const { width: w, height: h } = calloutSize(chart.measureText, text, look, !!swatches);
+        // What the box is set beside, in chart pixels: the point, or the cursor; and how far from it.
+        const point = [r.x + first.px, r.y + first.py];
+        const near = follow ? [r.x + state.x, r.y + state.y] : point;
+        const gap = follow ? FOLLOW_OFFSET : look.metrics.offset;
+        const size = chart.platform?.size() ?? { width: Infinity, height: Infinity };
+        const W = chart.attrs.width ?? size.width, H = chart.attrs.height ?? size.height;
+        let box = null;
+        for (const [ux, uy] of CORNERS) {
+            const cx = near[0] + ux * (w / 2 + gap * 0.6), cy = near[1] + uy * (h / 2 + gap * 0.6);
+            const candidate = { x: cx - w / 2, y: cy - h / 2, width: w, height: h };
+            if (candidate.x >= 0 && candidate.y >= 0 && candidate.x + w <= W && candidate.y + h <= H) {
+                box = candidate;
+                break;
+            }
+        }
+        // Nowhere fits whole (a small chart): the first corner, pushed back inside as far as it will go.
+        box ??= {
+            x: Math.max(0, Math.min(near[0] + gap * 0.6, W - w)), y: Math.max(0, Math.min(near[1] - h - gap * 0.6, H - h)), width: w, height: h,
+        };
+        this.#lines = paintCallout(s, text, box, follow ? null : point, look, this.#lines, swatches, this.#samples);
+        // Someone at the keyboard cannot see the box: say what it says, once for each thing it says.
+        if (state.source === 'keyboard' && a.announce !== false) {
+            const said = text.split('\n').join('. ');
+            if (said !== this.#announced) {
+                this.#announced = said;
+                chart.input?.speak(said);
+            }
+        }
+        else {
+            this.#announced = '';
+        }
+    }
+}

package/dist/geometry.d.ts

@@ -0,0 +1,40 @@
+/** Rectangles, sizes and extents: the plain-data vocabulary shared by layout, hit-testing and drawing. */
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Insets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface Extent {
+    min: number;
+    max: number;
+}
+/** Half-open on the far edges, so two touching rectangles never both claim the same point. */
+export declare const contains: (r: Rect, x: number, y: number) => boolean;
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+/** What an element answers when asked how much room it wants (the MEASURE event): a range, so the parent can squeeze or grow it. */
+export interface LayoutRequest {
+    min: Size;
+    max: Size;
+    /** For chart furniture: the edge of the chart it wants to sit against, taking its size from the plots. Others leave it out. */
+    side?: Side;
+    /**
+     * With `side`: spans the whole edge and stacks outwards from it with other bands (a title, a caption), instead of
+     * sharing a strip with the other furniture on that side (keys). Only the top and bottom edges take bands.
+     */
+    band?: boolean;
+}
+/** A circle as path data (SVG has no circle path command, so two half arcs), centred on (cx, cy). */
+export declare const circlePath: (cx: number, cy: number, r: number) => string;
+/** A number for path data and attributes: two decimals at most. */
+export declare const f2: (n: number) => string;

package/dist/geometry.js

@@ -0,0 +1,7 @@
+/** Rectangles, sizes and extents: the plain-data vocabulary shared by layout, hit-testing and drawing. */
+/** Half-open on the far edges, so two touching rectangles never both claim the same point. */
+export const contains = (r, x, y) => x >= r.x && x < r.x + r.width && y >= r.y && y < r.y + r.height;
+/** A circle as path data (SVG has no circle path command, so two half arcs), centred on (cx, cy). */
+export const circlePath = (cx, cy, r) => `M${f2(cx - r)} ${f2(cy)}a${f2(r)} ${f2(r)} 0 1 0 ${f2(2 * r)} 0a${f2(r)} ${f2(r)} 0 1 0 ${f2(-2 * r)} 0`;
+/** A number for path data and attributes: two decimals at most. */
+export const f2 = (n) => String(Math.round(n * 100) / 100);

package/dist/heatmap.d.ts

@@ -0,0 +1,57 @@
+import type { HitMode } from './hit.ts';
+import { type PolygonSet, type ResolvedBinding, SeriesRenderer, type SeriesRendererAttributes, type Spread, type SpreadView } from './renderer.ts';
+import { type ChartEvent } from './events.ts';
+import type { Series } from './series.ts';
+import type { PlatformNode } from './platform.ts';
+import type { Surface } from './surface.ts';
+export interface HeatMapBindable {
+    fill: string;
+    opacity: number;
+}
+export interface HeatMapAttributes extends SeriesRendererAttributes<HeatMapBindable> {
+    /** The size of a cell along the first axis, in data units. Default: the `widthChannel`. */
+    cellWidth?: number;
+    /** The size along the second axis. Default: the `heightChannel`, or `cellWidth` when only that is given (square cells). */
+    cellHeight?: number;
+    /** The channel with each cell's width. Default 'width'. Not read when `cellWidth` is set. */
+    widthChannel?: string;
+    /** The channel with each cell's height. Default 'height'. Not read when a cell size attribute is set. */
+    heightChannel?: string;
+}
+/** A grid of rectangles, one path for each colour step. */
+export declare class HeatMap extends SeriesRenderer<HeatMapAttributes> {
+    #private;
+    static attrTypes: {
+        fill: 1;
+        maxNodes: 2;
+        stroke: 1;
+        strokeWidth: 2;
+        id: 1;
+        meta: {
+            title: 1;
+            description: 1;
+            role: 1;
+        };
+        cellWidth: 2;
+        cellHeight: 2;
+        widthChannel: 1;
+        heightChannel: 1;
+    };
+    /** Which channels give the cell size; null for a dimension that has a constant. */
+    private get sizeChannels();
+    get channelNames(): readonly string[];
+    get bindings(): readonly ResolvedBinding[];
+    get stepsPerBinding(): number;
+    /** The extents the cells reach: the axes leave room for the half of a cell that sticks out past its centre. */
+    spread(view: SpreadView): Spread | null;
+    limit(series: Series): Spread | null;
+    get hitMode(): HitMode;
+    onEvent(ev: ChartEvent): void;
+    private look;
+    get swatch(): string | null;
+    sample(s: Surface, parent: PlatformNode, key: string, width: number, height: number): void;
+    /** The four corners of every cell in plot pixels (clockwise from the low corner), NaN for a gap; made again only after a new projection. */
+    private geometry;
+    shapes(): PolygonSet | null;
+    protected draw(): void;
+}

package/dist/heatmap.js

@@ -0,0 +1,207 @@
+/**
+ * Heat maps: a rectangle for each point, coloured by a channel.
+ *
+ *   <XYSeries>
+ *     <Density width={[5, 5]} by={['domain', 'value']}><ObjectDataSource source={rows} domain="x" value="y" /></Density>
+ *     <HeatMap bind={{ fill: { axis: heat, channel: 'count' } }} />
+ *   </XYSeries>
+ *
+ * Each point is the centre of a cell. The cell's size is `cellWidth` and `cellHeight` in data units, or else the
+ * channels `width` and `height` (which is what `Density` gives each bin, so the pair work together); one of the two
+ * attributes alone makes a square. A cell is drawn from its four corners, each placed by the plane: on a rectangle
+ * that is a rectangle, on a polar plane a wedge with straight edges. Cells that look alike (the same step of the bound
+ * colour) share a path, so the nodes drawn are bounded by `maxNodes` however many cells there are. A gap in a coordinate
+ * or a size leaves out its cell. Cells are hit as shapes.
+ *
+ * Bind `fill` (a `ColorAxis` over a channel) to colour by data, and `opacity` to fade by it. Without a binding every cell
+ * takes the series' colour.
+ */
+/* oxlint-disable typescript/no-non-null-assertion -- numeric kernels over flat typed-array buffers (stride-addressed rows): every index is bounded by the row count, which `noUncheckedIndexedAccess` cannot see */
+import { NUMBER, STRING } from './attrs.js';
+import { fractionsOf, lookKey, lookValues, resolveBindings, stepsFor } from './bucket.js';
+import { f2 } from './geometry.js';
+import { SeriesRenderer, paintBox } from './renderer.js';
+import { EVENT_ATTACH } from './events.js';
+/** How far the normalised position may stray outside the axis before it is held there. */
+const REACH = 2;
+const clamp = (v) => (v < -REACH ? -REACH : v > 1 + REACH ? 1 + REACH : v);
+/** A grid of rectangles, one path for each colour step. */
+export class HeatMap extends SeriesRenderer {
+    static attrTypes = { ...SeriesRenderer.attrTypes, cellWidth: NUMBER, cellHeight: NUMBER, widthChannel: STRING, heightChannel: STRING };
+    #keys = new Set();
+    #geometry = null;
+    /** Which channels give the cell size; null for a dimension that has a constant. */
+    get sizeChannels() {
+        const a = this.attrs;
+        const w = a.cellWidth === undefined ? a.widthChannel ?? 'width' : null;
+        const h = a.cellHeight !== undefined ? null : a.cellWidth !== undefined ? null : a.heightChannel ?? 'height';
+        return { w, h };
+    }
+    get channelNames() {
+        const { w, h } = this.sizeChannels;
+        return [...(w ? [w] : []), ...(h ? [h] : [])];
+    }
+    get bindings() { return resolveBindings(this.attrs.bind, this, () => false); }
+    get stepsPerBinding() { return stepsFor(this.bindings, this.attrs.maxNodes ?? 1000); }
+    /** The extents the cells reach: the axes leave room for the half of a cell that sticks out past its centre. */
+    spread(view) {
+        const a = this.attrs, { w: wc, h: hc } = this.sizeChannels;
+        const wCol = wc ? view.channelColumn(wc) : -1, hCol = hc ? view.channelColumn(hc) : -1;
+        let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+        for (let i = 0; i < view.count; i++) {
+            const row = i * view.stride, x = view.raw[row + view.firstColumn], y = view.raw[row + view.secondColumn];
+            const w = wCol >= 0 ? view.raw[row + wCol] : a.cellWidth ?? NaN, h = hCol >= 0 ? view.raw[row + hCol] : a.cellHeight ?? a.cellWidth ?? NaN;
+            if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(w) || !Number.isFinite(h))
+                continue;
+            if (x - w / 2 < x0)
+                x0 = x - w / 2;
+            if (x + w / 2 > x1)
+                x1 = x + w / 2;
+            if (y - h / 2 < y0)
+                y0 = y - h / 2;
+            if (y + h / 2 > y1)
+                y1 = y + h / 2;
+        }
+        return x0 > x1 ? null : { first: { min: x0, max: x1 }, second: { min: y0, max: y1 } };
+    }
+    limit(series) {
+        const a = this.attrs, { w: wc, h: hc } = this.sizeChannels;
+        const first = series.ownExtent('first'), second = series.ownExtent('second');
+        const most = (name, fixed) => {
+            if (!name)
+                return fixed ?? NaN;
+            const e = series.data.channelExtent(name);
+            return e ? Math.max(Math.abs(e.min), Math.abs(e.max)) : NaN;
+        };
+        const w = most(wc, a.cellWidth), h = a.cellHeight === undefined && !hc ? w : most(hc, a.cellHeight);
+        if (!first || !second || !Number.isFinite(w) || !Number.isFinite(h))
+            return null;
+        return { first: { min: first.min - w / 2, max: first.max + w / 2 }, second: { min: second.min - h / 2, max: second.max + h / 2 } };
+    }
+    get hitMode() { return 'shape'; }
+    onEvent(ev) {
+        if (ev.type === EVENT_ATTACH)
+            void this.stepsPerBinding;
+        super.onEvent(ev);
+    }
+    look() {
+        const a = this.attrs;
+        return this.styleFor(['heatCell', 'shape'], { fill: a.fill, stroke: a.stroke, strokeWidth: a.strokeWidth, opacity: a.opacity }, { fill: this.requireParent().accentColor });
+    }
+    get swatch() {
+        // oxlint-disable-next-line typescript/consistent-type-assertions -- the `bind` attribute, typed here as the shape this element reads
+        const bind = this.attrs.bind;
+        return bind?.fill ? null : this.look().fill;
+    }
+    sample(s, parent, key, width, height) {
+        const look = { ...this.look() };
+        // oxlint-disable-next-line typescript/consistent-type-assertions -- bound properties are written by name
+        for (const b of this.bindings)
+            look[b.property] = b.axis.valueAt(0.5);
+        paintBox(s, parent, key, width, height, look);
+    }
+    /** The four corners of every cell in plot pixels (clockwise from the low corner), NaN for a gap; made again only after a new projection. */
+    geometry() {
+        const series = this.requireParent(), d = series.drawn, plane = d?.plane;
+        if (!d || !plane)
+            return null;
+        if (this.#geometry && this.#geometry.projection === series.projection)
+            return this.#geometry;
+        const n = d.points.count, rs = d.stride, base = rs - d.channels.length, a = this.attrs;
+        const { w: wc, h: hc } = this.sizeChannels;
+        const colOf = (name) => base + d.channels.indexOf(name);
+        const wCol = wc ? colOf(wc) : -1, hCol = hc ? colOf(hc) : -1;
+        const xs = new Float64Array(n * 2), ys = new Float64Array(n * 2);
+        for (let i = 0; i < n; i++) {
+            const x = d.raw[i * rs + d.firstColumn], y = d.raw[i * rs + d.secondColumn];
+            const w = wCol >= 0 ? d.raw[i * rs + wCol] : a.cellWidth ?? NaN;
+            const h = hCol >= 0 ? d.raw[i * rs + hCol] : a.cellHeight ?? a.cellWidth ?? NaN;
+            xs[2 * i] = x - w / 2;
+            xs[2 * i + 1] = x + w / 2;
+            ys[2 * i] = y - h / 2;
+            ys[2 * i + 1] = y + h / 2;
+        }
+        series.firstAxis.normalize(xs, n * 2, 1, 0);
+        series.secondAxis.normalize(ys, n * 2, 1, 0);
+        const out = new Float64Array(n * 8);
+        for (let i = 0; i < n; i++) {
+            const x0 = xs[2 * i], x1 = xs[2 * i + 1], y0 = ys[2 * i], y1 = ys[2 * i + 1];
+            const bad = !Number.isFinite(x0) || !Number.isFinite(x1) || !Number.isFinite(y0) || !Number.isFinite(y1);
+            const k = i * 8;
+            const put = (j, x, y) => { out[k + 2 * j] = bad ? NaN : clamp(x); out[k + 2 * j + 1] = bad ? NaN : clamp(y); };
+            put(0, x0, y0);
+            put(1, x1, y0);
+            put(2, x1, y1);
+            put(3, x0, y1);
+        }
+        plane.place({ data: out, stride: 2, count: n * 4 }, series.firstAxis, series.secondAxis);
+        return (this.#geometry = { projection: series.projection, n, data: out });
+    }
+    shapes() {
+        const g = this.geometry();
+        return g ? { data: g.data, perShape: 4, count: g.n } : null;
+    }
+    draw() {
+        const series = this.requireParent(), plane = series.plane, s = this.surface, counters = this.counters;
+        const g = this.geometry(), d = series.drawn;
+        const look = this.look();
+        const t0 = performance.now();
+        const w = plane.rect.width, h = plane.rect.height;
+        const bindings = this.bindings, steps = this.stepsPerBinding;
+        const styled = g && d ? bindings.map((b) => ({ b, f: fractionsOf(b, d.raw, d.stride - d.channels.length + d.channels.indexOf(b.channel), d.stride, g.n) })) : [];
+        const paths = new Map();
+        let bytes = 0;
+        if (g) {
+            const p = g.data;
+            for (let i = 0; i < g.n; i++) {
+                const k = i * 8;
+                let lo = Infinity, hi = -Infinity, left = Infinity, right = -Infinity, ok = true;
+                for (let j = 0; j < 4; j++) {
+                    const x = p[k + 2 * j], y = p[k + 2 * j + 1];
+                    if (!Number.isFinite(x) || !Number.isFinite(y)) {
+                        ok = false;
+                        break;
+                    }
+                    if (x < left)
+                        left = x;
+                    if (x > right)
+                        right = x;
+                    if (y < lo)
+                        lo = y;
+                    if (y > hi)
+                        hi = y;
+                }
+                if (!ok || right < 0 || left > w || hi < 0 || lo > h)
+                    continue;
+                const c = (j) => `${f2(p[k + 2 * j])} ${f2(p[k + 2 * j + 1])}`;
+                const path = `M${c(0)}L${c(1)}L${c(2)}L${c(3)}Z`;
+                bytes += path.length;
+                const key = steps ? lookKey(styled, i, steps) : 0;
+                paths.set(key, (paths.get(key) ?? '') + path);
+            }
+        }
+        counters.stages.path += performance.now() - t0;
+        counters.pathBytes += bytes;
+        for (const key of this.#keys)
+            if (!paths.has(key))
+                s.remove(`c${key}`);
+        this.#keys = new Set(paths.keys());
+        const v = { fill: look.fill, opacity: look.opacity };
+        for (const [key, path] of paths) {
+            v.fill = look.fill;
+            v.opacity = look.opacity;
+            if (steps)
+                lookValues(key, styled, steps, (property, value) => { v[property] = value; });
+            const node = s.node(`c${key}`, 'path');
+            s.set(node, 'd', path);
+            // oxlint-disable-next-line typescript/consistent-type-assertions -- the style channels are filled for every cell before drawing
+            s.set(node, 'fill', v.fill);
+            // oxlint-disable-next-line typescript/consistent-type-assertions -- the style channels are filled for every cell before drawing
+            s.set(node, 'fill-opacity', Math.round(v.opacity * 1000) / 1000);
+            s.set(node, 'stroke', look.stroke);
+            s.set(node, 'stroke-width', look.strokeWidth);
+            if (!plane.curved)
+                s.set(node, 'shape-rendering', 'crispEdges');
+        }
+    }
+}

package/dist/hit.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Hit testing: which drawn point a pointer is near. It is all free-standing functions that read a series back through
+ * `Series.drawn`, and nothing in the core imports it, so a chart that does not hit-test (no tooltip, no listener) does
+ * not carry any of it. The geometry at the top works on plain buffers of placed points and needs no chart.
+ *
+ * What "near" means is the series' choice (its `hit` attribute), because only it knows what its renderers draw:
+ *  - `point`: the distance to the nearest point. Right for markers and for a line that is only read at its points.
+ *  - `line`: the distance to the nearest point *on the line* joining them, so the pointer can be anywhere along a segment.
+ *  - `area`: zero anywhere inside the shape between the line and its baseline, else as `line`.
+ *  - `shape`: zero anywhere inside a shape the series' renderer drew for the point (a bar), else the distance to its edge.
+ *    Bars say this by themselves, so a bar series needs no `hit` setting.
+ * In every mode the hit is one of the points, never a place between two: the one nearest to where the pointer is.
+ *
+ * Steps and curves are measured as they are drawn: their renderers `trace` the path they draw, and 'line' and 'area' follow
+ * it (a point is still what is reported: the one whose level or stretch of curve the pointer is on). A renderer with no
+ * trace is drawn with straight lines through its points, which is what is measured.
+ *
+ * Either coordinate of the pointer may be NaN, which says "ignore this one": the distance is then measured along the
+ * other alone. That is how a crosshair finds the point at the pointer's x whatever its height, and with one coordinate
+ * missing a line or an area can no longer be between anything, so every mode measures to the nearest point. Note that
+ * these are plot pixels, not data axes: on a Cartesian plane x is the horizontal axis, on a polar plane it is just across.
+ */
+import type { PointBuffer } from './data.ts';
+import type { Hit } from './events.ts';
+import type { Plane } from './plane.ts';
+import type { PolygonSet, Trace } from './renderer.ts';
+import type { Series } from './series.ts';
+export type HitMode = 'point' | 'line' | 'area' | 'shape';
+/** How a series takes pointer hits: set as its `hit` attribute. */
+export interface HitOptions {
+    /** What distance means: to the nearest point, to the line through them, or zero inside the area or shape. Default what the renderer says (bars: 'shape'), else 'point'. */
+    mode?: HitMode;
+    /** The farthest a pointer may be, in pixels, and still hit. Default 10. */
+    radius?: number;
+    /** For 'area': the value the shape is closed against, like the renderer's own baseline. Default 0. */
+    baseline?: number;
+}
+/** The nearest point, and how far the pointer is from what the mode measures. */
+export interface Nearest {
+    readonly index: number;
+    readonly distance: number;
+}
+/** The nearest drawn point; points that are gaps (NaN) are skipped. Null when there is none, or both coordinates are NaN. */
+export declare function nearestPoint(points: PointBuffer, x: number, y: number): Nearest | null;
+/** The distance to the nearest point of the polyline through the points (a gap breaks it), and the nearer end of that segment. */
+export declare function nearestSegment(points: PointBuffer, x: number, y: number): Nearest | null;
+/**
+ * Whether (x, y) is inside the shape that a run of points makes with its baseline (the same points, placed against the
+ * baseline value, which `base` holds one row each for). Runs are the stretches between gaps, each its own shape. The
+ * nearest point of that run is returned when it is, else null.
+ */
+export declare function insideArea(points: PointBuffer, base: PointBuffer, x: number, y: number): number | null;
+/**
+ * The shape the pointer is inside (distance 0), else the one whose outline is nearest, by the shape's index. Shapes
+ * made of NaN are left out. A NaN coordinate of the pointer means "ignore this direction", and the shapes' own points
+ * then stand for them, as for any other mode.
+ */
+export declare function nearestShape(shapes: PolygonSet, points: PointBuffer, x: number, y: number): Nearest | null;
+/**
+ * Whether (x, y) is inside a shape a trace draws: each run of its line closed back along the same run of its baseline.
+ * The point it belongs to is the one owning the nearest vertex of the line in that run, else null.
+ */
+export declare function insideTrace(trace: Trace, x: number, y: number): number | null;
+/** The nearest point under `mode` ('line' or 'area') to a path a renderer traces, by the point each vertex belongs to. */
+export declare function nearestTraced(trace: Trace, mode: HitMode, x: number, y: number): Nearest | null;
+/** The nearest point under `mode`; `base` is the baseline for an area (ignored otherwise). */
+export declare function nearest(points: PointBuffer, mode: HitMode, base: (() => PointBuffer) | null, x: number, y: number): Nearest | null;
+/** The hit for drawn point `index` of a series, with the pointer `distance` away. */
+export declare function pointHit(series: Series, index: number, distance?: number): Hit | null;
+/**
+ * The nearest drawn point of a series to a position in plot pixels, within `maxDistance` (default: its `hit` radius), as
+ * its `hit` mode measures it. A NaN for `x` or `y` leaves that direction out, so `hitTest(series, x, NaN, Infinity)` is
+ * the point nearest in x whatever its height. Null if nothing is near enough, or the series takes no hits.
+ */
+export declare function hitTest(series: Series, x: number, y: number, maxDistance?: number): Hit | null;
+/**
+ * The nearest point of any series in the plane that takes hits, within each series' own radius, by that series' `hit`
+ * mode. A tie goes to the series drawn last, which is the one on top.
+ */
+export declare function hitPlane(plane: Plane, x: number, y: number): Hit | null;
+/**
+ * The nearest point of every series that takes hits, topmost first. `radius` replaces each series' own, and is unlimited
+ * by default, so `hitAll(plane, x, NaN)` is each series at the pointer's x: what a crosshair tooltip lists.
+ */
+export declare function hitAll(plane: Plane, x: number, y: number, radius?: number): Hit[];
+/**
+ * The point of every series that is nearest the pointer *along the first axis*, whatever its distance across: what a
+ * reading shared by all series, such as a crosshair tooltip, lists. It is measured in the axis' own terms and not in
+ * pixels, so it is right wherever the plane puts that axis: across a Cartesian plane, up one whose domain is vertical, and
+ * round a radial plane, where the nearest point is the one nearest in angle (and a full turn wraps, so a pointer just
+ * before the start of the sweep finds the last points). Topmost series first. Series that take no hits are left out.
+ */
+export declare function hitAcross(plane: Plane, x: number, y: number): Hit[];
+/**
+ * Where a series' line is at position `first` of its first axis, read as a straight line between the two drawn points
+ * either side of it, in data terms (so it is exact for a `LinePath` on a linear scale, and may sit off a curve or a line
+ * drawn another way: see the tooltip's `interpolate`). Only a domain series has one; others, a series that takes no
+ * hits, a position outside the data and one beside a gap give null. The hit is `interpolated`: its `index` and `row`
+ * are the nearer of the two points, and `px`, `py` are where the line is.
+ */
+export declare function interpolate(series: Series, first: number): Hit | null;
+/** Every series' line read at the pointer, topmost first: `interpolate` at the pointer's place along each series' first axis. */
+export declare function interpolateAll(plane: Plane, x: number, y: number): Hit[];