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

corrigindo scroll após movimentações e edições das patterns na playlist
Deploy / Deploy (push) Successful in 2m4s Details

This commit is contained in:
JotaChina 2025-12-27 13:43:50 -03:00
parent a5b5446404
commit 17e07c5838
1 changed files with 53 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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(() => {