@fundar/data-chart-telling 1.16.0 → 1.18.0

package/dist/markers/utils/BoxLabel.js

@@ -0,0 +1,175 @@
+const read = (edge) => (row) => typeof edge === 'function'
+    ? edge(row)
+    : typeof edge === 'string' || typeof edge === 'symbol'
+        ? row?.[edge]
+        : edge;
+/** The middle of two positions along an axis, whether numbers or dates. */
+const middle = (from, to) => from instanceof Date || to instanceof Date
+    ? new Date((Number(from) + Number(to)) / 2)
+    : (Number(from) + Number(to)) / 2;
+const bandwidth = (scale) => scale?.type === 'band' ? Number(scale.fn.bandwidth()) : undefined;
+const distance = (scale, from, to) => scale ? Math.abs(Number(scale.fn(to)) - Number(scale.fn(from))) : undefined;
+/**
+ * How a marker that draws a box per row writes a label in each: the `text` marker for them, centred on the box,
+ * and where the box is for it to fit to. A `rect` says it with its edges, a `cell` is a band of each axis, and a bar
+ * or a waffle is a band of its category axis and the stretch of its value.
+ */
+export class BoxLabel {
+    /** `undefined` when the marker has no label, or does not say where its boxes are. */
+    static of(marker, plot = {}) {
+        if (!marker.label)
+            return undefined;
+        const own = BoxLabel.#shape(marker, plot.isHorizontal ?? marker.isHorizontal ?? false);
+        if (!own)
+            return undefined;
+        const { anchor, outside, gap, ...label } = marker.label;
+        const size = typeof own.box === 'function' ? own.box : own.size;
+        const placed = BoxLabel.#anchored({
+            anchor,
+            outside,
+            gap: gap ?? plot.gap
+        }, label, size, plot.scales);
+        return {
+            box: own.box,
+            marker: {
+                // A label outside its shape has nothing to fit to.
+                fit: !outside,
+                ...label,
+                ...placed,
+                type: 'text',
+                data: marker.data,
+                x: own.x,
+                y: own.y
+            }
+        };
+    }
+    /**
+     * What puts a label at `anchor` of its shape: the pixels it is moved from the middle - a function of the row, for
+     * the size of its shape is the row's own - and the sides of its point it is written on. `{}` for the middle.
+     */
+    static #anchored(where, label, size, scales) {
+        const { anchor = 'middle', outside = false } = where;
+        if (anchor === 'middle' || !size)
+            return {};
+        const gap = where.gap ?? 4;
+        const horizontal = anchor.endsWith('left') ? -1 : anchor.endsWith('right') ? 1 : 0;
+        const vertical = anchor.startsWith('top') ? -1 : anchor.startsWith('bottom') ? 1 : 0;
+        // Beyond an edge only means something for an edge: a corner is inside its shape.
+        const beyond = outside && horizontal * vertical === 0;
+        const away = beyond ? 1 : -1;
+        const move = (axis, side, row) => {
+            // Read when a label is drawn, not when its marker is made: the scales move as the labels register.
+            const current = scales?.();
+            const box = current ? size(row, current) : undefined;
+            return box ? side * (box[axis] / 2 + away * gap) : 0;
+        };
+        // A number of the label's own (or its styles') is added to the move: it is the push from the anchor.
+        const own = (value, fallback) => Number(typeof value === 'number' ? value : (fallback ?? 0));
+        const baseX = own(label.dx, label.styles?.dx);
+        const baseY = own(label.dy, label.styles?.dy);
+        return {
+            dx: horizontal === 0 ? label.dx : (row) => baseX + move('width', horizontal, row),
+            dy: vertical === 0 ? label.dy : (row) => baseY + move('height', vertical, row),
+            styles: {
+                ...label.styles,
+                textAnchor: label.styles?.textAnchor ??
+                    (horizontal === 0 ? 'middle' : (horizontal === 1) === beyond ? 'start' : 'end'),
+                lineAnchor: label.styles?.lineAnchor ??
+                    (vertical === 0 ? 'middle' : (vertical === 1) === beyond ? 'top' : 'bottom')
+            }
+        };
+    }
+    /** A style of the marker, when it is a number: a function of the row says nothing of a box in general. */
+    static #style(marker, name) {
+        const value = marker.styles?.[name];
+        return typeof value === 'number' ? value : undefined;
+    }
+    static #shape(marker, isHorizontal) {
+        if (marker.type === 'cell')
+            return BoxLabel.#cell(marker);
+        if (marker.type === 'bar') {
+            return marker.role === 'segment'
+                ? BoxLabel.#bar(marker, marker.isHorizontal ?? false)
+                : undefined;
+        }
+        if (marker.type === 'waffle')
+            return BoxLabel.#bar(marker, isHorizontal);
+        return BoxLabel.#edges(marker);
+    }
+    /** A rectangle: the box is between its edges. */
+    static #edges({ x, y, x1, x2, y1, y2 }) {
+        // A side with a value and no start, next to one with both its edges, runs from zero to it, as a bar does.
+        if (y1 === undefined &&
+            y2 === undefined &&
+            y !== undefined &&
+            x1 !== undefined &&
+            x2 !== undefined) {
+            [y1, y2] = [0, y];
+        }
+        if (x1 === undefined &&
+            x2 === undefined &&
+            x !== undefined &&
+            y1 !== undefined &&
+            y2 !== undefined) {
+            [x1, x2] = [0, x];
+        }
+        if ([x1, x2, y1, y2].some((edge) => edge === undefined))
+            return undefined;
+        const [left, right, top, bottom] = [x1, x2, y1, y2].map(read);
+        const size = (row, scales) => {
+            const [width, height] = [
+                distance(scales.x, left(row), right(row)),
+                distance(scales.y, top(row), bottom(row))
+            ];
+            return width === undefined || height === undefined ? undefined : { width, height };
+        };
+        return {
+            box: { x1, x2, y1, y2 },
+            size,
+            x: (row) => middle(left(row), right(row)),
+            y: (row) => middle(top(row), bottom(row))
+        };
+    }
+    /** A cell: a band of each axis, less its inset. */
+    static #cell(marker) {
+        if (marker.x === undefined || marker.y === undefined)
+            return undefined;
+        const inset = Number(BoxLabel.#style(marker, 'inset') ?? 0.5);
+        const box = (_, scales) => {
+            const [width, height] = [bandwidth(scales.x), bandwidth(scales.y)];
+            return width === undefined || height === undefined
+                ? undefined
+                : { width: width - 2 * inset, height: height - 2 * inset };
+        };
+        return { box: box, x: marker.x, y: marker.y };
+    }
+    /** A bar or a waffle: a band of the category axis, as wide as its insets leave it, and as long as its value. */
+    static #bar(marker, isHorizontal) {
+        const [category, from, to] = isHorizontal
+            ? [marker.y, marker.x1, marker.x2]
+            : [marker.x, marker.y1, marker.y2];
+        const value = isHorizontal ? marker.x : marker.y;
+        // Without both ends, the bar runs from zero to its value.
+        const [start, end] = from !== undefined && to !== undefined ? [from, to] : [0, value];
+        if (category === undefined || end === undefined)
+            return undefined;
+        const [first, last] = [start, end].map(read);
+        const [before, after] = isHorizontal
+            ? [BoxLabel.#style(marker, 'insetTop'), BoxLabel.#style(marker, 'insetBottom')]
+            : [BoxLabel.#style(marker, 'insetLeft'), BoxLabel.#style(marker, 'insetRight')];
+        const middleOf = (row) => middle(first(row), last(row));
+        const box = (row, scales) => {
+            const band = bandwidth(isHorizontal ? scales.y : scales.x);
+            const length = distance(isHorizontal ? scales.x : scales.y, first(row), last(row));
+            if (band === undefined || length === undefined)
+                return undefined;
+            const thickness = marker.thickness ?? band * (1 - Number(before ?? 0) - Number(after ?? 0));
+            return isHorizontal
+                ? { width: length, height: thickness }
+                : { width: thickness, height: length };
+        };
+        return isHorizontal
+            ? { box: box, x: middleOf, y: category }
+            : { box: box, x: category, y: middleOf };
+    }
+}

