@@ -42,9 +115,10 @@ export function renderPatternEditor() {
`;
+ // Eventos de Seleção
trackLane.addEventListener('click', () => {
if (appState.pattern.activeTrackId === trackData.id) return;
- stopPlayback();
+ // stopPlayback(); // (Opcional: descomente se quiser parar o som ao trocar de track)
appState.pattern.activeTrackId = trackData.id;
document.querySelectorAll('.track-lane').forEach(lane => lane.classList.remove('active-track'));
trackLane.classList.add('active-track');
@@ -52,18 +126,17 @@ export function renderPatternEditor() {
redrawSequencer();
});
+ // Drag and Drop de Samples
trackLane.addEventListener("dragover", (e) => { e.preventDefault(); trackLane.classList.add("drag-over"); });
trackLane.addEventListener("dragleave", () => trackLane.classList.remove("drag-over"));
-
trackLane.addEventListener("drop", (e) => {
e.preventDefault();
trackLane.classList.remove("drag-over");
const filePath = e.dataTransfer.getData("text/plain");
-
if (filePath) {
sendAction({
type: 'SET_TRACK_SAMPLE',
- trackIndex: trackIndex,
+ trackIndex: originalIndex,
filePath: filePath
});
}
@@ -76,12 +149,12 @@ export function renderPatternEditor() {
redrawSequencer();
}
+// Renderiza o grid de steps ou piano roll miniatura
export function redrawSequencer() {
const totalGridSteps = getTotalSteps();
document.querySelectorAll(".step-sequencer-wrapper").forEach((wrapper) => {
let sequencerContainer = wrapper.querySelector(".step-sequencer");
-
if (!sequencerContainer) {
sequencerContainer = document.createElement("div");
sequencerContainer.className = "step-sequencer";
@@ -90,160 +163,105 @@ export function redrawSequencer() {
sequencerContainer.innerHTML = "";
}
+ // Busca o dado da trilha usando o índice global
const parentTrackElement = wrapper.closest(".track-lane");
const trackIndex = parseInt(parentTrackElement.dataset.trackIndex, 10);
const trackData = appState.pattern.tracks[trackIndex];
- if (!trackData || !trackData.patterns || trackData.patterns.length === 0) {
- return;
- }
+ if (!trackData || !trackData.patterns || trackData.patterns.length === 0) return;
- const activePatternIndex = trackData.activePatternIndex;
+ const activePatternIndex = trackData.activePatternIndex || 0;
const activePattern = trackData.patterns[activePatternIndex];
+ if (!activePattern) return;
- if (!activePattern) {
- return;
- }
-
- // ============================================================
- // LÓGICA DE DECISÃO V2: STEPS OU PIANO ROLL? (MANTIDA)
- // ============================================================
-
+ // --- DECISÃO: STEP SEQUENCER VS PIANO ROLL ---
const notes = activePattern.notes || [];
- const hasNotes = notes.length > 0;
let renderMode = 'steps';
-
- if (hasNotes) {
+ if (notes.length > 0) {
const firstKey = notes[0].key;
- const isMelodic = notes.some(n => n.key !== firstKey);
- const hasLongNotes = notes.some(n => n.len > 48);
-
- const sortedNotes = [...notes].sort((a, b) => a.pos - b.pos);
- let hasOverlap = false;
- for (let i = 0; i < sortedNotes.length - 1; i++) {
- if (sortedNotes[i].pos + sortedNotes[i].len > sortedNotes[i+1].pos) {
- hasOverlap = true;
- break;
- }
- }
-
- if (isMelodic || hasLongNotes || hasOverlap) {
+ // Se houver variação de nota ou notas longas, usa visualização de Piano Roll
+ if (notes.some(n => n.key !== firstKey) || notes.some(n => n.len > 48)) {
renderMode = 'piano_roll';
- } else {
- renderMode = 'steps';
}
}
- // ============================================================
- // RENDERIZAÇÃO
- // ============================================================
-
if (renderMode === 'piano_roll') {
- // --- MODO PIANO ROLL ---
+ // --- MODO: MINI PIANO ROLL ---
sequencerContainer.classList.add('mode-piano');
-
const miniView = document.createElement('div');
miniView.className = 'track-mini-piano-roll';
- miniView.title = "Clique duplo para abrir o Piano Roll";
-
+ miniView.title = "Clique duplo para abrir o Piano Roll completo";
+
miniView.addEventListener('dblclick', (e) => {
e.stopPropagation();
- if (window.openPianoRoll) {
- window.openPianoRoll(trackData.id);
- }
+ if (window.openPianoRoll) window.openPianoRoll(trackData.id);
});
- // --- CÁLCULO REVERTIDO (VOLTA AO PADRÃO ANTERIOR) ---
- const barsInput = document.getElementById('bars-input');
- const barsCount = barsInput ? parseInt(barsInput.value) || 1 : 1;
-
- // Revertido: Removemos a multiplicação por beatsPerBar que causou o bug visual
- const totalTicks = 192 * barsCount;
- // ----------------------------------------------------
+ // 48 ticks = 1/16 step.
+ const totalTicks = totalGridSteps * 48;
activePattern.notes.forEach(note => {
const noteEl = document.createElement('div');
noteEl.className = 'mini-note';
- const leftPercent = (note.pos / totalTicks) * 100;
- const widthPercent = (note.len / totalTicks) * 100;
+ const leftPercent = Math.min((note.pos / totalTicks) * 100, 100);
+ const widthPercent = Math.min((note.len / totalTicks) * 100, 100 - leftPercent);
- const keyRange = 48;
- const baseKey = 36;
- let relativeKey = note.key - baseKey;
-
- if(relativeKey < 0) relativeKey = 0;
- if(relativeKey > keyRange) relativeKey = keyRange;
-
- const topPercent = 100 - ((relativeKey / keyRange) * 100);
+ // Mapeia nota MIDI para altura (aprox 4 oitavas visíveis)
+ const relativeKey = Math.max(0, Math.min(note.key - 36, 48));
+ const topPercent = 100 - ((relativeKey / 48) * 100);
noteEl.style.left = `${leftPercent}%`;
noteEl.style.width = `${widthPercent}%`;
noteEl.style.top = `${topPercent}%`;
-
miniView.appendChild(noteEl);
});
-
sequencerContainer.appendChild(miniView);
} else {
- // --- MODO STEP SEQUENCER ---
+ // --- MODO: STEP SEQUENCER (Bateria) ---
sequencerContainer.classList.remove('mode-piano');
-
const patternSteps = activePattern.steps;
- if (!patternSteps || !Array.isArray(patternSteps)) return;
-
+
for (let i = 0; i < totalGridSteps; i++) {
const stepWrapper = document.createElement("div");
stepWrapper.className = "step-wrapper";
const stepElement = document.createElement("div");
stepElement.className = "step";
-
- if (patternSteps[i] === true) {
- stepElement.classList.add("active");
- }
+ if (patternSteps[i] === true) stepElement.classList.add("active");
+ // Evento de Toggle
stepElement.addEventListener("click", (e) => {
e.stopPropagation();
initializeAudioContext();
-
- const currentState = activePattern.steps[i] || false;
- const isActive = !currentState;
-
+ const isActive = !activePattern.steps[i];
+
sendAction({
- type: 'TOGGLE_NOTE',
- trackIndex: trackIndex,
- patternIndex: activePatternIndex,
- stepIndex: i,
- isActive: isActive
+ type: 'TOGGLE_NOTE',
+ trackIndex,
+ patternIndex: activePatternIndex,
+ stepIndex: i,
+ isActive
});
-
+
+ // Preview Sonoro
if (isActive) {
if (trackData.type === 'sampler' && trackData.samplePath) {
playSample(trackData.samplePath, trackData.id);
- }
- else if (trackData.type === 'plugin' && trackData.instrument) {
- try {
- trackData.instrument.triggerAttackRelease("C5", "16n", Tone.now());
- } catch(err) {
- console.warn("Erro ao tocar preview do synth:", err);
- }
+ } else if (trackData.type === 'plugin' && trackData.instrument) {
+ try { trackData.instrument.triggerAttackRelease("C5", "16n", Tone.now()); } catch(err) {}
}
}
});
- const beatsPerBar = parseInt(document.getElementById("compasso-a-input").value, 10) || 4;
- const groupIndex = Math.floor(i / beatsPerBar);
- if (groupIndex % 2 === 0) {
- stepElement.classList.add("step-dark");
- }
-
- const stepsPerBar = 16;
- if (i > 0 && i % stepsPerBar === 0) {
+ // Estilização do Grid (Marcadores de Compasso e Beat)
+ if (Math.floor(i / 4) % 2 === 0) stepElement.classList.add("step-dark");
+
+ if (i > 0 && i % 16 === 0) {
const marker = document.createElement("div");
marker.className = "step-marker";
- marker.textContent = Math.floor(i / stepsPerBar) + 1;
+ marker.textContent = Math.floor(i / 16) + 1;
stepWrapper.appendChild(marker);
}
@@ -254,67 +272,38 @@ export function redrawSequencer() {
});
}
+// Ilumina o step atual durante o playback
export function highlightStep(stepIndex, isActive) {
if (stepIndex < 0) return;
document.querySelectorAll(".track-lane").forEach((track) => {
- const stepWrapper = track.querySelector(
- `.step-sequencer .step-wrapper:nth-child(${stepIndex + 1})`
- );
+ const stepWrapper = track.querySelector(`.step-sequencer .step-wrapper:nth-child(${stepIndex + 1})`);
if (stepWrapper) {
const stepElement = stepWrapper.querySelector(".step");
- if (stepElement) {
- stepElement.classList.toggle("playing", isActive);
- }
+ if (stepElement) stepElement.classList.toggle("playing", isActive);
}
});
}
+// Atualiza UI de um step específico (chamado pelo socket)
export function updateStepUI(trackIndex, patternIndex, stepIndex, isActive) {
- const trackElement = document.querySelector(`.track-lane[data-track-index="${trackIndex}"]`);
- if (!trackElement) return;
-
- const trackData = appState.pattern.tracks[trackIndex];
- if (!trackData) return;
-
- const activePattern = trackData.patterns[patternIndex];
-
- const notes = activePattern.notes || [];
- const hasNotes = notes.length > 0;
- let isComplex = false;
-
- if (hasNotes) {
- const isMelodic = notes.some(n => n.key !== notes[0].key);
- const hasLongNotes = notes.some(n => n.len > 48);
- if (isMelodic || hasLongNotes) isComplex = true;
- }
-
- if (isComplex) {
- redrawSequencer();
- return;
- }
-
- if (patternIndex !== trackData.activePatternIndex) return;
-
- const stepWrapper = trackElement.querySelector(
- `.step-sequencer .step-wrapper:nth-child(${stepIndex + 1})`
- );
- if (!stepWrapper) return;
- const stepElement = stepWrapper.querySelector(".step");
- if (!stepElement) return;
- stepElement.classList.toggle("active", isActive);
+ // Redesenhar tudo é mais seguro para garantir que filtros e views (piano vs steps) estejam corretos
+ redrawSequencer();
}
+// Atualiza o dropdown de patterns na toolbar
export function updateGlobalPatternSelector() {
const globalPatternSelector = document.getElementById('global-pattern-selector');
if (!globalPatternSelector) return;
const activeTrackId = appState.pattern.activeTrackId;
const activeTrack = appState.pattern.tracks.find(t => t.id === activeTrackId);
- const referenceTrack = appState.pattern.tracks[0];
+
+ // Tenta pegar a track ativa ou a primeira visível como referência de patterns
+ const referenceTrack = activeTrack || appState.pattern.tracks.find(t => !t.isMuted && t.type !== 'bassline');
globalPatternSelector.innerHTML = '';
- if (referenceTrack && referenceTrack.patterns.length > 0) {
+ if (referenceTrack && referenceTrack.patterns && referenceTrack.patterns.length > 0) {
referenceTrack.patterns.forEach((pattern, index) => {
const option = document.createElement('option');
option.value = index;
diff --git a/assets/js/creations/state.js b/assets/js/creations/state.js
index 403112ef..519af057 100755
--- a/assets/js/creations/state.js
+++ b/assets/js/creations/state.js
@@ -38,12 +38,14 @@ const globalState = {
lastRulerClickTime: 0,
justReset: false,
syncMode: "global",
+ focusedBasslineId: null,
};
export let appState = {
global: globalState,
pattern: patternState,
audio: audioState, // compartilhado com módulo de áudio
+ focusedBasslineId: null,
};
window.appState = appState;
@@ -141,12 +143,14 @@ export function resetProjectState() {
lastRulerClickTime: 0,
justReset: false,
syncMode: appState.global.syncMode ?? "global",
+ focusedBasslineId: null,
});
Object.assign(appState.pattern, {
tracks: [],
activeTrackId: null,
activePatternIndex: 0,
+ focusedBasslineId: null,
});
initializeAudioState();