@fundar/data-chart-telling 1.16.0 → 1.17.0

package/dist/layout/styles/ValueLabels.d.ts

@@ -5,11 +5,12 @@ import type { ValuesStyle } from '../../types/layout/styles';
 import type { ValueLabelsOptions } from '../../types/phases/styles/phase';
 import type { Series } from '../../types/plots/data/common';
 import type { FontStyle, StrokeStyle } from '../../types/plots/styling';
-import type { TextAnchor, ValueAnchor } from '../../types/plots/constants';
+import type { LabelAnchor, TextAnchor, ValueAnchor } from '../../types/plots/constants';
 import type { BoxAnchors, EdgeBox } from '../../types/layout/box';
 import type { MarginSide } from '../../types/plots/props';
 import type { AxisPlotCtx, AxisPlotState, ProcessedData, ProcessedRow } from '../../types/phases';
 import type { TextMarkerConfig } from '../../types/markers/common';
+import type { TextLabelConfig } from '../../types/markers/basic/text';
 /**
  * A plot's value labels: the author's `styles.values` over the plot kind's
  * own defaults, how their text measures, where they are expected to sit
@@ -78,7 +79,37 @@ export declare class ValueLabels {
      * dims with its row's series, and with `hoverIsolate`, hovering it
      * isolates that series. A row without a series gets the margins only.
      */
