save on every UI change

common.js

@@ -49,6 +49,10 @@ function CreateParamChanger(arr, setArr, index, postCB=() => {}, preCB=(val) =>
         newArr[index] = preCB(event.target.value);
         setArr(newArr);
         postCB();
+        setTimeout(() => {
+            window.dispatchEvent(new CustomEvent('saveDict', {'detail' : "localStorage"}));
+        }, 50)
+        
         log(`${index} ${event.target.value}`);
     }
 }
@@ -60,6 +64,9 @@ function CreateMatrixParamChanger(matrix, setMatrix, i, j){
         });
         newMatrix[i][j] = event.target.value;
         setMatrix(newMatrix);
+        setTimeout(() => {
+            window.dispatchEvent(new CustomEvent('saveDict', {'detail' : "localStorage"}));
+        }, 50)
         log(`${i}, ${j} ${event.target.value}`);
         
     }

lfogui.js

@@ -60,7 +60,6 @@ function nnFreqToHzString(num){
 
 
 function MasterLfoHandler(){
-
     let initVisArr = Array(MAXLFOS).fill(false);
     initVisArr[0] = true;
 
@@ -81,9 +80,12 @@ function MasterLfoHandler(){
     };
 
     /// MODULATOR ARRAYS
-
+    let userDefinedWavesBase = [];
-    const [userDefinedWave, setUserDefinedWave] = React.useState(Array(50).fill(0));
+    
-
+    for (let i=0; i<4; i++){  
+        userDefinedWavesBase.push(Array(50).fill(0));
+    }
+    const [userDefinedWaves, setUserDefinedWaves] = React.useState(userDefinedWavesBase);
     const [modVisibleArr, setModVisibleArr] = React.useState(initVisArr);
     const [modTypeArr, setModTypeArr] = React.useState(Array(MAXLFOS).fill('LFO'));
     const [modInstanceNumArr, setModInstanceNumArr] = React.useState(Array(MAXLFOS).fill('1'));
@@ -242,7 +244,7 @@ function MasterLfoHandler(){
         function handleTick(event) {
             let time = (Date.now() - firstUpdateTime) / 1000;
             let noiseData = {lastPhaseArr, setLastPhaseArr, cachedNoiseValueArr1, setCachedNoiseValueArr1, cachedNoiseValueArr2, setCachedNoiseValueArr2, noiseTypeArr};
-            operateModulators(modVisibleArr, modTypeArr, modInstanceNumArr, djParamArr, modCenterVals, freqArr, minArr, maxArr, shapeArr, initPhaseArr, noiseData, userDefinedWave, time, beatsInMeasure, ticks);
+            operateModulators(modVisibleArr, modTypeArr, modInstanceNumArr, djParamArr, modCenterVals, freqArr, minArr, maxArr, shapeArr, initPhaseArr, noiseData, userDefinedWaves, time, beatsInMeasure, ticks);
         }
 
         function handleTimeSig(event) {
@@ -250,7 +252,8 @@ function MasterLfoHandler(){
         }
 
         function handleChangeUserWave(event){
-            setUserDefinedWave(event.detail);
+            userDefinedWaves[event.detail.index] = event.detail.points;
+            setUserDefinedWaves(userDefinedWaves);
         }
 
         function handleMaxTicks(event){
@@ -338,7 +341,7 @@ function MasterLfoHandler(){
             window.removeEventListener('userWave', handleChangeUserWave);
             window.removeEventListener('maxTicks', handleMaxTicks);
         };
-    }, [...allModArrays, ...allEnumArrays, ...allEnumMats, userDefinedWave, modCenterVals, render, beatsInMeasure, ticks]);
+    }, [...allModArrays, ...allEnumArrays, ...allEnumMats, userDefinedWaves, modCenterVals, render, beatsInMeasure, ticks]);
 
 
     function CheckLinked(inst, param, checkInstArr, checkParamArr){
@@ -573,8 +576,9 @@ if (!DEBUG){
         window.dispatchEvent(new CustomEvent('maxTicks', {'detail' : val}));
     });
 
-    window.max.bindInlet("userWave", (...points) => {
+    window.max.bindInlet("userWave", (index, ...points) => {
-        window.dispatchEvent(new CustomEvent('userWave', {'detail' : points}));
+        let data = {points, index};
+        window.dispatchEvent(new CustomEvent('userWave', {'detail' : data}));
     });
 
     setInterval(() => {
@@ -584,4 +588,4 @@ if (!DEBUG){
 
 
 const root = ReactDOM.createRoot(document.getElementById('lfo-container'));
-root.render(e(MasterLfoHandler, null, null));
+root.render(e(MasterLfoHandler, null, null));

modulators.js

@@ -4,7 +4,7 @@
 
 
 var TYPEOPTIONS = ["LFO", "Noise"];
-var SHAPETYPES = ["Sine", "SawUp", "SawDown", "Tri", "Square", "Custom"];
+var SHAPETYPES = ["Sine", "SawUp", "SawDown", "Tri", "Square", "Custom_1", "Custom_2", "Custom_3", "Custom_4"];
 var NOISETYPES = ["Rand", "Line Int.", "Sine Int."]
 
 var INSTANCEOPTIONS = ["1", "2", "3", "4"];
@@ -61,7 +61,11 @@ function LfoRow(props){
     };
 }
 
-function indexWave(type, phase, userDefinedWave){
+function indexUserWave(phase, index, userDefinedWaves){
+    return parseFloat(userDefinedWaves[index][Math.floor(phase * 50)]) / 127
+}
+
+function indexWave(type, phase, userDefinedWaves){
     switch (type){
         case "Sine":
             return (Math.sin(phase * Math.PI * 2) / 2) + 0.5;
@@ -73,12 +77,18 @@ function indexWave(type, phase, userDefinedWave){
             return phase > 0.5? (1-phase) * 2 : phase * 2;
         case "Square":
             return +(phase > 0.5);
-        case "Custom":
+        case "Custom_1":
-            return parseFloat(userDefinedWave[Math.floor(phase * 50)]) / 127
+            return indexUserWave(phase, 1, userDefinedWaves);
+        case "Custom_2":
+            return indexUserWave(phase, 2, userDefinedWaves);
+        case "Custom_3":
+            return indexUserWave(phase, 3, userDefinedWaves);
+        case "Custom_4":
+            return indexUserWave(phase, 4, userDefinedWaves);
     }
 }
 
-function operateModulators(visibleArr, typeArr, instanceNumArr, paramNames, centers, freqs, mins, maxs, waveTypes, phaseArr, noiseData, userDefinedWave, currTime, beatsInMeasure, ticks){
+function operateModulators(visibleArr, typeArr, instanceNumArr, paramNames, centers, freqs, mins, maxs, waveTypes, phaseArr, noiseData, userDefinedWaves, currTime, beatsInMeasure, ticks){
     for (let i=0; i<paramNames.length; i++){
         if (visibleArr[i]){
             
@@ -92,7 +102,7 @@ function operateModulators(visibleArr, typeArr, instanceNumArr, paramNames, cent
             let output = 0;
             
             if (typeArr[i] == "LFO")
-                output = operateLFO(center, inst, freqs[i], mins[i], maxs[i], waveTypes[i], phaseArr, i, userDefinedWave, name, currTime, beatsInMeasure, ticks);
+                output = operateLFO(center, inst, freqs[i], mins[i], maxs[i], waveTypes[i], phaseArr, i, userDefinedWaves, name, currTime, beatsInMeasure, ticks);
             else
                 output = operateNoise(center, inst, freqs[i], mins[i], maxs[i], waveTypes[i], phaseArr, i, name, noiseData, currTime, beatsInMeasure, ticks);
             if (name !== "NONE")
@@ -101,7 +111,7 @@ function operateModulators(visibleArr, typeArr, instanceNumArr, paramNames, cent
     }
 }
 
-function operateLFO(center, inst, timeBaseStr, min, max, waveType, phaseArr, phaseIndex, userDefinedWave, name, currTime, beatsInMeasure, maxTicks){
+function operateLFO(center, inst, timeBaseStr, min, max, waveType, phaseArr, phaseIndex, userDefinedWaves, name, currTime, beatsInMeasure, maxTicks){
     let amp = parseFloat(max) - parseFloat(min);
     let phaseType;
     let timeBase;
@@ -113,7 +123,7 @@ function operateLFO(center, inst, timeBaseStr, min, max, waveType, phaseArr, pha
         phase = (currTime * timeBase + parseFloat(phaseArr[phaseIndex])) % 1.00;
     else if (phaseType === PhaseTypes.MUSICAL)
         phase = (maxTicks % timeBase) / timeBase;
-    let unscaled = indexWave(waveType, phase, userDefinedWave);
+    let unscaled = indexWave(waveType, phase, userDefinedWaves);
     syncDisplay(inst, name, unscaled);
     
     return  unscaled * amp + center + parseFloat(min);