feat: enhance SequencerPage and SequencerCanvas with drag-and-drop functionality for sound placement and improved track management

src/pages/SequencerPage.tsx

@@ -1,12 +1,13 @@
-import { AppLayout } from '@/components/AppLayout'
-import { SequencerCanvas } from '@/components/sequencer/SequencerCanvas'
-import { SoundLibrary } from '@/components/sequencer/SoundLibrary'
-import { TimelineControls } from '@/components/sequencer/TimelineControls'
-import { TrackControls } from '@/components/sequencer/TrackControls'
 import { Button } from '@/components/ui/button'
-import { DndContext, type DragEndEvent, DragOverlay, type DragStartEvent } from '@dnd-kit/core'
+import { Input } from '@/components/ui/input'
+import { Slider } from '@/components/ui/slider'
+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, DragEndEvent, DragStartEvent, DragOverEvent, PointerSensor, useSensors, useSensor } from '@dnd-kit/core'
 import { Play, Square, RotateCcw } from 'lucide-react'
-import { useState, useCallback, useRef } from 'react'
+import { useState, useRef, useCallback, useEffect } from 'react'
 
 export interface Track {
   id: string
@@ -18,19 +19,17 @@ export interface PlacedSound {
   id: string
   soundId: number
   name: string
-  duration: number
-  startTime: number
+  duration: number // in seconds
+  startTime: number // in seconds
   trackId: string
 }
 
-export interface SequencerState {
+interface SequencerState {
   tracks: Track[]
-  duration: number // in seconds
-  zoom: number // pixels per second
-  isPlaying: boolean
+  duration: number
+  zoom: number
   currentTime: number
-  selectedTrack?: string
-  selectedSound?: string
+  isPlaying: boolean
 }
 
 const INITIAL_DURATION = 30 // 30 seconds
@@ -39,53 +38,90 @@ const MIN_ZOOM = 10
 const MAX_ZOOM = 200
 
 export function SequencerPage() {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  )
+
   const [state, setState] = useState<SequencerState>({
     tracks: [
-      { id: '1', name: 'Track 1', sounds: [] },
-      { id: '2', name: 'Track 2', sounds: [] },
+      {
+        id: 'track-1',
+        name: 'Track 1',
+        sounds: [],
+      },
     ],
     duration: INITIAL_DURATION,
     zoom: INITIAL_ZOOM,
-    isPlaying: false,
     currentTime: 0,
+    isPlaying: false,
   })
 
-  const [activeId, setActiveId] = useState<string | null>(null)
-  const [activeDragData, setActiveDragData] = useState<Record<string, any> | null>(null)
+  const [draggedItem, setDraggedItem] = useState<any>(null)
+  const [dragOverInfo, setDragOverInfo] = useState<{trackId: string, x: number} | null>(null)
+  const [currentMousePos, setCurrentMousePos] = useState<{x: number, y: number} | null>(null)
   
-  // Refs for scroll synchronization
-  const trackControlsScrollRef = useRef<HTMLDivElement>(null)
-  const sequencerCanvasScrollRef = useRef<HTMLDivElement>(null)
-  
-  // Track last scroll positions to detect which dimension changed
-  const lastScrollTopRef = useRef<{ trackControls: number; sequencerCanvas: number }>({
-    trackControls: 0,
-    sequencerCanvas: 0
-  })
+  const trackControlsRef = useRef<HTMLDivElement>(null)
+  const sequencerCanvasRef = useRef<HTMLDivElement>(null)
 
   const handleDragStart = useCallback((event: DragStartEvent) => {
-    setActiveId(event.active.id as string)
-    setActiveDragData(event.active.data.current || null)
+    setDraggedItem(event.active.data.current)
+    
+    // Start tracking mouse position globally
+    const handleMouseMove = (e: MouseEvent) => {
+      setCurrentMousePos({ x: e.clientX, y: e.clientY })
+    }
+    
+    document.addEventListener('mousemove', handleMouseMove)
+    
+    // Store cleanup function
+    ;(window as any).dragMouseCleanup = () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+    }
   }, [])
 
+  // Update drag over info based on current mouse position and over target
+  useEffect(() => {
+    if (draggedItem && currentMousePos && (draggedItem.type === 'sound' || draggedItem.type === 'placed-sound')) {
+      // Find which track the mouse is currently over
+      for (const track of state.tracks) {
+        const trackElement = document.getElementById(`track-${track.id}`)
+        if (trackElement) {
+          const rect = trackElement.getBoundingClientRect()
+          if (
+            currentMousePos.x >= rect.left &&
+            currentMousePos.x <= rect.right &&
+            currentMousePos.y >= rect.top &&
+            currentMousePos.y <= rect.bottom
+          ) {
+            const x = currentMousePos.x - rect.left
+            setDragOverInfo({ trackId: track.id, x: Math.max(0, x) })
+            return
+          }
+        }
+      }
+      // Mouse is not over any track
+      setDragOverInfo(null)
+    } else {
+      setDragOverInfo(null)
+    }
+  }, [draggedItem, currentMousePos, state.tracks])
+
   const handleDragEnd = useCallback((event: DragEndEvent) => {
     const { active, over } = event
-
-    if (!over || !active.data.current) {
-      setActiveId(null)
-      setActiveDragData(null)
-      return
-    }
-
     const dragData = active.data.current
-    const overData = over.data.current
+    const overData = over?.data.current
 
-    // Handle dropping a sound from the library onto a track
-    if (dragData.type === 'sound' && overData?.type === 'track') {
-      const trackId = overData.trackId
-      // For now, place sounds at time 0. In a real implementation,
-      // you'd calculate the drop position based on mouse coordinates
-      const startTime = 0
+    // Handle sound drop from library to track
+    if (dragData?.type === 'sound' && overData?.type === 'track') {
+      // Use precise drop position if available
+      let startTime = 0
+      if (dragOverInfo && dragOverInfo.trackId === overData.trackId) {
+        startTime = Math.max(0, dragOverInfo.x / state.zoom)
+      }
 
       const newPlacedSound: PlacedSound = {
         id: `placed-${Date.now()}-${Math.random()}`,
@@ -93,243 +129,231 @@ export function SequencerPage() {
         name: dragData.sound.name || dragData.sound.filename,
         duration: dragData.sound.duration / 1000, // Convert from ms to seconds
         startTime,
-        trackId,
+        trackId: overData.trackId,
       }
 
       setState(prev => ({
         ...prev,
         tracks: prev.tracks.map(track =>
-          track.id === trackId
+          track.id === overData.trackId
             ? { ...track, sounds: [...track.sounds, newPlacedSound] }
             : track
         ),
       }))
     }
 
-    // Handle moving a placed sound within tracks
-    if (dragData.type === 'placed-sound' && overData?.type === '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
-      // Keep the original start time for now when moving between tracks
-      const startTime = dragData.startTime || 0
+      
+      console.log('Source track:', sourceTrackId, 'Target track:', targetTrackId, 'New start time:', startTime)
 
       setState(prev => ({
         ...prev,
         tracks: prev.tracks.map(track => {
-          // Remove from source track
-          if (track.id === sourceTrackId) {
-            return {
-              ...track,
-              sounds: track.sounds.filter(s => s.id !== dragData.id),
-            }
-          }
-          // Add to target track
-          if (track.id === targetTrackId) {
+          if (track.id === sourceTrackId && sourceTrackId === targetTrackId) {
+            // Moving within the same track - just update position
+            console.log('Moving within same track')
             const updatedSound: PlacedSound = {
-              id: dragData.id,
-              soundId: dragData.soundId,
-              name: dragData.name,
-              duration: dragData.duration,
+              ...dragData,
               startTime,
               trackId: targetTrackId,
             }
             return {
               ...track,
-              sounds: [...track.sounds, updatedSound],
+              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
         }),
       }))
     }
+    
+    // Clear state
+    setDraggedItem(null)
+    setDragOverInfo(null)
+    setCurrentMousePos(null)
+    
+    // Clean up mouse tracking
+    if ((window as any).dragMouseCleanup) {
+      (window as any).dragMouseCleanup()
+      delete (window as any).dragMouseCleanup
+    }
+  }, [dragOverInfo, state.zoom])
 
-    setActiveId(null)
-    setActiveDragData(null)
-  }, [state.zoom])
-
-  const addTrack = useCallback(() => {
-    const newTrackId = `${Date.now()}`
+  const handleAddTrack = () => {
+    const newTrackNumber = state.tracks.length + 1
     const newTrack: Track = {
-      id: newTrackId,
-      name: `Track ${state.tracks.length + 1}`,
+      id: `track-${Date.now()}`,
+      name: `Track ${newTrackNumber}`,
       sounds: [],
     }
-    setState(prev => ({
-      ...prev,
-      tracks: [...prev.tracks, newTrack],
-    }))
-  }, [state.tracks.length])
+    setState(prev => ({ ...prev, tracks: [...prev.tracks, newTrack] }))
+  }
 
-  const removeTrack = useCallback((trackId: string) => {
+  const handleRemoveTrack = (trackId: string) => {
     setState(prev => ({
       ...prev,
       tracks: prev.tracks.filter(track => track.id !== trackId),
     }))
-  }, [])
+  }
 
-  const updateTrackName = useCallback((trackId: string, name: string) => {
+  const handleUpdateTrackName = (trackId: string, name: string) => {
     setState(prev => ({
       ...prev,
       tracks: prev.tracks.map(track =>
         track.id === trackId ? { ...track, name } : track
       ),
     }))
-  }, [])
+  }
 
-  const updateDuration = useCallback((duration: number) => {
-    setState(prev => ({ ...prev, duration }))
-  }, [])
-
-  const updateZoom = useCallback((zoom: number) => {
-    const clampedZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom))
-    setState(prev => ({ ...prev, zoom: clampedZoom }))
-  }, [])
-
-  const togglePlayback = useCallback(() => {
+  const handlePlay = () => {
     setState(prev => ({ ...prev, isPlaying: !prev.isPlaying }))
-  }, [])
+  }
 
-  const resetSequencer = useCallback(() => {
-    setState(prev => ({
-      ...prev,
-      tracks: prev.tracks.map(track => ({ ...track, sounds: [] })),
-      isPlaying: false,
-      currentTime: 0,
-    }))
-  }, [])
+  const handleStop = () => {
+    setState(prev => ({ ...prev, isPlaying: false, currentTime: 0 }))
+  }
 
-  // Scroll synchronization handlers - only sync vertical scrolling
-  const handleTrackControlsScroll = useCallback(() => {
-    if (trackControlsScrollRef.current && sequencerCanvasScrollRef.current) {
-      const currentScrollTop = trackControlsScrollRef.current.scrollTop
-      // Only sync if vertical scroll actually changed
-      if (currentScrollTop !== lastScrollTopRef.current.trackControls) {
-        sequencerCanvasScrollRef.current.scrollTop = currentScrollTop
-        lastScrollTopRef.current.trackControls = currentScrollTop
-        lastScrollTopRef.current.sequencerCanvas = currentScrollTop
+  const handleReset = () => {
+    setState(prev => ({ ...prev, currentTime: 0 }))
+  }
+
+  const handleZoomChange = (value: number) => {
+    setState(prev => ({ ...prev, zoom: value }))
+  }
+
+  const handleDurationChange = (duration: number) => {
+    setState(prev => ({ ...prev, duration }))
+  }
+
+  const handleVerticalScroll = useCallback(() => {
+    if (trackControlsRef.current && sequencerCanvasRef.current) {
+      const canvasScrollTop = sequencerCanvasRef.current.scrollTop
+      if (Math.abs(trackControlsRef.current.scrollTop - canvasScrollTop) > 1) {
+        trackControlsRef.current.scrollTop = canvasScrollTop
       }
     }
   }, [])
 
-  const handleSequencerCanvasScroll = useCallback(() => {
-    if (sequencerCanvasScrollRef.current && trackControlsScrollRef.current) {
-      const currentScrollTop = sequencerCanvasScrollRef.current.scrollTop
-      // Only sync if vertical scroll actually changed
-      if (currentScrollTop !== lastScrollTopRef.current.sequencerCanvas) {
-        trackControlsScrollRef.current.scrollTop = currentScrollTop
-        lastScrollTopRef.current.sequencerCanvas = currentScrollTop
-        lastScrollTopRef.current.trackControls = currentScrollTop
-      }
+  // Simple playhead animation
+  useEffect(() => {
+    if (state.isPlaying) {
+      const interval = setInterval(() => {
+        setState(prev => {
+          const newTime = prev.currentTime + 0.1
+          if (newTime >= prev.duration) {
+            return { ...prev, currentTime: prev.duration, isPlaying: false }
+          }
+          return { ...prev, currentTime: newTime }
+        })
+      }, 100)
+      return () => clearInterval(interval)
     }
-  }, [])
+  }, [state.isPlaying, state.duration])
 
   return (
-    <AppLayout
-      breadcrumb={{
-        items: [{ label: 'Dashboard', href: '/' }, { label: 'Sequencer' }],
-      }}
-    >
-      <div className="flex-1 rounded-xl bg-muted/50 p-4 h-full">
-        <div className="flex items-center justify-between mb-6">
-          <div>
-            <h1 className="text-2xl font-bold">Sequencer</h1>
-            <p className="text-muted-foreground">
-              Create sequences by dragging sounds onto tracks
-            </p>
-          </div>
-          <div className="flex gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={togglePlayback}
-              className="w-20"
-            >
-              {state.isPlaying ? (
-                <>
-                  <Square className="h-4 w-4 mr-2" />
-                  Stop
-                </>
-              ) : (
-                <>
-                  <Play className="h-4 w-4 mr-2" />
-                  Play
-                </>
-              )}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={resetSequencer}
-            >
-              <RotateCcw className="h-4 w-4 mr-2" />
-              Reset
-            </Button>
-          </div>
-        </div>
+    <div className="h-screen flex flex-col bg-background">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b">
+        <h1 className="text-2xl font-bold">Sequencer</h1>
+      </div>
 
-        <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-          <div className="grid grid-cols-12 gap-4 h-[calc(100vh-200px)]">
-            {/* Sound Library Panel */}
-            <div className="col-span-3 bg-card rounded-lg border p-4 overflow-hidden">
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden">
+        <DndContext
+          sensors={sensors}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          {/* Left Sidebar - Sound Library */}
+          <div className="w-80 border-r bg-muted/30 flex flex-col">
+            <div className="p-4 h-full">
               <SoundLibrary />
             </div>
+          </div>
 
-            {/* Main Sequencer Area */}
-            <div className="col-span-9 bg-card rounded-lg border overflow-hidden flex flex-col">
-              {/* Timeline Controls */}
-              <div className="border-b p-4">
-                <TimelineControls
-                  duration={state.duration}
-                  zoom={state.zoom}
-                  onDurationChange={updateDuration}
-                  onZoomChange={updateZoom}
-                  minZoom={MIN_ZOOM}
-                  maxZoom={MAX_ZOOM}
+          {/* Center Content - Tracks */}
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* Timeline Controls */}
+            <div className="p-4 border-b bg-muted/30">
+              <TimelineControls
+                duration={state.duration}
+                zoom={state.zoom}
+                onDurationChange={handleDurationChange}
+                onZoomChange={handleZoomChange}
+                minZoom={MIN_ZOOM}
+                maxZoom={MAX_ZOOM}
+              />
+            </div>
+
+            {/* Track Area */}
+            <div className="flex-1 flex overflow-hidden">
+              {/* Track Controls */}
+              <div className="w-64 border-r">
+                <TrackControls
+                  ref={trackControlsRef}
+                  tracks={state.tracks}
+                  onAddTrack={handleAddTrack}
+                  onRemoveTrack={handleRemoveTrack}
+                  onUpdateTrackName={handleUpdateTrackName}
+                  onScroll={handleVerticalScroll}
                 />
               </div>
 
-              {/* Sequencer Content */}
-              <div className="flex-1 overflow-hidden flex">
-                {/* Track Controls */}
-                <div className="w-48 border-r bg-muted/30">
-                  <TrackControls
-                    ref={trackControlsScrollRef}
-                    tracks={state.tracks}
-                    onAddTrack={addTrack}
-                    onRemoveTrack={removeTrack}
-                    onUpdateTrackName={updateTrackName}
-                    onScroll={handleTrackControlsScroll}
-                  />
-                </div>
-
-                {/* Sequencer Canvas */}
-                <div className="flex-1 min-w-0 overflow-hidden">
-                  <SequencerCanvas
-                    ref={sequencerCanvasScrollRef}
-                    tracks={state.tracks}
-                    duration={state.duration}
-                    zoom={state.zoom}
-                    currentTime={state.currentTime}
-                    isPlaying={state.isPlaying}
-                    onScroll={handleSequencerCanvasScroll}
-                  />
-                </div>
+              {/* Sequencer Canvas */}
+              <div className="flex-1">
+                <SequencerCanvas
+                  ref={sequencerCanvasRef}
+                  tracks={state.tracks}
+                  duration={state.duration}
+                  zoom={state.zoom}
+                  currentTime={state.currentTime}
+                  isPlaying={state.isPlaying}
+                  onScroll={handleVerticalScroll}
+                  draggedItem={draggedItem}
+                  dragOverInfo={dragOverInfo}
+                />
               </div>
             </div>
           </div>
-
-          {/* Drag Overlay */}
-          <DragOverlay>
-            {activeId && activeDragData ? (
-              <div className="bg-primary/20 border-2 border-primary rounded px-3 py-2 text-sm font-medium opacity-80">
-                {activeDragData.type === 'sound'
-                  ? activeDragData.sound?.name || activeDragData.sound?.filename
-                  : activeDragData.name}
-              </div>
-            ) : null}
-          </DragOverlay>
         </DndContext>
       </div>
-    </AppLayout>
+    </div>
   )
 }