inkplot 0.0.0-stage → 1.0.0-beta.1

package/dist/legend.d.ts

@@ -0,0 +1,36 @@
+import type { Chart } from './chart.ts';
+import { type BaseAttributes, ChartElement } from './element.ts';
+import { inputOf } from './input.ts';
+import { type ChartEvent } from './events.ts';
+import { type Rect, type Side } from './geometry.ts';
+import { type Series } from './series.ts';
+export interface LegendAttributes extends BaseAttributes {
+    /** The edge of the chart it sits along. Default 'right'. */
+    side?: Side;
+    /** Entries in a column or a row. Default: along its side, so a column on the left and right, a row on the top and bottom. */
+    orientation?: 'vertical' | 'horizontal';
+    /** A heading above the entries. */
+    title?: string;
+    /** Clicking an entry hides or shows its series. Default true. */
+    toggle?: boolean;
+}
+export declare class Legend extends ChartElement<Chart, [], LegendAttributes> {
+    #private;
+    static takesInput: typeof inputOf;
+    static attrTypes: {
+        title: 1;
+        id: 1;
+        meta: {
+            title: 1;
+            description: 1;
+            role: 1;
+        };
+    };
+    get side(): Side;
+    get horizontal(): boolean;
+    /** The series listed: those of all the chart's planes that have a name. */
+    get entries(): readonly Series[];
+    onEvent(ev: ChartEvent): void;
+    /** Where a series' entry is, in the chart's pixels (valid after layout), or null if it is not listed. */
+    entryRect(series: Series): Rect | null;
+}

package/dist/legend.js

