melhorando a leitura de projetos no mmpCreator

assets/js/creations/file.js

@@ -35,11 +35,11 @@ export function handleLocalProjectReset() {
   resetProjectState();
 
   const bpmInput = document.getElementById("bpm-input");
-  if(bpmInput) bpmInput.value = 140;
+  if (bpmInput) bpmInput.value = 140;
-  
+
-  ["bars-input", "compasso-a-input", "compasso-b-input"].forEach(id => {
+  ["bars-input", "compasso-a-input", "compasso-b-input"].forEach((id) => {
-      const el = document.getElementById(id);
+    const el = document.getElementById(id);
-      if(el) el.value = (id === "bars-input") ? 1 : 4;
+    if (el) el.value = id === "bars-input" ? 1 : 4;
   });
 
   renderAll();
@@ -90,100 +90,121 @@ export async function loadProjectFromServer(fileName) {
 // =================================================================
 // FUNÇÃO AUXILIAR: PARSE DE INSTRUMENTO ÚNICO
 // =================================================================
-function parseInstrumentNode(trackNode, sortedBBTrackNameNodes, pathMap, parentBasslineId = null) {
+function parseInstrumentNode(
-    const instrumentNode = trackNode.querySelector("instrument");
+  trackNode,
-    const instrumentTrackNode = trackNode.querySelector("instrumenttrack");
+  sortedBBTrackNameNodes,
-    
+  pathMap,
-    if (!instrumentNode || !instrumentTrackNode) return null;
+  parentBasslineId = null
+) {
+  const instrumentNode = trackNode.querySelector("instrument");
+  const instrumentTrackNode = trackNode.querySelector("instrumenttrack");
 
-    const trackName = trackNode.getAttribute("name");
+  if (!instrumentNode || !instrumentTrackNode) return null;
-    const instrumentName = instrumentNode.getAttribute("name");
 
-    // Lógica de Patterns
+  const trackName = trackNode.getAttribute("name");
-    const allPatternsNodeList = trackNode.querySelectorAll("pattern");
+  const instrumentName = instrumentNode.getAttribute("name");
-    const allPatternsArray = Array.from(allPatternsNodeList).sort((a, b) => {
-      return (parseInt(a.getAttribute("pos"), 10) || 0) - (parseInt(b.getAttribute("pos"), 10) || 0);
-    });
 
-    const patternsToCreate = sortedBBTrackNameNodes.length > 0
+  // 1. Coleta TODOS os patterns reais dentro do XML do instrumento
-        ? sortedBBTrackNameNodes
+  const allPatternsNodeList = trackNode.querySelectorAll("pattern");
-        : [{ getAttribute: () => "Pattern 1" }];
+  const allPatternsArray = Array.from(allPatternsNodeList).sort((a, b) => {
+    return (
+      (parseInt(a.getAttribute("pos"), 10) || 0) -
+      (parseInt(b.getAttribute("pos"), 10) || 0)
+    );
+  });
 
-    const patterns = patternsToCreate.map((bbTrack, index) => {
+  // 2. CORREÇÃO PRINCIPAL:
-      const patternNode = allPatternsArray[index];
+  // O loop deve ser baseado nos patterns existentes no XML, não nos blocos da timeline (bbtco).
-      const bbTrackName = bbTrack.getAttribute("name") || `Pattern ${index + 1}`;
+  // Se não houver patterns no XML (instrumento vazio), criamos um array com 1 item para gerar o pattern default.
+  const loopSource = allPatternsArray.length > 0 ? allPatternsArray : [null];
 
-      if (!patternNode) {
+  const patterns = loopSource.map((patternNode, index) => {
-        return { name: bbTrackName, steps: new Array(16).fill(false), notes: [], pos: 0 };
+    // Tenta pegar o nome do bloco correspondente na timeline, se existir, senão gera um genérico
-      }
+    const bbTrackName =
-
+      sortedBBTrackNameNodes[index] &&
-      const patternSteps = parseInt(patternNode.getAttribute("steps"), 10) || 16;
+      sortedBBTrackNameNodes[index].getAttribute("name")
-      const steps = new Array(patternSteps).fill(false);
+        ? sortedBBTrackNameNodes[index].getAttribute("name")
-      const notes = [];
+        : `Pattern ${index + 1}`;
-      
-      // === CORREÇÃO MATEMÁTICA ===
-      // No LMMS, 1 semínima (beat) = 192 ticks.
-      // 1 semicolcheia (1/16 step) = 192 / 4 = 48 ticks.
-      const ticksPerStep = 48;
-
-      patternNode.querySelectorAll("note").forEach((noteNode) => {
-        const pos = parseInt(noteNode.getAttribute("pos"), 10);
-        notes.push({
-          pos: pos,
-          len: parseInt(noteNode.getAttribute("len"), 10),
-          key: parseInt(noteNode.getAttribute("key"), 10),
-          vol: parseInt(noteNode.getAttribute("vol"), 10),
-          pan: parseInt(noteNode.getAttribute("pan"), 10),
-        });
-        
-        // Calcula qual quadradinho acender
-        const stepIndex = Math.round(pos / ticksPerStep);
-        if (stepIndex < patternSteps) steps[stepIndex] = true;
-      });
 
+    if (!patternNode) {
       return {
         name: bbTrackName,
-        steps: steps,
+        steps: new Array(16).fill(false),
-        notes: notes,
+        notes: [],
-        pos: parseInt(patternNode.getAttribute("pos"), 10) || 0,
+        pos: 0,
       };
-    });
-
-    // Lógica de Sample vs Plugin
-    let finalSamplePath = null;
-    let trackType = "plugin";
-
-    if (instrumentName === "audiofileprocessor") {
-      trackType = "sampler";
-      const afpNode = instrumentNode.querySelector("audiofileprocessor");
-      const sampleSrc = afpNode ? afpNode.getAttribute("src") : null;
-      if (sampleSrc) {
-        const filename = sampleSrc.split("/").pop();
-        if (pathMap[filename]) {
-          finalSamplePath = pathMap[filename];
-        } else {
-          let cleanSrc = sampleSrc.startsWith("samples/") ? sampleSrc.substring("samples/".length) : sampleSrc;
-          finalSamplePath = `src/samples/${cleanSrc}`;
-        }
-      }
     }
 
-    const volFromFile = parseFloat(instrumentTrackNode.getAttribute("vol"));
+    const patternSteps = parseInt(patternNode.getAttribute("steps"), 10) || 16;
-    const panFromFile = parseFloat(instrumentTrackNode.getAttribute("pan"));
+    const steps = new Array(patternSteps).fill(false);
+    const notes = [];
+
+    const ticksPerStep = 48; // 192 / 4
+
+    patternNode.querySelectorAll("note").forEach((noteNode) => {
+      const pos = parseInt(noteNode.getAttribute("pos"), 10);
+      notes.push({
+        pos: pos,
+        len: parseInt(noteNode.getAttribute("len"), 10),
+        key: parseInt(noteNode.getAttribute("key"), 10),
+        vol: parseInt(noteNode.getAttribute("vol"), 10),
+        pan: parseInt(noteNode.getAttribute("pan"), 10),
+      });
+
+      // Calcula o step visual (para o beat editor)
+      // Se o pos for > patternSteps * 48 (ex: compasso 2), precisamos normalizar se quisermos mostrar tudo junto
+      // Mas para manter simples, pegamos o relativo:
+      const relativePos = pos % (patternSteps * ticksPerStep);
+      const stepIndex = Math.round(relativePos / ticksPerStep);
+
+      if (stepIndex < patternSteps) steps[stepIndex] = true;
+    });
 
     return {
-      id: Date.now() + Math.random(),
+      name: bbTrackName,
-      name: trackName,
+      steps: steps,
-      type: trackType,
+      notes: notes,
-      samplePath: finalSamplePath,
+      pos: parseInt(patternNode.getAttribute("pos"), 10) || 0,
-      patterns: patterns,
-      activePatternIndex: 0,
-      volume: !isNaN(volFromFile) ? volFromFile / 100 : DEFAULT_VOLUME,
-      pan: !isNaN(panFromFile) ? panFromFile / 100 : DEFAULT_PAN,
-      instrumentName: instrumentName,
-      instrumentXml: instrumentNode.innerHTML,
-      parentBasslineId: parentBasslineId // Guarda o ID do pai para filtragem na UI
     };
+  });
+
+  // Lógica de Sample vs Plugin (mantida igual)
+  let finalSamplePath = null;
+  let trackType = "plugin";
+
+  if (instrumentName === "audiofileprocessor") {
+    trackType = "sampler";
+    const afpNode = instrumentNode.querySelector("audiofileprocessor");
+    const sampleSrc = afpNode ? afpNode.getAttribute("src") : null;
+    if (sampleSrc) {
+      const filename = sampleSrc.split("/").pop();
+      if (pathMap[filename]) {
+        finalSamplePath = pathMap[filename];
+      } else {
+        let cleanSrc = sampleSrc.startsWith("samples/")
+          ? sampleSrc.substring("samples/".length)
+          : sampleSrc;
+        finalSamplePath = `src/samples/${cleanSrc}`;
+      }
+    }
+  }
+
+  const volFromFile = parseFloat(instrumentTrackNode.getAttribute("vol"));
+  const panFromFile = parseFloat(instrumentTrackNode.getAttribute("pan"));
+
+  return {
+    id: Date.now() + Math.random(),
+    name: trackName,
+    type: trackType,
+    samplePath: finalSamplePath,
+    patterns: patterns, // Agora contém TODAS as patterns (pos 0, 192, etc)
+    activePatternIndex: 0,
+    volume: !isNaN(volFromFile) ? volFromFile / 100 : DEFAULT_VOLUME,
+    pan: !isNaN(panFromFile) ? panFromFile / 100 : DEFAULT_PAN,
+    instrumentName: instrumentName,
+    instrumentXml: instrumentNode.innerHTML,
+    parentBasslineId: parentBasslineId,
+  };
 }
 
 // =================================================================
@@ -203,13 +224,13 @@ export async function parseMmpContent(xmlString) {
   const xmlDoc = parser.parseFromString(xmlString, "application/xml");
 
   appState.global.originalXmlDoc = xmlDoc;
-  
+
   // Configuração Global (BPM, Compasso)
   const head = xmlDoc.querySelector("head");
   if (head) {
     const setVal = (id, attr, def) => {
-        const el = document.getElementById(id);
+      const el = document.getElementById(id);
-        if(el) el.value = head.getAttribute(attr) || def;
+      if (el) el.value = head.getAttribute(attr) || def;
     };
     setVal("bpm-input", "bpm", 140);
     setVal("compasso-a-input", "timesig_numerator", 4);
@@ -223,8 +244,13 @@ export async function parseMmpContent(xmlString) {
   const bbTrackNodes = Array.from(xmlDoc.querySelectorAll('track[type="1"]'));
   let sortedBBTrackNameNodes = [];
   if (bbTrackNodes.length > 0) {
-    sortedBBTrackNameNodes = Array.from(bbTrackNodes[0].querySelectorAll("bbtco")).sort((a, b) => {
+    sortedBBTrackNameNodes = Array.from(
-      return (parseInt(a.getAttribute("pos"), 10) || 0) - (parseInt(b.getAttribute("pos"), 10) || 0);
+      bbTrackNodes[0].querySelectorAll("bbtco")
+    ).sort((a, b) => {
+      return (
+        (parseInt(a.getAttribute("pos"), 10) || 0) -
+        (parseInt(b.getAttribute("pos"), 10) || 0)
+      );
     });
   }
 
@@ -232,96 +258,123 @@ export async function parseMmpContent(xmlString) {
   // 2. EXTRAÇÃO DE INSTRUMENTOS DA RAIZ (SONG EDITOR)
   // -------------------------------------------------------------
   // Pega apenas os instrumentos que estão soltos no Song Editor (não dentro de BBTracks)
-  const songInstrumentNodes = Array.from(xmlDoc.querySelectorAll('song > trackcontainer > track[type="0"]'));
+  const songInstrumentNodes = Array.from(
-  
+    xmlDoc.querySelectorAll('song > trackcontainer > track[type="0"]')
+  );
+
   const songTracks = songInstrumentNodes
-      .map(node => parseInstrumentNode(node, sortedBBTrackNameNodes, pathMap, null)) // null = Sem Pai
+    .map((node) =>
-      .filter(t => t !== null);
+      parseInstrumentNode(node, sortedBBTrackNameNodes, pathMap, null)
+    ) // null = Sem Pai
+    .filter((t) => t !== null);
 
   // -------------------------------------------------------------
   // 3. EXTRAÇÃO DAS TRILHAS DE BASSLINE E SEUS FILHOS
   // -------------------------------------------------------------
-  
+
   let allBasslineInstruments = [];
 
-  const basslineContainers = bbTrackNodes.map(trackNode => {
+  const basslineContainers = bbTrackNodes
+    .map((trackNode) => {
       const trackName = trackNode.getAttribute("name") || "Beat/Bassline";
-      const containerId = `bassline_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      const containerId = `bassline_${Date.now()}_${Math.random()
-      
+        .toString(36)
+        .substr(2, 9)}`;
+
       // A. Extrai os clipes da timeline (blocos azuis)
-      const playlistClips = Array.from(trackNode.querySelectorAll(":scope > bbtco")).map(bbtco => {
+      const playlistClips = Array.from(
-          return {
+        trackNode.querySelectorAll(":scope > bbtco")
-              pos: parseInt(bbtco.getAttribute("pos"), 10) || 0,
+      ).map((bbtco) => {
-              len: parseInt(bbtco.getAttribute("len"), 10) || 192,
+        return {
-              name: trackName 
+          pos: parseInt(bbtco.getAttribute("pos"), 10) || 0,
-          };
+          len: parseInt(bbtco.getAttribute("len"), 10) || 192,
+          name: trackName,
+        };
       });
 
       // Se não tiver clipes, geralmente é container vazio, mas vamos criar mesmo assim
       if (playlistClips.length === 0) return null;
 
       // B. Extrai os instrumentos INTERNOS desta Bassline
-      const internalInstrumentNodes = Array.from(trackNode.querySelectorAll('bbtrack > trackcontainer > track[type="0"]'));
+      const internalInstrumentNodes = Array.from(
-      
+        trackNode.querySelectorAll('bbtrack > trackcontainer > track[type="0"]')
+      );
+
       const internalInstruments = internalInstrumentNodes
-          .map(node => parseInstrumentNode(node, sortedBBTrackNameNodes, pathMap, containerId)) // Passa ID do Pai
+        .map((node) =>
-          .filter(t => t !== null);
+          parseInstrumentNode(
+            node,
+            sortedBBTrackNameNodes,
+            pathMap,
+            containerId
+          )
+        ) // Passa ID do Pai
+        .filter((t) => t !== null);
 
       // Acumula na lista geral de instrumentos
       allBasslineInstruments.push(...internalInstruments);
 
       return {
-          id: containerId,
+        id: containerId,
-          name: trackName,
+        name: trackName,
-          type: "bassline", // Tipo especial para o audio_ui.js
+        type: "bassline", // Tipo especial para o audio_ui.js
-          playlist_clips: playlistClips,
+        playlist_clips: playlistClips,
-          instruments: internalInstruments, // Mantém referência
+        instruments: internalInstruments, // Mantém referência
-          volume: 1, 
+        volume: 1,
-          pan: 0,
+        pan: 0,
-          patterns: [],
+        patterns: [],
-          isMuted: trackNode.getAttribute("muted") === "1"
+        isMuted: trackNode.getAttribute("muted") === "1",
       };
-  }).filter(t => t !== null);
+    })
+    .filter((t) => t !== null);
 
   // -------------------------------------------------------------
   // 4. COMBINAÇÃO E FINALIZAÇÃO
   // -------------------------------------------------------------
-  
+
   // A lista final plana contém TODOS:
   // 1. Instrumentos da Raiz
   // 2. Instrumentos dentro de Basslines
   // 3. As próprias Basslines (Containers)
-  const newTracks = [...songTracks, ...allBasslineInstruments, ...basslineContainers];
+  const newTracks = [
+    ...songTracks,
+    ...allBasslineInstruments,
+    ...basslineContainers,
+  ];
 
   // Inicializa áudio apenas para instrumentos reais
   newTracks.forEach((track) => {
-    if (track.type !== 'bassline') {
+    if (track.type !== "bassline") {
-        track.volumeNode = new Tone.Volume(Tone.gainToDb(track.volume));
+      track.volumeNode = new Tone.Volume(Tone.gainToDb(track.volume));
-        track.pannerNode = new Tone.Panner(track.pan);
+      track.pannerNode = new Tone.Panner(track.pan);
-        track.volumeNode.connect(track.pannerNode);
+      track.volumeNode.connect(track.pannerNode);
-        track.pannerNode.connect(getMainGainNode());
+      track.pannerNode.connect(getMainGainNode());
     }
   });
 
   // Configura tamanho da timeline
   let isFirstTrackWithNotes = true;
-  newTracks.forEach(track => {
+  newTracks.forEach((track) => {
-      if (track.type !== 'bassline' && isFirstTrackWithNotes) {
+    if (track.type !== "bassline" && isFirstTrackWithNotes) {
-          const activePattern = track.patterns[track.activePatternIndex || 0];
+      const activePattern = track.patterns[track.activePatternIndex || 0];
-          if (activePattern && activePattern.steps && activePattern.steps.length > 0) {
+      if (
-              const bars = Math.ceil(activePattern.steps.length / 16);
+        activePattern &&
-              const barsInput = document.getElementById("bars-input");
+        activePattern.steps &&
-              if(barsInput) barsInput.value = bars > 0 ? bars : 1;
+        activePattern.steps.length > 0
-              isFirstTrackWithNotes = false;
+      ) {
-          }
+        const bars = Math.ceil(activePattern.steps.length / 16);
+        const barsInput = document.getElementById("bars-input");
+        if (barsInput) barsInput.value = bars > 0 ? bars : 1;
+        isFirstTrackWithNotes = false;
       }
+    }
   });
 
   // Carrega samples/plugins
   try {
     const promises = newTracks
-        .filter(t => t.type !== 'bassline') 
+      .filter((t) => t.type !== "bassline")
-        .map(track => loadAudioForTrack(track));
+      .map((track) => loadAudioForTrack(track));
     await Promise.all(promises);
   } catch (error) {
     console.error("Erro ao carregar áudios:", error);
@@ -330,8 +383,8 @@ export async function parseMmpContent(xmlString) {
   // Atualiza estado global
   appState.pattern.tracks = newTracks;
   appState.pattern.focusedBasslineId = null; // Reseta o foco
-  
+
-  const firstInst = newTracks.find(t => t.type !== 'bassline');
+  const firstInst = newTracks.find((t) => t.type !== "bassline");
   appState.pattern.activeTrackId = firstInst ? firstInst.id : null;
   appState.pattern.activePatternIndex = 0;
 
@@ -367,22 +420,38 @@ function generateXmlFromState() {
 
   if (head) {
     head.setAttribute("bpm", document.getElementById("bpm-input").value || 140);
-    head.setAttribute("num_bars", document.getElementById("bars-input").value || 1);
+    head.setAttribute(
-    head.setAttribute("timesig_numerator", document.getElementById("compasso-a-input").value || 4);
+      "num_bars",
-    head.setAttribute("timesig_denominator", document.getElementById("compasso-b-input").value || 4);
+      document.getElementById("bars-input").value || 1
+    );
+    head.setAttribute(
+      "timesig_numerator",
+      document.getElementById("compasso-a-input").value || 4
+    );
+    head.setAttribute(
+      "timesig_denominator",
+      document.getElementById("compasso-b-input").value || 4
+    );
   }
 
   // Exportação Simplificada: Coloca todos os instrumentos reais no primeiro container
-  const bbTrackContainer = xmlDoc.querySelector('track[type="1"] > bbtrack > trackcontainer');
+  const bbTrackContainer = xmlDoc.querySelector(
+    'track[type="1"] > bbtrack > trackcontainer'
+  );
   if (bbTrackContainer) {
-    bbTrackContainer.querySelectorAll('track[type="0"]').forEach((node) => node.remove());
+    bbTrackContainer
-    
+      .querySelectorAll('track[type="0"]')
+      .forEach((node) => node.remove());
+
     const tracksXml = appState.pattern.tracks
-      .filter(t => t.type !== 'bassline') 
+      .filter((t) => t.type !== "bassline")
       .map((track) => createTrackXml(track))
       .join("");
 
-    const tempDoc = new DOMParser().parseFromString(`<root>${tracksXml}</root>`, "application/xml");
+    const tempDoc = new DOMParser().parseFromString(
+      `<root>${tracksXml}</root>`,
+      "application/xml"
+    );
     Array.from(tempDoc.documentElement.children).forEach((newTrackNode) => {
       bbTrackContainer.appendChild(newTrackNode);
     });
@@ -407,15 +476,24 @@ function createTrackXml(track) {
   const lmmsPan = Math.round(track.pan * 100);
 
   const instrName = track.instrumentName || "kicker";
-  const instrXml = track.instrumentXml || `<kicker><env amt="0" attack="0.01" hold="0.1" decay="0.1" release="0.1" sustain="0.5" sync_mode="0"/></kicker>`;
+  const instrXml =
+    track.instrumentXml ||
+    `<kicker><env amt="0" attack="0.01" hold="0.1" decay="0.1" release="0.1" sustain="0.5" sync_mode="0"/></kicker>`;
 
   const patternsXml = track.patterns
     .map((pattern) => {
       let patternNotesXml = "";
 
-      if (track.type === "plugin" && pattern.notes && pattern.notes.length > 0) {
+      if (
+        track.type === "plugin" &&
+        pattern.notes &&
+        pattern.notes.length > 0
+      ) {
         patternNotesXml = pattern.notes
-          .map((note) => `<note vol="${note.vol}" len="${note.len}" pos="${note.pos}" pan="${note.pan}" key="${note.key}"/>`)
+          .map(
+            (note) =>
+              `<note vol="${note.vol}" len="${note.len}" pos="${note.pos}" pan="${note.pan}" key="${note.key}"/>`
+          )
           .join("\n                ");
       } else if (pattern.steps) {
         patternNotesXml = pattern.steps
@@ -429,7 +507,9 @@ function createTrackXml(track) {
           .join("\n                ");
       }
 
-      return `<pattern type="0" pos="${pattern.pos}" muted="0" steps="${pattern.steps ? pattern.steps.length : 16}" name="${pattern.name}">
+      return `<pattern type="0" pos="${pattern.pos}" muted="0" steps="${
+        pattern.steps ? pattern.steps.length : 16
+      }" name="${pattern.name}">
         ${patternNotesXml}
       </pattern>`;
     })
@@ -469,4 +549,4 @@ function downloadFile(content, fileName) {
   URL.revokeObjectURL(url);
 }
 
-export { generateXmlFromState as generateXmlFromStateExported };
+export { generateXmlFromState as generateXmlFromStateExported };

creation.html

@@ -65,7 +65,7 @@
       }
 
       /* --- NOVOS ESTILOS PARA O BASSLINE EDITOR (Lógica 3) --- */
-      
+
       /* Linha do instrumento (Nome à esquerda) */
       .instrument-row {
         display: flex;
@@ -79,7 +79,7 @@
         font-size: 0.9rem;
         box-sizing: border-box;
       }
-      
+
       /* Linha dos steps (Botões à direita) */
       .steps-row {
         display: flex;
@@ -143,8 +143,13 @@
             title="Salvar Projeto (.mmp)"
           ></i>
           <span style="margin-left: 8px">Salvar projeto</span>
-          <i class="fa-solid fa-file-zipper" id="download-package-btn" title="Baixar Pacote Completo (.zip)" style="margin-left: 15px; color: #ffdd57; cursor: pointer;"></i>
+          <i
-          <span style="margin-left: 8px; color: #ffdd57;">Baixar ZIP</span>
+            class="fa-solid fa-file-zipper"
+            id="download-package-btn"
+            title="Baixar Pacote Completo (.zip)"
+            style="margin-left: 15px; color: #ffdd57; cursor: pointer"
+          ></i>
+          <span style="margin-left: 8px; color: #ffdd57">Baixar ZIP</span>
           <i
             class="fa-solid fa-upload"
             id="upload-sample-btn"
@@ -378,7 +383,7 @@
             </div>
 
             <div id="sequencer-grid" class="sequencer-container"></div>
-            
+
             <div class="tool-icons"></div>
             <div id="timeline-context-menu">
               <div id="copy-clip">Copiar</div>
@@ -395,7 +400,7 @@
               <div id="ruler-set-loop-end">Definir Fim do Loop</div>
             </div>
           </div>
-          
+
           <div id="track-container"></div>
         </div>
 
@@ -618,79 +623,85 @@
       //  Esta função popula a área superior (Beat Editor)
       //  quando se clica duas vezes num clipe da playlist.
       // =======================================================
-      
-      window.openPatternEditor = function(basslineTrack) {
-          console.log("Abrindo editor para:", basslineTrack.track_name);
 
-          const nameContainer = document.getElementById("track-container");
+      window.openPatternEditor = function (basslineTrack) {
-          const stepsContainer = document.getElementById("sequencer-grid"); 
+        console.log("Abrindo editor para:", basslineTrack.track_name);
-          
-          if(!nameContainer || !stepsContainer) return;
 
-          nameContainer.innerHTML = "";
+        const nameContainer = document.getElementById("track-container");
-          stepsContainer.innerHTML = "";
+        const stepsContainer = document.getElementById("sequencer-grid");
 
-          const instruments = basslineTrack.instruments || [];
+        if (!nameContainer || !stepsContainer) return;
 
-          if (instruments.length === 0) {
+        nameContainer.innerHTML = "";
-              nameContainer.innerHTML = "<div style='padding:10px; color:#ccc'>Nenhum instrumento.</div>";
+        stepsContainer.innerHTML = "";
-              return;
+
+        const instruments = basslineTrack.instruments || [];
+
+        if (instruments.length === 0) {
+          nameContainer.innerHTML =
+            "<div style='padding:10px; color:#ccc'>Nenhum instrumento.</div>";
+          return;
+        }
+
+        instruments.forEach((inst) => {
+          // --- A. Nome do Instrumento ---
+          const nameRow = document.createElement("div");
+          nameRow.className = "instrument-row";
+
+          const label = document.createElement("span");
+          label.innerText =
+            inst.instrument_name || inst.plugin_name || "Sem Nome";
+          nameRow.appendChild(label);
+          nameContainer.appendChild(nameRow);
+
+          // --- B. Steps (Correção Aqui) ---
+          let stepData = [];
+
+          // LÓGICA ATUALIZADA DE VISUALIZAÇÃO
+          // Se houver múltiplos patterns (loop longo), combinamos os steps ativos
+          // ou pegamos o pattern que realmente tem notas.
+          if (inst.patterns && inst.patterns.length > 0) {
+            // Cria um array base de 16 steps (ou maior se quiser suportar 32/64)
+            stepData = new Array(16).fill(false);
+
+            inst.patterns.forEach((p) => {
+              // Mescla os steps desse pattern no array principal visual
+              if (p.steps) {
+                p.steps.forEach((isActive, idx) => {
+                  if (isActive && idx < 16) stepData[idx] = true;
+                });
+              }
+            });
+          } else {
+            stepData = Array(16).fill(false);
           }
 
-          instruments.forEach(inst => {
+          const stepsRow = document.createElement("div");
-              // --- A. Nome do Instrumento ---
+          stepsRow.className = "steps-row";
-              const nameRow = document.createElement("div");
-              nameRow.className = "instrument-row";
-              
-              const label = document.createElement("span");
-              label.innerText = inst.instrument_name || inst.plugin_name || "Sem Nome";
-              nameRow.appendChild(label);
-              nameContainer.appendChild(nameRow);
 
-              // --- B. Steps (Correção Aqui) ---
+          stepData.forEach((isActive, index) => {
-              let stepData = [];
+            const stepBtn = document.createElement("div");
-              
+            stepBtn.className = "step-btn";
+            if (isActive) stepBtn.classList.add("active");
+
+            stepBtn.addEventListener("click", () => {
+              const newState = !stepBtn.classList.contains("active");
+              if (newState) stepBtn.classList.add("active");
+              else stepBtn.classList.remove("active");
+
+              // Atualiza na memória (atenção: idealmente atualize todos os patterns desse inst)
               if (inst.patterns && inst.patterns.length > 0) {
-                  // Tenta encontrar um pattern que tenha pelo menos uma nota 'true'
+                inst.patterns.forEach((p) => {
-                  const activePattern = inst.patterns.find(p => p.steps.some(s => s === true));
+                  if (p.steps[index] !== undefined) p.steps[index] = newState;
-                  
+                });
-                  if (activePattern) {
-                      // Se achou um com notas, usa ele
-                      stepData = activePattern.steps;
-                  } else {
-                      // Se todos estão vazios, usa o primeiro mesmo
-                      stepData = inst.patterns[0].steps;
-                  }
-              } else {
-                  stepData = Array(16).fill(false);
               }
+            });
 
-              const stepsRow = document.createElement("div");
+            stepsRow.appendChild(stepBtn);
-              stepsRow.className = "steps-row";
-              
-              stepData.forEach((isActive, index) => {
-                  const stepBtn = document.createElement("div");
-                  stepBtn.className = "step-btn";
-                  if (isActive) stepBtn.classList.add("active");
-
-                  stepBtn.addEventListener("click", () => {
-                      const newState = !stepBtn.classList.contains("active");
-                      if(newState) stepBtn.classList.add("active");
-                      else stepBtn.classList.remove("active");
-
-                      // Atualiza na memória (atenção: idealmente atualize todos os patterns desse inst)
-                      if(inst.patterns && inst.patterns.length > 0) {
-                          inst.patterns.forEach(p => {
-                              if(p.steps[index] !== undefined) p.steps[index] = newState;
-                          });
-                      }
-                  });
-
-                  stepsRow.appendChild(stepBtn);
-              });
-
-              stepsContainer.appendChild(stepsRow);
           });
+
+          stepsContainer.appendChild(stepsRow);
+        });
       };
 
       // --- FUNÇÃO GLOBAL PARA ABRIR O PIANO ROLL (JÁ EXISTENTE) ---
@@ -829,7 +840,7 @@
 
         const newNote = {
           pos: quantizedPos,
-          len: 48, 
+          len: 48,
           key: midiNote,
           vol: 100,
           pan: 0,
@@ -877,7 +888,7 @@
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         const downloadBtn = document.getElementById("download-package-btn");
-        
+
         if (downloadBtn) {
           downloadBtn.addEventListener("click", () => {
             const params = new URLSearchParams(window.location.search);
@@ -889,10 +900,12 @@
               }
               const apiUrl = `/api/download/${projectName}`;
               downloadBtn.style.opacity = "0.5";
-              setTimeout(() => downloadBtn.style.opacity = "1", 500);
+              setTimeout(() => (downloadBtn.style.opacity = "1"), 500);
               window.location.href = apiUrl;
             } else {
-              alert("Nenhum projeto selecionado na URL. Abra ou Salve um projeto primeiro.");
+              alert(
+                "Nenhum projeto selecionado na URL. Abra ou Salve um projeto primeiro."
+              );
             }
           });
         }
@@ -903,7 +916,6 @@
         const sampleInput = document.getElementById("sample-file-input");
 
         if (uploadSampleBtn && sampleInput) {
-          
           uploadSampleBtn.addEventListener("click", () => {
             sampleInput.click();
           });
@@ -913,27 +925,27 @@
 
             const file = sampleInput.files[0];
             const category = prompt(
-              "Em qual categoria este sample se encaixa? (Ex: drums, effects, vocals)", 
+              "Em qual categoria este sample se encaixa? (Ex: drums, effects, vocals)",
               "imported"
             );
 
             if (category === null) {
-              sampleInput.value = ""; 
+              sampleInput.value = "";
               return;
             }
 
             const formData = new FormData();
-            formData.append("sample_file", file); 
+            formData.append("sample_file", file);
-            formData.append("subfolder", category); 
+            formData.append("subfolder", category);
 
             const originalIcon = uploadSampleBtn.className;
-            uploadSampleBtn.className = "fa-solid fa-spinner fa-spin"; 
+            uploadSampleBtn.className = "fa-solid fa-spinner fa-spin";
             uploadSampleBtn.style.pointerEvents = "none";
 
             try {
               const response = await fetch("/api/upload/sample", {
                 method: "POST",
-                body: formData
+                body: formData,
               });
 
               const result = await response.json();
@@ -943,14 +955,13 @@
               } else {
                 alert("Erro ao enviar: " + (result.error || "Desconhecido"));
               }
-
             } catch (error) {
               console.error("Erro no upload:", error);
               alert("Erro de conexão com o servidor.");
             } finally {
               uploadSampleBtn.className = originalIcon;
               uploadSampleBtn.style.pointerEvents = "auto";
-              sampleInput.value = ""; 
+              sampleInput.value = "";
             }
           });
         }
@@ -963,4 +974,4 @@
     <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
     <script src="assets/js/creations/socket.js" type="module"></script>
   </body>
-</html>
+</html>