56 lines
2.7 KiB
JavaScript
56 lines
2.7 KiB
JavaScript
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 mapFontRgba({ 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: lowerVal,
|
|
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);
|
|
}
|