@refinitiv-ui/efx-grid 6.0.4 → 6.0.6

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.js

@@ -3,6 +3,7 @@ import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
 import { extendObject } from '../../tr-grid-util/es6/Util.js';
 import {CellPainter} from '../../tr-grid-util/es6/CellPainter.js';
 import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
+import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 
 /** @typedef {Object} ConditionalColoringPlugin~ColumnOptions
 * @description Extension column options that can be specified on each individual grid's column option:
@@ -13,6 +14,14 @@ import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
 * @property {string=} field
 */
 
+/** @typedef {Object} ConditionalColoringPlugin~ConditionalColoringOptions
+* @description Extension column options that can be specified on each individual grid's column option:
+* @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
+* @property {(string|boolean)=} colorText=null A shorthand for specifying default condition based on the field.
+* @property {(string|boolean)=} tickColor=null Alias of colorText.
+* @property {string=} field
+*/
+
 /** @typedef {Object} ConditionalColoringPlugin~Condition
 * @description Available options describing `condition` object
 * @property {(string|Function)=} expression Expression could be `[FIELD_1] > 0`
@@ -30,6 +39,26 @@ import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
 * @property {(string|boolean)=} level CSS color (e.g. #33333, grey). If false value is specified, blinking for level color is disabled.
 */
 
+var COLORING_TYPE = "coloring";
+var BLINKING_TYPE = "blinking";
+
+var _bracketExp = /\[[^\[\]]*\]/g;
+
+/** @private
+* @param {string} exp Expression string
+* @return {Array.<string>}
+*/
+var _getFieldsFromExpression = function(exp) {
+	var fields = [];
+	if(exp) {
+		var matches = exp.match(_bracketExp);
+		for (var i = 0; i < matches.length; i++) {
+			fields.push(matches[i].replace(/[\[\]]/g, ""));
+		}
+	}
+	return fields;
+};
+
 /** @constructor
 * @extends {GridPlugin}
 */
@@ -56,6 +85,11 @@ ConditionalColoringPlugin._cleanUpTimer = 0;
 */
 ConditionalColoringPlugin.prototype._blinkingEnabled = false; // WORKAROUND: To improve performance
 
+/** @type {Array}
+* @private
+*/
+ConditionalColoringPlugin.prototype._pendingFields;
+
 /** @override
 * @return {string}
 */
@@ -95,12 +129,32 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
 	host.listen("columnRemoved", this._onColumnRemoved);
 
 	if (!CellPainter.themeReady) {
-		CellPainter.loadThemeColors().then(this._onThemeLoaded);
+		CellPainter.loadThemeColors().then(this._onThemeLoaded).catch(this._onThemeLoaded);
 	}
+
+	// Register callback for movement-color-profile attribute changed event
+	ElfUtil.getThemeColors(this._onThemeLoaded);
+
 	// In case of lazy loading
 	// DO something
 };
 
+/** @override
+*/
+ConditionalColoringPlugin.prototype._afterInit = function () {
+	var pendingFields = this._pendingFields;
+	if(pendingFields) {
+		var fields, colIndex, type;
+		for(var i = 0; i < pendingFields.length; i++) {
+			fields = pendingFields[i][0];
+			colIndex = pendingFields[i][1];
+			type = pendingFields[i][2];
+			this._addDataFields(fields, colIndex, type);
+		}
+		this._pendingFields = null;
+	}
+};
+
 /** @public
 * @param {Object} host core grid object
 */
