From 8bccf7ea4dd7c0b5b92efeaae2fe0635c62038c2 Mon Sep 17 00:00:00 2001
From: JotaChina <sousacj1@gmail.com>
Date: Thu, 25 Dec 2025 20:53:44 -0300
Subject: [PATCH] corrigindo drag and drop dos samples na playlist

---
 assets/js/creations/audio/audio_ui.js | 37 ++++++++++++++++-----------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/assets/js/creations/audio/audio_ui.js b/assets/js/creations/audio/audio_ui.js
index 202a5e99..3124a789 100755
--- a/assets/js/creations/audio/audio_ui.js
+++ b/assets/js/creations/audio/audio_ui.js
@@ -765,19 +765,22 @@ export function renderAudioEditor() {
     // Drag Clip (Audio apenas)
     if (clipElement && !clipElement.classList.contains("bassline-clip")) {
       const clipId = clipElement.dataset.clipId;
-      if (appState.global.selectedClipId !== clipId) {
-        appState.global.selectedClipId = clipId;
-        newTrackContainer.querySelectorAll(".timeline-clip.selected").forEach((c) => c.classList.remove("selected"));
-        clipElement.classList.add("selected");
-      }
+
+      // 🔑 pega o clip no estado pra ter o tempo inicial real
+      const clipModel = appState.audio.clips.find(c => String(c.id) === String(clipId));
+      const initialStartTime = Number(clipModel?.startTimeInSeconds || 0);
+
       e.preventDefault();
-      const clickOffsetInClip = e.clientX - clipElement.getBoundingClientRect().left;
+      const initialMouseX = e.clientX;
+      const initialScrollLeft = scrollEl.scrollLeft;
+
       clipElement.classList.add("dragging");
       let lastOverLane = clipElement.closest(".audio-track-lane");
-      
+
       const onMouseMove = (moveEvent) => {
-        const deltaX = moveEvent.clientX - e.clientX;
+        const deltaX = moveEvent.clientX - initialMouseX;
         clipElement.style.transform = `translateX(${deltaX}px)`;
+
         const overElement = document.elementFromPoint(moveEvent.clientX, moveEvent.clientY);
         const overLane = overElement ? overElement.closest(".audio-track-lane") : null;
         if (overLane && overLane !== lastOverLane) {
@@ -793,26 +796,30 @@ export function renderAudioEditor() {
         clipElement.style.transform = "";
         document.removeEventListener("mousemove", onMouseMove);
         document.removeEventListener("mouseup", onMouseUp);
-        
+
         const finalLane = lastOverLane;
         if (!finalLane) return;
+
         const newTrackId = finalLane.dataset.trackId;
-        const timelineContainer = finalLane.querySelector(".timeline-container");
-        const wrapperRect = timelineContainer.getBoundingClientRect();
-        const newLeftPx = upEvent.clientX - wrapperRect.left - clickOffsetInClip + scrollEl.scrollLeft;
-        const constrainedLeftPx = Math.max(0, newLeftPx);
-        let newStartTime = constrainedLeftPx / currentPixelsPerSecond;
+
+        // ✅ delta do mouse + delta de scroll durante o drag (se houver)
+        const deltaX = (upEvent.clientX - initialMouseX) + (scrollEl.scrollLeft - initialScrollLeft);
+
+        let newStartTime = initialStartTime + (deltaX / currentPixelsPerSecond);
+        newStartTime = Math.max(0, newStartTime);
         newStartTime = quantizeTime(newStartTime);
-        
+
         updateAudioClipProperties(clipId, { trackId: newTrackId, startTimeInSeconds: newStartTime });
         sendActionSafe({ type: "UPDATE_AUDIO_CLIP", clipId, props: { trackId: newTrackId, startTimeInSeconds: newStartTime } });
         renderAudioEditor();
       };
+
       document.addEventListener("mousemove", onMouseMove);
       document.addEventListener("mouseup", onMouseUp);
       return;
     }
 
+
     // Seek na Pista
     const timelineContainer = e.target.closest(".timeline-container");
     if (timelineContainer) {