@magmonium/one 0.4.89 → 0.4.91

package/fesm2022/magmonium-one.mjs

@@ -34817,11 +34817,16 @@ const ladderScale = ({ value, levels, forward = [], maxSpanPct }) => {
 		clamp: (v) => Math.max(0, Math.min(100, pos(v)))
 	};
 };
-const layoutLanes = (items, minGapPx) => {
+const pointExtent = (_keys, x) => [x, x];
+const layoutLanes = (items, minGapPx, extent = pointExtent) => {
 	const labels = [];
 	const last = [null, null];
 	for (const item of [...items].sort((a, b) => a.x - b.x)) {
-		const lane = [0, 1].find((l) => !last[l] || item.x - last[l].x >= minGapPx);
+		const [start] = extent([item.key], item.x);
+		const lane = [0, 1].find((l) => {
+			const prev = last[l];
+			return !prev || start - extent(prev.keys, prev.x)[1] >= minGapPx;
+		});
 		if (lane !== void 0) {
 			const label = {
 				lane,
@@ -36495,7 +36500,9 @@ const BREAKPOINT_PX = {
 	xxl: 1400
 };
 const FALLBACK_PX = 640;
-const LABEL_GAP_PX = 72;
+const LABEL_GAP_PX = 12;
+const LABEL_CHAR_PX = 7.5;
+const labelPx = (text) => Array.from(text).length * LABEL_CHAR_PX;
 const ROW_PX = 28;
 const MIN_VERTICAL_PX = 200;
 const finite = (v) => typeof v === "number" && Number.isFinite(v) ? v : null;
@@ -36553,10 +36560,11 @@ var ScaleComponent = class ScaleComponent {
 		const w = this.width();
 		return w > 0 && w < BREAKPOINT_PX[this.breakpoint()] ? "vertical" : "horizontal";
 	}, ...ngDevMode ? [{ debugName: "shownAs" }] : /* istanbul ignore next */ []);
-	marks = computed(() => this.markTags().flatMap((tag) => {
+	marks = computed(() => this.markTags().flatMap((tag, i) => {
 		const value = finite(tag.value());
 		if (value === null) return [];
 		return [{
+			id: `mark-${i}`,
 			key: tag.key(),
 			name: this.t(tag.label() || tag.key()),
 			value,
@@ -36621,7 +36629,7 @@ var ScaleComponent = class ScaleComponent {
 		const ticks = marks.map((m) => {
 			const pin = domain.pin(m.value);
 			return {
-				key: m.key,
+				key: m.id,
 				kind: m.kind,
 				primary: m.primary,
 				at: at(m.value),
@@ -36629,7 +36637,7 @@ var ScaleComponent = class ScaleComponent {
 			};
 		});
 		const bands = marks.filter((m) => m.kind === "target" && m.low !== null && m.high !== null).map((m) => ({
-			key: m.key,
+			key: m.id,
 			...span(at(m.low), at(m.high))
 		}));
 		const bounds = marks.filter((m) => m.kind === "bound").map((m) => m.value);
@@ -36647,9 +36655,9 @@ var ScaleComponent = class ScaleComponent {
 			...b,
 			row
 		}));
-		const byKey = new Map(marks.map((m) => [m.key, m]));
-		const text = (keys) => {
-			const group = keys.map((k) => byKey.get(k));
+		const byId = new Map(marks.map((m) => [m.id, m]));
+		const text = (ids) => {
+			const group = ids.map((id) => byId.get(id));
 			return {
 				name: group.map((m) => m.name).join(" · "),
 				valueText: group.map((m) => this.formatValue(m.value)).join(" · "),
@@ -36677,10 +36685,16 @@ var ScaleComponent = class ScaleComponent {
 			};
 		}
 		const widthPx = this.width() || FALLBACK_PX;
+		const extent = (ids, x) => {
+			const { name, valueText } = text(ids);
+			const w = Math.max(labelPx(name), labelPx(valueText));
+			const start = x - w * x / widthPx;
+			return [start, start + w];
+		};
 		const labels = layoutLanes(ticks.map((t) => ({
 			key: t.key,
 			x: t.at / 100 * widthPx
-		})), LABEL_GAP_PX).map((l) => ({
+		})), LABEL_GAP_PX, extent).map((l) => ({
 			key: l.keys.join("+"),
 			lane: l.lane,
 			at: l.x / widthPx * 100,