Arc Timeline

1<script lang="ts">
2	import type { Snippet } from "svelte";
3	import { cn } from "$UTILS$";
4	import type {
5		ArcTimelineItem,
6		ArcTimelineProps,
7		ArcTimelineRenderable,
8		ArcTimelineStep,
9	} from "./types";
10 
11	interface TimelineStepMeta {
12		line: ArcTimelineItem;
13		step: ArcTimelineStep;
14		lineIndex: number;
15		stepIndex: number;
16		angle: number;
17		isFirstStep: boolean;
18		isLastStep: boolean;
19	}
20 
21	let {
22		ref = $bindable(null),
23		class: className,
24		data,
25		arcConfig = {},
26		defaultActiveStep = {},
27		...restProps
28	}: ArcTimelineProps = $props();
29 
30	let circleWidth = $derived(arcConfig.circleWidth ?? 5000);
31	let angleBetweenMinorSteps = $derived(arcConfig.angleBetweenMinorSteps ?? 0.35);
32	let lineCountFillBetweenSteps = $derived(arcConfig.lineCountFillBetweenSteps ?? 10);
33	let boundaryPlaceholderLinesCount = $derived(arcConfig.boundaryPlaceholderLinesCount ?? 50);
34 
35	function getInitialCircleRotation() {
36		const defaultActiveTime = defaultActiveStep.time ?? data[0]?.time;
37		const defaultActiveStepIndex = defaultActiveStep.stepIndex ?? 0;
38 
39		let count = 0;
40 
41		for (const timelineItem of data) {
42			if (timelineItem.time === defaultActiveTime) {
43				count += defaultActiveStepIndex;
44				break;
45			}
46 
47			count += timelineItem.steps.length;
48		}
49 
50		return (
51			-count * angleBetweenMinorSteps * (lineCountFillBetweenSteps + 1) -
52			angleBetweenMinorSteps * boundaryPlaceholderLinesCount
53		);
54	}
55 
56	let circleContainerRotateDeg = $state(getInitialCircleRotation());
57 
58	let timelineSteps = $derived.by((): TimelineStepMeta[] => {
59		const steps: TimelineStepMeta[] = [];
60		let stepsBeforeCurrentLine = 0;
61 
62		data.forEach((line, lineIndex) => {
63			line.steps.forEach((step, stepIndex) => {
64				const angle =
65					angleBetweenMinorSteps *
66						(lineCountFillBetweenSteps + 1) *
67						(stepsBeforeCurrentLine + stepIndex) +
68					angleBetweenMinorSteps * boundaryPlaceholderLinesCount;
69 
70				steps.push({
71					line,
72					step,
73					lineIndex,
74					stepIndex,
75					angle,
76					isFirstStep: lineIndex === 0 && stepIndex === 0,
77					isLastStep:
78						lineIndex === data.length - 1 && stepIndex === line.steps.length - 1,
79				});
80			});
81 
82			stepsBeforeCurrentLine += line.steps.length;
83		});
84 
85		return steps;
86	});
87 
88	function getPlaceholderAngles(isFirstStep: boolean, isLastStep: boolean, angle: number) {
89		const count =
90			isLastStep || isFirstStep ? boundaryPlaceholderLinesCount : lineCountFillBetweenSteps;
91 
92		return Array.from({ length: count }, (_, index) =>
93			isFirstStep
94// … truncated