@fundar/data-chart-telling 1.15.0 → 1.17.0

package/dist/markers/text/TextMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="TData = Record<string, unknown>">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Text } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,10 +8,13 @@
 	import { RowOffset } from '../utils/RowOffset';
 	import RowOffsetMarks from '../utils/RowOffsetMarks.svelte';
 	import { Declutter } from './Declutter';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { TextFit, type FittedText } from './TextFit';
 	import { NumberFormat } from '../../utils/NumberFormat';
 	import { PlotMargins } from '../../layout/margins/PlotMargins.svelte';
 	import { Box } from '../../layout/margins/Box';
 	import type { TextMarkerConfig } from '../../types/markers/common';
+	import type { BoxChannels, BoxSizer } from '../utils/BoxLabel';
 	import type { TextAnchor } from '../../types/plots/constants';
 
 	/**
@@ -20,7 +25,8 @@
 	 * draws one label per row, inside the plot's content box. With
 	 * `fitMargins`, the plot's margins grow until the labels fit.
 	 */
-	const { marker }: { marker: TextMarkerConfig } = $props();
+	const { marker, box }: { marker: TextMarkerConfig; box?: BoxChannels | BoxSizer } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	// A text's anchors as the side of its point it sits on, and back.
 	const TEXT_SIDES = { start: 'after', middle: 'middle', end: 'before' } as const;
@@ -47,15 +53,16 @@
 		data.length > 0 ? data : placedByRows(x) || placedByRows(y) ? [] : [{} as TData]
 	);
 	// Per-row accessors give literal values; an empty one takes the flat default.
-	const flatFill = $derived(styles?.fill ?? 'currentColor');
 	const fill = $derived.by(() => {
-		const own = marker.fill;
-		if (typeof own !== 'function') return own ?? flatFill;
-		return { value: (d: TData) => own(d) ?? flatFill, scale: null };
+		const own = styles?.fill;
+		if (typeof own !== 'function') return RowStyle.of(own, displayData) ?? 'currentColor';
+		return { value: (d: TData) => own(d) ?? 'currentColor', scale: null };
 	});
 	const fillOpacity = $derived.by(() => {
-		const own = marker.fillOpacity;
-		return typeof own === 'function' ? { value: (d: TData) => own(d) ?? 1, scale: null } : own;
+		const own = styles?.fillOpacity;
+		return typeof own === 'function'
+			? { value: (d: TData) => own(d) ?? 1, scale: null }
+			: RowStyle.opacity(own);
 	});
 	const fontSize = $derived(styles?.fontSize ?? 12);
 	const fontWeight = $derived(styles?.fontWeight ?? 'normal');
@@ -97,11 +104,7 @@
 		};
 	});
 	const perRow = $derived(
-		!!declutter ||
-			!!marker.edgeAware ||
-			!!marker.onPointerEnter ||
-			!!marker.onPointerLeave ||
-			typeof marker.textAnchor === 'function'
+		!!declutter || !!marker.edgeAware || events.any || typeof marker.textAnchor === 'function'
 	);
 	const dir = $derived(Math.sign(dx) || 1);
 
@@ -128,9 +131,101 @@
 		return typeof value === 'number' ? numberText(value) : String(value ?? '');
 	}
 