@@ -158,53 +212,67 @@ ConditionalColoringPlugin.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	var len = this.getColumnCount();
-	var host = this._hosts[0];
 	for (var i = 0; i < len; ++i) {
 		var column = columns[i];
 		if (!column) {
 			column = columns[i] = {};
 		}
 
-		var conditions = this._getColumnOption(i, 'conditions', host);
-		if (Array.isArray(conditions) && conditions.length > 0) {
-			column.conditions = [];
+		this.getColumnColoring(i, column);
+	}
 
-			var count = conditions.length;
-			for (var colIndex = 0; colIndex < count; colIndex++) {
-				var exCondition = {};
-				extendObject(exCondition, conditions[colIndex], [
-					'expression',
-					'backgroundColor',
-					'color'
-				]);
+	return obj;
+};
 
-				column.conditions.push(exCondition);
-			}
+/** @public
+* @param {number} colIndex
+* @param {Object=} options
+* @return {!ConditionalColoringPlugin~ColumnOptions}
+*/
+ConditionalColoringPlugin.prototype.getColumnColoring = function(colIndex, options) {
+	if(!options) {
+		options = {};
+	}
+	var host = this._hosts[0];
+	var conditions = this._getColumnOption(colIndex, "conditions", host);
+	if (Array.isArray(conditions) && conditions.length > 0) {
+		options.conditions = [];
+
+		var count = conditions.length;
+		for (var n = 0; n < count; n++) {
+			var exCondition = {};
+			extendObject(exCondition, conditions[n], [
+				"expression",
+				"backgroundColor",
+				"color"
+			]);
+
+			options.conditions.push(exCondition);
 		}
+	}
 
-		var colorText = this._getColumnOption(i, 'colorText', host);
-		if (colorText) {
-			column.colorText = colorText;
-		}
+	var colorText = this._getColumnOption(colIndex, "colorText", host);
+	if (colorText) {
+		options.colorText = colorText;
+	}
 
-		// alias with colorText
-		var tickColor = this._getColumnOption(i, 'tickColor', host);
-		if (tickColor) {
-			column.tickColor = tickColor;
-		}
+	// alias with colorText
+	var tickColor = this._getColumnOption(colIndex, "tickColor", host);
+	if (tickColor) {
+		options.tickColor = tickColor;
+	}
 
-		var blinking = this._getColumnOption(i, 'blinking', host);
-		if (blinking) {
-			column.blinking = blinking;
-		}
+	var blinking = this._getColumnOption(colIndex, "blinking", host);
+	if (blinking) {
+		options.blinking = blinking;
+	}
 
-		var field = this._getField(i);
-		if (field) {
-			column.field = field;
-		}
+	var field = this._getField(colIndex);
+	if (field) {
+		options.field = field;
 	}
 
-	return obj;
+	return options;
 };
 
 /** @private
@@ -227,6 +295,20 @@ ConditionalColoringPlugin.prototype._applyStyle = function(host, options) {
 	}
 };
 
+/** @private
+* @param {number} colIndex
+* @param {boolean=} enabled=true
+*/
+ConditionalColoringPlugin.prototype._enableColumnStyle = function(colIndex, enabled) {
+	enabled = enabled !== false;
+	var hosts = this._hosts;
+	var grid;
+	for(var i = hosts.length; --i >= 0;) {
+		grid = hosts[i];
+		grid.enableColumnClass(colIndex, "conditionally-colored", enabled);
+	}
+};
+
 /** @private
 * @param {CellPainter=} painter
 * @return {boolean}
@@ -262,20 +344,6 @@ ConditionalColoringPlugin.prototype._clearCellStyles = function(colIndex) {
 	}
 };
 
-/** @private
-* @param {number} colIndex
-* @param {boolean=} enabled
-*/
-ConditionalColoringPlugin.prototype._enableColumnStyle = function(colIndex, enabled) {
-	enabled = enabled !== false;
-	var hosts = this._hosts;
-	var grid;
-	for(var i = hosts.length; --i >= 0;) {
-		grid = hosts[i];
-		grid.enableColumnClass(colIndex, "conditionally-colored", enabled);
-	}
-};
-
 /** @private
 */
 ConditionalColoringPlugin.prototype._cachePreviousValue = function() {
@@ -319,15 +387,70 @@ ConditionalColoringPlugin.prototype._cacheColumnPreviousValue = function(colInde
 	}
 };
 