package/dist/markers/utils/MarkerEvents.d.ts

@@ -0,0 +1,23 @@
+import type { CommonMarkerEvents, MarkEventHandler, MarkEventName } from '../../types/markers/channels/commonMarkerEvents';
+/** What svelteplot's marks are given for a marker's events. */
+export type MarkerEventProps = Partial<Record<MarkEventName, MarkEventHandler>>;
+/**
+ * The events of a marker, as the props of the svelteplot mark that draws it: the handlers it is given
+ * (`onclick`, `onpointerenter`...). Every marker takes them from `CommonMarkerConfig`, so each one only has to
+ * spread {@link MarkerEvents.props} on its mark.
+ */
+export declare class MarkerEvents {
+    #private;
+    private constructor();
+    /** The events of the marker `marker` reads. */
+    static use(marker: () => CommonMarkerEvents): MarkerEvents;
+    /** Whether the marker has a handler for any event. */
+    get any(): boolean;
+    /**
+     * The handlers as DOM listeners of the shape drawn for `row` (the `index`-th), for a marker that draws
+     * its shapes itself rather than through a svelteplot mark that wires them up.
+     */
+    forRow(row: unknown, index: number): Partial<Record<MarkEventName, (event: Event) => void>>;
+    /** The props to spread on the marker's svelteplot mark. Read in the template, so it follows the marker. */
+    get props(): MarkerEventProps;
+}

