@refinitiv-ui/efx-grid 6.0.149 → 6.0.150

package/lib/column-dragging/es6/ColumnDragging.js

@@ -61,8 +61,8 @@ import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 * @param {ColumnDraggingPlugin~Options=} options
 * @extends {GridPlugin}
 */
-var ColumnDraggingPlugin = function (options) {
-	var t = this;
+let ColumnDraggingPlugin = function (options) {
+	let t = this;
 	t._onMouseUp = t._onMouseUp.bind(t);
 	t._onMouseDown = t._onMouseDown.bind(t);
 
@@ -70,7 +70,6 @@ var ColumnDraggingPlugin = function (options) {
 	t._onDragStart = t._onDragStart.bind(t);
 	t._onDragEnd = t._onDragEnd.bind(t);
 	t._onDragPulse = t._onDragPulse.bind(t);
-	t._onThemeLoaded = t._onThemeLoaded.bind(t);
 
 	t._hosts = [];
 
@@ -231,19 +230,17 @@ ColumnDraggingPlugin.prototype.initialize = function (host, options) {
 		dragBoxIcon: this._dragBoxIcon
 	});
 
-	// Share dragging styles
-	if(DragUI.stylePromise) {
-		DragUI.applyThemeColor(host);
-	} else {
-		DragUI.stylePromise = ElfUtil.getThemeColors();
-		DragUI.stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
-	}
+	ElfUtil.getThemeColors().then(
+		ColumnDraggingPlugin._onThemeLoaded.bind(null, host)
+	).catch(
+		ColumnDraggingPlugin._onThemeLoaded.bind(null, host)
+	);
 };
 /** @public
 * @param {Object=} host core grid instance
 */
 ColumnDraggingPlugin.prototype.unload = function (host) {
-	var at = this._hosts.indexOf(host);
+	let at = this._hosts.indexOf(host);
 	if (at < 0) {
 		return;
 	}
@@ -262,8 +259,10 @@ ColumnDraggingPlugin.prototype.unload = function (host) {
 };
 
 /** @private
+* @function
+* @param {Object} grid Core grid instance
 */
-ColumnDraggingPlugin.prototype._onThemeLoaded = function() {
+ColumnDraggingPlugin._onThemeLoaded = function(grid) {
 	if(!ColumnDraggingPlugin._styles) {
 		let styles = [
 			".multi-column-drag-indicator .section.title .cover-layer .column-bound.selection-bound ", [
@@ -280,16 +279,13 @@ ColumnDraggingPlugin.prototype._onThemeLoaded = function() {
 		ColumnDraggingPlugin._styles = prettifyCss(styles);
 	}
 
-	let colors = ElfUtil.getColors();
-	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
-	for(let i = this._hosts.length; --i >= 0;) {
-		let host = this._hosts[i];
-		ColumnDraggingPlugin._applyThemeColor(host);
-		DragUI.applyThemeColor(host);
-	}
+	DragUI.initStyles();
+	ColumnDraggingPlugin._applyThemeColor(grid);
+	DragUI.applyThemeColor(grid);
 };
+
 /** @private
-* @param {Object} grid core grid instance
+* @param {Object} grid Core grid instance
 */
 ColumnDraggingPlugin._applyThemeColor = function(grid) {
 	if(!grid || grid._columnDraggingStyles) {
@@ -307,7 +303,7 @@ ColumnDraggingPlugin._applyThemeColor = function(grid) {
 ColumnDraggingPlugin.prototype.config = function (options) {
 	if (!options) { return; }
 
-	var noColumnDragging = options["noColumnDragging"];
+	let noColumnDragging = options["noColumnDragging"];
 	if (noColumnDragging == null && options["columnReorder"] != null) {
 		noColumnDragging = !options["columnReorder"];
 	}
@@ -315,7 +311,7 @@ ColumnDraggingPlugin.prototype.config = function (options) {
 		this._disabled = noColumnDragging ? true : false;
 	}
 
-	var extOptions = options.columnDragging;
+	let extOptions = options.columnDragging;
 	if (!extOptions) { return; }
 
 	if (typeof extOptions["dragBoxRenderer"] === "function") {
@@ -336,15 +332,15 @@ ColumnDraggingPlugin.prototype.config = function (options) {
 * @return {!Object}
 */
 ColumnDraggingPlugin.prototype.getConfigObject = function (gridOptions) {
-	var obj = gridOptions || {};
+	let obj = gridOptions || {};
 
 	if(this._disabled) {
 		obj.noColumnDragging = true;
 	}
 
-	var extOptions = obj.columnDragging;
+	let extOptions = obj.columnDragging;
 	if(!extOptions) {
-		extOptions = obj.columnDragging = {};
+		extOptions = obj.columnDragging = {}; // TO_DO: This is unnecessary
 	}
 
 	return obj;
@@ -392,9 +388,9 @@ ColumnDraggingPlugin.prototype.disableDragBox = function(disabled) {
 * @return {boolean}
 */
 ColumnDraggingPlugin.prototype._isAllowed = function(colIndex) {
-	var host = this._clickedGrid || this._hosts[0];
+	let host = this._clickedGrid || this._hosts[0];
 	if (host) {
-		var stationaryIndex = host.getStationaryColumnIndex();
+		let stationaryIndex = host.getStationaryColumnIndex();
 		if (stationaryIndex < 0) {
 			return true;
 		}
@@ -476,7 +472,7 @@ ColumnDraggingPlugin.prototype._onMouseDown = function (e) {
 		return; // Drag timer is already start
 	}
 
-	var host = this.getRelativeGrid(e);
+	let host = this.getRelativeGrid(e);
 	if(!host) {
 		return; // Given event should be within grid element
 	}
@@ -486,14 +482,14 @@ ColumnDraggingPlugin.prototype._onMouseDown = function (e) {
 		return; // Only start dragging when mouse is down on the grid
 	}
 
-	var section = this._pos["section"];
+	let section = this._pos["section"];
 	if(!section) {
 		return; // The section that is not in the target section list cannot be dragged
 	} else if(this._pos["sectionType"] !== "title") {
 		return; // Sections other than title section cannot be dragged by default
 	}
 
-	var colIndex = this._pos["colIndex"];
+	let colIndex = this._pos["colIndex"];
 	if(!this._isAllowed(colIndex)) {
 		return; // The column cannot be dragged
 	}
@@ -501,9 +497,9 @@ ColumnDraggingPlugin.prototype._onMouseDown = function (e) {
 		return; // If the lock frag is on, frozen columns cannot be dragged
 	}
 
-	var rowIndex = this._pos["rowIndex"]; // rowIndex may not exist
-	var movableBorder = this._findMoveableBorder(colIndex, rowIndex - 1, section);
-	var movingColumns = this._getSpan(colIndex, rowIndex, section);
+	let rowIndex = this._pos["rowIndex"]; // rowIndex may not exist
+	let movableBorder = this._findMoveableBorder(colIndex, rowIndex - 1, section);
+	let movingColumns = this._getSpan(colIndex, rowIndex, section);
 
 	this._clickedGrid = host;
 	this._clickedSection = section;
@@ -597,12 +593,12 @@ ColumnDraggingPlugin.prototype._onDragStart = function (e) {
 	window.addEventListener("mousemove", this._onDrag, false); // TODO: support touch operation
 	window.addEventListener("mouseup", this._onDragEnd, true);
 
-	var host = this._clickedGrid;
-	var height = host.getHeight();
-	var sectionBound =  this._clickedSection.getBoundingClientRect();
-	var clickedCellBound =  this._clickedSection.getCell(this._startColumn, this._clickedRow).getBoundingClientRect();
+	let host = this._clickedGrid;
+	let height = host.getHeight();
+	let sectionBound =  this._clickedSection.getBoundingClientRect();
+	let clickedCellBound =  this._clickedSection.getCell(this._startColumn, this._clickedRow).getBoundingClientRect();
 
-	var gridElem = host.getElement();
+	let gridElem = host.getElement();
 	this._guideline.style.top = (clickedCellBound.top - sectionBound.top) + "px";
 	this._guideline.style.height = (height - 1) + "px";
 
@@ -614,10 +610,10 @@ ColumnDraggingPlugin.prototype._onDragStart = function (e) {
 	gridElem.appendChild(this._guideline);
 
 	if (this._dragBoxRenderer) { // For custom drag box rendering
-		var arg = cloneObject(e); // TODO: Check if cloning is necessary
-		var id = this.getColumnId(this._startColumn);
-		var index = this.getColumnIndex(id);
-		var field = this._getField(this._startColumn);
+		let arg = cloneObject(e); // TODO: Check if cloning is necessary
+		let id = this.getColumnId(this._startColumn);
+		let index = this.getColumnIndex(id);
+		let field = this._getField(this._startColumn);
 
 		arg.dragBox = this._dragBox;
 		arg.columnData = {
@@ -641,7 +637,7 @@ ColumnDraggingPlugin.prototype._onDragStart = function (e) {
 	} else if(this._scrollStep > 400) {
 		this._scrollStep = 400;
 	}
-	var scrollbar = host.getHScrollbar();
+	let scrollbar = host.getHScrollbar();
 	this._cacheLeft = scrollbar.getLeft() + 20;
 	this._cacheWidth = scrollbar.getLeft() + scrollbar.getWidth() - 20;
 
@@ -659,7 +655,7 @@ ColumnDraggingPlugin.prototype._onDrag = function (e) {
 	var	host = this.getRelativeGrid(e);
 	if (!host || host !== this._clickedGrid) { return; }
 
-	var colIndex = this._pos["colIndex"];
+	let colIndex = this._pos["colIndex"];
 	if ((colIndex >= this._leftMovableBorder) &&
 		(colIndex <= this._rightMovableBorder) &&
 		this._isAllowed(colIndex) &&
@@ -685,7 +681,7 @@ ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
 	// document.body.classList.remove("tr-move-cursor");
 	this._dimCol(false);
 
-	var pn = this._guideline.parentNode;
+	let pn = this._guideline.parentNode;
 	if(pn) {
 		pn.removeChild(this._guideline);
 	}
@@ -704,11 +700,11 @@ ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
 		window.clearInterval(this._dragPulseId);
 		this._dragPulseId = 0;
 	}
-	var destPos = this._pos;
+	let destPos = this._pos;
 	this._pos = null;
 
 	preventDefault(e);
-	var operationCancelled = false;
+	let operationCancelled = false;
 	if(destPos["cancel"]) {
 		operationCancelled = true;
 	}
@@ -728,7 +724,7 @@ ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
 		operationCancelled = true;
 	}
 
-	var arg = null;
+	let arg = null;
 
 	if(!operationCancelled) {
 		arg = {
@@ -786,13 +782,14 @@ ColumnDraggingPlugin.prototype._moveColumns = function (srcColIndices, destColum
 	let colList = [];
 	let csp = this._getPlugin("ColumnStackPlugin");
 	let stackId, groupId;
+	let i;
 	if(srcCount === 1) {
 		if(csp) {
 			stackId = csp.getStackId(this._startColumn);
 		}
 		let cgp = this._getPlugin("ColumnGroupingPlugin");
 		if(cgp){
-			var cellInfo = cgp.getCellInfo(this._startPos);
+			let cellInfo = cgp.getCellInfo(this._startPos);
 			groupId = cellInfo["groupId"] || cellInfo["columnId"];
 		}
 
@@ -801,15 +798,14 @@ ColumnDraggingPlugin.prototype._moveColumns = function (srcColIndices, destColum
 		} else if(groupId) {
 			cgp.moveGroup(groupId, destColumnIndex);
 		} else {
-			for(let i = this._startColumn; i <= this._endColumn; i++){
+			for(i = this._startColumn; i <= this._endColumn; i++){
 				colList.push(i);
 			}
 		}
 	} else {
 		let stacking = {}; // Object to optimize call column stack api repeatly
-		for (let i = 0; i < srcCount; i++) {
+		for (i = 0; i < srcCount; i++) {
 			let srcIdx = srcColIndices[i];
-			let srcId = this.getColumnId(srcIdx);
 
 			if(csp) {
 				stackId = csp.getStackId(srcIdx);
@@ -822,12 +818,13 @@ ColumnDraggingPlugin.prototype._moveColumns = function (srcColIndices, destColum
 					colList.push(colId);
 				}
 			} else {
+				let srcId = this.getColumnId(srcIdx);
 				colList.push(srcId); // Normal case
 			}
 		}
 	}
-	for(let i = this._hosts.length; --i >= 0;) {
-		var host = this._hosts[i];
+	for(i = this._hosts.length; --i >= 0;) {
+		let host = this._hosts[i];
 		host.reorderColumns(colList, destColumnIndex);
 	}
 };
@@ -839,11 +836,11 @@ ColumnDraggingPlugin.prototype._onDragPulse = function() {
 
 	this._dispatch("dragInterval", this._pos);
 
-	var host = this._clickedGrid;
+	let host = this._clickedGrid;
 	if(!host || !host.getHScrollbar().isActive()) { return; }
 
-	var x = this._pos["x"];
-	var scrollVal = 0;
+	let x = this._pos["x"];
+	let scrollVal = 0;
 	if(x < this._cacheLeft) {
 		scrollVal = -Math.floor(this._scrollStep * (0.8 + Math.random()));
 
@@ -851,8 +848,8 @@ ColumnDraggingPlugin.prototype._onDragPulse = function() {
 		scrollVal = Math.floor(this._scrollStep * (0.8 + Math.random()));
 	}
 
-	var len = this._hosts ? this._hosts.length : 0;
-	for(var i = 0; i < len; ++i) {
+	let len = this._hosts ? this._hosts.length : 0;
+	for(let i = 0; i < len; ++i) {
 		this._hosts[i].scrollRight(scrollVal);
 	}
 };
@@ -876,7 +873,7 @@ ColumnDraggingPlugin.prototype._clearCache = function() {
 * @return {!Object}
 */
 ColumnDraggingPlugin.prototype._getSpan = function(colIndex, row, section) {
-	var cellSpan = section.getCellColSpan(colIndex, row);
+	let cellSpan = section.getCellColSpan(colIndex, row);
 
 	if (cellSpan <= 0) { // The specified cell is being occupied
 		colIndex += cellSpan; // Convert the given negative index to the spanning cell
@@ -895,7 +892,7 @@ ColumnDraggingPlugin.prototype._findMoveableBorder = function(col, row, section)
 	if (row < 0 || (!row && row !== 0)) { // Guaranteed to get out of infinite loop by checking undefined, NaN, null
 		return { "left": 0, "right": (section.getColumnCount() - 1) };
 	}
-	var span = this._getSpan(col, row, section);
+	let span = this._getSpan(col, row, section);
 	if (span["right"] >= span["left"]) {
 		return span;
 	} else {
@@ -906,29 +903,29 @@ ColumnDraggingPlugin.prototype._findMoveableBorder = function(col, row, section)
 * @private
 */
 ColumnDraggingPlugin.prototype._renderGuideline = function() {
-	var colIndex = this._pos["colIndex"];
+	let colIndex = this._pos["colIndex"];
 	if(colIndex == null || colIndex < 0) { // undefined, null or negative number
 		return;
 	}
 
-	var currentSpan = this._getSpan(colIndex, this._clickedRow, this._clickedSection);
-	var colStart = currentSpan["left"]; // This can be different from colIndex
-	var colEnd = currentSpan["right"];
-	var colLeft = this._clickedGrid.getColumnLeft(colStart);
-	var colWidth = 0;
-	for(var i = colStart; i <= colEnd; ++i) {
+	let currentSpan = this._getSpan(colIndex, this._clickedRow, this._clickedSection);
+	let colStart = currentSpan["left"]; // This can be different from colIndex
+	let colEnd = currentSpan["right"];
+	let colLeft = this._clickedGrid.getColumnLeft(colStart);
+	let colWidth = 0;
+	for(let i = colStart; i <= colEnd; ++i) {
 		colWidth += this._clickedGrid.getColumnWidth(i);
 	}
 
-	var rightHand = this._pos["x"] > colLeft + colWidth / 2;
-	var destColumn = (rightHand) ? colEnd + 1 : colStart;
+	let rightHand = this._pos["x"] > colLeft + colWidth / 2;
+	let destColumn = (rightHand) ? colEnd + 1 : colStart;
 
-	var csp = this._getPlugin("ColumnStackPlugin");
+	let csp = this._getPlugin("ColumnStackPlugin");
 	if(csp){
-		var stackId = csp.getStackId(destColumn);
+		let stackId = csp.getStackId(destColumn);
 		if(stackId){
-			var members = csp.getStackMemberIndices(stackId);
-			var memberCount = members.length;
+			let members = csp.getStackMemberIndices(stackId);
+			let memberCount = members.length;
 			if(members && memberCount){
 				destColumn = rightHand ? members[memberCount - 1] + 1 : members[0];
 			}
@@ -955,9 +952,9 @@ ColumnDraggingPlugin.prototype._renderGuideline = function() {
 * @param {boolean} inOut
 */
 ColumnDraggingPlugin.prototype._dimCol = function(inOut) {
-	var host = this._clickedGrid;
-	var titleCell = host.getSection("title").getColumn(this._startColumn).getCell(this._clickedRow);
-	var titleCellEl = titleCell.getElement();
+	let host = this._clickedGrid;
+	let titleCell = host.getSection("title").getColumn(this._startColumn).getCell(this._clickedRow);
+	let titleCellEl = titleCell.getElement();
 	if(inOut) {
 		titleCellEl.classList.add("drag-indicator");
 	} else {

package/lib/grid/index.js

@@ -1,3 +1,3 @@
 import {Grid} from "./lib/efx-grid.js";
 export {Grid}
-window.EFX_GRID = { version: "6.0.149" };
+window.EFX_GRID = { version: "6.0.150" };

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -144,7 +144,6 @@ let RowDraggingPlugin = function (options) {
 	t._onDragStart = t._onDragStart.bind(t);
 	t._onMouseMove = t._onMouseMove.bind(t);
 	t._onDragEnd = t._onDragEnd.bind(t);
-	t._onThemeLoaded = t._onThemeLoaded.bind(t);
 
 	t._onJETDrop = t._onJETDrop.bind(t);
 	t._onJETDragOver = t._onJETDragOver.bind(t);
@@ -303,15 +302,6 @@ RowDraggingPlugin.prototype._jetContentHasField = false;
 */
 RowDraggingPlugin.prototype._entryPoint = "";
 
-/** Applied theme color in row dragging and dragUI
-* @private
-* @param {Object} host core grid instance
-*/
-let _applyStyles = function(host) {
-	RowDraggingPlugin._applyThemeColor(host);
-	DragUI.applyThemeColor(host);
-};
-
 /** Prevent built-in config
 * @public
 * @ignore
@@ -365,13 +355,11 @@ RowDraggingPlugin.prototype.initialize = function (host, options) {
 		dragBoxIcon: this._dragBoxIcon
 	});
 
-	// Share dragging styles
-	if(!DragUI.stylePromise) {
-		DragUI.stylePromise = ElfUtil.getThemeColors();
-		DragUI.stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
-	}
-	// TODO: Create a manager to manage styles. Currently, we have to use setTimeout to wait for an element to be created before applying styles
-	setTimeout(_applyStyles.bind(this, host), 0);
+	ElfUtil.getThemeColors().then(
+		RowDraggingPlugin._onThemeLoaded.bind(null, host)
+	).catch(
+		RowDraggingPlugin._onThemeLoaded.bind(null, host)
+	);
 
 	// In case of lazy loading
 	// host.getAllSections("content").forEach(this._registerSection);
@@ -406,8 +394,10 @@ RowDraggingPlugin.prototype.unload = function (host) {
 };
 
 /** @private
+* @function
+* @param {Object} grid Core grid instance
 */
-RowDraggingPlugin.prototype._onThemeLoaded = function() {
+RowDraggingPlugin._onThemeLoaded = function(grid) {
 	if(!RowDraggingPlugin._styles) {
 		let styles = [
 			":host .row-dragging .cover-layer .selection-bound", [
@@ -420,11 +410,9 @@ RowDraggingPlugin.prototype._onThemeLoaded = function() {
 		RowDraggingPlugin._styles = prettifyCss(styles);
 	}
 
-	let colors = ElfUtil.getColors();
-	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
-	for(let i = this._hosts.length; --i >= 0;) {
-		_applyStyles(this._hosts[i]);
-	}
+	DragUI.initStyles();
+	RowDraggingPlugin._applyThemeColor(grid);
+	DragUI.applyThemeColor(grid);
 };
 /** @private
 * @param {Object} grid core grid instance

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

@@ -10,6 +10,8 @@ declare class DragUI {
 
     public onThemeLoaded(colors: any): void;
 
+    public static initStyles(colors?: any): void;
+
     public setContent(content: any): void;
 
 }

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

@@ -36,12 +36,11 @@ DragUI.prototype._dragBoxIcon = null;
 */
 DragUI.prototype._grid = null;
 
-/** @public
+/** Apply the theme colors to the specified grid after DragUI.initStyles
+* @public
 * @param {Object} grid core grid instance
 */
 DragUI.applyThemeColor = function(grid) {
-	// This call after onThemeLoaded from extensions initialize
-
 	if(!grid || grid._dragUIStyles) {
 		return;
 	}
@@ -49,19 +48,31 @@ DragUI.applyThemeColor = function(grid) {
 	if(DragUI._styles) {
 		grid._dragUIStyles = true; // Prevent loading the same style twice
 		injectCss(DragUI._styles, grid.getElement());
-	} else {
-		// TODO : Handle if can not load DragUI._styles try to set new DragUI._styles
-		// Warning: This process have to use ElfUtil.getThemeColors() that async process for Backward compatability.
-		// When use async process, then it can be load theme multiple times.
-
 	}
+	// TO_DO : Handle if can not load DragUI._styles try to set new DragUI._styles
+	// Warning: This process have to use ElfUtil.getThemeColors() that async process for Backward compatability.
+	// When use async process, then it can be load theme multiple times.
 };
 
-/** @public
+/** Deprecated in favor of DragUI.initStyles()
+* @public
 * @param {Object} colors
 */
 DragUI.prototype.onThemeLoaded = function(colors) {
+	DragUI.initStyles(colors);
+};
+
+/** WARNING: This method should be called after the theme has been loaded in order to initialize with the correct colors.
+* @public
+* @function
+* @param {Object=} colors
+*/
+DragUI.initStyles = function(colors) {
 	if(!DragUI._styles) {
+		if(!colors) {
+			colors = ElfUtil.getColors();
+		}
+
 		let ElfVersion = ElfUtil.getElfVersion();
 		let cursor = "grabbing";
 		if (ElfVersion < 3) {

package/lib/versions.json

@@ -1,7 +1,7 @@
 {
-	"tr-grid-util": "1.3.174",
+	"tr-grid-util": "1.3.175",
 	"tr-grid-printer": "1.0.18",
-	"@grid/column-dragging": "1.0.21",
+	"@grid/column-dragging": "1.0.22",
 	"@grid/row-segmenting": "2.0.2",
 	"@grid/statistics-row": "1.0.17",
 	"@grid/zoom": "1.0.13",
@@ -23,7 +23,7 @@
 	"tr-grid-pagination": "1.0.24",
 	"tr-grid-percent-bar": "1.0.24",
 	"tr-grid-range-bar": "2.0.9",
-	"tr-grid-row-dragging": "1.0.38",
+	"tr-grid-row-dragging": "1.0.39",
 	"tr-grid-row-filtering": "1.0.89",
 	"tr-grid-row-grouping": "1.0.88",
 	"tr-grid-row-selection": "1.0.33",

package/package.json

@@ -69,5 +69,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.149"
+	"version": "6.0.150"
 }