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

feat: add DragOverlay to SequencerPage for improved drag-and-drop feedback

Browse Source
This commit is contained in:
JSC
2025-09-03 16:57:55 +02:00
parent 7982a2eb6d
commit aa11ec379d
2 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/sequencer/SoundLibrary.tsx
View File

@@ -31,7 +31,6 @@ function DraggableSound({ sound }: DraggableSoundProps) {
attributes,
listeners,
setNodeRef,
transform,
isDragging,
} = useDraggable({
id: `sound-${sound.id}`,
@@ -41,9 +40,8 @@ function DraggableSound({ sound }: DraggableSoundProps) {
},
})
const style = transform ? {
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
} : undefined
// Don't apply transform to prevent layout shift - DragOverlay handles the visual feedback
const style = undefined
const formatDuration = (ms: number): string => {
const seconds = Math.floor(ms / 1000)
@@ -66,7 +64,7 @@ function DraggableSound({ sound }: DraggableSoundProps) {
className={`
group cursor-grab active:cursor-grabbing
p-3 border rounded-lg bg-card hover:bg-accent/50 transition-colors
${isDragging ? 'opacity-50 shadow-lg' : ''}
${isDragging ? 'opacity-30' : ''}
`}
title={`Drag to add "${sound.name || sound.filename}" to a track`}
>

26
src/pages/SequencerPage.tsx
View File

@@ -2,7 +2,7 @@ import { TrackControls } from '@/components/sequencer/TrackControls'
import { TimelineControls } from '@/components/sequencer/TimelineControls'
import { SoundLibrary } from '@/components/sequencer/SoundLibrary'
import { SequencerCanvas } from '@/components/sequencer/SequencerCanvas'
import { DndContext, type DragEndEvent, type DragStartEvent, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'
import { DndContext, DragOverlay, type DragEndEvent, type DragStartEvent, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'
import { useState, useRef, useCallback, useEffect } from 'react'
export interface Track {
@@ -350,6 +350,30 @@ export function SequencerPage() {
</div>
</div>
</div>
<DragOverlay>
{draggedItem?.type === 'sound' ? (
<div className="p-3 border rounded-lg bg-card shadow-lg opacity-90">
<div className="flex items-start gap-2">
<div className="flex-shrink-0 mt-0.5">
{draggedItem.sound.type === 'SDB' && <span className="text-xs font-bold text-blue-500">SDB</span>}
{draggedItem.sound.type === 'TTS' && <span className="text-xs font-bold text-green-500">TTS</span>}
{draggedItem.sound.type === 'EXT' && <span className="text-xs font-bold text-purple-500">EXT</span>}
</div>
<div className="flex-1 min-w-0">
<div className="font-medium text-sm truncate">
{draggedItem.sound.name || draggedItem.sound.filename}
</div>
</div>
</div>
</div>
) : draggedItem?.type === 'placed-sound' ? (
<div className="p-2 border rounded bg-primary/20 border-primary/40 shadow-lg opacity-90">
<div className="font-medium text-sm text-primary truncate">
{draggedItem.name}
</div>
</div>
) : null}
</DragOverlay>
</DndContext>
</div>
</div>