@@ -0,0 +1,220 @@
+/**
+ * The legend: what each series is called, with a sample of how it is drawn, beside the plots.
+ *
+ *   new Chart({}, plane, new Legend({ side: 'right' }))
+ *
+ * It lists the series of every plane in the chart that have a `name`, in drawing order. The sample is the series' own
+ * (`Series.sample`): a line is a short line in its dash and colour, an area or a bar a box, a marker its shape, and a series
+ * with a line and markers has the markers over the line, so it reads as the plot does.
+ *
+ * Clicking an entry hides its series, or shows it again (`toggle`, on by default): a series that is not shown is left out of
+ * the plot's axes, its stack and its hits, and its entry is dimmed, so it can be brought back.
+ *
+ * Each entry is a button for the keyboard too: Tab reaches it, Enter or Space presses it, and a ring shows where focus is.
+ * A press with the pointer takes effect when it is released over the same entry, so one can be abandoned by moving away.
+ *
+ * A legend is a chart child like a key, and takes a strip along a side of the chart; entries that do not fit along a top
+ * or bottom legend wrap onto another row. It looks as `legend`, `legendLabel` and `legendTitle` say, which fall back to `text`.
+ */
+/* oxlint-disable typescript/no-non-null-assertion -- entries, widths and items are parallel arrays indexed together in one loop */
+import { STRING } from './attrs.js';
+import { ChartElement } from './element.js';
+import { hideFromAssistive, writeAria } from './aria.js';
+import { inputOf } from './input.js';
+import { EVENT_ARRANGE, EVENT_ATTACH, EVENT_FOCUS, EVENT_KEY, EVENT_MEASURE, EVENT_PAINT, EVENT_POINTER } from './events.js';
+import { drawFocusRing, makeTabStop, pressesButton } from './focus.js';
+import { f2 } from './geometry.js';
+import { Plane } from './plane.js';
+import { paintSample } from './series.js';
+import { LINE_HEIGHT, applyText, measureBlock } from './text.js';
+/** Width of a sample, and the gap between it and the name. */
+const SAMPLE_WIDTH = 24;
+const SAMPLE_GAP = 6;
+/** Space between entries along a row, and between rows. */
+const ENTRY_GAP = 14;
+const ROW_GAP = 4;
+const TITLE_BLOCK = 18;
+/** How faded an entry is when its series is hidden. */
+const DIMMED = 0.4;
+export class Legend extends ChartElement {
+    static takesInput = inputOf;
+    static attrTypes = { ...ChartElement.attrTypes, title: STRING };
+    #rect = { x: 0, y: 0, width: 0, height: 0 };
+    #items = [];
+    #rowHeight = 0;
+    #drawn = 0;
+    /** The entry the pointer went down on, and the entry holding keyboard focus (only while a ring is wanted). */
+    #pressed = null;
+    #focusNode = null;
+    #ring = false;
+    #nodes = [];
+    #samples = new Map();
+    get side() { return this.attrs.side ?? 'right'; }
+    get horizontal() {
+        return (this.attrs.orientation ?? (this.side === 'top' || this.side === 'bottom' ? 'horizontal' : 'vertical')) === 'horizontal';
+    }
+    /** The series listed: those of all the chart's planes that have a name. */
+    get entries() {
+        const out = [];
+        for (const c of this.requireParent())
+            if (c instanceof Plane)
+                for (const s of c.allSeries)
+                    if (s.attrs.name)
+                        out.push(s);
+        return out;
+    }
+    onEvent(ev) {
+        switch (ev.type) {
+            case EVENT_ATTACH:
+                this.surface.wrapper();
+                inputOf(this.requireParent()).watchInput(this);
+                break;
+            case EVENT_MEASURE: {
+                const size = this.#layout(ev.available.width);
+                if (size)
+                    ev.request = { min: size, max: size, side: this.side };
+                break;
+            }
+            case EVENT_ARRANGE:
+                this.#rect = ev.rect;
+                break;
+            case EVENT_PAINT:
+                this.#paint();
+                break;
+            case EVENT_POINTER: {
+                if (this.attrs.toggle === false)
+                    break;
+                const item = this.#at(ev.x - this.#rect.x, ev.y - this.#rect.y);
+                if (ev.kind === 'down' && (ev.buttons & 1) && item) {
+                    this.#pressed = item.series;
+                    ev.handled = true;
+                }
+                else if (ev.kind === 'up' && this.#pressed) {
+                    const press = this.#pressed;
+                    this.#pressed = null;
+                    if (item?.series === press)
+                        this.#toggle(press);
+                    ev.handled = true;
+                }
+                break;
+            }
+            case EVENT_KEY: {
+                const i = this.#nodes.indexOf(ev.node), item = this.#items[i];
+                if (item && pressesButton(ev))
+                    this.#toggle(item.series);
+                break;
+            }
+            case EVENT_FOCUS:
+                if (ev.focused) {
+                    this.#focusNode = ev.node;
+                    this.#ring = ev.visible;
+                }
+                else if (this.#focusNode === ev.node) {
+                    this.#focusNode = null;
+                    this.#ring = false;
+                }
+                this.invalidate();
+                break;
+        }
+    }
+    #toggle(series) { series.setAttribute('visible', !series.shown); }
+    /** Where a series' entry is, in the chart's pixels (valid after layout), or null if it is not listed. */
+    entryRect(series) {
+        const item = this.#items.find((i) => i.series === series);
+        return item ? { x: this.#rect.x + item.x, y: this.#rect.y + item.y, width: item.width, height: this.#rowHeight } : null;
+    }
+    /** The entry at a point in the legend's own pixels. */
+    #at(x, y) {
+        const pad = ENTRY_GAP / 2;
+        return this.#items.find((i) => x >= i.x - 2 && x <= i.x + i.width + pad && y >= i.y - ROW_GAP / 2 && y <= i.y + this.#rowHeight + ROW_GAP / 2);
+    }
+    #label() { return this.styleFor(['legendLabel', 'legend', 'text']); }
+    /** Place every entry, given how wide the chart is, and say how big the legend is; null when there is nothing to list. */
+    #layout(available) {
+        const entries = this.entries, chart = this.requireParent();
+        this.#items = [];
+        if (entries.length === 0)
+            return null;
+        const label = this.#label(), measure = chart.measureText;
+        const top = this.attrs.title ? TITLE_BLOCK : 0;
+        const rowHeight = this.#rowHeight = Math.ceil(label.size * LINE_HEIGHT) + 2;
+        const widths = entries.map((s) => SAMPLE_WIDTH + SAMPLE_GAP + measureBlock(measure, s.attrs.name ?? '', label).width);
+        const titleWidth = this.attrs.title ? measureBlock(measure, this.attrs.title, this.styleFor(['legendTitle', 'legend', 'text'])).width : 0;
+        let width = titleWidth, y = top, x = 0, rows = 1;
+        entries.forEach((series, i) => {
+            if (this.horizontal) {
+                if (x > 0 && x + widths[i] > available) {
+                    x = 0;
+                    y += rowHeight + ROW_GAP;
+                    rows++;
+                }
+                this.#items.push({ series, name: series.attrs.name ?? '', x, y, width: widths[i] });
+                x += widths[i] + ENTRY_GAP;
+                width = Math.max(width, x - ENTRY_GAP);
+            }
+            else {
+                this.#items.push({ series, name: series.attrs.name ?? '', x: 0, y: top + i * (rowHeight + ROW_GAP), width: widths[i] });
+                width = Math.max(width, widths[i]);
+            }
+        });
+        const count = this.horizontal ? rows : entries.length;
+        return { width: Math.ceil(width), height: top + count * rowHeight + (count - 1) * ROW_GAP };
+    }
+    #paint() {
+        const s = this.surface, root = s.wrapper(), items = this.#items, label = this.#label(), toggle = this.attrs.toggle !== false;
+        s.set(root, 'transform', `translate(${f2(this.#rect.x)} ${f2(this.#rect.y)})`);
+        applyText(s, root, label, 'start');
+        writeAria(s, root, this.attrs.meta, { role: 'group', ...(this.attrs.title && { label: this.attrs.title }) });
+        const title = this.attrs.title;
+        if (title) {
+            const t = s.node('title', 'text');
+            applyText(s, t, this.styleFor(['legendTitle', 'legend', 'text']), 'start');
+            s.set(t, 'y', label.size);
+            s.text(t, title);
+        }
+        else {
+            s.remove('title');
+        }
+        const h = this.#rowHeight, sampleH = Math.max(6, h - 6);
+        items.forEach((item, i) => {
+            const shown = item.series.shown, opacity = shown ? 1 : DIMMED;
+            const sample = paintSample(s, `s${i}`, item.series, item.x, item.y + (h - sampleH) / 2, SAMPLE_WIDTH, sampleH, this.#samples);
+            s.set(sample, 'opacity', opacity);
+            hideFromAssistive(s, sample);
+            const t = s.node(`t${i}`, 'text');
+            s.set(t, 'x', item.x + SAMPLE_WIDTH + SAMPLE_GAP);
+            s.set(t, 'y', f2(item.y + h / 2 + label.size * 0.35));
+            s.set(t, 'opacity', opacity);
+            hideFromAssistive(s, t); // the entry's own node carries the name
+            s.text(t, item.name);
+            // An invisible box over the entry is what the pointer is over, and what a screen reader finds.
+            const hit = s.node(`h${i}`, 'rect');
+            s.set(hit, 'x', item.x);
+            s.set(hit, 'y', item.y);
+            s.set(hit, 'width', item.width);
+            s.set(hit, 'height', h);
+            s.set(hit, 'fill', '#000');
+            s.set(hit, 'fill-opacity', 0);
+            s.set(hit, 'stroke', 'none');
+            s.set(hit, 'cursor', toggle ? 'pointer' : 'default');
+            s.set(hit, 'role', toggle ? 'button' : 'img');
+            s.set(hit, 'aria-label', item.name);
+            if (toggle) {
+                s.set(hit, 'aria-pressed', String(shown));
+                makeTabStop(s, hit);
+                inputOf(this.requireParent()).focusable(this, hit);
+            }
+            this.#nodes[i] = hit;
+        });
+        this.#nodes.length = items.length;
+        const focused = this.#ring && this.#focusNode ? this.#nodes.indexOf(this.#focusNode) : -1;
+        drawFocusRing(s, 'focus', this.styleFor(['focusRing', 'line']), focused >= 0 ? { x: items[focused].x, y: items[focused].y, width: items[focused].width, height: h } : null);
+        for (let i = items.length; i < this.#drawn; i++) {
+            s.removePrefix(`s${i}`);
+            this.#samples.delete(`s${i}`);
+            s.remove(`t${i}`);
+            s.remove(`h${i}`);
+        }
+        this.#drawn = items.length;
+    }
+}