+/** @private
+* @param {string|Array.<string>} fieldRef
+* @param {(Object|number)=} colRef
+* @param {string} type
+*/
+ConditionalColoringPlugin.prototype._addDataFields = function(fieldRef, colRef, type) {
+	if(!this._realTimeGrid || !fieldRef || !type) {
+		return;
+	}
+	var referrer = null;
+	if (colRef != null) {
+		var colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
+		referrer = colDef ? colDef.getId() + "_" + type : null;
+	}
+
+	this._realTimeGrid.addDataFields(fieldRef, referrer);
+};
+
+/** @private
+* @param {string|Array.<string>} fieldRef
+* @param {(Object|number)=} colRef
+* @param {string} type
+*/
+ConditionalColoringPlugin.prototype._removeDataFields = function(fieldRef, colRef, type) {
+	if(!this._realTimeGrid || !fieldRef || !type) {
+		return;
+	}
+	var referrer = null;
+	if (colRef != null) {
+		var colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
+		referrer = colDef ? colDef.getId() + "_" + type : null;
+	}
+	this._realTimeGrid.removeDataFields(fieldRef, referrer);
+};
+
+/** @private
+* @param {(Object|number)=} colRef
+* @param {string} type
+*/
+ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type) {
+	if(!this._realTimeGrid || !type) {
+		return;
+	}
+	var referrer = null;
+	if (colRef != null) {
+		var colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
+		referrer = colDef ? colDef.getId() + "_" + type : null;
+		this._realTimeGrid.removeFieldReferrer(referrer);
+	}
+};
+
 /** @public
 * @description To define coloring for columns, conditions or colorText or tickColor need to be specified.
-*   To enable cell blinking the blinking option need to be defined. Coloring options and blinking options
-*   can be applied to a column at the same time. The blinking or coloring abilities will be removed if the correspondent options
-*   are not given. If columnOptions is undefined or null, coloring and blinking will be removed.
+*   To enable cell blinking the blinking option need to be defined.<br>
+*   Coloring options and blinking options can be applied to a column at the same time.<br>
+*   The blinking or coloring abilities will be removed if the correspondent options are not given.<br>
+*   If columnOptions is undefined or null, both coloring and blinking will be removed.
 * @param {number} colIndex
 * @param {(ConditionalColoringPlugin~ColumnOptions|null)=} columnOptions
+* @see {@link ConditionalColoringPlugin.setConditionalColoring}
+* @see {@link ConditionalColoringPlugin.setColumnBlinking}
 * @example
 * var columnOptions1 = {
+*   "field": "string",
 *   "conditions": [{ // Array.<Object> Condition Object Properties
 *     "expression": "[column0] > 0", // string
 *     "backgroundColor": "", // Optional string e.g. #ffffff, black
@@ -336,7 +459,8 @@ ConditionalColoringPlugin.prototype._cacheColumnPreviousValue = function(colInde
 * };
 * var columnOptions2 = {
 *   "field": "string",
-*   "colorText": true // string as Field or boolean for text coloring mode
+*   "colorText": true, // string as Field or boolean for text coloring mode
+*   "blinking": true
 * };
 */
 ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, columnOptions) {
@@ -348,7 +472,7 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
 		colData["colorText"] = columnOptions["colorText"];
 		colData["tickColor"] = columnOptions["tickColor"];
 		colData["blinking"] = blinkingOptions = columnOptions["blinking"];
-		field = columnOptions["field"];
+		colData["field"] = field = columnOptions["field"];
 	} else {
 		colData["conditions"] = null;
 		colData["colorText"] = null;
@@ -357,13 +481,39 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
 	}
 
 	this.setColumnBlinking(colIndex, blinkingOptions, field);
+	this.setConditionalColoring(colIndex, columnOptions);
+
+	if (colData["painter"] && !(colData["coloringFields"] || colData["blinkingField"])) { // Clear existing painter
+		this._clearPainter(colData);
+	}
+};
 
