reset fontvariationaxes on font change

bin/web/js/audio.js

@@ -319,6 +319,7 @@ const Audio = function(tp, record) {
         source_Dom_Cont.append(muteDom);
         source_Dom_Cont.append(muteDom_label);
 
+        const defaultRange = getDefaultRange(layer, propTitle);
         const min_max_Dom = document.createElement('div');
         min_max_Dom.classList.add('audio_min_max');
         const min_Cont = document.createElement('div');
@@ -330,6 +331,7 @@ const Audio = function(tp, record) {
         min_inputDom.type = 'number';
         min_inputDom.name = toCssClass(`audio_min${propTitle}`);
         min_inputDom.id = toCssClass(`audio_min${propTitle}`);
+        min_inputDom.title = `default: ${defaultRange[0]}`;
         min_inputDom.value = `${mappingOptions.min_out}`;
         const max_Cont = document.createElement('div');
         max_Cont.classList.add('audio_max_Cont');
@@ -340,6 +342,7 @@ const Audio = function(tp, record) {
         max_inputDom.type = 'number';
         max_inputDom.name = toCssClass(`audio_max${propTitle}`);
         max_inputDom.id = toCssClass(`audio_max${propTitle}`);
+        max_inputDom.title = `default: ${defaultRange[1]}`;
         max_inputDom.value = `${mappingOptions.max_out}`;
         const smoothing_inputDom_label = document.createElement('label');
         smoothing_inputDom_label.for = 'audio_smoothing';
@@ -445,18 +448,24 @@ const Audio = function(tp, record) {
         max_inputDom.addEventListener('change', updateMappingOptions);
         smoothing_inputDom.addEventListener('change', updateMappingOptions);
         let setFrequency = false;
+        let wasMoved = false;
         let freq_down = 0;
         let freq_up = 0;
         let xy_start;
         fft_Dom.addEventListener('mousedown', (e) => {
             setFrequency = true;
+            wasMoved = false;
             const bb = fft_imgDom.getBoundingClientRect();
             const x = e.clientX - bb.x;
             const y = e.clientY - bb.y;
-            xy_start = {x, y};
+            xy_start = {
+                x,
+                y
+            };
         });
         fft_Dom.addEventListener('mousemove', (e) => {
             if (setFrequency) {
+                wasMoved = true;
                 const bb = fft_imgDom.getBoundingClientRect();
                 const x_factor = config.audio.fftBandsUsed / bb.width;
                 const y_factor = 256.0 / bb.height;
@@ -485,6 +494,20 @@ const Audio = function(tp, record) {
         });
         const unset = (e) => {
             setFrequency = false;
+            if (!wasMoved) {
+                const bb = fft_imgDom.getBoundingClientRect();
+                const x_factor = config.audio.fftBandsUsed / bb.width;
+                const y_factor = 256.0 / bb.height;
+                let min_x, max_x, min_y, max_y;
+                min_x = 0;
+                min_y = 0;
+                max_x = bb.width;
+                max_y = bb.height;
+                mappingOptions.min_freq = min_x * x_factor;
+                mappingOptions.max_freq = max_x * x_factor;
+                mappingOptions.min_in = (bb.height - max_y) * y_factor;
+                mappingOptions.max_in = (bb.height - min_y) * y_factor;
+            }
         };
         const unsetFromOutside = (e) => {
             document.removeEventListener('mouseup', unsetFromOutside);

bin/web/js/config.js

@@ -115,6 +115,7 @@ const config = {
         rolloverResetLoop: true,
     },
     record: {
+        active: false,
         ignoreProps: {
             artboard: ['x', 'y', 'zoom', 'pixelDensity', 'width', 'height'],
             layer: ['transformOrigin', 'fontFamily', 'text', 'mirror_x', 'mirror_y', 'mirror_xy'],

bin/web/js/layer.js

@@ -100,20 +100,37 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                 );
             let axes = fontsAndAxes[selectedFontIndex].axes;
             if (axes.length > 0) {
-                let variationAxes = {}; 
+                let variationAxes = {};
+                let doThese = [];
                 for (let a = 0; a < axes.length; a++) {
                     const sanity_minMax = axes[a].minValue < axes[a].maxValue;
                     const sanity_minDefault = axes[a].minValue <= axes[a].defaultValue;
                     const sanity_maxDefault = axes[a].maxValue >= axes[a].defaultValue;
                     if (sanity_minMax && sanity_minDefault && sanity_maxDefault) {
                         variationAxes[axes[a].name] = tp.core.types.number(axes[a].defaultValue, {
-                          range: [axes[a].minValue, axes[a].maxValue],
+                            range: [axes[a].minValue, axes[a].maxValue],
                         });
+                        if (typeof audio === 'object' &&
+                            typeof audio.getSavedMapping()[this.id()][`fontVariationAxes.${axes[a].name}`] === 'object' &&
+                            typeof audio.getMapping()[this.id()][`fontVariationAxes.${axes[a].name}`] === 'object' &&
+							tp.getPanel() !== null) {
+                            doThese.push(() => {
+                                audio.removeAudioOptions(this, `fontVariationAxes.${axes[a].name}`);
+                                audio.removeAudioMapping(this, `fontVariationAxes.${axes[a].name}`);
+                                audio.getSavedMapping()[this.id()][`fontVariationAxes.${axes[a].name}`].min_out = axes[a].minValue;
+                                audio.getSavedMapping()[this.id()][`fontVariationAxes.${axes[a].name}`].max_out = axes[a].maxValue;
+                                audio.addAudioMapping(this, `fontVariationAxes.${axes[a].name}`);
+                                audio.addAudioOptions(this, `fontVariationAxes.${axes[a].name}`);
+                            });
+                        }
                     } else {
                         console.log('js::layer::selectFont', 'this axis is insane, abort', axes[a]);
                     }
                 }
                 props.fontVariationAxes = tp.core.types.compound(variationAxes);
+                doThese.forEach((d) => {
+                    d();
+                });
             } else {
                 delete props.fontVariationAxes;
             }
@@ -806,10 +823,12 @@ const Layer = function(tp, layerID, fontsAndAxes, autoInit = true) {
                             console.log('Layer::findInjectPanel', `cannot inject audio panel for ${this.id()} for some reason.`);
                         }
                         // should we have a record object, let's inject the buttons, etc
-                        if (typeof record === 'object' && record.hasOwnProperty('injectPanel')) {
+                        if (config.record.active) {
-                            record.injectPanel(this);
+                            if (typeof record === 'object' && record.hasOwnProperty('injectPanel')) {
-                        } else {
+                                record.injectPanel(this);
-                            console.log('Layer::findInjectPanel', `cannot inject record panel for ${this.id()} for some reason.`);
+                            } else {
+                                console.log('Layer::findInjectPanel', `cannot inject record panel for ${this.id()} for some reason.`);
+                            }
                         }
 
                         injectedPanel = true;

bin/web/js/theatre-play.js

@@ -627,12 +627,10 @@ const TheatrePlay = function(autoInit = false) {
         //     margin-right: 15px;
         // }
         input[type=checkbox] {
-            position: absolute;
-            width: 27px;
-            opacity: 0; 
         }
         input[type=checkbox]:checked + label {
           color: #1cba94;
+          padding-left: 4px;
         }
         input[type=checkbox] + label::after{
           content: ' OFF';