package/dist/mapped.d.ts

@@ -0,0 +1,80 @@
+import type { Chart } from './chart.ts';
+import { Dimension, type DimensionAttributes } from './dimension.ts';
+import { type ElementRef } from './element.ts';
+import type { Extent } from './geometry.ts';
+/** No options of its own beyond a dimension's (range, padding, scale…). */
+export interface MappedDimensionAttributes extends DimensionAttributes {
+}
+/**
+ * A dimension whose output is not a position but a value: a colour, a size. It takes its range from every series
+ * that binds to it. Put it in the chart, beside the planes, and bind renderers to it; to show what it means, add a key
+ * (`ColorKey`, `SizeKey`) that refers to it.
+ *
+ * No one drives it: a plane's axes are started and fixed by their plane, but this belongs to the chart, so it notices
+ * for itself when a new flush has begun. The first contribution of a flush starts it over, and the first read of the
+ * range, which is when something draws, fixes it.
+ */
+export declare abstract class MappedDimension<Out, A extends MappedDimensionAttributes = MappedDimensionAttributes> extends Dimension<Chart, A> {
+    #private;
+    /** The output for a position 0..1 along the dimension. */
+    abstract valueAt(fraction: number): Out;
+    /** What data outside the range, or NaN, maps to. */
+    abstract get missing(): Out;
+    contribute(min: number, max: number): void;
+    get range(): Readonly<Extent>;
+}
+export type ColorRampName = 'viridis' | 'magma' | 'turbo' | 'blues' | 'greys' | 'diverging';
+export interface ColorAxisAttributes extends MappedDimensionAttributes {
+    /**
+     * A named ramp, or a list of colours spread evenly. Linear interpolation needs `#rgb` or `#rrggbb` colours;
+     * a stepped ramp takes any CSS colour. Default 'viridis'.
+     */
+    ramp?: ColorRampName | readonly string[];
+    /** Blend between the stops or pick the nearest band. Default 'linear'. */
+    interpolation?: 'linear' | 'step';
+    /** Colour for data with no value or outside the range. Default '#bbb'. */
+    missing?: string;
+}
+/** Data to colour: `new ColorAxis({ title: 'Pressure' }, new LinearScale())`. */
+export declare class ColorAxis extends MappedDimension<string, ColorAxisAttributes> {
+    static attrTypes: {
+        title: 1;
+        tickCount: 2;
+        tickStep: 2;
+        locale: 1;
+        onViewChange: 0;
+        missing: 1;
+        id: 1;
+        meta: {
+            title: 1;
+            description: 1;
+            role: 1;
+        };
+    };
+    /** The ramp's colours, low to high. */
+    get stops(): readonly string[];
+    valueAt(fraction: number): string;
+    get missing(): string;
+}
+export interface SizeAxisAttributes extends MappedDimensionAttributes {
+    /** The output range. Pixels for a size, so [2, 12] by default; it is also how to map to opacity ([0.2, 1]) or a width. */
+    output?: readonly [min: number, max: number];
+    /** Output for data with no value or outside the range. Default: the low end of `output`. */
+    missing?: number;
+}
+/** Data to a number: a marker size, a stroke width, an opacity. `new SizeAxis({ output: [3, 14] }, new LinearScale())`. */
+export declare class SizeAxis extends MappedDimension<number, SizeAxisAttributes> {
+    /** The output range. */
+    get output(): readonly [number, number];
+    valueAt(fraction: number): number;
+    get missing(): number;
+}
+/** One attribute fed from one channel of the data through a mapped dimension. */
+export interface Binding<Out> {
+    axis: ElementRef<MappedDimension<Out>>;
+    channel: string;
+}
+/** The bindings a renderer may declare: only the attributes in `Bindable`, each with a dimension of the matching output type. */
+export type Bindings<Bindable extends object> = {
+    [K in keyof Bindable]?: Binding<Bindable[K]>;
+};

