Improves sound placement and preview logic
Refines the sound placement logic in the sequencer to ensure sounds are placed correctly within track boundaries. It restricts sound placement to the track duration, preventing sounds from being placed out of bounds. Enhances the drag preview by visually indicating invalid placement positions with a red border and "Invalid" label. Also extracts duration and size formatting into separate utility functions for better code organization.
This commit is contained in:
JSC
@@ -119,85 +119,89 @@ export function SequencerPage() {
|
||||
startTime = Math.max(0, dragOverInfo.x / state.zoom)
|
||||
}
|
||||
|
||||
const newPlacedSound: PlacedSound = {
|
||||
id: `placed-${Date.now()}-${Math.random()}`,
|
||||
soundId: dragData.sound.id,
|
||||
name: dragData.sound.name || dragData.sound.filename,
|
||||
duration: dragData.sound.duration / 1000, // Convert from ms to seconds
|
||||
startTime,
|
||||
trackId: overData.trackId,
|
||||
}
|
||||
const soundDuration = dragData.sound.duration / 1000 // Convert from ms to seconds
|
||||
|
||||
// Restrict placement to within track duration
|
||||
const maxStartTime = Math.max(0, state.duration - soundDuration)
|
||||
startTime = Math.min(startTime, maxStartTime)
|
||||
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
tracks: prev.tracks.map(track =>
|
||||
track.id === overData.trackId
|
||||
? { ...track, sounds: [...track.sounds, newPlacedSound] }
|
||||
: track
|
||||
),
|
||||
}))
|
||||
// Only proceed if the sound can fit within the track
|
||||
if (startTime >= 0 && startTime + soundDuration <= state.duration) {
|
||||
const newPlacedSound: PlacedSound = {
|
||||
id: `placed-${Date.now()}-${Math.random()}`,
|
||||
soundId: dragData.sound.id,
|
||||
name: dragData.sound.name || dragData.sound.filename,
|
||||
duration: soundDuration,
|
||||
startTime,
|
||||
trackId: overData.trackId,
|
||||
}
|
||||
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
tracks: prev.tracks.map(track =>
|
||||
track.id === overData.trackId
|
||||
? { ...track, sounds: [...track.sounds, newPlacedSound] }
|
||||
: track
|
||||
),
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
// Handle moving placed sounds within tracks
|
||||
if (dragData?.type === 'placed-sound' && overData?.type === 'track') {
|
||||
console.log('Moving placed sound:', dragData, 'to track:', overData.trackId)
|
||||
|
||||
// Use precise drop position if available
|
||||
let startTime = dragData.startTime || 0
|
||||
if (dragOverInfo && dragOverInfo.trackId === overData.trackId) {
|
||||
startTime = Math.max(0, dragOverInfo.x / state.zoom)
|
||||
}
|
||||
|
||||
const sourceTrackId = dragData.trackId
|
||||
const targetTrackId = overData.trackId
|
||||
|
||||
console.log('Source track:', sourceTrackId, 'Target track:', targetTrackId, 'New start time:', startTime)
|
||||
// Restrict placement to within track duration
|
||||
const maxStartTime = Math.max(0, state.duration - dragData.duration)
|
||||
startTime = Math.min(startTime, maxStartTime)
|
||||
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
tracks: prev.tracks.map(track => {
|
||||
if (track.id === sourceTrackId && sourceTrackId === targetTrackId) {
|
||||
// Moving within the same track - just update position
|
||||
console.log('Moving within same track')
|
||||
const updatedSound: PlacedSound = {
|
||||
...dragData,
|
||||
startTime,
|
||||
trackId: targetTrackId,
|
||||
// Only proceed if the sound can fit within the track
|
||||
if (startTime >= 0 && startTime + dragData.duration <= state.duration) {
|
||||
const sourceTrackId = dragData.trackId
|
||||
const targetTrackId = overData.trackId
|
||||
|
||||
setState(prev => ({
|
||||
...prev,
|
||||
tracks: prev.tracks.map(track => {
|
||||
if (track.id === sourceTrackId && sourceTrackId === targetTrackId) {
|
||||
// Moving within the same track - just update position
|
||||
const updatedSound: PlacedSound = {
|
||||
...dragData,
|
||||
startTime,
|
||||
trackId: targetTrackId,
|
||||
}
|
||||
return {
|
||||
...track,
|
||||
sounds: track.sounds.map(s =>
|
||||
s.id === dragData.id ? updatedSound : s
|
||||
),
|
||||
}
|
||||
} else if (track.id === sourceTrackId) {
|
||||
// Remove from source track (different track move)
|
||||
return {
|
||||
...track,
|
||||
sounds: track.sounds.filter(s => s.id !== dragData.id),
|
||||
}
|
||||
} else if (track.id === targetTrackId) {
|
||||
// Add to target track (different track move)
|
||||
const updatedSound: PlacedSound = {
|
||||
...dragData,
|
||||
startTime,
|
||||
trackId: targetTrackId,
|
||||
}
|
||||
return {
|
||||
...track,
|
||||
sounds: [...track.sounds, updatedSound],
|
||||
}
|
||||
}
|
||||
return {
|
||||
...track,
|
||||
sounds: track.sounds.map(s =>
|
||||
s.id === dragData.id ? updatedSound : s
|
||||
),
|
||||
}
|
||||
} else if (track.id === sourceTrackId) {
|
||||
// Remove from source track (different track move)
|
||||
console.log('Removing sound from source track:', track.id, 'sounds before:', track.sounds.length)
|
||||
const filtered = track.sounds.filter(s => s.id !== dragData.id)
|
||||
console.log('Sounds after removal:', filtered.length)
|
||||
return {
|
||||
...track,
|
||||
sounds: filtered,
|
||||
}
|
||||
} else if (track.id === targetTrackId) {
|
||||
// Add to target track (different track move)
|
||||
console.log('Adding sound to target track:', track.id, 'sounds before:', track.sounds.length)
|
||||
const updatedSound: PlacedSound = {
|
||||
...dragData,
|
||||
startTime,
|
||||
trackId: targetTrackId,
|
||||
}
|
||||
console.log('Updated sound:', updatedSound)
|
||||
const newSounds = [...track.sounds, updatedSound]
|
||||
console.log('Sounds after addition:', newSounds.length)
|
||||
return {
|
||||
...track,
|
||||
sounds: newSounds,
|
||||
}
|
||||
}
|
||||
return track
|
||||
}),
|
||||
}))
|
||||
return track
|
||||
}),
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
// Clear state
|
||||
|
||||
Reference in New Issue
Block a user