@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/tr-grid-cell-selection/es6/CellSelection.js

@@ -0,0 +1,1695 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { MouseDownTrait } from "../../tr-grid-util/es6/MouseDownTrait.js";
+import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
+import { cloneObject, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+
+/** @typedef {Object} CellSelectionPlugin~Options
+* @description The options can be specified by `cellSelection` property of the main grid's options
+* @property {string=} mode="cell" Available options are cell, row, and column
+* @property {boolean=} multipleSelection=true If disabled, only single cell can be selected at time
+* @property {boolean=} autoDeselecting=true If disabled, the cell selection will be kept after the focus on the grid element is lost
+* @property {boolean=} tabToSelect=false If enabled, the selection can be moved when user press tab key during the time grid is in focus
+* @property {Function=} selectionChanged=null Event handler
+* @property {Function=} copy=null Event handler
+* @property {Function=} beforeMouseDown=null Event handler
+* @property {Array=} selectableSections=["content"] Use to set which section can be selected, if not specific then only content section can select
+* @property {boolean=} copyDisabled=false If enabled, there will be no dafault content copying by the extension
+*/
+
+/** @event CellSelectionPlugin#selectionChanged
+* @description Happens after mouse up event.
+*/
+
+/** @event CellSelectionPlugin#copy
+* @description Happens when Copy is triggered (e.g. Ctrl + C, or selecting copy from context menu).
+* @property {Object} grid Core grid instance
+* @property {boolean=} cancel This property can be set to true to cancel the operation
+* @property {string=} data The data to be copied to system clipboard
+* @property {string=} format="text/plain" The format of the data
+* @example
+* copy: function(e) {
+*   e.cancel = true; // To cancel the operation
+* }
+*/
+
+/** @event CellSelectionPlugin#beforeMouseDown
+* @description Happens when mouse is down.
+* @type {Object}
+* @property {boolean=} cancel This property can be set to true to cancel the operation
+*/
+
+/** @constructor
+* @param {Object=} options
+* @extends {GridPlugin}
+*/
+let CellSelectionPlugin = function (options) {
+	this._unselectables = {
+		title: true,
+		header: true,
+		content: false
+	};
+
+	this._hosts = [];
+	this._map = [];
+	this._curRect = {};
+	this._curRect.left = 0;
+	this._curRect.right = 0;
+	this._curRect.top = 0;
+	this._curRect.bottom = 0;
+
+	this._onMouseMove = this._onMouseMove.bind(this);
+	this._onMouseUp = this._onMouseUp.bind(this);
+	this._onMouseDown = this._onMouseDown.bind(this);
+	this._onBlur = this._onBlur.bind(this);
+	this._onCopy = this._onCopy.bind(this);
+	this._onKeyDown = this._onKeyDown.bind(this);
+	this._onPostSectionDataBinding = this._onPostSectionDataBinding.bind(this);
+	this._onColumnMoved = this._onColumnMoved.bind(this);
+
+	if(options) {
+		this.config({ "cellSelection": options });
+	}
+};
+
+Ext.inherits(CellSelectionPlugin, GridPlugin);
+
+/** @type {string}
+* @private
+*/
+CellSelectionPlugin._styles = prettifyCss([
+	":host .tr-grid .cell.selection", [
+		"background-image: none;",
+		"background-color: var(--grid-selection-bgcolor);"
+	]
+]);
+
+/** @private
+* @param {Object} grid core grid instance
+*/
+CellSelectionPlugin._applyStyles = function(grid) {
+	if(!grid || grid._cellSelectionStyles || !ElfUtil.isHaloTheme()) {
+		return;
+	}
+	grid._cellSelectionStyles = true; // Prevent loading the same style twice
+	injectCss(CellSelectionPlugin._styles, grid.getElement());
+};
+
+/** Current anchor position that mouse down.
+* @type {Object}
+* @private
+*/
+CellSelectionPlugin.prototype._anchor = null;
+
+/** Current mouse position.
+* @type {Object}
+* @private
+*/
+CellSelectionPlugin.prototype._curMouse = null;
+
+/** Current rectangle of cell selected.
+* @type {!Object}
+* @private
+*/
+CellSelectionPlugin.prototype._curRect;
+
+/** @type {!Array.<Object>}
+* @private
+*/
+CellSelectionPlugin.prototype._map;
+
+/** @type {boolean}
+* @private
+*/
+CellSelectionPlugin.prototype._hasCellSpan = false;
+
+/** mode of selection, column, cell, row.
+* @type {string}
+* @private
+*/
+CellSelectionPlugin.prototype._mode = "cell";
+
+/** Define which section can't select.
+* @type {!Object}
+* @private
+*/
+CellSelectionPlugin.prototype._unselectables;
+
+/** @type {Object}
+* @private
+*/
+CellSelectionPlugin.prototype._lastSelection = null;
+
+/** If disabled, the cell selection will be kept after the focus on the grid element is lost
+* @type {boolean}
+* @private
+*/
+CellSelectionPlugin.prototype._autoDeselecting = true;
+/** Turn on/off cell selection.
+* @type {boolean}
+* @private
+*/
+CellSelectionPlugin.prototype._disabled = false;
+/** @type {boolean}
+* @private
+*/
+CellSelectionPlugin.prototype._copyDisabled = false;
+
+/** Trait Mouse Down
+* @type {MouseDownTrait}
+* @private
+*/
+CellSelectionPlugin.prototype._mouseTrait = null;
+/** Allow user to select multiple cell.
+* @type {boolean}
+* @private
+*/
+CellSelectionPlugin.prototype._allowMultipleSelection = true;
+/** Allow user tab to select next/previous cell
+* @type {boolean}
+* @private
+*/
+CellSelectionPlugin.prototype._tabToSelect = false;
+/** Mapping of unclickable element tag
+* @type {Object}
+* @private
+*/
+CellSelectionPlugin.prototype._unclickableMapping = {
+	"A": 1,
+	"INPUT": 1,
+	"BUTTON": 1,
+	"SELECT": 1,
+	"CHECKBOX": 1,
+	"EF-DATETIME-PICKER": 1,
+	"EF-MULTI-SELECT": 1
+};
+
+/** Indicates direction vectors of mouse
+* @type {Object}
+* @private
+*/
+CellSelectionPlugin.prototype._dirVectors = null;
+
+/** Flag to tell if mouse out of Grid
+* @type {Object}
+* @private
+*/
+CellSelectionPlugin.prototype._mouseOutOfGrid = false;
+
+/** Hold timeout ID of scroll update interval function
+* @type {number}
+* @private
+*/
+CellSelectionPlugin.prototype._scrollingTimer = null;
+
+/** Default scroll speed
+* @type {number}
+* @private
+*/
+CellSelectionPlugin.prototype._scrollSpeed = 500;
+
+/** Previous rectangle of cell selected.
+* @type {!Object}
+* @private
+*/
+CellSelectionPlugin.prototype._prevRect = {};
+/** can mouse draggable
+* @type {boolean}
+* @private
+*/
+CellSelectionPlugin.prototype._dragging = false;
+/** @override
+* @return {string}
+*/
+CellSelectionPlugin.prototype.getName = function () {
+	return "CellSelectionPlugin";
+};
+
+/** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
+* @override
+* @public
+* @return {boolean}
+*/
+CellSelectionPlugin.prototype.hasMultiTableSupport = function() {
+	return true;
+};
+
+/** Called by Grid plugin's initialization
+* @override
+*/
+CellSelectionPlugin.prototype.initialize = function (host, options) {
+	if(this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	// Set dragable event
+	this._mouseTrait = new MouseDownTrait(host.getElement());
+	this._mouseTrait.addEventListener("mouseDown", this._onMouseDown);
+	this._mouseTrait.addEventListener("mouseUp", this._onMouseUp);
+	this._mouseTrait.addEventListener("mouseMove", this._onMouseMove);
+
+	host.listen("focusout", this._onBlur);
+	host.listen("copy", this._onCopy);
+	host.listen("keydown", this._onKeyDown); // WARNING: all hosts have keydown listener
+
+	host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
+	host.listen("columnMoved", this._onColumnMoved);
+
+	host.enableClass("no-text-select", true);
+
+	if(this._hosts.length === 1) {
+		this.config(options);
+	}
+
+	CellSelectionPlugin._applyStyles(host);
+};
+
+/** Prevent memory leak, when we leave witout unlisten.
+* @override
+*/
+CellSelectionPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if(at < 0) {
+		return;
+	}
+
+	this._mouseTrait.removeEventListener("mouseDown", this._onMouseDown);
+	this._mouseTrait.removeEventListener("mouseMove", this._onMouseMove);
+	this._mouseTrait.removeEventListener("mouseUp", this._onMouseUp);
+
+	host.unlisten("copy", this._onCopy);
+	host.unlisten("focusout", this._onBlur);
+	host.unlisten("keydown", this._onKeyDown);
+
+	host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
+	host.unlisten("columnMoved", this._onColumnMoved);
+
+	// Reset cell-selection behavior.
+	this.deselectAll();
+	host.enableClass("no-text-select", false);
+
+	// remove host from host list
+	this._hosts.splice(at, 1);
+
+	this._dispose();
+};
+
+/** Involk when config object is set.
+* @public
+* @param {Object=} options
+*/
+CellSelectionPlugin.prototype.config = function(options) {
+	if(!options) {
+		return;
+	}
+
+	let pluginOption = options["cellSelection"];
+
+	if(!pluginOption) {
+		return;
+	}
+
+	let val = pluginOption["mode"];
+	if(val) {
+		this._mode = val; // TODO: Check for valid mode
+	}
+
+	val = pluginOption["multipleSelection"];
+	if(val != null) {
+		this._allowMultipleSelection = val ? true : false;
+	}
+
+	if(!this._allowMultipleSelection) {
+		this._mouseTrait.removeEventListener("mouseMove", this._onMouseMove);
+	}
+
+	val = pluginOption["autoDeselecting"];
+	if(val != null) {
+		this._autoDeselecting = val ? true : false;
+	}
+	val = pluginOption["copyDisabled"];
+	if(val != null) {
+		this._copyDisabled = val ? true : false;
+	}
+
+	val = pluginOption["selectableSections"];
+	if(val) {
+		this.setSelectableSections(val);
+	}
+
+	// Listen keydown from the first host
+	val = pluginOption["tabToSelect"];
+	if(val) {
+		this._tabToSelect = true;
+	}
+
+	// event callback
+	this.addListener(pluginOption, "selectionChanged");
+	this.addListener(pluginOption, "copy");
+	this.addListener(pluginOption, "beforeMouseDown");
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+CellSelectionPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let extOptions = obj.cellSelection;
+	if(!extOptions) {
+		extOptions = obj.cellSelection = {};
+	}
+
+	extOptions.mode = this._mode;
+
+	if(!this._allowMultipleSelection) {
+		extOptions.multipleSelection = false;
+	}
+
+	if(!this._autoDeselecting) {
+		extOptions.autoDeselecting = false;
+	}
+	if(this._copyDisabled) {
+		extOptions.copyDisabled = true;
+	}
+
+	if(this._tabToSelect) {
+		extOptions.tabToSelect = true;
+	}
+
+	let unSelectables = this._unselectables;
+	let sections = [];
+	for(let sectionName in unSelectables) {
+		if(!unSelectables[sectionName]) {
+			sections.push(sectionName);
+		}
+	}
+	if(sections.length > 0 && sections.length < 3) {
+		extOptions.selectableSections = sections;
+	}
+
+	return obj;
+};
+/** @public
+* @ignore
+* @return {!Object}
+*/
+CellSelectionPlugin.prototype._getEventHandlers = function() {
+	return {
+		"mousedown": this._onMouseDown,
+		"mousemove": this._onMouseMove,
+		"mouseup": this._onMouseUp,
+		"copy": this._onCopy,
+		"blur": this._onBlur,
+		"keydown": this._onKeyDown
+	};
+};
+/** Fire when mouse down.
+* @private
+* @param {MouseEvent} e
+*/
+CellSelectionPlugin.prototype._onMouseDown = function (e) {
+	this._dragging = false;
+	if(this._disabled || !this._isClickable(e.target)) {
+		return;
+	}
+
+	let activeGrid = this.getRelativeGrid(e);
+	let newAnchor = activeGrid.getRelativePosition(e);
+
+	if(this._unselectables[newAnchor.sectionType]) {
+		return;
+	}
+
+	this._dispatch("beforeMouseDown", newAnchor);
+
+	if(newAnchor.cancel) {
+		return;
+	}
+
+	this._dragging = true;
+	this.selectSingleCell(newAnchor);
+};
+
+/** Fire when mouse is draging.
+* @private
+* @param {Event} e
+*/
+CellSelectionPlugin.prototype._onMouseMove = function (e) {
+	if(this._disabled || !this._anchor || !this._dragging) {
+		return;
+	}
+	let activeGrid = this._getActiveGrid();
+	let newMouse = activeGrid.getRelativePosition(e);
+
+	// Avoid cross section selection but scrolling is still working
+	if(this._anchor["sectionType"] === "title" && newMouse["sectionType"] !== "title") {
+		return;
+	} else if (this._anchor["sectionType"] === "content" && newMouse["sectionType"] === "title") {
+		return;
+	}
+
+	if(!newMouse["hit"]) {
+		let gridHeight = activeGrid.getHeight();
+		let gridWidth = activeGrid.getWidth();
+
+		if(activeGrid.getScrollWidth() === 0 && activeGrid.getScrollHeight() === 0) {
+			// prevent Auto Scrolling, if Grid does not have scroll
+			return;
+		}
+
+		if((gridHeight >= newMouse.y && !(newMouse.y < 0)) && (gridWidth >= newMouse.x && !(newMouse.x < 0))) {
+			// return Auto Scrolling, if mouse out of Grid
+			return;
+		}
+
+		let x = 0;
+		let y = 0;
+		if(newMouse.x > gridWidth) {
+			x = newMouse.x - gridWidth;
+		} else if(newMouse.x < 0) {
+			x = newMouse.x;
+		}
+		if(newMouse.y > gridHeight) {
+			y = newMouse.y - gridHeight;
+		} else if(newMouse.y < 0) {
+			y = newMouse.y;
+		}
+
+		let dirVectors = {
+			"x": x,
+			"y": y
+		};
+
+		// set up scrollSpeed
+		this._setScrollSpeed(dirVectors);
+
+		let isSameProps = this._checkIsSameProps(dirVectors);
+
+		if(this._mouseOutOfGrid && isSameProps) {
+			return;
+		}
+
+		this._dirVectors = dirVectors;
+		this._setScrollInterval(dirVectors);
+		return;
+	}
+
+	this._clearScrollingTimer();
+
+	if(this._isTheSamePosition(this._curMouse, newMouse)) {
+		// No selection has been changed
+		return;
+	}
+
+	this._curMouse = newMouse;
+	let tgtRect = this._newSelectionRect();
+
+	this._updateSelection(tgtRect);
+};
+
+/** Get active grid
+* @private
+* @return {Object} core grid
+*/
+CellSelectionPlugin.prototype._getActiveGrid = function() {
+	let anchor = this._anchor;
+	if(anchor && anchor["grid"]) {
+		return anchor["grid"];
+	} else {
+		return this._hosts[0];
+	}
+};
+
+/** Set scroll speed
+* @private
+* @param {Object} dirVectors Indicates direction vectors of mouse
+*/
+CellSelectionPlugin.prototype._setScrollSpeed = function (dirVectors) {
+	let basedSped = 300;
+	let scrollSpeed = Math.floor(basedSped - Math.abs((dirVectors.x + dirVectors.y) / 2));
+
+	if(scrollSpeed % 10 === 0) {
+		this._scrollSpeed = scrollSpeed > 0 || scrollSpeed <= 500 ? scrollSpeed : 50;
+	}
+};
+
+/** Detect direction vector
+* @private
+* @param {number} vector
+* @return {string|null}
+*/
+CellSelectionPlugin.prototype._detectDir = function(vector) {
+	let part = null;
+	if(vector < 0) {
+		part = "minus"; // minus vector
+	} else if(vector === 0) {
+		part = "zero"; // zero vector
+	} else if(vector > 0) {
+		part = "positive"; // positive vector
+	}
+
+	return part;
+};
+
+/** Check Is Same Props
+* @private
+* @param {Object} newDirVectors - indicates direction vectors of mouse
+* @return {boolean}
+*/
+CellSelectionPlugin.prototype._checkIsSameProps = function(newDirVectors) {
+
+	if(!this._dirVectors || !newDirVectors) {
+		return false;
+	}
+
+	let isX = this._detectDir(this._dirVectors.x) === this._detectDir(newDirVectors.x);
+	let isY = this._detectDir(this._dirVectors.y) === this._detectDir(newDirVectors.y);
+
+	return (
+		isX && isY
+	);
+};
+
+/** @private
+*/
+CellSelectionPlugin.prototype._clearScrollingTimer = function () {
+	if(this._scrollingTimer) {
+		clearInterval(this._scrollingTimer);
+		this._scrollingTimer = 0;
+		this._mouseOutOfGrid = false;
+	}
+};
+/** @private
+* @param {Object} dirVectors
+*/
+CellSelectionPlugin.prototype._setScrollInterval = function (dirVectors) {
+	this._clearScrollingTimer();
+	this._mouseOutOfGrid = true;
+
+	let tgtRect = this._newSelectionRect();
+	let initialScrollSpeed = this._scrollSpeed || 500;
+
+	this._scrollingTimer = setInterval(function () {
+		if(initialScrollSpeed !== this._scrollSpeed) {
+			this._setScrollInterval(dirVectors);
+			return;
+		}
+		let currentScrollTop = this._hosts[0].getScrollTop();
+		let currentScrollLeft = this._hosts[0].getScrollLeft();
+
+		let isYPositive = dirVectors.y > 0;
+		let isXPositive = dirVectors.x > 0;
+
+		let cellWidth = this._map[0].section.getCellWidth();
+		let cellHeight = this._map[0].section.getCellHeight();
+
+		let scrollToTop = isYPositive ? currentScrollTop + cellWidth : currentScrollTop - cellWidth;
+		let scrollToLeft = isXPositive ? currentScrollLeft + cellHeight : currentScrollLeft - cellHeight;
+
+		if(dirVectors.y !== 0) {
+			// updates scroll position
+			this._hosts[0].setScrollTop(scrollToTop);
+
+			let vScrollbar = this._hosts[0].getVScrollbar();
+			let rowVirtualizer = this._hosts[0].getRowVirtualizer();
+			let isEndOfVerticalScroll = this._isEndOfVerticalScroll();
+			let vTrackHeight = vScrollbar.getHeight();
+			let scrollViewOffset = rowVirtualizer.getViewOffset();
+
+			// scrolling down
+			if(isYPositive) {
+				let nextBottomRowEndPos = rowVirtualizer.getContentStart(tgtRect.bottom + 1) - scrollViewOffset; //end position of next bottom row
+
+				if(nextBottomRowEndPos <= vTrackHeight){
+					// while next row is in scroll view, extend to next bottom row
+					while(nextBottomRowEndPos <= vTrackHeight){
+						tgtRect.bottom += 1;
+						nextBottomRowEndPos = rowVirtualizer.getContentStart(tgtRect.bottom + 1) - scrollViewOffset;
+					}
+				} else if(isEndOfVerticalScroll){
+					tgtRect.bottom = this._hosts[0].getRowCount();
+				}
+			}
+			// scrolling up
+			else {
+				let nextTopRowStartPos = rowVirtualizer.getContentStart(tgtRect.top - 1) - scrollViewOffset; //start position of next top row
+
+				if(nextTopRowStartPos >= 0){
+					// while next row is in scroll view, extend to next top row
+					while(nextTopRowStartPos >= 0){
+						tgtRect.top -= 1;
+						nextTopRowStartPos = rowVirtualizer.getContentStart(tgtRect.top - 1) - scrollViewOffset;
+					}
+				} else if(isEndOfVerticalScroll){
+					tgtRect.top = 1;
+				}
+			}
+		}
+
+		if(dirVectors.x !== 0) {
+			// updates scroll position
+			this._hosts[0].setScrollLeft(Math.floor(scrollToLeft));
+
+			let isEndOfHorizontalScroll = this._isEndOfHorizontalScroll();
+			let hScrollbar = this._hosts[0].getHScrollbar();
+			let hTrackWidth = hScrollbar.getTrackSize();
+
+			// scrolling right
+			if(isXPositive){
+				let leftPinnedWidth = 0;
+				let leftPinnedCount = this._hosts[0].getPinnedLeftColumnCount();
+
+				// getting width of left pinned columns
+				if(leftPinnedCount){
+					leftPinnedWidth = this._hosts[0].getContentWidth() - hScrollbar.getContentWidth();
+				}
+
+				let nextRightColEndPos = this._hosts[0].getColumnRight(tgtRect.right) - leftPinnedWidth; //end position of next right column
+				// if next column is in scroll view, extend to next right column
+				if(nextRightColEndPos <= hTrackWidth){
+					tgtRect.right += 1;
+				} else if(isEndOfHorizontalScroll){
+					tgtRect.right = this._hosts[0].getColumnCount();
+				}
+			}
+			// scrolling left
+			else {
+				let nextLeftColStartPos = this._hosts[0].getColumnLeft(tgtRect.left - 1); //start position of next left column
+				// if next column is in scroll view, extend to next left column
+				if(nextLeftColStartPos >= 0){
+					tgtRect.left -= 1;
+				} else if(isEndOfHorizontalScroll){
+					tgtRect.left = 0;
+				}
+			}
+		}
+
+		this._updateSelection(tgtRect);
+		this._prevRect = cloneObject(tgtRect);
+	}.bind(this), initialScrollSpeed);
+};
+
+/** @private
+* @return {boolean}
+*/
+CellSelectionPlugin.prototype._isEndOfVerticalScroll = function () {
+	let scrollTop = this._hosts[0].getScrollTop();
+	if(!scrollTop) {
+		return true;
+	}
+	return (scrollTop + this._hosts[0].getHeight()) > this._hosts[0].getScrollHeight();
+};
+
+/** @private
+* @return {boolean}
+*/
+CellSelectionPlugin.prototype._isEndOfHorizontalScroll = function () {
+	let hScrollbar = this._hosts[0].getHScrollbar();
+	return hScrollbar.isEndOfHorizontalScroll() || this._hosts[0].getScrollLeft() == 0;
+};
+
+/** Fire when draging was end.
+* @private
+* @param {Object} e
+*/
+CellSelectionPlugin.prototype._onMouseUp = function (e) {
+	this._clearScrollingTimer();
+
+	if(this._disabled || !this._dragging) {
+		return;
+	}
+
+	if(!CellSelectionPlugin._hasTextSelection()) {
+		let activeGrid = this._getActiveGrid();
+		if(activeGrid) {
+			activeGrid.focus(); // Trigger blur and focusout events
+		}
+	}
+	this._dragging = false;
+	this._dispatch("selectionChanged", {});
+};
+
+/** @private
+* @param {Object} e
+*/
+CellSelectionPlugin.prototype._onBlur = function (e) { // WARNING: This happens immediately after the first mousedown on the grid
+	if(this._dragging || !this._autoDeselecting) { // Ignore any blur and focusout during the dragging operation
+		return;
+	}
+	if(this._realTimeGrid && this._realTimeGrid.contains) {
+		if(this._realTimeGrid.contains(e.relatedTarget)) { // For blur event, relatedTarget is the EventTarget receiving focus (if any)
+			return; // Grid does not really lose focus to the outside element
+		}
+	}
+
+	if(this.deselectAll()) {
+		this._dispatch("selectionChanged", {});
+	}
+};
+
+/** to remove selection UI when column moved, then postSectionData will rerender selection UI again
+* @private
+* @param {Object} e
+*/
+CellSelectionPlugin.prototype._onColumnMoved = function (e) {
+	let rect = this._curRect;
+	let from = e.fromColIndex;
+	let to = e.toColIndex;
+	// ignore column that moved outside selection range
+	if(from < rect.left && to < rect.left) {
+		return;
+	} else if(from >= rect.right && to >= rect.right) {
+		return;
+	}
+
+	let clearColIndex;
+	// move from outside left to right
+	// the selection column will shift to left
+	if(from < rect.left) {
+		clearColIndex = rect.left - 1;
+	}
+	// move from outside right to left
+	// the selection column will shift to right
+	else if(from >= rect.right) {
+		clearColIndex = rect.right;
+	}
+	// move from inside to outside
+	// the selection column will move to specific column
+	else if(to < rect.left || to >= rect.right) {
+		clearColIndex = to;
+	}
+	// move from inside to inside
+	else {
+		return; // just do nothing
+	}
+
+	for(let rowIndex = rect.top; rowIndex < rect.bottom; rowIndex++) {
+		let rowObj = this._map[rowIndex];
+		rowObj.section.selectCell(clearColIndex, rowObj.rowIndex, false);
+	}
+};
+
+/** Check if the element clickable.
+* @private
+* @param {Element} elem
+* @param {Object} activeGrid
+* @return {boolean}
+*/
+CellSelectionPlugin.prototype._isClickable = function (elem, activeGrid) {
+	if(!this._hosts[0] || !elem
+		// case tagName = EF-<whatever> but except EF-ICON and EF-HEADER
+		|| ("EF-ICON" !== elem.tagName
+			&& "EF-HEADER" !== elem.tagName
+			&& 0 === elem.tagName.indexOf("EF-"))
+	) {
+		return false;
+	}
+	// case elem.tagName is in inclickable list
+	if(this._unclickableMapping[elem.tagName] && !elem.classList.contains("valigner")) { // button.valigner is clickable
+		return false;
+	}
+
+	return true;
+};
+
+/** Check if there is any text selection in the document. This method adds more testability.
+* @private
+* @returns {boolean}
+*/
+CellSelectionPlugin._hasTextSelection = function() {
+	return window.getSelection().toString() ? true : false;
+};
+
+/** Copy text in selected cell to clipboard. If no selection, clipboard will NOT be replaced by empty string
+* @private
+* @param {MouseEvent} e
+*/
+CellSelectionPlugin.prototype._onCopy = function (e) {
+	if(this._copyDisabled) {
+		return;
+	}
+
+	if(CellSelectionPlugin._hasTextSelection()) {
+		return; // If there is already native text selection, custom copying is not allowed
+	}
+
+	let obj = {
+		grid: this._hosts[0],
+		sender: this,
+		data: "",
+		format: "",
+		clipboards: []
+	};
+
+	this._dispatch("copy", obj);
+
+	if(obj.cancel) {
+		return;
+	}
+
+	let clipboardData = (e.clipboardData || window.clipboardData);
+	let format = "text/plain";
+	let dirty = false;
+	// Single format support
+	if(obj.data) {
+		clipboardData.setData(obj.format || format, obj.data);
+		dirty = true;
+	} else {
+		let txt = this.getSelectedText();
+		if(txt) {
+			clipboardData.setData(format, txt);
+			dirty = true;
+		}
+	}
+
+	// Multiple formats support
+	let len = obj.clipboards ? obj.clipboards.length : 0;
+	for(let i = 0; i < len; ++i) {
+		let clipboard = obj.clipboards[i];
+		if(clipboard.format){
+			clipboardData.setData(clipboard.format, clipboard.data || "");
+			dirty = true;
+		}
+	}
+
+	if(dirty) {
+		EventDispatcher.preventDefault(e);
+	}
+};
+/** @private
+* @constant
+* @type {Object}
+*/
+const _arrowKeys = {
+	"ArrowLeft": true,
+	"ArrowRight": true,
+	"ArrowUp": true,
+	"ArrowDown": true
+};
+/** @private
+* @param {KeyboardEvent} e
+*/
+CellSelectionPlugin.prototype._onKeyDown = function (e) {
+	if(e.altKey || e.ctrlKey || e.metaKey || e.defaultPrevented || !this._anchor) {
+		return;
+	}
+
+	let handled = false;
+	let code = e.code;
+	if(code === "Tab") {
+		if(this._tabToSelect) {
+			handled = (e.shiftKey) ? this.selectPrevCell() : this.selectNextCell();
+		}
+	} else if(_arrowKeys[code]) {
+		let colIndex = this._anchor["colIndex"];
+		let rowIndex = this._anchor["rowIndex"];
+		if(e.shiftKey) {
+			if(this._curMouse) {
+				colIndex = this._curMouse["colIndex"];
+				rowIndex = this._curMouse["rowIndex"];
+			}
+			if(code === "ArrowLeft") {
+				colIndex--;
+			} else if(code === "ArrowRight") {
+				colIndex++;
+			} else if(code === "ArrowUp") {
+				rowIndex--;
+			} else if(code === "ArrowDown") {
+				rowIndex++;
+			}
+			let cellInfo = this._getCellInfo(colIndex, rowIndex);
+			if(cellInfo) {
+				handled = true;
+				let activeGrid = this._getActiveGrid();
+				if(activeGrid) {
+					activeGrid.scrollToRow(null, rowIndex);
+				}
+				this._curMouse = cellInfo;
+				this._updateSelection(this._newSelectionRect());
+			}
+		} else if(code === "ArrowLeft") {
+			handled = this.selectPrevCell();
+		} else if(code === "ArrowRight") {
+			handled = this.selectNextCell();
+		} else {
+			rowIndex = (code === "ArrowUp") ? rowIndex - 1 : rowIndex + 1;
+			let cellInfo = this._getCellInfo(colIndex, rowIndex);
+			if(cellInfo) {
+				this.selectSingleCell(cellInfo);
+				handled = true;
+			}
+		}
+	}
+
+	if(handled) {
+		EventDispatcher.preventDefault(e);
+	}
+};
+
+/** @private
+* @param {Object} e for cell style binding
+*/
+CellSelectionPlugin.prototype._onPostSectionDataBinding = function (e) {
+	let activeGrid = this._getActiveGrid();
+	if(this.getSelectionCount() > 0 && activeGrid === e.sender) {
+		// let colCount = this._hosts[0].getColumnCount();
+		let rowOffset = e.section.getRowOffset();
+		let selectionRowStart = this._curRect.top - rowOffset;
+		let selectionRowEnd = this._curRect.bottom - rowOffset;
+		let selectionColStart = this._curRect.left;
+		let selectionColEnd = this._curRect.right;
+		let rowIndex, colIndex;
+		for(rowIndex = e.fromRowIndex; rowIndex < e.toRowIndex; rowIndex++) {
+			if(rowIndex >= selectionRowStart && rowIndex < selectionRowEnd) {
+				// if row inside selection range
+				for(colIndex = selectionColStart; colIndex < selectionColEnd; colIndex++) {
+					e.section.selectCell(colIndex, rowIndex, true);
+				}
+			} else {
+				for(colIndex = selectionColStart; colIndex < selectionColEnd; colIndex++) {
+					e.section.selectCell(colIndex, rowIndex, false);
+				}
+			}
+		}
+	}
+};
+
+/** @private */
+CellSelectionPlugin.prototype._cacheSectionMap = function () {
+	let sectionCount = this._hosts[0].getSectionCount();
+	let totalRow = 0;
+	let rowOffset = 0;
+
+	this._hasCellSpan = false;
+	let activeGrid = this._getActiveGrid();
+	for(let i = 0; i < sectionCount; ++i) {
+		let sectionSettings = activeGrid.getSectionSettings(i);
+		let section = sectionSettings.getSection();
+		let hasCellSpan = section.hasCellSpan();
+		let rowCount = section.getRowCount();
+		for(let j = 0; j < rowCount; ++j) {
+			let obj = {};
+			obj.section = section;
+			obj.hasCellSpan = hasCellSpan;
+			obj.sectionIndex = i;
+			obj.rowIndex = j;
+			obj.rowOffset = rowOffset;
+			obj.type = sectionSettings.getType();
+			this._map[totalRow] = obj;
+			totalRow++;
+		}
+		rowOffset += rowCount;
+		this._hasCellSpan |= hasCellSpan;
+	}
+	this._map.length = totalRow;
+};
+
+/** @private
+* @param {Object} obj
+* @return {number}
+*/
+CellSelectionPlugin.prototype._getCumulativeIndex = function (obj) {
+	let section = obj["section"];
+	if(!section) {
+		section = this._hosts[0].getSection("content");
+	} else if(typeof section === "string" || typeof section === "number") {
+		section = this._hosts[0].getSection(section);
+	}
+	return section.getRowOffset() + obj["rowIndex"];
+};
+
+/** Add new selection rectangle area.
+* @private
+* @param {Object=} targetPos
+* @return {!Object} Rectangle
+*/
+CellSelectionPlugin.prototype._newSelectionRect = function (targetPos) {
+	if(!targetPos) {
+		targetPos = this._curMouse;
+	}
+	if(!this._anchor || !targetPos) {
+		return this._curRect;
+	}
+
+	let rect = {};
+	if(this._mode !== "row") {
+		if(this._anchor["colIndex"] <= targetPos["colIndex"]) {
+			rect.left = this._anchor["colIndex"];
+			rect.right = targetPos["colIndex"] + 1;
+		} else {
+			rect.left = targetPos["colIndex"];
+			rect.right = this._anchor["colIndex"] + 1;
+		}
+	} else {
+		rect.left = 0;
+		rect.right = this._hosts[0].getColumnCount();
+	}
+
+	// Required
+	let cIndex = this._getCumulativeIndex(targetPos);
+	let aIndex = this._getCumulativeIndex(this._anchor);
+
+	if(this._mode !== "column") {
+		if(aIndex <= cIndex) {
+			rect.top = aIndex;
+			rect.bottom = cIndex + 1;
+		} else {
+			rect.top = cIndex;
+			rect.bottom = aIndex + 1;
+		}
+	} else {
+		rect.top = 0;
+		rect.bottom = this._hosts[0].getRowCount();
+	}
+
+	this._scanCellSpans(rect);
+	return rect;
+};
+
+/** we will expand rect by cell span (cell merged)
+* @private
+* @param {Object} rect
+*/
+CellSelectionPlugin.prototype._scanCellSpans = function (rect) {
+	if(!this._hasCellSpan) { return; }
+	let c = 0, r = 0;
+	let tgtChanged = false;
+
+	do {
+		tgtChanged = false;
+		for(c = rect.left; c < rect.right; ++c) {
+			// Left to right
+			tgtChanged |= this._expandRect(c, rect.top, rect);
+		}
+		c = rect.right - 1;
+		for(r = rect.top + 1; r < rect.bottom; ++r) {
+			// Top to bottom
+			tgtChanged |= this._expandRect(c, r, rect);
+		}
+		r = rect.bottom - 1;
+		for(c = rect.right - 1; --c >= rect.left; ) {
+			// Bottom right to bottom left
+			tgtChanged |= this._expandRect(c, r, rect);
+		}
+		for(r = rect.bottom - 1; --r >= rect.top; ) {
+			// Bottom left to top
+			tgtChanged |= this._expandRect(rect.left, r, rect);
+		}
+	} while (tgtChanged);
+};
+
+/** @private
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {Object} rect
+* @return {boolean}
+*/
+CellSelectionPlugin.prototype._expandRect = function (colIndex, rowIndex, rect) {
+	let obj = this._map[rowIndex];
+	if(!obj.hasCellSpan) { return false; }
+	if(this._unselectables[obj.type] === true) { return false; }
+
+	let changed = false;
+	let newIndex = 0;
+	let colSpan = obj.section.getCellColSpan(colIndex, obj.rowIndex);
+	if(colSpan > 1) {
+		newIndex = colIndex + colSpan;
+		if(newIndex > rect.right) {
+			rect.right = newIndex; // Exclusive
+			changed = true;
+		}
+	} else if(colSpan < 0) {
+		newIndex = colIndex + colSpan;
+		if(newIndex < rect.left) {
+			rect.left = newIndex;
+			changed = true;
+		}
+		colSpan = obj.section.getCellColSpan(newIndex, obj.rowIndex);
+		newIndex = newIndex + colSpan;
+		if(newIndex > rect.right) {
+			rect.right = newIndex; // Exclusive
+			changed = true;
+		}
+	}
+
+	let rowSpan = obj.section.getCellRowSpan(colIndex, obj.rowIndex);
+	if(rowSpan > 1) {
+		newIndex = obj.section.getRowOffset() + obj.rowIndex + rowSpan;
+		if(newIndex > rect.bottom) {
+			rect.bottom = newIndex;  // Exclusive
+			changed = true;
+		}
+	} else if(rowSpan < 0) {
+		newIndex = obj.section.getRowOffset() + obj.rowIndex + rowSpan;
+		if(newIndex < rect.top) {
+			rect.top = newIndex;
+			changed = true;
+		}
+		rowSpan = obj.section.getCellRowSpan(colIndex, newIndex);
+		newIndex = newIndex + rowSpan;
+		if(newIndex > rect.bottom) {
+			rect.bottom = newIndex; // Exclusive
+			changed = true;
+		}
+	}
+
+	return changed;
+};
+
+/** Update all row & column that mouse draged over.
+* @private
+* @param {Object} tgtRect
+*/
+CellSelectionPlugin.prototype._updateSelection = function (tgtRect) {
+	// Expand/Shrink Left
+	this._updateColumnSelection(tgtRect.left, this._curRect.left);
+	this._curRect.left = tgtRect.left;
+
+	// Expand/Shrink Right
+	this._updateColumnSelection(this._curRect.right, tgtRect.right);
+	this._curRect.right = tgtRect.right;
+
+	// Expand/Shrink Top
+	this._updateRowSelection(tgtRect.top, this._curRect.top);
+	this._curRect.top = tgtRect.top;
+
+	// Expand/Shrink Bottom
+	this._updateRowSelection(this._curRect.bottom, tgtRect.bottom);
+	this._curRect.bottom = tgtRect.bottom;
+
+	let activeGrid = this._getActiveGrid();
+	if(activeGrid) {
+		let x = this._curRect.left;
+		let y = this._curRect.top;
+
+		let mapInfo = this._map[y];
+
+		let w = 0;
+		let h = 0;
+		if(mapInfo) {
+			w = this._curRect.right - x;
+			h = this._curRect.bottom - y;
+			y -= mapInfo.rowOffset;
+			let contentType = mapInfo.type;
+			if(contentType === "content") {
+				let contentSect = activeGrid.getSection("content");
+				if(contentSect) {
+					contentSect.setCellBounds(x, y, w, h);
+				}
+			} else {
+				let titleSect = activeGrid.getSection("title");
+				if(titleSect) {
+					titleSect.setCellBounds(x, y, w, h);
+				}
+			}
+		}
+	}
+};
+
+/** Update all column that mouse draged over.
+* @private
+* @param {number} from Inclustive starting index
+* @param {number} to Exclusive destination index
+*/
+CellSelectionPlugin.prototype._updateColumnSelection = function (from, to) {
+	if(from === to) { return; }
+
+	let c, r;
+
+	if(from < to) {
+		for(r = this._curRect.top; r < this._curRect.bottom; ++r) {
+			for(c = from; c < to; ++c) {
+				this._selectAsPosition(r, c, true);
+			}
+		}
+	} else { // from > to
+		for(r = this._curRect.top; r < this._curRect.bottom; ++r) {
+			for(c = from; --c >= to;) {
+				this._selectAsPosition(r, c, false);
+			}
+		}
+	}
+};
+
+/** Update all row that mouse draged over.
+* @private
+* @param {number} from Inclustive starting index
+* @param {number} to Exclusive destination index
+*/
+CellSelectionPlugin.prototype._updateRowSelection = function (from, to) {
+	if(from === to) { return; }
+
+	let c, r;
+
+	if(from < to) {
+		for(r = from; r < to; ++r) {
+			for(c = this._curRect.left; c < this._curRect.right; ++c) {
+				this._selectAsPosition(r, c, true);
+			}
+		}
+	} else { // from > to
+		for(r = from; --r >= to; ) {
+			for(c = this._curRect.left; c < this._curRect.right; ++c) {
+				this._selectAsPosition(r, c, false);
+			}
+		}
+	}
+};
+
+/** @private
+* @param {number} rowIndex
+* @param {number} colIndex
+* @param {boolean} isSelect
+*/
+CellSelectionPlugin.prototype._selectAsPosition = function (rowIndex, colIndex, isSelect) {
+	let mapInfo = this._map[rowIndex];
+	if(mapInfo && !this._unselectables[mapInfo.type]) {
+		mapInfo.section.selectCell(colIndex, mapInfo.rowIndex, isSelect);
+	}
+};
+
+/** Check mouse is draging over cell that already selected.
+* @private
+* @param {Object} cellA
+* @param {Object} cellB
+* @return {boolean}
+*/
+CellSelectionPlugin.prototype._isTheSamePosition = function (cellA, cellB) {
+	if(cellA === null && cellB === null) { return true; }
+
+	if(cellA !== null && cellB !== null) {
+		return (cellA["rowIndex"] === cellB["rowIndex"] &&
+			cellA["colIndex"] === cellB["colIndex"] &&
+			cellA["sectionIndex"] === cellB["sectionIndex"]);
+	}
+	return false;
+};
+
+/** Grid has hidden input it's a dummy element <br>
+* We can use this input to perform copy or etc.
+* @private
+* @return {Element}
+*/
+CellSelectionPlugin.prototype._getGridHiddenInput = function () {
+	if(this._hosts[0]) {
+		return this._hosts[0].getHiddenInput();
+	}
+
+	return null;
+};
+
+/** Get text from selected cells. If no selection, return empty string. <br>
+* Text will be converted to Tab-separated values format, representing tabular structure. <br>
+* Newlines (\n, \r), Tab (\t) and &lt;br> <br>
+* will be converted to single space. Connecting spaces will remain intact.
+* @public
+* @return {string}
+*/
+CellSelectionPlugin.prototype.getSelectedText = function () {
+	let activeGrid = this._getActiveGrid();
+	if(!activeGrid || !this.getGridApi() || this.getSelectionCount() <= 0) return "";
+
+	let ret_txt = "";
+	let dv = activeGrid.getDataSource();
+	for(let r = this._curRect.top; r < this._curRect.bottom; ++r) {
+		let rowMapping = this._map[r];
+
+		if(r !== this._curRect.top) {
+			ret_txt += "\n";
+		}
+
+		let rowData = null;
+		if(this._unselectables[rowMapping.type] === true) { continue; }
+		else if(rowMapping.type === "content") {
+			rowData = this._getRow(dv, rowMapping.rowIndex);
+		}
+		for(let c = this._curRect.left; c < this._curRect.right; ++c) {
+			if(c !== this._curRect.left) {
+				ret_txt += "\t";
+			}
+
+			if(rowMapping.type === "content") {
+				// for content section we will get text from dataSource to support row virtualization
+				if(rowData) {
+					let cField = this._getField(c);
+					ret_txt += prepareTSVContent(rowData[cField]);
+				}
+			} else {
+				// other section not has row virtualization
+				// so we can get text from cell directly
+				let txt = rowMapping.section.getCell(c, rowMapping.rowIndex).getTextContent();
+				ret_txt += prepareTSVContent(txt);
+			}
+		}
+	}
+	return ret_txt;
+};
+
+/** Select all cell.
+* @public
+*/
+CellSelectionPlugin.prototype.selectAll = function () {
+	let activeGrid = this._getActiveGrid();
+	let selectAllRectangle = {
+		left: 0,
+		right: activeGrid.getColumnCount(),
+		top: 0,
+		bottom: activeGrid.getRowCount()
+	};
+
+	// Un-select all selected
+	this.deselectAll();
+
+	// Need to keep the active-grid
+	this._anchor = {
+		grid: activeGrid
+	};
+
+	// Need to be done first for getting cumulative row index
+	this._cacheSectionMap();
+
+	// Make new rectangle selection & fire event
+	this._scanCellSpans(selectAllRectangle);
+	this._updateSelection(selectAllRectangle);
+	this._dispatch("selectionChanged", {});
+};
+
+/** Deselect all selected cell.
+* @public
+* @return {boolean} true if there is any change
+*/
+CellSelectionPlugin.prototype.deselectAll = function () {
+	if(this.getSelectionCount() <= 0) { return false; }
+
+	// clear selection from ui
+	let activeGrid = this._getActiveGrid();
+	if(activeGrid) {
+		let selectedCells = activeGrid.getElement().querySelectorAll("div.cell.selection"); // TODO: Move this logic to core grid
+		let c = selectedCells.length;
+		for(let i = 0; i < c; i++) {
+			selectedCells[i].classList.remove("selection");
+		}
+		let contentSect = activeGrid.getSection("content");
+		if(contentSect) {
+			contentSect.setCellBounds(0, 0, 0, 0);
+		}
+		let titleSect = activeGrid.getSection("title");
+		if(titleSect) {
+			titleSect.setCellBounds(0, 0, 0, 0);
+		}
+	}
+
+	this._lastSelection = this.getSelectionBounds();
+	this._anchor = null;
+	this._curRect.right = this._curRect.left;
+	this._curRect.bottom = this._curRect.top;
+	return true;
+};
+
+/** Return total number of selected cells
+* @public
+* @return {number}
+*/
+CellSelectionPlugin.prototype.getSelectionCount = function () {
+	let width = this._curRect.right - this._curRect.left;
+	let height = this._curRect.bottom - this._curRect.top;
+	return width * height;
+};
+
+/** Add left, top, right, bottom properties to the given object
+* @public
+* @param {Object=} opt_ret
+* @return {Object}
+*/
+CellSelectionPlugin.prototype.getSelectionBounds = function (opt_ret) {
+	if(this.getSelectionCount() <= 0) { return null; }
+
+	let obj = (opt_ret != null) ? opt_ret : {};
+	obj["left"] = this._curRect.left;
+	obj["right"] = this._curRect.right - 1; // Inclusive
+	obj["top"] = this._curRect.top;
+	obj["bottom"] = this._curRect.bottom - 1; // Inclusive
+
+	if(this._map.length > 0 && obj["bottom"] < this._map.length) {
+		let mapper = this._map[obj["top"]];
+		obj["startSection"] = mapper.sectionIndex;
+		obj["startSectionRow"] = mapper.rowIndex;
+
+		mapper = this._map[obj["bottom"]];
+		obj["endSection"] = mapper.sectionIndex; // Inclusive
+		obj["endSectionRow"] = mapper.rowIndex; // Inclusive
+	}
+	return obj;
+};
+
+/** Add left, top, right, bottom properties to the given object
+* @public
+* @param {Object=} opt_ret
+* @return {Object}
+*/
+CellSelectionPlugin.prototype.getLastSelectionBounds = function (opt_ret) {
+	if(this._lastSelection === null) { return null; }
+
+	let obj = (opt_ret != null) ? opt_ret : {};
+	for(let key in this._lastSelection) {
+		obj[key] = this._lastSelection[key];
+	}
+	return obj;
+};
+
+/** Use to set which section can be selected,[ header, title, content ]
+* @public
+* @param {(string|Array.<string>|null)=} types Use null to allow all sections to be select
+*/
+CellSelectionPlugin.prototype.setSelectableSections = function (types) {
+	this._unselectables["content"] = true;
+	this._unselectables["header"] = true;
+	this._unselectables["title"] = true;
+
+	// Set null or empty to allow all sections
+	if(!types) {
+		this._unselectables["content"] = false;
+		this._unselectables["header"] = false;
+		this._unselectables["title"] = false;
+		return;
+	}
+
+	let list = (typeof types === "string") ? [types] : types;
+	for(let i = list.length; --i >= 0; ) {
+		this._unselectables[list[i]] = false;
+	}
+};
+
+/** Use to select single cell and deselect previous selected cells.
+* @public
+* @param {Object} anchor
+* @example
+* extension.selectSingleCell({colIndex: 1, rowIndex: 0});
+*/
+CellSelectionPlugin.prototype.selectSingleCell = function (anchor) {
+	let prevRowIndex = -1;
+	if(this._anchor) {
+		prevRowIndex = this._anchor["rowIndex"];
+	}
+
+	this.deselectAll();
+
+	if(!anchor) { return; }
+
+	if(prevRowIndex >= 0) {
+		let activeGrid = this._getActiveGrid();
+		if(activeGrid) {
+			let newRowIndex = anchor["rowIndex"];
+			if(Math.abs(prevRowIndex - newRowIndex) === 1) {
+				activeGrid.scrollToRow(null, newRowIndex);
+			}
+		}
+	}
+
+	this._anchor = anchor;
+	this._curMouse = anchor;
+
+	// Need to be done first for getting cumulative row index
+	this._cacheSectionMap();
+
+	this._curRect.left = this._anchor["colIndex"];
+	this._curRect.top = this._getCumulativeIndex(this._anchor);
+	this._curRect.right = this._curRect.left;
+	this._curRect.bottom = this._curRect.top;
+
+	let tgtRect = this._newSelectionRect();
+	this._updateSelection(tgtRect);
+};
+
+/** Use to select multiple cells, can be selected by rectangle area.
+* @public
+* @param {Object} rect Object with rowIndex, colIndex, width, and height properties
+* @example
+* ext.selectCells({
+*   colIndex: 1, rowIndex: 1, width: 2, height: 2
+* });
+*/
+CellSelectionPlugin.prototype.selectCells = function (rect) {
+	this.deselectAll();
+
+	if(!rect) { return; }
+
+	this._anchor = rect;
+	this._curMouse = {
+		"rowIndex": rect["rowIndex"] + (rect["height"] - 1),
+		"colIndex": rect["colIndex"] + (rect["width"] - 1)
+	};
+
+	// Need to be done first for getting cumulative row index
+	this._cacheSectionMap();
+
+	this._curRect.left = this._anchor["colIndex"];
+	this._curRect.top = this._getCumulativeIndex(this._anchor);
+	this._curRect.right = this._curRect.left;
+	this._curRect.bottom = this._curRect.top;
+
+	let tgtRect = this._newSelectionRect();
+	this._updateSelection(tgtRect);
+};
+
+
+/** Get cell info object from the specified coordinate
+* @private
+* @param {number} colIndex
+* @param {number} rowIndex
+* @return {Object} Cell info object
+*/
+CellSelectionPlugin.prototype._getCellInfo = function (colIndex, rowIndex) {
+	let activeGrid = this._getActiveGrid();
+	if(activeGrid) {
+		let cellInfo = activeGrid.getCellInfo({
+			"colIndex": colIndex,
+			"rowIndex": rowIndex
+		});
+		if(cellInfo) {
+			cellInfo["grid"] = activeGrid; // Check if we need to do this
+			return cellInfo;
+		}
+	}
+	return null;
+};
+/** Select next cell from the current selection anchor.
+* @public
+* @return {boolean} Return true if the next cell is selected, otherwise false
+*/
+CellSelectionPlugin.prototype.selectNextCell = function () {
+	let newAnchor;
+	if(this._anchor) { // TODO: Handle looping
+		let activeGrid = this._getActiveGrid();
+		if(this._mode == "row") {
+			newAnchor = this._getCellInfo(0, this._anchor["rowIndex"] + 1);
+		} else if(this._mode == "column") {
+			newAnchor = this._getCellInfo(this._anchor["colIndex"] + 1, 0);
+		} else {
+			newAnchor = activeGrid.getNextCell(this._anchor);
+			if(newAnchor) {
+				if(newAnchor.cell) {
+					newAnchor["grid"] = activeGrid; // Check if we need to do this
+				} else {
+					newAnchor = null; // Last cell in the last row has been reached
+				}
+			}
+		}
+
+		if(newAnchor) {
+			this.selectSingleCell(newAnchor);
+		}
+	}
+	return newAnchor ? true : false;
+};
+/** Select previous cell from the current selection anchor.
+* @public
+* @return {boolean} Return true if the next cell is selected, otherwise false
+*/
+CellSelectionPlugin.prototype.selectPrevCell = function () {
+	let newAnchor;
+	if(this._anchor) { // TODO: Handle looping
+		let activeGrid = this._getActiveGrid();
+		if(this._mode == "row") {
+			newAnchor = this._getCellInfo(0, this._anchor["rowIndex"] - 1);
+		} else if(this._mode == "column") {
+			newAnchor = this._getCellInfo(this._anchor["colIndex"] - 1, 0);
+		} else {
+			newAnchor = activeGrid.getPrevCell(this._anchor);
+			if(newAnchor) {
+				if(newAnchor.cell) {
+					newAnchor["grid"] = activeGrid; // Check if we need to do this
+				} else {
+					newAnchor = null; // Last cell in the last row has been reached
+				}
+			}
+		}
+
+		if(newAnchor) {
+			this.selectSingleCell(newAnchor);
+		}
+	}
+	return newAnchor ? true : false;
+};
+/** Get information about current selection anchor
+* @public
+* @return {Object} MouseInfo
+*/
+CellSelectionPlugin.prototype.getAnchorInfo = function () {
+	let activeGrid = this._getActiveGrid();
+	return activeGrid.getCellInfo(this._anchor);
+};
+
+/** Use to get selected cells.
+* @public
+* @return {Array.<Array>} 2D array of cells
+*/
+CellSelectionPlugin.prototype.getSelectedCells = function () {
+	let selectedCells = [];
+
+	for(let r = this._curRect.top; r < this._curRect.bottom; ++r) {
+		let obj = this._map[r];
+		let cells = [];
+
+		for(let c = this._curRect.left; c < this._curRect.right; ++c) {
+			let cell = obj.section.getCell(c, obj.rowIndex);
+			cells.push(cell);
+		}
+
+		selectedCells.push(cells);
+	}
+
+	return selectedCells;
+};
+
+/** Disable selection
+* @public
+* @param {boolean=} opt_disable
+*/
+CellSelectionPlugin.prototype.disableSelection = function (opt_disable) {
+	this._disabled = (opt_disable !== false);
+};
+
+/** Use to set Auto Deselecting when blur.
+* @public
+* @param {boolean} bool
+*/
+CellSelectionPlugin.prototype.setAutoDeselectingOnBlur = function (bool) {
+	this._autoDeselecting = bool;
+};
+
+/** Use to get state Auto Deselecting.
+* @public
+* @return {boolean}
+*/
+CellSelectionPlugin.prototype.getAutoDeselectingOnBlur = function () {
+	return this._autoDeselecting;
+};
+
+
+
+export default CellSelectionPlugin;
+export { CellSelectionPlugin, CellSelectionPlugin as CellSelection, CellSelectionPlugin as CellSelectionExtension };