feat: add snapping settings and actions to timeline store

1 files changed, 53 insertions, 0 deletions

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<TimelineStore>((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<TimelineStore>((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 });
+    },
   };
 });