feat: advance snapping

apps/web/src/components/editor/timeline-track.tsx

@@ -60,6 +60,53 @@ export function TimelineTrackContent({
     enablePlayheadSnapping: snappingEnabled,
   });
 
+  // Helper function for drop snapping that tries both edges
+  const getDropSnappedTime = (
+    dropTime: number,
+    elementDuration: number,
+    excludeElementId?: string
+  ) => {
+    if (!snappingEnabled) {
+      // Use frame snapping if project has FPS, otherwise use decimal snapping
+      const projectStore = useProjectStore.getState();
+      const projectFps = projectStore.activeProject?.fps || 30;
+      return snapTimeToFrame(dropTime, projectFps);
+    }
+
+    // Try snapping both start and end edges for drops
+    const startSnapResult = snapElementEdge(
+      dropTime,
+      elementDuration,
+      tracks,
+      currentTime,
+      zoomLevel,
+      excludeElementId,
+      true // snap to start edge
+    );
+
+    const endSnapResult = snapElementEdge(
+      dropTime,
+      elementDuration,
+      tracks,
+      currentTime,
+      zoomLevel,
+      excludeElementId,
+      false // snap to end edge
+    );
+
+    // Choose the snap result with the smaller distance (closer snap)
+    let bestSnapResult = startSnapResult;
+    if (
+      endSnapResult.snapPoint &&
+      (!startSnapResult.snapPoint ||
+        endSnapResult.snapDistance < startSnapResult.snapDistance)
+    ) {
+      bestSnapResult = endSnapResult;
+    }
+
+    return bestSnapResult.snappedTime;
+  };
+
   const timelineRef = useRef<HTMLDivElement>(null);
   const [isDropping, setIsDropping] = useState(false);
   const [dropPosition, setDropPosition] = useState<number | null>(null);
