Hexagon Pattern

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { SVGAttributes } from "svelte/elements";
4 
5	type Direction = "horizontal" | "vertical";
6	type HexPoint = readonly [number, number];
7 
8	interface HexagonPatternProps extends SVGAttributes<SVGSVGElement> {
9		radius?: number;
10		gap?: number;
11		x?: number;
12		y?: number;
13		direction?: Direction;
14		strokeDasharray?: string;
15		hexagons?: Array<[col: number, row: number]>;
16		class?: string;
17	}
18 
19	function hexVertexList(cx: number, cy: number, r: number, direction: Direction): HexPoint[] {
20		const startAngle = direction === "horizontal" ? 0 : 30;
21		return Array.from({ length: 6 }, (_, i) => {
22			const angle = ((startAngle + i * 60) * Math.PI) / 180;
23			return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)] as const;
24		});
25	}
26 
27	function hexPoints(cx: number, cy: number, r: number, direction: Direction): string {
28		return hexVertexList(cx, cy, r, direction)
29			.map(([px, py]) => `${px},${py}`)
30			.join(" ");
31	}
32 
33	function edgeLexKey(a: HexPoint, b: HexPoint): string {
34		const [p, q] = a[0] < b[0] || (a[0] === b[0] && a[1] <= b[1]) ? [a, b] : [b, a];
35		return `${p[0].toFixed(6)},${p[1].toFixed(6)}|${q[0].toFixed(6)},${q[1].toFixed(6)}`;
36	}
37 
38	function collectUniqueHexEdges(
39		centers: [number, number][],
40		r: number,
41		direction: Direction
42	): [HexPoint, HexPoint][] {
43		const seen = new Set<string>();
44		const edges: [HexPoint, HexPoint][] = [];
45 
46		for (const [cx, cy] of centers) {
47			const verts = hexVertexList(cx, cy, r, direction);
48			for (let i = 0; i < 6; i++) {
49				const a = verts[i];
50				const b = verts[(i + 1) % 6];
51				const key = edgeLexKey(a, b);
52				if (!seen.has(key)) {
53					seen.add(key);
54					edges.push([a, b]);
55				}
56			}
57		}
58 
59		return edges;
60	}
61 
62	function isSolidStrokeDasharray(strokeDasharray: string): boolean {
63		const t = strokeDasharray.trim();
64		return t === "" || t === "none" || t === "0";
65	}
66 
67	function getHexSpacing(
68		r: number,
69		direction: Direction,
70		gap: number
71	): {
72		colStep: number;
73		rowStep: number;
74		tileW: number;
75		tileH: number;
76	} {
77		const sqrt3 = Math.sqrt(3);
78 
79		if (direction === "horizontal") {
80			const colStep = (3 * r) / 2 + (sqrt3 * gap) / 2;
81			const rowStep = sqrt3 * r + gap;
82 
83			return {
84				colStep,
85				rowStep,
86				tileW: colStep * 2,
87				tileH: rowStep,
88			};
89		}
90 
91		const colStep = sqrt3 * r + gap;
92		const rowStep = (3 * r) / 2 + (sqrt3 * gap) / 2;
93 
94		return {
95			colStep,
96			rowStep,
97			tileW: colStep,
98			tileH: rowStep * 2,
99		};
100	}
101 
102// … truncated