RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: init timeline zoom

This commit is contained in:
leimingsheng 2025-07-21 19:22:27 +08:00
parent d6724e2552
commit 768a1dbfbc
3 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/constants/timeline-constants.ts
View File

@ -75,7 +75,9 @@ export const TIMELINE_CONSTANTS = {
TRACK_HEIGHT: 60, // Default fallback
DEFAULT_TEXT_DURATION: 5,
DEFAULT_IMAGE_DURATION: 5,
ZOOM_LEVELS: [0.25, 0.5, 1, 1.5, 2, 3, 4],
ZOOM_LEVELS: [0.5, 1, 1.5, 2, 3, 4, 5],
MIN_ZOOM: 0.5,
MAX_ZOOM: 5,
} as const;
// FPS presets for project settings

10
apps/web/src/hooks/use-timeline-zoom.ts
View File

@ -13,6 +13,8 @@ interface UseTimelineZoomReturn {
}
const ZOOM_STORAGE_KEY = 'opencut-timeline-zoom';
const MIN_ZOOM = 0.5; // Minimum zoom to keep element borders visible
const MAX_ZOOM = 5;
export function useTimelineZoom({
containerRef,
@ -25,7 +27,7 @@ export function useTimelineZoom({
const stored = localStorage.getItem(ZOOM_STORAGE_KEY);
if (stored) {
const parsed = parseFloat(stored);
if (!isNaN(parsed) && parsed >= 0.1 && parsed <= 5) {
if (!isNaN(parsed) && parsed >= MIN_ZOOM && parsed <= MAX_ZOOM) {
return parsed;
}
}
@ -45,7 +47,7 @@ export function useTimelineZoom({
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
const delta = e.deltaY > 0 ? -0.15 : 0.15;
setZoomLevel((prev) => Math.max(0.1, Math.min(5, prev + delta)));
setZoomLevel((prev) => Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, prev + delta)));
}
// Otherwise, allow normal scrolling
}, []);
@ -61,11 +63,11 @@ export function useTimelineZoom({
case '=':
case '+':
e.preventDefault();
setZoomLevel((prev) => Math.min(5, prev + 0.2));
setZoomLevel((prev) => Math.min(MAX_ZOOM, prev + 0.2));
break;
case '-':
e.preventDefault();
setZoomLevel((prev) => Math.max(0.1, prev - 0.2));
setZoomLevel((prev) => Math.max(MIN_ZOOM, prev - 0.2));
break;
case '0':
e.preventDefault();

4
apps/web/src/stores/timeline-store.ts
View File

@ -1173,8 +1173,8 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
const requiredWidth = totalDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND;
const calculatedZoom = availableWidth / requiredWidth;
// Clamp between min and max zoom levels
return Math.max(0.1, Math.min(5, calculatedZoom));
// Clamp between min and max zoom levels (0.3 to 5)
return Math.max(0.5, Math.min(5, calculatedZoom));
},
redo: () => {