editando e enviando patterns na playlist
Deploy / Deploy (push) Successful in 2m2s Details

This commit is contained in:
JotaChina 2025-12-27 13:51:27 -03:00
parent 17e07c5838
commit 6bb8cb8dad
1 changed files with 46 additions and 71 deletions

View File

@ -188,14 +188,9 @@ export function renderAudioEditor() {
if (!audioEditor || !existingTrackContainer) return; if (!audioEditor || !existingTrackContainer) return;
// ✅ preserva a posição de scroll mesmo recriando o container // ✅ Salva o scroll atual (senão toda edição “pula” pro início)
const prevScrollLeft = const prevScrollLeft = existingTrackContainer.scrollLeft || 0;
(existingTrackContainer?.scrollLeft ?? 0) || const prevScrollTop = existingTrackContainer.scrollTop || 0;
(appState.audio?.editorScrollLeft ?? 0);
const prevScrollTop =
(existingTrackContainer?.scrollTop ?? 0) ||
(appState.audio?.editorScrollTop ?? 0);
_ensureGlobalPlaylistSelectionFields(); _ensureGlobalPlaylistSelectionFields();
_installPlaylistKeybindOnce(); _installPlaylistKeybindOnce();
@ -203,13 +198,6 @@ export function renderAudioEditor() {
// --- Identifica o pai real do container --- // --- Identifica o pai real do container ---
const tracksParent = existingTrackContainer.parentElement; 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 --- // --- CRIAÇÃO E RENDERIZAÇÃO DA RÉGUA ---
let rulerWrapper = tracksParent.querySelector(".ruler-wrapper"); let rulerWrapper = tracksParent.querySelector(".ruler-wrapper");
@ -438,6 +426,12 @@ export function renderAudioEditor() {
menu.style.top = `${e.clientY}px`; menu.style.top = `${e.clientY}px`;
}); });
// Recriação Container Pistas
const newTrackContainer = existingTrackContainer.cloneNode(false);
tracksParent.replaceChild(newTrackContainer, existingTrackContainer);
// ✅ único scroller horizontal/vertical do editor
const scrollEl = newTrackContainer; // #audio-track-container
// === RENDERIZAÇÃO DAS PISTAS (LANES) === // === RENDERIZAÇÃO DAS PISTAS (LANES) ===
// CORREÇÃO: Junta as pistas de áudio com as Basslines (que estão no Pattern State) // CORREÇÃO: Junta as pistas de áudio com as Basslines (que estão no Pattern State)
@ -783,19 +777,10 @@ export function renderAudioEditor() {
.forEach((g) => (g.style.width = `${widthPx}px`)); .forEach((g) => (g.style.width = `${widthPx}px`));
} }
// Sync Scroll (rebinding para não acumular listeners a cada render) // Sync Scroll
newTrackContainer.addEventListener("scroll", () => { newTrackContainer.addEventListener("scroll", () => {
if (newTrackContainer.__onScroll) {
newTrackContainer.removeEventListener("scroll", newTrackContainer.__onScroll);
}
newTrackContainer.__onScroll = () => {
const scrollPos = scrollEl.scrollLeft; const scrollPos = scrollEl.scrollLeft;
// guarda no estado
appState.audio.editorScrollLeft = scrollPos;
appState.audio.editorScrollTop = scrollEl.scrollTop || 0;
// sincroniza régua com o container // sincroniza régua com o container
const mainRuler = tracksParent.querySelector(".timeline-ruler"); const mainRuler = tracksParent.querySelector(".timeline-ruler");
if (mainRuler && mainRuler.scrollLeft !== scrollPos) { if (mainRuler && mainRuler.scrollLeft !== scrollPos) {
@ -815,17 +800,12 @@ export function renderAudioEditor() {
const rulerEl = tracksParent.querySelector(".timeline-ruler"); const rulerEl = tracksParent.querySelector(".timeline-ruler");
appendRulerMarkers(rulerEl, currentWidth, newWidth, barWidthPx); 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) // Event Listener Principal (mousedown)
newTrackContainer.__onMouseDown = (e) => { newTrackContainer.addEventListener("mousedown", (e) => {
document.getElementById("timeline-context-menu").style.display = "none"; document.getElementById("timeline-context-menu").style.display = "none";
document.getElementById("ruler-context-menu").style.display = "none"; document.getElementById("ruler-context-menu").style.display = "none";
@ -1318,16 +1298,10 @@ export function renderAudioEditor() {
document.addEventListener("mousemove", onMouseMoveSeek); document.addEventListener("mousemove", onMouseMoveSeek);
document.addEventListener("mouseup", onMouseUpSeek); document.addEventListener("mouseup", onMouseUpSeek);
} }
}; });
newTrackContainer.addEventListener("mousedown", newTrackContainer.__onMouseDown);
// Menu Contexto Pista // Menu Contexto Pista
if (newTrackContainer.__onContextMenu) { newTrackContainer.addEventListener("contextmenu", (e) => {
newTrackContainer.removeEventListener("contextmenu", newTrackContainer.__onContextMenu);
}
newTrackContainer.__onContextMenu = (e) => {
e.preventDefault(); e.preventDefault();
document.getElementById("ruler-context-menu").style.display = "none"; document.getElementById("ruler-context-menu").style.display = "none";
const menu = document.getElementById("timeline-context-menu"); const menu = document.getElementById("timeline-context-menu");
@ -1399,22 +1373,23 @@ export function renderAudioEditor() {
menu.style.display = "none"; menu.style.display = "none";
} }
} }
}; });
newTrackContainer.addEventListener("contextmenu", newTrackContainer.__onContextMenu); // ✅ Restaura o scroll anterior após reconstruir o container
// (evita “voltar pro início” depois de mover/redimensionar/deletar)
// ✅ restaura scroll após reconstruir a DOM (precisa ser após tudo estar no DOM)
requestAnimationFrame(() => {
try { try {
newTrackContainer.scrollLeft = prevScrollLeft; newTrackContainer.scrollLeft = prevScrollLeft;
newTrackContainer.scrollTop = prevScrollTop; newTrackContainer.scrollTop = prevScrollTop;
// mantém régua alinhada na mesma posição // mantém régua alinhada (caso ela suporte scrollLeft)
const mainRuler = tracksParent.querySelector(".timeline-ruler"); const mainRuler = tracksParent.querySelector(".timeline-ruler");
if (mainRuler) mainRuler.scrollLeft = prevScrollLeft; if (mainRuler) mainRuler.scrollLeft = prevScrollLeft;
} catch {} } catch (err) {
}); // silencioso: não pode quebrar a DAW
}
} }
export function updateAudioEditorUI() { export function updateAudioEditorUI() {
const playBtn = document.getElementById("audio-editor-play-btn"); const playBtn = document.getElementById("audio-editor-play-btn");
if (!playBtn) return; if (!playBtn) return;