+	/** The pixel size of the box a row's label is fitted to - from the edges it names, or measured by the shape it labels. */
+	const boxSizeOf = $derived.by(() => {
+		const fit = marker.fit === true ? {} : marker.fit;
+		if (!fit) return undefined;
+		const own = typeof box === 'function' ? undefined : box;
+		const [x1, x2, y1, y2] = [
+			fit.x1 ?? own?.x1,
+			fit.x2 ?? own?.x2,
+			fit.y1 ?? own?.y1,
+			fit.y2 ?? own?.y2
+		];
+		const xScale = plot.scales.x?.fn;
+		const yScale = plot.scales.y?.fn;
+		if (![x1, x2, y1, y2].includes(undefined)) {
+			if (!xScale || !yScale) return undefined;
+			const [left, right, top, bottom] = [x1, x2, y1, y2].map(channel);
+			const span = (
+				scale: typeof xScale,
+				from: (d: TData) => unknown,
+				to: (d: TData) => unknown,
+				d: TData
+			) => Math.abs(Number(scale(to(d) as never)) - Number(scale(from(d) as never)));
+			return (d: TData) => ({
+				width: span(xScale, left, right, d),
+				height: span(yScale, top, bottom, d)
+			});
+		}
+		return typeof box === 'function' ? (d: TData) => box(d, plot.scales as never) : undefined;
+	});
+
+	/**
+	 * What each label is written as and at, fitted to its box (`fit`), less the padding. A label with no room is left
+	 * out, with `undefined`; one with no box to measure is written as it is.
+	 */
+	const fitted = $derived.by(() => {
+		const fit = marker.fit === true ? {} : marker.fit;
+		if (!fit || !boxSizeOf) return undefined;
+		const padding = fit.padding ?? cfg.text.label.padding;
+		const measure = (text: string, size: number) => Box.ofText(text, size, cfg).width;
+		const fallback = fit.fallback;
+		const fallbackOf = (d: TData) => {
+			// As `text` is: a function's result, a field of the row, else the text itself.
+			const value =
+				typeof fallback === 'function'
+					? fallback(d)
+					: typeof fallback === 'string' && typeof d === 'object' && d !== null && fallback in d
+						? (d as Record<string, unknown>)[fallback]
+						: fallback;
+			return typeof value === 'number' ? numberText(value) : String(value);
+		};
+		// Built whole inside this derivation and never changed after it, so it has nothing to react to.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const out = new Map<TData, FittedText | undefined>();
+		for (const d of displayData) {
+			const size = boxSizeOf(d);
+			out.set(
+				d,
+				size
+					? TextFit.fit({
+							text: textOf(d),
+							fallback: fallback === undefined ? undefined : fallbackOf(d),
+							width: size.width - 2 * padding,
+							height: size.height - 2 * padding,
+							fontSize,
+							minFontSize: fit.minFontSize ?? cfg.text.label.minFontSize,
+							lineHeight: styles?.lineHeight ?? 1.2,
+							minLetters: fit.minLetters ?? cfg.text.label.minLetters,
+							measure
+						})
+					: { text: textOf(d), fontSize }
+			);
+		}
+		return out;
+	});
+	/** `rows` by the size their labels are written at: svelteplot takes one size for a mark, and a function of the row sets its scales off in a loop. */
+	function sizeGroups(rows: TData[]): { size: number; rows: TData[]; texts?: string[] }[] {
+		if (!fitted) return [{ size: fontSize, rows }];
+		const bySize = new SvelteMap<number, { rows: TData[]; texts: string[] }>();
+		for (const d of rows) {
+			const own = fitted.get(d);
+			const group = bySize.get(own?.fontSize ?? fontSize) ?? { rows: [], texts: [] };
+			group.rows.push(d);
+			group.texts.push(own?.text ?? '');
+			bySize.set(own?.fontSize ?? fontSize, group);
+		}
+		return [...bySize].map(([size, group]) => ({ size, ...group }));
+	}
+
+	/** The rows with room for a label. */
+	const shown = $derived(fitted ? displayData.filter((d) => fitted.get(d)) : displayData);
+
 	function opacityOf(d: TData): number | undefined {
-		const value = marker.fillOpacity;
-		return typeof value === 'function' ? value(d) : value;
+		const value = styles?.fillOpacity;
+		if (typeof value === 'function') return value(d);
+		return typeof value === 'string' ? (d as Record<string, number>)[value] : value;
 	}
 
 	/** Each row's pixel position, once both scales resolve. */
@@ -188,10 +283,10 @@
 	let groupEl: SVGGElement | undefined = $state();
 
 	// The plot measures what it draws: how far it reaches out, and with `fitMargins` its margins grow to fit it.