package/dist/mapped.js

@@ -0,0 +1,106 @@
+/**
+ * Mapped dimensions: data to colour, size and so on, and the bindings that feed them to renderers.
+ *
+ * How a binding reaches the screen (an interdependent chain worth knowing):
+ *   renderer `bind: { fill: { axis, channel } }` → the series reads `renderer.bindings` and asks its source for that
+ *   channel → the series `contribute`s the channel's extent to the MappedDimension → the dimension fits a range from
+ *   every series that bound it → at paint time the renderer normalises the channel through the dimension (0..1) and calls
+ *   `valueAt` to get the colour/size. Keys read the same dimension, so legend and marks cannot disagree.
+ */
+/* 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 { STRING } from './attrs.js';
+import { Dimension } from './dimension.js';
+import { fail } from './element.js';
+/**
+ * A dimension whose output is not a position but a value: a colour, a size. It takes its range from every series
+ * that binds to it. Put it in the chart, beside the planes, and bind renderers to it; to show what it means, add a key
+ * (`ColorKey`, `SizeKey`) that refers to it.
+ *
+ * No one drives it: a plane's axes are started and fixed by their plane, but this belongs to the chart, so it notices
+ * for itself when a new flush has begun. The first contribution of a flush starts it over, and the first read of the
+ * range, which is when something draws, fixes it.
+ */
+export class MappedDimension extends Dimension {
+    // The flush this dimension last started afresh for. A chart-level dimension is not driven by a plane's `begin()`, so
+    // it compares the chart's flush counter with its own to know when contributions from the previous pass are stale.
+    #flush = -1;
+    #sync() {
+        const flush = this.chart?.flushCount ?? 0;
+        if (flush !== this.#flush) {
+            this.#flush = flush;
+            this.begin();
+        }
+    }
+    contribute(min, max) {
+        this.#sync();
+        super.contribute(min, max);
+    }
+    get range() {
+        this.#sync();
+        this.resolve();
+        return super.range;
+    }
+}
+const RAMPS = {
+    viridis: ['#440154', '#482878', '#3e4989', '#31688e', '#26828e', '#1f9e89', '#35b779', '#6ece58', '#b5de2b', '#fde725'],
+    magma: ['#000004', '#180f3e', '#451077', '#721f81', '#9f2f7f', '#cd4071', '#f1605d', '#fd9567', '#fec98d', '#fcfdbf'],
+    turbo: ['#30123b', '#4662d7', '#36aaf9', '#1ae4b6', '#72fe5e', '#c7ef34', '#faba39', '#f66b19', '#cb2a04', '#7a0403'],
+    blues: ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'],
+    greys: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'],
+    diverging: ['#2166ac', '#4393c3', '#92c5de', '#d1e5f0', '#f7f7f7', '#fddbc7', '#f4a582', '#d6604d', '#b2182b'],
+};
+/** A ramp's stops as flat r, g, b numbers, parsed once per list (keyed by the array, so the cache follows the ramp's lifetime). */
+const rgbOf = new WeakMap();
+function stopsToRgb(stops) {
+    const cached = rgbOf.get(stops);
+    if (cached)
+        return cached;
+    const rgb = new Float64Array(stops.length * 3);
+    stops.forEach((c, i) => {
+        const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(c) ?? fail(`a linear colour ramp takes #rgb or #rrggbb stops, not "${c}"`);
+        const h = m[1].length === 3 ? m[1].replace(/./g, '$&$&') : m[1];
+        for (let k = 0; k < 3; k++)
+            rgb[3 * i + k] = parseInt(h.slice(2 * k, 2 * k + 2), 16);
+    });
+    rgbOf.set(stops, rgb);
+    return rgb;
+}
+/** Two hex digits for a 0..255 channel. */
+const hex2 = (v) => Math.round(v).toString(16).padStart(2, '0');
+/** Data to colour: `new ColorAxis({ title: 'Pressure' }, new LinearScale())`. */
+export class ColorAxis extends MappedDimension {
+    static attrTypes = { ...MappedDimension.attrTypes, missing: STRING };
+    /** The ramp's colours, low to high. */
+    get stops() {
+        const r = this.attrs.ramp ?? 'viridis';
+        return typeof r === 'string' ? RAMPS[r] : r;
+    }
+    valueAt(fraction) {
+        if (!(fraction >= -1e-9 && fraction <= 1 + 1e-9))
+            return this.missing;
+        const f = fraction < 0 ? 0 : fraction > 1 ? 1 : fraction;
+        const stops = this.stops, n = stops.length;
+        if (this.attrs.interpolation === 'step')
+            return stops[Math.min(n - 1, Math.floor(f * n))];
+        const rgb = stopsToRgb(stops), pos = f * (n - 1), i = Math.min(n - 2, Math.floor(pos));
+        if (n === 1)
+            return stops[0];
+        const t = pos - i;
+        return '#' + hex2(rgb[3 * i] + t * (rgb[3 * i + 3] - rgb[3 * i]))
+            + hex2(rgb[3 * i + 1] + t * (rgb[3 * i + 4] - rgb[3 * i + 1]))
+            + hex2(rgb[3 * i + 2] + t * (rgb[3 * i + 5] - rgb[3 * i + 2]));
+    }
+    get missing() { return this.attrs.missing ?? '#bbb'; }
+}
+/** Data to a number: a marker size, a stroke width, an opacity. `new SizeAxis({ output: [3, 14] }, new LinearScale())`. */
+export class SizeAxis extends MappedDimension {
+    /** The output range. */
+    get output() { return this.attrs.output ?? [2, 12]; }
+    valueAt(fraction) {
+        if (!(fraction >= -1e-9 && fraction <= 1 + 1e-9))
+            return this.missing;
+        const [lo, hi] = this.output;
+        return lo + (fraction < 0 ? 0 : fraction > 1 ? 1 : fraction) * (hi - lo);
+    }
+    get missing() { return this.attrs.missing ?? this.output[0]; }
+}

