Added options for bounds on text color mapping values.

Refactored how mapping functions were organized.

src/mappings/coloring.js

@@ -0,0 +1,55 @@
+import { parseColor, rgbaToHexRgba } from "../support/colors.js";
+import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
+import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
+
+
+/**@module */
+
+/**
+ * Maps the red component of the text color to a certain range of bins.
+ * 
+ * @param {object} conf The configuration of the mapping.
+ * @param {HTMLElement} conf.element The element whose text's red value should be mapped.
+ * @param {number} conf.color Where r for red, g, for green, b for blue, and a for alpha.
+ * @param {number} conf.lowerBin The lower bound of the bins to be mapped.
+ * @param {VisUpdateRouter} conf.visUpdateRouter The visualizer update manager associated with the audio playback you would like the mapping with.
+ * @param {Function} conf.interpolator The interpolation function to use.
+ * @param {number} [conf.upperBin=undefined] The upper bound of the bins to be mapped. If left undefined, then only the bin defined by the min value is used.
+ * @param {boolean} [conf.reversed=true] If true, then the quieter, the greater the red value.
+ * @param {number} [conf.lowerVal=0] The lower boundary of possible values for the color component (0 to upperVal inclusive).
+ * @param {number} [conf.upperVal=0] The upper boundary of possible values for the color component (0 to 255 inclusive).
+ * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The ranged listener that was added.
+ */
+export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false, lowerVal = 0, upperVal = 255 }) {
+    const rgbaStr = "rgba";
+    color = rgbaStr.indexOf(color);
+    if (color < 0) throw new Error("Invalid color parameter provided.");
+    const getter = () => {
+        if (!element.style.color) element.style.color = "rgba(0, 0, 0, 255)";
+        return parseColor(element.style.color)[color];
+    };
+    const setter = (value) => {
+        const changed = parseColor(element.style.color);
+        changed[color] = value;
+        element.style.color = rgbaToHexRgba(changed);
+    };
+    upperVal = Math.min(Math.max(0, upperVal), 255);
+    lowerVal = Math.min(Math.max(0, lowerVal), upperVal);
+    const conf = {
+        minVal: lowerBin,
+        maxVal: upperVal,
+        bin: lowerBin,
+        getter: getter,
+        setter: setter,
+        interpolator: interpolator,
+        visUpdateRouter: visUpdateRouter,
+        reversed: reversed
+    };
+    if (upperBin) {
+        conf.bin = undefined;
+        conf.lowerBin = lowerBin;
+        conf.upperBin = upperBin;
+        return mapRangedAvgNumerical(conf);
+    }
+    return mapBinNumerical(conf);
+}

src/mappings/dimensions.js

@@ -78,3 +78,39 @@ export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUp
     }
     return mapBinNumerical(conf);
 }
+
+/**
+ * 
+ * @param {object} fontSizeMapConfiguration The configuration of the font size mapping.
+ * @param {HTMLElement} fontSizeMapConfiguration.element The element whose font sizes will be mapped to the amplitude.
+ * @param {number} fontSizeMapConfiguration.growLower The lower limit of the font size.
+ * @param {number} fontSizeMapConfiguration.growUpper The upper limit of the font size.
+ * @param {string} fontSizeMapConfiguration.unit The unit the upper and lower bounds are measured in.
+ * @param {number} fontSizeMapConfiguration.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
+ * @param {VisUpdateRouter} fontSizeMapConfiguration.visUpdateRouter the visualizer update manager to be mapped to.
+ * @param {module:support/easings~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: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
+ */
+export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
+    const getter = () => parseInt(element.style.fontSize);
+    const setter = (value) => element.style.fontSize = value + unit;
+    const conf = {
+        minVal: growLower,
+        maxVal: growUpper,
+        bin: lowerBin,
+        getter: getter,
+        setter: setter,
+        interpolator: interpolator,
+        visUpdateRouter: visUpdateRouter,
+        reversed: reversed
+    };
+    if (upperBin) {
+        conf.bin = undefined;
+        conf.lowerBin = lowerBin;
+        conf.upperBin = upperBin;
+        return mapRangedAvgNumerical(conf);
+    }
+    return mapBinNumerical(conf);
+}

src/mappings/mappings.js

@@ -1,6 +1,6 @@
 import * as dimensions from "./dimensions.js";
 import * as numeric from "./numeric.js";
-import * as text from "./text.js";
+import * as coloring from "./coloring.js";
 
 
-export { dimensions, numeric, text };
+export { dimensions, numeric, coloring };

src/mappings/text.js