package/dist/markers/utils/MarkerEvents.js

@@ -0,0 +1,44 @@
+import { MARK_EVENTS } from '../../types/markers/channels/commonMarkerEvents';
+/**
+ * The events of a marker, as the props of the svelteplot mark that draws it: the handlers it is given
+ * (`onclick`, `onpointerenter`...). Every marker takes them from `CommonMarkerConfig`, so each one only has to
+ * spread {@link MarkerEvents.props} on its mark.
+ */
+export class MarkerEvents {
+    #marker;
+    constructor(marker) {
+        this.#marker = marker;
+    }
+    /** The events of the marker `marker` reads. */
+    static use(marker) {
+        return new MarkerEvents(marker);
+    }
+    /** Whether the marker has a handler for any event. */
+    get any() {
+        const marker = this.#marker();
+        return MARK_EVENTS.some((name) => !!marker[name]);
+    }
+    /**
+     * The handlers as DOM listeners of the shape drawn for `row` (the `index`-th), for a marker that draws
+     * its shapes itself rather than through a svelteplot mark that wires them up.
+     */
+    forRow(row, index) {
+        const marker = this.#marker();
+        const own = {};
+        for (const name of MARK_EVENTS) {
+            const handler = marker[name];
+            if (handler)
+                own[name] = (event) => handler(event, row, index);
+        }
+        return own;
+    }
+    /** The props to spread on the marker's svelteplot mark. Read in the template, so it follows the marker. */
+    get props() {
+        const marker = this.#marker();
+        const own = {};
+        for (const name of MARK_EVENTS)
+            if (marker[name])
+                own[name] = marker[name];
+        return own;
+    }
+}

