diff --git a/assets/js/creations/audio/audio_ui.js b/assets/js/creations/audio/audio_ui.js index 8a19942e..5c956f49 100755 --- a/assets/js/creations/audio/audio_ui.js +++ b/assets/js/creations/audio/audio_ui.js @@ -203,6 +203,13 @@ export function renderAudioEditor() { // --- Identifica o pai real do container --- const tracksParent = existingTrackContainer.parentElement; + // ✅ NÃO recria o container (preserva scroll e evita “voltar pro início”) + const newTrackContainer = existingTrackContainer; + const scrollEl = newTrackContainer; + + // ✅ limpa apenas as lanes antigas (mantém o scroller) + newTrackContainer.innerHTML = ""; + // --- CRIAÇÃO E RENDERIZAÇÃO DA RÉGUA --- let rulerWrapper = tracksParent.querySelector(".ruler-wrapper"); @@ -776,37 +783,49 @@ export function renderAudioEditor() { .forEach((g) => (g.style.width = `${widthPx}px`)); } - // Sync Scroll - newTrackContainer.addEventListener("scroll", () => { - const scrollPos = scrollEl.scrollLeft; - - // ✅ guarda no estado para sobreviver a re-render - appState.audio.editorScrollLeft = scrollPos; - appState.audio.editorScrollTop = scrollEl.scrollTop || 0; - - // sincroniza régua com o container - const mainRuler = tracksParent.querySelector(".timeline-ruler"); - if (mainRuler && mainRuler.scrollLeft !== scrollPos) { - mainRuler.scrollLeft = scrollPos; + // Sync Scroll (rebinding para não acumular listeners a cada render) + newTrackContainer.addEventListener("scroll", () => { + if (newTrackContainer.__onScroll) { + newTrackContainer.removeEventListener("scroll", newTrackContainer.__onScroll); } - // expansão "infinita" - const threshold = 300; - const rightEdge = scrollPos + newTrackContainer.clientWidth; - const currentWidth = appState.audio.timelineWidthPx || totalWidth; + newTrackContainer.__onScroll = () => { + const scrollPos = scrollEl.scrollLeft; - if (rightEdge > currentWidth - threshold) { - const newWidth = Math.ceil(currentWidth * 1.5); + // guarda no estado + appState.audio.editorScrollLeft = scrollPos; + appState.audio.editorScrollTop = scrollEl.scrollTop || 0; - applyTimelineWidth(newWidth); + // sincroniza régua com o container + const mainRuler = tracksParent.querySelector(".timeline-ruler"); + if (mainRuler && mainRuler.scrollLeft !== scrollPos) { + mainRuler.scrollLeft = scrollPos; + } - const rulerEl = tracksParent.querySelector(".timeline-ruler"); - appendRulerMarkers(rulerEl, currentWidth, newWidth, barWidthPx); - } + // expansão "infinita" + const threshold = 300; + const rightEdge = scrollPos + newTrackContainer.clientWidth; + const currentWidth = appState.audio.timelineWidthPx || totalWidth; + + if (rightEdge > currentWidth - threshold) { + const newWidth = Math.ceil(currentWidth * 1.5); + + applyTimelineWidth(newWidth); + + const rulerEl = tracksParent.querySelector(".timeline-ruler"); + appendRulerMarkers(rulerEl, currentWidth, newWidth, barWidthPx); + } + }; + newTrackContainer.addEventListener("scroll", newTrackContainer.__onScroll); }); + // Event Listener Principal (mousedown) - rebinding + if (newTrackContainer.__onMouseDown) { + newTrackContainer.removeEventListener("mousedown", newTrackContainer.__onMouseDown); + } + // Event Listener Principal (mousedown) - newTrackContainer.addEventListener("mousedown", (e) => { + newTrackContainer.__onMouseDown = (e) => { document.getElementById("timeline-context-menu").style.display = "none"; document.getElementById("ruler-context-menu").style.display = "none"; @@ -1299,10 +1318,16 @@ export function renderAudioEditor() { document.addEventListener("mousemove", onMouseMoveSeek); document.addEventListener("mouseup", onMouseUpSeek); } - }); + }; + + newTrackContainer.addEventListener("mousedown", newTrackContainer.__onMouseDown); // Menu Contexto Pista - newTrackContainer.addEventListener("contextmenu", (e) => { + if (newTrackContainer.__onContextMenu) { + newTrackContainer.removeEventListener("contextmenu", newTrackContainer.__onContextMenu); + } + + newTrackContainer.__onContextMenu = (e) => { e.preventDefault(); document.getElementById("ruler-context-menu").style.display = "none"; const menu = document.getElementById("timeline-context-menu"); @@ -1374,7 +1399,9 @@ export function renderAudioEditor() { menu.style.display = "none"; } } - }); + }; + + newTrackContainer.addEventListener("contextmenu", newTrackContainer.__onContextMenu); // ✅ restaura scroll após reconstruir a DOM (precisa ser após tudo estar no DOM) requestAnimationFrame(() => {