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);
-      if(el) el.value = (id === "bars-input") ? 1 : 4;
+    if (el) el.value = id === "bars-input" ? 1 : 4;
   });
 
   renderAll();
@@ -90,7 +90,12 @@ export async function loadProjectFromServer(fileName) {
 // =================================================================
 // FUNÇÃO AUXILIAR: PARSE DE INSTRUMENTO ÚNICO
 // =================================================================
-function parseInstrumentNode(trackNode, sortedBBTrackNameNodes, pathMap, parentBasslineId = null) {
+function parseInstrumentNode(
+  trackNode,
+  sortedBBTrackNameNodes,
+  pathMap,
+  parentBasslineId = null
+) {
   const instrumentNode = trackNode.querySelector("instrument");
   const instrumentTrackNode = trackNode.querySelector("instrumenttrack");
 
@@ -99,32 +104,42 @@ function parseInstrumentNode(trackNode, sortedBBTrackNameNodes, pathMap, parentB
   const trackName = trackNode.getAttribute("name");
   const instrumentName = instrumentNode.getAttribute("name");
 
-    // Lógica de Patterns
+  // 1. Coleta TODOS os patterns reais dentro do XML do instrumento
   const allPatternsNodeList = trackNode.querySelectorAll("pattern");
   const allPatternsArray = Array.from(allPatternsNodeList).sort((a, b) => {
-      return (parseInt(a.getAttribute("pos"), 10) || 0) - (parseInt(b.getAttribute("pos"), 10) || 0);
+    return (
+      (parseInt(a.getAttribute("pos"), 10) || 0) -
+      (parseInt(b.getAttribute("pos"), 10) || 0)
+    );
   });
 
-    const patternsToCreate = sortedBBTrackNameNodes.length > 0
+  // 2. CORREÇÃO PRINCIPAL:
-        ? sortedBBTrackNameNodes
+  // O loop deve ser baseado nos patterns existentes no XML, não nos blocos da timeline (bbtco).
-        : [{ getAttribute: () => "Pattern 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];
 
-    const patterns = patternsToCreate.map((bbTrack, index) => {
+  const patterns = loopSource.map((patternNode, index) => {
-      const patternNode = allPatternsArray[index];
+    // Tenta pegar o nome do bloco correspondente na timeline, se existir, senão gera um genérico
-      const bbTrackName = bbTrack.getAttribute("name") || `Pattern ${index + 1}`;
+    const bbTrackName =
+      sortedBBTrackNameNodes[index] &&
+      sortedBBTrackNameNodes[index].getAttribute("name")
+        ? sortedBBTrackNameNodes[index].getAttribute("name")
+        : `Pattern ${index + 1}`;
 
     if (!patternNode) {
-        return { name: bbTrackName, steps: new Array(16).fill(false), notes: [], pos: 0 };
+      return {
+        name: bbTrackName,
+        steps: new Array(16).fill(false),
+        notes: [],
+        pos: 0,
+      };
     }
 
     const patternSteps = parseInt(patternNode.getAttribute("steps"), 10) || 16;
     const steps = new Array(patternSteps).fill(false);
     const notes = [];
 
-      // === CORREÇÃO MATEMÁTICA ===
+    const ticksPerStep = 48; // 192 / 4
-      // 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);
@@ -136,8 +151,12 @@ function parseInstrumentNode(trackNode, sortedBBTrackNameNodes, pathMap, parentB
         pan: parseInt(noteNode.getAttribute("pan"), 10),
       });
 
-        // Calcula qual quadradinho acender
+      // Calcula o step visual (para o beat editor)
-        const stepIndex = Math.round(pos / ticksPerStep);
+      // 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;
     });
 
@@ -149,7 +168,7 @@ function parseInstrumentNode(trackNode, sortedBBTrackNameNodes, pathMap, parentB
     };
   });
 
-    // Lógica de Sample vs Plugin
+  // Lógica de Sample vs Plugin (mantida igual)
   let finalSamplePath = null;
   let trackType = "plugin";
 
@@ -162,7 +181,9 @@ function parseInstrumentNode(trackNode, sortedBBTrackNameNodes, pathMap, parentB
       if (pathMap[filename]) {
         finalSamplePath = pathMap[filename];
       } else {
-          let cleanSrc = sampleSrc.startsWith("samples/") ? sampleSrc.substring("samples/".length) : sampleSrc;
+        let cleanSrc = sampleSrc.startsWith("samples/")
+          ? sampleSrc.substring("samples/".length)
+          : sampleSrc;
         finalSamplePath = `src/samples/${cleanSrc}`;
       }
     }
@@ -176,13 +197,13 @@ function parseInstrumentNode(trackNode, sortedBBTrackNameNodes, pathMap, parentB
     name: trackName,
     type: trackType,
     samplePath: finalSamplePath,
-      patterns: patterns,
+    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 // Guarda o ID do pai para filtragem na UI
+    parentBasslineId: parentBasslineId,
   };
 }
 
@@ -209,7 +230,7 @@ export async function parseMmpContent(xmlString) {
   if (head) {
     const setVal = (id, attr, def) => {
       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,11 +258,15 @@ 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
@@ -244,16 +274,21 @@ export async function parseMmpContent(xmlString) {
 
   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(
+        trackNode.querySelectorAll(":scope > bbtco")
+      ).map((bbtco) => {
         return {
           pos: parseInt(bbtco.getAttribute("pos"), 10) || 0,
           len: parseInt(bbtco.getAttribute("len"), 10) || 192,
-              name: trackName 
+          name: trackName,
         };
       });
 
@@ -261,11 +296,20 @@ export async function parseMmpContent(xmlString) {
       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);
@@ -279,9 +323,10 @@ export async function parseMmpContent(xmlString) {
         volume: 1,
         pan: 0,
         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
@@ -291,11 +336,15 @@ export async function parseMmpContent(xmlString) {
   // 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.pannerNode = new Tone.Panner(track.pan);
       track.volumeNode.connect(track.pannerNode);
@@ -305,13 +354,17 @@ export async function parseMmpContent(xmlString) {
 
   // 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];
-          if (activePattern && activePattern.steps && activePattern.steps.length > 0) {
+      if (
+        activePattern &&
+        activePattern.steps &&
+        activePattern.steps.length > 0
+      ) {
         const bars = Math.ceil(activePattern.steps.length / 16);
         const barsInput = document.getElementById("bars-input");
-              if(barsInput) barsInput.value = bars > 0 ? bars : 1;
+        if (barsInput) barsInput.value = bars > 0 ? bars : 1;
         isFirstTrackWithNotes = false;
       }
     }
@@ -320,8 +373,8 @@ export async function parseMmpContent(xmlString) {
   // 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);
@@ -331,7 +384,7 @@ export async function parseMmpContent(xmlString) {
   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>`;
     })

creation.html

@@ -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"
@@ -619,13 +624,13 @@
       //  quando se clica duas vezes num clipe da playlist.
       // =======================================================
 
-      window.openPatternEditor = function(basslineTrack) {
+      window.openPatternEditor = function (basslineTrack) {
         console.log("Abrindo editor para:", basslineTrack.track_name);
 
         const nameContainer = document.getElementById("track-container");
         const stepsContainer = document.getElementById("sequencer-grid");
 
-          if(!nameContainer || !stepsContainer) return;
+        if (!nameContainer || !stepsContainer) return;
 
         nameContainer.innerHTML = "";
         stepsContainer.innerHTML = "";
@@ -633,34 +638,40 @@
         const instruments = basslineTrack.instruments || [];
 
         if (instruments.length === 0) {
-              nameContainer.innerHTML = "<div style='padding:10px; color:#ccc'>Nenhum instrumento.</div>";
+          nameContainer.innerHTML =
+            "<div style='padding:10px; color:#ccc'>Nenhum instrumento.</div>";
           return;
         }
 
-          instruments.forEach(inst => {
+        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";
+          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) {
-                  // Tenta encontrar um pattern que tenha pelo menos uma nota 'true'
+            // Cria um array base de 16 steps (ou maior se quiser suportar 32/64)
-                  const activePattern = inst.patterns.find(p => p.steps.some(s => s === true));
+            stepData = new Array(16).fill(false);
 
-                  if (activePattern) {
+            inst.patterns.forEach((p) => {
-                      // Se achou um com notas, usa ele
+              // Mescla os steps desse pattern no array principal visual
-                      stepData = activePattern.steps;
+              if (p.steps) {
-                  } else {
+                p.steps.forEach((isActive, idx) => {
-                      // Se todos estão vazios, usa o primeiro mesmo
+                  if (isActive && idx < 16) stepData[idx] = true;
-                      stepData = inst.patterns[0].steps;
+                });
               }
+            });
           } else {
             stepData = Array(16).fill(false);
           }
@@ -675,13 +686,13 @@
 
             stepBtn.addEventListener("click", () => {
               const newState = !stepBtn.classList.contains("active");
-                      if(newState) stepBtn.classList.add("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) {
+              if (inst.patterns && inst.patterns.length > 0) {
-                          inst.patterns.forEach(p => {
+                inst.patterns.forEach((p) => {
-                              if(p.steps[index] !== undefined) p.steps[index] = newState;
+                  if (p.steps[index] !== undefined) p.steps[index] = newState;
                 });
               }
             });
@@ -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();
           });
@@ -933,7 +945,7 @@
             try {
               const response = await fetch("/api/upload/sample", {
                 method: "POST",
-                body: formData
+                body: formData,
               });
 
               const result = await response.json();
@@ -943,7 +955,6 @@
               } else {
                 alert("Erro ao enviar: " + (result.error || "Desconhecido"));
               }
-
             } catch (error) {
               console.error("Erro no upload:", error);
               alert("Erro de conexão com o servidor.");