package/dist/markers/utils/MarkerLabel.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import TextMarker from '../text/TextMarker.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { BoxLabel, type Labelled } from './BoxLabel';
+	import { MARK_EVENTS } from '../../types/markers/channels/commonMarkerEvents';
+	import type { TextLabelConfig } from '../../types/markers/basic/text';
+
+	/**
+	 * The `label` of a marker that draws a box per row: a `text` marker anchored in each box and fitted to it. A marker
+	 * with a label only has to render `<MarkerLabel {marker} />` after its own shapes. Nothing is drawn without a
+	 * `label`, or when the marker does not say where its boxes are.
+	 */
+	const { marker }: { marker: Labelled & { label?: TextLabelConfig } } = $props();
+	const plot = usePlot();
+	const cfg = $derived(getConfiguration());
+
+	const labelled = $derived(
+		BoxLabel.of(marker, {
+			isHorizontal: plot.axes?.isHorizontal,
+			gap: cfg.text.label.gap,
+			scales: () => plot.svelteplot.scales as never
+		})
+	);
+	/** A label with a handler of its own listens for the pointer; one without leaves it to the shape under it. */
+	const listens = $derived(MARK_EVENTS.some((name) => !!marker.label?.[name]));
+</script>
+
+{#if labelled}
+	<g pointer-events={listens ? undefined : 'none'}>
+		<TextMarker marker={labelled.marker} box={labelled.box} />
+	</g>
+{/if}

package/dist/markers/utils/MarkerLabel.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Labelled } from './BoxLabel';
+import type { TextLabelConfig } from '../../types/markers/basic/text';
+type $$ComponentProps = {
+    marker: Labelled & {
+        label?: TextLabelConfig;
+    };
+};
+declare const MarkerLabel: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkerLabel = ReturnType<typeof MarkerLabel>;
+export default MarkerLabel;

package/dist/markers/utils/PointPixel.d.ts

@@ -0,0 +1,37 @@
+import type { BandSlice } from '../../types/layout/hover';
+type Scale = {
+    type?: string;
+    fn?: (value: never) => unknown;
+} | undefined;
+/** Where a point is drawn, in pixels of its plot: its `x` and `y` through the plot's scales. */
+export declare class PointPixel {
+    #private;
+    /**
+     * `point`'s pixel position - the middle of its band on a band scale, of its slice when it has one (a grouped
+     * bar's series) - or `null` when a scale cannot place it.
+     */
+    static of(scales: {
+        x?: Scale;
+        y?: Scale;
+    }, point: {
+        x: unknown;
+        y: unknown;
+        areaInset?: BandSlice;
+    }): {
+        x: number;
+        y: number;
+    } | null;
+    /** The index of the one of `points` nearest `cursor`, or `-1` when none can be placed. */
+    static nearest(scales: {
+        x?: Scale;
+        y?: Scale;
+    }, points: readonly {
+        x: unknown;
+        y: unknown;
+        areaInset?: BandSlice;
+    }[], cursor: {
+        x: number;
+        y: number;
+    }): number;
+}
+export {};

package/dist/markers/utils/PointPixel.js

@@ -0,0 +1,44 @@
+import { BandNudge } from './BandNudge';
+/** Where a point is drawn, in pixels of its plot: its `x` and `y` through the plot's scales. */
+export class PointPixel {
+    /**
+     * `point`'s pixel position - the middle of its band on a band scale, of its slice when it has one (a grouped
+     * bar's series) - or `null` when a scale cannot place it.
+     */
+    static of(scales, point) {
+        const x = PointPixel.#along(scales.x, point.x);
+        const y = PointPixel.#along(scales.y, point.y);
+        if (x == null || y == null)
+            return null;
+        const nudge = BandNudge.of(scales, point.areaInset);
+        return { x: x + nudge.dx, y: y + nudge.dy };
+    }
+    /** The index of the one of `points` nearest `cursor`, or `-1` when none can be placed. */
+    static nearest(scales, points, cursor) {
+        let best = -1;
+        let bestDistance = Infinity;
+        points.forEach((point, index) => {
+            const pixel = PointPixel.of(scales, point);
+            if (!pixel)
+                return;
+            const distance = Math.hypot(pixel.x - cursor.x, pixel.y - cursor.y);
+            if (distance < bestDistance) {
+                best = index;
+                bestDistance = distance;
+            }
+        });
+        return best;
+    }
+    /** `value`'s pixel along one scale, in the middle of its band on a band scale. */
+    static #along(scale, value) {
+        if (!scale?.fn || value == null)
+            return null;
+        const raw = Number(scale.fn(value));
+        if (!Number.isFinite(raw))
+            return null;
+        if (scale.type !== 'band')
+            return raw;
+        const bandwidth = scale.fn.bandwidth?.() ?? 0;
+        return raw + bandwidth / 2;
+    }
+}

