Added width and height property mapping.

Changed some documentation notation and refactored previous code.

src/mapping/dimensions.js

@@ -0,0 +1,78 @@
+import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
+import { mapBinNumerical, mapRangedAvgNumerical } from "./generic.js";
+
+/**
+ * Maps the width of an element to frequency bin(s).
+ * 
+ * @param {object} conf The configuration for mapping amplitudes to a width CSS property.
+ * @param {HTMLElement} conf.element The html element to map the width to.
+ * @param {number} conf.growLower The lower limit of the width.
+ * @param {number} conf.growUpper The upper limit of the width.
+ * @param {string} conf.unit The unit the upper and lower bounds are measured in.
+ * @param {number} conf.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
+ * @param {VisualizerUpdateManager} conf.visUpdateManager The visualizer update manager to be mapped to.
+ * @param {interpolator} conf.interpolator The interpolation function to be used to transition from one value to the next.
+ * @param {number} [conf.upperBin] The upper bin or undefined, which results in mapping to a single bin.
+ * @param {boolean} [conf.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
+ * @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
+ */
+export function mapWidth({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
+    const getter = () => element.style.width;
+    const setter = (value) => element.style.width = value + unit;
+    const conf = {
+        minVal: growLower,
+        maxVal: growUpper,
+        bin: lowerBin,
+        getter: getter,
+        setter: setter,
+        interpolator: interpolator,
+        visUpdateManager: visUpdateManager,
+        reversed: reversed
+    };
+
+    if (upperBin) {
+        conf.bin = undefined;
+        conf.lowerBin = lowerBin;
+        conf.upperBin = upperBin;
+        return mapRangedAvgNumerical(conf);
+    }
+    return mapBinNumerical(conf);
+}
+
+/**
+ * Maps the height of an element to frequency bin(s).
+ * 
+ * @param {object} conf The configuration for mapping amplitudes to a height CSS property.
+ * @param {HTMLElement} conf.element The html element to map the height to.
+ * @param {number} conf.growLower The lower limit of the height.
+ * @param {number} conf.growUpper The upper limit of the height.
+ * @param {string} conf.unit The unit the upper and lower bounds are measured in.
+ * @param {number} conf.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
+ * @param {VisualizerUpdateManager} conf.visUpdateManager The visualizer update manager to be mapped to.
+ * @param {interpolator} conf.interpolator The interpolation function to be used to transition from one value to the next.
+ * @param {number} [conf.upperBin] The upper bin or undefined, which results in mapping to a single bin.
+ * @param {boolean} [conf.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
+ * @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
+ */
+export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
+    const getter = () => element.style.height;
+    const setter = (value) => element.style.height = value + unit;
+    const conf = {
+        minVal: growLower,
+        maxVal: growUpper,
+        bin: lowerBin,
+        getter: getter,
+        setter: setter,
+        interpolator: interpolator,
+        visUpdateManager: visUpdateManager,
+        reversed: reversed
+    };
+
+    if (upperBin) {
+        conf.bin = undefined;
+        conf.lowerBin = lowerBin;
+        conf.upperBin = upperBin;
+        return mapRangedAvgNumerical(conf);
+    }
+    return mapBinNumerical(conf);
+}

src/mapping/generic.js

@@ -4,28 +4,6 @@
 
 import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
 
