1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
const PADDING_MAX_RATIO = 0.75;
const PADDING_MIN_RATIO = 0.15;
const PADDING_MIN_AT_ZOOM_PERCENT = 0.2;
export function getTimelineZoomMin({
duration,
containerWidth,
}: {
duration: number;
containerWidth: number | null | undefined;
}): number {
const safeDuration = Math.max(duration, 1);
const safeContainerWidth = containerWidth ?? 1000;
const contentRatioAtMinZoom = 1 - PADDING_MAX_RATIO;
const availableWidth = safeContainerWidth * contentRatioAtMinZoom;
const zoomToFit =
availableWidth / (safeDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND);
return Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, zoomToFit);
}
export function getTimelinePaddingPx({
containerWidth,
zoomLevel,
minZoom,
}: {
containerWidth: number;
zoomLevel: number;
minZoom: number;
}): number {
const zoomPercent = getZoomPercent({ zoomLevel, minZoom });
const paddingTransitionPercent = Math.min(
zoomPercent / PADDING_MIN_AT_ZOOM_PERCENT,
1,
);
const paddingRatio =
PADDING_MAX_RATIO -
(PADDING_MAX_RATIO - PADDING_MIN_RATIO) * paddingTransitionPercent;
return containerWidth * paddingRatio;
}
export function getZoomPercent({
zoomLevel,
minZoom,
}: {
zoomLevel: number;
minZoom: number;
}): number {
return (zoomLevel - minZoom) / (TIMELINE_CONSTANTS.ZOOM_MAX - minZoom);
}
/**
* Convert linear slider position (0-1) to exponential zoom level.
* At low slider values, zoom changes are small. At high values, changes are large.
*/
export function sliderToZoom({
sliderPosition,
minZoom,
maxZoom = TIMELINE_CONSTANTS.ZOOM_MAX,
}: {
sliderPosition: number;
minZoom: number;
maxZoom?: number;
}): number {
const clampedPosition = Math.max(0, Math.min(1, sliderPosition));
return minZoom * (maxZoom / minZoom) ** clampedPosition;
}
/**
* Convert exponential zoom level to linear slider position (0-1).
*/
export function zoomToSlider({
zoomLevel,
minZoom,
maxZoom = TIMELINE_CONSTANTS.ZOOM_MAX,
}: {
zoomLevel: number;
minZoom: number;
maxZoom?: number;
}): number {
const clampedZoom = Math.max(minZoom, Math.min(maxZoom, zoomLevel));
return Math.log(clampedZoom / minZoom) / Math.log(maxZoom / minZoom);
}
|