@@ -427,9 +474,10 @@ export function TimelineTrackContent({
           if (dragData.type === "text") {
             // Text elements have default duration of 5 seconds
             const newElementDuration = 5;
-            const projectStore = useProjectStore.getState();
+            const snappedTime = getDropSnappedTime(
-            const projectFps = projectStore.activeProject?.fps || 30;
+              dropTime,
-            const snappedTime = snapTimeToFrame(dropTime, projectFps);
+              newElementDuration
+            );
             const newElementEnd = snappedTime + newElementDuration;
 
             wouldOverlap = track.elements.some((existingElement) => {
@@ -448,9 +496,10 @@ export function TimelineTrackContent({
             );
             if (mediaItem) {
               const newElementDuration = mediaItem.duration || 5;
-              const projectStore = useProjectStore.getState();
+              const snappedTime = getDropSnappedTime(
-              const projectFps = projectStore.activeProject?.fps || 30;
+                dropTime,
-              const snappedTime = snapTimeToFrame(dropTime, projectFps);
+                newElementDuration
+              );
               const newElementEnd = snappedTime + newElementDuration;
 
               wouldOverlap = track.elements.some((existingElement) => {
@@ -490,9 +539,11 @@ export function TimelineTrackContent({
               movingElement.duration -
               movingElement.trimStart -
               movingElement.trimEnd;
-            const projectStore = useProjectStore.getState();
+            const snappedTime = getDropSnappedTime(
-            const projectFps = projectStore.activeProject?.fps || 30;
+              dropTime,
-            const snappedTime = snapTimeToFrame(dropTime, projectFps);
+              movingElementDuration,
+              elementId
+            );
             const movingElementEnd = snappedTime + movingElementDuration;
 
             wouldOverlap = track.elements.some((existingElement) => {
@@ -519,17 +570,15 @@ export function TimelineTrackContent({
     if (wouldOverlap) {
       e.dataTransfer.dropEffect = "none";
       setWouldOverlap(true);
-      const projectStore = useProjectStore.getState();
+      // Use default duration for position indicator
-      const projectFps = projectStore.activeProject?.fps || 30;
+      setDropPosition(getDropSnappedTime(dropTime, 5));
-      setDropPosition(snapTimeToFrame(dropTime, projectFps));
       return;
     }
 
     e.dataTransfer.dropEffect = hasTimelineElement ? "move" : "copy";
     setWouldOverlap(false);
-    const projectStore = useProjectStore.getState();
+    // Use default duration for position indicator
-    const projectFps = projectStore.activeProject?.fps || 30;
+    setDropPosition(getDropSnappedTime(dropTime, 5));
-    setDropPosition(snapTimeToFrame(dropTime, projectFps));
   };
 
   const handleTrackDragEnter = (e: React.DragEvent) => {
@@ -651,18 +700,20 @@ export function TimelineTrackContent({
           return;
         }
 
-        // Adjust position based on where user clicked on the element
-        const adjustedStartTime = snappedTime - clickOffsetTime;
-        const finalStartTime = Math.max(
-          0,
-          snapTimeToFrame(adjustedStartTime, projectFps)
-        );
-
         // Check for overlaps with existing elements (excluding the moving element itself)
         const movingElementDuration =
           movingElement.duration -
           movingElement.trimStart -
           movingElement.trimEnd;
+
+        // Adjust position based on where user clicked on the element
+        const adjustedStartTime = newStartTime - clickOffsetTime;
+        const snappedStartTime = getDropSnappedTime(
+          adjustedStartTime,
+          movingElementDuration,
+          elementId
+        );
+        const finalStartTime = Math.max(0, snappedStartTime);
         const movingElementEnd = finalStartTime + movingElementDuration;
 
         const hasOverlap = track.elements.some((existingElement) => {
@@ -748,7 +799,11 @@ export function TimelineTrackContent({
 
           // Check for overlaps with existing elements in target track
           const newElementDuration = 5; // Default text duration
-          const newElementEnd = snappedTime + newElementDuration;
+          const textSnappedTime = getDropSnappedTime(
+            newStartTime,
+            newElementDuration
+          );
+          const newElementEnd = textSnappedTime + newElementDuration;
 
           const hasOverlap = targetTrack.elements.some((existingElement) => {
             const existingStart = existingElement.startTime;
@@ -759,7 +814,9 @@ export function TimelineTrackContent({
                 existingElement.trimEnd);
 
             // Check if elements overlap
-            return snappedTime < existingEnd && newElementEnd > existingStart;
+            return (
+              textSnappedTime < existingEnd && newElementEnd > existingStart
+            );
           });
 
           if (hasOverlap) {
@@ -774,7 +831,7 @@ export function TimelineTrackContent({
             name: dragData.name || "Text",
             content: dragData.content || "Default Text",
             duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-            startTime: snappedTime,
+            startTime: textSnappedTime,
             trimStart: 0,
             trimEnd: 0,
             fontSize: 48,
@@ -894,7 +951,11 @@ export function TimelineTrackContent({
 
           // Check for overlaps with existing elements in target track
           const newElementDuration = mediaItem.duration || 5;
-          const newElementEnd = snappedTime + newElementDuration;
+          const mediaSnappedTime = getDropSnappedTime(
+            newStartTime,
+            newElementDuration
+          );
+          const newElementEnd = mediaSnappedTime + newElementDuration;
 
           const hasOverlap = targetTrack.elements.some((existingElement) => {
             const existingStart = existingElement.startTime;
@@ -905,7 +966,9 @@ export function TimelineTrackContent({
                 existingElement.trimEnd);
 
             // Check if elements overlap
-            return snappedTime < existingEnd && newElementEnd > existingStart;
+            return (
+              mediaSnappedTime < existingEnd && newElementEnd > existingStart
+            );
           });
 
           if (hasOverlap) {
@@ -920,7 +983,7 @@ export function TimelineTrackContent({
             mediaId: mediaItem.id,
             name: mediaItem.name,
             duration: mediaItem.duration || 5,
-            startTime: snappedTime,
+            startTime: mediaSnappedTime,
             trimStart: 0,
             trimEnd: 0,
           });