JotaChina
/
mmpSearch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

corrigindo drag and drop dos samples na playlist
Deploy / Deploy (push) Successful in 2m17s Details

This commit is contained in:
JotaChina 2025-12-25 20:53:44 -03:00
parent 329afcf2d6
commit 8bccf7ea4d
1 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/js/creations/audio/audio_ui.js
View File

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