package/dist/marker.d.ts

@@ -0,0 +1,143 @@
+/**
+ * Markers: one small shape per point.
+ *
+ *   Marker
+ *   ├─ DotMarker              a zero-length stroke, round or square capped; its size is a stroke width
+ *   ├─ LineMarker             open shapes drawn with a stroke; `size` goes into the path data
+ *   │   ├─ CrossMarker        ×
+ *   │   └─ PlusMarker         +
+ *   └─ ShapeMarker            closed shapes, filled and stroked; `size` goes into the path data
+ *       ├─ CircleMarker       a bubble series is a CircleMarker with `size` bound to a channel
+ *       └─ SquareMarker
+ *
+ * To write another, extend `Marker` (or one of the two below it) and say what one shape looks like.
+ */
+import type { PointBuffer } from './data.ts';
+import { type ChartEvent } from './events.ts';
+import { type ResolvedBinding, SeriesRenderer, type SeriesRendererAttributes, type StyleBindable } from './renderer.ts';
+import type { PlatformNode } from './platform.ts';
+import type { Surface } from './surface.ts';
+import type { ShapeProps } from './theme.ts';
+/** The options shared by all markers; `Bindable` is what this kind of marker lets you bind (so a wrong one fails to compile). */
+export interface MarkerAttributes<Bindable extends object> extends SeriesRendererAttributes<Bindable> {
+    /** Half the width of a marker in pixels: a radius, or the distance from the centre to an edge. Default 3. */
+    size?: number;
+    /**
+     * Draw all the markers that look alike as one path. Default true.
+     *
+     * One path per look is what keeps a large scatter cheap. The catch is that markers in one path do not blend where
+     * they overlap, so `opacity` darkens nothing. With `false` every marker is a node of its own and they do blend,
+     * but a node per point is slow to build, to write and to render: a bad idea for big data. Each marker then also
+     * gets exactly the value it binds, rather than the nearest of the `maxNodes`-limited steps.
+     */
+    merge?: boolean;
+}
+/** What a marker's node is told to look like: constants and bindings resolved, `size` in pixels. */
+export interface MarkerStyle {
+    stroke: string;
+    strokeWidth: number;
+    fill: string;
+    opacity: number;
+    size: number;
+}
+/**
+ * The common work of all markers: cull what is off the plot, work out each point's look from its bindings, and group
+ * points that look alike into one path.
+ *
+ * Why grouping: a scatter of 100k points as 100k nodes is slow to build and to render. Instead each bound style is
+ * quantized into a few steps, a point's look is the combination of its steps (the `key`), and every point with the same
+ * key joins a single path. The number of nodes is then bounded by `maxNodes`, not by the data. Geometry (a bubble's
+ * radius) is not quantized: it goes straight into the path data, which costs the same however it varies.
+ */
+export declare abstract class Marker<A extends MarkerAttributes<object>> extends SeriesRenderer<A> {
+    #private;
+    /** Path data for one marker centred on (x, y), `r` pixels from the centre to an edge. */
+    protected abstract shape(x: number, y: number, r: number): string;
+    /** True for a bound property that goes into `shape`, false for one that sets an attribute of the node. Only `size` can be geometric. */
+    protected abstract isGeometric(property: string): boolean;
+    /** Which theme selector holds this kind of marker's own look, between `marker` and the general `shape`. */
+    protected abstract readonly kind: 'dotMarker' | 'lineMarker' | 'shapeMarker';
+    /** Where the series' palette colour goes: the stroke for markers that are strokes, the fill for those that are filled. */
+    protected abstract accent(color: string): Partial<ShapeProps>;
+    /** Write a node's look. Every property that has a value, by constant or binding, is in `v`. */
+    protected abstract style(s: Surface, node: PlatformNode, v: MarkerStyle): void;
+    /** Its fill (or its stroke, for a marker that is only a stroke), unless that is bound to data. */
+    get swatch(): string | null;
+    /**
+     * One marker in the middle of the box, as big as it is on the plot (no bigger than the box). What is bound to data takes
+     * the value at the middle of its dimension, since a sample stands for no point in particular.
+     */
+    sample(s: Surface, parent: PlatformNode, key: string, width: number, height: number): void;
+    /** Its size, or the largest a bound size gives, and a pixel for the stroke round it. */
+    get reach(): number;
+    /** The bound properties with their dimensions resolved. A property is stylistic unless the marker puts it in the path. */
+    get bindings(): readonly ResolvedBinding[];
+    /** How many steps each stylistic binding is quantized to, so that the combinations stay within `maxNodes`. 0 when not grouping. */
+    get stepsPerBinding(): number;
+    onEvent(ev: ChartEvent): void;
+    /**
+     * Three phases: (1) turn each bound channel into a column of 0..1 positions along its dimension; (2) walk the points,
+     * dropping gaps and those off the plot, building each marker's path data and choosing its node; (3) write the nodes
+     * and remove those that no longer have any marker.
+     */
+    protected draw(points: Readonly<PointBuffer>): void;
+}
+export interface DotMarkerBindable {
+    stroke: string;
+    size: number;
+    opacity: number;
+}
+export interface DotMarkerAttributes extends MarkerAttributes<DotMarkerBindable> {
+    /** Round caps make circles, square caps make squares. Default 'round'. */
+    cap?: 'round' | 'square';
+}
+/**
+ * A dot is a stroke with no length, as wide as the dot is: the cheapest marker, and the one a dense scatter wants.
+ * Since its size is a stroke width, a bound `size` is one of the quantized styles, unlike on the other markers.
+ */
+export declare class DotMarker extends Marker<DotMarkerAttributes> {
+    protected readonly kind = "dotMarker";
+    protected accent(color: string): Partial<ShapeProps>;
+    protected shape(x: number, y: number): string;
+    protected isGeometric(): boolean;
+    protected style(s: Surface, n: PlatformNode, v: MarkerStyle): void;
+}
+export interface LineMarkerBindable {
+    stroke: string;
+    strokeWidth: number;
+    opacity: number;
+    size: number;
+}
+/** Shapes made of strokes. The size is in the path data, so it varies per point at no cost. */
+export declare abstract class LineMarker<A extends MarkerAttributes<LineMarkerBindable> = MarkerAttributes<LineMarkerBindable>> extends Marker<A> {
+    protected readonly kind = "lineMarker";
+    protected accent(color: string): Partial<ShapeProps>;
+    protected isGeometric(property: string): boolean;
+    protected style(s: Surface, n: PlatformNode, v: MarkerStyle): void;
+}
+/** ×: two diagonals, `size` from the centre to each end. */
+export declare class CrossMarker extends LineMarker {
+    protected shape(x: number, y: number, r: number): string;
+}
+/** +: a horizontal and a vertical stroke. */
+export declare class PlusMarker extends LineMarker {
+    protected shape(x: number, y: number, r: number): string;
+}
+export interface ShapeMarkerBindable extends StyleBindable {
+    size: number;
+}
+/** Closed shapes, filled and stroked. The most flexible markers: stroke, stroke width, fill, opacity and size are all bindable. */
+export declare abstract class ShapeMarker<A extends MarkerAttributes<ShapeMarkerBindable> = MarkerAttributes<ShapeMarkerBindable>> extends Marker<A> {
+    protected readonly kind = "shapeMarker";
+    protected accent(color: string): Partial<ShapeProps>;
+    protected isGeometric(property: string): boolean;
+    protected style(s: Surface, n: PlatformNode, v: MarkerStyle): void;
+}
+/** A filled circle. A bubble series is this with `size` bound to a channel. */
+export declare class CircleMarker extends ShapeMarker {
+    protected shape(x: number, y: number, r: number): string;
+}
+/** A square, `size` from the centre to each side. */
+export declare class SquareMarker extends ShapeMarker {
+    protected shape(x: number, y: number, r: number): string;
+}