+/** @public
+* @param {number} colIndex
+* @param {(ConditionalColoringPlugin~ConditionalColoringOptions|null)=} coloringOptions
+*/
+ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex, coloringOptions) {
+	var colData = this._newColumnData(colIndex);
 	var painter = colData["painter"];
-	var prevColoring = colData["coloring"];
-	var colorOptions = this._prepareColorOptions(colIndex, columnOptions);
+	var prevFields = colData["coloringFields"] ? Object.keys(colData["coloringFields"]) : null;
+	var colorOptions = this._prepareColorOptions(colIndex, coloringOptions);
 	if(colorOptions.hasColor) { // Set new coloring
+		var newFieldsMap = colorOptions.fields;
 		if (!painter) {
 			painter = colData["painter"] = new CellPainter();
+		} else if (prevFields) {
+			// Remove unused fields
+			var unusedFields = [];
+			var prevField;
+			for (var i = 0; i < prevFields.length; i++) {
+				prevField = prevFields[i];
+				if (!newFieldsMap[prevField]) {
+					unusedFields.push(prevField);
+				}
+			}
+			if (unusedFields.length) {
+				this._removeDataFields(unusedFields, colIndex, COLORING_TYPE);
+			}
 		}
 
 		if(colorOptions.condColoring) {
@@ -373,29 +523,36 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
 			painter.addColorTextWithTheme(colorOptions.colorText.field);
 		}
 
-		colData["coloring"] = true; // Used for binding
-		painter["inputField"] = colorOptions.inputField;
-	} else {
-		colData["coloring"] = false;
-		if(this._isValidPainter(painter)) {
-			painter.resetColoring(); // Release any used memory
-			if(prevColoring) {
-				this._clearCellStyles(colIndex); // Need to clear the existing previous coloring style here
+		var fields = Object.keys(newFieldsMap);
+		if (this._initializedGrid) {
+			this._addDataFields(fields, colIndex, COLORING_TYPE);
+		} else {
+			if (!this._pendingFields) {
+				this._pendingFields = [];
 			}
+			this._pendingFields.push([fields, colIndex, COLORING_TYPE]);
 		}
-	}
 
-	if(colData["coloring"] || colData["blinkingField"] ) {
 		this._enableColumnStyle(colIndex, true); // Remove the background image
-
-		if(colData["coloring"] && this._initializedGrid) { // Force rendering, the new coloring will be applied in the binding
+		painter["inputField"] = colorOptions.inputField; // Used in ColumnFormatting extension for restoring the user's selected field in column format dialog
+		colData["coloringFields"] = newFieldsMap;
+		if (this._initializedGrid) { // Force rendering, the new coloring will be applied in the binding
 			this._requestRowRefresh();
 		}
-	} else if(painter) { // Clear existing painter
-		if(this._clearPainter(colData)) {
-			// Clear existing styles related to conditional coloring
-			this._enableColumnStyle(colIndex, false);
+	} else {
+		if (this._isValidPainter(painter)) {
+			painter.resetColoring(); // Release any used memory
+			if (prevFields) {
+				this._clearCellStyles(colIndex); // Need to clear the existing previous coloring styles here
+			}
+		}
+
+		if (prevFields) {
+			this._removeFieldReferrer(colIndex, COLORING_TYPE);
 		}
+
+		colData["coloringFields"] = null;
+		this._enableColumnStyle(colIndex, false);
 	}
 };
 
@@ -406,27 +563,31 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
 */
 ConditionalColoringPlugin.prototype.setColumnBlinking = function (colIndex, blinkingOptions, field) {
 	var colData = this._newColumnData(colIndex);
-	var prevBlinking = colData["blinkingField"];
+	var prevField = colData["blinkingField"];
 	colData["blinking"] = blinkingOptions;
 	var painter = colData["painter"];
 	var bOptions = this._prepareBlinkingOptions(colIndex, blinkingOptions, field);
 	if (bOptions) {
+		var newBlinkingField = bOptions.field;
 		if (!painter) {
 			colData["painter"] = painter = new CellPainter();
-		} else if(prevBlinking) {
+		} else if(prevField) {
 			// Clear current style, blinking and existing styles related to blinking
 			painter.clearBlinking();
+			if (prevField !== newBlinkingField) {
+				this._removeDataFields(prevField, colIndex, BLINKING_TYPE);
+			}
 		}
 		painter.disableLevelColor(bOptions.level === false);
 		if (bOptions.customColor) {
-			painter.addBlink(bOptions.field, bOptions.up, bOptions.down, bOptions.level, bOptions.border);
+			painter.addBlink(newBlinkingField, bOptions.up, bOptions.down, bOptions.level, bOptions.border);
 		} else {
-			painter.addBlinkWithTheme(bOptions.field, bOptions.border);
+			painter.addBlinkWithTheme(newBlinkingField, bOptions.border);
 		}
-		colData["blinkingField"] = bOptions.field; // used for binding and cache clearing
+		colData["blinkingField"] = newBlinkingField; // used for binding and cache clearing
 		this._blinkingEnabled = true; // TODO: need to dynamically verify the blink state
 
-		if (!prevBlinking) { // No need update the cache for the options changing
+		if (!prevField) { // No need update the cache for the options changing
 			// Emerald Grid needs to cache in the initializing phase
 			// Atlas Blotter will cache in the first binding
 			if (this._compositeGrid || this._initializedGrid) {
@@ -439,32 +600,26 @@ ConditionalColoringPlugin.prototype.setColumnBlinking = function (colIndex, blin
 		}
 
 		ConditionalColoringPlugin._startCleanUpInterval();
+		if (this._initializedGrid) {
+			this._addDataFields(newBlinkingField, colIndex, BLINKING_TYPE);
+		} else {
+			if (!this._pendingFields) {
+				this._pendingFields = [];
+			}
+			this._pendingFields.push([newBlinkingField, colIndex, BLINKING_TYPE]);
+		}
 	} else {
-		if (painter) {
-			if (!colData["coloring"]) {
-				this._clearPainter(colData);
-			} else {
+		if (prevField) {
+			if (painter) {
 				painter.clearBlinking(); // Release any used memory and restore cell's style
 				ConditionalColoringPlugin._cleanUpPrevFields();
 			}
+			this._removeFieldReferrer(colIndex, BLINKING_TYPE);
 		}
 		colData["blinkingField"] = null; // Used by cache clearing, do not reset before cache clearing
 	}
 };
 
-/** @public
-* @param {number} colIndex
-* @param {Object=} out_obj
-* @return {!Object}
-*/
-ConditionalColoringPlugin.prototype.getColumnColoring = function(colIndex, out_obj) {
-	if(!out_obj) {
-		out_obj = {};
-	}
-	console.log("WARNING: getColumnColoring() is not implemented yet");
-	return out_obj;
-};
-
 /** @public
 * @param {number} rowIndex
 * @param {number} blinkSignal
@@ -540,19 +695,21 @@ ConditionalColoringPlugin.prototype._prepareColorOptions = function(colIndex, co
 	}
 	var colField = this._getField(colIndex);
 	var field = /** @type{string} */(columnOptions["field"]) || colField;
-	field = ConditionalColoringPlugin._convertKeyword(field, colField);
-
-	var conditions = columnOptions["conditions"];
+	var inputField = columnOptions["inputField"] || ""; // The value is from user so it can be "THIS_COLUMN" or null
+	colorOptions["inputField"] = inputField; // Used to retain state on Column Format Dialog
+	field = ConditionalColoringPlugin._convertKeyword(inputField, field);
 
 	// Check if there is another type of coloring
-	// "colorText" attr has more priority than "tickColor"
+	// "colorText" option has more priority than "tickColor"
 	var colorText = columnOptions["colorText"] || columnOptions["tickColor"];
-	var inputField = columnOptions["inputField"] || "";
+	var conditions = columnOptions["conditions"];
 	var conditionCount = conditions ? conditions.length : 0;
 	if(conditionCount) {
+		colorOptions.hasColor = 1;
+		colorOptions.fields = {};
 		colorOptions.condColoring = {};
 		colorOptions.condColoring.conditions = conditions;
-		colorOptions.hasColor = 1;
+
 		var formatter = (field == colField) ? columnOptions["textFormatter"] : null;
 		var builder = ConditionalColoringPlugin.getFilterBuilder();
 
@@ -575,22 +732,28 @@ ConditionalColoringPlugin.prototype._prepareColorOptions = function(colIndex, co
 				}
 				exp = builder.buildFilter();
 				cond["expression"] = exp;
+				colorOptions.fields[field] = true;
+			} else {
+				// Get fields from expression string
+				var expFields = _getFieldsFromExpression(exp);
+				for(var n = 0; n < expFields.length; n++) {
+					colorOptions.fields[expFields[n]] = true;
+				}
 			}
 		}
-
-		colorOptions.inputField = inputField;
 	} else if(colorText) {
-		colorOptions.colorText = {};
 		colorOptions.hasColor = 1;
+		colorOptions.fields = {};
+		colorOptions.colorText = {};
 
-		inputField = field;
-		if(typeof colorText === "string") {
-			inputField = colorText;
-		} else if(typeof colorText === "object") {
-			inputField = /** @type{string} */(colorText["field"]) || field;
+		var type = typeof colorText;
+		if(type === "string") {
+			field = colorText;
+		} else if(type === "object") {
+			field = /** @type{string} */(colorText["field"]) || field;
 		}
-		colorOptions.colorText.field = ConditionalColoringPlugin._convertKeyword(inputField, field);
-		colorOptions.inputField = inputField;
+		colorOptions.colorText.field = field;
+		colorOptions.fields[field] = true;
 	}
 
 	return colorOptions;
@@ -604,9 +767,9 @@ ConditionalColoringPlugin.prototype._prepareColorOptions = function(colIndex, co
 ConditionalColoringPlugin._convertKeyword = function(userInput, fallback) {
 	if(userInput) {
 		// Note that THIS_COLUMN is a special keyword that needs to be converted before usage
-		return userInput.indexOf("THIS_COLUMN") ? userInput : fallback;
+		return userInput.indexOf("THIS_COLUMN") > -1 ? fallback : userInput;
 	}
-	return userInput;
+	return fallback;
 };
 
 /** @private
@@ -801,7 +964,7 @@ ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
 				}
 
 				// conditional coloring
-				if (colData["coloring"] && !bgBlinking) {
+				if (colData["coloringFields"] && !bgBlinking) {
 					painter.renderColoring(cell, dataRow);
 				}
 			}
@@ -828,7 +991,41 @@ ConditionalColoringPlugin.prototype._onColumnAdded = function(e) {
 */
 ConditionalColoringPlugin.prototype._onColumnRemoved = function(e) {
 	var colData = /** @type{Object} */(e.columnData);
+	if (!colData) {
+		return;
+	}
+
 	this._clearPainter(colData);
+
+	// Removed column
+	var colDef = colData["COL_DEF"];
+	if (colDef) {
+		if (colData["coloringFields"]) {
+			this._removeFieldReferrer(colDef, COLORING_TYPE);
+		}
+		if (colData["blinkingField"]) {
+			this._removeFieldReferrer(colDef, BLINKING_TYPE);
+		}
+	}
+
+	// Another columns
+	var field = colData["field"];
+	if (field) {
+		var isStaticField = colDef ? !colDef.isRealTimeField() : true;
+		if (isStaticField) {
+			var colCount = this.getColumnCount();
+			for (var i = 0; i < colCount; i++) {
+				colData = this._getColumnData(i);
+				if (colData["coloringFields"] && colData["coloringFields"][field]) {
+					this.setConditionalColoring(i, null);
+				}
+
+				if (colData["blinkingField"] === field) {
+					this.setColumnBlinking(i, null);
+				}
+			}
+		}
+	}
 };
 
 /** @private */
@@ -944,12 +1141,15 @@ ConditionalColoringPlugin._stopCleanUpInterval = function() {
 ConditionalColoringPlugin.setThemeColors = CellPainter.setThemeColors;
 
 /** @public
-* @description Reload theme colors and change colors for all instances of CellPainter, Should call after MovementColor changed.
+* @description Reload theme colors and change colors for all instances of CellPainter.
+* Should call after the overwriting css variables for MovementColor without changing movement-color-profile attribute.
 * @function
 * @return {Promise<Object>}
 */
 ConditionalColoringPlugin.prototype.reloadThemeColors = function () {
-	return CellPainter.reloadThemeColors().then(this._onThemeLoaded);
+	return CellPainter.reloadThemeColors()
+		.then(this._onThemeLoaded)
+		.catch(this._onThemeLoaded);
 };
 
 

package/lib/tr-grid-content-wrap/es6/ContentWrap.js

@@ -80,12 +80,7 @@ ContentWrapPlugin.prototype.initialize = function (host, options) {
   window.addEventListener("load", this._setReCalculationTimer); // Since CSS can impact font, we need adjust accordingly
 
   host.listen("widthChanged", this._setReCalculationTimer);
-  host.listen("postSectionDataBinding", this._setReCalculationTimer);
-
-  if (host["disableLazyRendering"]) {
-    host["disableLazyRendering"]();
-  } // In case of lazy loading
-
+  host.listen("postSectionDataBinding", this._setReCalculationTimer); // In case of lazy loading
 
   this.config(options);
   host.listen("columnAdded", this._onColumnAdded);

package/lib/tr-grid-contextmenu/es6/ContextMenu.js

@@ -158,7 +158,7 @@ ContextMenuPlugin.prototype.initialize = function (host, options) {
 		ContextMenuPlugin._applyThemeColor(host);
 	} else {
 		ContextMenuPlugin._stylePromise = ElfUtil.getThemeColors();
-		ContextMenuPlugin._stylePromise.then(this._onThemeLoaded);
+		ContextMenuPlugin._stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
 	}
 };
 
@@ -355,9 +355,9 @@ ContextMenuPlugin.prototype._onItemClicked = function (e) {
 };
 
 /** @private
-* @param {Object} colors
 */
-ContextMenuPlugin.prototype._onThemeLoaded = function (colors) {
+ContextMenuPlugin.prototype._onThemeLoaded = function () {
+	var colors = ElfUtil.getColors();
 	var css = prettifyCss([
 		".tr-contextmenu", [
 			"outline: none;",