clicável para o nome da pasta, que o CSS e o main.js esperam
+ const folderNameSpan = document.createElement("span");
+ folderNameSpan.className = "folder-name";
+ folderNameSpan.innerHTML = ` ${key}`;
+ li.appendChild(folderNameSpan);
+
const nestedUl = document.createElement("ul");
+ nestedUl.className = "file-list"; // CORREÇÃO: Adiciona classe para o CSS
+
+ // Chama a função recursivamente para os conteúdos da pasta
renderFileTree(node, nestedUl, newPath);
li.appendChild(nestedUl);
- li.addEventListener("click", (e) => {
- e.stopPropagation();
- li.classList.toggle("open");
- });
+
+ // CORREÇÃO 3: Remove o addEventListener de clique daqui. O main.js já cuida disso.
+
ul.appendChild(li);
}
}
@@ -560,14 +123,12 @@ export async function showOpenProjectModal() {
openProjectModal.classList.add("visible");
try {
const response = await fetch("metadata/mmp-manifest.json");
- if (!response.ok)
- throw new Error("Arquivo mmp-manifest.json não encontrado.");
+ if (!response.ok) throw new Error("Arquivo mmp-manifest.json não encontrado.");
const projects = await response.json();
serverProjectsList.innerHTML = "";
if (projects.length === 0) {
- serverProjectsList.innerHTML =
- 'Nenhum projeto encontrado no servidor.
';
+ serverProjectsList.innerHTML = 'Nenhum projeto encontrado no servidor.
';
}
projects.forEach((projectName) => {
@@ -591,16 +152,4 @@ export async function showOpenProjectModal() {
export function closeOpenProjectModal() {
const openProjectModal = document.getElementById("open-project-modal");
openProjectModal.classList.remove("visible");
-}
-
-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';
- });
}
\ No newline at end of file
diff --git a/assets/js/creations/utils.js b/assets/js/creations/utils.js
index 9187e5f..e54fca5 100644
--- a/assets/js/creations/utils.js
+++ b/assets/js/creations/utils.js
@@ -1,5 +1,23 @@
// js/utils.js
+import { appState } from './state.js';
+import { PIXELS_PER_STEP, ZOOM_LEVELS } from './config.js';
+/**
+ * Calcula a quantidade de pixels que representa um segundo na timeline,
+ * levando em conta o BPM e o nível de zoom atual.
+ * @returns {number} A quantidade de pixels por segundo.
+ */
+export function getPixelsPerSecond() {
+ const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
+ const stepsPerSecond = (bpm / 60) * 4;
+ const zoomFactor = ZOOM_LEVELS[appState.global.zoomLevelIndex];
+ return stepsPerSecond * PIXELS_PER_STEP * zoomFactor;
+}
+
+/**
+ * Calcula o número total de steps no sequenciador de patterns.
+ * @returns {number} O número total de steps.
+ */
export function getTotalSteps() {
const barsInput = document.getElementById("bars-input");
const compassoAInput = document.getElementById("compasso-a-input");
@@ -13,19 +31,29 @@ export function getTotalSteps() {
return numberOfBars * beatsPerBar * subdivisions;
}
+/**
+ * Garante que apenas números sejam inseridos em um campo de input.
+ * @param {Event} event - O evento de input.
+ */
export function enforceNumericInput(event) {
event.target.value = event.target.value.replace(/[^0-9]/g, "");
}
+/**
+ * Ajusta o valor de um elemento de input com base em um passo (step),
+ * respeitando os limites de min/max definidos no elemento.
+ * @param {HTMLInputElement} inputElement - O elemento de input a ser ajustado.
+ * @param {number} step - O valor a ser adicionado (pode ser negativo).
+ */
export function adjustValue(inputElement, step) {
let currentValue = parseInt(inputElement.value, 10) || 0;
let min = parseInt(inputElement.dataset.min, 10);
let max = parseInt(inputElement.dataset.max, 10);
let newValue = currentValue + step;
+
if (!isNaN(min) && newValue < min) newValue = min;
if (!isNaN(max) && newValue > max) newValue = max;
- inputElement.value = newValue;
- // Dispara um evento 'input' para que outros listeners (como o que redesenha o sequenciador) sejam acionados.
+ inputElement.value = newValue;
inputElement.dispatchEvent(new Event("input", { bubbles: true }));
}
\ No newline at end of file
diff --git a/assets/js/creations/waveform.js b/assets/js/creations/waveform.js
index 8504f1c..796d7c7 100644
--- a/assets/js/creations/waveform.js
+++ b/assets/js/creations/waveform.js
@@ -2,44 +2,61 @@
/**
* Desenha a forma de onda de um AudioBuffer em um elemento Canvas.
+ * Pode desenhar apenas um segmento específico do buffer.
* @param {HTMLCanvasElement} canvas - O elemento canvas onde o desenho será feito.
* @param {AudioBuffer} audioBuffer - O buffer de áudio decodificado da faixa.
* @param {string} color - A cor da forma de onda (ex: '#2ecc71').
+ * @param {number} [offset=0] - O tempo em segundos de onde começar a desenhar no AudioBuffer.
+ * @param {number} [duration] - A duração em segundos do segmento a ser desenhado.
*/
-export function drawWaveform(canvas, audioBuffer, color) {
+export function drawWaveform(canvas, audioBuffer, color, offset = 0, duration) {
if (!canvas || !audioBuffer) return;
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
- const channelData = audioBuffer.getChannelData(0); // Pega os dados do primeiro canal
- const step = Math.ceil(channelData.length / width);
- const amp = height / 2; // Amplitude máxima do desenho
+ const channelData = audioBuffer.getChannelData(0);
+ const sampleRate = audioBuffer.sampleRate;
- ctx.clearRect(0, 0, width, height); // Limpa o canvas
+ // Se a duração não for fornecida, usa a duração total a partir do offset
+ const finalDuration = duration || (audioBuffer.duration - offset);
+
+ // Calcula os índices de início e fim no array de dados do áudio
+ const startIndex = Math.floor(offset * sampleRate);
+ const endIndex = Math.floor((offset + finalDuration) * sampleRate);
+ const totalSamplesInSegment = endIndex - startIndex;
+
+ const step = Math.ceil(totalSamplesInSegment / width);
+ const amp = height / 2;
+
+ ctx.clearRect(0, 0, width, height);
ctx.strokeStyle = color;
- ctx.lineWidth = 2;
+ ctx.lineWidth = 1;
ctx.beginPath();
+ // Desenha a linha do meio (zero amplitude)
+ ctx.moveTo(0, amp);
+ ctx.lineTo(width, amp);
+
for (let i = 0; i < width; i++) {
let min = 1.0;
let max = -1.0;
- // Encontra o valor mínimo e máximo para um bloco de amostras
for (let j = 0; j < step; j++) {
- const datum = channelData[(i * step) + j];
- if (datum < min) {
- min = datum;
- }
- if (datum > max) {
- max = datum;
+ // --- CORREÇÃO CRÍTICA AQUI ---
+ // Calcula o índice da amostra considerando o startIndex do segmento
+ const sampleIndex = startIndex + (i * step) + j;
+ if (sampleIndex < channelData.length) {
+ const datum = channelData[sampleIndex];
+ if (datum < min) min = datum;
+ if (datum > max) max = datum;
}
}
- // Desenha a linha vertical para aquele ponto no tempo
const x = i;
- const y_max = (1 + max) * amp;
- const y_min = (1 + min) * amp;
+ // Ajusta o desenho para ser centrado verticalmente
+ const y_max = (1 - max) * amp;
+ const y_min = (1 - min) * amp;
ctx.moveTo(x, y_max);
ctx.lineTo(x, y_min);
diff --git a/creation.html b/creation.html
index a9dbea9..f981238 100644
--- a/creation.html
+++ b/creation.html
@@ -99,7 +99,7 @@
@@ -123,42 +123,72 @@
Editor de Amostras de Áudio
+
+
+
+
-
+
+
+
+
+