diff options
| -rw-r--r-- | apps/web/src/constants/timeline-constants.ts | 4 | ||||
| -rw-r--r-- | apps/web/src/hooks/use-timeline-zoom.ts | 10 | ||||
| -rw-r--r-- | apps/web/src/stores/timeline-store.ts | 4 |
3 files changed, 11 insertions, 7 deletions
diff --git a/apps/web/src/constants/timeline-constants.ts b/apps/web/src/constants/timeline-constants.ts index 8c76a2e8..b0ace148 100644 --- a/apps/web/src/constants/timeline-constants.ts +++ b/apps/web/src/constants/timeline-constants.ts @@ -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 diff --git a/apps/web/src/hooks/use-timeline-zoom.ts b/apps/web/src/hooks/use-timeline-zoom.ts index 8d41d917..eca9d44d 100644 --- a/apps/web/src/hooks/use-timeline-zoom.ts +++ b/apps/web/src/hooks/use-timeline-zoom.ts @@ -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();
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts index 00bbc743..89a81942 100644 --- a/apps/web/src/stores/timeline-store.ts +++ b/apps/web/src/stores/timeline-store.ts @@ -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: () => { |