Volume e Pan master

assets/js/creations/main.js

@@ -9,6 +9,8 @@ import {
   stopPlayback,
   rewindPlayback,
   initializeAudioContext,
+  updateMasterVolume,
+  updateMasterPan,
 } from "./audio.js";
 import { handleFileLoad, generateMmpFile } from "./file.js";
 import {
@@ -19,6 +21,7 @@ import {
   closeOpenProjectModal,
 } from "./ui.js";
 import { adjustValue, enforceNumericInput } from "./utils.js";
+import { DEFAULT_PAN, DEFAULT_VOLUME } from "./config.js";
 
 // --- INICIALIZAÇÃO E EVENTOS FINAIS ---
 document.addEventListener("DOMContentLoaded", () => {
@@ -37,6 +40,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const loadFromComputerBtn = document.getElementById("load-from-computer-btn");
   const sidebarToggle = document.getElementById("sidebar-toggle");
   const addBarBtn = document.getElementById("add-bar-btn");
+  
+  const masterVolumeKnob = document.getElementById("master-volume-knob");
+  const masterPanKnob = document.getElementById("master-pan-knob");
 
   newProjectBtn.addEventListener("click", () => {
     if (
@@ -51,6 +57,8 @@ document.addEventListener("DOMContentLoaded", () => {
       currentStep: 0,
       metronomeEnabled: false,
       originalXmlDoc: null,
+      masterVolume: DEFAULT_VOLUME,
+      masterPan: DEFAULT_PAN
     });
     // Reseta os inputs para o padrão
     document.getElementById('bpm-input').value = 140;
@@ -58,6 +66,7 @@ document.addEventListener("DOMContentLoaded", () => {
     document.getElementById('compasso-a-input').value = 4;
     document.getElementById('compasso-b-input').value = 4;
     renderApp();
+    setupMasterKnobs(); // Re-inicializa os knobs master
   });
 
   addBarBtn.addEventListener("click", () => {
@@ -67,9 +76,95 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   });
 
+  function setupMasterKnobs() {
+    function updateMasterKnobVisual(knobElement, controlType) {
+      const indicator = knobElement.querySelector(".knob-indicator");
+      if (!indicator) return;
+
+      const minAngle = -135;
+      const maxAngle = 135;
+      let percentage = 0.5;
+      let title = "";
+
+      if (controlType === "volume") {
+        const value = appState.masterVolume;
+        percentage = value / 1.5;
+        title = `Volume Master: ${Math.round(value * 100)}%`;
+      } else { // pan
+        const value = appState.masterPan;
+        percentage = (value + 1) / 2;
+        const panDisplay = Math.round(value * 100);
+        title = `Pan Master: ${ panDisplay === 0 ? "Centro" : panDisplay < 0 ? `${-panDisplay} L` : `${panDisplay} R` }`;
+      }
+
+      const angle = minAngle + percentage * (maxAngle - minAngle);
+      indicator.style.transform = `translateX(-50%) rotate(${angle}deg)`;
+      knobElement.title = title;
+    }
+
+    function addMasterKnobInteraction(knobElement, controlType) {
+        knobElement.addEventListener("wheel", (e) => {
+            e.preventDefault();
+            const step = 0.05;
+            const direction = e.deltaY < 0 ? 1 : -1;
+            if (controlType === "volume") {
+                const newValue = appState.masterVolume + direction * step;
+                const clampedValue = Math.max(0, Math.min(1.5, newValue));
+                appState.masterVolume = clampedValue;
+                updateMasterVolume(clampedValue);
+            } else {
+                const newValue = appState.masterPan + direction * step;
+                const clampedValue = Math.max(-1, Math.min(1, newValue));
+                appState.masterPan = clampedValue;
+                updateMasterPan(clampedValue);
+            }
+            updateMasterKnobVisual(knobElement, controlType);
+        });
+
+        knobElement.addEventListener("mousedown", (e) => {
+            if (e.button !== 0) return;
+            e.preventDefault();
+            
+            const startY = e.clientY;
+            const startValue = controlType === "volume" ? appState.masterVolume : appState.masterPan;
+            document.body.classList.add("knob-dragging");
+
+            function onMouseMove(moveEvent) {
+                const deltaY = startY - moveEvent.clientY;
+                const sensitivity = controlType === "volume" ? 150 : 200;
+                const newValue = startValue + deltaY / sensitivity;
+                if (controlType === "volume") {
+                    const clampedValue = Math.max(0, Math.min(1.5, newValue));
+                    appState.masterVolume = clampedValue;
+                    updateMasterVolume(clampedValue);
+                } else {
+                    const clampedValue = Math.max(-1, Math.min(1, newValue));
+                    appState.masterPan = clampedValue;
+                    updateMasterPan(clampedValue);
+                }
+                updateMasterKnobVisual(knobElement, controlType);
+            }
+
+            function onMouseUp() {
+                document.body.classList.remove("knob-dragging");
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            }
+
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+        });
+    }
+
+    addMasterKnobInteraction(masterVolumeKnob, "volume");
+    updateMasterKnobVisual(masterVolumeKnob, "volume");
+
+    addMasterKnobInteraction(masterPanKnob, "pan");
+    updateMasterKnobVisual(masterPanKnob, "pan");
+  }
+  
   openMmpBtn.addEventListener("click", showOpenProjectModal);
   loadFromComputerBtn.addEventListener("click", () => mmpFileInput.click());
-  
   mmpFileInput.addEventListener("change", async (event) => {
     const file = event.target.files[0];
     if (file) {
@@ -77,7 +172,6 @@ document.addEventListener("DOMContentLoaded", () => {
       closeOpenProjectModal();
     }
   });
-
   saveMmpBtn.addEventListener("click", generateMmpFile);
   addInstrumentBtn.addEventListener("click", addTrackToState);
   removeInstrumentBtn.addEventListener("click", removeLastTrackFromState);
@@ -100,7 +194,6 @@ document.addEventListener("DOMContentLoaded", () => {
       ? "fa-solid fa-caret-right"
       : "fa-solid fa-caret-left";
   });
-
   const inputs = document.querySelectorAll(".value-input");
   inputs.forEach((input) => {
     input.addEventListener("input", (event) => {
@@ -118,7 +211,6 @@ document.addEventListener("DOMContentLoaded", () => {
       adjustValue(event.target, step);
     });
   });
-
   const buttons = document.querySelectorAll(".adjust-btn");
   buttons.forEach((button) => {
     button.addEventListener("click", () => {
@@ -134,4 +226,5 @@ document.addEventListener("DOMContentLoaded", () => {
   // Inicia a aplicação
   loadAndRenderSampleBrowser();
   renderApp();
+  setupMasterKnobs();
 });