@refinitiv-ui/efx-grid 6.0.31 → 6.0.32

package/lib/core/es6/grid/Core.js

@@ -536,7 +536,7 @@ Core.prototype._groupDefs = null;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.40";
+	return "5.1.41";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -4062,47 +4062,72 @@ Core.prototype._updateColumnBounds = function () {
 		return;
 	}
 
+	var sectCount = this._settings.length;
+	if(!sectCount) {
+		return;
+	}
+
+	// Collecting column selection and selection ranges
+	var selRanges = [];
+	var pair = null;
 	var colCount = this.getColumnCount();
-	var colIndices = [];
+	var selIndices = [];
 	var i;
 	for(i = 0; i < colCount; i++) {
 		if(this.isSelectedColumn(i)) {
-			colIndices.push(i);
+			selIndices.push(i);
+			if(!pair) {
+				pair = [i, -1];
+			}
+		} else if(pair) {
+			pair[1] = i - 1;
+			selRanges.push(pair);
+			pair = null;
 		}
 	}
+	if(pair) {
+		pair[1] = colCount - 1;
+		selRanges.push(pair);
+		pair = null;
+	}
+
 	var arg = {
-		selectedColumns: colIndices
+		"selectedColumns": selIndices,
+		"selectionRanges": selRanges
 	};
 	this._dispatch("beforeColumnBoundUpdate", arg);
 
-	var len = this.getColumnCount();
-	var lftIdx = -1;
-	var rgtIdx = -1;
-	for(i = 0; i < len; ++i) {
-		if(this.isSelectedColumn(i)) {
-			rgtIdx = i;
-			if(lftIdx < 0) {
-				lftIdx = i;
-			}
-		}
-	}
-	var sectCount = this._settings.length;
-	if(sectCount) {
-		var sectionSetting = this._settings[0];
-		var section = sectionSetting.getSection();
+	// Calculate position from ranges
+	var rangeCount = selRanges.length;
+	var posAry = [];
+	var noBorderAry = [];
+	var topSectionSettings = this._settings[0];
+	var section = topSectionSettings.getSection();
+	for(i = 0; i < rangeCount; ++i) {
+		pair = selRanges[i];
 		var positions = [0, 0];
 		var noBorders = [false, false];
-		section.calculateColumnBounds(lftIdx, rgtIdx, positions, noBorders);
-		var topPx = 0;
-		if(sectionSetting.getType() === "title" && arg.topBoundRowIndex != null) {
-			topPx = this._layoutY.getLaneStart(arg.topBoundRowIndex);
-		}
-		section.updateColumnBounds(positions, noBorders, topPx);
-		for(i = 1; i < sectCount; i++) {
-			section = this._settings[i].getSection();
-			section.updateColumnBounds(positions, noBorders);
+		section.calculateColumnBounds(pair[0], pair[1], positions, noBorders);
+		if(positions[0] < positions[1]) {
+			posAry.push(positions);
+			noBorderAry.push(noBorders);
 		}
 	}
+
+	// Render column bounds
+	var topPx = 0;
+	var topBoundIdx = -1;
+	if(arg["topBoundRowIndex"] != null) {
+		topBoundIdx = +arg["topBoundRowIndex"];
+	}
+	if(topBoundIdx >= 0 && topSectionSettings.getType() === "title") {
+		topPx = this._layoutY.getLaneStart(topBoundIdx);
+	}
+	section.updateColumnBounds(posAry, noBorderAry, topPx);
+	for(i = 1; i < sectCount; i++) {
+		section = this._settings[i].getSection();
+		section.updateColumnBounds(posAry, noBorderAry);
+	}
 };
 
 /** @public

package/lib/core/es6/grid/ILayoutGrid.js

@@ -692,11 +692,11 @@ ILayoutGrid.prototype.getHorizontalLayout = function () {};
 ILayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositions, outNoBorders) {};
 /** @public
 * @ignore
-* @param {!Array.<number>} positions Left and right bound positions in pixel
-* @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+* @param {!Array.<Array>} posAry Left and right bound positions in pixel
+* @param {!Array.<Array>} noBorderAry Boolean values indicating existence of left and right CSS borders
 * @param {number=} topPx Top position of bound
 */
-ILayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {};
+ILayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx) {};
 
 export default ILayoutGrid;
 export { ILayoutGrid };

package/lib/core/es6/grid/LayoutGrid.js

@@ -253,10 +253,18 @@ LayoutGrid.prototype._ctxRows;
 * @private
 */
 LayoutGrid.prototype._boundLayer = null;
