@fundar/data-chart-telling 0.0.64 → 1.0.0

package/dist/utils/color/contrast.js

@@ -0,0 +1,40 @@
+import { resolveCssColor, parseRgb } from './cssColor';
+function relativeLuminance([r, g, b]) {
+    const [rs, gs, bs] = [r, g, b].map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+/** WCAG contrast ratio between two colors, from 1 (no contrast) to 21 (black on white). */
+export function contrastRatio(colorA, colorB) {
+    const a = parseRgb(resolveCssColor(colorA));
+    const b = parseRgb(resolveCssColor(colorB));
+    if (!a || !b)
+        return 1;
+    const lA = relativeLuminance(a);
+    const lB = relativeLuminance(b);
+    const lighter = Math.max(lA, lB);
+    const darker = Math.min(lA, lB);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+/**
+ * The `candidates` entry with the highest WCAG contrast ratio against
+ * `background`. Defaults to plain white/black; pass a grayscale or other
+ * palette to widen the choice. Falls back to the first candidate when
+ * `background` can't be parsed.
+ */
+export function contrastTextColor(background, candidates = ['#ffffff', '#000000']) {
+    if (candidates.length === 0)
+        return '#000000';
+    let best = candidates[0];
+    let bestRatio = -Infinity;
+    for (const candidate of candidates) {
+        const ratio = contrastRatio(background, candidate);
+        if (ratio > bestRatio) {
+            bestRatio = ratio;
+            best = candidate;
+        }
+    }
+    return best;
+}

package/dist/utils/color/cssColor.d.ts

@@ -0,0 +1,4 @@
+/** Resolves a `var(--x)` reference to its computed value; any other CSS color string passes through unchanged. */
+export declare function resolveCssColor(color: string): string;
+/** Parses any CSS color syntax (hex, rgb(), oklch(), named colors, hsl(), ...) into an `[r, g, b]` (0-255) triple, or `null` if it can't be resolved. */
+export declare function parseRgb(color: string): [number, number, number] | null;

package/dist/utils/color/cssColor.js

@@ -0,0 +1,77 @@
+import { isBrowser } from '../../stores/device';
+/** Resolves a `var(--x)` reference to its computed value; any other CSS color string passes through unchanged. */
+export function resolveCssColor(color) {
+    if (!isBrowser)
+        return color;
+    if (!color.startsWith('var('))
+        return color;
+    const varName = color.slice(4, -1).trim();
+    const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    return value || color;
+}
+function clamp01(v) {
+    return Math.max(0, Math.min(1, v));
+}
+function linearToSrgb8(c) {
+    const s = c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+    return clamp01(s) * 255;
+}
+/**
+ * Parses `oklch(L C H)` directly instead of round-tripping through the
+ * browser's computed style: Chromium/Firefox serialize computed oklch()
+ * values back as oklch() (not rgb()), so the generic browser-fallback below
+ * sees an unchanged string on the second pass and its infinite-loop guard
+ * mistakes that for a parse failure.
+ */
+function parseOklch(color) {
+    const match = /^oklch\(\s*([\d.]+)(%)?\s+([\d.]+)\s+([\d.]+)/i.exec(color.trim());
+    if (!match)
+        return null;
+    const L = match[2] ? Number(match[1]) / 100 : Number(match[1]);
+    const C = Number(match[3]);
+    const H = (Number(match[4]) * Math.PI) / 180;
+    const a = C * Math.cos(H);
+    const b = C * Math.sin(H);
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+    const l = l_ ** 3;
+    const m = m_ ** 3;
+    const s = s_ ** 3;
+    const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+    const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+    const bl = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+    return [linearToSrgb8(r), linearToSrgb8(g), linearToSrgb8(bl)];
+}
+/** Parses any CSS color syntax (hex, rgb(), oklch(), named colors, hsl(), ...) into an `[r, g, b]` (0-255) triple, or `null` if it can't be resolved. */
+export function parseRgb(color) {
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color.trim());
+    if (hex) {
+        const digits = hex[1].length === 3
+            ? hex[1]
+                .split('')
+                .map((c) => c + c)
+                .join('')
+            : hex[1];
+        const num = parseInt(digits, 16);
+        return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
+    }
+    const rgb = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i.exec(color);
+    if (rgb)
+        return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+    const oklch = parseOklch(color);
+    if (oklch)
+        return oklch;
+    // Named colors, hsl(), and any other CSS color syntax: resolved to
+    // `rgb(...)` via the browser's computed style, then reparsed.
+    if (!isBrowser)
+        return null;
+    const el = document.createElement('div');
+    el.style.color = color;
+    document.body.appendChild(el);
+    const computed = getComputedStyle(el).color;
+    document.body.removeChild(el);
+    if (!computed || computed === color)
+        return null;
+    return parseRgb(computed);
+}

package/dist/utils/color/index.d.ts

@@ -0,0 +1,3 @@
+export { resolveCssColor } from './cssColor';
+export { contrastRatio, contrastTextColor } from './contrast';
+export { normalize, paletteColor, makeColorScale, resolveColorScale } from './ramp';

package/dist/utils/color/index.js

@@ -0,0 +1,3 @@
+export { resolveCssColor } from './cssColor';
+export { contrastRatio, contrastTextColor } from './contrast';
+export { normalize, paletteColor, makeColorScale, resolveColorScale } from './ramp';

package/dist/utils/color/ramp.d.ts

@@ -0,0 +1,17 @@
+import type { ColorScaleConfig } from '../../types/layout/scales';
+/** Linearly maps `v` from `[min, max]` onto `[0, 1]`, clamped at both ends. */
+export declare function normalize(v: number, min: number, max: number): number;
+/** Cycles through a discrete palette by series index - the default colour for an unstyled series. */
+export declare function paletteColor(index: number, palette: string[]): string;
+/** A simple 2-color continuous ramp over `[min, max]`. */
+export declare function makeColorScale(min: number, max: number, colorMin: string, colorMax: string): (v: number) => string;
+/**
+ * Resolves a {@link ColorScaleConfig} into a `value => color` function - the
+ * one shared implementation for every level the config can appear at
+ * (`scales.color`, a `segments` entry, a marker's own `scales`).
+ * `computedDomain` is the fallback when `config.domain` is unset;
+ * `defaultScheme` is used when `config.scheme` is unset - the theme's own
+ * 2-color continuous ramp, or a discrete palette for a categorical domain
+ * (e.g. per-series identity colors).
+ */
+export declare function resolveColorScale(config: ColorScaleConfig | undefined, computedDomain: [number, number] | string[] | undefined, defaultScheme: NonNullable<ColorScaleConfig['scheme']>): (value: unknown) => string;

package/dist/utils/color/ramp.js

@@ -0,0 +1,110 @@
+import { interpolateRgb, piecewise } from 'd3-interpolate';
+import * as d3Chromatic from 'd3-scale-chromatic';
+import { resolveCssColor } from './cssColor';
+/** Linearly maps `v` from `[min, max]` onto `[0, 1]`, clamped at both ends. */
+export function normalize(v, min, max) {
+    if (v == null)
+        return 0;
+    const denom = max - min || 1;
+    return Math.max(0, Math.min(1, (v - min) / denom));
+}
+/** Cycles through a discrete palette by series index - the default colour for an unstyled series. */
+export function paletteColor(index, palette) {
+    if (palette.length === 0)
+        return 'currentColor';
+    return palette[index % palette.length];
+}
+/** A simple 2-color continuous ramp over `[min, max]`. */
+export function makeColorScale(min, max, colorMin, colorMax) {
+    const resolvedMin = resolveCssColor(colorMin);
+    const resolvedMax = resolveCssColor(colorMax);
+    let interpolator;
+    try {
+        interpolator = interpolateRgb(resolvedMin, resolvedMax);
+    }
+    catch {
+        return () => '#ccc';
+    }
+    return (v) => {
+        if (v == null)
+            return '#ccc';
+        const t = normalize(v, min, max);
+        return interpolator(t);
+    };
+}
+/** `{turbo: interpolateTurbo, blues: interpolateBlues, ...}`, built from every `interpolate*` d3-scale-chromatic export. */
+const NAMED_SCHEMES = Object.fromEntries(Object.entries(d3Chromatic)
+    .filter((entry) => entry[0].startsWith('interpolate'))
+    .map(([name, fn]) => [name.slice('interpolate'.length).toLowerCase(), fn]));
+/**
+ * Resolves a {@link ColorScaleConfig} into a `value => color` function - the
+ * one shared implementation for every level the config can appear at
+ * (`scales.color`, a `segments` entry, a marker's own `scales`).
+ * `computedDomain` is the fallback when `config.domain` is unset;
+ * `defaultScheme` is used when `config.scheme` is unset - the theme's own
+ * 2-color continuous ramp, or a discrete palette for a categorical domain
+ * (e.g. per-series identity colors).
+ */
+export function resolveColorScale(config, computedDomain, defaultScheme) {
+    const domain = config?.domain ?? computedDomain;
+    const scheme = config?.scheme ?? defaultScheme;
+    const unknown = config?.unknown ?? '#ccc';
+    if (!domain || domain.length === 0)
+        return () => unknown;
+    // A category → color map always resolves by direct lookup, regardless of domain shape.
+    if (typeof scheme === 'object' && !Array.isArray(scheme)) {
+        return (v) => (v == null ? unknown : (scheme[String(v)] ?? unknown));
+    }
+    // A named d3-scale-chromatic ramp (e.g. 'turbo') resolves straight to its own interpolator.
+    const namedInterpolator = typeof scheme === 'string' ? NAMED_SCHEMES[scheme.toLowerCase()] : undefined;
+    if (typeof scheme === 'string' && !namedInterpolator)
+        return () => unknown;
+    const resolvedScheme = namedInterpolator ? undefined : scheme.map(resolveCssColor);
+    if (resolvedScheme && resolvedScheme.length === 0)
+        return () => unknown;
+    if (resolvedScheme && resolvedScheme.length === 1) {
+        const only = resolvedScheme[0];
+        return () => only;
+    }
+    // Categorical domain (explicit category list): sample the ramp evenly, one stop per category.
+    if (typeof domain[0] === 'string') {
+        const categories = domain;
+        const swatches = resolvedScheme ??
+            categories.map((_, i) => namedInterpolator(categories.length > 1 ? i / (categories.length - 1) : 0));
+        return (v) => {
+            if (v == null)
+                return unknown;
+            const idx = categories.indexOf(String(v));
+            return idx < 0 ? unknown : swatches[idx % swatches.length];
+        };
+    }
+    // Continuous domain: interpolate smoothly across every scheme stop (or the named ramp directly).
+    const [lo, hi] = domain;
+    let interpolator;
+    if (namedInterpolator) {
+        interpolator = namedInterpolator;
+    }
+    else {
+        try {
+            interpolator = piecewise(interpolateRgb, resolvedScheme);
+        }
+        catch {
+            return () => unknown;
+        }
+    }
+    const pivot = config?.pivot;
+    const stopCount = resolvedScheme?.length ?? Infinity;
+    return (v) => {
+        if (v == null)
+            return unknown;
+        const n = Number(v);
+        if (Number.isNaN(n))
+            return unknown;
+        const t = pivot != null && stopCount >= 3
+            ? n <= pivot
+                ? 0.5 * normalize(n, lo, pivot)
+                : 0.5 + 0.5 * normalize(n, pivot, hi)
+            : normalize(n, lo, hi);
+        return interpolator(t);
+    };
+}

package/dist/utils/grouping.d.ts

@@ -1,4 +1,4 @@
-import type { AxisValue } from '../types/layout/scales';
+import type { AxisValue } from '../types/layout/mapping';
 import type { Series, Accessor } from '../types/plots/data/common';
 /**
  * Splits rows into ordered groups keyed by the stringified accessor value.
@@ -8,8 +8,12 @@ import type { Series, Accessor } from '../types/plots/data/common';
 export declare function groupBy<TRow extends Record<string, unknown>>(data: TRow[], by: Accessor<TRow, unknown>): Map<string, TRow[]>;
 /**
  * Adapts flat rows into the `Series[]` shape the plot expects.
- * When `z` is given, one series is produced per group (series `name` = group
- * value), which is exactly how the plot's `segments` map is keyed — so the
- * caller styles each group by its `z` value.
+ * When `grouping` is given, one series is produced per group (series `name`
+ * = group value), which is exactly how the plot's `segments` map is keyed -
+ * so the caller styles/colors each group by its own value (see
+ * `scales.color`). A position channel the author left out stays unset on
+ * every series.
  */
-export declare function buildSeries<TRow extends Record<string, unknown>>(data: TRow[], x: Accessor<TRow, AxisValue>, y: Accessor<TRow, AxisValue>, z: Accessor<TRow, unknown> | undefined, defaultName?: string): Series<TRow>[];
+export declare function buildSeries<TRow extends Record<string, unknown>>(data: TRow[], x: Accessor<TRow, AxisValue> | undefined, y: Accessor<TRow, AxisValue> | undefined, grouping: Accessor<TRow, unknown> | undefined, defaultName?: string): Series<TRow>[];
+/** A series' id: its own `id`, or its `name`. */
+export declare function seriesIdOf(series: Pick<Series, 'name' | 'id'>): string;

package/dist/utils/grouping.js

@@ -19,18 +19,27 @@ export function groupBy(data, by) {
 }
 /**
  * Adapts flat rows into the `Series[]` shape the plot expects.
- * When `z` is given, one series is produced per group (series `name` = group
- * value), which is exactly how the plot's `segments` map is keyed — so the
- * caller styles each group by its `z` value.
+ * When `grouping` is given, one series is produced per group (series `name`
+ * = group value), which is exactly how the plot's `segments` map is keyed -
+ * so the caller styles/colors each group by its own value (see
+ * `scales.color`). A position channel the author left out stays unset on
+ * every series.
  */
-export function buildSeries(data, x, y, z, defaultName = 'series') {
-    if (z === undefined) {
-        return [{ name: defaultName, x, y, data }];
+export function buildSeries(data, x, y, grouping, defaultName = 'series') {
+    if (grouping === undefined) {
+        return [{ name: defaultName, ...channels(x, y), data }];
     }
-    return [...groupBy(data, z).entries()].map(([name, rows]) => ({
+    return [...groupBy(data, grouping).entries()].map(([name, rows]) => ({
         name,
-        x,
-        y,
-        data: rows,
+        ...channels(x, y),
+        data: rows
     }));
 }
+/** The position channels a series carries: only the ones set. */
+function channels(x, y) {
+    return { ...(x !== undefined ? { x } : {}), ...(y !== undefined ? { y } : {}) };
+}
+/** A series' id: its own `id`, or its `name`. */
+export function seriesIdOf(series) {
+    return series.id ?? series.name;
+}

package/dist/utils/merge.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `patch` deep-merged over `base`: plain objects merge key by key, anything
+ * else (arrays included) in `patch` replaces, and an `undefined` in `patch`
+ * leaves `base` as it is. Either side may be absent - the other is returned.
+ */
+export declare function merge<T extends object>(base: T, patch: object | undefined): T;
+export declare function merge<T extends object>(base: T | undefined, patch: T | undefined): T | undefined;

package/dist/utils/merge.js

@@ -0,0 +1,17 @@
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+export function merge(base, patch) {
+    if (!base)
+        return patch;
+    if (!patch)
+        return base;
+    const out = { ...base };
+    for (const [key, value] of Object.entries(patch)) {
+        if (value === undefined)
+            continue;
+        const prev = out[key];
+        out[key] = isPlainObject(prev) && isPlainObject(value) ? merge(prev, value) : value;
+    }
+    return out;
+}

package/dist/utils/opacity.d.ts

@@ -0,0 +1,9 @@
+import type { OpacityScaleConfig } from '../types/layout/scales';
+/**
+ * Resolves an {@link OpacityScaleConfig} into a `value => opacity` function -
+ * mirrors `resolveColorScale`'s shape, but the output is always a number in
+ * roughly `[0,1]` instead of a CSS color string. Callers must apply the
+ * result as a literal constant per mark instance (never a per-row function
+ * handed straight to svelteplot) - see the type's own doc comment for why.
+ */
+export declare function resolveOpacityScale(config: OpacityScaleConfig | undefined, computedDomain: [number, number] | string[] | undefined, defaultRange: [number, number]): (value: unknown) => number;

package/dist/utils/opacity.js

@@ -0,0 +1,38 @@
+import { normalize } from './color';
+/**
+ * Resolves an {@link OpacityScaleConfig} into a `value => opacity` function -
+ * mirrors `resolveColorScale`'s shape, but the output is always a number in
+ * roughly `[0,1]` instead of a CSS color string. Callers must apply the
+ * result as a literal constant per mark instance (never a per-row function
+ * handed straight to svelteplot) - see the type's own doc comment for why.
+ */
+export function resolveOpacityScale(config, computedDomain, defaultRange) {
+    const domain = config?.domain ?? computedDomain;
+    const range = config?.range ?? defaultRange;
+    const unknown = config?.unknown ?? 1;
+    if (!domain || domain.length === 0)
+        return () => unknown;
+    if (typeof range === 'object' && !Array.isArray(range)) {
+        return (v) => (v == null ? unknown : (range[String(v)] ?? unknown));
+    }
+    if (typeof domain[0] === 'string') {
+        const categories = domain;
+        const [lo, hi] = range;
+        return (v) => {
+            if (v == null)
+                return unknown;
+            const idx = categories.indexOf(String(v));
+            if (idx < 0)
+                return unknown;
+            return categories.length > 1 ? lo + ((hi - lo) * idx) / (categories.length - 1) : lo;
+        };
+    }
+    const [dLo, dHi] = domain;
+    const [rLo, rHi] = range;
+    return (v) => {
+        if (v == null)
+            return unknown;
+        const t = normalize(Number(v), dLo, dHi);
+        return rLo + (rHi - rLo) * t;
+    };
+}

package/dist/utils/symbol.d.ts

@@ -0,0 +1,31 @@
+import type { SymbolScaleConfig } from '../types/layout/scales';
+import type { SymbolType } from '../types/plots/constants';
+/**
+ * Resolves a {@link SymbolScaleConfig} into a `value => shape` function -
+ * always a discrete category lookup, unlike every other channel here (there's
+ * no continuous case for a shape). Resolves to a plain shape-name string,
+ * which svelteplot recognizes as a literal and renders as-is - safe to hand
+ * straight to a per-row accessor, unlike `resolveOpacityScale`'s output.
+ * `defaultRange` mirrors `resolveOpacityScale`'s own required (not defaulted)
+ * parameter - callers pass the theme's own `cfg.symbols` rather than this
+ * module hardcoding a second copy of the default cycle.
+ */
+export declare function resolveSymbolScale(config: SymbolScaleConfig | undefined, computedDomain: string[] | undefined, defaultRange: SymbolType[]): (value: unknown) => SymbolType;
+/**
+ * A symbol's SVG path, as svelteplot's `dot` mark draws it: the same
+ * d3-shape symbol, sized to the area of a circle of the given radius.
+ */
+export declare class SymbolPath {
+    #private;
+    private constructor();
+    /** The path of `symbol` at `radius`, centred on the origin. */
+    static of(symbol: SymbolType, radius: number): string;
+    /** The path of `symbol`, scaled to fit and centred in a `size`-wide square from the origin. */
+    static fitted(symbol: SymbolType, size: number): string;
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    closePath(): void;
+    rect(x: number, y: number, w: number, h: number): void;
+    /** Only the full circle d3-shape's `circle` draws, from its rightmost point. */
+    arc(x: number, y: number, r: number): void;
+}

package/dist/utils/symbol.js

@@ -0,0 +1,92 @@
+import { maybeSymbol } from 'svelteplot/helpers/symbols.js';
+/**
+ * Resolves a {@link SymbolScaleConfig} into a `value => shape` function -
+ * always a discrete category lookup, unlike every other channel here (there's
+ * no continuous case for a shape). Resolves to a plain shape-name string,
+ * which svelteplot recognizes as a literal and renders as-is - safe to hand
+ * straight to a per-row accessor, unlike `resolveOpacityScale`'s output.
+ * `defaultRange` mirrors `resolveOpacityScale`'s own required (not defaulted)
+ * parameter - callers pass the theme's own `cfg.symbols` rather than this
+ * module hardcoding a second copy of the default cycle.
+ */
+export function resolveSymbolScale(config, computedDomain, defaultRange) {
+    const domain = config?.domain ?? computedDomain ?? [];
+    const range = config?.range ?? defaultRange;
+    const unknown = config?.unknown ?? 'circle';
+    if (typeof range === 'object' && !Array.isArray(range)) {
+        return (v) => (v == null ? unknown : (range[String(v)] ?? unknown));
+    }
+    return (v) => {
+        if (v == null || !domain.length)
+            return unknown;
+        const idx = domain.indexOf(String(v));
+        return idx < 0 ? unknown : range[idx % range.length];
+    };
+}
+/**
+ * A symbol's SVG path, as svelteplot's `dot` mark draws it: the same
+ * d3-shape symbol, sized to the area of a circle of the given radius.
+ */
+export class SymbolPath {
+    #d = '';
+    #bounds = { x0: Infinity, y0: Infinity, x1: -Infinity, y1: -Infinity };
+    #k;
+    #dx;
+    #dy;
+    constructor(k = 1, dx = 0, dy = 0) {
+        this.#k = k;
+        this.#dx = dx;
+        this.#dy = dy;
+    }
+    /** The path of `symbol` at `radius`, centred on the origin. */
+    static of(symbol, radius) {
+        return SymbolPath.#draw(symbol, radius, new SymbolPath()).#d;
+    }
+    /** The path of `symbol`, scaled to fit and centred in a `size`-wide square from the origin. */
+    static fitted(symbol, size) {
+        const { x0, y0, x1, y1 } = SymbolPath.#draw(symbol, 1, new SymbolPath()).#bounds;
+        const k = size / Math.max(x1 - x0, y1 - y0);
+        const fit = new SymbolPath(k, size / 2 - (k * (x0 + x1)) / 2, size / 2 - (k * (y0 + y1)) / 2);
+        return SymbolPath.#draw(symbol, 1, fit).#d;
+    }
+    static #draw(symbol, radius, path) {
+        maybeSymbol(symbol === 'line' ? 'circle' : symbol).draw(path, radius ** 2 * Math.PI);
+        return path;
+    }
+    moveTo(x, y) {
+        this.#d += `M${this.#point(x, y)}`;
+    }
+    lineTo(x, y) {
+        this.#d += `L${this.#point(x, y)}`;
+    }
+    closePath() {
+        this.#d += 'Z';
+    }
+    rect(x, y, w, h) {
+        this.moveTo(x, y);
+        this.lineTo(x + w, y);
+        this.lineTo(x + w, y + h);
+        this.lineTo(x, y + h);
+        this.closePath();
+    }
+    /** Only the full circle d3-shape's `circle` draws, from its rightmost point. */
+    arc(x, y, r) {
+        this.#point(x, y - r);
+        this.#point(x, y + r);
+        const kr = this.#k * r;
+        const left = this.#point(x - r, y);
+        const right = this.#point(x + r, y);
+        this.#d += `A${kr},${kr},0,1,1,${left}A${kr},${kr},0,1,1,${right}`;
+    }
+    /** `x`,`y` in the output's coordinates, widening the drawn bounds. */
+    #point(x, y) {
+        const b = this.#bounds;
+        [b.x0, b.y0, b.x1, b.y1] = [
+            Math.min(b.x0, x),
+            Math.min(b.y0, y),
+            Math.max(b.x1, x),
+            Math.max(b.y1, y)
+        ];
+        return `${this.#k * x + this.#dx},${this.#k * y + this.#dy}`;
+    }
+}