diff --git a/assets/css/creator.css b/assets/css/creator.css index abeaa6cf..be295b15 100755 --- a/assets/css/creator.css +++ b/assets/css/creator.css @@ -322,20 +322,20 @@ body.sidebar-hidden .sample-browser { width: 0; min-width: 0; border-right: none display: flex; flex-direction: column; position: relative; - overflow: hidden; - position: relative; - overflow-x: auto; /* barra horizontal */ - overflow-y: auto; /* se quiser rolar vertical com várias tracks */ + overflow-x: hidden; + overflow-y: auto; } /* Importantíssimo: esses caras precisam poder ficar mais largos que a tela */ #audio-timeline-ruler, #audio-track-container{ + flex-grow: 1; + overflow-x: auto; + overflow-y: auto; position: relative; min-width: 100%; /* no mínimo ocupa a viewport */ } -#audio-track-container { flex-grow: 1; overflow: auto; } .audio-track-lane { display: flex; flex-direction: row; align-items: stretch; background-color: var(--bg-editor); border-bottom: 1px solid var(--bg-toolbar); min-height: 90px; box-sizing: border-box; } .audio-track-lane.drag-over { background-color: #40454d; } .audio-track-lane .track-info { width: var(--track-info-width); flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; background-color: #383c42; border-right: 2px solid var(--border-color); } diff --git a/assets/js/creations/audio/audio_ui.js b/assets/js/creations/audio/audio_ui.js index e6d4808c..97e03b9d 100755 --- a/assets/js/creations/audio/audio_ui.js +++ b/assets/js/creations/audio/audio_ui.js @@ -225,7 +225,7 @@ export function renderAudioEditor() { e.preventDefault(); const handleSeek = (event) => { const rect = newRuler.getBoundingClientRect(); - const scrollLeft = newRuler.scrollLeft; + const scrollLeft = scrollEl.scrollLeft; const clickX = event.clientX - rect.left; const absoluteX = clickX + scrollLeft; const newTime = absoluteX / currentPixelsPerSecond; @@ -261,6 +261,8 @@ export function renderAudioEditor() { // Recriação Container Pistas const newTrackContainer = existingTrackContainer.cloneNode(false); tracksParent.replaceChild(newTrackContainer, existingTrackContainer); + // ✅ único scroller horizontal/vertical do editor + const scrollEl = newTrackContainer; // === RENDERIZAÇÃO DAS PISTAS (LANES) === @@ -279,6 +281,7 @@ export function renderAudioEditor() { const audioTrackLane = document.createElement("div"); audioTrackLane.className = "audio-track-lane"; audioTrackLane.dataset.trackId = trackData.id; + audioTrackLane.style.minWidth = `calc(var(--track-info-width) + ${totalWidth}px)`; // Ícone dinâmico let iconHTML = ''; @@ -326,7 +329,7 @@ export function renderAudioEditor() { const filePath = e.dataTransfer.getData("text/plain"); if (!filePath) return; const rect = timelineContainer.getBoundingClientRect(); - const dropX = e.clientX - rect.left + timelineContainer.scrollLeft; + const dropX = e.clientX - rect.left + scrollEl.scrollLeft; let startTimeInSeconds = dropX / pixelsPerSecond; startTimeInSeconds = quantizeTime(startTimeInSeconds); if (!trackData.id || startTimeInSeconds == null || isNaN(startTimeInSeconds)) return; @@ -518,12 +521,12 @@ export function renderAudioEditor() { } newTrackContainer.addEventListener("scroll", () => { - const scrollPos = newTrackContainer.scrollLeft; + scrollEl.addEventListener("scroll", () => { + const scrollPos = scrollEl.scrollLeft; - // sync ruler const mainRuler = tracksParent.querySelector(".timeline-ruler"); if (mainRuler && mainRuler.scrollLeft !== scrollPos) { - mainRuler.scrollLeft = scrollPos; + mainRuler.scrollLeft = scrollPos; // funciona com overflow hidden (scroll programático) } // expansão "infinita" @@ -570,7 +573,7 @@ export function renderAudioEditor() { const timelineContainer = clipElement.closest(".timeline-container"); const rect = timelineContainer.getBoundingClientRect(); const clickX = e.clientX - rect.left; - const absoluteX = clickX + timelineContainer.scrollLeft; + const absoluteX = clickX + scrollEl.scrollLeft; let sliceTimeInTimeline = absoluteX / currentPixelsPerSecond; sliceTimeInTimeline = quantizeTime(sliceTimeInTimeline); sliceAudioClip(clipId, sliceTimeInTimeline); @@ -723,7 +726,7 @@ export function renderAudioEditor() { const newTrackId = finalLane.dataset.trackId; const timelineContainer = finalLane.querySelector(".timeline-container"); const wrapperRect = timelineContainer.getBoundingClientRect(); - const newLeftPx = upEvent.clientX - wrapperRect.left - clickOffsetInClip + timelineContainer.scrollLeft; + const newLeftPx = upEvent.clientX - wrapperRect.left - clickOffsetInClip + scrollEl.scrollLeft; const constrainedLeftPx = Math.max(0, newLeftPx); let newStartTime = constrainedLeftPx / currentPixelsPerSecond; newStartTime = quantizeTime(newStartTime); @@ -743,7 +746,7 @@ export function renderAudioEditor() { e.preventDefault(); const handleSeek = (event) => { const rect = timelineContainer.getBoundingClientRect(); - const scrollLeft = timelineContainer.scrollLeft; + const scrollLeft = scrollEl.scrollLeft; const clickX = event.clientX - rect.left; const absoluteX = clickX + scrollLeft; const newTime = absoluteX / currentPixelsPerSecond;