-/** @type {Element}
+/** @type {Array.<Element>}
+* @private
+*/
+LayoutGrid.prototype._colBounds = null;
+/** @type {Array.<Element>}
+* @private
+*/
+LayoutGrid.prototype._colBoundCache = null;
+/** @type {boolean}
 * @private
 */
-LayoutGrid.prototype._columnBound = null;
+LayoutGrid.prototype._colSelDirty = false;
 /** @type {HScrollbar}
 * @private
 */
@@ -280,6 +288,8 @@ LayoutGrid.prototype.dispose = function () {
 	}
 
 	this._colCount = this._rowCount = this._activeRowEnd = this._availableRowCount = 0;
+	this._colBounds = this._colBoundCache = null;
+	this._colSelDirty = false;
 
 	this._highlightedCells.length = 0;
 	this._ctx = null;
@@ -2221,16 +2231,15 @@ LayoutGrid.prototype.getContextRow = function (rowIndex) {
 LayoutGrid.prototype.selectColumn = function (colIndex, selected) {
 	this.enableColumnClass(colIndex, "selected-column", selected);
 
-	var columnBound = this._columnBound;
-	if(!columnBound) {
-		columnBound = this._columnBound = document.createElement("div");
-		columnBound.className = "selection-bound column-bound";
-	}
-	var boundLayer = this._boundLayer;
-	if(!boundLayer) {
-		boundLayer = this._boundLayer = document.createElement("div");
-		boundLayer.className = "cover-layer";
-		this._updateLayers();
+	if(selected) {
+		this._colSelDirty = true;
+
+		var boundLayer = this._boundLayer;
+		if(!boundLayer) {
+			boundLayer = this._boundLayer = document.createElement("div");
+			boundLayer.className = "cover-layer";
+			this._updateLayers();
+		}
 	}
 };
 /** @public
@@ -2333,24 +2342,56 @@ LayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositi
 };
 /** @public
 * @ignore
-* @param {!Array.<number>} positions Left and right bound positions in pixel
-* @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+* @param {!Array.<Array>} posAry Left and right bound positions in pixel
+* @param {!Array.<Array>} noBorderAry Boolean values indicating existence of left and right CSS borders
 * @param {number=} topPx Top position of bound
 */
-LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {
-	var columnBound = this._columnBound;
-	if(!columnBound) {
+LayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx) {
+	if(!this._colSelDirty) {
 		return;
 	}
 
-	var lftPx = positions[0];
-	var rgtPx = positions[1];
-	if(lftPx >= rgtPx) {
-		var pn = columnBound.parentNode;
+	var cbs = this._colBounds;
+	var cbc = this._colBoundCache;
+	if(!cbs) {
+		cbs = this._colBounds = [];
+	}
+	if(!cbc) {
+		cbc = this._colBoundCache = [];
+	}
+
+	var rangeCount = posAry.length;
+	var i;
+	var pn = null; // parentNode
+	var columnBound = null;
+
+	// Remove unused bounds from document
+	var activeCount = cbs.length;
+	for(i = rangeCount; i < activeCount; ++i) {
+		columnBound = cbs[i];
+		pn = columnBound.parentNode;
 		if(pn) {
 			pn.removeChild(columnBound);
 		}
-	} else {
+	}
+	cbs.length = activeCount = rangeCount;
+
+	if(!rangeCount) {
+		this._colSelDirty = false;
+		return;
+	}
+
+	for(i = 0; i < rangeCount; ++i) {
+		var positions = posAry[i];
+		var noBorders = noBorderAry[i];
+		var lftPx = /** @type{number} */(positions[0]);
+		var rgtPx = /** @type{number} */(positions[1]);
+
+		columnBound = cbc[i];
+		if(!columnBound) {
+			columnBound = cbc[i] = document.createElement("div");
+			columnBound.className = "selection-bound column-bound";
+		}
 		columnBound.style.left = lftPx + "px";
 		columnBound.style.width = (rgtPx - lftPx) + "px";
 
@@ -2360,7 +2401,10 @@ LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx)
 		columnBound.classList.toggle("no-left-bound", noBorders[0]);
 		columnBound.classList.toggle("no-right-bound", noBorders[1]);
 		if(this._boundLayer) {
-			this._boundLayer.appendChild(columnBound);
+			if(!cbs[i]) {
+				cbs[i] = columnBound;
+				this._boundLayer.appendChild(columnBound);
+			}
 		}
 	}
 };

package/lib/core/es6/grid/VirtualizedLayoutGrid.js

@@ -97,10 +97,18 @@ VirtualizedLayoutGrid.prototype._selectionList = null;
 * @private
 */
 VirtualizedLayoutGrid.prototype._reverter = null;
-/** @type {Element}
+/** @type {Array.<Element>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBounds = null;
+/** @type {Array.<Element>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBoundCache = null;
+/** @type {boolean}
 * @private
 */
-VirtualizedLayoutGrid.prototype._rowBound = null;
+VirtualizedLayoutGrid.prototype._rowSelDirty = false;
 /** @type {Element}
 * @private
 */
@@ -166,6 +174,9 @@ VirtualizedLayoutGrid.prototype.dispose = function () {
 	this._grid.dispose();
 	this._dispose();
 	this._reverter.dispose();
+
+	this._rowBounds = this._rowBoundCache = null;
+	this._rowSelDirty = false;
 	if(this._rowBoundTimer) {
 		clearTimeout(this._rowBoundTimer);
 		this._rowBoundTimer = 0;
@@ -617,9 +628,10 @@ VirtualizedLayoutGrid.prototype.setSelectedRow = function (rowIndex, opt_selecte
 	this._grid.setSelectedRow(rowIndex - this._firstIndex, selected);
 
 	if(selected) {
-		this._initRowBounds();
+		this._rowSelDirty = true;
+		this._initBoundLayer();
 	}
-	this._updateRowBounds();
+	this._requestUpdatingRowBounds();
 };
 
 /** @inheritDoc */
@@ -632,14 +644,15 @@ VirtualizedLayoutGrid.prototype.selectSingleRow = function (rowIndex) {
 VirtualizedLayoutGrid.prototype.selectRowRange = function (rowIndex, length) {
 	this._selectionList.selectRange(rowIndex, length);
 	this._updateRowSelection();
-	this._initRowBounds();
-	this._updateRowBounds();
+	this._rowSelDirty = true;
+	this._initBoundLayer();
+	this._requestUpdatingRowBounds();
 };
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.clearSelectedRows = function () {
 	var count = this._selectionList.clearAllSelections();
 	this._grid.clearSelectedRows();
-	this._updateRowBounds();
+	this._requestUpdatingRowBounds(); // WARNING: Row bounds are not removed from the document immediately
 	return count;
 };
 /** @inheritDoc */
@@ -1081,12 +1094,12 @@ VirtualizedLayoutGrid.prototype._updateCellBounds = function () {
 };
 /** @public
 * @ignore
-* @param {!Array.<number>} positions Left and right bound positions in pixel
-* @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+* @param {!Array.<Array>} posAry Left and right bound positions in pixel
+* @param {!Array.<Array>} noBorderAry Boolean values indicating existence of left and right CSS borders
 * @param {number=} topPx Top position of bound
 */
-VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {
-	this._grid.updateColumnBounds(positions, noBorders, topPx);
+VirtualizedLayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx) {
+	this._grid.updateColumnBounds(posAry, noBorderAry, topPx);
 	this._updateRowBounds();
 };
 /** @private
@@ -1101,16 +1114,6 @@ VirtualizedLayoutGrid.prototype._initBoundLayer = function () {
 };
 /** @private
 */
-VirtualizedLayoutGrid.prototype._initRowBounds = function () {
-	var rowBound = this._rowBound;
-	if(!rowBound) {
-		rowBound = this._rowBound = document.createElement("div");
-		rowBound.className = "selection-bound";
-	}
-	this._initBoundLayer();
-};
-/** @private
-*/
 VirtualizedLayoutGrid.prototype._requestUpdatingRowBounds = function () {
 	if(!this._rowBoundTimer) {
 		this._rowBoundTimer = setTimeout(this._updateRowBounds, 10);
@@ -1122,54 +1125,88 @@ VirtualizedLayoutGrid.prototype._updateRowBounds = function () {
 	this._rowBoundTimer = 0;
 	this._updateCellBounds();
 
-	var rowBound = this._rowBound;
-	if(!rowBound) {
+	if(!this._rowSelDirty) {
 		return;
 	}
-	var topIdx = this.getFirstSelectedRow();
-	var btmIdx = -1; // Inclusive
-	var topPx = 0;
-	var btmPx = 0;
-	var rowCount = this._layoutY.getLaneCount();
-	if(topIdx >= rowCount) {
-		topIdx = rowCount - 1;
+	var rbs = this._rowBounds;
+	var rbc = this._rowBoundCache;
+	if(!rbs) {
+		rbs = this._rowBounds = [];
 	}
-	if(topIdx >= 0) {
-		btmIdx = this.getLastSelectedRow();
-		if(btmIdx >= rowCount) {
-			btmIdx = rowCount - 1;
-		}
-		topPx = this._layoutY.getLaneStart(topIdx);
-		btmPx = this._layoutY.getLaneEnd(btmIdx);
+	if(!rbc) {
+		rbc = this._rowBoundCache = [];
 	}
 
-	if(topPx >= btmPx) {
-		var pn = rowBound.parentNode;
+	var selList = this._selectionList;
+	var rowCount = this._layoutY.getLaneCount();
+	selList.deselectFrom(rowCount); // TODO: move this to setRowCount
+
+	var selRanges = selList.getConnectedRanges();
+	var rangeCount = selRanges.length;
+	var i;
+	var pn = null; // parentNode
+	var rowBound = null;
+
+	// Remove unused bounds from document
+	var activeCount = rbs.length;
+	for(i = rangeCount; i < activeCount; ++i) {
+		rowBound = rbs[i];
+		pn = rowBound.parentNode;
 		if(pn) {
 			pn.removeChild(rowBound);
 		}
-	} else {
+	}
+	rbs.length = activeCount = rangeCount;
+
+	if(!rangeCount) {
+		var selCount = selList.getSelectionCount();
+		if(!selCount) {
+			this._rowSelDirty = false;
+		}
+		return;
+	}
+
+	// Prepare shared parameters
+	var scrollLeft = 0;
+	var pinnedLftCount = 0;
+	var pinnedRgtCount = 0;
+	var endOfScroll = false;
+	if(this._hscrollbar) {
+		scrollLeft = this._hscrollbar.getScrollLeft();
+		pinnedLftCount = this._hscrollbar.getPinnedLeftColumnCount();
+		pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
+		endOfScroll = this._hscrollbar.isEndOfHorizontalScroll();
+	}
+	var noLeftBound = !pinnedLftCount && scrollLeft > 0;
+	var noRightBound = !pinnedRgtCount && !endOfScroll;
+	var boundWidth = this._grid._getViewSize();
+
+	// Create row bound elements based on number of selection ranges
+	for(i = 0; i < rangeCount; ++i) {
+		var pair = selRanges[i];
+		var topIdx = pair[0];
+		var btmIdx = pair[1]; // Inclusive
+		var topPx = this._layoutY.getLaneStart(topIdx);
+		var btmPx = this._layoutY.getLaneEnd(btmIdx);
+
+		rowBound = rbc[i];
+		if(!rowBound) {
+			rowBound = rbc[i] = document.createElement("div");
+			rowBound.className = "selection-bound";
+		}
+
 		rowBound.style.top = topPx + "px";
 		rowBound.style.height = (btmPx - topPx) + "px";
-
-		var boundWidth = this._grid._getViewSize();
 		rowBound.style.width = boundWidth + "px";
 
-		var scrollLeft = 0;
-		var pinnedLftCount = 0;
-		var pinnedRgtCount = 0;
-		var endOfScroll = false;
-		if(this._hscrollbar) {
-			scrollLeft = this._hscrollbar.getScrollLeft();
-			pinnedLftCount = this._hscrollbar.getPinnedLeftColumnCount();
-			pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
-			endOfScroll = this._hscrollbar.isEndOfHorizontalScroll();
-		}
-		rowBound.classList.toggle("no-left-bound", !pinnedLftCount && scrollLeft > 0);
-		rowBound.classList.toggle("no-right-bound", !pinnedRgtCount && !endOfScroll);
+		rowBound.classList.toggle("no-left-bound", noLeftBound);
+		rowBound.classList.toggle("no-right-bound", noRightBound);
 
 		if(this._boundLayer) {
-			this._boundLayer.appendChild(rowBound);
+			if(!rbs[i]) {
+				rbs[i] = rowBound;
+				this._boundLayer.appendChild(rowBound);
+			}
 		}
 	}
 };

package/lib/core/es6/grid/util/SelectionList.d.ts

@@ -12,6 +12,8 @@ declare class SelectionList {
 
     public deselect(at: number): boolean;
 
+    public deselectFrom(at: number): boolean;
+
     public toggleSelection(at: number): void;
 
     public singularlySelect(at: number): boolean;
@@ -36,13 +38,15 @@ declare class SelectionList {
 
     public getLastSelectedIndex(): number;
 
-    public getAllSelections(): (number)[]|null;
+    public getAllSelections(): (number)[];
+
+    public getConnectedRanges(from?: number|null, to?: number|null): (number)[][];
 
     public getSelectionMap(): (boolean)[]|null;
 
     public clearAllSelections(): number;
 
-    public copyFrom(srcSelections: SelectionList|null, fromSrcIndex: number, offsetIndex: number, forLength: number): void;
+    public copyFrom(srcSelections: SelectionList|null, fromSrcIndex: number, offset: number, forLength: number): void;
 
 }
 

package/lib/core/es6/grid/util/SelectionList.js

@@ -72,6 +72,34 @@ SelectionList.prototype.deselect = function (at) {
 	}
 	return false;
 };
+/** Deselect all selections starting from the specified index
+* @public
+* @param {number} at
+* @return {boolean}
+*/
+SelectionList.prototype.deselectFrom = function (at) {
+	if(this._lastIndex < at) {
+		return false;
+	}
+	if(this._firstIndex >= at) {
+		this.clearAllSelections();
+		return true;
+	}
+
+	var lastIndex = this._lastIndex;
+	var sels = this._selections;
+	for(var i = at; i <= lastIndex; ++i) {
+		if (sels[i]) {
+			sels[at] = false;
+			--this._count;
+		}
+	}
+	if (this._anchor >= at) {
+		this._anchor = -1; // No anchor
+	}
+	this._lastIndex = this._findPrevSelection(at);
+	return true;
+};
 /** @public
 * @param {number} at
 */
@@ -268,14 +296,16 @@ SelectionList.prototype.getLastSelectedIndex = function() {
 
 /** WARNING: It will creates a new(EXPENSIVE) defragmented array of selected Index. The selected indices will always be sorted in ascending order
 * @public
-* @return {Array.<number>}
+* @return {!Array.<number>}
 */
 SelectionList.prototype.getAllSelections = function() {
 	if(this._count > 0) {
 		var ary = new Array(this._count); // Fastest way to create an array
 		var count = 0;
-		for(var i = this._firstIndex; i <= this._lastIndex; ++i) {
-			if(this._selections[i]) {
+		var sels = this._selections;
+		var lastIdx = this._lastIndex;
+		for(var i = this._firstIndex; i <= lastIdx; ++i) {
+			if(sels[i]) {
 				ary[count++] = i;
 			}
 		}
@@ -283,6 +313,45 @@ SelectionList.prototype.getAllSelections = function() {
 	}
 	return [];
 };
+/** Get array of connected selection ranges. For intances, if indices 1, 2, 5, and 5 are selected, array of [1, 2] and [5, 5] are returned.
+* @public
+* @param {number=} from
+* @param {number=} to EXCLUSIVE
+* @return {!Array.<Array.<number>>}
+*/
+SelectionList.prototype.getConnectedRanges = function(from, to) {
+	if(this._count > 0) {
+		var ary = [];
+		if(from == null || from < this._firstIndex) {
+			from = this._firstIndex;
+		}
+		if(to == null || to > this._lastIndex) {
+			to = this._lastIndex + 1;
+		}
+
+		var pair = null;
+		for(var i = from; i < to; ++i) {
+			if(this._selections[i]) {
+				if(!pair) {
+					pair = [i, -1];
+				}
+			} else if(pair) {
+				pair[1] = i - 1;
+				ary.push(pair);
+				pair = null;
+			}
+		}
+
+		if(pair) {
+			pair[1] = this._lastIndex;
+			ary.push(pair);
+			pair = null;
+		}
+		return ary;
+	}
+	return [];
+};
+
 /**
 * @public
 * @return {Array.<boolean>}
@@ -310,13 +379,13 @@ SelectionList.prototype.clearAllSelections = function() {
 * @public
 * @param {SelectionList} srcSelections
 * @param {number} fromSrcIndex
-* @param {number} offsetIndex
+* @param {number} offset Offset from the source index to map to destination index of this SelectionList. Use 0 if there is no shifting.
 * @param {number} forLength Positive value only. negative valie is not allowed
 */
-SelectionList.prototype.copyFrom = function (srcSelections, fromSrcIndex, offsetIndex, forLength) {
+SelectionList.prototype.copyFrom = function (srcSelections, fromSrcIndex, offset, forLength) {
 	if (forLength <= 0) { return; }
 
-	var toThisIndex = fromSrcIndex + offsetIndex;
+	var toThisIndex = fromSrcIndex + offset;
 	if (srcSelections == null) {
 		this.deselectRange(toThisIndex, forLength);
 		return;
@@ -337,7 +406,7 @@ SelectionList.prototype.copyFrom = function (srcSelections, fromSrcIndex, offset
 	this._anchor = -1;
 	if (srcSelections._anchor >= 0) {
 		if (srcSelections._anchor >= fromSrcIndex && srcSelections._anchor < (fromSrcIndex + forLength)) {
-			this._anchor = srcSelections._anchor + offsetIndex;
+			this._anchor = srcSelections._anchor + offset;
 		}
 	}
 };

package/lib/grid/index.js

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