@refinitiv-ui/efx-grid 6.0.2 → 6.0.5

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

@@ -1,615 +0,0 @@
-/* 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

@@ -1,28 +0,0 @@
-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 };