@refinitiv-ui/efx-grid 6.0.0-next.0

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

@@ -0,0 +1,1128 @@
+import { TickCodes, TickFields } from "./TickCodes.js";
+import { parseCondition, rgb2Hex } from "./Util.js";
+import { ElfUtil } from "./ElfUtil.js";
+
+/** @typedef {Object} CellPainter~Expression
+* @property {string=} name
+* @property {string} text Text describes condition e.g. [FIELD] > 10
+* @property {Array=} values
+*/
+
+/** @typedef {Object} CellPainter~Condition
+* @property {string} field Field to be used in the condition
+* @property {CellPainter~Expression|string} expression Text describes condition e.g. [FIELD] > 10
+* @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
+*/
+
+/** @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 */
+
+var CellPainter = function() {
+	this._conditions = [];
+	this._scopes = [];
+
+	CellPainter._painters.push(this); // For later referencing
+};
+
+/** 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._blinkCondition = null;
+/** @type {!Array}
+* @private
+*/
+CellPainter.prototype._scopes;
+/** @type {Object}
+* @private
+*/
+CellPainter.prototype._columnStats = null;
+/** @type {boolean}
+* @private
+*/
+CellPainter.prototype._levelColorDisabled = false;
+
+/** @type {number}
+* @private
+*/
+CellPainter._runningBlinkId = 0;
+
+
+/** @type {number}
+* @private
+*/
+CellPainter._blinkingDuration = 250;
+/** @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;
+
+/** @public
+* @function
+* @param {string|Function} expression
+* @return {Function}
+* @example
+* var fn = CellPainter.parse("[CF_BID] >= 10 && [CF_BID] <= 100");
+* window.console.log(fn(25));
+*/
+CellPainter.parse = parseCondition;
+
+
+/** @public */
+CellPainter.prototype.dispose = function() {
+	var 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);
+
+	var len = this._scopes.length;
+	if(len) {
+		for(var i = 0; i < len; ++i) {
+			var scope = this._scopes[i];
+			if(CellPainter._clearBlinkTimer(scope)) {
+				scope._restorer();
+			}
+			var cell = scope["cell"];
+			if(cell) {
+				delete cell["blinking"]; // Delete cell blinking scope
+			}
+
+			scope["cell"] = null;
+		}
+		this._scopes.length = 0;
+	}
+
+	this._blinkCondition = null;
+};
+
+/** @public */
+CellPainter.prototype.resetColoring = function() {
+	// reset coloring type to allow other extensions to be able to set their new mode
+	this._setColoringType(0);
+	this._conditions.length = 0;
+};
+
+/** @public */
+CellPainter.prototype.resetBlinking = function() {
+	this._blinkCondition = null;
+	this._scopes.length = 0;
+};
+
+/** @public */
+CellPainter.prototype.clearBlinking = function() {
+	this._blinkCondition = null;
+	var len = this._scopes.length;
+	if(len) {
+		for(var i = 0; i < len; ++i) {
+			var scope = this._scopes[i];
+			if(CellPainter._clearBlinkTimer(scope)) {
+				scope._restorer();
+			}
+			var 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 */
+CellPainter.prototype.resetHeatMap = function() {
+	this._conditions.length = 0;
+	this._columnStats = null;
+};
+
+/** 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 */
+CellPainter.prototype.applyThemeColor = function() {
+	var colors = ElfUtil.themeColors;
+	var cond = this._conditions[0]; // Heatmap, color text condition must be the first
+	if(cond) {
+		if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) { // Heatmap uses grid color to blend the result color
+			if(cond["textMode"]) {
+				cond["baseColor"] = colors["baseText"];
+			} else {
+				cond["baseColor"] = colors["baseGrid"];
+			}
+		}
+		if(cond["useThemeColor"]) { // Only heatmap and colorText painters use theme color
+			if(this._coloringType === CellPainter.ColoringTypes.HEATMAP || this._coloringType === CellPainter.ColoringTypes.TEXT) {
+				var up, down;
+				if(this._coloringType === CellPainter.ColoringTypes.TEXT && cond["field"] === "CF_TICK") {
+					up = colors["tickUp"];
+					down = colors["tickDown"];
+				} else {
+					up = colors["up"];
+					down = colors["down"];
+				}
+				var 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 {Array.<CellPainter~Condition>} conditions
+*/
+CellPainter.prototype.setConditions = function(conditions) {
+	this._conditions.length = 0; // TODO: Clear existing cell styles first
+	this._setColoringType(CellPainter.ColoringTypes.CONDITIONAL);
+
+	var len = conditions.length;
+	for (var 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|Object} condition
+*/
+CellPainter.prototype._addCondition = function(condition) {
+	var exp = condition["expression"];
+	if(exp) {
+		condition._fn = CellPainter.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);
+
+	var 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) {
+	var colors = ElfUtil.themeColors;
+	var 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} upColor
+* @param {string} downColor
+* @param {string} levelColor
+* @return {!Object}
+*/
+CellPainter.prototype._addColorText = function(expression, field, upColor, downColor, levelColor) {
+	this._setColoringType(CellPainter.ColoringTypes.TEXT);
+
+	var condition = {};
+	condition["field"] = field;
+	condition["expression"] = expression.bind(null, field);
+	CellPainter._setUpDownColors(condition, upColor, downColor, levelColor);
+
+	this._addCondition(condition);
+	return condition;
+};
+/** @public
+* @param {string} field
+* @param {string} upColor
+* @param {string} downColor
+* @param {string} levelColor
+* @return {!Object}
+*/
+CellPainter.prototype.addColorText = function(field, upColor, downColor, levelColor) {
+	return this._addColorText(
+		TickFields[field] ? CellPainter._tickColorTextCondition : CellPainter._colorTextCondition,
+		field,
+		upColor, downColor, levelColor
+	);
+};
+/** @public
+* @param {string} field
+* @return {!Object}
+*/
+CellPainter.prototype.addColorTextWithTheme = function(field) {
+	var colors = ElfUtil.themeColors;
+	var condition = this.addColorText(field,
+		colors["up"],
+		colors["down"],
+		(colors["level"] === colors["baseText"]) ? "" : colors["level"]
+	);
+
+	condition["useThemeColor"] = true;
+	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() {
+	var colors = ElfUtil.themeColors;
+	var 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) {
+	var colors = ElfUtil.themeColors;
+	var 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) {
+	var colors = ElfUtil.themeColors;
+	var 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) {
+	var 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;
+	}
+	var styles = this._getStyles(rowData, min, max);
+	var c = styles["backgroundColor"];
+	if(c) {
+		cell.style.backgroundColor = c;
+	}
+
+	c = styles["color"];
+	if(c) {
+		cell.style.color = c;
+	}
+};
+
+
+/** @private
+* @param {string} field
+* @param {Object} rowData
+* @return {string|number}
+*/
+CellPainter._colorTextCondition = function(field, rowData) {
+	var 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) {
+	var code = TickCodes[rowData[field]];
+	if(code) {
+		return code;
+	}
+	return; // eslint-disable-line
+};
+/** @private
+* @this {Object}
+* @param {Object} rowData
+* @param {number} min
+* @param {number} max
+* @return {number}
+*/
+CellPainter._heatMapCondition = function(rowData, min, max) {
+	var value = rowData[this["field"]];
+	var diff = (value || value === 0) ? value - this["midPoint"] : NaN;
+	if (diff === 0 || diff !== diff) {
+		return 0;
+	}
+
+	var ratio;
+	var 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) {
+	var code = TickCodes[newValue];
+	if(code) {
+		return code;
+	}
+	return; // eslint-disable-line
+};
+/** @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;
+	var cell = scope["cell"];
+	var elem = cell.getElement();
+
+	if(elem) {
+		elem.style.border = "";
+	}
+};
+/** @private
+* @param {Object} scope
+*/
+CellPainter._cellRestorer = function(scope) {
+	scope["blinkTimer"] = 0;
+	var cell = scope["cell"];
+	var elem = cell.getElement();
+
+	if(elem) {
+		var rowData = scope["rowData"];
+		var min = NaN;
+		var max = NaN;
+		if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) {
+			var columnStats = this._columnStats;
+			if(columnStats) {
+				min = columnStats.getMin();
+				max = columnStats.getMax();
+			}
+		}
+
+		var styles = this._getStyles(rowData, min, max);
+		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;
+	}
+
+	var len = this._conditions.length;
+	for(var i = 0; i < len; ++i) {
+		var curCond = this._conditions[i];
+		var fn = curCond._fn;
+		try { // WARNING: Try/Catch is very slow. TODO: The function should be checked for validity beforehand
+			var 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) {
+				var blendedColor;
+				if(ret > 0) {
+					blendedColor = CellPainter.blendColor(curCond["baseColor"], curCond["upColor"], ret);
+				} else {
+					blendedColor = CellPainter.blendColor(curCond["baseColor"], curCond["downColor"], -ret);
+				}
+
+				if(curCond["textMode"]) {
+					CellPainter._colorObj["color"] = CellPainter.num2Hex(blendedColor);
+					return CellPainter._colorObj;
+				} else {
+					CellPainter._bgObj["backgroundColor"] = CellPainter.num2Hex(blendedColor);
+					CellPainter._bgObj["color"] = CellPainter.blackAndWhite(blendedColor);
+
+					return CellPainter._bgObj;
+				}
+			} else if(this._coloringType === CellPainter.ColoringTypes.TEXT) {
+				if(ret > 0) {
+					CellPainter._colorObj["color"] = curCond["upColor"];
+				} else if(ret < 0) {
+					CellPainter._colorObj["color"] = curCond["downColor"];
+				} else {
+					CellPainter._colorObj["color"] = this._levelColorDisabled ? "" : curCond["levelColor"];
+				}
+				return CellPainter._colorObj;
+			}
+
+			// 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
+* @param {string} baseColor
+* @param {string} maxColor
+* @param {number} ratio [0, 1]
+* @return {Array.<number>} resultColor
+*/
+CellPainter.blendColor = function (baseColor, maxColor, ratio) { // TODO: Optimize this
+	if (ratio > 1) {
+		ratio = 1;
+	} else if(ratio < 0) {
+		ratio = 0;
+	}
+
+	var baseColorTriplet = CellPainter.hex2Num(baseColor);
+	var maxColorTriplet = CellPainter.hex2Num(maxColor);
+	var blendResult = [];
+	for (var i = 0; i < 3; ++i) {
+		var gap = (maxColorTriplet[i] - baseColorTriplet[i]) * ratio;
+		blendResult.push(baseColorTriplet[i] + gap);
+	}
+
+	return blendResult;
+};
+
+/** @private
+* @param {Array.<number>} triplet
+* @return {string} resultColor
+*/
+CellPainter.blackAndWhite = function (triplet) {
+	var brightness = Math.sqrt(triplet[0] * triplet[0] * 0.241 + triplet[1] * triplet[1] * 0.691 + triplet[2] * triplet[2] * 0.068);
+
+	if (brightness >= 135) { // Brighter color has more impact to human eye than the darker color
+		return '#000000';
+	}
+	return '#FFFFFF';
+};
+
+/** @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 = function (triplet) {
+	var rgb = triplet[2] | (triplet[1] << 8) | (triplet[0] << 16);
+	return ('#' + (0x1000000 + rgb).toString(16).slice(1));
+};
+/** 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 = function (triplet) {
+	return 'rgb(' + triplet[0] + ', ' + triplet[1] + ', ' + triplet[2] + ')';
+};
+/** @public
+* @function
+* @param {string} hex
+* @return {Array.<number>} array of size 3 which contains [red, green, blue]
+*/
+CellPainter.hex2Num = function (hex) {
+	var hexInt = parseInt(hex.replace(/[^0-9A-F]/gi, ''), 16);
+	var r = (hexInt >> 16) & 255;
+	var g = (hexInt >> 8) & 255;
+	var b = hexInt & 255;
+	return [r, g, b];
+};
+/** @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 = function (hex) {
+	if(hex) {
+		var hexInt = parseInt(hex.replace(/[^0-9A-F]/gi, ''), 16);
+		var r = (hexInt >> 16) & 255;
+		var g = (hexInt >> 8) & 255;
+		var b = hexInt & 255;
+		return 'rgb(' + r + ', ' + g + ', ' + b + ')';
+	}
+	return '';
+};
+
+/** 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
+* @param {Object} colors
+* @return {Object} colors
+*/
+CellPainter._onThemeChanged = function(colors) {
+	// Apply newly changed theme to all the painters
+	var painters = CellPainter._painters;
+	for(var i = painters.length; --i >= 0;) {
+		painters[i].applyThemeColor(); // Re-apply theme color
+	}
+	return colors;
+};
+/** 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().then(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.themeReady = null;
+	return CellPainter.loadThemeColors();
+};
+
+/** @public
+* @function
+* @ignore
+* @param {tr.grid.Cell} cell
+* @param {Object=} styles
+*/
+CellPainter.clearCellStyle = function(cell, styles) {
+	var elem = cell.getElement();
+	if(!elem) {
+		return; // Cell has been disposed
+	}
+
+	var 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
+	}
+
+	styles = styles || CellPainter.supportedStyles;
+	for(var i = styles.length; --i >= 0;) {
+		elem.style[styles[i]] = "";  // 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) {
+	if(upColor != null) {
+		scp["upColor"] = upColor;
+		if(withContrast) {
+			scp["contrastUpColor"] = CellPainter.getOppositeColor(upColor);
+		}
+		//scp["rgbUp"] = CellPainter.hex2Rgb(upColor);
+	}
+	if(downColor != null) {
+		scp["downColor"] = downColor;
+		if(withContrast) {
+			scp["contrastDownColor"] = CellPainter.getOppositeColor(downColor);
+		}
+		//scp["rgbDown"] = CellPainter.hex2Rgb(downColor);
+	}
+	if(levelColor != null) {
+		scp["levelColor"] = levelColor;
+		if(withContrast) {
+			scp["contrastLevelColor"] = CellPainter.getOppositeColor(levelColor);
+		}
+		//scp["rgbLevel"] = CellPainter.hex2Rgb(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) === "#") {
+			var triplet = CellPainter.hex2Num(hexCode);
+			return CellPainter.blackAndWhite(triplet);
+		}
+	} else if(Array.isArray(hexCode)) {
+		return CellPainter.blackAndWhite(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
+* @param {Object=} changedCols
+*/
+CellPainter.prototype.render = function (cell, rowData, min, max, changedCols) {
+	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;
+	var  elem = cell.getElement();
+	if (!elem) return; // Cell has been disposed
+
+	var bc = this._blinkCondition;
+	var scope;
+	if (bc) {
+		scope = cell["blinking"];
+		if (scope && scope["blinkTimer"] && !bc["border"]) { // The cell is blinking
+			return; // Let blinker calculate the style when restoring
+		}
+	}
+
+	var styles = this._getStyles(rowData, min, max);
+	var ss = CellPainter.bgStyles;
+	var elStyle = elem.style;
+	for (var n = ss.length; --n >= 0;) {
+		var styleName = ss[n];
+		elStyle[styleName] = styles[styleName] || "";
+	}
+};
+
+/**
+* @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 }
+*/
+CellPainter.prototype.blink = function (cell, blinkSignal, rowData) {
+	this._blinkCell(cell, rowData, blinkSignal);
+};
+
+/**
+* @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) {
+	var bc = this._blinkCondition;
+	if (!bc) return false;
+
+	var blinkSignal = this._blinkCondition._fn(newValue, oldValue);
+	return this._blinkCell(cell, rowData, blinkSignal);
+};
+
+/** @private
+* @param {tr.grid.Cell} cell
+* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+* @param {number} blinkSignal
+* @return {boolean}
+*/
+CellPainter.prototype._blinkCell = function(cell, rowData, blinkSignal) {
+	if (!cell) return false;
+
+	if (this._levelColorDisabled) {
+		if(!blinkSignal) { // Disabled level color equivalent to no blinking for blink signal 0
+			return false;
+		}
+	}
+
+	var elem = cell.getElement();
+	if (!elem) return false; // Cell has been disposed
+
+	var bc = this._blinkCondition;
+	if (!bc) return false;
+
+	var scope = cell["blinking"];
+	if (!scope) {
+		scope = {};
+		scope["cell"] = cell;
+		cell["blinking"] = scope;
+
+		this._scopes.push(scope);
+	}
+
+	if (scope["blinkId"] !== bc["blinkId"]) {
+		scope["blinkId"] = bc["blinkId"];
+		scope["field"] = bc["field"];
+		var restorer = bc["border"] ? CellPainter._borderRestorer : CellPainter._cellRestorer;
+		scope._restorer = restorer.bind(this, scope);
+	}
+
+	scope["rowData"] = rowData;
+
+	var 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"];
+	}
+
+	var bgBlinking = true;
+	// All conditions are met for blinking
+	if (bc["border"]) {
+		elem.style.border = "1px solid " + blinkColor;
+		bgBlinking = false;
+	} else {
+		elem.style.backgroundColor = blinkColor;
+		elem.style.color = contrastColor;
+	}
+
+	CellPainter._clearBlinkTimer(scope);
+	scope["blinkTimer"] = setTimeout(scope._restorer, CellPainter._blinkingDuration);
+
+	return bgBlinking;
+};
+
+/**
+* @public
+* @param {tr.grid.Cell} cell
+* @param {Object} rowData
+*/
+CellPainter.prototype.verifyBlinking = function(cell, rowData) {
+	var 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();
+			}
+		}
+	}
+};
+/**
+* @public
+* @param {boolean=} disabled
+*/
+CellPainter.prototype.disableLevelColor = function(disabled) {
+	this._levelColorDisabled = disabled !== false;
+};
+
+export default CellPainter;
+export {CellPainter};