xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: zoom on entire timeline

Browse Source
This commit is contained in:
Maze Winther
2025-07-09 22:07:25 +02:00
parent 3089fb0418
commit 53d6d0e1af
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/web/src/components/editor/timeline.tsx
View File

@ -90,6 +90,7 @@ export function Timeline() {
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const dragCounterRef = useRef(0); const dragCounterRef = useRef(0);
const timelineRef = useRef<HTMLDivElement>(null); const timelineRef = useRef<HTMLDivElement>(null);
const rulerRef = useRef<HTMLDivElement>(null);
const [isInTimeline, setIsInTimeline] = useState(false); const [isInTimeline, setIsInTimeline] = useState(false);
// Timeline zoom functionality // Timeline zoom functionality
@ -471,9 +472,9 @@ export function Timeline() {
const handleScrub = useCallback( const handleScrub = useCallback(
(e: MouseEvent | React.MouseEvent) => { (e: MouseEvent | React.MouseEvent) => {
const timeline = timelineRef.current; const ruler = rulerRef.current;
if (!timeline) return; if (!ruler) return;
const rect = timeline.getBoundingClientRect(); const rect = ruler.getBoundingClientRect();
const x = e.clientX - rect.left; const x = e.clientX - rect.left;
const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel))); const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
setScrubTime(time); setScrubTime(time);
@ -729,7 +730,6 @@ export function Timeline() {
{...dragProps} {...dragProps}
onMouseEnter={() => setIsInTimeline(true)} onMouseEnter={() => setIsInTimeline(true)}
onMouseLeave={() => setIsInTimeline(false)} onMouseLeave={() => setIsInTimeline(false)}
onWheel={handleWheel}
> >
{/* Toolbar */} {/* Toolbar */}
<div className="border-b flex items-center px-2 py-1 gap-1"> <div className="border-b flex items-center px-2 py-1 gap-1">
@ -886,7 +886,7 @@ export function Timeline() {
</div> </div>
{/* Timeline Container */} {/* Timeline Container */}
<div className="flex-1 flex flex-col overflow-hidden"> <div className="flex-1 flex flex-col overflow-hidden" ref={timelineRef}>
{/* Timeline Header with Ruler */} {/* Timeline Header with Ruler */}
<div className="flex border-b bg-panel-accent sticky top-0 z-10"> <div className="flex border-b bg-panel-accent sticky top-0 z-10">
{/* Track Labels Header */} {/* Track Labels Header */}
@ -897,10 +897,13 @@ export function Timeline() {
</div> </div>
{/* Timeline Ruler */} {/* Timeline Ruler */}
<div className="flex-1 relative overflow-hidden"> <div
className="flex-1 relative overflow-hidden"
onWheel={handleWheel}
>
<ScrollArea className="w-full" ref={rulerScrollRef}> <ScrollArea className="w-full" ref={rulerScrollRef}>
<div <div
ref={timelineRef} ref={rulerRef}
className={`relative h-12 bg-muted/30 select-none ${ className={`relative h-12 bg-muted/30 select-none ${
isDraggingRuler ? "cursor-grabbing" : "cursor-grab" isDraggingRuler ? "cursor-grabbing" : "cursor-grab"
}`} }`}
@ -1024,7 +1027,10 @@ export function Timeline() {
)} )}
{/* Timeline Tracks Content */} {/* Timeline Tracks Content */}
<div className="flex-1 relative overflow-hidden"> <div
className="flex-1 relative overflow-hidden"
onWheel={handleWheel}
>
<ScrollArea className="w-full h-full" ref={tracksScrollRef}> <ScrollArea className="w-full h-full" ref={tracksScrollRef}>
<div <div
className="relative flex-1" className="relative flex-1"