@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/tr-grid-util/es6/CellPainter.js

@@ -0,0 +1,1183 @@
+import { TickCodes, TickFields } from "./TickCodes.js";
+import { rgb2Hex, num2Hex, num2Rgb, hex2Num, hex2Rgb, blendColor, getContrastColor } from "./Color.js";
+import { ElfUtil } from "./ElfUtil.js";
+import { ExpressionParser } from "./ExpressionParser.js";
+
+/** @typedef {Object} CellPainter~Expression
+* @ignore
+* @description This form of expression is deprecated
+* @property {string=} name
+* @property {string} text Text describes condition e.g. [FIELD] > 10
+* @property {Array=} values
+*/
+
+/** @typedef {Object} CellPainter~Condition
+* @property {string|Function} expression A function, text, or an object with text property that describes the condition
+* @property {string=} field Field to be used in the condition
+* @property {string=} backgroundColor CSS color string
+* @property {string=} color CSS color string
+* @property {string=} fontSize
+* @property {string=} fontWeight
+* @property {string=} fontStyle
+* @property {string=} textAlign
+* @property {string=} textDecoration
+* @property {string=} cssClass Predefined color class name
+*/
+
+/** @typedef {Object.<string, string>} CellPainter~ThemeColors
+* @description Theme colors in hex format. All of the values are optional
+* @property {string=} baseGrid Background color of the grid element
+* @property {string=} baseText Text color of the grid element
+* @property {string=} up Color for positive value
+* @property {string=} down Color for negative value
+* @property {string=} level Color for neutral/unchanged value
+* @property {string=} tickUp Color for positive tick icon
+* @property {string=} tickDown Color for negative tick icon
+*/
+
+/** @constructor
+*/
+let CellPainter = function() {
+	this._conditions = [];
+	this._scopes = [];
+
+	CellPainter._painters.push(this); // For later referencing
+};
+/** @private
+* @function
+* @param {Element} elem
+* @param {string=} targetClass
+*/
+let _removeCssClass = function(elem, targetClass) {
+	if (elem._coloringCssClass != null && elem._coloringCssClass !== targetClass) {
+		elem.classList.remove(elem._coloringCssClass);
+		elem._coloringCssClass = null;
+	}
+};
+
+/** Enum for coloring types.
+* @enum {number}
+*/
+CellPainter.ColoringTypes = {
+	TEXT: 1,
+	HEATMAP: 2,
+	CONDITIONAL: 3
+};
+
+/** @type {CellPainter.ColoringTypes}
+* @private
+*/
+CellPainter.prototype._coloringType = 0;
+/** @type {Array.<Object>}
+* @private
+*/
+CellPainter.prototype._conditions = null;
+/** @type {Object}
+* @private
+*/
+CellPainter.prototype._effectiveStyles = null;
+/** @type {Object}
+* @private
+*/
+CellPainter.prototype._blinkCondition = null;
+/** @type {!Array}
+* @private
+*/
+CellPainter.prototype._scopes;
+/** @type {Object}
+* @private
+*/
+CellPainter.prototype._columnStats = null;
+/** @type {number}
+* @private
+*/
+CellPainter.prototype._blinkingDuration = 250;
+
+/** @type {number}
+* @private
+*/
+CellPainter._runningBlinkId = 0;
+
+/** @type {Array.<CellPainter>}
+* @private
+* @const
+*/
+CellPainter._painters = [];
+
+/** @type {!Array}
+* @private
+* @const
+*/
+CellPainter._emptyAry = [];
+/** @type {!Object}
+* @private
+* @const
+*/
+CellPainter._emptyObj = {};
+/** @type {!Object}
+* @private
+* @const
+*/
+CellPainter._bgObj = {"backgroundColor": "", "color": ""};
+/** @type {!Object}
+* @private
+* @const
+*/
+CellPainter._colorObj = {"color": ""};
+/** @type {!Array.<string>}
+* @private
+* @const
+*/
+CellPainter.bgStyles = ["backgroundColor", "color"];
+/** @type {!Array.<string>}
+* @private
+* @const
+*/
+CellPainter.nonBgStyles = ["fontSize", "fontWeight", "fontStyle", "textAlign", "textDecoration"];
+/** @type {!Array.<string>}
+* @private
+* @const
+*/
+CellPainter.supportedStyles = CellPainter.bgStyles.concat(CellPainter.nonBgStyles);
+/** @type {Promise<Object>}
+* @public
+*/
+CellPainter.themeReady = null;
+/** @type {Object}
+* @private
+*/
+CellPainter._contrastColors = {};
+
+/** Deprecated in favor of ExpressionParser
+* @public
+* @function
+* @param {string|Function} expression
+* @return {Function}
+* @example
+* let fn = CellPainter.parse("[CF_BID] >= 10 && [CF_BID] <= 100");
+* window.console.log(fn(25));
+*/
+CellPainter.parse = ExpressionParser.parse;
+
+
+/** @public */
+CellPainter.prototype.dispose = function() {
+	let at = CellPainter._painters.indexOf(this);
+	if(at >= 0) {
+		CellPainter._painters.splice(at, 1);
+	}
+	this.reset(); // Restore all styles and clear all blink timers
+
+	this._conditions = null;
+	this._scopes.length = 0;
+
+	this._blinkCondition = null;
+};
+/** @public */
+CellPainter.prototype.reset = function() {
+	this._setColoringType(0);
+	this.clearBlinking();
+};
+
+/** @public */
+CellPainter.prototype.resetColoring = function() {
+	// reset coloring type to allow other extensions to be able to set their new mode
+	this._setColoringType(0);
+	this._effectiveStyles = null;
+	this._conditions.length = 0;
+};
+
+/** @public */
+CellPainter.prototype.clearBlinking = function() {
+	this._blinkCondition = null;
+	let len = this._scopes.length;
+	if(len) {
+		for(let i = 0; i < len; ++i) {
+			let scope = this._scopes[i];
+			if(CellPainter._clearBlinkTimer(scope)) {
+				scope._restorer();
+			}
+			let cell = scope["cell"];
+			if(cell) { // cell may be removed before
+				delete cell["blinking"]; // Delete cell blinking scope
+			}
+
+			scope["cell"] = null;
+		}
+		this._scopes.length = 0;
+	}
+};
+/** @public
+* @ignore
+* @function
+*/
+CellPainter.prototype.resetBlinking = CellPainter.prototype.clearBlinking;
+
+/** Return true if no one is using this painter
+ * @public
+ * @return {boolean}
+*/
+CellPainter.prototype.clearHeatMap = function() {
+	if(this._blinkCondition) {
+		this._setColoringType(0);
+		this.resetHeatMap();
+		return false;
+	} else {
+		this.dispose();
+		return true;
+	}
+};
+/** @public
+* @ignore
+* @function
+*/
+CellPainter.prototype.resetHeatMap = function() {
+	this._conditions.length = 0;
+	this._columnStats = null;
+};
+
+/** @public */
+CellPainter.prototype.applyThemeColor = function() {
+	let colors = ElfUtil.getColors();
+	if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) { // Heatmap uses grid color to blend the result color
+		let cond = this._conditions[0]; // Heatmap, color text condition must be the first
+		if(cond) {
+			if(cond["textMode"]) {
+				cond["baseColor"] = colors["baseText"];
+			} else {
+				cond["baseColor"] = colors["baseGrid"];
+			}
+			if(cond["useThemeColor"]) {
+				let up = colors["up"];
+				let down = colors["down"];
+				let level = (colors["level"] === colors["baseText"]) ? "" : colors["level"];
+				CellPainter._setUpDownColors(cond, up, down, level);
+			}
+		}
+	}
+
+	if(this._blinkCondition && this._blinkCondition["useThemeColor"]) {
+		CellPainter._setUpDownColors(this._blinkCondition, colors["up"], colors["down"], colors["level"], true);
+	}
+};
+/** Used by monitor saving
+* @public
+* @return {Array.<Object>}
+*/
+CellPainter.prototype.getConditions = function() {
+	return this._conditions;
+};
+/** Used by monitor saving <br>
+* Returns the coloring type ("text", "heatmap", "conditional")
+* @public
+* @return {CellPainter.ColoringTypes}
+*/
+CellPainter.prototype.getColoringType = function() {
+	return this._coloringType;
+};
+/** @private
+* @param {number} enumType Available values are TEXT, HEATMAP, CONDITIONAL
+*/
+CellPainter.prototype._setColoringType = function(enumType) {
+	if(this._coloringType !== enumType) { // We can only have one type of coloring
+		this._coloringType = enumType;
+	}
+};
+/** @public
+* @param {Object} mapping Effective styles mapping
+*/
+CellPainter.prototype.setEffectiveStyles = function(mapping) {
+	this._effectiveStyles = mapping;
+};
+/** @public
+* @return {Object}
+*/
+CellPainter.prototype.getEffectiveStyles = function() {
+	return this._effectiveStyles;
+};
+/** @public
+* @param {Array.<CellPainter~Condition>} conditions
+*/
+CellPainter.prototype.setConditions = function(conditions) {
+	this._conditions.length = 0; // TODO: Clear existing cell styles first
+	this._setColoringType(CellPainter.ColoringTypes.CONDITIONAL);
+
+	let len = conditions ? conditions.length : 0;
+	for (let i = 0; i < len; i++) {
+		this._addCondition(conditions[i]);
+	}
+};
+/** @public
+* @param {Object} columnStats
+*/
+CellPainter.prototype.setColumnStats = function(columnStats) {
+	this._columnStats = (columnStats && columnStats.getMin) ? columnStats : null;
+};
+/** @public
+* @return {Object}
+*/
+CellPainter.prototype.getColumnStats = function() {
+	return this._columnStats;
+};
+/** @private
+* @param {CellPainter~Condition} condition
+*/
+CellPainter.prototype._addCondition = function(condition) {
+	let exp = condition["expression"];
+	if(exp) {
+		condition._fn = ExpressionParser.parse(exp["text"] || exp);
+		this._conditions.push(condition);
+	}
+};
+/** @public
+* @param {string} field
+* @param {number} midPoint
+* @param {string} upColor
+* @param {string} downColor
+* @param {string} baseColor
+* @param {(string|boolean)=} opt_textMode
+* @return {!Object}
+*/
+CellPainter.prototype.addHeatmap = function(field, midPoint, upColor, downColor, baseColor, opt_textMode) {
+	this._setColoringType(CellPainter.ColoringTypes.HEATMAP);
+
+	let condition = {};
+	condition["heatmap"] = true;
+	condition["field"] = field;
+	condition["expression"] = CellPainter._heatMapCondition.bind(condition);
+	condition["midPoint"] = midPoint;
+	CellPainter._setUpDownColors(condition, upColor, downColor);
+
+	condition["baseColor"] = baseColor;
+	if(opt_textMode === true || opt_textMode === "text") {
+		condition["textMode"] = true;
+	}
+
+	this._addCondition(condition);
+	return condition;
+};
+/** @public
+* @param {string} field
+* @param {number} midPoint
+* @param {(string|boolean)=} opt_textMode
+* @return {!Object}
+*/
+CellPainter.prototype.addHeatmapWithTheme = function(field, midPoint, opt_textMode) {
+	let colors = ElfUtil.themeColors;
+	let condition = this.addHeatmap(
+		field,
+		midPoint,
+		colors["up"], colors["down"], colors["baseGrid"],
+		opt_textMode
+	);
+
+	if(opt_textMode === true || opt_textMode === "text") {
+		condition["baseColor"] = colors["baseText"];
+	}
+	condition["useThemeColor"] = true;
+	return condition;
+};
+/** @private
+* @param {Function} expression
+* @param {string} field
+* @param {string=} upClass CSS class name
+* @param {string=} downClass CSS class name
+* @param {string=} levelClass CSS class name
+* @return {!Object}
+*/
+CellPainter.prototype._addColorText = function(expression, field, upClass, downClass, levelClass) {
+	this._setColoringType(CellPainter.ColoringTypes.TEXT);
+
+	let condition = {};
+	condition["field"] = field;
+	condition["expression"] = expression.bind(null, field);
+	condition["upClass"] = upClass;
+	condition["downClass"] = downClass;
+	condition["levelClass"] = levelClass;
+	 // TODO: Make this consistent with other type (e.g., heat map and blinking)
+
+	this._addCondition(condition);
+	return condition;
+};
+/** @public
+* @param {string} field
+* @param {string=} upClass CSS class name
+* @param {string=} downClass CSS class name
+* @param {string=} levelClass CSS class name
+* @return {!Object}
+*/
+CellPainter.prototype.addColorText = function(field, upClass, downClass, levelClass) {
+	return this._addColorText(
+		TickFields[field] ? CellPainter._tickColorTextCondition : CellPainter._colorTextCondition,
+		field,
+		upClass, downClass, levelClass
+	);
+};
+/** @public
+* @param {string} field
+* @return {!Object}
+*/
+CellPainter.prototype.addColorTextWithTheme = function(field) {
+	let condition = this.addColorText(field, "positive", "negative", "neutral");
+	return condition;
+};
+/** @public
+* @param {string} upColor
+* @param {string} downColor
+* @param {string} levelColor
+* @return {!Object}
+*/
+CellPainter.prototype.addTickColorText = function(upColor, downColor, levelColor) {
+	return this.addColorText("CF_TICK", upColor, downColor, levelColor);
+};
+/** @public
+* @return {!Object}
+*/
+CellPainter.prototype.addTickColorTextWithTheme = function() {
+	let colors = ElfUtil.themeColors;
+	let condition = this.addTickColorText(colors["tickUp"], colors["tickDown"], colors["level"]);
+	condition["useThemeColor"] = true;
+	return condition;
+};
+/** @public
+* @param {string} upColor
+* @param {string} downColor
+* @param {string} levelColor
+* @param {(string|boolean)=} opt_border
+* @return {!Object}
+*/
+CellPainter.prototype.addTickBlink = function(upColor, downColor, levelColor, opt_border) {
+	return this.addBlink("CF_TICK", upColor, downColor, levelColor, opt_border);
+};
+/** @public
+* @param {(string|boolean)=} opt_border
+* @return {!Object}
+*/
+CellPainter.prototype.addTickBlinkWithTheme = function(opt_border) {
+	let colors = ElfUtil.themeColors;
+	let condition = this.addTickBlink(colors["tickUp"], colors["tickDown"], colors["level"], opt_border);
+	condition["useThemeColor"] = true;
+	return condition;
+};
+/** @public
+* @param {string} field
+* @param {string} upColor
+* @param {string} downColor
+* @param {string} levelColor
+* @param {(string|boolean)=} opt_border
+* @return {!Object}
+*/
+CellPainter.prototype.addBlink = function(field, upColor, downColor, levelColor, opt_border) {
+	return this._addBlink(
+		TickFields[field] ? CellPainter._tickBlinkCondition : CellPainter._fieldBlinkCondition,
+		field,
+		upColor, downColor, levelColor,
+		opt_border
+	);
+};
+/** @public
+* @param {string} field
+* @param {(string|boolean)=} opt_border
+* @return {!Object}
+*/
+CellPainter.prototype.addBlinkWithTheme = function(field, opt_border) {
+	let colors = ElfUtil.themeColors;
+	let condition = this.addBlink(field, colors["up"], colors["down"], colors["level"], opt_border);
+	condition["useThemeColor"] = true;
+	return condition;
+};
+/** @private
+* @param {Function} expression
+* @param {string} field
+* @param {string} upColor
+* @param {string} downColor
+* @param {string} levelColor
+* @param {(string|boolean)=} blinkType
+* @return {!Object}
+*/
+CellPainter.prototype._addBlink = function(expression, field, upColor, downColor, levelColor, blinkType) {
+	let condition = this._blinkCondition = {};
+	condition["blink"] = true;
+	condition["blinkId"] = CellPainter._runningBlinkId++;
+	condition["field"] = field;
+	condition._fn = condition["expression"] = expression;
+
+	if(blinkType === true || blinkType === "border") {
+		condition["border"] = true;
+	}
+	CellPainter._setUpDownColors(condition, upColor, downColor, levelColor, true);
+	return condition;
+};
+
+/** @public
+* @param {Element} cell
+* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+* @param {number} min
+* @param {number} max
+*/
+CellPainter.prototype.renderForPrinting = function(cell, rowData, min, max) {
+	if(!cell) {
+		return;
+	}
+	let styles = this._getStyles(rowData, min, max);
+	let cssClass = styles["cssClass"]; // Can be an empty string
+
+	_removeCssClass(cell, cssClass);
+	if (cssClass != null) { // Predefined colors mode
+		if (cssClass) {
+			cell.classList.add(cssClass);
+			cell._coloringCssClass = cssClass;
+		}
+	} else {
+		cell.style.backgroundColor = styles["backgroundColor"] || "";
+		cell.style.color = styles["color"] || "";
+	}
+};
+
+
+/** @private
+* @param {string} field
+* @param {Object} rowData
+* @return {string|number}
+*/
+CellPainter._colorTextCondition = function(field, rowData) {
+	let value = rowData[field];
+	if(value || value === 0) {
+		if(value > 0) {
+			return 1;
+		} else if(value < 0) {
+			return -1;
+		}
+	}
+	return "u"; // unchanged
+};
+/** @private
+* @param {string} field
+* @param {Object} rowData
+* @return {undefined|number}
+*/
+CellPainter._tickColorTextCondition = function(field, rowData) {
+	return TickCodes[rowData[field]];
+};
+/** @private
+* @this {Object}
+* @param {Object} rowData
+* @param {number} min
+* @param {number} max
+* @return {number}
+*/
+CellPainter._heatMapCondition = function(rowData, min, max) {
+	let value = rowData[this["field"]];
+	let diff = (value || value === 0) ? value - this["midPoint"] : NaN;
+	if (diff === 0 || diff !== diff) {
+		return 0;
+	}
+
+	let ratio;
+	let range = 1;
+	if(diff > 0) {
+		range = max - this["midPoint"];
+		if(range < 0) {
+			range = min - this["midPoint"];
+		}
+	} else {
+		range = min - this["midPoint"];
+		if(range > 0) {
+			range = max - this["midPoint"];
+		}
+	}
+	if(range < 0) {
+		range = -range;
+	}
+	ratio = diff / range;
+	return ratio;
+};
+/** @private
+* @function
+* @param {string} newValue
+* @return {undefined|number}
+*/
+CellPainter._tickBlinkCondition = function(newValue) {
+	return TickCodes[newValue];
+};
+/** @private
+* @function
+* @param {number} newValue
+* @param {number} oldValue
+* @return {number}
+*/
+CellPainter._fieldBlinkCondition = function(newValue, oldValue) {
+	if(newValue > oldValue) {
+		return 1; // eslint-disable-line
+	} else if(newValue < oldValue) {
+		return -1; // eslint-disable-line
+	} else { // AlphaNumeric, unchanged newValue
+		return 0; // eslint-disable-line
+	}
+};
+/** @private
+* @param {Object} scope
+*/
+CellPainter._borderRestorer = function(scope) {
+	scope["blinkTimer"] = 0;
+	let cell = scope["cell"];
+	let elem = cell.getElement();
+
+	if(elem) {
+		elem.style.border = "";
+	}
+};
+/** @private
+* @param {Object} scope
+*/
+CellPainter._cellRestorer = function(scope) {
+	scope["blinkTimer"] = 0;
+	let cell = scope["cell"];
+	let elem = cell.getElement();
+
+	if(elem) {
+		let rowData = scope["rowData"];
+		let min = NaN;
+		let max = NaN;
+		if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) {
+			let columnStats = this._columnStats;
+			if(columnStats) {
+				min = columnStats.getMin();
+				max = columnStats.getMax();
+			}
+		}
+
+		let styles = this._getStyles(rowData, min, max);
+		let cssClass = styles["cssClass"]; // Can be an empty string
+		_removeCssClass(elem, cssClass);
+		if (cssClass != null) { // Predefined colors mode
+			if (cssClass) {
+				elem.classList.add(cssClass);
+				elem._coloringCssClass = cssClass;
+			}
+			// Remove blinking color
+			elem.style.backgroundColor = "";
+			elem.style.color = "";
+		} else {
+			elem.style.backgroundColor = styles["backgroundColor"] || "";
+			elem.style.color = styles["color"] || "";
+		}
+	}
+};
+
+/** WARNING: This method is called very often and the performance is very critical here
+* @private
+* @param {Object} rowData
+* @param {number=} min
+* @param {number=} max
+* @return {!Object}
+*/
+CellPainter.prototype._getStyles = function(rowData, min, max) {
+	if (!rowData) {
+		return CellPainter._emptyObj;
+	}
+
+	let len = this._conditions.length;
+	for(let i = 0; i < len; ++i) {
+		let curCond = this._conditions[i];
+		let fn = curCond._fn;
+		let ret;
+		try { // WARNING: Try/Catch is very slow. TODO: The function should be checked for validity beforehand
+			ret = fn && fn(rowData, min, max);
+		} catch (err){
+			// console.error(err.message); // This will produce tons of errors in the console
+		}
+		if (ret) { // Match condition with results 1, -1, true, or string
+			if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) {
+				let blendedColor;
+				if(ret > 0) {
+					blendedColor = blendColor(curCond["baseColor"], curCond["upColor"], ret);
+				} else {
+					blendedColor = blendColor(curCond["baseColor"], curCond["downColor"], -ret);
+				}
+
+				if(curCond["textMode"]) {
+					CellPainter._colorObj["color"] = num2Hex(blendedColor);
+					return CellPainter._colorObj;
+				} else {
+					CellPainter._bgObj["backgroundColor"] = num2Hex(blendedColor);
+					CellPainter._bgObj["color"] = getContrastColor(blendedColor);
+
+					return CellPainter._bgObj;
+				}
+			} else if(this._coloringType === CellPainter.ColoringTypes.TEXT) {
+				if(ret > 0) {
+					curCond["cssClass"] = curCond["upClass"];
+				} else if(ret < 0) {
+					curCond["cssClass"] = curCond["downClass"];
+				} else if(ret === 0) {
+					curCond["cssClass"] = curCond["levelClass"];
+				} // else case is no change in cssClass
+				if(!curCond["cssClass"]) {
+					curCond["cssClass"] = ""; // If no cssClass, remove existing one
+				}
+				return curCond;
+			}
+
+			// Expected return value is {
+			//   "backgroundColor": bgc,
+			//   "color": color,
+			//   "fontSize": fSize,
+			//   "fontWeight": fWeight,
+			//   "fontStyle": fStyle,
+			//   "textAlign": tAlign,
+			//   "textDecoration": tDecor
+			// };
+			return curCond; // Conditional Coloring
+		}
+	}
+	return CellPainter._emptyObj;
+};
+
+/** @public
+* @function
+* @param {string} baseColor
+* @param {string} maxColor
+* @param {number} ratio [0, 1]
+* @return {Array.<number>} resultColor
+*/
+CellPainter.blendColor = blendColor; // For backward compatability
+/** @private
+* @function
+* @param {Array.<number>} triplet
+* @return {string} resultColor
+*/
+CellPainter.blackAndWhite = getContrastColor; // For backward compatability
+/** @public
+* @function
+* @param {string} rgbCode
+* @return {string} resultColor E.g. "#10FF0D"
+*/
+CellPainter.rgb2Hex = rgb2Hex; // For backward compatability
+/** @public
+* @function
+* @param {Array.<number>} triplet
+* @return {string} resultColor
+*/
+CellPainter.num2Hex = num2Hex; // For backward compatability
+/** Note that Chrome, IE, and Firefox store color in rgb representation.
+* @public
+* @function
+* @param {Array.<number>} triplet
+* @return {string} Color string in RGB represetation (e.g. rgb(100, 44, 1))
+*/
+CellPainter.num2Rgb = num2Rgb; // For backward compatability
+/** @public
+* @function
+* @param {string} hex
+* @return {Array.<number>} array of size 3 which contains [red, green, blue]
+*/
+CellPainter.hex2Num = hex2Num; // For backward compatability
+/** @public
+* @function
+* @param {string} hex Color string with leading # character (e.g. #FFAA00)
+* @return {string} Color string in RGB represetation (e.g. rgb(100, 44, 1))
+*/
+CellPainter.hex2Rgb = hex2Rgb; // For backward compatability
+
+/** Deprecated. Colors should be changed according to user's settings by CellPainter#loadThemeColors
+* @private
+* @function
+*/
+CellPainter.themeChanged = function() {};
+/** Deprecated. Colors should be changed according to user's settings by CellPainter#loadThemeColors
+* @public
+* @function
+*/
+CellPainter.setThemeColors = function() {};
+/** @private
+* @function
+*/
+CellPainter._onThemeChanged = function() {
+	// Apply newly changed theme to all the painters
+	let painters = CellPainter._painters;
+	for(let i = painters.length; --i >= 0;) {
+		painters[i].applyThemeColor(); // Re-apply theme color
+	}
+};
+/** Load theme colors and change colors for all instances of CellPainter
+* @public
+* @function
+* @return {Promise<Object>}
+*/
+CellPainter.loadThemeColors = function() {
+	if(!CellPainter.themeReady) {
+		CellPainter.themeReady = ElfUtil.getThemeColors(CellPainter._onThemeChanged)
+			.then(CellPainter._onThemeChanged)
+			.catch(CellPainter._onThemeChanged);
+	}
+	return CellPainter.themeReady;
+};
+
+/** Reload theme colors and change colors for all instances of CellPainter
+* @public
+* @function
+* @return {Promise<Object>}
+*/
+CellPainter.reloadThemeColors = function () {
+	CellPainter.themeReady = ElfUtil.reloadThemeColors()
+		.then(CellPainter._onThemeChanged)
+		.catch(CellPainter._onThemeChanged);
+	return CellPainter.themeReady;
+};
+
+/** @public
+* @function
+* @ignore
+* @param {tr.grid.Cell} cell
+* @param {Object=} styles
+*/
+CellPainter.clearCellStyle = function(cell, styles) {
+	let elem = cell.getElement();
+	if(!elem) {
+		return; // Cell has been disposed
+	}
+
+	let scope = cell["blinking"];
+	if(scope) { // Clear blinking scope
+		CellPainter._clearBlinkTimer(scope);
+
+		delete cell["blinking"]; // Delete cell blinking scope
+
+		scope["cell"] = null;
+		// WARNING: Scope is not removed from the this._scopes collection to speed things up
+	}
+
+	_removeCssClass(elem);
+
+	if(!styles){
+		styles = CellPainter.supportedStyles;
+	}
+	if(Array.isArray(styles)){
+		for(let i = styles.length; --i >= 0;) {
+			elem.style[styles[i]] = "";  // WARNING: Very slow
+		}
+	} else {
+		for(let key in styles) {
+			elem.style[key] = "";  // WARNING: Very slow
+		}
+	}
+};
+/** @private
+* @param {!Object} scp Scope Object
+* @param {string|null} upColor Color in hex representation
+* @param {string|null} downColor
+* @param {(string|null)=} levelColor
+* @param {boolean=} withContrast
+*/
+CellPainter._setUpDownColors = function(scp, upColor, downColor, levelColor, withContrast) {
+	scp["upColor"] = upColor;
+	if(upColor != null) {
+		if(withContrast) {
+			scp["contrastUpColor"] = CellPainter.getOppositeColor(upColor);
+		}
+	}
+
+	scp["downColor"] = downColor;
+	if(downColor != null) {
+		if(withContrast) {
+			scp["contrastDownColor"] = CellPainter.getOppositeColor(downColor);
+		}
+	}
+
+	scp["levelColor"] = levelColor;
+	if(levelColor != null) {
+		if(withContrast) {
+			scp["contrastLevelColor"] = CellPainter.getOppositeColor(levelColor);
+		}
+	}
+};
+/** @private
+* @param {!Object} scp Scope Object
+* @param {boolean=} opt_restoreColor
+* @return {boolean}
+*/
+CellPainter._clearBlinkTimer = function(scp, opt_restoreColor) {
+	if(scp["blinkTimer"]) {
+		clearTimeout(scp["blinkTimer"]);
+		scp["blinkTimer"] = 0;
+		return true;
+	}
+	return false;
+};
+/** @public
+* @param {string|Array.<number>} hexCode
+* @return {string}
+*/
+CellPainter.getOppositeColor = function (hexCode) {
+	if(typeof hexCode === "string") {
+		if(hexCode.charAt(0) === "#") {
+			let contrastColor = CellPainter._contrastColors[hexCode];
+			if (!contrastColor) {
+				let triplet = hex2Num(hexCode);
+				contrastColor = CellPainter._contrastColors[hexCode] = getContrastColor(triplet);
+			}
+			return contrastColor;
+		}
+	} else if(Array.isArray(hexCode)) {
+		return getContrastColor(hexCode);
+	}
+	return "";
+};
+
+/**
+* @public
+* @param {tr.grid.Cell} cell
+* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+* @param {number} min
+* @param {number} max
+*/
+CellPainter.prototype.render = function (cell, rowData, min, max) {
+	if (min != null && min === min) { // Render heatmap
+		this._paintCell(cell, rowData, min, max);
+	} else if (this._conditions.length && this._coloringType === CellPainter.ColoringTypes.CONDITIONAL) { // Render conditional-coloring
+		this._paintCell(cell, rowData);
+	}
+};
+
+/**
+* @public
+* @param {tr.grid.Cell} cell
+* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+* @param {number} min
+* @param {number} max
+*/
+CellPainter.prototype.renderHeatMap = function (cell, rowData, min, max) {
+	this._paintCell(cell, rowData, min, max);
+};
+
+/**
+* @public
+* @param {tr.grid.Cell} cell
+* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+*/
+CellPainter.prototype.renderColoring = function (cell, rowData) {
+	this._paintCell(cell, rowData);
+};
+
+/**
+* @private
+* @param {tr.grid.Cell} cell
+* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+* @param {number=} min
+* @param {number=} max
+*/
+CellPainter.prototype._paintCell = function(cell, rowData, min, max) {
+	if (!cell) return;
+	let  elem = cell.getElement();
+	if (!elem) return; // Cell has been disposed
+
+	let bc = this._blinkCondition;
+	let scope;
+	if (bc) {
+		scope = cell["blinking"];
+		if (scope && scope["blinkTimer"] && !bc["border"]) { // The cell is blinking
+			return; // Let blinker calculate the style when restoring
+		}
+	}
+
+	let styles = this._getStyles(rowData, min, max);
+
+	let elStyle = elem.style;
+
+	let cssClass = styles["cssClass"]; // Can be an empty string
+	_removeCssClass(elem, cssClass);
+	if (cssClass != null) { // Predefined colors mode
+		if (cssClass) {
+			elem.classList.add(cssClass);
+			elem._coloringCssClass = cssClass;
+		}
+	} else {
+		if(styles["backgroundColor"]){
+			elStyle.backgroundColor = styles["backgroundColor"];
+		} else if(!this._effectiveStyles || this._effectiveStyles["backgroundColor"]){
+			elStyle.backgroundColor = "";
+		}
+		if(styles["color"]){
+			elStyle.color = styles["color"];
+		} else if(!this._effectiveStyles || this._effectiveStyles["color"]){
+			elStyle.color = "";
+		}
+	}
+};
+
+/**
+* @private
+* @param {tr.grid.Cell} cell
+* @return {Object}
+*/
+CellPainter.prototype._prepareScope = function(cell) {
+	let scope = cell["blinking"];
+	if (!scope) {
+		scope = {};
+		scope["cell"] = cell;
+		cell["blinking"] = scope;
+
+		this._scopes.push(scope);
+	}
+
+	let bc = this._blinkCondition;
+	if (scope["blinkId"] !== bc["blinkId"]) {
+		scope["blinkId"] = bc["blinkId"];
+		scope["field"] = bc["field"];
+		let restorer = bc["border"] ? CellPainter._borderRestorer : CellPainter._cellRestorer;
+		scope._restorer = restorer.bind(this, scope);
+	}
+
+	return scope;
+};
+
+/**
+* @public
+* @param {tr.grid.Cell} cell
+* @param {number} blinkSignal
+* @param {Object} rowData to calculate original style e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+* @return {boolean}
+*/
+CellPainter.prototype.blink = function (cell, blinkSignal, rowData) {
+	if (!cell) return false;
+
+	let elem = cell.getElement();
+	if (!elem) return false; // Cell has been disposed
+
+	let bc = this._blinkCondition;
+	if (!bc) return false;
+
+	let scope = this._prepareScope(cell);
+
+	scope["rowData"] = rowData;
+
+	let blinkColor, contrastColor;
+	if (blinkSignal > 0) {
+		blinkColor = bc["upColor"];
+		contrastColor = bc["contrastUpColor"];
+	} else if (blinkSignal < 0) {
+		blinkColor = bc["downColor"];
+		contrastColor = bc["contrastDownColor"];
+	} else {
+		blinkColor = bc["levelColor"];
+		contrastColor = bc["contrastLevelColor"];
+	}
+
+	this._blink(scope, elem, blinkColor, contrastColor);
+	return true;
+};
+
+/** Blink cell with specific color or theme's neutral movement color.
+* @public
+* @param {tr.grid.Cell} cell
+* @param {string|null} blinkColor
+* @param {Object} rowData to calculate original style e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+* @return {boolean}
+*/
+CellPainter.prototype.flash = function(cell, blinkColor, rowData) {
+	if (!cell) return false;
+
+	let elem = cell.getElement();
+	if (!elem) return false; // Cell has been disposed
+
+	if (!this._blinkCondition) return false;
+
+	let scope = this._prepareScope(cell);
+
+	scope["rowData"] = rowData;
+
+	if (typeof blinkColor !== "string") {
+		blinkColor = ElfUtil.themeColors["level"];
+	}
+
+	this._blink(scope, elem, blinkColor, CellPainter.getOppositeColor(blinkColor));
+	return true;
+};
+
+/** @private
+* @param {Object} scope
+* @param {Element} elem
+* @param {string} blinkColor
+* @param {string} contrastColor
+* @return {boolean} Returns true if it is a background blinking, otherwise returns false
+*/
+CellPainter.prototype._blink = function (scope, elem, blinkColor, contrastColor) {
+	CellPainter._clearBlinkTimer(scope);
+	scope["blinkTimer"] = setTimeout(scope._restorer, this._blinkingDuration);
+
+	if (this._blinkCondition["border"]) {
+		elem.style.border = "1px solid " + blinkColor;
+		return false;
+	} else {
+		elem.style.backgroundColor = blinkColor;
+		elem.style.color = contrastColor;
+	}
+
+	return true;
+};
+
+/**
+* @public
+* @param {tr.grid.Cell} cell
+* @param {number} newValue
+* @param {number} oldValue
+* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+* @return {boolean}
+*/
+CellPainter.prototype.blinkCell = function(cell, newValue, oldValue, rowData) {
+	let bc = this._blinkCondition;
+	if (!bc) return false;
+
+	let blinkSignal = this._blinkCondition._fn(newValue, oldValue);
+	return this.blink(cell, blinkSignal, rowData);
+};
+
+/**
+* @public
+* @ignore
+* @param {number} newValue
+* @param {number} oldValue
+* @return {number}
+*/
+CellPainter.prototype.calcBlinkSignal = function(newValue, oldValue) {
+	if (this._blinkCondition) {
+		return this._blinkCondition._fn(newValue, oldValue);
+	}
+	return 0;
+};
+
+/**
+* @public
+* @param {tr.grid.Cell} cell
+* @param {Object} rowData
+*/
+CellPainter.prototype.verifyBlinking = function(cell, rowData) {
+	let scope = cell["blinking"];
+	if (scope && scope["blinkTimer"]) {
+		if (scope["rowData"] !== rowData) {
+			scope["rowData"] = rowData; // Needed for style calculation by restorer
+			if (CellPainter._clearBlinkTimer(scope)) {
+				scope._restorer();
+			}
+		}
+	}
+};
+/** Deprecated, the state has been moved out to support prioritization.
+* @public
+* @deprecated
+* @param {boolean=} disabled
+*/
+CellPainter.prototype.disableLevelColor = function(disabled) {};
+/**
+* @public
+* @param {number} duration
+*/
+CellPainter.prototype.setBlinkingDuration = function(duration) {
+	if(typeof duration === "number"){
+		this._blinkingDuration = duration;
+	}
+};
+
+export default CellPainter;
+export {CellPainter};