@refinitiv-ui/efx-grid 6.0.0 → 6.0.3

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

@@ -6,23 +6,47 @@ import Reverter from "./util/Reverter.js";
 import ILayoutGrid from "./ILayoutGrid.js";
 import LayoutGrid from "./LayoutGrid.js";
 import ElementWrapper from "./components/ElementWrapper.js";
+import HScrollbar from "./components/HScrollbar.js";
 /* eslint-enable */
 
+
+/** @private
+* @function
+* @param {number} idx
+* @param {number} limit
+* @return {number}
+*/
+var _validateIndex = function(idx, limit) {
+	if(idx > limit) {
+		return limit;
+	} else if(idx < 0) {
+		return 0;
+	}
+	return idx;
+};
+
 /** @constructor
  * @ignore
- * @param {Element|null=} opt_initializer this can be either element id (string) or DOM element.
- * @param {string=} opt_className
+ * @param {Object=} options
  * @extends {ElementWrapper}
 */
-var VirtualizedLayoutGrid = function (opt_initializer, opt_className) {
+var VirtualizedLayoutGrid = function (options) {
 	var _t = this;
 	_t._onRestingPosition = _t._onRestingPosition.bind(_t);
+	_t._updateRowBounds = _t._updateRowBounds.bind(_t);
 
-	_t._element = opt_initializer ? opt_initializer : document.createElement("div");
-	_t._element.className = "tr-vlg";
-	if(opt_className) { _t.enableClass(/** @type{string} */(opt_className), true); }
+	_t._element = document.createElement("div");
+	_t._element.className = "tr-vlg section";
 
-	_t._grid = new LayoutGrid(null, {"owner": this});
+	if(!options) {
+		options = {};
+	}
+	if(options["horizontalScrollbar"]) {
+		_t._hscrollbar = options["horizontalScrollbar"];
+	}
+	options["owner"] = this;
+
+	_t._grid = new LayoutGrid(options);
 	_t._grid.setParent(_t._element);
 
 	_t._layoutY = new TrackLayout();
@@ -37,19 +61,18 @@ var VirtualizedLayoutGrid = function (opt_initializer, opt_className) {
 Ext.inherits(VirtualizedLayoutGrid, ElementWrapper);
 
 
-/** For virtualization in Y-Axis
+/**
  * @private
  * @type {number}
  */
 VirtualizedLayoutGrid.prototype._index = -1;
 
-/**
+/** Number of rows offsetting from the first section
  * @private
  * @type {number}
  */
-VirtualizedLayoutGrid.prototype._indexOffset = 0;
-
-/**
+VirtualizedLayoutGrid.prototype._rowOffset = 0;
+/** For virtualization in Y-Axis
  * @private
  * @type {number}
  */
@@ -71,9 +94,45 @@ VirtualizedLayoutGrid.prototype._layoutY;
 VirtualizedLayoutGrid.prototype._selectionList = null;
 
 /** @type {Reverter}
- * @private
- */
+* @private
+*/
 VirtualizedLayoutGrid.prototype._reverter = null;
+/** @type {Element}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBound = null;
+/** @type {Element}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cellBound = null;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cbLftIdx = 0;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cbRgtIdx = 0;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cbTopIdx = 0;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._cbBtmIdx = 0;
+/** @type {number}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBoundTimer = 0;
+/** @type {Element}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._boundLayer = null;
+/** @type {HScrollbar}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._hscrollbar = null;
 
 //#region ====== Override ElementWrapper ======//
 /** @override */
@@ -95,9 +154,14 @@ VirtualizedLayoutGrid.prototype.dispose = function () {
 	this.setRowCount(0); // Fire rowCountChanged
 	this.unlistenAll();
 
+	this._hscrollbar = null;
 	this._grid.dispose();
 	this._dispose();
 	this._reverter.dispose();
+	if(this._rowBoundTimer) {
+		clearTimeout(this._rowBoundTimer);
+		this._rowBoundTimer = 0;
+	}
 };
 /** @override */
 VirtualizedLayoutGrid.prototype.setWidth = function (px) {
@@ -190,6 +254,7 @@ VirtualizedLayoutGrid.prototype.setRowHeight = function (index, val) {
 	if(this._layoutY.setLaneSize(index, val)) {
 		this._grid.setRowHeight(index - this._firstIndex, val);
 		this._element.style.height = this._layoutY.getTrackSize() + "px";
+		this._requestUpdatingRowBounds();
 		return this._dispatchRowHeightChangedEvent(index, index + 1);
 	}
 	return false;
@@ -340,6 +405,7 @@ VirtualizedLayoutGrid.prototype.setRowCount = function (val, noBinding) {
 	if(prevCount !== val){
 		this._layoutY.setLaneCount(val);
 		this._element.style.height = this._layoutY.getTrackSize() + "px";
+		this._requestUpdatingRowBounds();
 		//After rowCountChanged fires, virtualizer will update virtual row count if
 		//the range of virtual layout changed.
 		this._dispatch("rowCountChanged", { "rowCount": val, "prevCount": prevCount, "noBinding": noBinding });
@@ -481,24 +547,33 @@ VirtualizedLayoutGrid.prototype.isSelectedRow = function (at) {
 VirtualizedLayoutGrid.prototype.setSelectedRow = function (rowIndex, opt_selected) {
 	this._selectionList.setSelection(rowIndex, opt_selected);
 
-	var adjustedIndex = rowIndex - this._firstIndex;
-	this._grid.setSelectedRow(adjustedIndex, this._selectionList.getSelection(rowIndex));
+	var selected = this._selectionList.getSelection(rowIndex);
+	this._grid.setSelectedRow(rowIndex - this._firstIndex, selected);
+
+	if(selected) {
+		this._initRowBounds();
+	}
+	this._updateRowBounds();
 };
 
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.selectSingleRow = function (rowIndex) {
-	this.clearSelectedRows();
+	this._selectionList.clearAllSelections();
+	this._grid.clearSelectedRows();
 	this.setSelectedRow(rowIndex);
 };
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.selectRowRange = function (rowIndex, length) {
 	this._selectionList.selectRange(rowIndex, length);
 	this._updateRowSelection();
+	this._initRowBounds();
+	this._updateRowBounds();
 };
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.clearSelectedRows = function () {
 	var count = this._selectionList.clearAllSelections();
 	this._grid.clearSelectedRows();
+	this._updateRowBounds();
 	return count;
 };
 /** @inheritDoc */
@@ -698,8 +773,12 @@ VirtualizedLayoutGrid.prototype.getRowOffset = function(){
 	return this._rowOffset;
 };
 
-/** @inheritDoc */
-VirtualizedLayoutGrid.prototype.updateLayout = function () {};
+/** @public
+* @ignore
+*/
+VirtualizedLayoutGrid.prototype.updateLayout = function () {
+	this._grid.updateLayout();
+};
 
 /** {@link ILayoutGrid#stretchCell}
 * @inheritDoc */
@@ -722,8 +801,8 @@ VirtualizedLayoutGrid.prototype.unstretchCell = function (cellRef, rowIndex) {
 };
 /** {@link ILayoutGrid#unstretchAllCells}
 * @inheritDoc */
-VirtualizedLayoutGrid.prototype.unstretchAllCells = function (cellRef, rowIndex) {
-	return this._grid.unstretchAllCells();
+VirtualizedLayoutGrid.prototype.unstretchAllCells = function () {
+	this._grid.unstretchAllCells();
 };
 
 /** {@link ILayoutGrid#getStretchedCell}
@@ -803,6 +882,220 @@ VirtualizedLayoutGrid.prototype.setRowAttributes = function (rowIndex, func) {
 VirtualizedLayoutGrid.prototype.getContextRow = function (rowIndex) {
 	return this._grid.getContextRow(rowIndex - this._firstIndex);
 };
+
+/** @public
+* @param {number} colIndex
+* @param {boolean=} selected
+*/
+VirtualizedLayoutGrid.prototype.selectColumn = function (colIndex, selected) {
+	this._grid.selectColumn(colIndex, selected);
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+VirtualizedLayoutGrid.prototype.isSelectedColumn = function (colIndex) {
+	return this._grid.isSelectedColumn(colIndex);
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {boolean=} selected
+*/
+VirtualizedLayoutGrid.prototype.selectCell = function (colIndex, rowIndex, selected) {
+	this._grid.selectCell(colIndex, rowIndex - this._firstIndex, selected);
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} width
+* @param {number} height
+*/
+VirtualizedLayoutGrid.prototype.setCellBounds = function (colIndex, rowIndex, width, height) {
+	var cellBound = this._cellBound;
+	if(!cellBound) {
+		cellBound = this._cellBound = document.createElement("div");
+		cellBound.className = "selection-bound";
+	}
+	this._initBoundLayer();
+
+	// Validate inputs
+	var rgtIndex = colIndex + width; // Exclusive
+	var btmIndex = rowIndex + height; // Exclusive
+
+	var colCount = this.getColumnCount();
+	var rowCount = this._layoutY.getLaneCount();
+
+	this._cbLftIdx = _validateIndex(colIndex, colCount);
+	this._cbRgtIdx = _validateIndex(rgtIndex, colCount);
+	this._cbTopIdx = _validateIndex(rowIndex, rowCount);
+	this._cbBtmIdx = _validateIndex(btmIndex, rowCount);
+
+	this._updateCellBounds();
+};
+/** @public
+* @ignore
+* @return {!TrackLayout}
+*/
+VirtualizedLayoutGrid.prototype.getHorizontalLayout = function () {
+	return this._grid.getHorizontalLayout();
+};
+/** @public
+* @ignore
+* @param {number} lftIdx
+* @param {number} rgtIdx Inclusive index
+* @param {!Array.<number>} outPositions
+* @param {!Array.<boolean>} outNoBorders
+*/
+VirtualizedLayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositions, outNoBorders) {
+	this._grid.calculateColumnBounds(lftIdx, rgtIdx, outPositions, outNoBorders);
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._updateCellBounds = function () {
+	var cellBound = this._cellBound;
+	if(!cellBound) {
+		return;
+	}
+
+	var layoutX = this.getHorizontalLayout();
+	var layoutY = this._layoutY;
+	var lftIdx = this._cbLftIdx;
+	var rgtIdx = this._cbRgtIdx; // Exclusive
+	var topIdx = this._cbTopIdx;
+	var btmIdx = this._cbBtmIdx; // Exclusive
+	var lftPx, rgtPx, topPx, btmPx;
+	lftPx = rgtPx = topPx = btmPx = 0;
+	if(lftIdx < rgtIdx && topIdx < btmIdx) {
+		lftPx = layoutX.getLaneStart(lftIdx);
+		rgtPx = layoutX.getLaneEnd(rgtIdx - 1);
+		topPx = layoutY.getLaneStart(topIdx);
+		btmPx = layoutY.getLaneEnd(btmIdx - 1);
+	}
+
+	var width = rgtPx - lftPx;
+	var height = btmPx - topPx;
+	var noBorders = [false, false];
+	if(width > 0 && height > 0 && this._hscrollbar) {
+		var positions = [0, 0];
+		this.calculateColumnBounds(lftIdx, rgtIdx - 1, positions, noBorders);
+		lftPx = positions[0];
+		rgtPx = positions[1];
+		width = rgtPx - lftPx;
+	}
+
+	if(width > 0) {
+		cellBound.style.left = lftPx + "px";
+		cellBound.style.top = topPx + "px";
+		cellBound.style.width = width + "px";
+		cellBound.style.height = height + "px";
+
+		cellBound.classList.toggle("no-left-bound", noBorders[0]);
+		cellBound.classList.toggle("no-right-bound", noBorders[1]);
+
+		if(this._boundLayer) {
+			this._boundLayer.appendChild(cellBound);
+		}
+	} else {
+		var pn = cellBound.parentNode;
+		if(pn) {
+			pn.removeChild(cellBound);
+		}
+	}
+};
+/** @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
+*/
+VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
+	this._grid.updateColumnBounds(positions, noBorders);
+	this._updateRowBounds();
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._initBoundLayer = function () {
+	var boundLayer = this._boundLayer;
+	if(!boundLayer) {
+		boundLayer = this._boundLayer = document.createElement("div");
+		boundLayer.className = "cover-layer";
+		this._element.appendChild(boundLayer);
+	}
+};
+/** @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);
+	}
+};
+/** @private
+*/
+VirtualizedLayoutGrid.prototype._updateRowBounds = function () {
+	this._rowBoundTimer = 0;
+	this._updateCellBounds();
+
+	var rowBound = this._rowBound;
+	if(!rowBound) {
+		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;
+	}
+	if(topIdx >= 0) {
+		btmIdx = this.getLastSelectedRow();
+		if(btmIdx >= rowCount) {
+			btmIdx = rowCount - 1;
+		}
+		topPx = this._layoutY.getLaneStart(topIdx);
+		btmPx = this._layoutY.getLaneEnd(btmIdx);
+	}
+
+	if(topPx >= btmPx) {
+		var pn = rowBound.parentNode;
+		if(pn) {
+			pn.removeChild(rowBound);
+		}
+	} else {
+		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);
+
+		if(this._boundLayer) {
+			this._boundLayer.appendChild(rowBound);
+		}
+	}
+};
 //#endregion public methods
 
 //#region ====== Private methods ======//
@@ -873,10 +1166,9 @@ VirtualizedLayoutGrid.prototype._onRestingPosition = function () {
 };
 /** @public
 * @ignore
-* @param {boolean} absolutePos if true, the right space element will be positioned absolutely
 */
-VirtualizedLayoutGrid.prototype._updateRightSpaceStyle = function(absolutePos) {
-	this._grid._updateRightSpaceStyle(absolutePos);
+VirtualizedLayoutGrid.prototype._updateRightSpaceStyle = function() {
+	this._grid._updateRightSpaceStyle();
 };
 /** @public
 * @ignore

package/lib/core/es6/grid/components/Column.js

@@ -178,10 +178,16 @@ Column.prototype.show = function (opt_shown) {
 */
 Column.prototype.setWidth = function (val) {
 	this._element.style.width = val + "px";
-	var magnitude = (val > 0 && val <= 60) ? 3 - Math.floor((val - 0.01) / 20) : 0;
-	if(magnitude < 0 || magnitude > 3) {
+	var magnitude = 0;
+	if(val > 0 && val <= 24){
 		magnitude = 3;
 	}
+	else if(val > 24 && val <= 40){
+		magnitude = 2;
+	}
+	else if(val > 40 && val < 60){
+		magnitude = 1;
+	}
 
 	var i;
 	var sc = this._sizeClasses;

package/lib/core/es6/grid/components/HScrollbar.d.ts

@@ -8,6 +8,10 @@ declare class HScrollbar extends Scrollbar {
 
     public setScrollLeft(px: number): void;
 
+    public getPinnedLeftColumnCount(): number;
+
+    public getPinnedRightColumnCount(): number;
+
     public isEndOfHorizontalScroll(): boolean;
 
     public getContentWidth(): number;

package/lib/core/es6/grid/components/HScrollbar.js

@@ -26,6 +26,10 @@ var HScrollbar = function () {
 };
 Ext.inherits(HScrollbar, Scrollbar);
 
+/** @type {number}
+* @private
+*/
+HScrollbar.prototype._pinnedLeftColumnCount = 0;
 /** @type {number}
 * @private
 */
@@ -45,6 +49,7 @@ HScrollbar.prototype.setScrollContent = function (grid, sections, startColIndex,
 	var sectionCount = sections.length;
 	if(sectionCount <= 0) { return; }
 
+	this._pinnedLeftColumnCount = startColIndex >= 0 ? startColIndex : 0;
 	this._pinnedRightColumnCount = pinnedRightColumn > 0 ? pinnedRightColumn : 0;
 	var section = sections[0];
 	var colCount = section.getColumnCount();
@@ -62,8 +67,6 @@ HScrollbar.prototype.setScrollContent = function (grid, sections, startColIndex,
 		var paneElem = pane.getElement();
 		var sliderElem = paneSlider.getElement();
 
-		paneElem.classList.toggle("right-pinning", this._pinnedRightColumnCount ? true : false);
-
 		var c;
 		var column;
 		for (c = 0; c < startColIndex; ++c) {
@@ -91,10 +94,10 @@ HScrollbar.prototype.setScrollContent = function (grid, sections, startColIndex,
 				paneSlider.addContent(rs);
 				content.push(rs);
 			}
-			section._updateRightSpaceStyle(this.isActive() && !this._pinnedRightColumnCount);
+			section._updateRightSpaceStyle();
 		}
 		section._updateLayers(); // Order of the layers may be changed due to change in rightspace and/or column pinning
-		paneSlider._titleSection = section.getElement().classList.contains("title"); // To cache virtualized title section
+		paneSlider._titleSection = section.hasClass("title"); // To cache virtualized title section
 		paneSlider._columns = columns; // To cache virtualized columns
 		paneSlider._content = content; // To cache virtualized columns
 	}
@@ -125,6 +128,19 @@ HScrollbar.prototype.setScrollLeft = function (px) {
 	this._scrollTo(px); // "scroll" event may be fired
 };
 
+/** @public
+* @return {number}
+*/
+HScrollbar.prototype.getPinnedLeftColumnCount = function () {
+	return this.isEnabled() ? this._pinnedLeftColumnCount : 0;
+};
+/** @public
+* @return {number}
+*/
+HScrollbar.prototype.getPinnedRightColumnCount = function () {
+	return this.isEnabled() ? this._pinnedRightColumnCount : 0;
+};
+
 /** @public
 * @ignore
 * @param {number} val

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

@@ -36,7 +36,7 @@ declare class TrackLayout {
 
     public getTrackSize(): number;
 
-    public setTrackSize(targetSize: number, reserveSpace: number): (number)[]|null;
+    public setTrackSize(targetSize: number): (number)[]|null;
 
     public getLaneStart(index: number): number;
 

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

@@ -279,10 +279,9 @@ TrackLayout.prototype.getTrackSize = function () {
 * If all lanes are eqaul in size (even zero size), they all will be weighted equally
 * @public
 * @param {number} targetSize
-* @param {number} reserveSpace
 * @return {Array.<number>|null} Array of size adjustment. Return null if there is no change
 */
-TrackLayout.prototype.setTrackSize = function (targetSize, reserveSpace) {
+TrackLayout.prototype.setTrackSize = function (targetSize) {
 	var i = 0, fixedSize = 0;
 	var indices = [];
 	// Collecting current data for calculation
@@ -302,7 +301,7 @@ TrackLayout.prototype.setTrackSize = function (targetSize, reserveSpace) {
 	}
 	if (indices.length <= 0) { return null; }
 
-	var distributions = this._distributeLaneSize(targetSize - fixedSize - reserveSpace, indices);
+	var distributions = this._distributeLaneSize(targetSize - fixedSize, indices);
 
 	// Find any change to flexible lane size
 	var dirty = false;