blob: ab9c57a52ee7c936f7dc8a19904549eadeee66d7 (
plain) (
blame)
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import { useState } from "react";
import { Button } from "../ui/button";
import { Slider } from "../ui/slider";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "../ui/tooltip";
import { ZoomIn, ZoomOut, Maximize2 } from "lucide-react";
interface TimelineZoomControlProps {
zoomLevel: number;
onZoomChange: (zoom: number) => void;
onFitToWindow?: () => void;
className?: string;
}
export function TimelineZoomControl({
zoomLevel,
onZoomChange,
onFitToWindow,
className,
}: TimelineZoomControlProps) {
// Convert zoom level to percentage for display
const zoomPercentage = Math.round(zoomLevel * 100);
const handleZoomIn = () => {
onZoomChange(Math.min(10, zoomLevel + 0.2));
};
const handleZoomOut = () => {
onZoomChange(Math.max(0.1, zoomLevel - 0.2));
};
const handleReset = () => {
if (onFitToWindow) {
onFitToWindow();
} else {
onZoomChange(1);
}
};
const handleSliderChange = (value: number[]) => {
onZoomChange(value[0]);
};
return (
<div className={`flex items-center gap-1 ${className || ""}`}>
{/* Zoom Out Button */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={handleZoomOut}
disabled={zoomLevel <= 0.1}
className="h-7 w-7 p-0"
>
<ZoomOut className="h-3 w-3" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Zoom out</p>
<p className="text-xs text-muted-foreground">Ctrl + - / Ctrl + Wheel</p>
</TooltipContent>
</Tooltip>
{/* Zoom Slider */}
<div className="flex items-center gap-2 w-20">
<Slider
value={[zoomLevel]}
onValueChange={handleSliderChange}
min={0.1}
max={5}
step={0.1}
className="flex-1"
/>
</div>
{/* Zoom In Button */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={handleZoomIn}
disabled={zoomLevel >= 5}
className="h-7 w-7 p-0"
>
<ZoomIn className="h-3 w-3" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Zoom in</p>
<p className="text-xs text-muted-foreground">Ctrl + + / Ctrl + Wheel</p>
</TooltipContent>
</Tooltip>
{/* Fit to Window / Reset Button */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={handleReset}
className="h-7 px-2 min-w-[60px] flex items-center gap-1"
>
{onFitToWindow ? (
<>
<Maximize2 className="h-3 w-3" />
</>
) : (
<span className="text-xs font-mono">{zoomPercentage}%</span>
)}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{onFitToWindow ? "Fit to Window" : "Reset Zoom"}</p>
<p className="text-xs text-muted-foreground">
{onFitToWindow ? "Show all track content" : "Ctrl + 0"}
</p>
</TooltipContent>
</Tooltip>
</div>
);
}
|