-	const measured = $derived(!!plotMargins && (!!marker.onOverflow || !!marker.fitMargins));
+	const measured = $derived(!!plotMargins && (!!marker.onoverflow || !!marker.fitMargins));
 	plotMargins?.watch(() => (measured ? groupEl : undefined), {
 		grow: () => !!marker.fitMargins,
-		onOverflow: (overflow) => marker.onOverflow?.(overflow),
+		onoverflow: (overflow) => marker.onoverflow?.(overflow),
 		// The box isn't tracked reactively: a new layout measures again.
 		deps: () => [marker, points]
 	});
@@ -205,38 +300,41 @@
 	rowLineAnchor: typeof lineAnchor
 )}
 	<g transform={projected ? `translate(${rowDx},${rowDy})` : undefined}>
-		<Text
-			data={rows}
-			x={x ?? (marker.frameAnchor ? undefined : 0)}
-			y={y ?? (marker.frameAnchor ? undefined : 0)}
-			frameAnchor={marker.frameAnchor}
-			text={((d: TData) => {
-				const value = valueOf(d);
-				return typeof value === 'number' ? numberText(value) : value;
-			}) as (d: TData) => string}
-			dx={projected ? 0 : rowDx}
-			dy={projected ? 0 : rowDy}
-			fill={fill as never}
-			fillOpacity={fillOpacity as never}
-			{fontSize}
-			{fontWeight}
-			textAnchor={rowAnchor}
-			lineAnchor={rowLineAnchor}
-			fontStyle={fontStyleProp}
-			lineHeight={styles?.lineHeight}
-			rotate={styles?.rotate}
-			stroke={styles?.stroke}
-			strokeWidth={styles?.strokeWidth}
-			paintOrder={styles?.paintOrder}
-			class={styles?.class}
-			textClass={styles?.textClass}
-		/>
+		{#each sizeGroups(rows) as group (group.size)}
+			<Text
+				data={group.rows}
+				x={x ?? (marker.frameAnchor ? undefined : 0)}
+				y={y ?? (marker.frameAnchor ? undefined : 0)}
+				frameAnchor={marker.frameAnchor}
+				text={((d: TData, index: number) => {
+					if (group.texts) return group.texts[index];
+					const value = valueOf(d);
+					return typeof value === 'number' ? numberText(value) : value;
+				}) as (d: TData) => string}
+				dx={projected ? 0 : rowDx}
+				dy={projected ? 0 : rowDy}
+				fill={fill as never}
+				fillOpacity={fillOpacity as never}
+				fontSize={group.size}
+				{fontWeight}
+				textAnchor={rowAnchor}
+				lineAnchor={rowLineAnchor}
+				fontStyle={fontStyleProp}
+				lineHeight={styles?.lineHeight}
+				rotate={styles?.rotate}
+				stroke={RowStyle.of(styles?.stroke, rows)}
+				strokeWidth={RowStyle.field(styles?.strokeWidth)}
+				paintOrder={styles?.paintOrder}
+				class={styles?.class}
+				textClass={styles?.textClass}
+			/>
+		{/each}
 	</g>
 {/snippet}
 
 {#snippet labels()}
 	{#if !perRow}
-		<RowOffsetMarks {marker} rows={displayData}>
+		<RowOffsetMarks {marker} rows={shown}>
 			{#snippet mark(rows)}
 				{@render label(rows, dx, dy, textAnchor, lineAnchor)}
 			{/snippet}
@@ -244,54 +342,52 @@
 	{:else if (!declutter && !marker.edgeAware) || points}
 		<!-- A decluttered or edge-aware label waits for both scales. -->
 		{#each displayData as d, i (i)}
-			{@const lane = lanes?.get(i)}
-			{@const placement = placements?.[i]}
-			{@const extraDy = lane?.extraDy ?? 0}
-			{@const laneDir = lane?.aligned ? lane.dir : dir}
-			{@const labelDx = lane?.aligned ? laneDir * lane.reach : dx}
-			{#if declutter && points && (lane?.aligned || extraDy !== 0)}
-				{@const { px, py } = points[i]}
-				{@const laneX = lane?.aligned ? px + laneDir * lane.laneReach : px + labelDx}
-				{@const connector = declutter.connector}
-				<path
-					d={`M ${px} ${py} H ${laneX} V ${py + extraDy} H ${px + labelDx}`}
-					fill="none"
-					stroke={connector.stroke}
-					stroke-width={connector.strokeWidth}
-					stroke-opacity={connector.strokeOpacity ?? opacityOf(d) ?? 1}
-					stroke-dasharray={connector.strokeDasharray}
-					stroke-linecap={connector.strokeLinecap ?? 'square'}
-					stroke-linejoin={connector.strokeLinejoin ?? 'miter'}
-				/>
+			{#if !fitted || fitted.get(d)}
+				{@const lane = lanes?.get(i)}
+				{@const placement = placements?.[i]}
+				{@const extraDy = lane?.extraDy ?? 0}
+				{@const laneDir = lane?.aligned ? lane.dir : dir}
+				{@const labelDx = lane?.aligned ? laneDir * lane.reach : dx}
+				{#if declutter && points && (lane?.aligned || extraDy !== 0)}
+					{@const { px, py } = points[i]}
+					{@const laneX = lane?.aligned ? px + laneDir * lane.laneReach : px + labelDx}
+					{@const connector = declutter.connector}
+					<path
+						d={`M ${px} ${py} H ${laneX} V ${py + extraDy} H ${px + labelDx}`}
+						fill="none"
+						stroke={connector.stroke}
+						stroke-width={connector.strokeWidth}
+						stroke-opacity={connector.strokeOpacity ?? opacityOf(d) ?? 1}
+						stroke-dasharray={connector.strokeDasharray}
+						stroke-linecap={connector.strokeLinecap ?? 'square'}
+						stroke-linejoin={connector.strokeLinejoin ?? 'miter'}
+					/>
+				{/if}
+				<!-- svelteplot's Text never wires pointer handlers to its DOM node; a wrapping <g> catches them. -->
+				<g role="presentation" {...events.forRow(d, i)}>
+					<RowOffsetMarks {marker} rows={[d]}>
+						{#snippet mark(rows)}
+							{#if placement}
+								{@render label(
+									rows,
+									placement.dx,
+									placement.dy + extraDy,
+									placement.textAnchor,
+									placement.lineAnchor
+								)}
+							{:else}
+								{@render label(
+									rows,
+									labelDx,
+									dy + extraDy,
+									lane?.aligned && laneDir !== dir ? flipAnchor(anchorAt(d)) : anchorAt(d),
+									lineAnchor
+								)}
+							{/if}
+						{/snippet}
+					</RowOffsetMarks>
+				</g>
 			{/if}
-			<!-- svelteplot's Text never wires pointer handlers to its DOM node; a wrapping <g> catches them. -->
-			<g
-				role="presentation"
-				onpointerenter={marker.onPointerEnter && (() => marker.onPointerEnter?.(d))}
-				onpointerleave={marker.onPointerLeave && (() => marker.onPointerLeave?.(d))}
-			>
-				<RowOffsetMarks {marker} rows={[d]}>
-					{#snippet mark(rows)}
-						{#if placement}
-							{@render label(
-								rows,
-								placement.dx,
-								placement.dy + extraDy,
-								placement.textAnchor,
-								placement.lineAnchor
-							)}
-						{:else}
-							{@render label(
-								rows,
-								labelDx,
-								dy + extraDy,
-								lane?.aligned && laneDir !== dir ? flipAnchor(anchorAt(d)) : anchorAt(d),
-								lineAnchor
-							)}
-						{/if}
-					{/snippet}
-				</RowOffsetMarks>
-			</g>
 		{/each}
 	{/if}
 {/snippet}

package/dist/markers/text/TextMarker.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { TextMarkerConfig } from '../../types/markers/common';
+import type { BoxChannels, BoxSizer } from '../utils/BoxLabel';
 type $$ComponentProps = {
     marker: TextMarkerConfig;
+    box?: BoxChannels | BoxSizer;
 };
 declare function $$render<TData = Record<string, unknown>>(): {
     props: $$ComponentProps;

package/dist/markers/tick/TickMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { TickX, TickY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
@@ -7,6 +9,7 @@
 
 	/** Renders one `'tick'` marker as `<TickX>` or `<TickY>`, picked from the way the plot runs (`usePlot().axes`). */
 	let { marker }: { marker: TickMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -15,7 +18,9 @@
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
 	const channelStroke = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
-	const stroke = $derived(channelStroke ?? marker.styles?.stroke ?? 'currentColor');
+	const stroke = $derived(
+		channelStroke ?? RowStyle.of(marker.styles?.stroke, data) ?? 'currentColor'
+	);
 
 	/**
 	 * A tick across a band axis spans the whole band, whatever `tickLength` says -
@@ -33,14 +38,15 @@
 </script>
 
 <TickMark
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}
 	tickLength={marker.tickLength}
 	{...insetProps}
 	{stroke}
-	strokeWidth={marker.styles?.strokeWidth}
-	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+	strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 	strokeDasharray={marker.styles?.strokeDasharray}
 	strokeLinecap={marker.styles?.strokeLinecap}
 />

package/dist/markers/trail/TrailMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Trail } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +7,7 @@
 
 	/** Renders one `'trail'` marker as `<Trail>` - a ribbon whose width follows `r`. */
 	let { marker }: { marker: TrailMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,6 +15,7 @@
 </script>
 
 <Trail
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

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

@@ -0,0 +1,58 @@
+import type { TextMarkerConfig } from '../../types/markers/common';
+import type { TextLabelConfig } from '../../types/markers/basic/text';
+/** Where a row's edge along an axis is: a field of the rows, the symbol a transform keyed it by, a function of the row, or a literal. */
+type Edge = unknown;
+/** The edges of the box each row spans, in the data's own terms. */
+export type BoxChannels = {
+    x1: Edge;
+    x2: Edge;
+    y1: Edge;
+    y2: Edge;
+};
+/** The scales a box is measured on. */
+export type BoxScales = Record<string, {
+    type?: string;
+    fn: any;
+} | undefined>;
+/** The pixel size of the box of a row, for the markers whose boxes are bands of a category axis rather than edges. */
+export type BoxSizer = (row: unknown, scales: BoxScales) => {
+    width: number;
+    height: number;
+} | undefined;
+/** The `text` marker that labels the boxes a marker draws, and where each label's box is. */
+export type BoxLabelMarker = {
+    marker: TextMarkerConfig;
+    box: BoxChannels | BoxSizer;
+};
+/** What a marker has to say for its boxes to be labelled. */
+export type Labelled = {
+    type?: string;
+    data?: unknown[];
+    label?: TextLabelConfig;
+    x?: Edge;
+    y?: Edge;
+    x1?: Edge;
+    x2?: Edge;
+    y1?: Edge;
+    y2?: Edge;
+    isHorizontal?: boolean;
+    role?: string;
+    thickness?: number;
+    /** The marker's styles: the insets of a cell or a bar are read off them. */
+    styles?: object;
+};
+/**
+ * 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 declare class BoxLabel {
+    #private;
+    /** `undefined` when the marker has no label, or does not say where its boxes are. */
+    static of(marker: Labelled, plot?: {
+        isHorizontal?: boolean;
+        scales?: () => BoxScales | undefined;
+        gap?: number;
+    }): BoxLabelMarker | undefined;
+}
+export {};

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 };
+    }
+}