text-fit.mjs
105 lines · archify/renderers/shared/text-fit.mjs at a406594
1// Single-line node text fitting, shared by every renderer.
2//
3// Node text (`label`, `sublabel`, `tag`) renders as one <text> element with
4// text-anchor="middle" and is never wrapped. Left unmeasured, an over-long
5// value silently spills across its neighbours while validation still reports
6// a clean receipt — the failure mode this module exists to close.
7//
8// Two halves, always used together:
9// - fittedNodeFontSize shrinks the text toward a legible minimum at render
10// time, so ordinary overruns simply get smaller instead of overlapping.
11// - minimumNodeTextWidth reports the width the text still needs once it has
12// shrunk as far as it may, so validation can reject what shrinking cannot
13// save.
14//
15// The geometry constants below are shared; the per-field `preferred` and
16// `minimum` font sizes are not, because renderers set node text at different
17// sizes (architecture sublabels are 9px, the rest are 7px).
19import { textUnits, SEMANTIC_SIGIL_INSET, SEMANTIC_SIGIL_SIZE, SEMANTIC_SIGIL_FOOTPRINT, SOURCE_BADGE_FOOTPRINT } from './utils.mjs';
21// widthFactor: px of advance width per text unit, per px of font size.
22// horizontalPadding: total px reserved inside the box so text never touches
23// the border.
24export const nodeTextFit = {
25 widthFactor: 0.6,
26 horizontalPadding: 8,
27};
29// Largest font size at or below `preferred` that fits `text` inside `width`,
30// floored at `minimum` — below that the text is no longer legible and the
31// caller should be reporting a problem instead.
32export function fittedNodeFontSize(text, width, preferred, minimum) {
33 const units = Math.max(1, textUnits(text));
34 const available = Math.max(1, width - nodeTextFit.horizontalPadding);
35 const fitted = Math.min(preferred, available / (units * nodeTextFit.widthFactor));
36 return Math.max(minimum, Math.floor(fitted * 10) / 10);
37}
39// Width `text` occupies at its legible minimum. Compare against
40// `width - nodeTextFit.horizontalPadding` to decide whether shrink-to-fit can
41// rescue it.
42export function minimumNodeTextWidth(text, minimum) {
43 return textUnits(text) * minimum * nodeTextFit.widthFactor;
44}
46// Available text width inside a box of `width`.
47export function availableNodeTextWidth(width) {
48 return width - nodeTextFit.horizontalPadding;
49}
51// Adapted from Souptik Chakraborty's #220: shift only labels which reach a
52// corner icon. Unlike the original hard gate, a narrow valid node uses a
53// separate text row; its authored bounds and acceptance remain unchanged.
54export function nodeLabelLayout({ width, height, rows, side = 'left', brand = false, source = false, step = '' }) {
55 const result = { x: width / 2, ys: rows.map(row => row.y), sigilY: SEMANTIC_SIGIL_INSET, sigilSize: SEMANTIC_SIGIL_SIZE };
56 const labelWidth = minimumNodeTextWidth(rows[0].text, rows[0].font);
57 const stepEnd = step ? (side === 'left' ? 23 : 10) + minimumNodeTextWidth(step, 8) + 3 : 0;
58 const left = Math.max(side === 'left' ? SEMANTIC_SIGIL_FOOTPRINT + 2 : 4, stepEnd);
59 const right = width - (brand ? 26 : side === 'right' ? SEMANTIC_SIGIL_FOOTPRINT + 2 : 4)
60 - (source ? SOURCE_BADGE_FOOTPRINT : 0);
61 if (result.x - labelWidth / 2 >= left && result.x + labelWidth / 2 <= right) return result;
62 if (labelWidth <= right - left) {
63 // Round away from the icon, retaining the node centre whenever possible.
64 result.x = Math.min(Math.floor((right - labelWidth / 2) * 10) / 10,
65 Math.max(result.x, Math.ceil((left + labelWidth / 2) * 10) / 10));
66 return result;
67 }
68 // Keep the existing font sizes and put the text below the decoration rail.
69 // Conservative ascent/descent bounds also protect CJK and fallback fonts.
70 let bottom = Math.max(brand ? 22 : SEMANTIC_SIGIL_FOOTPRINT, source ? 19 : 0);
71 const ys = rows.map(row => {
72 const y = Math.max(row.y, Math.ceil((bottom + 2 + row.font * 1.2) * 10) / 10);
73 bottom = y + row.font * 0.3;
74 return y;
75 });
76 if (bottom <= height - 2) {
77 result.ys = ys;
78 return result;
79 }
80 if (source) {
81 // A source badge adds a second decoration on the right. On short boxes,
82 // restoring the original rows would put the title back under that badge.
83 // Try compact leading before giving up the dedicated text rail. Retain
84 // every font size and the authored box; only this crowded fallback packs
85 // the rows, with a full em above each baseline and 0.3 em below it.
86 let compactBottom = Math.max(brand ? 22 : SEMANTIC_SIGIL_FOOTPRINT, 19) + 1;
87 const compactYs = rows.map(row => {
88 const y = Math.ceil((compactBottom + 1 + row.font) * 10) / 10;
89 compactBottom = y + row.font * 0.3;
90 return y;
91 });
92 // The compact fallback may also use the otherwise reserved bottom
93 // padding; the entire descent still stays inside the fixed box.
94 if (compactBottom <= height - 0.5) {
95 result.ys = compactYs;
96 return result;
97 }
98 }
99 // A deliberately short fixed box may have no spare row. Preserve its text
100 // and geometry, and fit only the decorative sigil in the space above it.
101 result.sigilY = 1;
102 result.sigilSize = Math.max(1, Math.min(SEMANTIC_SIGIL_SIZE,
103 Math.floor(rows[0].y - rows[0].font * 1.2 - 3)));
104 return result;
105}