quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement time snapping to 100ms intervals for improved sound placement accuracy

Browse Source
This commit is contained in:
JSC
2025-09-03 21:03:28 +02:00
parent d4b87aafe3
commit cd7af24831
2 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/sequencer/SequencerCanvas.tsx
View File

@@ -54,8 +54,18 @@ function PlacedSoundItem({ sound, zoom, trackId, onRemove }: PlacedSoundItemProp
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
} : undefined
// Helper function to snap time to 100ms intervals
const snapToGrid = (timeInSeconds: number): number => {
const snapIntervalMs = 100 // 100ms snap interval
const timeInMs = timeInSeconds * 1000
const snappedMs = Math.round(timeInMs / snapIntervalMs) * snapIntervalMs
return snappedMs / 1000 // Convert back to seconds
}
const width = (sound.duration / 1000) * zoom // Convert ms to seconds for zoom calculation
const left = (sound.startTime / 1000) * zoom // Convert ms to seconds for zoom calculation
// Ensure placed sounds are positioned at snapped locations
const snappedStartTime = snapToGrid(sound.startTime / 1000)
const left = snappedStartTime * zoom
const formatTime = (seconds: number): string => {
const mins = Math.floor(seconds / 60)
@@ -110,7 +120,6 @@ function PlacedSoundItem({ sound, zoom, trackId, onRemove }: PlacedSoundItemProp
}
function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem, dragOverInfo, onRemoveSound }: TrackRowProps) {
const totalWidth = (duration / 1000) * zoom // Convert ms to seconds for zoom calculation
const playheadPosition = (currentTime / 1000) * zoom // Convert ms to seconds for zoom calculation
const { isOver, setNodeRef: setDropRef } = useDroppable({
@@ -203,12 +212,14 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem,
))}
</div>
{/* Precise drag preview */}
{/* Precise drag preview (dragOverInfo.x is already snapped) */}
{draggedItem && dragOverInfo && dragOverInfo.trackId === track.id && (() => {
const soundDurationMs = draggedItem.type === 'sound'
? draggedItem.sound.duration // Already in ms
: draggedItem.duration // Already in ms
const soundDurationSeconds = soundDurationMs / 1000
// dragOverInfo.x is already snapped in the parent component
const startTimeSeconds = dragOverInfo.x / zoom
const endTimeSeconds = startTimeSeconds + soundDurationSeconds
const durationSeconds = duration / 1000