-// TODO: Figure out how to not need this defined multiple times.
-/**
- * @callback interpolator
- * @param {number} current the current value.
- * @param {number} dest the destination value.
- * @param {number} frameDelta the time elapsed since the last update.
- * @returns {number} the new current value.
- */
-
-/**
- * @callback VisualizerUpdateManager.visualizerRangedUpdateListener
- * @param {number} timeDelta elapsed time since last update.
- * @param {number} bins the bins of the range.
- */
-
-/**
- * @callback VisualizerUpdateManager.visualizerBinUpdateListener
- * @param {number} timeDelta elapsed time since last update.
- * @param {number} amplitude The amplitude of the associated bin.
- * @param {number} ampDelta change in amplitude of the frequency bin.
- */
-
 /**
  * 
  * @callback numericalGetter
@@ -106,4 +84,3 @@ export function mapBinNumerical({ minVal, maxVal, bin, getter, setter, interpola
     }
     return null; // Technically doesn't occur since the functions are anonymous?
 }
-

src/mapping/text.js

@@ -2,27 +2,6 @@ import { parseColor, rgbaToHexRgba } from "./colors.js";
 import VisualizerUpdateManager from "../visualization/VisualizerUpdateManager.js";
 import { mapBinNumerical, mapRangedAvgNumerical } from "./generic.js";
 
-// TODO: Future: Should be able to remove this since already declared in easings.js, but don't know how to link.
-/**
- * @callback interpolator
- * @param {number} current the current value.
- * @param {number} dest the destination value.
- * @param {number} frameDelta the time elapsed since the last update.
- * @returns {number} the new current value.
- */
-
-/**
- * @callback VisualizerUpdateManager.visualizerRangedUpdateListener
- * @param {number} timeDelta elapsed time since last update.
- * @param {number} bins the bins of the range.
- */
-
-/**
- * @callback VisualizerUpdateManager.visualizerBinUpdateListener
- * @param {number} timeDelta elapsed time since last update.
- * @param {number} amplitude The amplitude of the associated bin.
- * @param {number} ampDelta change in amplitude of the frequency bin.
- */
 
 /**
  * Maps the red component of the text color to a certain range of bins.
@@ -47,30 +26,23 @@ export function mapRgba({ element, color, lowerBin, visUpdateManager, interpolat
         changed[color] = value;
         element.style.color = rgbaToHexRgba(changed);
     };
-    if (!upperBin) {
+    const conf = {
-        return mapBinNumerical({
-            minVal: 0,
-            maxVal: 255,
-            bin: lowerBin,
-            getter: getter,
-            setter: setter,
-            interpolator: interpolator,
-            visUpdateManager: visUpdateManager,
-            reversed: reversed
-        });
-    }
-    // TODO: Future: Could use the same object and modify
-    return mapRangedAvgNumerical({
         minVal: 0,
         maxVal: 255,
-        lowerBin: lowerBin,
+        bin: lowerBin,
-        upperBin: upperBin,
         getter: getter,
         setter: setter,
         interpolator: interpolator,
         visUpdateManager: visUpdateManager,
         reversed: reversed
-    });
+    };
+    if (upperBin) {
+        conf.bin = undefined;
+        conf.lowerBin = lowerBin;
+        conf.upperBin = upperBin;
+        return mapRangedAvgNumerical(conf);
+    }
+    return mapBinNumerical(conf);
 }
 
 /**
@@ -85,38 +57,28 @@ export function mapRgba({ element, color, lowerBin, visUpdateManager, interpolat
  * @param {interpolator} fontSizeMapConfiguration.interpolator The interpolation function to be used to transition from one value to the next.
  * @param {number} [fontSizeMapConfiguration.upperBin=undefined] The upper bin, or undefined, which results in mapping to a single bin.
  * @param {boolean} [fontSizeMapConfiguration.reversed=false] If true, then high amplitudes are mapped to lower values and vice versa.
- * @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The ranged listener that was added.
+ * @returns {{bin: number, listener: VisualizerUpdateManager.visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisualizerUpdateManager.visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
  */
 export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateManager, interpolator, upperBin = undefined, reversed = false }) {
-    const getter = () => {
+    const getter = () => parseInt(element.style.fontSize);
-        return parseInt(element.style.fontSize);
+    const setter = (value) => element.style.fontSize = value + unit;
-    };
+    const conf = {
-    const setter = (value) => {
-        element.style.fontSize = value + unit;
-    };
-    if (!upperBin) {
-        return mapBinNumerical({
-            minVal: growLower,
-            maxVal: growUpper,
-            bin: lowerBin,
-            getter: getter,
-            setter: setter,
-            interpolator: interpolator,
-            visUpdateManager: visUpdateManager,
-            reversed: reversed
-        });
-    }
-    return mapRangedAvgNumerical({
         minVal: growLower,
         maxVal: growUpper,
-        lowerBin: lowerBin,
+        bin: lowerBin,
-        upperBin: upperBin,
         getter: getter,
         setter: setter,
         interpolator: interpolator,
         visUpdateManager: visUpdateManager,
         reversed: reversed
-    });
+    };
+    if (upperBin) {
+        conf.bin = undefined;
+        conf.lowerBin = lowerBin;
+        conf.upperBin = upperBin;
+        return mapRangedAvgNumerical(conf);
+    }
+    return mapBinNumerical(conf);
 }
 
 // TODO: Future: map hue