615 lines
28 KiB
JavaScript
615 lines
28 KiB
JavaScript
// js/audio/audio_ui.js
|
|
import { appState } from "../state.js";
|
|
import {
|
|
addAudioClipToTimeline,
|
|
updateAudioClipProperties,
|
|
sliceAudioClip,
|
|
} from "./audio_state.js";
|
|
import { seekAudioEditor, restartAudioEditorIfPlaying, updateTransportLoop } from "./audio_audio.js";
|
|
import { drawWaveform } from "../waveform.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 ---
|
|
let rulerWrapper = audioEditor.querySelector('.ruler-wrapper');
|
|
if (!rulerWrapper) {
|
|
rulerWrapper = document.createElement('div');
|
|
rulerWrapper.className = 'ruler-wrapper';
|
|
rulerWrapper.innerHTML = `
|
|
<div class="ruler-spacer"></div>
|
|
<div class="timeline-ruler"></div>
|
|
`;
|
|
audioEditor.insertBefore(rulerWrapper, existingTrackContainer);
|
|
}
|
|
|
|
const ruler = rulerWrapper.querySelector('.timeline-ruler');
|
|
ruler.innerHTML = '';
|
|
|
|
const pixelsPerSecond = getPixelsPerSecond();
|
|
|
|
let maxTime = appState.global.loopEndTime;
|
|
appState.audio.clips.forEach(clip => {
|
|
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);
|
|
|
|
ruler.style.width = `${totalWidth}px`;
|
|
|
|
const zoomFactor = ZOOM_LEVELS[appState.global.zoomLevelIndex];
|
|
const beatsPerBar = getBeatsPerBar();
|
|
const stepWidthPx = PIXELS_PER_STEP * zoomFactor;
|
|
const beatWidthPx = stepWidthPx * 4;
|
|
const barWidthPx = beatWidthPx * beatsPerBar;
|
|
|
|
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) * barWidthPx}px`;
|
|
ruler.appendChild(marker);
|
|
}
|
|
}
|
|
|
|
const loopRegion = document.createElement('div');
|
|
loopRegion.id = 'loop-region';
|
|
loopRegion.style.left = `${appState.global.loopStartTime * pixelsPerSecond}px`;
|
|
loopRegion.style.width = `${(appState.global.loopEndTime - appState.global.loopStartTime) * pixelsPerSecond}px`;
|
|
loopRegion.innerHTML = `<div class="loop-handle left"></div><div class="loop-handle right"></div>`;
|
|
loopRegion.classList.toggle("visible", appState.global.isLoopActive);
|
|
ruler.appendChild(loopRegion);
|
|
|
|
// --- 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) { /* ... lógica de loop ... */
|
|
e.preventDefault(); e.stopPropagation();
|
|
const handleType = loopHandle.classList.contains('left') ? 'left' : 'right';
|
|
const initialMouseX = e.clientX;
|
|
const initialStart = appState.global.loopStartTime;
|
|
const initialEnd = appState.global.loopEndTime;
|
|
|
|
const onMouseMove = (moveEvent) => {
|
|
const deltaX = moveEvent.clientX - initialMouseX;
|
|
const deltaTime = deltaX / currentPixelsPerSecond;
|
|
let newStart = appState.global.loopStartTime;
|
|
let newEnd = appState.global.loopEndTime;
|
|
|
|
if (handleType === 'left') {
|
|
newStart = Math.max(0, initialStart + deltaTime);
|
|
newStart = Math.min(newStart, appState.global.loopEndTime - 0.1);
|
|
appState.global.loopStartTime = newStart;
|
|
} else {
|
|
newEnd = Math.max(appState.global.loopStartTime + 0.1, initialEnd + deltaTime);
|
|
appState.global.loopEndTime = newEnd;
|
|
}
|
|
|
|
updateTransportLoop();
|
|
loopRegion.style.left = `${newStart * currentPixelsPerSecond}px`;
|
|
loopRegion.style.width = `${(newEnd - newStart) * currentPixelsPerSecond}px`;
|
|
};
|
|
|
|
const onMouseUp = () => {
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
renderAudioEditor();
|
|
};
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
return;
|
|
}
|
|
if (loopRegionBody) { /* ... lógica de mover loop ... */
|
|
e.preventDefault(); e.stopPropagation();
|
|
const initialMouseX = e.clientX;
|
|
const initialStart = appState.global.loopStartTime;
|
|
const initialEnd = appState.global.loopEndTime;
|
|
const initialDuration = initialEnd - initialStart;
|
|
|
|
const onMouseMove = (moveEvent) => {
|
|
const deltaX = moveEvent.clientX - initialMouseX;
|
|
const deltaTime = deltaX / currentPixelsPerSecond;
|
|
let newStart = Math.max(0, initialStart + deltaTime);
|
|
let newEnd = newStart + initialDuration;
|
|
appState.global.loopStartTime = newStart;
|
|
appState.global.loopEndTime = newEnd;
|
|
updateTransportLoop();
|
|
loopRegion.style.left = `${newStart * currentPixelsPerSecond}px`;
|
|
};
|
|
|
|
const onMouseUp = () => {
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
renderAudioEditor();
|
|
};
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
const handleSeek = (event) => { /* ... lógica de seek ... */
|
|
const rect = ruler.getBoundingClientRect();
|
|
const scrollLeft = ruler.scrollLeft;
|
|
const clickX = event.clientX - rect.left;
|
|
const absoluteX = clickX + scrollLeft;
|
|
const newTime = absoluteX / currentPixelsPerSecond;
|
|
seekAudioEditor(newTime);
|
|
};
|
|
handleSeek(e);
|
|
const onMouseMoveSeek = (moveEvent) => handleSeek(moveEvent);
|
|
const onMouseUpSeek = () => { document.removeEventListener('mousemove', onMouseMoveSeek); document.removeEventListener('mouseup', onMouseUpSeek); };
|
|
document.addEventListener('mousemove', onMouseMoveSeek);
|
|
document.addEventListener('mouseup', onMouseUpSeek);
|
|
});
|
|
|
|
// --- RECRIAÇÃO DO CONTAINER DE PISTAS (sem alterações) ---
|
|
const newTrackContainer = existingTrackContainer.cloneNode(false);
|
|
audioEditor.replaceChild(newTrackContainer, existingTrackContainer);
|
|
|
|
if (appState.audio.tracks.length === 0) {
|
|
appState.audio.tracks.push({ id: Date.now(), name: "Pista de Áudio 1" });
|
|
}
|
|
|
|
// --- RENDERIZAÇÃO DAS PISTAS INDIVIDUAIS (sem alterações) ---
|
|
appState.audio.tracks.forEach(trackData => {
|
|
const audioTrackLane = document.createElement('div');
|
|
audioTrackLane.className = 'audio-track-lane';
|
|
audioTrackLane.dataset.trackId = trackData.id;
|
|
audioTrackLane.innerHTML = `
|
|
<div class="track-info">
|
|
<div class="track-info-header">
|
|
<i class="fa-solid fa-gear"></i>
|
|
<span class="track-name">${trackData.name}</span>
|
|
<div class="track-mute"></div>
|
|
</div>
|
|
<div class="track-controls">
|
|
<div class="knob-container">
|
|
<div class="knob" data-control="volume"><div class="knob-indicator"></div></div>
|
|
<span>VOL</span>
|
|
</div>
|
|
<div class="knob-container">
|
|
<div class="knob" data-control="pan"><div class="knob-indicator"></div></div>
|
|
<span>PAN</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-container">
|
|
<div class="spectrogram-view-grid" style="width: ${totalWidth}px;"></div>
|
|
<div class="playhead"></div>
|
|
</div>
|
|
`;
|
|
newTrackContainer.appendChild(audioTrackLane);
|
|
|
|
const timelineContainer = audioTrackLane.querySelector('.timeline-container');
|
|
|
|
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');
|
|
const filePath = e.dataTransfer.getData("text/plain");
|
|
if (!filePath) return;
|
|
const rect = timelineContainer.getBoundingClientRect();
|
|
const dropX = e.clientX - rect.left + timelineContainer.scrollLeft;
|
|
let startTimeInSeconds = dropX / pixelsPerSecond;
|
|
startTimeInSeconds = quantizeTime(startTimeInSeconds);
|
|
addAudioClipToTimeline(filePath, trackData.id, startTimeInSeconds);
|
|
});
|
|
|
|
const grid = timelineContainer.querySelector('.spectrogram-view-grid');
|
|
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 (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;
|
|
|
|
// --- 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>
|
|
<span class="clip-name">${clip.name} ${pitchStr}</span>
|
|
<canvas class="waveform-canvas-clip"></canvas>
|
|
<div class="clip-resize-handle right"></div>
|
|
`;
|
|
parentGrid.appendChild(clipElement);
|
|
|
|
if (clip.buffer) {
|
|
const canvas = clipElement.querySelector('.waveform-canvas-clip');
|
|
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);
|
|
if (!clipToUpdate) return;
|
|
const direction = e.deltaY < 0 ? 1 : -1;
|
|
let newPitch = clipToUpdate.pitch + direction;
|
|
newPitch = Math.max(-24, Math.min(24, newPitch));
|
|
updateAudioClipProperties(clipToUpdate.id, { pitch: newPitch });
|
|
renderAudioEditor();
|
|
restartAudioEditorIfPlaying();
|
|
});
|
|
});
|
|
|
|
// --- SINCRONIZAÇÃO DE SCROLL (sem alterações) ---
|
|
newTrackContainer.addEventListener('scroll', () => {
|
|
const scrollPos = newTrackContainer.scrollLeft;
|
|
if (ruler.scrollLeft !== scrollPos) {
|
|
ruler.scrollLeft = scrollPos;
|
|
}
|
|
});
|
|
|
|
// --- EVENT LISTENER PRINCIPAL (COM MODIFICAÇÃO PARA SELEÇÃO) ---
|
|
newTrackContainer.addEventListener('mousedown', (e) => {
|
|
// --- 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');
|
|
|
|
// 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) {
|
|
// --- 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');
|
|
const onMouseMove = (moveEvent) => {
|
|
const deltaX = moveEvent.clientX - e.clientX;
|
|
clipElement.style.transform = `translateX(${deltaX}px)`;
|
|
const overElement = document.elementFromPoint(moveEvent.clientX, moveEvent.clientY);
|
|
const overLane = overElement ? overElement.closest('.audio-track-lane') : null;
|
|
if (overLane && overLane !== lastOverLane) {
|
|
if(lastOverLane) lastOverLane.classList.remove('drag-over');
|
|
overLane.classList.add('drag-over');
|
|
lastOverLane = overLane;
|
|
}
|
|
};
|
|
const onMouseUp = (upEvent) => {
|
|
clipElement.classList.remove('dragging');
|
|
if (lastOverLane) lastOverLane.classList.remove('drag-over');
|
|
clipElement.style.transform = '';
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
document.removeEventListener('mouseup', onMouseUp);
|
|
const finalLane = lastOverLane;
|
|
if (!finalLane) return;
|
|
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 constrainedLeftPx = Math.max(0, newLeftPx);
|
|
let newStartTime = constrainedLeftPx / currentPixelsPerSecond;
|
|
newStartTime = quantizeTime(newStartTime);
|
|
|
|
updateAudioClipProperties(clipId, { trackId: Number(newTrackId), startTimeInSeconds: newStartTime });
|
|
renderAudioEditor();
|
|
};
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
document.addEventListener('mouseup', onMouseUp);
|
|
return;
|
|
}
|
|
|
|
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();
|
|
const scrollLeft = timelineContainer.scrollLeft;
|
|
const clickX = event.clientX - rect.left;
|
|
const absoluteX = clickX + scrollLeft;
|
|
const newTime = absoluteX / currentPixelsPerSecond;
|
|
seekAudioEditor(newTime);
|
|
};
|
|
handleSeek(e);
|
|
const onMouseMoveSeek = (moveEvent) => handleSeek(moveEvent);
|
|
const onMouseUpSeek = () => { document.removeEventListener('mousemove', onMouseMoveSeek); document.removeEventListener('mouseup', onMouseUpSeek); };
|
|
document.addEventListener('mousemove', onMouseMoveSeek);
|
|
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;
|
|
if (appState.global.isAudioEditorPlaying) {
|
|
playBtn.classList.remove('fa-play');
|
|
playBtn.classList.add('fa-pause');
|
|
} else {
|
|
playBtn.classList.remove('fa-pause');
|
|
playBtn.classList.add('fa-play');
|
|
}
|
|
}
|
|
|
|
export function updatePlayheadVisual(pixels) {
|
|
document.querySelectorAll('.audio-track-lane .playhead').forEach(ph => {
|
|
ph.style.left = `${pixels}px`;
|
|
});
|
|
}
|
|
|
|
export function resetPlayheadVisual() {
|
|
document.querySelectorAll('.audio-track-lane .playhead').forEach(ph => {
|
|
ph.style.left = '0px';
|
|
});
|
|
} |