melhorando a leitura de projetos no mmpCreator

This commit is contained in:
JotaChina committed 2025-12-23 20:28:18 -03:00
1 parent a923340b51
commit 0b3f3df306
2 files changed
+16 -13

No files matched your search

+11 -8
View File
@@ -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 = '<i class="fa-solid fa-music"></i>';
@@ -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;