diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts index 37b45b4a..b45f5507 100644 --- a/apps/web/src/stores/timeline-store.ts +++ b/apps/web/src/stores/timeline-store.ts @@ -42,6 +42,22 @@ interface TimelineStore { // Manual method if you need to force recomputation getSortedTracks: () => TimelineTrack[]; + // Snapping settings + snappingEnabled: boolean; + gridSnappingEnabled: boolean; + elementSnappingEnabled: boolean; + playheadSnappingEnabled: boolean; + snapThreshold: number; + gridInterval: number; + + // Snapping actions + toggleSnapping: () => void; + toggleGridSnapping: () => void; + toggleElementSnapping: () => void; + togglePlayheadSnapping: () => void; + setSnapThreshold: (threshold: number) => void; + setGridInterval: (interval: number) => void; + // Multi-selection selectedElements: { trackId: string; elementId: string }[]; selectElement: (trackId: string, elementId: string, multi?: boolean) => void; @@ -203,6 +219,14 @@ export const useTimelineStore = create((set, get) => { redoStack: [], selectedElements: [], + // Snapping settings defaults + snappingEnabled: true, + gridSnappingEnabled: true, + elementSnappingEnabled: true, + playheadSnappingEnabled: true, + snapThreshold: 10, // pixels + gridInterval: 1, // seconds + getSortedTracks: () => { const { _tracks } = get(); const tracksWithMain = ensureMainTrack(_tracks); @@ -949,5 +973,34 @@ export const useTimelineStore = create((set, get) => { updateTracks(defaultTracks); set({ history: [], redoStack: [], selectedElements: [] }); }, + + // Snapping actions + toggleSnapping: () => { + set((state) => ({ snappingEnabled: !state.snappingEnabled })); + }, + + toggleGridSnapping: () => { + set((state) => ({ gridSnappingEnabled: !state.gridSnappingEnabled })); + }, + + toggleElementSnapping: () => { + set((state) => ({ + elementSnappingEnabled: !state.elementSnappingEnabled, + })); + }, + + togglePlayheadSnapping: () => { + set((state) => ({ + playheadSnappingEnabled: !state.playheadSnappingEnabled, + })); + }, + + setSnapThreshold: (threshold) => { + set({ snapThreshold: threshold }); + }, + + setGridInterval: (interval) => { + set({ gridInterval: interval }); + }, }; });