color fixing measures when alpha is missing, cleanup

dependencies hashes:
openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501
ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3
ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239
ofxVariableLab 0b5f9bdebc1e5550621957e73c040c258ec6317b
ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8
theatre 86d3e07f6f2c75fd6e08fca8c97e3617c9e23b18

bin/em/variabletime/web/js/audio.js

@@ -5,6 +5,7 @@ import {
     toCssClass,
     flattenObject,
     deFlattenObject,
+    getNestedProperty,
     clone,
     rgbaToHexa,
     hexaToRgba,
@@ -81,14 +82,6 @@ const Audio = function(tp, record) {
             return false;
         }
         if (!mapping[layer.id()].hasOwnProperty(propTitle)) {
-            if (propTitle === 'color' &&
-                config.audio.colorSeparateRGBA &&
-                mapping[layer.id()].hasOwnProperty('color.r') &&
-                mapping[layer.id()].hasOwnProperty('color.g') &&
-                mapping[layer.id()].hasOwnProperty('color.b') &&
-                mapping[layer.id()].hasOwnProperty('color.a')) {
-                return true;
-            }
             return false;
         }
         return true;
@@ -136,7 +129,7 @@ const Audio = function(tp, record) {
             const channels = Object.keys(color);
             channels.forEach((channel) => {
                 if (typeof color[channel] !== 'number') {
-                    console.log('Audio::fixColor', `fixing color.${channel} => 1`);
+                    console.log('Audio::fixColor', `fixing the color.${channel} => 1`);
                     color[channel] = 1;
                 }
             });
@@ -196,6 +189,11 @@ const Audio = function(tp, record) {
             return true;
         } else {
             // already there
+            if (propTitle === 'color') {
+                fixColor(mapping[layer.id()][propTitle].min_out);
+                fixColor(mapping[layer.id()][propTitle].max_out);
+                fixColor(mapping[layer.id()][propTitle].value);
+            }
             return false;
         }
     };
@@ -216,15 +214,6 @@ const Audio = function(tp, record) {
         }
         if (!mapping[layer.id()].hasOwnProperty(propTitle)) {
             // no propTitle
-            // perhaps color?
-            //if (config.audio.colorSeparateRGBA && propTitle === 'color') {
-                //let isGood = true;
-                //isGood = removeAudioMapping(layer, 'color.r');
-                //isGood = removeAudioMapping(layer, 'color.g');
-                //isGood = removeAudioMapping(layer, 'color.b');
-                //isGood = removeAudioMapping(layer, 'color.a');
-                //return isGood;
-            //}
             return false;
         }
         delete mapping[layer.id()][propTitle];
@@ -239,8 +228,12 @@ const Audio = function(tp, record) {
         let hasLetterDelay =
             config
             .layer.letterDelayProps
-            .indexOf(propTitle.split('.')[0]) >= 0 && propTitle.indexOf('color') < 0 &&
+            .indexOf(propTitle.split('.')[0]) >= 0
-            !tp.isSequenced(propTitle);
+                && mapping[layer.id()][`letterDelays.${propTitle}`] === 'undefined' // if the letterDelay is mapped itself, we don't do it
+                //&& propTitle.indexOf('color') < 0
+                //&& !tp.isSequenced(propTitle)
+        ;
+        let isSequenced = tp.isSequenced(propTitle, layer);
         const panel = tp.getPanel();
         if (!areMutationsObserved) {
             mutationObserver.observe(panel, { childList: true, subtree: true });
@@ -275,6 +268,12 @@ const Audio = function(tp, record) {
             if (hasLetterDelay) {
                 const ld = panel.querySelector(toCssClass(`audio_letterDelay${propTitle}`,'#'));
                 mappingOptions.letterDelay = typeof ld.value === 'number' ? ld.value : parseInt(ld.value);
+                if (isSequenced) {
+                    const prop = getNestedProperty(layer.theatreObject.props.letterDelays, propTitle.split('.')); 
+                    tp.studio.transaction(({set}) => {
+                        set(prop, mappingOptions.letterDelay);
+                    });
+                }
             }
             mappingOptions.source = panel.querySelector(toCssClass(`audio_source${propTitle}`,'#')).value;
             mappingOptions.muted = panel.querySelector(toCssClass(`audio_mute${propTitle}`,'#')).checked;
@@ -702,15 +701,7 @@ const Audio = function(tp, record) {
         }
         const container = panelPropTitle.parentNode.parentNode;
 
-        if (propTitle === 'color' && config.audio.colorSeparateRGBA) {
-            // NOTE: attach reversed, because container.after(audioOptions)
-            createAudioOptions(layer, `${propTitle}.a`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
-            createAudioOptions(layer, `${propTitle}.b`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
-            createAudioOptions(layer, `${propTitle}.g`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
-            createAudioOptions(layer, `${propTitle}.r`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
-        } else {
         createAudioOptions(layer, propTitle, container);
-        }
 
         const audioButton = container.querySelector('.audioButton');
         audioButton.classList.add('active');
@@ -733,15 +724,8 @@ const Audio = function(tp, record) {
             panel.querySelectorAll('.audioButton').forEach((button) => {
                 button.classList.remove('active');
             });
-        } else {
-            if (config.audio.colorSeparateRGBA && propTitle === 'color') {
-                delete canvasCombos['color.r'];
-                delete canvasCombos['color.g'];
-                delete canvasCombos['color.b'];
-                delete canvasCombos['color.a'];
         } else {
             delete canvasCombos[propTitle];
-            }
             // only selected layers have options
             // otherwise the ui is not there
             if (layer.isSelected()) {

bin/em/variabletime/web/js/config.js

@@ -109,7 +109,6 @@ const config = {
         fftBandsAnalysed: 256 * 8,
         fftBandsUsed: 256 / 2,
         fftHeight: 256 / 4,
-        colorSeparateRGBA: false,
         ignoreOutboundFrequencies: true,
         pitchCombineFrequencies: false,
         rolloverResetLoop: true,

bin/em/variabletime/web/js/utils.js

@@ -498,8 +498,8 @@ const getNestedProperty = (o, a, verify = false) => {
   }
   let b = clone(a);
   if (b.length > 1) {
-    o = o[b.shift()];
+    let c = o[b.shift()];
-    return getNestedProperty(o, b, verify);
+    return getNestedProperty(c, b, verify);
   }
   return o[b[0]];
 };