@refinitiv-ui/efx-grid 6.0.108 → 6.0.110

package/lib/rt-grid/es6/ColumnDefinition.d.ts

@@ -44,7 +44,8 @@ declare namespace ColumnDefinition {
         leftPinned?: boolean|null,
         rightPinned?: boolean|null,
         info?: any,
-        focusable?: boolean|null
+        focusable?: boolean|null,
+        backgroundColor?: string|null
     };
 
 }
@@ -161,6 +162,10 @@ declare class ColumnDefinition {
 
     public isFocusable(): boolean;
 
+    public getBackgroundColor(): string;
+
+    public setBackgroundColor(color: string): void;
+
 }
 
 declare const COL_DEF: string;

package/lib/rt-grid/es6/ColumnDefinition.js

@@ -51,6 +51,7 @@ import Engine from "../../tr-grid-util/es6/formula/Engine.js";
 * @property {boolean=} rightPinned=false If enabled, the column will not be part of the scrollable area and is pinned to the right side
 * @property {Object=} info=null For storing any additional information to the column
 * @property {boolean=} focusable=false If enabled, the column will be used to find focusable element when pressing tab key
+* @property {string=} backgroundColor CSS color value
 */
 
 /** mapping of field type to javascript type
@@ -1169,6 +1170,24 @@ ColumnDefinition.prototype._setCoreColumnDef = function(obj) {
 ColumnDefinition.prototype.isFocusable = function() {
 	return this._focusable;
 };
+/** @public
+* @return {string}
+*/
+ColumnDefinition.prototype.getBackgroundColor = function() {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	return core.getColumnBackgroundColor(colIndex);
+};
+/** @public
+* @param {string} color
+*/
+ColumnDefinition.prototype.setBackgroundColor = function(color) {
+	let core = this._eventArg["core"];
+	let grid = this._eventArg["grid"];
+	let colIndex = grid.getColumnIndex(this);
+	core.setColumnBackgroundColor(colIndex, color);
+};
 
 export {ColumnDefinition, COL_DEF};
 export default ColumnDefinition;

package/lib/rt-grid/es6/Grid.d.ts