-    hooks(ctx: AxisPlotCtx): Pick<TextMarkerConfig, 'fillOpacity' | 'fitMargins' | 'onPointerEnter' | 'onPointerLeave'>;
+    hooks(ctx: AxisPlotCtx): Pick<TextMarkerConfig, 'fitMargins' | 'onpointerenter' | 'onpointerleave' | 'styles'>;
+    /**
+     * Where in a bar a label goes, from the `anchor` of `styles.values`: its `label` anchor, and whether it is beyond
+     * the bar. `negative` tells a bar that runs to the left (or down) from its base from one that runs right (or up),
+     * which `'tip'`, `'base'` and `'outside'` follow; the others are the edges of the page. A `stacked` bar's label is
+     * always in the middle. An anchor the shapes do not read (`'start'`, `'end'`) is taken for `'outside'`, the default.
+     */
+    static boxAnchor(anchor: ValueAnchor, shape: {
+        isHorizontal: boolean;
+        negative?: boolean;
+        stacked?: boolean;
+    }): {
+        anchor: LabelAnchor;
+        outside?: boolean;
+    };
+    /** Whether a label at `anchor` goes to one side or the other of a bar with the sign of its value. */
+    static followsSign(anchor: ValueAnchor): boolean;
+    /**
+     * The `label` the shapes of a plot kind write their value in: this plot's `styles.values` over the `defaults` the kind
+     * sets, with what every label shares ({@link hooks}) - its dimming and isolating of a series. A label inside its shape
+     * never reaches out of the plot, so only one `outside` has the margins grow to hold it; and it takes the default
+     * `fill` only `outside`, for inside it is written in the color that contrasts with its shape.
+     */
+    shapeLabel(ctx: AxisPlotCtx, text: (row: ProcessedRow) => string, defaults?: {
+        fill?: string;
+        fontSize?: number;
+        fontWeight?: FontStyle['fontWeight'];
+        anchor?: LabelAnchor;
+        outside?: boolean;
+        gap?: number;
+    }): TextLabelConfig;
     /**
      * A processed row's own value, read through its series' own value channel
      * (`y`, or `x` on a horizontal plot) - what a label shows, even where a

package/dist/layout/styles/ValueLabels.js

@@ -140,14 +140,74 @@ export class ValueLabels {
         const isolate = this.hoverIsolate && interaction;
         return {
             fitMargins: true,
-            fillOpacity: (d) => {
-                const series = seriesOf(d);
-                return series === undefined ? undefined : interaction?.fillFor(series)?.fillOpacity;
+            styles: {
+                fillOpacity: (d) => {
+                    const series = seriesOf(d);
+                    return series === undefined ? 1 : (interaction?.fillFor(series)?.fillOpacity ?? 1);
+                }
             },
-            onPointerEnter: isolate
-                ? (d) => interaction.isolate(seriesOf(d) ?? null)
+            onpointerenter: isolate
+                ? (_event, d) => interaction.isolate(seriesOf(d) ?? null)
                 : undefined,
-            onPointerLeave: isolate ? () => interaction.isolate(null) : undefined
+            onpointerleave: isolate ? () => interaction.isolate(null) : undefined
+        };
+    }
+    /**
+     * Where in a bar a label goes, from the `anchor` of `styles.values`: its `label` anchor, and whether it is beyond
+     * the bar. `negative` tells a bar that runs to the left (or down) from its base from one that runs right (or up),
+     * which `'tip'`, `'base'` and `'outside'` follow; the others are the edges of the page. A `stacked` bar's label is
+     * always in the middle. An anchor the shapes do not read (`'start'`, `'end'`) is taken for `'outside'`, the default.
+     */
+    static boxAnchor(anchor, shape) {
+        if (shape.stacked || anchor === 'middle')
+            return { anchor: 'middle' };
+        // A place in the shape as it is drawn on the page, which no sign moves.
+        if (anchor !== 'outside' &&
+            anchor !== 'start' &&
+            anchor !== 'end' &&
+            anchor !== 'tip' &&
+            anchor !== 'base') {
+            return { anchor };
+        }
+        const [tip, base] = shape.isHorizontal
+            ? shape.negative
+                ? ['left', 'right']
+                : ['right', 'left']
+            : shape.negative
+                ? ['bottom', 'top']
+                : ['top', 'bottom'];
+        if (anchor === 'base')
+            return { anchor: base };
+        return anchor === 'tip' ? { anchor: tip } : { anchor: tip, outside: true };
+    }
+    /** Whether a label at `anchor` goes to one side or the other of a bar with the sign of its value. */
+    static followsSign(anchor) {
+        return anchor === 'outside' || anchor === 'tip' || anchor === 'base';
+    }
+    /**
+     * The `label` the shapes of a plot kind write their value in: this plot's `styles.values` over the `defaults` the kind
+     * sets, with what every label shares ({@link hooks}) - its dimming and isolating of a series. A label inside its shape
+     * never reaches out of the plot, so only one `outside` has the margins grow to hold it; and it takes the default
+     * `fill` only `outside`, for inside it is written in the color that contrasts with its shape.
+     */
+    shapeLabel(ctx, text, defaults = {}) {
+        const { fitMargins, styles: shared, ...events } = this.hooks(ctx);
+        const { font } = this;
+        return {
+            ...events,
+            text,
+            anchor: defaults.anchor,
+            outside: defaults.outside,
+            gap: defaults.gap,
+            fitMargins: defaults.outside ? fitMargins : undefined,
+            styles: {
+                ...shared,
+                ...font,
+                // Inside its shape, a label unset is written in the color that reads best on it.
+                fill: font?.fill ?? (defaults.outside ? defaults.fill : undefined),
+                fontSize: font?.fontSize ?? defaults.fontSize ?? 12,
+                fontWeight: font?.fontWeight ?? defaults.fontWeight
+            }
         };
     }
     /**
@@ -232,14 +292,13 @@ export class ValueLabels {
             text: (d) => format(Number(valueOf(d)), nameOf(d), d),
             styles: {
                 ...font,
-                ...(this.fill ? { fill: this.fill } : {}),
+                fill: this.fill ?? ((d) => colorOf(d) ?? 'currentColor'),
                 fontSize: font?.fontSize ?? 12,
                 dx: font?.dx ?? (anchor === 'start' ? 6 : anchor === 'end' ? -6 : 0),
                 dy: font?.dy ?? (anchor === 'outside' ? -8 : 0),
                 textAnchor: this.textAnchor ?? (anchor === 'start' || anchor === 'end' ? anchor : 'middle'),
                 lineAnchor: font?.lineAnchor ?? (anchor === 'outside' ? 'bottom' : 'middle')
             },
-            fill: this.fill ? undefined : colorOf,
             declutter: {
                 connector: this.strokeStyle,
                 aligned: !!end.lane && (anchor === 'start' || anchor === 'end'),

package/dist/layout/timeline/Timeline.svelte

@@ -2,6 +2,7 @@
 	import { Plot, RuleX, RuleY, Text } from 'svelteplot';
 	import { TimelineSteps } from './TimelineSteps';
 	import { getConfiguration } from '../../configuration/config.svelte';
+	import ConfigVars from '../../configuration/ConfigVars.svelte';
 	import type { Orientation, TimeValue } from '../../types/layout/timeline';
 
 	/**
@@ -54,6 +55,9 @@
 	);
 </script>
 
+<!-- Its colors are the configuration's, with or without a figure around it. -->
+<ConfigVars />
+
 <!-- Drawn with the configuration's font even outside a figure's chrome, which would hand it down. -->
 <div style="display: contents" style:font-family={config.font}>
 	<Plot
@@ -89,7 +93,7 @@
 			{...textOffset}
 			fontSize={rule.activeFontSize}
 			fontWeight={rule.activeFontWeight}
-			fill={getConfiguration().timeline.activeColor}
+			fill="var(--dct-timeline-active, currentColor)"
 		/>
 	</Plot>
 </div>

package/dist/markers/area/AreaMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { AreaX, AreaY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
@@ -12,6 +13,7 @@
 	 * a band, the area runs from zero up to its own value.
 	 */
 	let { marker }: { marker: AreaMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -36,6 +38,7 @@
 
 {#snippet area(rows: typeof data, fillOpacity: number | undefined)}
 	<AreaMark
+		{...events.props}
 		data={rows}
 		x={marker.x}
 		y={marker.y}

package/dist/markers/arrow/ArrowMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Arrow } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import { RowStroke } from '../utils/RowStroke';
@@ -12,11 +14,12 @@
 	 * last, so such an arrow is placed in pixels instead.
 	 */
 	let { marker }: { marker: ArrowMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot().svelteplot;
 	const data = $derived(marker.data ?? []);
-	/** Each row's own stroke, over the marker's `styles`. */
-	const row = $derived(RowStroke.of(marker, marker.styles, { stroke: 'currentColor' }));
+	/** Each row's stroke: the marker's `styles`, which can be functions of the row. */
+	const row = $derived(RowStroke.of(marker.styles, data, { stroke: 'currentColor' }));
 
 	type Row = Record<string, unknown>;
 	type Channel = string | number | ((d: never) => unknown) | undefined;
@@ -51,6 +54,7 @@
 </script>
 
 <Arrow
+	{...events.props}
 	data={placed}
 	x1={onBand ? own('__x1') : marker.x1}
 	y1={onBand ? own('__y1') : marker.y1}
@@ -59,9 +63,9 @@
 	bend={marker.bend}
 	headAngle={marker.headAngle ?? 60}
 	headLength={marker.headLength ?? 8}
-	inset={marker.inset ?? 0}
-	insetStart={marker.insetStart}
-	insetEnd={marker.insetEnd}
+	inset={RowStyle.field(marker.styles?.inset) ?? 0}
+	insetStart={RowStyle.field(marker.styles?.insetStart)}
+	insetEnd={RowStyle.field(marker.styles?.insetEnd)}
 	sweep={marker.sweep}
 	stroke={row.stroke}
 	strokeWidth={row.strokeWidth}

package/dist/markers/bar/BarMarker.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { BarX, BarY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
-	import { PlotContext } from '../../layout/plot/PlotContext';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { BarMarkerConfig } from '../../types/markers/common';
@@ -12,19 +13,15 @@
 	 * one segment), or `role: 'highlight'` (visible area highlight).
 	 */
 	let { marker }: { marker: BarMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
+	/** The hover band stands for no row, so a style that is a function of one does not apply to it. */
+	const flatStyles = $derived(RowStyle.flat(marker.styles));
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
 	const channelFill = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
 
 	const plot = usePlot().svelteplot;
-	const hover = PlotContext.current()?.hover;
-	const enter = $derived(
-		marker.hover
-			? () => hover?.onPointer((marker.data ?? []) as Record<string, unknown>[])
-			: undefined
-	);
-	const leave = $derived(marker.hover ? hover?.onLeave : undefined);
 	function categoryScaleFor(isHorizontal: boolean) {
 		return isHorizontal ? plot.scales.y : plot.scales.x;
 	}
@@ -47,37 +44,41 @@
 		marker.thickness != null ? Math.max(0, (bandwidth - marker.thickness) / 2) : undefined}
 	{#if marker.isHorizontal}
 		<BarX
+			{...events.props}
 			{data}
 			y={marker.y}
 			x1={marker.x1}
 			x2={marker.x2}
-			insetTop={centered ?? (marker.insetTop != null ? marker.insetTop * bandwidth : undefined)}
+			insetTop={centered ??
+				(marker.styles?.insetTop != null ? marker.styles?.insetTop * bandwidth : undefined)}
 			insetBottom={centered ??
-				(marker.insetBottom != null ? marker.insetBottom * bandwidth : undefined)}
-			fill={channelFill ?? marker.styles?.fill}
-			fillOpacity={marker.styles?.fillOpacity}
-			stroke={marker.styles?.stroke}
-			strokeWidth={marker.styles?.strokeWidth}
-			strokeOpacity={marker.styles?.strokeOpacity}
+				(marker.styles?.insetBottom != null ? marker.styles?.insetBottom * bandwidth : undefined)}
+			fill={channelFill ?? RowStyle.of(marker.styles?.fill, data)}
+			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)}
 			strokeDasharray={marker.styles?.strokeDasharray}
