@refinitiv-ui/efx-grid 6.0.0-next.0

package/lib/core/es6/grid/plugins/DragAndDropTitlePlugin.js

@@ -0,0 +1,615 @@
+/* eslint-disable */
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import Plugin from "./Plugin.js";
+import ILayoutGrid from "../ILayoutGrid.js";
+import Util from "../util/util.js";
+import Core from "../Core.js";
+/* eslint-enable */
+
+/** Event
+* @event DragAndDropTitlePlugin#dragged
+* @type {MouseEvent}
+* @property {*} * Depends on the browser's mouse event arguments
+*/
+/** Event
+* @event DragAndDropTitlePlugin#columnMoved
+* @property {number} startColumnIndex
+* @property {number} destColumnIndex
+*/
+
+/** @constructor
+ * @extends {Plugin}
+ */
+var DragAndDropTitlePlugin = function () {
+	var _t = this;
+
+	_t._onColumnAdded = _t._onColumnAdded.bind(_t);
+	_t._onColumnMoved = _t._onColumnMoved.bind(_t);
+	_t._onColumnRemoved = _t._onColumnRemoved.bind(_t);
+
+	_t._onMouseUp = _t._onMouseUp.bind(_t);
+	_t._onMouseDown = _t._onMouseDown.bind(_t);
+
+	_t._onDrag = _t._onDrag.bind(_t);
+	_t._onDragStart = _t._onDragStart.bind(_t);
+	_t._onDragEnd = _t._onDragEnd.bind(_t);
+	_t._onDragPulse = _t._onDragPulse.bind(_t);
+
+	_t._hosts = [];
+
+	_t._guideline = document.createElement("svg");
+	_t._guideline.className = "tr-guideline";
+	_t._dragbox = document.createElement("svg");
+	_t._dragbox.className = "tr-dragbox";
+
+	_t._addEvent("dragged"); // drag
+	_t._addEvent("dragStart");
+	_t._addEvent("dragInterval");
+	_t._addEvent("preColumnMoved");
+	_t._addEvent("columnMoved");
+
+};
+Ext.inherits(DragAndDropTitlePlugin, Plugin);
+
+
+/** @private
+* @type {Core}
+*/
+DragAndDropTitlePlugin.prototype._clickedGrid;
+/** @private
+* @type {ILayoutGrid}
+*/
+DragAndDropTitlePlugin.prototype._clickedSection = null;
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._clickedRow = -1;
+/** @private
+* @type {!Element}
+*/
+DragAndDropTitlePlugin.prototype._guideline;
+/** @private
+* @type {!Element}
+*/
+DragAndDropTitlePlugin.prototype._dragbox;
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._timerId = 0;
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._dragPulseId = 0;
+/** @private
+* @type {Object}
+*/
+DragAndDropTitlePlugin.prototype._pos = null; // Cache of current mouse position
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._cacheLeft = 0;
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._cacheWidth = 0;
+
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._startColumn = -1;
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._endColumn = -1;
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._destColumn = -1;
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._leftMovableBorder = -1;
+/** @private
+* @type {number}
+*/
+DragAndDropTitlePlugin.prototype._rightMovableBorder = -1;
+/** @private
+* @type {boolean}
+*/
+DragAndDropTitlePlugin.prototype._isDragging = false;
+/** @private
+* @type {boolean}
+*/
+DragAndDropTitlePlugin.prototype._lockFrozen = false;
+/** @private
+* @type {boolean}
+*/
+DragAndDropTitlePlugin.prototype._disabled = false;
+/** @private
+* @type {boolean}
+*/
+DragAndDropTitlePlugin.prototype._noColumnMoving = false;
+/** @private
+* @type {boolean}
+*/
+DragAndDropTitlePlugin.prototype._noDragBox = false;
+
+
+/** @override */
+DragAndDropTitlePlugin.prototype.getName = function () {
+	return "DragAndDropTitlePlugin"; // Read Only
+};
+/** @override */
+DragAndDropTitlePlugin.prototype.initialize = function (host) {
+	if(this._hosts.indexOf(host) >= 0) { return; }
+
+	this._hosts.push(host);
+	host.listen("mousedown", this._onMouseDown);
+	host.listen("columnAdded", this._onColumnAdded);
+	host.listen("columnMoved", this._onColumnMoved);
+	host.listen("columnRemoved", this._onColumnRemoved);
+
+	host.listen("dragstart", Util._preventDefault);
+};
+
+/** @override */
+DragAndDropTitlePlugin.prototype.unload = function (host) {
+	var at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+
+	this._hosts.splice(at, 1);
+	host.unlisten("mousedown", this._onMouseDown);
+	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("columnMoved", this._onColumnMoved);
+	host.unlisten("columnRemoved", this._onColumnRemoved);
+};
+
+/** Specify column to be processed by this plugin
+* @public
+* @return {null}
+*/
+DragAndDropTitlePlugin.prototype.getMarker = function () {
+	return null;
+};
+
+/**
+* Lock moving of frozen column. If true is spsecified, dragging is disabled for frozen column.
+* @public
+* @param {boolean} lock
+*/
+DragAndDropTitlePlugin.prototype.lockFrozenColumn = function(lock) {
+	this._lockFrozen = lock;
+};
+
+/** Disable this plugin entirely
+* @public
+* @param {boolean=} opt_disabled
+*/
+DragAndDropTitlePlugin.prototype.disable = function(opt_disabled) {
+	this._disabled = opt_disabled !== false;
+};
+/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
+* @public
+* @param {boolean=} opt_disabled
+*/
+DragAndDropTitlePlugin.prototype.disableMoving = function(opt_disabled) {
+	this._noColumnMoving = opt_disabled !== false;
+};
+/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
+* @public
+* @param {boolean=} opt_disabled
+*/
+DragAndDropTitlePlugin.prototype.disableDragBox = function(opt_disabled) {
+	this._noDragBox = opt_disabled !== false;
+};
+
+/** @private
+* @param {number} colIndex
+* @return {boolean}
+*/
+DragAndDropTitlePlugin.prototype._isAllowed = function(colIndex) {
+	var host = this._clickedGrid || this._hosts[0];
+	if (host) {
+		var stationaryIndex = host.getStationaryColumnIndex();
+		if (stationaryIndex < 0) {
+			return true;
+		}
+		if (colIndex <= stationaryIndex) {
+			return false;
+		}
+	}
+	return true;
+};
+/** @private
+* @param {Event} e
+*/
+DragAndDropTitlePlugin.prototype._onMouseDown = function (e) {
+	if(this._disabled) {
+		return;
+	}
+	if(e.shiftKey || e.ctrlKey || e.altKey) {
+		return; // Ignore mousedown event, if modifier key is detected
+	}
+	if(e.button) {
+		return; // We don't allow drag with middle click (button == 1), or right click (button == 2)
+	}
+	if(this._timerId) {
+		return; // Drag timer is already start
+	}
+
+	var host = this.getRelativeGrid(e);
+	if(!host) {
+		return; // Given event should be within grid element
+	}
+
+	this._pos = host.getRelativePosition(e);
+	if (this._pos["hit"] === false) {
+		return; // Only start dragging when mouse is down on the grid
+	}
+
+	var section = /** @type{ILayoutGrid} */(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"];
+	if(!this._isAllowed(colIndex)) {
+		return; // The column cannot be dragged
+	}
+	if(this._lockFrozen && host.isPinnedColumn(colIndex)) {
+		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);
+
+	this._clickedGrid = host;
+	this._clickedSection = section;
+	this._clickedRow = rowIndex;
+
+	this._startColumn = movingColumns["left"];
+	this._endColumn = movingColumns["right"];
+	this._leftMovableBorder = movableBorder["left"];
+	this._rightMovableBorder = movableBorder["right"];
+	this._destColumn = this._startColumn;
+
+	this._timerId = setTimeout(this._onDragStart, 300);
+	window.addEventListener("mouseup", this._onMouseUp, false);
+};
+/** @private
+* @param {Object} e
+*/
+DragAndDropTitlePlugin.prototype._onMouseUp = function (e) {
+	if(this._timerId) {
+		window.clearTimeout(this._timerId);
+		window.removeEventListener("mouseup", this._onMouseUp, false);
+		this._timerId = 0;
+		this._clearCache();
+	}
+};
+
+/** @private
+*/
+DragAndDropTitlePlugin.prototype._onDragStart = function () {
+	if(this._disabled || this._isDragging) { return; }
+
+	if (this._hasListener("dragStart")) {
+		this._dispatch("dragStart", /** @type{!Object} */(this._pos));
+	}
+
+	if (this._pos["cancel"]) {
+		return;
+	}
+
+	this._timerId = 0;
+	window.removeEventListener("mouseup", this._onMouseUp, false);
+
+	if(!this._clickedGrid) {
+		return;
+	}
+
+	this._isDragging = true;
+	document.body.classList.add("tr-dragging"); // Prevent text selection
+	// document.body.classList.add("tr-move-cursor");
+
+	window.addEventListener("mousemove", this._onDrag, false);
+	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();
+
+	var gridElem = host.getElement();
+	this._guideline.style.top = (clickedCellBound.top - sectionBound.top) + "px";
+	this._guideline.style.height = (height - 1) + "px";
+	this._dragbox.style.height = (height - 33) + "px"; // WARNING: Height could be long
+	this._dragbox.style.width = this._clickedSection.getColumnWidth(this._startColumn) + "px";
+
+	 // TODO: guideline and drag box should be outside of grid area
+	gridElem.appendChild(this._guideline);
+
+	this._dimCol(true);
+	this._renderGuideline();
+
+	// For step scrolling // TODO: Merge this logic with DraggableContentPlugin
+	this._scrollStep = Math.floor(host.getScrollWidth() / 25); // Update the scrollbar first
+	if(this._scrollStep < 40) {
+		this._scrollStep = 40;
+	} else if(this._scrollStep > 400) {
+		this._scrollStep = 400;
+	}
+	var scrollbar = host.getHScrollbar();
+	this._cacheLeft = scrollbar.getLeft() + 20;
+	this._cacheWidth = scrollbar.getLeft() + scrollbar.getWidth() - 20;
+
+	this._dragPulseId = window.setInterval(this._onDragPulse, 150); // Start pulse
+};
+/** @private
+* @param {Event} e
+*/
+DragAndDropTitlePlugin.prototype._onDrag = function (e) {
+	if(!this._isDragging) { return; }
+
+	Util._preventDefault(e);
+	this._pos = this._clickedGrid.getRelativePosition(e); // Relative to the clicked grid
+
+	var	host = this.getRelativeGrid(e);
+	if (!host || host !== this._clickedGrid) { return; }
+
+	var colIndex = this._pos["colIndex"];
+	if ((colIndex >= this._leftMovableBorder) &&
+		(colIndex <= this._rightMovableBorder) &&
+		this._isAllowed(colIndex) &&
+		!(this._lockFrozen && host.isPinnedColumn(colIndex))) {
+		this._renderGuideline();
+		this._dispatch("dragged", /** @type{!Object} */(e));
+	}
+	this._renderDragBox(e);
+};
+/** @private
+* @param {Event} e
+*/
+DragAndDropTitlePlugin.prototype._onDragEnd = function (e) {
+	if(!this._isDragging) {
+		return;
+	}
+
+	this._isDragging = false;
+	document.body.classList.remove("tr-dragging");
+	// document.body.classList.remove("tr-move-cursor");
+	this._dimCol(false);
+
+	var pn = this._guideline.parentNode;
+	if(pn) {
+		pn.removeChild(this._guideline);
+	}
+
+	pn = this._dragbox.parentNode;
+	if(pn) {
+		pn.removeChild(this._dragbox);
+	}
+
+	window.removeEventListener("mousemove", this._onDrag, false);
+	window.removeEventListener("mouseup", this._onDragEnd, true);
+
+	if(this._dragPulseId) {
+		window.clearInterval(this._dragPulseId);
+		this._dragPulseId = 0;
+	}
+	this._pos = null;
+
+	Util._preventDefault(e);
+
+	//When move to the right, the first position is the current one.
+	if (this._destColumn > this._startColumn) {
+		--this._destColumn;
+	}
+	//Cancel moving if the destination column is the current column or not allowed column
+	if ((!this._destColumn && this._destColumn !== 0) || // undefined, NaN, null
+		this._destColumn < 0 ||
+		!this._isAllowed(this._destColumn) ||
+		(this._destColumn >= this._startColumn && this._destColumn <= this._endColumn)) {
+		this._clearCache();
+		return;
+	}
+
+	var arg = {
+		"startColumnIndex": this._startColumn,
+		"destColumnIndex": this._destColumn
+	};
+
+	if (this._hasListener("preColumnMoved")) {
+		this._dispatch("preColumnMoved", arg);
+	}
+
+	if (arg["cancel"]) {
+		return;
+	}
+
+	if (!this._noColumnMoving) {
+		var shiftStart = -1;
+		var shiftEnd = -1;
+		var moveSize = -1;
+		if (this._startColumn > this._destColumn) { //Move backward
+			shiftStart = this._destColumn;
+			shiftEnd = this._startColumn - 1;
+			moveSize = -1 * (this._startColumn - this._destColumn); //Move to the left
+		} else
+		if (this._startColumn < this._destColumn) { //Move foward
+			shiftStart = this._endColumn + 1;
+			shiftEnd = this._destColumn;
+			moveSize = ((shiftEnd - shiftStart) + 1); //Move to the right
+		}
+
+		//Perform moving all columns in the range
+		for(var j = this._hosts.length; --j >= 0;) {
+			var host = this._hosts[j];
+			var i;
+			if (moveSize > 0) { //Move forward
+				for (i = this._startColumn; i <= this._endColumn; i++) {
+					host.moveColumn(this._startColumn, this._destColumn);
+				}
+			} else { //Move backward
+				for (i = this._startColumn; i <= this._endColumn; i++) {
+					host.moveColumn(this._startColumn + (i - this._startColumn), this._destColumn + (i - this._startColumn));
+				}
+			}
+		}
+	}
+
+	if (this._hasListener("columnMoved")) {
+		this._dispatch("columnMoved", {
+			"startColumnIndex": this._startColumn,
+			"endColumnIndex": this._endColumn,
+			"destColumnIndex": this._destColumn,
+			"clickedRow": this._clickedRow
+		});
+	}
+	this._clearCache();
+};
+
+/** @private
+*/
+DragAndDropTitlePlugin.prototype._onDragPulse = function() {
+	if(!this._isDragging || !this._pos) { return; }
+
+	this._dispatch("dragInterval", /** @type{!Object} */(this._pos));
+
+	var host = this._clickedGrid;
+	if(!host || !host.getHScrollbar().isActive()) { return; }
+
+	var x = this._pos["x"];
+	var scrollVal = 0;
+	if(x < this._cacheLeft) {
+		scrollVal = -Math.floor(this._scrollStep * (0.8 + Math.random()));
+
+	} else if(x > this._cacheWidth) {
+		scrollVal = Math.floor(this._scrollStep * (0.8 + Math.random()));
+	}
+
+	this._scrollRight(scrollVal);
+};
+/** @private
+*/
+DragAndDropTitlePlugin.prototype._clearCache = function() {
+	this._startColumn = this._endColumn = this._destColumn = -1;
+
+	this._leftMovableBorder = this._rightMovableBorder = -1;
+
+	this._clickedRow = -1;
+	this._clickedSection = this._clickedGrid = null;
+};
+
+/** @private
+* @param {number} colIndex
+* @param {number} row
+* @param {ILayoutGrid} section
+* @return {!Object}
+*/
+DragAndDropTitlePlugin.prototype._getSpan = function(colIndex, row, section) {
+	var 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
+		cellSpan = section.getCellColSpan(colIndex, row);
+	}
+
+	return { "left": colIndex, "right": (colIndex + cellSpan - 1) };
+};
+/** @private
+* @param {number} col
+* @param {number} row
+* @param {ILayoutGrid} section
+* @return {!Object}
+*/
+DragAndDropTitlePlugin.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);
+	if (span["right"] >= span["left"]) {
+		return span;
+	} else {
+		return this._findMoveableBorder(col, row - 1, section);
+	}
+};
+/**
+* @private
+*/
+DragAndDropTitlePlugin.prototype._renderGuideline = function() {
+	var 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) {
+		colWidth += this._clickedGrid.getColumnWidth(i);
+	}
+
+	var rightHand = this._pos["x"] > colLeft + colWidth / 2;
+	var destColumn = (rightHand) ? colEnd + 1 : colStart;
+
+	colLeft = this._clickedGrid.getColumnLeft(this._destColumn);
+	// If destination exceeds the specified bounds
+	if (destColumn < this._leftMovableBorder) {
+		destColumn = this._leftMovableBorder;
+	} else if (destColumn > this._rightMovableBorder) {
+		destColumn = this._rightMovableBorder + 1;
+		if(rightHand) {
+			colLeft -= 4; // Shift guideline to the left if this is the rightmost column
+		}
+	}
+
+	this._destColumn = destColumn;
+	this._guideline.style.left = colLeft + "px";
+};
+/** @private
+* @param {!Element|Event|MouseEvent} e
+*/
+DragAndDropTitlePlugin.prototype._renderDragBox = function(e) {
+	if(this._noDragBox) {
+		return;
+	}
+
+	var gridElem = this._clickedGrid.getElement();
+	var pn = this._dragbox.parentNode;
+	if(!pn) {
+		gridElem.appendChild(this._dragbox);
+	}
+
+	var gridRect = gridElem.getBoundingClientRect();
+	var zoomFactor = this._clickedGrid["zoomFactor"]; // TODO: Remove zoom factor
+	var contentWidth = gridRect.width;
+
+	var x = e.clientX - gridRect.left;
+	var y = ((e.pageY - gridRect.top) / zoomFactor) - window.scrollY;
+	var midFactor = parseFloat((x / contentWidth).toFixed(2));
+	var dragboxLeft = (gridRect.width * midFactor) / zoomFactor - this._dragbox.offsetWidth * midFactor;
+
+	this._dragbox.style.left = dragboxLeft + "px";
+	this._dragbox.style.top = (y + 10)  + "px";
+};
+
+/**
+* @private
+* @param {boolean} inOut
+*/
+DragAndDropTitlePlugin.prototype._dimCol = function(inOut) {
+	for (var i = this._startColumn; i <= this._endColumn; i++) {
+		this._clickedGrid.enableColumnClass(i, "drag-fadeout", inOut);
+	}
+};
+
+DragAndDropTitlePlugin._proto = DragAndDropTitlePlugin.prototype;
+
+export default DragAndDropTitlePlugin;
+export { DragAndDropTitlePlugin };

package/lib/core/es6/grid/plugins/Plugin.d.ts

@@ -0,0 +1,28 @@
+import Ext from "../../../../tr-grid-util/es6/Ext.js";
+import Util from "../util/util.js";
+import Core from "../Core.js"; // eslint-disable-line
+import EventDispatcher from "../event/EventDispatcher.js";
+import ElementWrapper from "../components/ElementWrapper.js"; // eslint-disable-line
+
+declare class Plugin extends EventDispatcher {
+
+    constructor();
+
+    public getName(): string;
+
+    public initialize(owner: Core): void;
+
+    public unload(owner: Core): void;
+
+    public getRelativeGrid(e: Event|Element|ElementWrapper): Core;
+
+    public getGridElementFromPoint(x: number, y: number): Element;
+
+}
+
+declare function gridAPI(x: number, y: number): Element;
+
+declare function to(e: any): void;
+
+export default Plugin;
+export { Plugin };