@@ -174,6 +174,10 @@ declare class Grid extends EventDispatcher {
 
     public setColumnName(colIndex: number, str: string): void;
 
+    public getColumnBackgroundColor(colRef: Grid.ColumnReference|null): string;
+
+    public setColumnBackgroundColor(colRef: Grid.ColumnReference|null, color: string): void;
+
     public setColumnRenderer(colRef: Grid.ColumnReference|null, func?: ((...params: any[]) => any)|null): void;
 
     public activateColumnRenderer(colRef: Grid.ColumnReference|null, id?: string|null, func?: ((...params: any[]) => any)|null): void;

package/lib/rt-grid/es6/Grid.js

@@ -321,7 +321,7 @@ let Grid = function(placeholder, config) {
 	t._snapshotFillerDataChanged = t._snapshotFillerDataChanged.bind(t);
 	t._onPollingInterval = t._onPollingInterval.bind(t);
 
-	t._onKeyDown = t._onKeyDown.bind(t);
+	t._onTabNavigation = t._onTabNavigation.bind(t);
 	t._requestScroll = t._requestScroll.bind(t);
 	t._onVScroll = t._onVScroll.bind(t);
 	t._selfScrollToRow = t._selfScrollToRow.bind(t);
@@ -404,10 +404,9 @@ let Grid = function(placeholder, config) {
 	t._grid.listen("postSectionDataBinding", t._onPostSectionDataBinding);
 	t._grid.listen("firstRendered", t._dispatch.bind(t, "firstRendered"));
 	t._grid.listen("afterContentBinding", t._dispatch.bind(t, "afterContentBinding"));
-	t._grid.listen("keydown", t._onKeyDown);
+	t._grid.listen("tabNavigation", t._onTabNavigation);
 
 	t._grid.getVScrollbar().listen("scroll", t._onVScroll);
-	t._hiddenInput = t._grid.getHiddenInput();
 
 	t._grid.enableRowHighlighting(true);
 
@@ -634,8 +633,10 @@ Grid.prototype.dispose = function() {
 		this._subs = null;
 	}
 
-	if(this._focusingArgs && this._focusingArgs.id) {
-		clearTimeout(this._focusingArgs.id);
+	if(this._focusingArgs) {
+		if(this._focusingArgs.id) {
+			clearTimeout(this._focusingArgs.id);
+		}
 		this._focusingArgs = null;
 	}
 };
@@ -2169,6 +2170,27 @@ Grid.prototype.setColumnName = function(colIndex, str) {
 };
 /** @public
 * @param {Grid~ColumnReference} colRef
+* @return {string}
+*/
+Grid.prototype.getColumnBackgroundColor = function(colRef) {
+	let colDef = this.getColumnDefinition(colRef);
+	if(colDef) {
+		return colDef.getBackgroundColor();
+	}
+	return "";
+};
+/** @public
+* @param {Grid~ColumnReference} colRef
+* @param {string} color
+*/
+Grid.prototype.setColumnBackgroundColor = function(colRef, color) {
+	let colDef = this.getColumnDefinition(colRef);
+	if(colDef) {
+		colDef.setBackgroundColor(color);
+	}
+};
+/** @public
+* @param {Grid~ColumnReference} colRef
 * @param {Function=} func
 */
 Grid.prototype.setColumnRenderer = function(colRef, func) {
@@ -4123,16 +4145,11 @@ Grid.prototype.getVScrollView = function () {
 * @param {Element} el
 * @return {boolean}
 */
-function isValidInput(el) {
-	return el && el.tagName !== "SPAN" && !el.disabled;
-}
-/** @private
-* @param {Element} el
-* @param {Element} hiddenInput
-* @return {boolean}
-*/
-function isValidTarget(el, hiddenInput) {
-	return !el.classList.contains("valigner") && el !== hiddenInput;
+function isFocusableContent(el) {
+	if(el) {
+		return (el.tagName !== "SPAN" && !el.disabled);
+	}
+	return false;
 }
 /** @private
 * @param {Object} cell
@@ -4141,7 +4158,7 @@ function isValidTarget(el, hiddenInput) {
 function focusCell(cell) {
 	if(cell) {
 		let cellContent = cell.getContent();
-		if(cellContent && isValidInput(cellContent)) {
+		if(cellContent && isFocusableContent(cellContent)) {
 			cellContent.focus();
 			return true;
 		}
@@ -4152,18 +4169,15 @@ function focusCell(cell) {
 */
 Grid.prototype._onVScroll = function() {
 	let args = this._focusingArgs;
-	if(!args) { return; }
-
-	this._focusingArgs = null;
-	let event = args.event;
-	let cell = args.section.getCell(args.colIndex, args.rowIndex);
-	if(focusCell(cell)) {
-		event.preventDefault();
-	} else {
-		if(event.shiftKey) {
-			this._findPrevFocusableCell(event, args.colIndex, args.rowIndex, args.focusableColIndices);
-		} else {
-			this._findNextFocusableCell(event, args.colIndex, args.rowIndex, args.focusableColIndices);
+	if(args) {
+		this._focusingArgs = null;
+		let cell = this._grid.getCell("content", args.colIndex, args.rowIndex);
+		if(!focusCell(cell)) {
+			if(args.shiftKey) {
+				this._focusPrevCellContent(args);
+			} else {
+				this._focusNextCellContent(args);
+			}
 		}
 	}
 };
@@ -4171,89 +4185,108 @@ Grid.prototype._onVScroll = function() {
 */
 Grid.prototype._selfScrollToRow = function() {
 	let args = this._focusingArgs;
-	if(!args) { return; }
-	args.id = 0;
-	this.scrollToRow(args.rowIndex);
+	if(args) {
+		args.id = 0;
+		this.scrollToRow(args.rowIndex);
+	}
 };
 /** @private
-* @param {Object} e
+* @param {Object} args
 * @param {number} colIndex
 * @param {number} rowIndex
-* @param {Array} focusableColIndices
-* @param {Object} section
 */
-Grid.prototype._requestScroll = function(e, colIndex, rowIndex, focusableColIndices, section) {
-	let args = this._focusingArgs;
-	if(args) { return; }
-	if(this._scrolledRow === rowIndex) { return; } // Avoid infinite loop
-
-	this._scrolledRow = rowIndex;
-	args = this._focusingArgs = {
-		event: e,
-		colIndex: colIndex,
-		rowIndex: rowIndex,
-		focusableColIndices: focusableColIndices,
-		section: section
-	};
+Grid.prototype._requestScroll = function(args, colIndex, rowIndex) {
+	if(this._focusingArgs || this._scrolledRow === args.rowIndex) {
+		return; // Avoid infinite loop
+	}
 
+	this._scrolledRow = args.rowIndex;
+	this._focusingArgs = args;
+	args.colIndex = colIndex;
+	args.rowIndex = rowIndex;
+	args.event = null; // The event is invalid after the scroll
 	args.id = setTimeout(this._selfScrollToRow); // Avoid event loop protection
 };
 /** @private
-* @param {Object} e
-* @param {number} colIndex
-* @param {number} rowIndex
-* @param {Array} focusableColIndices
-* @param {Element=} content
+* @param {Object} args
 */
-Grid.prototype._findNextFocusableCell = function(e, colIndex, rowIndex, focusableColIndices, content) {
-	let startIdx = focusableColIndices.indexOf(colIndex);
+Grid.prototype._focusNextCellContent = function(args) {
+	let colIndex = args.colIndex;
+	let rowIndex = args.rowIndex;
+	if(rowIndex < 0 || rowIndex == null) {
+		return;
+	}
 
-	// Calculate starting row and column index
-	if(!isValidTarget(e.target, this._hiddenInput) || startIdx < 0) {
-		rowIndex = 0;
-		startIdx = 0;
-	} else if(isValidInput(content) && startIdx >= 0) {
+	let focusableColIndices = args.focusableColIndices;
+	let len = focusableColIndices.length;
+	let startIdx = 0;
+	let i;
+	if(colIndex >= 0) {
+		for(i = 1; i < len; i++) {
+			if(colIndex < focusableColIndices[i]) {
+				break;
+			}
+			startIdx = i;
+		}
+	}
+	// If the current focus is on a valid content, starts on the next cell
+	if(args.event && args.validContent) {
 		startIdx++;
 	}
+
 	let grid = this._grid;
 	let section = grid.getSection("content");
 	let viewInfo = grid.getVerticalViewInfo();
 	let bottomRowIndex = viewInfo.bottomRowIndex;
 	let rowCount = this.getRowCount();
 	for(let r = rowIndex; r < rowCount; r++) {
-		for(let i = startIdx; i < focusableColIndices.length; i++) {
+		for(i = startIdx; i < len; i++) {
 			let c = focusableColIndices[i];
 			if(r > bottomRowIndex) {
-				this._requestScroll(e, c, r, focusableColIndices, section);
+				this._requestScroll(args, c, r);
 				return;
 			} else {
 				let cell = section.getCell(c, r);
 				if(focusCell(cell)) {
-					e.preventDefault();
+					if(args.event) {
+						args.event.preventDefault();
+					}
 					return;
 				}
 			}
 		}
 		startIdx = 0;
 	}
+
+	if(args.validContent) { // The current focus on the last focusable content
+		this._grid.getHiddenInput().focus();
+	}
 };
 /** @private
-* @param {Object} e
-* @param {number} colIndex
-* @param {number} rowIndex
-* @param {Array} focusableColIndices
-* @param {Element=} content
+* @param {Object} args
 */
-Grid.prototype._findPrevFocusableCell = function(e, colIndex, rowIndex, focusableColIndices, content) {
-	let startIdx = focusableColIndices.indexOf(colIndex);
-	let len = focusableColIndices.length;
+Grid.prototype._focusPrevCellContent = function(args) {
+	let colIndex = args.colIndex;
+	let rowIndex = args.rowIndex;
+	if(rowIndex < 0 || rowIndex == null) {
+		return;
+	}
 
-	// Calculate starting row and column index
-	if(!isValidTarget(e.target, this._hiddenInput) || startIdx < 0) {
-		rowIndex = 0;
-		startIdx = 0;
-	} else if(isValidInput(content) && startIdx >= 0) {
-		startIdx--;
+	let focusableColIndices = args.focusableColIndices;
+	let len = focusableColIndices.length;
+	let startIdx = len - 1;
+	let i;
+	if(colIndex >= 0) {
+		for(i = len - 1; --i >= 0;) {
+			if(colIndex > focusableColIndices[i]) {
+				break;
+			}
+			startIdx = i;
+		}
+	}
+	// If the current focus is on a valid content, starts on the next cell
+	if(args.event && args.validContent) {
+		--startIdx;
 	}
 
 	let grid = this._grid;
@@ -4261,32 +4294,33 @@ Grid.prototype._findPrevFocusableCell = function(e, colIndex, rowIndex, focusabl
 	let viewInfo = grid.getVerticalViewInfo();
 	let topRowIndex = viewInfo.topRowIndex;
 	for(let r = rowIndex; r >= 0; r--) {
-		for(let i = startIdx; i >= 0; i--) {
+		for(i = startIdx; i >= 0; i--) {
 			let c = focusableColIndices[i];
 			if(r < topRowIndex) {
-				this._requestScroll(e, c, r, focusableColIndices, section);
+				this._requestScroll(args, c, r);
 				return;
 			} else {
 				let cell = section.getCell(c, r);
 				if(focusCell(cell)) {
-					e.preventDefault();
+					if(args.event) {
+						args.event.preventDefault();
+					}
 					return;
 				}
 			}
 		}
 		startIdx = len - 1;
 	}
+
+	if(args.validContent) { // The current focus on the last focusable content
+		this._grid.getHiddenInput(true).focus();
+	}
 };
 
 /** @private
 * @param {Object} e
 */
-Grid.prototype._onKeyDown = function(e) {
-	if (e.keyCode !== 9 || e.ctrlKey || e.altKey || e.metaKey) {
-		return;
-	}
-
-	// Find next focusable cell
+Grid.prototype._onTabNavigation = function(e) {
 	let colDefs = this.getColumnDefinitions();
 	let colCount = colDefs.length;
 
@@ -4302,13 +4336,36 @@ Grid.prototype._onKeyDown = function(e) {
 	}
 
 	this._scrolledRow = -1; // Reset the scroll loop protector
-	let pos = this.getRelativePosition(e);
-	let content = pos["cell"] ? pos["cell"].getContent() : null;
+	let keyEvt = e.event;
+	let pos = this.getRelativePosition(keyEvt);
+	let validContent = true;
+	let activeElement = e.activeElement;
+	if(activeElement) {
+		validContent = !activeElement.classList.contains("valigner");
+	}
+
+	if(validContent) {
+		let content = pos["cell"] ? pos["cell"].getContent() : null;
+		validContent = isFocusableContent(content);
+	}
+	let startingRowIndex = pos["rowIndex"];
+	if(e.onTheEdge) {
+		let viewInfo = this._grid.getVScrollView();
+		startingRowIndex = keyEvt.shiftKey ? viewInfo.lastFullRow : viewInfo.firstFullRow;
+	}
+	let args = {
+		event: keyEvt,
+		shiftKey: keyEvt.shiftKey,
+		colIndex: pos["colIndex"],
+		rowIndex: startingRowIndex,
+		focusableColIndices: focusableColIndices,
+		validContent: validContent
+	};
 
-	if(e.shiftKey) {
-		this._findPrevFocusableCell(e, pos["colIndex"], pos["rowIndex"], focusableColIndices, content);
+	if(keyEvt.shiftKey) {
+		this._focusPrevCellContent(args);
 	} else {
-		this._findNextFocusableCell(e, pos["colIndex"], pos["rowIndex"], focusableColIndices, content);
+		this._focusNextCellContent(args);
 	}
 };
 

package/lib/tr-grid-filter-input/es6/FilterInput.d.ts

@@ -50,6 +50,8 @@ declare class FilterInputPlugin extends GridPlugin {
 
     public setInputValue(colIndex: number, value: any): void;
 
+    public disableColumnInput(colIndex: number, disabled?: boolean|null): void;
+
     public refresh(delayMs?: number|null): void;
 
     public setFilterLogic(colIndex: number, func: ((...params: any[]) => any)|null, ctx?: any): void;

package/lib/tr-grid-filter-input/es6/FilterInput.js

@@ -871,6 +871,25 @@ FilterInputPlugin.prototype.setInputValue = function (colIndex, value) {
   }
 };
 /** @public
+* @param {number} colIndex
+* @param {boolean=} disabled
+*/
+
+
+FilterInputPlugin.prototype.disableColumnInput = function (colIndex, disabled) {
+  var inputElem = this.getColumnInput(colIndex);
+
+  if (inputElem) {
+    disabled = disabled != null ? disabled : true;
+
+    if (disabled) {
+      inputElem.setAttribute("disabled", "");
+    } else {
+      inputElem.removeAttribute("disabled");
+    }
+  }
+};
+/** @public
 * @ignore
 * @param {number} colIndex
 * @return {Object}

package/lib/tr-grid-row-filtering/es6/RowFiltering.d.ts

@@ -129,6 +129,10 @@ declare class RowFilteringPlugin extends GridPlugin {
 
     public enableSeparatorFiltering(enabled?: boolean|null): void;
 
+    public showColumnFilterIcon(colIndex: number, shown?: boolean|null): void;
+
+    public hideColumnFilterIcon(colIndex: number, hidden?: boolean|null): void;
+
 }
 
 declare function colSettings(colIndex: number, exp: RowFilteringPlugin.Expression|null, ctx?: (any|string)|null): boolean;

package/lib/tr-grid-row-filtering/es6/RowFiltering.js

@@ -1333,8 +1333,11 @@ RowFilteringPlugin.prototype.refresh = function() {
 * @param {number} colIndex
 */
 RowFilteringPlugin.prototype._updateColumnIcon = function(colIndex) {
-	let cfo = this._getColumnFilterOption(colIndex); // colData["rowFiltering"]["filterOption"]
 	let colSettings = this._getUserColumnSettings(colIndex); // colData["rowFiltering"]
+	if(colSettings.hiddenIcon) {
+		return;
+	}
+	let cfo = this._getColumnFilterOption(colIndex); // colData["rowFiltering"]["filterOption"]
 	let iconActivation = colSettings.filterIcon == false ? "none" : this._iconActivation;
 	let hasFilter = cfo ? cfo._filters.length : 0;
 
@@ -2267,6 +2270,38 @@ RowFilteringPlugin.prototype.enableSeparatorFiltering = function (enabled) {
 	}
 };
 
+/**
+* @public
+* @param {number} colIndex
+* @param {boolean=} shown
+*/
+RowFilteringPlugin.prototype.showColumnFilterIcon = function(colIndex, shown) {
+	this.hideColumnFilterIcon(colIndex, shown == null ? false : !shown);
+};
+/**
+* @public
+* @param {number} colIndex
+* @param {boolean=} hidden
+*/
+RowFilteringPlugin.prototype.hideColumnFilterIcon = function(colIndex, hidden) {
+	hidden = hidden != null ? !!hidden : true;
+	let colSettings = this._getUserColumnSettings(colIndex);
+	if(colSettings.hiddenIcon !== hidden) {
+		let cssVal = hidden ? "none" : "";
+		let icons = this.getColumnFilterIcons(colIndex);
+		for(let i = 0; i < icons.length; i++) {
+			icons[i].style.display = cssVal;
+		}
+
+		let filterInput = this._getPlugin("FilterInputPlugin", this._hosts[0]);
+		if(filterInput && filterInput.disableColumnInput) {
+			filterInput.disableColumnInput(colIndex, hidden);
+		}
+
+		colSettings.hiddenIcon = hidden;
+	}
+};
+
 
 
 export default RowFilteringPlugin;

package/lib/tr-grid-util/es6/CellPainter.d.ts

@@ -1,5 +1,5 @@
 import { TickCodes, TickFields } from "./TickCodes.js";
-import { rgb2Hex } from "./Util.js";
+import { rgb2Hex, num2Hex, num2Rgb, hex2Num, hex2Rgb, blendColor, getContrastColor } from "./Color.js";
 import { ElfUtil } from "./ElfUtil.js";
 import { ExpressionParser } from "./ExpressionParser.js";
 

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

@@ -1,5 +1,5 @@
 import { TickCodes, TickFields } from "./TickCodes.js";
-import { rgb2Hex } from "./Util.js";
+import { rgb2Hex, num2Hex, num2Rgb, hex2Num, hex2Rgb, blendColor, getContrastColor } from "./Color.js";
 import { ElfUtil } from "./ElfUtil.js";
 import { ExpressionParser } from "./ExpressionParser.js";
 
@@ -709,17 +709,17 @@ CellPainter.prototype._getStyles = function(rowData, min, max) {
 			if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) {
 				let blendedColor;
 				if(ret > 0) {
-					blendedColor = CellPainter.blendColor(curCond["baseColor"], curCond["upColor"], ret);
+					blendedColor = blendColor(curCond["baseColor"], curCond["upColor"], ret);
 				} else {
-					blendedColor = CellPainter.blendColor(curCond["baseColor"], curCond["downColor"], -ret);
+					blendedColor = blendColor(curCond["baseColor"], curCond["downColor"], -ret);
 				}
 
 				if(curCond["textMode"]) {
-					CellPainter._colorObj["color"] = CellPainter.num2Hex(blendedColor);
+					CellPainter._colorObj["color"] = num2Hex(blendedColor);
 					return CellPainter._colorObj;
 				} else {
-					CellPainter._bgObj["backgroundColor"] = CellPainter.num2Hex(blendedColor);
-					CellPainter._bgObj["color"] = CellPainter.blackAndWhite(blendedColor);
+					CellPainter._bgObj["backgroundColor"] = num2Hex(blendedColor);
+					CellPainter._bgObj["color"] = getContrastColor(blendedColor);
 
 					return CellPainter._bgObj;
 				}
@@ -751,94 +751,44 @@ CellPainter.prototype._getStyles = function(rowData, min, max) {
 };
 
 /** @public
+* @function
 * @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;
-	}
-
-	let baseColorTriplet = CellPainter.hex2Num(baseColor);
-	let maxColorTriplet = CellPainter.hex2Num(maxColor);
-	let blendResult = [];
-	for (let i = 0; i < 3; ++i) {
-		let 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) {
-	let 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';
-};
-
+CellPainter.blendColor = blendColor; // 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 = function (triplet) {
-	let rgb = triplet[2] | (triplet[1] << 8) | (triplet[0] << 16);
-	return ('#' + (0x1000000 + rgb).toString(16).slice(1));
-};
+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 = function (triplet) {
-	return 'rgb(' + triplet[0] + ', ' + triplet[1] + ', ' + triplet[2] + ')';
-};
+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 = function (hex) {
-	let hexInt = parseInt(hex.replace(/[^0-9A-F]/gi, ''), 16);
-	let r = (hexInt >> 16) & 255;
-	let g = (hexInt >> 8) & 255;
-	let b = hexInt & 255;
-	return [r, g, b];
-};
+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 = function (hex) {
-	if(hex) {
-		let hexInt = parseInt(hex.replace(/[^0-9A-F]/gi, ''), 16);
-		let r = (hexInt >> 16) & 255;
-		let g = (hexInt >> 8) & 255;
-		let b = hexInt & 255;
-		return 'rgb(' + r + ', ' + g + ', ' + b + ')';
-	}
-	return '';
-};
+CellPainter.hex2Rgb = hex2Rgb; // For backward compatability
 
 /** Deprecated. Colors should be changed according to user's settings by CellPainter#loadThemeColors
 * @private
@@ -974,11 +924,11 @@ CellPainter._clearBlinkTimer = function(scp, opt_restoreColor) {
 CellPainter.getOppositeColor = function (hexCode) {
 	if(typeof hexCode === "string") {
 		if(hexCode.charAt(0) === "#") {
-			let triplet = CellPainter.hex2Num(hexCode);
-			return CellPainter.blackAndWhite(triplet);
+			let triplet = hex2Num(hexCode);
+			return getContrastColor(triplet);
 		}
 	} else if(Array.isArray(hexCode)) {
-		return CellPainter.blackAndWhite(hexCode);
+		return getContrastColor(hexCode);
 	}
 	return "";
 };