-			borderRadius={marker.styles?.borderRadius}
+			borderRadius={RowStyle.field(marker.styles?.borderRadius)}
 		/>
 	{:else}
 		<BarY
+			{...events.props}
 			{data}
 			x={marker.x}
 			y1={marker.y1}
 			y2={marker.y2}
-			insetLeft={centered ?? (marker.insetLeft != null ? marker.insetLeft * bandwidth : undefined)}
+			insetLeft={centered ??
+				(marker.styles?.insetLeft != null ? marker.styles?.insetLeft * bandwidth : undefined)}
 			insetRight={centered ??
-				(marker.insetRight != null ? marker.insetRight * bandwidth : undefined)}
-			fill={channelFill ?? marker.styles?.fill}
-			fillOpacity={marker.styles?.fillOpacity}
-			stroke={marker.styles?.stroke}
-			strokeWidth={marker.styles?.strokeWidth}
-			strokeOpacity={marker.styles?.strokeOpacity}
+				(marker.styles?.insetRight != null ? marker.styles?.insetRight * bandwidth : undefined)}
+			fill={channelFill ?? RowStyle.of(marker.styles?.fill, data)}
+			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)}
 			strokeDasharray={marker.styles?.strokeDasharray}
-			borderRadius={marker.styles?.borderRadius}
+			borderRadius={RowStyle.field(marker.styles?.borderRadius)}
 		/>
 	{/if}
 {:else}
