diff options
Diffstat (limited to 'apps/web/src/components/editor/snap-indicator.tsx')
| -rw-r--r-- | apps/web/src/components/editor/snap-indicator.tsx | 29 |
1 files changed, 27 insertions, 2 deletions
diff --git a/apps/web/src/components/editor/snap-indicator.tsx b/apps/web/src/components/editor/snap-indicator.tsx index 302a52bb..053d119e 100644 --- a/apps/web/src/components/editor/snap-indicator.tsx +++ b/apps/web/src/components/editor/snap-indicator.tsx @@ -3,6 +3,7 @@ import { SnapPoint } from "@/hooks/use-timeline-snapping"; import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; import type { TimelineTrack } from "@/types/timeline"; +import { useState, useEffect } from "react"; interface SnapIndicatorProps { snapPoint: SnapPoint | null; @@ -11,6 +12,7 @@ interface SnapIndicatorProps { tracks: TimelineTrack[]; timelineRef: React.RefObject<HTMLDivElement>; trackLabelsRef?: React.RefObject<HTMLDivElement>; + tracksScrollRef: React.RefObject<HTMLDivElement>; } export function SnapIndicator({ @@ -20,7 +22,29 @@ export function SnapIndicator({ tracks, timelineRef, trackLabelsRef, + tracksScrollRef, }: SnapIndicatorProps) { + const [scrollLeft, setScrollLeft] = useState(0); + + // Track scroll position to lock snap indicator to frame + useEffect(() => { + const tracksViewport = tracksScrollRef.current?.querySelector( + "[data-radix-scroll-area-viewport]" + ) as HTMLElement; + + if (!tracksViewport) return; + + const handleScroll = () => { + setScrollLeft(tracksViewport.scrollLeft); + }; + + // Set initial scroll position + setScrollLeft(tracksViewport.scrollLeft); + + tracksViewport.addEventListener("scroll", handleScroll); + return () => tracksViewport.removeEventListener("scroll", handleScroll); + }, [tracksScrollRef]); + if (!isVisible || !snapPoint) { return null; } @@ -34,9 +58,10 @@ export function SnapIndicator({ ? trackLabelsRef.current.offsetWidth : 0; - const leftPosition = - trackLabelsWidth + + // Calculate position locked to timeline content (accounting for scroll) + const timelinePosition = snapPoint.time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel; + const leftPosition = trackLabelsWidth + timelinePosition - scrollLeft; return ( <div |
