feat: expandable keyframe lanes in timeline

Made-with: Cursor

1 files changed, 25 insertions, 2 deletions

diff --git a/apps/web/src/components/editor/panels/timeline/track-layout.ts b/apps/web/src/components/editor/panels/timeline/track-layout.ts
index 89cc4d05..8f833a57 100644
--- a/apps/web/src/components/editor/panels/timeline/track-layout.ts
+++ b/apps/web/src/components/editor/panels/timeline/track-layout.ts
@@ -1,5 +1,6 @@
 import type { TrackType } from "@/lib/timeline";
 import {
+	KEYFRAME_LANE_HEIGHT_PX,
 	TIMELINE_TRACK_GAP_PX,
 	TIMELINE_TRACK_HEIGHTS_PX,
 } from "./layout";
@@ -8,28 +9,50 @@ export function getTrackHeight({ type }: { type: TrackType }): number {
 	return TIMELINE_TRACK_HEIGHTS_PX[type];
 }
 
+export function getExpandedTrackHeight({
+	type,
+	expandedLaneCount,
+}: {
+	type: TrackType;
+	expandedLaneCount: number;
+}): number {
+	return (
+		TIMELINE_TRACK_HEIGHTS_PX[type] +
+		expandedLaneCount * KEYFRAME_LANE_HEIGHT_PX
+	);
+}
+
 export function getCumulativeHeightBefore({
 	tracks,
 	trackIndex,
+	getExtraHeight,
 }: {
 	tracks: Array<{ type: TrackType }>;
 	trackIndex: number;
+	getExtraHeight?: (trackIndex: number) => number;
 }): number {
 	return tracks
 		.slice(0, trackIndex)
 		.reduce(
-			(sum, track) => sum + getTrackHeight({ type: track.type }) + TIMELINE_TRACK_GAP_PX,
+			(sum, track, i) =>
+				sum +
+				getTrackHeight({ type: track.type }) +
+				(getExtraHeight?.(i) ?? 0) +
+				TIMELINE_TRACK_GAP_PX,
 			0,
 		);
 }
 
 export function getTotalTracksHeight({
 	tracks,
+	getExtraHeight,
 }: {
 	tracks: Array<{ type: TrackType }>;
+	getExtraHeight?: (trackIndex: number) => number;
 }): number {
 	const tracksHeight = tracks.reduce(
-		(sum, track) => sum + getTrackHeight({ type: track.type }),
+		(sum, track, i) =>
+			sum + getTrackHeight({ type: track.type }) + (getExtraHeight?.(i) ?? 0),
 		0,
 	);
 	const gapsHeight = Math.max(0, tracks.length - 1) * TIMELINE_TRACK_GAP_PX;