app/components/plate-i-geometry.ts

Functions

Imports

It imports no other module of this repo. Imported by app/components/plate-i.tsx.

Source

1// Coordinates are lifted from the approved canvas file (part-c/09-solid-lawn.html), not retyped.
2// One departure: the canvas's 375 frame clips labels i, iv and v, so in NARROW those leaders fold inward.
3
4type Fill = "paper" | "lawn" | "turbid" | "none";
5type Stroke = "ink" | "dust" | "none";
6
7type Paint = { fill: Fill; stroke: Stroke; width: number; dash: string | null };
8export type Shape =
9  | ({ kind: "circle"; c: [number, number, number] } & Paint)
10  | ({ kind: "path"; d: string } & Paint);
11
12type Segment = [number, number, number, number];
13
14export type PlateLayout = {
15  size: number;
16  dish: { cx: number; cy: number; rim: number; lawn: number };
17  scale: { line: Segment; label: { x: number; y: number; text: string } };
18  plaques: Array<{
19    id: string;
20    shapes: Shape[];
21    leader: Segment[];
22    label: { x: number; y: number; anchor: "start" | "end" };
23  }>;
24};
25
26const CANVAS_WIDE: PlateLayout = {
27  size: 500,
28  dish: {"cx":250,"cy":250,"rim":246,"lawn":235},
29  scale: {"line":[16,486,86,486],"label":{"x":16,"y":478,"text":"1 cm"}},
30  plaques: [
31    {
32      id: "i",
33      shapes: [
34        {"kind":"circle","c":[334.3,179.3,31.3],"fill":"paper","stroke":"ink","width":1.4,"dash":null},
35      ],
36      leader: [[334.3,179.3,458.4,75.2],[458.4,75.2,482.4,75.2]],
37      label: {"x":487.4,"y":79.2,"anchor":"start"},
38    },
39    {
40      id: "ii",
41      shapes: [
42        {"kind":"circle","c":[311.6,328.8,28.8],"fill":"turbid","stroke":"ink","width":1.4,"dash":null},
43      ],
44      leader: [[311.6,328.8,417.5,464.3],[417.5,464.3,441.5,464.3]],
45      label: {"x":446.5,"y":468.3,"anchor":"start"},
46    },
47    {
48      id: "iii",
49      shapes: [
50        {"kind":"circle","c":[227,86.6,30],"fill":"turbid","stroke":"ink","width":1.4,"dash":null},
51        {"kind":"circle","c":[227,86.6,13.5],"fill":"paper","stroke":"ink","width":1.1,"dash":null},
52      ],
53      leader: [[227,86.6,212.1,-19.4],[212.1,-19.4,188.1,-19.4]],
54      label: {"x":183.1,"y":-15.4,"anchor":"end"},
55    },
56    {
57      id: "iv",
58      shapes: [
59        {"kind":"circle","c":[399.2,265.7,41.6],"fill":"turbid","stroke":"dust","width":1,"dash":"3 4"},
60        {"kind":"circle","c":[399.2,265.7,23.8],"fill":"paper","stroke":"ink","width":1.4,"dash":null},
61      ],
62      leader: [[399.2,265.7,520.5,278.4],[520.5,278.4,544.5,278.4]],
63      label: {"x":549.5,"y":282.4,"anchor":"start"},
64    },
65    {
66      id: "v",
67      shapes: [
68        {"kind":"circle","c":[159.7,343.5,8.5],"fill":"paper","stroke":"ink","width":1.4,"dash":null},
69      ],
70      leader: [[159.7,343.5,61.1,445.7],[61.1,445.7,37.1,445.7]],
71      label: {"x":32.1,"y":449.7,"anchor":"end"},
72    },
73    {
74      id: "vi",
75      shapes: [
76        {"kind":"path","d":"M272.8 424.9L276.2 430.0L267.8 432.7L266.9 436.6L270.4 444.2L263.2 444.2L257.4 443.5L258.7 453.9L253.6 454.8L247.5 447.5L243.9 454.2L238.7 457.5L236.1 448.8L232.0 448.3L223.8 452.6L224.6 444.2L225.1 438.6L215.8 439.2L215.4 434.1L220.7 428.6L213.9 424.9L212.3 419.9L220.4 417.2L220.5 413.0L217.2 405.5L225.1 406.1L229.5 405.1L229.4 396.5L234.8 397.0L240.3 402.2L243.9 393.4L248.8 394.1L251.4 401.9L256.4 400.3L263.4 398.0L262.1 406.6L264.0 410.3L273.4 409.9L271.4 416.0L266.9 421.3L275.5 424.9Z","fill":"paper","stroke":"ink","width":1.2,"dash":"4 3"},
77      ],
78      leader: [[243.9,424.9,240.5,521.8],[240.5,521.8,216.5,521.8]],
79      label: {"x":211.5,"y":525.8,"anchor":"end"},
80    },
81  ],
82};
83
84// 610 is the hero's right half at 1280 with a desktop scrollbar, plus the 90px gap beside the name.
85// Only the dish, plaques, leader starts and 1 cm bar scale; labels, tails and strokes keep canvas size.
86const WIDE_WIDTH = 610;
87// Longest left label is 131 at 14px mono and the one-line legend under it (240) must clear the rim;
88// longest right label is 85.
89const LEFT_LABELS = 198;
90const RIGHT_LABELS = 88;
91/** Leader elbow, tail and label gap on each side of the dish. */
92const LEADER = 31;
93const K = (WIDE_WIDTH - 2 * LEADER - LEFT_LABELS - RIGHT_LABELS) / 2 / CANVAS_WIDE.dish.rim;
94const RIM = CANVAS_WIDE.dish.rim * K;
95const at = (x: number, y: number): [number, number] => [
96  +((x - CANVAS_WIDE.dish.cx) * K).toFixed(1),
97  +((y - CANVAS_WIDE.dish.cy) * K).toFixed(1),
98];
99
100// Label side and elbow height (fraction of rim), chosen so no leader crosses a plaque.
101const SIDE_LABELS: Record<string, { side: 1 | -1; y: number }> = {
102  i: { side: 1, y: -0.52 },
103  iv: { side: 1, y: 0.07 },
104  ii: { side: 1, y: 0.63 },
105  iii: { side: -1, y: -0.77 },
106  v: { side: -1, y: -0.12 },
107  vi: { side: -1, y: 0.32 },
108};
109
110function scaleShape(s: Shape): Shape {
111  if (s.kind === "circle") {
112    const [x, y] = at(s.c[0], s.c[1]);
113    return { ...s, c: [x, y, +(s.c[2] * K).toFixed(1)] };
114  }
115  const d = s.d.replace(/(-?\d+(?:\.\d+)?) (-?\d+(?:\.\d+)?)/g, (_, x: string, y: string) =>
116    at(Number(x), Number(y)).join(" "),
117  );
118  return { ...s, d };
119}
120
121export const WIDE: PlateLayout = {
122  size: +(CANVAS_WIDE.size * K).toFixed(1),
123  dish: { cx: 0, cy: 0, rim: +RIM.toFixed(1), lawn: +(CANVAS_WIDE.dish.lawn * K).toFixed(1) },
124  scale: (() => {
125    const [x1, , x2] = CANVAS_WIDE.scale.line;
126    const right = Math.round(RIM);
127    const y = Math.round(RIM) - 4;
128    const left = +(right - (x2 - x1) * K).toFixed(1);
129    return {
130      line: [left, y, right, y],
131      label: { x: left, y: y - 8, text: CANVAS_WIDE.scale.label.text },
132    };
133  })(),
134  plaques: CANVAS_WIDE.plaques.map((p) => {
135    const place = SIDE_LABELS[p.id];
136    const start = p.leader[0];
137    if (!place || !start) throw new Error(`Plate I: no label side or leader for plaque "${p.id}"`);
138    const [sx, sy] = at(start[0], start[1]);
139    const y = Math.round(place.y * RIM);
140    const elbow = place.side * Math.round(RIM + 8);
141    const tail = place.side * Math.round(RIM + 26);
142    return {
143      id: p.id,
144      shapes: p.shapes.map(scaleShape),
145      leader: [
146        [sx, sy, elbow, y],
147        [elbow, y, tail, y],
148      ],
149      label: { x: tail + place.side * 5, y: y + 4, anchor: place.side === 1 ? "start" : "end" },
150    };
151  }),
152};
153
154const R = Math.round(RIM);
155export const WIDE_VIEW = { x: -(R + LEADER + LEFT_LABELS), y: -(R + 4), w: WIDE_WIDTH, h: 2 * R + 8 };
156
157export const NARROW: PlateLayout = {
158  size: 300,
159  dish: {"cx":150,"cy":150,"rim":146,"lawn":135},
160  scale: {"line":[16,286,86,286],"label":{"x":16,"y":278,"text":"1 cm"}},
161  plaques: [
162    {
163      id: "i",
164      shapes: [
165        {"kind":"circle","c":[200.6,107.6,18.8],"fill":"paper","stroke":"ink","width":1.4,"dash":null},
166      ],
167      leader: [[200.6,107.6,262,-20.3],[262,-20.3,238,-20.3]],
168      label: {"x":233,"y":-16.3,"anchor":"end"},
169    },
170    {
171      id: "ii",
172      shapes: [
173        {"kind":"circle","c":[186.9,197.3,17.3],"fill":"turbid","stroke":"ink","width":1.4,"dash":null},
174      ],
175      leader: [[186.9,197.3,255.9,285.5],[255.9,285.5,279.9,285.5]],
176      label: {"x":284.9,"y":289.5,"anchor":"start"},
177    },
178    {
179      id: "iii",
180      shapes: [
181        {"kind":"circle","c":[136.2,52,18],"fill":"turbid","stroke":"ink","width":1.4,"dash":null},
182        {"kind":"circle","c":[136.2,52,8.1],"fill":"paper","stroke":"ink","width":1.1,"dash":null},
183      ],
184      leader: [[136.2,52,126.1,-20.3],[126.1,-20.3,102.1,-20.3]],
185      label: {"x":97.1,"y":-16.3,"anchor":"end"},
186    },
187    {
188      id: "iv",
189      shapes: [
190        {"kind":"circle","c":[239.5,159.4,24.9],"fill":"turbid","stroke":"dust","width":1,"dash":"3 4"},
191        {"kind":"circle","c":[239.5,159.4,14.3],"fill":"paper","stroke":"ink","width":1.4,"dash":null},
192      ],
193      leader: [[239.5,159.4,258,252],[258,252,282,252]],
194      label: {"x":287,"y":256,"anchor":"start"},
195    },
196    {
197      id: "v",
198      shapes: [
199        {"kind":"circle","c":[95.8,206.1,5.1],"fill":"paper","stroke":"ink","width":1.4,"dash":null},
200      ],
201      leader: [[95.8,206.1,96,298],[96,298,80,298]],
202      label: {"x":75,"y":302,"anchor":"end"},
203    },
204    {
205      id: "vi",
206      shapes: [
207        {"kind":"path","d":"M163.2 254.9L166.3 258.1L161.2 259.8L160.4 262.1L162.6 266.8L157.9 266.5L154.7 266.5L154.7 271.4L151.9 272.1L148.5 268.8L146.3 272.9L143.3 274.1L141.7 269.2L139.1 269.0L134.4 271.3L134.7 266.6L134.6 263.4L129.2 263.7L129.3 260.5L132.4 257.1L128.8 254.9L126.8 251.8L133.0 250.6L132.2 247.7L130.2 243.2L135.0 243.6L137.6 242.9L137.6 237.8L140.7 237.7L144.1 241.0L146.3 236.2L149.3 236.1L150.9 241.0L153.7 240.4L157.9 239.0L157.0 244.3L158.2 246.3L163.7 246.1L162.4 249.7L160.8 252.6L165.6 254.9Z","fill":"paper","stroke":"ink","width":1.2,"dash":"4 3"},
208      ],
209      leader: [[146.3,254.9,144,321.9],[144,321.9,120,321.9]],
210      label: {"x":115,"y":325.9,"anchor":"end"},
211    },
212  ],
213};
214
215/** The specimen row's icons, each drawn in a 76-unit square, in the plate's numeral order. */
216export const KEY_ICONS: Shape[][] = [
217  [
218    {"kind":"circle","c":[38,38,30],"fill":"paper","stroke":"ink","width":1.6,"dash":null},
219  ],
220  [
221    {"kind":"circle","c":[38,38,30],"fill":"turbid","stroke":"ink","width":1.6,"dash":null},
222  ],
223  [
224    {"kind":"circle","c":[38,38,30],"fill":"turbid","stroke":"ink","width":1.6,"dash":null},
225    {"kind":"circle","c":[38,38,13.8],"fill":"paper","stroke":"ink","width":1.2,"dash":null},
226  ],
227  [
228    {"kind":"circle","c":[38,38,32],"fill":"turbid","stroke":"dust","width":1,"dash":"3 4"},
229    {"kind":"circle","c":[38,38,18.6],"fill":"paper","stroke":"ink","width":1.6,"dash":null},
230  ],
231  [
232    {"kind":"circle","c":[38,38,6.6],"fill":"paper","stroke":"ink","width":1.6,"dash":null},
233    {"kind":"circle","c":[38,38,30],"fill":"none","stroke":"dust","width":1,"dash":"1 5"},
234  ],
235  [
236    {"kind":"path","d":"M65.4 38.0L67.9 42.1L63.7 45.2L59.6 47.4L62.0 52.6L60.5 56.3L54.2 55.3L52.6 58.7L51.7 64.4L47.5 64.7L42.7 60.5L39.7 63.6L35.9 68.9L32.7 63.7L30.1 60.1L24.9 63.4L20.9 62.2L21.0 56.2L19.3 53.2L12.1 53.7L10.8 49.8L15.7 44.2L13.1 41.4L7.5 38.0L11.6 34.4L14.9 31.5L12.7 27.0L12.0 22.2L17.9 21.6L21.1 19.9L20.6 13.4L24.9 12.7L30.0 15.6L32.9 13.5L36.0 8.4L39.9 10.6L42.9 14.5L47.4 11.6L51.9 11.3L53.1 16.7L54.5 20.4L60.4 19.8L63.2 22.7L59.8 28.5L61.3 31.5L67.4 34.0L65.9 38.0Z","fill":"paper","stroke":"ink","width":1.2,"dash":"4 3"},
237  ],
238];