@@ -1,88 +0,0 @@
-import { parseColor, rgbaToHexRgba } from "../support/colors.js";
-import VisUpdateRouter from "../visualization/VisUpdateRouter.js";
-import { mapBinNumerical, mapRangedAvgNumerical } from "./numeric.js";
-
-/**@module */
-
-/**
- * Maps the red component of the text color to a certain range of bins.
- * 
- * @param {object} rgbaMapConfiguration The configuration of the mapping.
- * @param {HTMLElement} rgbaMapConfiguration.element The element whose text's red value should be mapped.
- * @param {number} rgbaMapConfiguration.color Where r for red, g, for green, b for blue, and a for alpha.
- * @param {number} rgbaMapConfiguration.lowerBin The lower bound of the bins to be mapped.
- * @param {VisUpdateRouter} rgbaMapConfiguration.visUpdateRouter The visualizer update manager associated with the audio playback you would like the mapping with.
- * @param {Function} rgbaMapConfiguration.interpolator The interpolation function to use.
- * @param {number} [rgbaMapConfiguration.upperBin=undefined] The upper bound of the bins to be mapped. If left undefined, then only the bin defined by the min value is used.
- * @param {boolean} [rgbaMapConfiguration.reversed=true] If true, then the quieter, the greater the red value.
- * @returns {{bin: number, listener: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The ranged listener that was added.
- */
-export function mapRgba({ element, color, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
-    const rgbaStr = "rgba";
-    color = rgbaStr.indexOf(color);
-    if (color < 0) throw new Error("Invalid color parameter provided.");
-    const getter = () => {
-        if (!element.style.color) element.style.color = "rgba(0, 0, 0, 255)";
-        return parseColor(element.style.color)[color];
-    };
-    const setter = (value) => {
-        const changed = parseColor(element.style.color);
-        changed[color] = value;
-        element.style.color = rgbaToHexRgba(changed);
-    };
-    const conf = {
-        minVal: 0,
-        maxVal: 255,
-        bin: lowerBin,
-        getter: getter,
-        setter: setter,
-        interpolator: interpolator,
-        visUpdateRouter: visUpdateRouter,
-        reversed: reversed
-    };
-    if (upperBin) {
-        conf.bin = undefined;
-        conf.lowerBin = lowerBin;
-        conf.upperBin = upperBin;
-        return mapRangedAvgNumerical(conf);
-    }
-    return mapBinNumerical(conf);
-}
-
-/**
- * 
- * @param {object} fontSizeMapConfiguration The configuration of the font size mapping.
- * @param {HTMLElement} fontSizeMapConfiguration.element The element whose font sizes will be mapped to the amplitude.
- * @param {number} fontSizeMapConfiguration.growLower The lower limit of the font size.
- * @param {number} fontSizeMapConfiguration.growUpper The upper limit of the font size.
- * @param {string} fontSizeMapConfiguration.unit The unit the upper and lower bounds are measured in.
- * @param {number} fontSizeMapConfiguration.lowerBin The lower boundary of bins to be mapped (or the single bin to be mapped if the upper bin is undefined).
- * @param {VisUpdateRouter} fontSizeMapConfiguration.visUpdateRouter the visualizer update manager to be mapped to.
- * @param {module:support/easings~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: VisUpdateRouter~visualizerBinUpdateListener}|{lower: number, upper: number, listener: VisUpdateRouter~visualizerRangedUpdateListener}} The listener that was added (ranged if an upper bound was provided, binned otherwise).
- */
-export function mapFontSize({ element, growLower, growUpper, unit, lowerBin, visUpdateRouter, interpolator, upperBin = undefined, reversed = false }) {
-    const getter = () => parseInt(element.style.fontSize);
-    const setter = (value) => element.style.fontSize = value + unit;
-    const conf = {
-        minVal: growLower,
-        maxVal: growUpper,
-        bin: lowerBin,
-        getter: getter,
-        setter: setter,
-        interpolator: interpolator,
-        visUpdateRouter: visUpdateRouter,
-        reversed: reversed
-    };
-    if (upperBin) {
-        conf.bin = undefined;
-        conf.lowerBin = lowerBin;
-        conf.upperBin = upperBin;
-        return mapRangedAvgNumerical(conf);
-    }
-    return mapBinNumerical(conf);
-}
-
-// TODO: Future: map hue

tutorials/VisMusicPlayer.html

@@ -105,7 +105,7 @@
         </div>
         <pre><code class="language-js">
             const fontColorElem = document.getElementById("font-color-map-demo");
-            ask.mappings.text.mapRgba({ // Under mappings, the text module. We just want to map one of the RGBA color components...
+            ask.mappings.coloring.mapRgba({ // Under mappings, the text module. We just want to map one of the RGBA color components...
                 element: fontColorElem, // The element to map (same as above examples).
                 color: "r", // Choose the red component.
                 lowerBin: 128, // All other values are what we've seen above.
@@ -173,7 +173,7 @@
     ask.mappings.dimensions.mapHeight(squareElemConf);
 
     const fontColorElem = document.getElementById("font-color-map-demo");
-    ask.mappings.text.mapRgba({
+    ask.mappings.coloring.mapRgba({
         element: fontColorElem,
         color: "r",
         lowerBin: 128,