JotaChina
/
mmpSearch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

melhorando a leitura de projetos no mmpCreator
Deploy / Deploy (push) Successful in 2m44s Details

This commit is contained in:
JotaChina 2025-12-22 18:30:31 -03:00
parent fa69d896bd
commit 3bd714e29d
2 changed files with 324 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

382
assets/js/creations/file.js
View File

@ -35,11 +35,11 @@ export function handleLocalProjectReset() {
resetProjectState();
const bpmInput = document.getElementById("bpm-input");
if(bpmInput) bpmInput.value = 140;
["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 (bpmInput) bpmInput.value = 140;
["bars-input", "compasso-a-input", "compasso-b-input"].forEach((id) => {
const el = document.getElementById(id);
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) {
const instrumentNode = trackNode.querySelector("instrument");
const instrumentTrackNode = trackNode.querySelector("instrumenttrack");
if (!instrumentNode || !instrumentTrackNode) return null;
function parseInstrumentNode(
trackNode,
sortedBBTrackNameNodes,
pathMap,
parentBasslineId = null
) {
const instrumentNode = trackNode.querySelector("instrument");
const instrumentTrackNode = trackNode.querySelector("instrumenttrack");
const trackName = trackNode.getAttribute("name");
const instrumentName = instrumentNode.getAttribute("name");
if (!instrumentNode || !instrumentTrackNode) return null;
// Lógica de Patterns
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);
});
const trackName = trackNode.getAttribute("name");
const instrumentName = instrumentNode.getAttribute("name");
const patternsToCreate = sortedBBTrackNameNodes.length > 0
? sortedBBTrackNameNodes
: [{ getAttribute: () => "Pattern 1" }];
// 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)
);
});
const patterns = patternsToCreate.map((bbTrack, index) => {
const patternNode = allPatternsArray[index];
const bbTrackName = bbTrack.getAttribute("name") || `Pattern ${index + 1}`;
// 2. CORREÇÃO PRINCIPAL:
// O loop deve ser baseado nos patterns existentes no XML, não nos blocos da timeline (bbtco).
// 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) {
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 ===
// 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;
});
const patterns = loopSource.map((patternNode, index) => {
// Tenta pegar o nome do bloco correspondente na timeline, se existir, senão gera um genérico
const bbTrackName =
sortedBBTrackNameNodes[index] &&
sortedBBTrackNameNodes[index].getAttribute("name")
? sortedBBTrackNameNodes[index].getAttribute("name")
: `Pattern ${index + 1}`;
if (!patternNode) {
return {
name: bbTrackName,
steps: steps,
notes: notes,
pos: parseInt(patternNode.getAttribute("pos"), 10) || 0,
steps: new Array(16).fill(false),
notes: [],
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 panFromFile = parseFloat(instrumentTrackNode.getAttribute("pan"));
const patternSteps = parseInt(patternNode.getAttribute("steps"), 10) || 16;
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: trackName,
type: trackType,
samplePath: finalSamplePath,
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
name: bbTrackName,
steps: steps,
notes: notes,
pos: parseInt(patternNode.getAttribute("pos"), 10) || 0,
};
});
// 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);
if(el) el.value = head.getAttribute(attr) || def;
const el = document.getElementById(id);
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) => {
return (parseInt(a.getAttribute("pos"), 10) || 0) - (parseInt(b.getAttribute("pos"), 10) || 0);
sortedBBTrackNameNodes = Array.from(
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
.filter(t => t !== null);
.map((node) =>
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 => {
return {
pos: parseInt(bbtco.getAttribute("pos"), 10) || 0,
len: parseInt(bbtco.getAttribute("len"), 10) || 192,
name: trackName
};
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,
};
});
// 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
.filter(t => t !== null);
.map((node) =>
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,
name: trackName,
type: "bassline", // Tipo especial para o audio_ui.js
playlist_clips: playlistClips,
instruments: internalInstruments, // Mantém referência
volume: 1,
pan: 0,
patterns: [],
isMuted: trackNode.getAttribute("muted") === "1"
id: containerId,
name: trackName,
type: "bassline", // Tipo especial para o audio_ui.js
playlist_clips: playlistClips,
instruments: internalInstruments, // Mantém referência
volume: 1,
pan: 0,
patterns: [],
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') {
track.volumeNode = new Tone.Volume(Tone.gainToDb(track.volume));
track.pannerNode = new Tone.Panner(track.pan);
track.volumeNode.connect(track.pannerNode);
track.pannerNode.connect(getMainGainNode());
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);
track.pannerNode.connect(getMainGainNode());
}
});
// Configura tamanho da timeline
let isFirstTrackWithNotes = true;
newTracks.forEach(track => {
if (track.type !== 'bassline' && isFirstTrackWithNotes) {
const activePattern = track.patterns[track.activePatternIndex || 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;
isFirstTrackWithNotes = false;
}
newTracks.forEach((track) => {
if (track.type !== "bassline" && isFirstTrackWithNotes) {
const activePattern = track.patterns[track.activePatternIndex || 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;
isFirstTrackWithNotes = false;
}
}
});
// Carrega samples/plugins
try {
const promises = newTracks
.filter(t => t.type !== 'bassline')
.map(track => loadAudioForTrack(track));
.filter((t) => t.type !== "bassline")
.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("timesig_numerator", document.getElementById("compasso-a-input").value || 4);
head.setAttribute("timesig_denominator", document.getElementById("compasso-b-input").value || 4);
head.setAttribute(
"num_bars",
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 };

175
creation.html
View File

@ -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>
<span style="margin-left: 8px; color: #ffdd57;">Baixar ZIP</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>
<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");
const stepsContainer = document.getElementById("sequencer-grid");
if(!nameContainer || !stepsContainer) return;
window.openPatternEditor = function (basslineTrack) {
console.log("Abrindo editor para:", basslineTrack.track_name);
nameContainer.innerHTML = "";
stepsContainer.innerHTML = "";
const nameContainer = document.getElementById("track-container");
const stepsContainer = document.getElementById("sequencer-grid");
const instruments = basslineTrack.instruments || [];
if (!nameContainer || !stepsContainer) return;
if (instruments.length === 0) {
nameContainer.innerHTML = "<div style='padding:10px; color:#ccc'>Nenhum instrumento.</div>";
return;
nameContainer.innerHTML = "";
stepsContainer.innerHTML = "";
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 => {
// --- 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);
const stepsRow = document.createElement("div");
stepsRow.className = "steps-row";
// --- B. Steps (Correção Aqui) ---
let stepData = [];
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) {
// Tenta encontrar um pattern que tenha pelo menos uma nota 'true'
const activePattern = inst.patterns.find(p => p.steps.some(s => s === true));
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);
inst.patterns.forEach((p) => {
if (p.steps[index] !== undefined) p.steps[index] = newState;
});
}
});
const stepsRow = document.createElement("div");
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);
stepsRow.appendChild(stepBtn);
});
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("subfolder", category);
formData.append("sample_file", file);
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>