{/* The playhead line spanning full height */}
) {
- const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
+}: Omit<
+ TimelinePlayheadProps,
+ | "tracks"
+ | "trackLabelsRef"
+ | "timelineRef"
+ | "tracksScrollRef"
+ | "playheadRef"
+>) {
+ const { handleRulerMouseDown } = useTimelinePlayhead({
currentTime,
duration,
zoomLevel,
seek,
rulerRef,
rulerScrollRef,
- tracksScrollRef,
- playheadRef,
});
- return { handleRulerMouseDown, isDraggingRuler };
+ return { handleRulerMouseDown };
}
export { TimelinePlayhead as default };
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index e83b64b9..7b7455e0 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -15,8 +15,9 @@ import {
Video,
Music,
TypeIcon,
- Magnet,
Lock,
+ ZoomIn,
+ ZoomOut,
} from "lucide-react";
import {
Tooltip,
@@ -54,6 +55,9 @@ import {
getTotalTracksHeight,
TIMELINE_CONSTANTS,
} from "@/constants/timeline-constants";
+import { Slider } from "../ui/slider";
+import TimelineCanvasRuler from "./timeline-canvas/timeline-canvas-ruler";
+import TimelineCanvasRulerWrapper from "./timeline-canvas/timeline-canvas-ruler-wrapper";
export function Timeline() {
// Timeline shows all tracks (video, audio, effects) and their elements.
@@ -92,10 +96,13 @@ export function Timeline() {
const [isInTimeline, setIsInTimeline] = useState(false);
// Timeline zoom functionality
- const { zoomLevel, setZoomLevel, handleWheel } = useTimelineZoom({
- containerRef: timelineRef,
- isInTimeline,
- });
+ const {
+ zoomLevel,
+ zoomStep,
+ handleChangeZoomLevel,
+ handleChangeZoomStep,
+ handleWheel,
+ } = useTimelineZoom();
// Old marquee selection removed - using new SelectionBox component instead
@@ -108,7 +115,6 @@ export function Timeline() {
// Scroll synchronization and auto-scroll to playhead
const rulerScrollRef = useRef(null);
- const tracksScrollRef = useRef(null);
const trackLabelsRef = useRef(null);
const playheadRef = useRef(null);
const trackLabelsScrollRef = useRef(null);
@@ -125,8 +131,6 @@ export function Timeline() {
seek,
rulerRef,
rulerScrollRef,
- tracksScrollRef,
- playheadRef,
});
// Selection box functionality
@@ -196,14 +200,14 @@ export function Timeline() {
clearSelectedElements();
// Determine if we're clicking in ruler or tracks area
- const isRulerClick = (e.target as HTMLElement).closest(
- "[data-ruler-area]"
+ const isTracksAreaClick = (e.target as HTMLElement).closest(
+ "[data-tracks-area]"
);
let mouseX: number;
let scrollLeft = 0;
- if (isRulerClick) {
+ if (isTracksAreaClick) {
// Calculate based on ruler position
const rulerContent = rulerScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
@@ -213,14 +217,7 @@ export function Timeline() {
mouseX = e.clientX - rect.left;
scrollLeft = rulerContent.scrollLeft;
} else {
- // Calculate based on tracks content position
- const tracksContent = tracksScrollRef.current?.querySelector(
- "[data-radix-scroll-area-viewport]"
- ) as HTMLElement;
- if (!tracksContent) return;
- const rect = tracksContent.getBoundingClientRect();
- mouseX = e.clientX - rect.left;
- scrollLeft = tracksContent.scrollLeft;
+ return;
}
const rawTime = Math.max(
@@ -244,7 +241,6 @@ export function Timeline() {
zoomLevel,
seek,
rulerScrollRef,
- tracksScrollRef,
clearSelectedElements,
isSelecting,
justFinishedSelecting,
@@ -616,14 +612,11 @@ export function Timeline() {
const rulerViewport = rulerScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
- const tracksViewport = tracksScrollRef.current?.querySelector(
- "[data-radix-scroll-area-viewport]"
- ) as HTMLElement;
const trackLabelsViewport = trackLabelsScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
- if (!rulerViewport || !tracksViewport) return;
+ if (!rulerViewport) return;
// Horizontal scroll synchronization between ruler and tracks
const handleRulerScroll = () => {
@@ -631,7 +624,6 @@ export function Timeline() {
if (isUpdatingRef.current || now - lastRulerSync.current < 16) return;
lastRulerSync.current = now;
isUpdatingRef.current = true;
- tracksViewport.scrollLeft = rulerViewport.scrollLeft;
isUpdatingRef.current = false;
};
const handleTracksScroll = () => {
@@ -639,12 +631,10 @@ export function Timeline() {
if (isUpdatingRef.current || now - lastTracksSync.current < 16) return;
lastTracksSync.current = now;
isUpdatingRef.current = true;
- rulerViewport.scrollLeft = tracksViewport.scrollLeft;
isUpdatingRef.current = false;
};
rulerViewport.addEventListener("scroll", handleRulerScroll);
- tracksViewport.addEventListener("scroll", handleTracksScroll);
// Vertical scroll synchronization between track labels and tracks content
if (trackLabelsViewport) {
@@ -654,7 +644,6 @@ export function Timeline() {
return;
lastVerticalSync.current = now;
isUpdatingRef.current = true;
- tracksViewport.scrollTop = trackLabelsViewport.scrollTop;
isUpdatingRef.current = false;
};
const handleTracksVerticalScroll = () => {
@@ -663,30 +652,22 @@ export function Timeline() {
return;
lastVerticalSync.current = now;
isUpdatingRef.current = true;
- trackLabelsViewport.scrollTop = tracksViewport.scrollTop;
isUpdatingRef.current = false;
};
trackLabelsViewport.addEventListener("scroll", handleTrackLabelsScroll);
- tracksViewport.addEventListener("scroll", handleTracksVerticalScroll);
return () => {
rulerViewport.removeEventListener("scroll", handleRulerScroll);
- tracksViewport.removeEventListener("scroll", handleTracksScroll);
trackLabelsViewport.removeEventListener(
"scroll",
handleTrackLabelsScroll
);
- tracksViewport.removeEventListener(
- "scroll",
- handleTracksVerticalScroll
- );
};
}
return () => {
rulerViewport.removeEventListener("scroll", handleRulerScroll);
- tracksViewport.removeEventListener("scroll", handleTracksScroll);
};
}, []);
@@ -846,6 +827,39 @@ export function Timeline() {
Delete element (Delete)
+
+
+
+
+ Zoom Out
+
+ handleChangeZoomStep(value[0])}
+ />
+
+
+
+
+ Zoom In
+
@@ -875,7 +889,6 @@ export function Timeline() {
seek={seek}
rulerRef={rulerRef}
rulerScrollRef={rulerScrollRef}
- tracksScrollRef={tracksScrollRef}
trackLabelsRef={trackLabelsRef}
timelineRef={timelineRef}
playheadRef={playheadRef}
@@ -893,114 +906,38 @@ export function Timeline() {
/>
{/* Timeline Header with Ruler */}
- {/* Track Labels Header */}
-
- {/* Empty space */}
-
- .
-
-
+
- {/* Timeline Ruler */}
-
+
-
- {/* Time markers */}
- {(() => {
- // Calculate appropriate time interval based on zoom level
- const getTimeInterval = (zoom: number) => {
- const pixelsPerSecond =
- TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoom;
- if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
- if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
- if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
- if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
- if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
- if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
- return 30; // Every 30s when extremely zoomed out
- };
-
- const interval = getTimeInterval(zoomLevel);
- const markerCount = Math.ceil(duration / interval) + 1;
-
- return Array.from({ length: markerCount }, (_, i) => {
- const time = i * interval;
- if (time > duration) return null;
-
- const isMainMarker =
- time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
-
- return (
-
-
- {(() => {
- const formatTime = (seconds: number) => {
- const hours = Math.floor(seconds / 3600);
- const minutes = Math.floor((seconds % 3600) / 60);
- const secs = seconds % 60;
-
- if (hours > 0) {
- return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
- } else if (minutes > 0) {
- return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
- } else if (interval >= 1) {
- return `${Math.floor(secs)}s`;
- } else {
- return `${secs.toFixed(1)}s`;
- }
- };
- return formatTime(time);
- })()}
-
-
- );
- }).filter(Boolean);
- })()}
-
{/* Tracks Area */}
-
- {/* Track Labels */}
- {tracks.length > 0 && (
-
-
-
+
+
+ {/* Track Labels */}
+ {tracks.length > 0 && (
+
+
{tracks.map((track) => (
))}
-
-
- )}
+
+ )}
- {/* Timeline Tracks Content */}
-
-
-
+ {/* Timeline Tracks Content */}
+
-
+
);
diff --git a/apps/web/src/constants/timeline-constants.ts b/apps/web/src/constants/timeline-constants.ts
index 92045c5e..f012db7b 100644
--- a/apps/web/src/constants/timeline-constants.ts
+++ b/apps/web/src/constants/timeline-constants.ts
@@ -75,6 +75,11 @@ export const TIMELINE_CONSTANTS = {
TRACK_HEIGHT: 60, // Default fallback
DEFAULT_TEXT_DURATION: 5,
ZOOM_LEVELS: [0.25, 0.5, 1, 1.5, 2, 3, 4],
+ ZOOM_LEVEL_MIN: 0.1,
+ ZOOM_LEVEL_MAX: 10,
+ ZOOM_STEP_BASE: 0.15,
+ MAX_ZOOM_STEP: 66,
+ ZOOM_STEP: 1,
} as const;
// FPS presets for project settings
diff --git a/apps/web/src/hooks/use-disable-browser-zoom.ts b/apps/web/src/hooks/use-disable-browser-zoom.ts
new file mode 100644
index 00000000..215268ac
--- /dev/null
+++ b/apps/web/src/hooks/use-disable-browser-zoom.ts
@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+export const useDisableBrowserZoom = () => {
+ useEffect(() => {
+ const handleWheel = (e: WheelEvent) => {
+ if (e.ctrlKey) {
+ e.preventDefault();
+ }
+ };
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.ctrlKey) {
+ const key = e.key;
+ if (key === "+" || key === "-" || key === "0" || key === "=") {
+ e.preventDefault();
+ }
+ }
+ };
+
+ const handleGesture = (e: Event) => {
+ e.preventDefault();
+ };
+
+ window.addEventListener("wheel", handleWheel, { passive: false });
+ window.addEventListener("keydown", handleKeyDown, { passive: false });
+
+ window.addEventListener("gesturestart", handleGesture, {
+ passive: false,
+ });
+ window.addEventListener("gesturechange", handleGesture, {
+ passive: false,
+ });
+ window.addEventListener("gestureend", handleGesture, {
+ passive: false,
+ });
+
+ return () => {
+ window.removeEventListener("wheel", handleWheel);
+ window.removeEventListener("keydown", handleKeyDown);
+ window.removeEventListener("gesturestart", handleGesture);
+ window.removeEventListener("gesturechange", handleGesture);
+ window.removeEventListener("gestureend", handleGesture);
+ };
+ }, []);
+};
diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts
index 9a82c23f..8aee5b1f 100644
--- a/apps/web/src/hooks/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/use-timeline-playhead.ts
@@ -1,6 +1,6 @@
import { snapTimeToFrame } from "@/constants/timeline-constants";
import { useProjectStore } from "@/stores/project-store";
-import { useState, useEffect, useCallback } from "react";
+import { useRef, useState, useCallback } from "react";
interface UseTimelinePlayheadProps {
currentTime: number;
@@ -9,8 +9,6 @@ interface UseTimelinePlayheadProps {
seek: (time: number) => void;
rulerRef: React.RefObject
;
rulerScrollRef: React.RefObject;
- tracksScrollRef: React.RefObject;
- playheadRef?: React.RefObject;
}
export function useTimelinePlayhead({
@@ -20,138 +18,72 @@ export function useTimelinePlayhead({
seek,
rulerRef,
rulerScrollRef,
- tracksScrollRef,
- playheadRef,
}: UseTimelinePlayheadProps) {
- // Playhead scrubbing state
- const [isScrubbing, setIsScrubbing] = useState(false);
- const [scrubTime, setScrubTime] = useState(null);
+ const { activeProject } = useProjectStore();
- // Ruler drag detection state
- const [isDraggingRuler, setIsDraggingRuler] = useState(false);
- const [hasDraggedRuler, setHasDraggedRuler] = useState(false);
+ const isScrubbingRef = useRef(false);
+ const scrubTimeRef = useRef(null);
+ const [_, forceRerender] = useState(0);
const playheadPosition =
- isScrubbing && scrubTime !== null ? scrubTime : currentTime;
+ isScrubbingRef.current && scrubTimeRef.current !== null
+ ? scrubTimeRef.current
+ : currentTime;
- // --- Playhead Scrubbing Handlers ---
- const handlePlayheadMouseDown = useCallback(
- (e: React.MouseEvent) => {
- e.preventDefault();
- e.stopPropagation(); // Prevent ruler drag from triggering
- setIsScrubbing(true);
- handleScrub(e);
- },
- [duration, zoomLevel]
- );
-
- // Ruler mouse down handler
- const handleRulerMouseDown = useCallback(
- (e: React.MouseEvent) => {
- // Only handle left mouse button
- if (e.button !== 0) return;
-
- // Don't interfere if clicking on the playhead itself
- if (playheadRef?.current?.contains(e.target as Node)) return;
-
- e.preventDefault();
- setIsDraggingRuler(true);
- setHasDraggedRuler(false);
-
- // Start scrubbing immediately
- setIsScrubbing(true);
- handleScrub(e);
- },
- [duration, zoomLevel]
- );
-
- const handleScrub = useCallback(
+ const getTimeFromMouse = useCallback(
(e: MouseEvent | React.MouseEvent) => {
const ruler = rulerRef.current;
- if (!ruler) return;
+ const scrollArea = rulerScrollRef.current?.querySelector(
+ "[data-radix-scroll-area-viewport]"
+ ) as HTMLElement;
+
+ if (!ruler || !scrollArea) return 0;
+
const rect = ruler.getBoundingClientRect();
- const x = e.clientX - rect.left;
- const rawTime = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
- // Use frame snapping for playhead scrubbing
- const projectStore = useProjectStore.getState();
- const projectFps = projectStore.activeProject?.fps || 30;
- const time = snapTimeToFrame(rawTime, projectFps);
- setScrubTime(time);
- seek(time); // update video preview in real time
+ const scrollLeft = scrollArea.scrollLeft;
+ const x = e.clientX - rect.left + scrollLeft;
+
+ const pixelsPerSecond = 50 * zoomLevel;
+ const rawTime = Math.max(0, Math.min(duration, x / pixelsPerSecond));
+ const time = snapTimeToFrame(rawTime, activeProject?.fps || 30);
+ return time;
},
- [duration, zoomLevel, seek, rulerRef]
+ [rulerRef, rulerScrollRef, duration, zoomLevel, activeProject?.fps]
);
- // Mouse move/up event handlers
- useEffect(() => {
- if (!isScrubbing) return;
- const onMouseMove = (e: MouseEvent) => {
- handleScrub(e);
- // Mark that we've dragged if ruler drag is active
- if (isDraggingRuler) {
- setHasDraggedRuler(true);
- }
- };
- const onMouseUp = (e: MouseEvent) => {
- setIsScrubbing(false);
- if (scrubTime !== null) seek(scrubTime); // finalize seek
- setScrubTime(null);
+ const handleRulerMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ const time = getTimeFromMouse(e);
+ if (time === undefined) return;
- // Handle ruler click vs drag
- if (isDraggingRuler) {
- setIsDraggingRuler(false);
- // If we didn't drag, treat it as a click-to-seek
- if (!hasDraggedRuler) {
- handleScrub(e);
+ isScrubbingRef.current = true;
+ scrubTimeRef.current = time;
+ seek(time);
+
+ const onMouseMove = (e: MouseEvent) => {
+ const t = getTimeFromMouse(e);
+ if (t !== scrubTimeRef.current) {
+ scrubTimeRef.current = t;
+ seek(t);
}
- setHasDraggedRuler(false);
- }
- };
- window.addEventListener("mousemove", onMouseMove);
- window.addEventListener("mouseup", onMouseUp);
- return () => {
- window.removeEventListener("mousemove", onMouseMove);
- window.removeEventListener("mouseup", onMouseUp);
- };
- }, [
- isScrubbing,
- scrubTime,
- seek,
- handleScrub,
- isDraggingRuler,
- hasDraggedRuler,
- ]);
+ };
- // --- Playhead auto-scroll effect ---
- useEffect(() => {
- const rulerViewport = rulerScrollRef.current?.querySelector(
- "[data-radix-scroll-area-viewport]"
- ) as HTMLElement;
- const tracksViewport = tracksScrollRef.current?.querySelector(
- "[data-radix-scroll-area-viewport]"
- ) as HTMLElement;
- if (!rulerViewport || !tracksViewport) return;
- const playheadPx = playheadPosition * 50 * zoomLevel; // TIMELINE_CONSTANTS.PIXELS_PER_SECOND = 50
- const viewportWidth = rulerViewport.clientWidth;
- const scrollMin = 0;
- const scrollMax = rulerViewport.scrollWidth - viewportWidth;
- // Center the playhead if it's not visible (100px buffer)
- const desiredScroll = Math.max(
- scrollMin,
- Math.min(scrollMax, playheadPx - viewportWidth / 2)
- );
- if (
- playheadPx < rulerViewport.scrollLeft + 100 ||
- playheadPx > rulerViewport.scrollLeft + viewportWidth - 100
- ) {
- rulerViewport.scrollLeft = tracksViewport.scrollLeft = desiredScroll;
- }
- }, [playheadPosition, duration, zoomLevel, rulerScrollRef, tracksScrollRef]);
+ const onMouseUp = () => {
+ isScrubbingRef.current = false;
+ window.removeEventListener("mousemove", onMouseMove);
+ window.removeEventListener("mouseup", onMouseUp);
+ forceRerender((v) => v + 1);
+ };
+
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ },
+ [getTimeFromMouse, seek]
+ );
return {
playheadPosition,
- handlePlayheadMouseDown,
handleRulerMouseDown,
- isDraggingRuler,
};
}
diff --git a/apps/web/src/hooks/use-timeline-zoom.ts b/apps/web/src/hooks/use-timeline-zoom.ts
index ce32c9f0..16d20d7e 100644
--- a/apps/web/src/hooks/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/use-timeline-zoom.ts
@@ -1,4 +1,5 @@
-import { useState, useCallback, useEffect, RefObject } from "react";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { useState, useCallback, RefObject, useMemo } from "react";
interface UseTimelineZoomProps {
containerRef: RefObject;
@@ -7,48 +8,63 @@ interface UseTimelineZoomProps {
interface UseTimelineZoomReturn {
zoomLevel: number;
+ zoomStep: number;
setZoomLevel: (zoomLevel: number | ((prev: number) => number)) => void;
+ handleChangeZoomStep: (zoomStep: number) => void;
+ handleChangeZoomLevel: (zoomStep: number) => void;
handleWheel: (e: React.WheelEvent) => void;
}
-export function useTimelineZoom({
- containerRef,
- isInTimeline = false,
-}: UseTimelineZoomProps): UseTimelineZoomReturn {
+export function useTimelineZoom(): UseTimelineZoomReturn {
const [zoomLevel, setZoomLevel] = useState(1);
- const handleWheel = useCallback((e: React.WheelEvent) => {
- // Only zoom if user is using pinch gesture (ctrlKey or metaKey is true)
- if (e.ctrlKey || e.metaKey) {
- e.preventDefault();
- const delta = e.deltaY > 0 ? -0.15 : 0.15;
- setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));
- }
- // Otherwise, allow normal scrolling
+ const zoomStep = useMemo(
+ () =>
+ Math.max(1, Math.round(zoomLevel / TIMELINE_CONSTANTS.ZOOM_STEP_BASE)),
+ [zoomLevel]
+ );
+
+ const handleChangeZoomStep = useCallback((newStep: number) => {
+ setZoomLevel(
+ Math.max(
+ TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,
+ newStep * TIMELINE_CONSTANTS.ZOOM_STEP_BASE
+ )
+ );
}, []);
- // Prevent browser zooming in/out when in timeline
- useEffect(() => {
- const preventZoom = (e: WheelEvent) => {
- if (
- isInTimeline &&
- (e.ctrlKey || e.metaKey) &&
- containerRef.current?.contains(e.target as Node)
- ) {
- e.preventDefault();
- }
- };
+ const handleChangeZoomLevel = useCallback((newLevel: number) => {
+ setZoomLevel(
+ Math.max(
+ TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,
+ Math.min(TIMELINE_CONSTANTS.ZOOM_LEVEL_MAX, newLevel)
+ )
+ );
+ }, []);
- document.addEventListener("wheel", preventZoom, { passive: false });
-
- return () => {
- document.removeEventListener("wheel", preventZoom);
- };
- }, [isInTimeline, containerRef]);
+ // Mouse wheel zoom, ctrl/meta gesture
+ const handleWheel = useCallback((e: React.WheelEvent) => {
+ if (e.ctrlKey || e.metaKey) {
+ e.preventDefault?.();
+ const delta =
+ e.deltaY > 0
+ ? -TIMELINE_CONSTANTS.ZOOM_STEP_BASE
+ : TIMELINE_CONSTANTS.ZOOM_STEP_BASE;
+ setZoomLevel((prev) =>
+ Math.max(
+ TIMELINE_CONSTANTS.ZOOM_LEVEL_MIN,
+ Math.min(TIMELINE_CONSTANTS.ZOOM_LEVEL_MAX, prev + delta)
+ )
+ );
+ }
+ }, []);
return {
zoomLevel,
+ zoomStep,
setZoomLevel,
+ handleChangeZoomStep,
+ handleChangeZoomLevel,
handleWheel,
};
}
diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts
index 17dbb5d1..146205c4 100644
--- a/apps/web/src/types/timeline.ts
+++ b/apps/web/src/types/timeline.ts
@@ -1,5 +1,6 @@
import { MediaType } from "@/stores/media-store";
import { generateUUID } from "@/lib/utils";
+import { ReactNode } from "react";
export type TrackType = "media" | "text" | "audio";
@@ -155,3 +156,22 @@ export function validateElementTrackCompatibility(
return { isValid: true };
}
+
+export interface TimelineTick {
+ left: number;
+ label?: string;
+ isMajor?: boolean;
+}
+
+export interface TimelineCanvasRulerWrapperProps {
+ children: ReactNode;
+ onMouseDown?: (e: React.MouseEvent) => void;
+ className?: string;
+}
+
+export interface TimelineCanvasRulerProps {
+ zoomLevel: number;
+ duration: number;
+ width: number;
+ height?: number;
+}