mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
Maze Winther
49426f19cd
Add keyframe support for transform, opacity, and volume properties. Includes animation engine (interpolation, mutations, resolvers), timeline markers with selection/snapping, properties panel toggles, keyframe-aware renderer, and full undo/redo command support. Also refactor element command constructors to object params, extract timeline pixel math to pixel-utils.ts, and update cursor rules.
40 lines
832 B
TypeScript
40 lines
832 B
TypeScript
"use client";
|
|
|
|
import { timelineTimeToSnappedPixels } from "@/lib/timeline";
|
|
import { formatRulerLabel } from "@/lib/timeline/ruler-utils";
|
|
|
|
interface TimelineTickProps {
|
|
time: number;
|
|
zoomLevel: number;
|
|
fps: number;
|
|
showLabel: boolean;
|
|
}
|
|
|
|
export function TimelineTick({
|
|
time,
|
|
zoomLevel,
|
|
fps,
|
|
showLabel,
|
|
}: TimelineTickProps) {
|
|
const leftPosition = timelineTimeToSnappedPixels({ time, zoomLevel });
|
|
|
|
if (showLabel) {
|
|
const label = formatRulerLabel({ timeInSeconds: time, fps });
|
|
return (
|
|
<span
|
|
className="text-muted-foreground/85 absolute bottom-0 select-none text-[10px] leading-none"
|
|
style={{ left: `${leftPosition}px` }}
|
|
>
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="border-muted-foreground/25 absolute bottom-0.5 h-1.5 border-l"
|
|
style={{ left: `${leftPosition}px` }}
|
|
/>
|
|
);
|
|
}
|