@refinitiv-ui/efx-grid 6.0.91 → 6.0.92

package/lib/column-dragging/es6/ColumnDragging.d.ts

@@ -2,7 +2,7 @@ import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { cloneObject } from "../../tr-grid-util/es6/Util.js";
+import { cloneObject, deepEqual, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 
 declare namespace ColumnDraggingPlugin {

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

@@ -2,7 +2,7 @@ import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { cloneObject } from "../../tr-grid-util/es6/Util.js";
+import { cloneObject, deepEqual, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 
 /** @typedef {Object} ColumnDraggingPlugin~Options
@@ -264,10 +264,40 @@ ColumnDraggingPlugin.prototype.unload = function (host) {
 /** @private
 */
 ColumnDraggingPlugin.prototype._onThemeLoaded = function() {
-	var colors = ElfUtil.getColors();
+	if(!ColumnDraggingPlugin._styles) {
+		let styles = [
+			".multi-column-drag-indicator .section.title .cover-layer .column-bound.selection-bound ", [
+				"border-top: var(--grid-drag-indicator);",
+				"border-right: var(--grid-drag-indicator);",
+				"border-left: var(--grid-drag-indicator);"
+			],
+			".multi-column-drag-indicator .sections .cover-layer .column-bound.selection-bound ", [
+				"border-right: var(--grid-drag-indicator);",
+				"border-left: var(--grid-drag-indicator);",
+				"border-bottom: var(--grid-drag-indicator);"
+			]
+		];
+		ColumnDraggingPlugin._styles = prettifyCss(styles);
+	}
+
+	let colors = ElfUtil.getColors();
 	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
-	for(var i = this._hosts.length; --i >= 0;) {
-		DragUI.applyThemeColor(this._hosts[i]);
+	for(let i = this._hosts.length; --i >= 0;) {
+		let host = this._hosts[i];
+		ColumnDraggingPlugin._applyThemeColor(host);
+		DragUI.applyThemeColor(host);
+	}
+};
+/** @private
+* @param {Object} grid core grid instance
+*/
+ColumnDraggingPlugin._applyThemeColor = function(grid) {
+	if(!grid || grid._columnDraggingStyles) {
+		return;
+	}
+	if(ColumnDraggingPlugin._styles) {
+		grid._columnDraggingStyles = true; // Prevent loading the same style twice
+		injectCss(ColumnDraggingPlugin._styles, grid.getParent());
 	}
 };
 
@@ -500,6 +530,38 @@ ColumnDraggingPlugin.prototype._onMouseUp = function (e) {
 	}
 };
 
+/** @private
+* @return {number} 0 does not allow dragging, 1 allows single dragging, and 2 allows multiple dragging.
+*/
+ColumnDraggingPlugin.prototype._getDraggingStyle = function() {
+	let colSelExt = this._getPlugin("ColumnSelectionPlugin");
+	let cgp = this._getPlugin("ColumnGroupingPlugin");
+	if(!cgp) {
+		return 1;
+	}
+	let selectedCols = colSelExt.getSelectedColumns();
+	let dragOutSel = selectedCols.indexOf(this._startColumn) === -1;
+	if(dragOutSel) { // no column grouping, allow to drag
+		return 1;
+	}
+	let selectedColCount = selectedCols.length;
+	if(selectedColCount > 1) { // Multiple column drag
+		let currentGroup, prevGroup;
+		for (let i = 0; i < selectedColCount; i++) {
+			let colIndex = selectedCols[i];
+			currentGroup = cgp.getGroupIds(colIndex) || []; // empty array is root group
+			if(prevGroup && !deepEqual(currentGroup, prevGroup)) {
+				if(cgp.getMutualGroupId(selectedCols)) { // Dragging a group inside another group is permitted only when the group being dragged is the same parent group
+					return 2;
+				}
+				return 0; // Drag with difference group is not allowed
+			} // else {} // Drag with same group is allowed
+			prevGroup = currentGroup;
+		}
+	}
+	return 2;
+};
+
 /** @private
 * @param {*} e
 */
@@ -509,7 +571,12 @@ ColumnDraggingPlugin.prototype._onDragStart = function (e) {
 		this._dispatch("dragStart", this._pos);
 	}
 
-	if (this._pos["cancel"]) {
+	if (this._pos["cancel"]) { // user cancel drag start
+		return;
+	}
+
+	let dragStyles = this._getDraggingStyle();
+	if (!dragStyles) { // not allow to drag
 		return;
 	}
 
@@ -557,7 +624,11 @@ ColumnDraggingPlugin.prototype._onDragStart = function (e) {
 		};
 		this._dragBoxRenderer(arg);
 	}
-	this._dimCol(true);
+	if(dragStyles > 1 ) {
+		gridElem.parentNode.classList.add("multi-column-drag-indicator");
+	} else if(dragStyles === 1) {
+		this._dimCol(true); // Single drag
+	} // else {} // no need to handled drag 0 column
 	this._renderGuideline();
 
 	// For step scrolling // TODO: Merge this logic with DraggableContentPlugin
@@ -621,6 +692,7 @@ ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
 		pn.removeChild(this._dragBox);
 	}
 	this._clickedGrid.getElement().parentNode.classList.remove("mouse-dragging"); // retain mouse cursor
+	this._clickedGrid.getElement().parentNode.classList.remove("multi-column-drag-indicator");
 
 	window.removeEventListener("mousemove", this._onDrag, false);
 	window.removeEventListener("mouseup", this._onDragEnd, true);
@@ -668,41 +740,24 @@ ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
 
 	if (!operationCancelled) {
 		if (!this._noColumnMoving) {
-			var cgp = this._getPlugin("ColumnGroupingPlugin");
-			var csp = this._getPlugin("ColumnStackPlugin");
-			var destIndex = this._destColumn;
-			var groupId, stackId;
-
+			let colSelExt = this._getPlugin("ColumnSelectionPlugin");
+			let selectedCols;
+			if(colSelExt) {
+				selectedCols = colSelExt.getSelectedColumns();
+			}
+			if(!colSelExt || !selectedCols.length || selectedCols.indexOf(this._startColumn) === -1) {
+				// No selected column or move column outside selected column, tried to move only _startColumn
+				selectedCols = [this._startColumn];
+			}
+			let destIndex = this._destColumn;
 			// Move operation always move to the left of destination column
 			// When moving forward, destnation need to added by 1 to move correctly
 			if (this._startColumn < this._destColumn) {
 				destIndex = this._destColumn + 1;
 			}
 
-			// TODO: support multi column dragging
-			if(csp) {
-				stackId = csp.getStackId(this._startColumn);
-			}
-			if(cgp){
-				var cellInfo = cgp.getCellInfo(this._startPos);
-				groupId = cellInfo["groupId"] || cellInfo["columnId"];
-			}
+			this._moveColumns(selectedCols, destIndex);
 
-			if(stackId && this._startColumn === this._endColumn){
-				csp.moveStack(stackId, destIndex);
-			} else if(groupId) {
-				cgp.moveGroup(groupId, destIndex);
-			} else {
-				var colList = [];
-				var i;
-				for(i = this._startColumn; i <= this._endColumn; i++){
-					colList.push(i);
-				}
-				for(i = this._hosts.length; --i >= 0;) {
-					var host = this._hosts[i];
-					host.reorderColumns(colList, destIndex);
-				}
-			}
 		}
 
 		if (this.hasListener("columnMoved")) {
@@ -719,6 +774,61 @@ ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
 	this._clearCache();
 };
 
+/** @private
+* @param {Array<number>} srcColIndices
+* @param {number} destColumnIndex
+*/
+ColumnDraggingPlugin.prototype._moveColumns = function (srcColIndices, destColumnIndex) {
+	let srcCount = srcColIndices.length;
+	let colList = [];
+	let csp = this._getPlugin("ColumnStackPlugin");
+	let stackId, groupId;
+	if(srcCount === 1) {
+		if(csp) {
+			stackId = csp.getStackId(this._startColumn);
+		}
+		let cgp = this._getPlugin("ColumnGroupingPlugin");
+		if(cgp){
+			var cellInfo = cgp.getCellInfo(this._startPos);
+			groupId = cellInfo["groupId"] || cellInfo["columnId"];
+		}
+
+		if(stackId && this._startColumn === this._endColumn){
+			csp.moveStack(stackId, destColumnIndex);
+		} else if(groupId) {
+			cgp.moveGroup(groupId, destColumnIndex);
+		} else {
+			for(let 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++) {
+			let srcIdx = srcColIndices[i];
+			let srcId = this.getColumnId(srcIdx);
+
+			if(csp) {
+				stackId = csp.getStackId(srcIdx);
+			}
+			if(stackId && !stacking[stackId]) {
+				stacking[stackId] = true; // optimize column same stack
+				let stackMemberIds = csp.getStackMemberIds(stackId);
+				for (let j = 0; j < stackMemberIds.length; j++) {
+					let colId = stackMemberIds[j];
+					colList.push(colId);
+				}
+			} else {
+				colList.push(srcId); // Normal case
+			}
+		}
+	}
+	for(let i = this._hosts.length; --i >= 0;) {
+		var host = this._hosts[i];
+		host.reorderColumns(colList, destColumnIndex);
+	}
+};
+
 /** @private
 */
 ColumnDraggingPlugin.prototype._onDragPulse = function() {