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

melhorando a leitura de projetos no mmpCreator
Deploy / Deploy (push) Successful in 2m9s Details

This commit is contained in:
JotaChina 2025-12-23 20:28:18 -03:00
parent 9c7f62ada4
commit 4da1c33076
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/creator.css
View File

@ -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); }

19
assets/js/creations/audio/audio_ui.js
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;