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

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>