From 5dcbef2b63a4bca2e7170b29fa8e235d13a2a1b9 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Thu, 21 Apr 2022 01:46:44 -0500
Subject: [PATCH] Added options for bounds on text color mapping values.

Refactored how mapping functions were organized.
---
 src/mappings/coloring.js      | 55 ++++++++++++++++++++++
 src/mappings/dimensions.js    | 38 ++++++++++++++-
 src/mappings/mappings.js      |  4 +-
 src/mappings/text.js          | 88 -----------------------------------
 tutorials/VisMusicPlayer.html |  4 +-
 5 files changed, 96 insertions(+), 93 deletions(-)
 create mode 100644 src/mappings/coloring.js
 delete mode 100644 src/mappings/text.js

diff --git a/src/mappings/coloring.js b/src/mappings/coloring.js
new file mode 100644
index 0000000..693a302
--- /dev/null
+++ b/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);
+}
diff --git a/src/mappings/dimensions.js b/src/mappings/dimensions.js
index e42fa56..741b20d 100644
--- a/src/mappings/dimensions.js
+++ b/src/mappings/dimensions.js
@@ -77,4 +77,40 @@ export function mapHeight({ element, growLower, growUpper, unit, lowerBin, visUp
         return mapRangedAvgNumerical(conf);
     }
     return mapBinNumerical(conf);
-}
\ No newline at end of file
+}
+
+/**
+ * 
+ * @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);
+}
diff --git a/src/mappings/mappings.js b/src/mappings/mappings.js
index 811ad99..8328696 100644
--- a/src/mappings/mappings.js
+++ b/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 };
\ No newline at end of file
+export { dimensions, numeric, coloring };
\ No newline at end of file
diff --git a/src/mappings/text.js b/src/mappings/text.js
deleted file mode 100644
index c1f6fa3..0000000
--- a/src/mappings/text.js
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/tutorials/VisMusicPlayer.html b/tutorials/VisMusicPlayer.html
index 07f3eee..1447fb5 100644
--- a/tutorials/VisMusicPlayer.html
+++ b/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,