v1.0.13 - botao de reset funcional para limpar as salas

assets/js/creations/audio/audio_ui.js

@@ -320,7 +320,7 @@ export function renderAudioEditor() {
     grid.style.setProperty("--bar-width", `${barWidthPx}px`);
   });
 
-  // Render Clips (sem alterações)
+  // Render Clips (MODIFICADO)
   appState.audio.clips.forEach((clip) => {
     const parentGrid = newTrackContainer.querySelector(
       `.audio-track-lane[data-track-id="${clip.trackId}"] .spectrogram-view-grid`
@@ -342,8 +342,44 @@ export function renderAudioEditor() {
     let pitchStr =
       clip.pitch > 0 ? `+${clip.pitch.toFixed(1)}` : `${clip.pitch.toFixed(1)}`;
     if (clip.pitch === 0) pitchStr = "";
+
+    // Define o HTML base (sem a visualização de steps ainda)
     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> `;
+
+    // --- INÍCIO DA MODIFICAÇÃO (Passo 4: Desenhar Steps) ---
+    // (Fazemos isso DEPOIS de definir o innerHTML)
+
+    // 1. Verifica se este clipe tem os dados da "partitura" (steps)
+    if (
+      clip.patternData &&
+      Array.isArray(clip.patternData) &&
+      clip.patternData.length > 0
+    ) {
+      // 2. Adiciona a classe CSS principal (do creation.html)
+      clipElement.classList.add("pattern-clip");
+
+      // 3. Determina o número de steps (do primeiro array de trilha)
+      //    Assumimos que todos têm o mesmo comprimento, pois vieram do mesmo pattern.
+      const totalSteps = clip.patternData[0]?.length || 0;
+
+      if (totalSteps > 0) {
+        // 4. Chama a nova função (adicionada no final deste arquivo)
+        //    para construir o HTML da visualização
+        const patternViewEl = createPatternViewElement(
+          clip.patternData,
+          totalSteps
+        );
+
+        // 5. Adiciona a visualização ao clipe
+        //    (O CSS .pattern-clip-view o posicionará sobre o canvas)
+        clipElement.appendChild(patternViewEl);
+      }
+    }
+    // --- FIM DA MODIFICAÇÃO ---
+
     parentGrid.appendChild(clipElement);
+
+    // Renderização do Canvas (Waveform)
     if (clip.buffer) {
       const canvas = clipElement.querySelector(".waveform-canvas-clip");
       const canvasWidth = (clip.durationInSeconds || 0) * pixelsPerSecond;
@@ -365,6 +401,8 @@ export function renderAudioEditor() {
         );
       }
     }
+
+    // Wheel listener (pitch)
     clipElement.addEventListener("wheel", (e) => {
       e.preventDefault();
       const clipToUpdate = appState.audio.clips.find(
@@ -817,3 +855,57 @@ export function resetPlayheadVisual() {
     ph.style.left = "0px";
   });
 }
+
+// --- INÍCIO DA NOVA FUNÇÃO (Passo 4: A Função de Desenho) ---
+// (Adicionada ao final de audio_ui.js)
+
+/**
+ * Cria o elemento HTML (e seus filhos) para a visualização
+ * dos steps de um pattern clip.
+ * * @param {Array<Array<boolean>>} patternData - ex: [[true, false], [true, true]]
+ * @returns {HTMLElement} Um <div> com a classe 'pattern-clip-view'
+ */
+function createPatternViewElement(patternData) {
+  const view = document.createElement("div");
+  view.className = "pattern-clip-view"; // (do creation.html)
+
+  // Filtra trilhas que possam ser vazias ou inválidas no array
+  const validTracksData = patternData.filter(
+    (steps) => Array.isArray(steps) && steps.length > 0
+  );
+
+  // Encontra o total de steps (usando a trilha mais longa como referência)
+  const totalSteps = validTracksData.reduce(
+    (max, steps) => Math.max(max, steps.length),
+    0
+  );
+  if (totalSteps === 0) return view; // Retorna view vazia se não houver steps
+
+  validTracksData.forEach((trackSteps) => {
+    const row = document.createElement("div");
+    row.className = "pattern-clip-track-row"; // (do creation.html)
+
+    // Calcula a largura de cada step como porcentagem
+    const stepWidthPercent = (1 / totalSteps) * 100;
+
+    for (let i = 0; i < totalSteps; i++) {
+      // Se o step[i] for true, desenha a nota
+      if (trackSteps[i] === true) {
+        const note = document.createElement("div");
+        note.className = "pattern-step-note"; // (do creation.html)
+
+        // Define a posição (left) e a largura (width) em porcentagem
+        // Isso permite que o clip seja redimensionado (stretch)
+        // e as notas se ajustem.
+        note.style.left = `${(i / totalSteps) * 100}%`;
+        note.style.width = `${stepWidthPercent}%`;
+
+        row.appendChild(note);
+      }
+    }
+    view.appendChild(row);
+  });
+
+  return view;
+}
+// --- FIM DA NOVA FUNÇÃO ---