@@ -85,15 +86,14 @@
 	{#if categoryScale?.type === 'band'}
 		{@const bandwidth = categoryScale.fn.bandwidth()}
 		{@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
-		{@const insetLeft = (marker.insetLeft ?? 0) * bandwidth}
-		{@const insetRight = (marker.insetRight ?? 0) * bandwidth}
-		{@const insetTop = (marker.insetTop ?? 0) * bandwidth}
-		{@const insetBottom = (marker.insetBottom ?? 0) * bandwidth}
+		{@const insetLeft = (marker.styles?.insetLeft ?? 0) * bandwidth}
+		{@const insetRight = (marker.styles?.insetRight ?? 0) * bandwidth}
+		{@const insetTop = (marker.styles?.insetTop ?? 0) * bandwidth}
+		{@const insetBottom = (marker.styles?.insetBottom ?? 0) * bandwidth}
 		{#if marker.role === 'hitArea'}
 			<!-- The band runs the plot's whole value axis, so the pointer needn't be over the bar. -->
 			{@const [rangeMin, rangeMax] = valueExtentFor(marker.isHorizontal)}
 			{#if marker.isHorizontal}
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<rect
 					class="dct-hit-area"
 					x={rangeMin + insetLeft}
@@ -101,11 +101,9 @@
 					width={Math.max(0, rangeMax - rangeMin - insetLeft - insetRight)}
 					height={Math.max(0, bandwidth - insetTop - insetBottom)}
 					fill="transparent"
-					onpointerenter={enter}
-					onpointerleave={leave}
+					{...events.forRow(data[0], 0)}
 				/>
 			{:else}
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<rect
 					class="dct-hit-area"
 					x={bandStart + insetLeft}
@@ -113,8 +111,7 @@
 					width={Math.max(0, bandwidth - insetLeft - insetRight)}
 					height={Math.max(0, rangeMax - rangeMin - insetTop - insetBottom)}
 					fill="transparent"
-					onpointerenter={enter}
-					onpointerleave={leave}
+					{...events.forRow(data[0], 0)}
 				/>
 			{/if}
 		{:else}
@@ -128,13 +125,13 @@
 					y={center - thickness / 2}
 					width={Math.max(0, valueMax - valueMin)}
 					height={thickness}
-					fill={marker.styles?.fill}
-					fill-opacity={marker.styles?.fillOpacity}
-					stroke={marker.styles?.stroke}
-					stroke-width={marker.styles?.strokeWidth}
-					stroke-opacity={marker.styles?.strokeOpacity}
-					stroke-dasharray={marker.styles?.strokeDasharray}
-					rx={marker.styles?.borderRadius}
+					fill={flatStyles.fill}
+					fill-opacity={flatStyles.fillOpacity}
+					stroke={flatStyles.stroke}
+					stroke-width={flatStyles.strokeWidth}
+					stroke-opacity={flatStyles.strokeOpacity}
+					stroke-dasharray={flatStyles.strokeDasharray}
+					rx={flatStyles.borderRadius}
 					pointer-events="none"
 				/>
 			{:else}
@@ -146,13 +143,13 @@
 					y={valueMin}
 					width={thickness}
 					height={Math.max(0, valueMax - valueMin)}
-					fill={marker.styles?.fill}
-					fill-opacity={marker.styles?.fillOpacity}
-					stroke={marker.styles?.stroke}
-					stroke-width={marker.styles?.strokeWidth}
-					stroke-opacity={marker.styles?.strokeOpacity}
-					stroke-dasharray={marker.styles?.strokeDasharray}
-					ry={marker.styles?.borderRadius}
+					fill={flatStyles.fill}
+					fill-opacity={flatStyles.fillOpacity}
+					stroke={flatStyles.stroke}
+					stroke-width={flatStyles.strokeWidth}
+					stroke-opacity={flatStyles.strokeOpacity}
+					stroke-dasharray={flatStyles.strokeDasharray}
+					ry={flatStyles.borderRadius}
 					pointer-events="none"
 				/>
 			{/if}

package/dist/markers/bollinger/BollingerMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { SvelteMap } from 'svelte/reactivity';
 	import { BollingerX, BollingerY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
@@ -18,6 +19,7 @@
 	 * the plot gives that group unless `styles` sets one.
 	 */
 	let { marker }: { marker: BollingerMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -47,6 +49,7 @@
 {#each groups as group (group.key)}
 	{@const color = marker.grouping ? groupFill?.(group.rows[0]) : undefined}
 	<BollingerMark
+		{...events.props}
 		data={group.rows}
 		x={marker.x}
 		y={marker.y}

package/dist/markers/box/BoxMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { BoxX, BoxY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import { CssColor } from '../../utils/color';
@@ -15,6 +16,7 @@
 	 * from `bar`.
 	 */
 	let { marker }: { marker: BoxMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -171,4 +173,4 @@
 	});
 </script>
 
-<BoxMark {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />
+<BoxMark {...events.props} {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />

package/dist/markers/cell/CellMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Cell } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +8,7 @@
 
 	/** Renders one `'cell'` marker as a `<Cell>` call. */
 	let { marker }: { marker: CellMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,15 +16,16 @@
 </script>
 
 <Cell
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}
-	fill={channelFill ?? marker.fill}
-	fillOpacity={marker.styles?.fillOpacity ?? 1}
-	stroke={marker.styles?.stroke}
-	strokeWidth={marker.styles?.strokeWidth ?? 0}
-	strokeOpacity={marker.styles?.strokeOpacity}
+	fill={channelFill ?? RowStyle.of(marker.styles?.fill, data)}
+	fillOpacity={RowStyle.opacity(marker.styles?.fillOpacity) ?? 1}
+	stroke={RowStyle.of(marker.styles?.stroke, data)}
+	strokeWidth={RowStyle.field(marker.styles?.strokeWidth) ?? 0}
+	strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 	strokeDasharray={marker.styles?.strokeDasharray}
-	borderRadius={marker.styles?.borderRadius}
-	inset={marker.inset ?? 0.5}
+	borderRadius={RowStyle.field(marker.styles?.borderRadius)}
+	inset={RowStyle.field(marker.styles?.inset) ?? 0.5}
 />

package/dist/markers/contour/ContourMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Contour } from 'svelteplot';
 	import type { GeoContourMarkerConfig } from '../../types/markers/geo';
 
@@ -8,10 +9,12 @@
 	 * - this component only draws the contour itself.
 	 */
 	let { marker }: { marker: GeoContourMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 </script>
 
 <!-- No `?? 'none'` fallback: an unset `fill` should leave svelteplot's own default (`fill="none"`) in place, not run the literal string `'none'` through the color scale. -->
 <Contour
+	{...events.props}
 	class="contour"
 	data={marker.data}
 	x={marker.x}

package/dist/markers/delaunay/DelaunayLinkMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { DelaunayLink } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +8,7 @@
 
 	/** Renders one `'delaunayLink'` marker as `<DelaunayLink>` - one line per Delaunay triangulation edge. */
 	let { marker }: { marker: DelaunayLinkMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,14 +16,15 @@
 </script>
 
 <DelaunayLink
+	{...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/delaunay/DelaunayMeshMarker.svelte

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

package/dist/markers/density/DensityMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Density } from 'svelteplot';
 	import { SvelteMap } from 'svelte/reactivity';
 	import { MarkerChannels } from '../utils/MarkerChannels';
@@ -17,6 +18,7 @@
 	 * class-based scoping every other marker kind gets from svelteplot itself.
 	 */
 	let { marker }: { marker: DensityMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const data = $derived(marker.data ?? []);
 	const cfg = $derived(getConfiguration());
@@ -47,6 +49,7 @@
 
 {#each groups as group, i (i)}
 	<Density
+		{...events.props}
 		data={group.rows}
 		class="density"
 		x={marker.x}

package/dist/markers/difference/DifferenceMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { DifferenceY } from 'svelteplot';
 	import type { DifferenceMarkerConfig } from '../../types/markers/common';
 
@@ -9,11 +10,13 @@
 	 * would erase them - each default is restated here instead.
 	 */
 	let { marker }: { marker: DifferenceMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const data = $derived(marker.data ?? []);
 </script>
 
 <DifferenceY
+	{...events.props}
 	{data}
 	x={marker.x}
 	x1={marker.x1}