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

versão 2.0.1 - Correção do grid (Editor de Samples), loop, delete, resize, trim e streching funcionais

Browse Source
This commit is contained in:
JotaChina committed 2025-10-22 19:21:51 -03:00
1 parent 352ceecec8
commit b3f0d13b90
9 files changed
+856 -250
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/js/creations/audio/audio_ui.js
+304 -56
View File
@@ -7,15 +7,15 @@ import {
} from "./audio_state.js";
import { seekAudioEditor, restartAudioEditorIfPlaying, updateTransportLoop } from "./audio_audio.js";
import { drawWaveform } from "../waveform.js";
import { PIXELS_PER_BAR, ZOOM_LEVELS } from "../config.js";
import { getPixelsPerSecond } from "../utils.js";
import { PIXELS_PER_BAR, PIXELS_PER_STEP, ZOOM_LEVELS } from "../config.js";
import { getPixelsPerSecond, quantizeTime, getBeatsPerBar, getSecondsPerStep } from "../utils.js";
export function renderAudioEditor() {
const audioEditor = document.querySelector('.audio-editor');
const existingTrackContainer = document.getElementById('audio-track-container');
if (!audioEditor || !existingTrackContainer) return;
// --- CRIAÇÃO E RENDERIZAÇÃO DA RÉGUA (AGORA COM WRAPPER E SPACER) ---
// --- CRIAÇÃO E RENDERIZAÇÃO DA RÉGUA ---
let rulerWrapper = audioEditor.querySelector('.ruler-wrapper');
if (!rulerWrapper) {
rulerWrapper = document.createElement('div');
@@ -28,32 +28,35 @@ export function renderAudioEditor() {
}
const ruler = rulerWrapper.querySelector('.timeline-ruler');
ruler.innerHTML = ''; // Limpa a régua para redesenhar
ruler.innerHTML = '';
const pixelsPerSecond = getPixelsPerSecond();
let maxTime = appState.global.loopEndTime;
appState.audio.clips.forEach(clip => {
const endTime = clip.startTime + clip.duration;
const endTime = (clip.startTimeInSeconds || 0) + (clip.durationInSeconds || 0);
if (endTime > maxTime) maxTime = endTime;
});
const containerWidth = existingTrackContainer.offsetWidth;
const contentWidth = maxTime * pixelsPerSecond;
const totalWidth = Math.max(contentWidth, containerWidth, 2000); // Garante uma largura mínima
const totalWidth = Math.max(contentWidth, containerWidth, 2000);
ruler.style.width = `${totalWidth}px`;
const zoomFactor = ZOOM_LEVELS[appState.global.zoomLevelIndex];
const scaledBarWidth = PIXELS_PER_BAR * zoomFactor;
const beatsPerBar = getBeatsPerBar();
const stepWidthPx = PIXELS_PER_STEP * zoomFactor;
const beatWidthPx = stepWidthPx * 4;
const barWidthPx = beatWidthPx * beatsPerBar;
if (scaledBarWidth > 0) {
const numberOfBars = Math.ceil(totalWidth / scaledBarWidth);
if (barWidthPx > 0) {
const numberOfBars = Math.ceil(totalWidth / barWidthPx);
for (let i = 1; i <= numberOfBars; i++) {
const marker = document.createElement('div');
marker.className = 'ruler-marker';
marker.textContent = i;
marker.style.left = `${(i - 1) * scaledBarWidth}px`;
marker.style.left = `${(i - 1) * barWidthPx}px`;
ruler.appendChild(marker);
}
}
@@ -66,13 +69,13 @@ export function renderAudioEditor() {
loopRegion.classList.toggle("visible", appState.global.isLoopActive);
ruler.appendChild(loopRegion);
// --- LISTENER DA RÉGUA PARA INTERAÇÕES (LOOP E SEEK) ---
// --- LISTENER DA RÉGUA (sem alterações) ---
ruler.addEventListener('mousedown', (e) => {
const currentPixelsPerSecond = getPixelsPerSecond();
const loopHandle = e.target.closest('.loop-handle');
const loopRegionBody = e.target.closest('#loop-region:not(.loop-handle)');
if (loopHandle) {
if (loopHandle) { /* ... lógica de loop ... */
e.preventDefault(); e.stopPropagation();
const handleType = loopHandle.classList.contains('left') ? 'left' : 'right';
const initialMouseX = e.clientX;
@@ -87,35 +90,28 @@ export function renderAudioEditor() {
if (handleType === 'left') {
newStart = Math.max(0, initialStart + deltaTime);
newStart = Math.min(newStart, appState.global.loopEndTime - 0.1); // Não deixa passar do fim
newStart = Math.min(newStart, appState.global.loopEndTime - 0.1);
appState.global.loopStartTime = newStart;
} else {
newEnd = Math.max(appState.global.loopStartTime + 0.1, initialEnd + deltaTime); // Não deixa ser antes do início
newEnd = Math.max(appState.global.loopStartTime + 0.1, initialEnd + deltaTime);
appState.global.loopEndTime = newEnd;
}
updateTransportLoop();
// ### CORREÇÃO DE PERFORMANCE 1 ###
// Remove a chamada para renderAudioEditor()
// Em vez disso, atualiza o estilo do elemento 'loopRegion' diretamente
loopRegion.style.left = `${newStart * currentPixelsPerSecond}px`;
loopRegion.style.width = `${(newEnd - newStart) * currentPixelsPerSecond}px`;
// ### FIM DA CORREÇÃO 1 ###
};
const onMouseUp = () => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
// Opcional: chamar renderAudioEditor() UMA VEZ no final para garantir a sincronia
renderAudioEditor();
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
return;
}
if (loopRegionBody) {
if (loopRegionBody) { /* ... lógica de mover loop ... */
e.preventDefault(); e.stopPropagation();
const initialMouseX = e.clientX;
const initialStart = appState.global.loopStartTime;
@@ -127,23 +123,15 @@ export function renderAudioEditor() {
const deltaTime = deltaX / currentPixelsPerSecond;
let newStart = Math.max(0, initialStart + deltaTime);
let newEnd = newStart + initialDuration;
appState.global.loopStartTime = newStart;
appState.global.loopEndTime = newEnd;
updateTransportLoop();
// ### CORREÇÃO DE PERFORMANCE 2 ###
// Remove a chamada para renderAudioEditor()
// Atualiza apenas a posição 'left' do elemento
loopRegion.style.left = `${newStart * currentPixelsPerSecond}px`;
// ### FIM DA CORREÇÃO 2 ###
loopRegion.style.left = `${newStart * currentPixelsPerSecond}px`;
};
const onMouseUp = () => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
// Opcional: chamar renderAudioEditor() UMA VEZ no final
renderAudioEditor();
};
document.addEventListener('mousemove', onMouseMove);
@@ -151,9 +139,8 @@ export function renderAudioEditor() {
return;
}
// Se o clique não foi em um handle ou no corpo do loop, faz o "seek"
e.preventDefault();
const handleSeek = (event) => {
const handleSeek = (event) => { /* ... lógica de seek ... */
const rect = ruler.getBoundingClientRect();
const scrollLeft = ruler.scrollLeft;
const clickX = event.clientX - rect.left;
@@ -168,7 +155,7 @@ export function renderAudioEditor() {
document.addEventListener('mouseup', onMouseUpSeek);
});
// --- RECRIAÇÃO DO CONTAINER DE PISTAS PARA EVITAR LISTENERS DUPLICADOS ---
// --- RECRIAÇÃO DO CONTAINER DE PISTAS (sem alterações) ---
const newTrackContainer = existingTrackContainer.cloneNode(false);
audioEditor.replaceChild(newTrackContainer, existingTrackContainer);
@@ -176,7 +163,7 @@ export function renderAudioEditor() {
appState.audio.tracks.push({ id: Date.now(), name: "Pista de Áudio 1" });
}
// --- RENDERIZAÇÃO DAS PISTAS INDIVIDUAIS ---
// --- RENDERIZAÇÃO DAS PISTAS INDIVIDUAIS (sem alterações) ---
appState.audio.tracks.forEach(trackData => {
const audioTrackLane = document.createElement('div');
audioTrackLane.className = 'audio-track-lane';
@@ -210,6 +197,7 @@ export function renderAudioEditor() {
timelineContainer.addEventListener("dragover", (e) => { e.preventDefault(); audioTrackLane.classList.add('drag-over'); });
timelineContainer.addEventListener("dragleave", () => audioTrackLane.classList.remove('drag-over'));
timelineContainer.addEventListener("drop", (e) => {
e.preventDefault();
audioTrackLane.classList.remove('drag-over');
@@ -217,25 +205,37 @@ export function renderAudioEditor() {
if (!filePath) return;
const rect = timelineContainer.getBoundingClientRect();
const dropX = e.clientX - rect.left + timelineContainer.scrollLeft;
const startTimeInSeconds = dropX / pixelsPerSecond;
let startTimeInSeconds = dropX / pixelsPerSecond;
startTimeInSeconds = quantizeTime(startTimeInSeconds);
addAudioClipToTimeline(filePath, trackData.id, startTimeInSeconds);
});
const grid = timelineContainer.querySelector('.spectrogram-view-grid');
grid.style.setProperty('--bar-width', `${scaledBarWidth}px`);
grid.style.setProperty('--four-bar-width', `${scaledBarWidth * 4}px`);
grid.style.setProperty('--step-width', `${stepWidthPx}px`);
grid.style.setProperty('--beat-width', `${beatWidthPx}px`);
grid.style.setProperty('--bar-width', `${barWidthPx}px`);
});
// --- RENDERIZAÇÃO DOS CLIPS ---
// --- RENDERIZAÇÃO DOS CLIPS (COM MODIFICAÇÃO PARA SELEÇÃO) ---
appState.audio.clips.forEach(clip => {
const parentGrid = newTrackContainer.querySelector(`.audio-track-lane[data-track-id="${clip.trackId}"] .spectrogram-view-grid`);
if (!parentGrid) return;
const clipElement = document.createElement('div');
clipElement.className = 'timeline-clip';
clipElement.dataset.clipId = clip.id;
clipElement.style.left = `${clip.startTime * pixelsPerSecond}px`;
clipElement.style.width = `${clip.duration * pixelsPerSecond}px`;
let pitchStr = clip.pitch > 0 ? `+${clip.pitch}` : `${clip.pitch}`;
// --- INÍCIO DA MODIFICAÇÃO ---
// Adiciona a classe 'selected' se o ID corresponder ao estado global
if (clip.id === appState.global.selectedClipId) {
clipElement.classList.add('selected');
}
// --- FIM DA MODIFICAÇÃO ---
clipElement.style.left = `${(clip.startTimeInSeconds || 0) * pixelsPerSecond}px`;
clipElement.style.width = `${(clip.durationInSeconds || 0) * pixelsPerSecond}px`;
let pitchStr = clip.pitch > 0 ? `+${clip.pitch.toFixed(1)}` : `${clip.pitch.toFixed(1)}`;
if (clip.pitch === 0) pitchStr = '';
clipElement.innerHTML = `
<div class="clip-resize-handle left"></div>
@@ -244,13 +244,31 @@ export function renderAudioEditor() {
<div class="clip-resize-handle right"></div>
`;
parentGrid.appendChild(clipElement);
if (clip.player && clip.player.loaded) {
if (clip.buffer) {
const canvas = clipElement.querySelector('.waveform-canvas-clip');
canvas.width = clip.duration * pixelsPerSecond;
canvas.height = 40;
const audioBuffer = clip.player.buffer.get();
drawWaveform(canvas, audioBuffer, 'var(--accent-green)', clip.offset, clip.duration);
const canvasWidth = (clip.durationInSeconds || 0) * pixelsPerSecond;
if (canvasWidth > 0) {
canvas.width = canvasWidth;
canvas.height = 40;
const audioBuffer = clip.buffer;
// --- INÍCIO DA CORREÇÃO ---
// Verifica se o clipe está esticado (pitch != 0) ou aparado (pitch == 0).
const isStretched = clip.pitch !== 0;
// Se for 'stretch', devemos usar a duração original do buffer como fonte.
// Se for 'trim', usamos a duração e offset atuais do clipe.
const sourceOffset = isStretched ? 0 : (clip.offset || 0);
const sourceDuration = isStretched ? clip.originalDuration : clip.durationInSeconds;
// Chama drawWaveform para desenhar o segmento-fonte (source)
// dentro do canvas (que já tem a largura de destino).
drawWaveform(canvas, audioBuffer, 'var(--accent-green)', sourceOffset, sourceDuration);
// --- FIM DA CORREÇÃO ---
}
}
clipElement.addEventListener('wheel', (e) => {
e.preventDefault();
const clipToUpdate = appState.audio.clips.find(c => c.id == clipElement.dataset.clipId);
@@ -264,7 +282,7 @@ export function renderAudioEditor() {
});
});
// --- SINCRONIZAÇÃO DE SCROLL ENTRE A RÉGUA E AS PISTAS ---
// --- SINCRONIZAÇÃO DE SCROLL (sem alterações) ---
newTrackContainer.addEventListener('scroll', () => {
const scrollPos = newTrackContainer.scrollLeft;
if (ruler.scrollLeft !== scrollPos) {
@@ -272,18 +290,212 @@ export function renderAudioEditor() {
}
});
// --- EVENT LISTENER PRINCIPAL PARA INTERAÇÕES (MOVER, REDIMENSIONAR, ETC.) ---
// --- EVENT LISTENER PRINCIPAL (COM MODIFICAÇÃO PARA SELEÇÃO) ---
newTrackContainer.addEventListener('mousedown', (e) => {
const currentPixelsPerSecond = getPixelsPerSecond();
const handle = e.target.closest('.clip-resize-handle');
// --- INÍCIO DA MODIFICAÇÃO ---
// Esconde o menu de contexto se estiver aberto
const menu = document.getElementById('timeline-context-menu');
if (menu) menu.style.display = 'none';
const clipElement = e.target.closest('.timeline-clip');
if (appState.global.sliceToolActive && clipElement) { /* ... lógica de corte ... */ return; }
if (handle) { /* ... lógica de redimensionamento de clipe ... */ return; }
// Desseleciona se clicar fora de um clipe (e não for clique direito)
if (!clipElement && e.button !== 2) {
if (appState.global.selectedClipId) {
appState.global.selectedClipId = null;
// Remove a classe de todos os clipes (para resposta visual imediata)
newTrackContainer.querySelectorAll('.timeline-clip.selected').forEach(c => {
c.classList.remove('selected');
});
}
}
// --- FIM DA MODIFICAÇÃO ---
const currentPixelsPerSecond = getPixelsPerSecond();
const handle = e.target.closest('.clip-resize-handle');
// const clipElement = e.target.closest('.timeline-clip'); // <-- Já definido acima
if (appState.global.sliceToolActive && clipElement) {
e.preventDefault();
e.stopPropagation();
const clipId = clipElement.dataset.clipId;
const timelineContainer = clipElement.closest('.timeline-container');
const rect = timelineContainer.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const absoluteX = clickX + timelineContainer.scrollLeft;
let sliceTimeInTimeline = absoluteX / currentPixelsPerSecond;
sliceTimeInTimeline = quantizeTime(sliceTimeInTimeline);
sliceAudioClip(clipId, sliceTimeInTimeline);
renderAudioEditor();
return;
}
// --- CORREÇÃO: LÓGICA DE REDIMENSIONAMENTO DIVIDIDA ---
if (handle) {
e.preventDefault();
e.stopPropagation();
const clipId = clipElement.dataset.clipId;
const clip = appState.audio.clips.find(c => c.id == clipId);
if (!clip || !clip.buffer) return;
const handleType = handle.classList.contains('left') ? 'left' : 'right';
const initialMouseX = e.clientX;
const secondsPerStep = getSecondsPerStep();
const initialLeftPx = clipElement.offsetLeft;
const initialWidthPx = clipElement.offsetWidth;
const initialStartTime = clip.startTimeInSeconds;
const initialDuration = clip.durationInSeconds;
const initialOffset = clip.offset || 0;
const initialPitch = clip.pitch || 0;
const initialOriginalDuration = clip.originalDuration || clip.buffer.duration;
// O tempo "zero" absoluto do buffer (seu início)
const bufferStartTime = initialStartTime - initialOffset;
const onMouseMove = (moveEvent) => {
const deltaX = moveEvent.clientX - initialMouseX;
// --- MODO 2: TRIMMING ---
if (appState.global.resizeMode === 'trim') {
if (handleType === 'right') {
let newWidthPx = initialWidthPx + deltaX;
let newDuration = newWidthPx / currentPixelsPerSecond;
let newEndTime = quantizeTime(initialStartTime + newDuration);
newEndTime = Math.max(initialStartTime + secondsPerStep, newEndTime);
const maxEndTime = bufferStartTime + initialOriginalDuration;
newEndTime = Math.min(newEndTime, maxEndTime);
clipElement.style.width = `${(newEndTime - initialStartTime) * currentPixelsPerSecond}px`;
} else if (handleType === 'left') {
let newLeftPx = initialLeftPx + deltaX;
let newStartTime = newLeftPx / currentPixelsPerSecond;
newStartTime = quantizeTime(newStartTime);
const minStartTime = (initialStartTime + initialDuration) - secondsPerStep;
newStartTime = Math.min(newStartTime, minStartTime);
newStartTime = Math.max(bufferStartTime, newStartTime);
const newLeftFinalPx = newStartTime * currentPixelsPerSecond;
const newWidthFinalPx = ((initialStartTime + initialDuration) - newStartTime) * currentPixelsPerSecond;
clipElement.style.left = `${newLeftFinalPx}px`;
clipElement.style.width = `${newWidthFinalPx}px`;
}
}
// --- MODO 1: STRETCHING ---
else if (appState.global.resizeMode === 'stretch') {
if (handleType === 'right') {
let newWidthPx = initialWidthPx + deltaX;
let newDuration = newWidthPx / currentPixelsPerSecond;
let newEndTime = quantizeTime(initialStartTime + newDuration);
newEndTime = Math.max(initialStartTime + secondsPerStep, newEndTime);
clipElement.style.width = `${(newEndTime - initialStartTime) * currentPixelsPerSecond}px`;
} else if (handleType === 'left') {
let newLeftPx = initialLeftPx + deltaX;
let newStartTime = newLeftPx / currentPixelsPerSecond;
newStartTime = quantizeTime(newStartTime);
const minStartTime = (initialStartTime + initialDuration) - secondsPerStep;
newStartTime = Math.min(newStartTime, minStartTime);
const newLeftFinalPx = newStartTime * currentPixelsPerSecond;
const newWidthFinalPx = ((initialStartTime + initialDuration) - newStartTime) * currentPixelsPerSecond;
clipElement.style.left = `${newLeftFinalPx}px`;
clipElement.style.width = `${newWidthFinalPx}px`;
}
}
};
const onMouseUp = (upEvent) => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
const finalLeftPx = clipElement.offsetLeft;
const finalWidthPx = clipElement.offsetWidth;
const newStartTime = finalLeftPx / currentPixelsPerSecond;
const newDuration = finalWidthPx / currentPixelsPerSecond;
// --- MODO 2: TRIMMING ---
if (appState.global.resizeMode === 'trim') {
const newOffset = newStartTime - bufferStartTime;
if (handleType === 'right') {
updateAudioClipProperties(clipId, {
durationInSeconds: newDuration,
pitch: 0 // Reseta o pitch
});
} else if (handleType === 'left') {
updateAudioClipProperties(clipId, {
startTimeInSeconds: newStartTime,
durationInSeconds: newDuration,
offset: newOffset,
pitch: 0 // Reseta o pitch
});
}
}
// --- MODO 1: STRETCHING ---
else if (appState.global.resizeMode === 'stretch') {
// Calcula o novo pitch baseado na mudança de duração
// Usa a duração *do buffer* (originalDuration) como base
const newPlaybackRate = initialOriginalDuration / newDuration;
const newPitch = 12 * Math.log2(newPlaybackRate);
if (handleType === 'right') {
updateAudioClipProperties(clipId, {
durationInSeconds: newDuration,
pitch: newPitch,
offset: 0 // Stretch sempre reseta o offset
});
} else if (handleType === 'left') {
updateAudioClipProperties(clipId, {
startTimeInSeconds: newStartTime,
durationInSeconds: newDuration,
pitch: newPitch,
offset: 0 // Stretch sempre reseta o offset
});
}
}
restartAudioEditorIfPlaying();
renderAudioEditor();
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
return;
}
// --- FIM DA CORREÇÃO ---
if (clipElement) {
e.preventDefault();
// --- INÍCIO DA MODIFICAÇÃO (SELEÇÃO NO DRAG) ---
const clipId = clipElement.dataset.clipId;
// Se o clipe clicado não for o já selecionado, atualiza a seleção
if (appState.global.selectedClipId !== clipId) {
appState.global.selectedClipId = clipId; // Define o estado global
// Atualiza visualmente
newTrackContainer.querySelectorAll('.timeline-clip.selected').forEach(c => {
c.classList.remove('selected');
});
clipElement.classList.add('selected');
}
// --- FIM DA MODIFICAÇÃO ---
// Lógica de 'drag' (sem alterações)
e.preventDefault();
// const clipId = clipElement.dataset.clipId; // <-- Já definido acima
const clickOffsetInClip = e.clientX - clipElement.getBoundingClientRect().left;
clipElement.classList.add('dragging');
let lastOverLane = clipElement.closest('.audio-track-lane');
@@ -312,9 +524,10 @@ export function renderAudioEditor() {
const newLeftPx = (upEvent.clientX - wrapperRect.left) - clickOffsetInClip + timelineContainer.scrollLeft;
const constrainedLeftPx = Math.max(0, newLeftPx);
const newStartTime = constrainedLeftPx / currentPixelsPerSecond;
let newStartTime = constrainedLeftPx / currentPixelsPerSecond;
newStartTime = quantizeTime(newStartTime);
updateAudioClipProperties(clipId, { trackId: Number(newTrackId), startTime: newStartTime });
updateAudioClipProperties(clipId, { trackId: Number(newTrackId), startTimeInSeconds: newStartTime });
renderAudioEditor();
};
document.addEventListener('mousemove', onMouseMove);
@@ -324,6 +537,7 @@ export function renderAudioEditor() {
const timelineContainer = e.target.closest('.timeline-container');
if (timelineContainer) {
// Lógica de 'seek' (sem alterações)
e.preventDefault();
const handleSeek = (event) => {
const rect = timelineContainer.getBoundingClientRect();
@@ -340,8 +554,42 @@ export function renderAudioEditor() {
document.addEventListener('mouseup', onMouseUpSeek);
}
});
// --- LISTENER ADICIONADO (Menu de Contexto) ---
newTrackContainer.addEventListener('contextmenu', (e) => {
e.preventDefault(); // Impede o menu de contexto padrão do navegador
const menu = document.getElementById('timeline-context-menu');
if (!menu) return;
const clipElement = e.target.closest('.timeline-clip');
if (clipElement) {
// 1. Seleciona o clipe clicado (define o estado)
const clipId = clipElement.dataset.clipId;
if (appState.global.selectedClipId !== clipId) {
appState.global.selectedClipId = clipId;
// Atualiza visualmente
newTrackContainer.querySelectorAll('.timeline-clip.selected').forEach(c => {
c.classList.remove('selected');
});
clipElement.classList.add('selected');
}
// 2. Posiciona e mostra o menu
menu.style.display = 'block';
menu.style.left = `${e.clientX}px`;
menu.style.top = `${e.clientY}px`;
} else {
// Esconde o menu se clicar com o botão direito fora de um clipe
menu.style.display = 'none';
}
});
// --- FIM DO LISTENER ADICIONADO ---
}
// --- Funções de UI (sem alterações) ---
export function updateAudioEditorUI() {
const playBtn = document.getElementById('audio-editor-play-btn');
if (!playBtn) return;