package/dist/markers/utils/RowStroke.d.ts

@@ -1,31 +1,19 @@
-import type { StrokeStyle } from '../../types/plots/styling';
-/** A stroke channel per row: a field key of the row, or a function of it. */
-type RowChannel<T> = string | ((d: never) => T) | undefined;
+import type { PerRow, StrokeStyle } from '../../types/plots/styling';
 /**
- * The stroke of a line-like marker that takes it row by row (a `rule`, an
- * `arrow`): each of `stroke`, `strokeWidth` and `strokeOpacity` is a field of
- * the row or a function of it, else the marker's own `styles`, else a default.
- * A color and an opacity per row are drawn as they are - svelteplot would map
- * them through its own color and opacity scales.
+ * The stroke of a line-like marker that takes it row by row (a `rule`, an `arrow`): each of
+ * `stroke`, `strokeWidth` and `strokeOpacity` in the marker's `styles` is a value or a function of
+ * the row, else a default. A color and an opacity per row are drawn as they are - svelteplot would
+ * map them through its own color and opacity scales.
  */
 export declare class RowStroke {
-    #private;
-    /** The props a mark takes for `channels`, over `styles` and the given `fallback`s. */
-    static of(channels: {
-        stroke?: RowChannel<string | undefined>;
-        strokeWidth?: RowChannel<number>;
-        strokeOpacity?: RowChannel<number>;
-    }, styles: StrokeStyle | undefined, fallback: {
+    /** The props a mark takes for `styles`, over the given `fallback`s; `rows` are what a string in `styles` can name a field of. */
+    static of(styles: PerRow<StrokeStyle> | undefined, rows: readonly unknown[], fallback: {
         stroke: string;
         strokeWidth?: number;
         strokeOpacity?: number;
     }): {
-        stroke: string | {
-            value: (d: Record<string, unknown>) => string | undefined;
-            scale: null;
-        };
-        strokeWidth: number | ((d: Record<string, unknown>) => number) | undefined;
+        stroke: string;
+        strokeWidth: number | undefined;
         strokeOpacity: never;
     };
 }
-export {};

package/dist/markers/utils/RowStroke.js

@@ -1,28 +1,17 @@
+import { RowStyle } from './RowStyle';
 /**
- * The stroke of a line-like marker that takes it row by row (a `rule`, an
- * `arrow`): each of `stroke`, `strokeWidth` and `strokeOpacity` is a field of
- * the row or a function of it, else the marker's own `styles`, else a default.
- * A color and an opacity per row are drawn as they are - svelteplot would map
- * them through its own color and opacity scales.
+ * The stroke of a line-like marker that takes it row by row (a `rule`, an `arrow`): each of
+ * `stroke`, `strokeWidth` and `strokeOpacity` in the marker's `styles` is a value or a function of
+ * the row, else a default. A color and an opacity per row are drawn as they are - svelteplot would
+ * map them through its own color and opacity scales.
  */
 export class RowStroke {
-    /** A per-row channel as the function svelteplot reads. */
-    static #accessor(channel) {
-        return typeof channel === 'string'
-            ? (d) => d[channel]
-            : channel;
-    }
-    /** The props a mark takes for `channels`, over `styles` and the given `fallback`s. */
-    static of(channels, styles, fallback) {
-        const color = RowStroke.#accessor(channels.stroke);
-        const width = RowStroke.#accessor(channels.strokeWidth);
-        const opacity = RowStroke.#accessor(channels.strokeOpacity);
+    /** The props a mark takes for `styles`, over the given `fallback`s; `rows` are what a string in `styles` can name a field of. */
+    static of(styles, rows, fallback) {
         return {
-            stroke: color ? { value: color, scale: null } : (styles?.stroke ?? fallback.stroke),
-            strokeWidth: width ?? styles?.strokeWidth ?? fallback.strokeWidth,
-            strokeOpacity: (opacity
-                ? { value: opacity, scale: null }
-                : (styles?.strokeOpacity ?? fallback.strokeOpacity))
+            stroke: RowStyle.of(styles?.stroke, rows) ?? fallback.stroke,
+            strokeWidth: RowStyle.field(styles?.strokeWidth) ?? fallback.strokeWidth,
+            strokeOpacity: (RowStyle.opacity(styles?.strokeOpacity) ?? fallback.strokeOpacity)
         };
     }
 }

package/dist/markers/utils/RowStyle.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A marker's style as svelteplot reads it. A style that depends on the row is handed over as the
+ * value of a channel with no scale: svelteplot would otherwise map what it gives through its own
+ * color or opacity scale, and a row's opacity of 0.55 would no longer be 0.55.
+ */
+export declare class RowStyle {
+    #private;
+    /**
+     * A color, as a prop of a mark: a function of the row is a channel with no scale; a string is the
+     * field of the rows it names (when they have one of that name), else the color itself.
+     */
+    static of<T>(style: T | ((row: never) => T) | undefined, rows?: readonly unknown[]): T | undefined;
+    /**
+     * The color each row is drawn with, as {@link of} reads `style`: a function of the row, the field of the rows a
+     * string names, else the color itself. `undefined` when there is no color to read.
+     */
+    static colorOf(style: unknown, rows?: readonly unknown[]): ((row: unknown) => string | undefined) | undefined;
+    /** An opacity: a number as it is, a string the field of the rows it names, a function of the row; the last two with no scale. */
+    static opacity(style: number | string | ((row: never) => number) | undefined): number | undefined;
+    /** Any other number (a width, a radius, an inset): a string is the field of the rows it names, a function is called with the row. */
+    static field<T>(style: T | string | ((row: never) => T) | undefined): T | undefined;
+    /** \`styles\` without its functions - for a shape that stands for no row (a hover band), where there is nothing to call them with. */
+    static flat<TStyle extends object>(styles: TStyle | undefined): {
+        [K in keyof TStyle]?: Exclude<TStyle[K], (...args: never[]) => unknown>;
+    };
+}

package/dist/markers/utils/RowStyle.js

@@ -0,0 +1,55 @@
+/**
+ * A marker's style as svelteplot reads it. A style that depends on the row is handed over as the
+ * value of a channel with no scale: svelteplot would otherwise map what it gives through its own
+ * color or opacity scale, and a row's opacity of 0.55 would no longer be 0.55.
+ */
+export class RowStyle {
+    /** The accessor that reads `key` off a row. */
+    static #read = (key) => (row) => row?.[key];
+    /**
+     * A color, as a prop of a mark: a function of the row is a channel with no scale; a string is the
+     * field of the rows it names (when they have one of that name), else the color itself.
+     */
+    static of(style, rows) {
+        if (typeof style === 'function')
+            return { value: style, scale: null };
+        if (typeof style === 'string' && RowStyle.#isField(style, rows))
+            return { value: RowStyle.#read(style), scale: null };
+        return style;
+    }
+    /**
+     * The color each row is drawn with, as {@link of} reads `style`: a function of the row, the field of the rows a
+     * string names, else the color itself. `undefined` when there is no color to read.
+     */
+    static colorOf(style, rows) {
+        if (typeof style === 'function')
+            return (row) => style(row);
+        if (typeof style !== 'string')
+            return undefined;
+        if (RowStyle.#isField(style, rows)) {
+            const read = RowStyle.#read(style);
+            return (row) => read(row);
+        }
+        return () => style;
+    }
+    /** An opacity: a number as it is, a string the field of the rows it names, a function of the row; the last two with no scale. */
+    static opacity(style) {
+        if (typeof style === 'function')
+            return { value: style, scale: null };
+        if (typeof style === 'string')
+            return { value: RowStyle.#read(style), scale: null };
+        return style;
+    }
+    /** Any other number (a width, a radius, an inset): a string is the field of the rows it names, a function is called with the row. */
+    static field(style) {
+        return (typeof style === 'string' ? RowStyle.#read(style) : style);
+    }
+    /** Whether a string names a field of the rows - at least one has it - rather than being a color. */
+    static #isField(name, rows) {
+        return !!rows?.some((row) => typeof row === 'object' && row !== null && name in row);
+    }
+    /** \`styles\` without its functions - for a shape that stands for no row (a hover band), where there is nothing to call them with. */
+    static flat(styles) {
+        return Object.fromEntries(Object.entries(styles ?? {}).filter(([, value]) => typeof value !== 'function'));
+    }
+}

package/dist/markers/vector/VectorMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Vector } from 'svelteplot';
 	import type { GeoVectorMarkerConfig } from '../../types/markers/geo';
 
@@ -10,12 +11,14 @@
 	 * shape actually draws with, matching svelteplot's own convention.
 	 */
 	let { marker }: { marker: GeoVectorMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const shape = $derived(marker.shape ?? 'arrow-filled');
 	const isFilledShape = $derived(shape === 'arrow-filled');
 </script>
 
 <Vector
+	{...events.props}
 	data={marker.data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/voronoi/VoronoiMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Voronoi } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +8,7 @@
 
 	/** Renders one `'voronoi'` marker as `<Voronoi>` - one Voronoi cell per point. */
 	let { marker }: { marker: VoronoiMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,14 +16,15 @@
 </script>
 
 <Voronoi
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}
 	z={marker.grouping}
-	fill={marker.styles?.fill}
-	fillOpacity={marker.styles?.fillOpacity}
-	stroke={marker.styles?.stroke ?? channelColor}
-	strokeWidth={marker.styles?.strokeWidth}
-	strokeOpacity={marker.styles?.strokeOpacity}
+	fill={RowStyle.of(marker.styles?.fill, data)}
+	fillOpacity={RowStyle.opacity(marker.styles?.fillOpacity)}
+	stroke={RowStyle.of(marker.styles?.stroke, data) ?? channelColor}
+	strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+	strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 	strokeDasharray={marker.styles?.strokeDasharray}
 />

package/dist/markers/voronoi/VoronoiMeshMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { VoronoiMesh } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +7,7 @@
 
 	/** Renders one `'voronoiMesh'` marker as `<VoronoiMesh>` - the Voronoi diagram as a single mesh. */
 	let { marker }: { marker: VoronoiMeshMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,6 +15,7 @@
 </script>
 
 <VoronoiMesh
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/waffle/WaffleMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { WaffleX, WaffleY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
@@ -7,6 +9,7 @@
 
 	/** Renders one `'waffle'` marker as `<WaffleX>` or `<WaffleY>`, picked from the way the plot runs (`usePlot().axes`). */
 	let { marker }: { marker: WaffleMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -19,6 +22,7 @@
 </script>
 
 <WaffleMark
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}
@@ -27,10 +31,10 @@
 	multiple={marker.multiple}
 	gap={marker.gap}
 	round={marker.round}
-	borderRadius={marker.styles?.borderRadius}
+	borderRadius={RowStyle.field(marker.styles?.borderRadius)}
 	{fill}
-	fillOpacity={marker.styles?.fillOpacity}
-	stroke={marker.styles?.stroke}
-	strokeWidth={marker.styles?.strokeWidth}
-	strokeOpacity={marker.styles?.strokeOpacity}
+	fillOpacity={RowStyle.opacity(marker.styles?.fillOpacity)}
+	stroke={RowStyle.of(marker.styles?.stroke, data)}
+	strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+	strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 />