@refinitiv-ui/efx-grid 6.0.128 → 6.0.129

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

@@ -2,7 +2,7 @@ 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 { isIE, cloneObject, prepareTSVContent } from "../../tr-grid-util/es6/Util.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";
 
@@ -10,12 +10,13 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @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 selection will remain after grid losing focus
-* @property {boolean=} tabToSelect=false If enabled, the selection can be moved when user press tab key during the time grid is in focus.
+* @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 {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
@@ -24,63 +25,77 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 /** @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 Set to true to cancel operation.
+* @property {boolean=} cancel This property can be set to true to cancel the operation
 */
 
 /** @constructor
 * @param {Object=} options
 * @extends {GridPlugin}
 */
-var CellSelectionPlugin = function CellSelectionPlugin(options) {
-  this._textRange = document.createRange();
-  this._isIE = isIE();
-  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._onTab = this._onTab.bind(this);
-  this._onPostSectionDataBinding = this._onPostSectionDataBinding.bind(this);
-  this._onColumnMoved = this._onColumnMoved.bind(this);
-  if (options) {
-    this.config({
-      "cellSelection": options
-    });
-  }
+let CellSelectionPlugin = function (options) {
+	this._textRange = document.createRange();
+	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._onTab = this._onTab.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);"]]);
+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());
+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());
 };
 
 /** @type {Range}
@@ -133,25 +148,20 @@ CellSelectionPlugin.prototype._unselectables;
 */
 CellSelectionPlugin.prototype._lastSelection = null;
 
-/** WORKAROUND FOR IE11 <br>
-* to prevent onblur event perform action if this blur event come from onmouseup handler <br>
-* _lastMouseUpTimeStamp will change in onmouseup handler
-* @type {Object}
-* @private
-*/
-CellSelectionPlugin.prototype._lastMouseUpTimeStamp;
-
-/** Control auto Deseleting when on blur.
+/** 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}
@@ -163,32 +173,23 @@ CellSelectionPlugin.prototype._mouseTrait = null;
 * @private
 */
 CellSelectionPlugin.prototype._allowMultipleSelection = true;
-/** @type {boolean}
-* @private
-*/
-CellSelectionPlugin.prototype._dirty = false;
 /** Allow user tab to select next/previous cell
 * @type {boolean}
 * @private
 */
 CellSelectionPlugin.prototype._tabToSelect = false;
-/** Flag to tell that browser is IE or Edge or not
-* @type {boolean}
-* @private
-*/
-CellSelectionPlugin.prototype._isIE;
 /** 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
+	"A": 1,
+	"INPUT": 1,
+	"BUTTON": 1,
+	"SELECT": 1,
+	"CHECKBOX": 1,
+	"EF-DATETIME-PICKER": 1,
+	"EF-MULTI-SELECT": 1
 };
 
 /** Indicates direction vectors of mouse
@@ -207,7 +208,7 @@ CellSelectionPlugin.prototype._mouseOutOfGrid = false;
 * @type {number}
 * @private
 */
-CellSelectionPlugin.prototype._timeoutID = null;
+CellSelectionPlugin.prototype._scrollingTimer = null;
 
 /** Default scroll speed
 * @type {number}
@@ -224,12 +225,12 @@ CellSelectionPlugin.prototype._prevRect = {};
 * @type {boolean}
 * @private
 */
-CellSelectionPlugin.prototype._draggable = false;
+CellSelectionPlugin.prototype._dragging = false;
 /** @override
 * @return {string}
 */
 CellSelectionPlugin.prototype.getName = function () {
-  return "CellSelectionPlugin";
+	return "CellSelectionPlugin";
 };
 
 /** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
@@ -237,120 +238,129 @@ CellSelectionPlugin.prototype.getName = function () {
 * @public
 * @return {boolean}
 */
-CellSelectionPlugin.prototype.hasMultiTableSupport = function () {
-  return true;
+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);
-
-  // Set Behavior events.
-  // the onblur event does not bubble
-  host.getParent().addEventListener('blur', this._onBlur, true);
-  host.listen("focusout", this._onBlur);
-  host.listen("copy", this._onCopy);
-
-  // Listen keydown from other hosts
-  if (this._tabToSelect) {
-    host.listen("keydown", this._onTab);
-  }
-  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);
+	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);
+
+	// Listen keydown from other hosts
+	if(this._tabToSelect) {
+		host.listen("keydown", this._onTab);
+	}
+
+	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) {
-  var 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.getParent().removeEventListener('blur', this._onBlur);
-  host.unlisten("keydown", this._onTab);
-  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);
-  if (!this._hosts.length) {
-    this._compositeGrid = null;
-    this._realTimeGrid = null;
-  }
+	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._onTab);
+
+	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;
-  }
-  var pluginOption = options["cellSelection"];
-  if (!pluginOption) {
-    return;
-  }
-
-  // Mode
-  var val = pluginOption["mode"];
-  this._mode = val ? val : this._mode;
-
-  // Is multiple selection
-  val = pluginOption["multipleSelection"];
-  this._allowMultipleSelection = val != null ? val : this._allowMultipleSelection;
-  if (!this._allowMultipleSelection) {
-    this._mouseTrait.removeEventListener("mouseMove", this._onMouseMove);
-  }
-
-  // Auto deselecting on blue
-  val = pluginOption["autoDeselecting"];
-  this._autoDeselecting = val != null ? val : this._autoDeselecting;
-
-  // selectable sections
-  val = pluginOption["selectableSections"];
-  if (val) {
-    this.setSelectableSections(val);
-  }
-
-  // Listen keydown from the first host
-  val = pluginOption["tabToSelect"];
-  if (val) {
-    this._tabToSelect = true;
-    if (this._hosts[0]) {
-      this._hosts[0].listen("keydown", this._onTab);
-    }
-  }
-
-  // event callback
-  this.addListener(pluginOption, "selectionChanged");
-  this.addListener(pluginOption, "copy");
-  this.addListener(pluginOption, "beforeMouseDown");
+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;
+		if(this._hosts[0]) {
+			this._hosts[0].listen("keydown", this._onTab);
+		}
+	}
+
+	// event callback
+	this.addListener(pluginOption, "selectionChanged");
+	this.addListener(pluginOption, "copy");
+	this.addListener(pluginOption, "beforeMouseDown");
 };
 
 /** @public
@@ -358,110 +368,82 @@ CellSelectionPlugin.prototype.config = function (options) {
 * @return {!Object}
 */
 CellSelectionPlugin.prototype.getConfigObject = function (gridOptions) {
-  var obj = gridOptions || {};
-  var 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._tabToSelect) {
-    extOptions.tabToSelect = true;
-  }
-  var unSelectables = this._unselectables;
-  var sections = [];
-  for (var sectionName in unSelectables) {
-    if (!unSelectables[sectionName]) {
-      sections.push(sectionName);
-    }
-  }
-  if (sections.length > 0 && sections.length < 3) {
-    extOptions.selectableSections = sections;
-  }
-  return obj;
-};
-/** @public
-* @description Emitate the mousedown event. This is for testing purpose.
-* @ignore
-* @param {number} colIndex
-* @param {number} rowIndex
-*/
-CellSelectionPlugin.prototype.mockMouseClick = function (colIndex, rowIndex) {
-  var host = this._hosts[0];
-  host.focus(); // Used for blur event triggering
-  var evt = this._mockMouseEvent(colIndex, rowIndex);
-  this._onMouseDown(evt);
-  this._onMouseUp(evt);
-};
-/** @public
-* @description Emitate the mousedown event. This is for testing purpose.
-* @ignore
-* @param {number} colIndex
-* @param {number} rowIndex
-*/
-CellSelectionPlugin.prototype.mockMouseDown = function (colIndex, rowIndex) {
-  var evt = this._mockMouseEvent(colIndex, rowIndex);
-  this._onMouseDown(evt);
+	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
-* @description Emitate the mousedown event. This is for testing purpose.
 * @ignore
-* @param {number} colIndex
-* @param {number} rowIndex
+* @return {!Object}
 */
-CellSelectionPlugin.prototype.mockMouseUp = function (colIndex, rowIndex) {
-  var evt = this._mockMouseEvent(colIndex, rowIndex);
-  this._onMouseUp(evt);
-};
-/** @public
-* @description Emitate the mousemove event. This is for testing purpose.
-* @ignore
-* @param {number} colIndex
-* @param {number} rowIndex
-* @param {number} x
-* @param {number} y
-* @param {Element} target Specify element out side of Grid to test scrolling
-*/
-CellSelectionPlugin.prototype.mockMouseMove = function (colIndex, rowIndex, x, y, target) {
-  var evt = {
-    clientX: x,
-    clientY: y
-  };
-  evt = this._mockMouseEvent(colIndex, rowIndex, evt);
-  if (target) {
-    evt.target = target;
-    evt.path = [target];
-  } else {
-    evt.path = [evt.target];
-  }
-  this._onMouseMove(evt);
+CellSelectionPlugin.prototype._getEventHandlers = function() {
+	return {
+		"mousedown": this._onMouseDown,
+		"mousemove": this._onMouseMove,
+		"mouseup": this._onMouseUp,
+		"copy": this._onCopy,
+		"blur": this._onBlur,
+		"keydown": this._onTab
+	};
 };
 /** Fire when mouse down.
 * @private
 * @param {MouseEvent} e
 */
 CellSelectionPlugin.prototype._onMouseDown = function (e) {
-  this._draggable = false;
-  if (this._disabled || !this._isClickable(e.target)) {
-    return;
-  }
-  var activeGrid = this.getRelativeGrid(e);
-  var newAnchor = activeGrid.getRelativePosition(e);
-  if (this._unselectables[newAnchor.sectionType]) {
-    return;
-  }
-  this._dispatch('beforeMouseDown', newAnchor);
-  if (newAnchor.cancel) {
-    return;
-  }
-  this._dirty = true;
-  this.selectSingleCell(newAnchor);
-  this._draggable = true;
+	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.
@@ -469,81 +451,89 @@ CellSelectionPlugin.prototype._onMouseDown = function (e) {
 * @param {Event} e
 */
 CellSelectionPlugin.prototype._onMouseMove = function (e) {
-  if (this._disabled || !this._anchor || !this._draggable) {
-    return;
-  }
-  var activeGrid = this._getActiveGrid();
-  var 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']) {
-    var gridHeight = activeGrid.getHeight();
-    var 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;
-    }
-    var x = 0;
-    var 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;
-    }
-    var dirVectors = {
-      "x": x,
-      "y": y
-    };
-
-    // set up scrollSpeed
-    this._setScrollSpeed(dirVectors);
-    var isSameProps = this._checkIsSameProps(dirVectors);
-    if (this._mouseOutOfGrid && isSameProps) {
-      return;
-    }
-    this._dirVectors = dirVectors;
-    this._setScrollInterval(dirVectors);
-    return;
-  }
-  if (this._timeoutID) {
-    clearTimeout(this._timeoutID);
-    this._mouseOutOfGrid = false;
-  }
-  if (this._isTheSamePosition(this._curMouse, newMouse)) {
-    // No selection has been changed
-    return;
-  }
-  this._curMouse = newMouse;
-  this._dirty = true;
-  var tgtRect = this._newSelectionRect();
-  this._updateSelection(tgtRect);
+	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 () {
-  var anchor = this._anchor;
-  if (anchor && anchor["grid"]) {
-    return anchor["grid"];
-  } else {
-    return this._hosts[0];
-  }
+CellSelectionPlugin.prototype._getActiveGrid = function() {
+	let anchor = this._anchor;
+	if(anchor && anchor["grid"]) {
+		return anchor["grid"];
+	} else {
+		return this._hosts[0];
+	}
 };
 
 /** Set scroll speed
@@ -551,11 +541,12 @@ CellSelectionPlugin.prototype._getActiveGrid = function () {
 * @param {Object} dirVectors Indicates direction vectors of mouse
 */
 CellSelectionPlugin.prototype._setScrollSpeed = function (dirVectors) {
-  var basedSped = 300;
-  var scrollSpeed = Math.floor(basedSped - Math.abs((dirVectors.x + dirVectors.y) / 2));
-  if (scrollSpeed % 10 === 0) {
-    this._scrollSpeed = scrollSpeed > 0 || scrollSpeed <= 500 ? scrollSpeed : 50;
-  }
+	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
@@ -563,17 +554,17 @@ CellSelectionPlugin.prototype._setScrollSpeed = function (dirVectors) {
 * @param {number} vector
 * @return {string|null}
 */
-CellSelectionPlugin.prototype._detectDir = function (vector) {
-  var 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;
+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
@@ -581,132 +572,156 @@ CellSelectionPlugin.prototype._detectDir = function (vector) {
 * @param {Object} newDirVectors - indicates direction vectors of mouse
 * @return {boolean}
 */
-CellSelectionPlugin.prototype._checkIsSameProps = function (newDirVectors) {
-  if (!this._dirVectors || !newDirVectors) {
-    return false;
-  }
-  var isX = this._detectDir(this._dirVectors.x) === this._detectDir(newDirVectors.x);
-  var isY = this._detectDir(this._dirVectors.y) === this._detectDir(newDirVectors.y);
-  return isX && isY;
+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) {
-  if (this._timeoutID) {
-    clearTimeout(this._timeoutID);
-  }
-  if (!this._mouseOutOfGrid) {
-    this._mouseOutOfGrid = true;
-  }
-  var tgtRect = this._newSelectionRect();
-  var initialScrollSpeed = this._scrollSpeed || 500;
-  this._timeoutID = setInterval(function () {
-    if (initialScrollSpeed !== this._scrollSpeed) {
-      this._setScrollInterval(dirVectors);
-      return;
-    }
-    var currentScrollTop = this._hosts[0].getScrollTop();
-    var currentScrollLeft = this._hosts[0].getScrollLeft();
-    var isYPositive = dirVectors.y > 0;
-    var isXPositive = dirVectors.x > 0;
-    var cellWidth = this._map[0].section.getCellWidth();
-    var cellHeight = this._map[0].section.getCellHeight();
-    var scrollToTop = isYPositive ? currentScrollTop + cellWidth : currentScrollTop - cellWidth;
-    var scrollToLeft = isXPositive ? currentScrollLeft + cellHeight : currentScrollLeft - cellHeight;
-    if (dirVectors.y !== 0) {
-      // updates scroll position
-      this._hosts[0].setScrollTop(scrollToTop);
-      var vScrollbar = this._hosts[0].getVScrollbar();
-      var rowVirtualizer = this._hosts[0].getRowVirtualizer();
-      var isEndOfVerticalScroll = this._isEndOfVerticalScroll();
-      var vTrackHeight = vScrollbar.getHeight();
-      var scrollViewOffset = rowVirtualizer.getViewOffset();
-
-      // scrolling down
-      if (isYPositive) {
-        var 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 {
-        var 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));
-      var isEndOfHorizontalScroll = this._isEndOfHorizontalScroll();
-      var hScrollbar = this._hosts[0].getHScrollbar();
-      var hTrackWidth = hScrollbar.getTrackSize();
-
-      // scrolling right
-      if (isXPositive) {
-        var leftPinnedWidth = 0;
-        var leftPinnedCount = this._hosts[0].getPinnedLeftColumnCount();
-
-        // getting width of left pinned columns
-        if (leftPinnedCount) {
-          leftPinnedWidth = this._hosts[0].getContentWidth() - hScrollbar.getContentWidth();
-        }
-        var 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 {
-        var 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);
+	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 () {
-  var getScrollTop = this._hosts[0].getScrollTop();
-  return getScrollTop === 0 || getScrollTop + this._hosts[0].getHeight() > this._hosts[0].getScrollHeight();
+	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 () {
-  var hScrollbar = this._hosts[0].getHScrollbar();
-  return hScrollbar.isEndOfHorizontalScroll() || this._hosts[0].getScrollLeft() == 0;
+	let hScrollbar = this._hosts[0].getHScrollbar();
+	return hScrollbar.isEndOfHorizontalScroll() || this._hosts[0].getScrollLeft() == 0;
 };
 
 /** Fire when draging was end.
@@ -714,81 +729,33 @@ CellSelectionPlugin.prototype._isEndOfHorizontalScroll = function () {
 * @param {Object} e
 */
 CellSelectionPlugin.prototype._onMouseUp = function (e) {
-  if (this._timeoutID) {
-    clearTimeout(this._timeoutID);
-    this._mouseOutOfGrid = false;
-  }
-  if (this._disabled || !this._dirty) {
-    return;
-  }
-  this._draggable = false;
-
-  // WORKAROUND: FOR IE11
-  if (this._isIE) {
-    // timestamp to use in onblur event
-    this._lastMouseUpTimeStamp = e.timeStamp;
-  }
-  this._updateSelectionText();
-  this._dispatch("selectionChanged", {});
-  this._dirty = false;
-};
-
-/** to update selection text
-* @private
-*/
-CellSelectionPlugin.prototype._updateSelectionText = function () {
-  // Native copy event will not be triggered, if there's no text selection.
-  // So we will select text in hiddenInput
-  // we can only use selection.addRange because it not hijack focus of other element
-  // EXCEPT IE11 there is no way to select text without changing focus element
-  var hiddenInput = this._getGridHiddenInput();
-  if (hiddenInput) {
-    var selection = window.getSelection();
-    var selectionText;
-    if (this._isIE) {
-      selectionText = this._textRange.htmlText;
-    } else {
-      selectionText = selection.toString();
-    }
-
-    // we cannot set start with hidden input
-    // it will cause error in IE11
-    // So we use hiddenInput parent instead
-    if (!selectionText) {
-      this._textRange.setStart(hiddenInput.parentNode, 0);
-      this._textRange.setEnd(hiddenInput, 0);
-      selection.removeAllRanges();
-
-      // THIS WILL CAUSE IE11 FIRE BLUR EVENT AND CHANG FOCUS
-      selection.addRange(this._textRange);
-      // Cause in IE11, active element will change when perform text select
-      // so we will make current grid focus again
-      if (this._isIE) {
-        this._getActiveGrid().focus();
-      }
-    }
-  }
+	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", {});
 };
 
-/** Fire when out of focus.
-* @private
+/** @private
 * @param {Object} e
 */
-CellSelectionPlugin.prototype._onBlur = function (e) {
-  if (this._dirty) {
-    // Prevent onBlur while dragging
-    return;
-  } else if (!this._autoDeselecting) {
-    return;
-  } else if (this._lastMouseUpTimeStamp && e.timeStamp - this._lastMouseUpTimeStamp < 100) {
-    // should use more than 100 millisec
-    // WORKAROUND: FOR IE11
-    // if onblur fire immediately after mouseup event
-    // we will ignore this blur event
-    return;
-  } else if (this.deselectAll()) {
-    this._dispatch("selectionChanged", {});
-  }
+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.deselectAll()) {
+		this._dispatch("selectionChanged", {});
+	}
 };
 
 /** to remove selection UI when column moved, then postSectionData will rerender selection UI again
@@ -796,44 +763,41 @@ CellSelectionPlugin.prototype._onBlur = function (e) {
 * @param {Object} e
 */
 CellSelectionPlugin.prototype._onColumnMoved = function (e) {
-  var rect = this._curRect;
-  var from = e.fromColIndex;
-  var 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;
-  }
-  var 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 (var rowIndex = rect.top; rowIndex < rect.bottom; rowIndex++) {
-    var rowObj = this._map[rowIndex];
-    rowObj.section.selectCell(clearColIndex, rowObj.rowIndex, false);
-  }
-  // NOTED: No need to reselect after clear selection UI.
-  // postSectionDataBinding will do this job
-
-  this._updateSelectionText();
+	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.
@@ -843,17 +807,28 @@ CellSelectionPlugin.prototype._onColumnMoved = function (e) {
 * @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;
+	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
@@ -861,131 +836,129 @@ CellSelectionPlugin.prototype._isClickable = function (elem, activeGrid) {
 * @param {MouseEvent} e
 */
 CellSelectionPlugin.prototype._onCopy = function (e) {
-  var obj = {
-    "grid": this._hosts[0],
-    "sender": this,
-    "data": "",
-    "format": "",
-    "clipboards": []
-  };
-  this._dispatch("copy", obj);
-  var selectionText;
-  if (this._isIE) {
-    selectionText = this._textRange.htmlText;
-  } else {
-    selectionText = window.getSelection().toString();
-  }
-  if (selectionText) {
-    return;
-  }
-  var clipboardData, format;
-  if (e.clipboardData) {
-    clipboardData = e.clipboardData;
-    format = "text/plain";
-  } else {
-    clipboardData = window.clipboardData;
-    format = "Text";
-  }
-  // Set clipboards data to copy api.
-  if (obj.data) {
-    clipboardData.setData(obj.format || format, obj.data);
-  } else {
-    var txt = this.getSelectedText();
-    if (txt) {
-      // Use Native browser event object intead of Google's BrowserEvent
-      clipboardData.setData(format, txt);
-    }
-  }
-  var len = obj.clipboards ? obj.clipboards.length : 0;
-  for (var i = 0; i < len; ++i) {
-    var clipboard = obj.clipboards[i];
-    if (clipboard.format) {
-      clipboardData.setData(clipboard.format, clipboard.data || "");
-    }
-  }
-  EventDispatcher.preventDefault(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
 * @param {KeyboardEvent} e
 */
 CellSelectionPlugin.prototype._onTab = function (e) {
-  if (e.keyCode === 9) {
-    // Tab key
-    if (e.altKey || e.ctrlKey) {
-      return;
-    }
-    var ret = e.shiftKey ? this.selectPrevCell() : this.selectNextCell();
-    if (ret) {
-      EventDispatcher.preventDefault(e);
-    }
-  }
+	if(e.keyCode === 9) { // Tab key
+		if(e.altKey || e.ctrlKey || e.metaKey) {
+			return;
+		}
+		let ret = (e.shiftKey) ? this.selectPrevCell() : this.selectNextCell();
+		if(ret) {
+			EventDispatcher.preventDefault(e);
+		}
+	}
 };
 
 /** @private
 * @param {Object} e for cell style binding
 */
 CellSelectionPlugin.prototype._onPostSectionDataBinding = function (e) {
-  var activeGrid = this._getActiveGrid();
-  if (this.getSelectionCount() > 0 && activeGrid === e.sender) {
-    // let colCount = this._hosts[0].getColumnCount();
-    var rowOffset = e.section.getRowOffset();
-    var selectionRowStart = this._curRect.top - rowOffset;
-    var selectionRowEnd = this._curRect.bottom - rowOffset;
-    var selectionColStart = this._curRect.left;
-    var selectionColEnd = this._curRect.right;
-    var 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);
-        }
-      }
-    }
-  }
-};
-
-/** Get content string in the cell.
-* @private
-* @param {string} elem
-* @return {boolean}
-*/
-CellSelectionPlugin.prototype._isString = function (elem) {
-  return Object.prototype.toString.call(elem) === "[object String]";
+	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 () {
-  var sectionCount = this._hosts[0].getSectionCount();
-  var totalRow = 0;
-  var rowOffset = 0;
-  this._hasCellSpan = false;
-  var activeGrid = this._getActiveGrid();
-  for (var i = 0; i < sectionCount; ++i) {
-    var sectionSettings = activeGrid.getSectionSettings(i);
-    var section = sectionSettings.getSection();
-    var hasCellSpan = section.hasCellSpan();
-    var rowCount = section.getRowCount();
-    for (var j = 0; j < rowCount; ++j) {
-      var 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;
+	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
@@ -993,13 +966,13 @@ CellSelectionPlugin.prototype._cacheSectionMap = function () {
 * @return {number}
 */
 CellSelectionPlugin.prototype._getCumulativeIndex = function (obj) {
-  var 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"];
+	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.
@@ -1007,40 +980,43 @@ CellSelectionPlugin.prototype._getCumulativeIndex = function (obj) {
 * @return {!Object} Rectangle
 */
 CellSelectionPlugin.prototype._newSelectionRect = function () {
-  if (!this._anchor || !this._curMouse) {
-    return this._curRect;
-  }
-  var rect = {};
-  if (this._mode !== "row") {
-    if (this._anchor["colIndex"] <= this._curMouse["colIndex"]) {
-      rect.left = this._anchor["colIndex"];
-      rect.right = this._curMouse["colIndex"] + 1;
-    } else {
-      rect.left = this._curMouse["colIndex"];
-      rect.right = this._anchor["colIndex"] + 1;
-    }
-  } else {
-    rect.left = 0;
-    rect.right = this._hosts[0].getColumnCount();
-  }
-
-  // Required
-  var cIndex = this._getCumulativeIndex(this._curMouse);
-  var 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;
+	if(!this._anchor || !this._curMouse) {
+		return this._curRect;
+	}
+
+	let rect = {};
+	if(this._mode !== "row") {
+		if(this._anchor["colIndex"] <= this._curMouse["colIndex"]) {
+			rect.left = this._anchor["colIndex"];
+			rect.right = this._curMouse["colIndex"] + 1;
+		} else {
+			rect.left = this._curMouse["colIndex"];
+			rect.right = this._anchor["colIndex"] + 1;
+		}
+	} else {
+		rect.left = 0;
+		rect.right = this._hosts[0].getColumnCount();
+	}
+
+	// Required
+	let cIndex = this._getCumulativeIndex(this._curMouse);
+	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)
@@ -1048,33 +1024,31 @@ CellSelectionPlugin.prototype._newSelectionRect = function () {
 * @param {Object} rect
 */
 CellSelectionPlugin.prototype._scanCellSpans = function (rect) {
-  if (!this._hasCellSpan) {
-    return;
-  }
-  var c = 0,
-    r = 0;
-  var 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);
+	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
@@ -1084,56 +1058,55 @@ CellSelectionPlugin.prototype._scanCellSpans = function (rect) {
 * @return {boolean}
 */
 CellSelectionPlugin.prototype._expandRect = function (colIndex, rowIndex, rect) {
-  var obj = this._map[rowIndex];
-  if (!obj.hasCellSpan) {
-    return false;
-  }
-  if (this._unselectables[obj.type] === true) {
-    return false;
-  }
-  var changed = false;
-  var newIndex = 0;
-  var 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;
-    }
-  }
-  var 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;
+	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.
@@ -1141,46 +1114,49 @@ CellSelectionPlugin.prototype._expandRect = function (colIndex, rowIndex, rect)
 * @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;
-  var activeGrid = this._getActiveGrid();
-  if (activeGrid) {
-    var x = this._curRect.left;
-    var y = this._curRect.top;
-    var mapInfo = this._map[y];
-    var w = 0;
-    var h = 0;
-    if (mapInfo) {
-      w = this._curRect.right - x;
-      h = this._curRect.bottom - y;
-      y -= mapInfo.rowOffset;
-      var contentType = mapInfo.type;
-      if (contentType === "content") {
-        var contentSect = activeGrid.getSection("content");
-        if (contentSect) {
-          contentSect.setCellBounds(x, y, w, h);
-        }
-      } else {
-        var titleSect = activeGrid.getSection("title");
-        if (titleSect) {
-          titleSect.setCellBounds(x, y, w, h);
-        }
-      }
-    }
-  }
+	// 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.
@@ -1189,24 +1165,23 @@ CellSelectionPlugin.prototype._updateSelection = function (tgtRect) {
 * @param {number} to Exclusive destination index
 */
 CellSelectionPlugin.prototype._updateColumnSelection = function (from, to) {
-  if (from === to) {
-    return;
-  }
-  var 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);
-      }
-    }
-  }
+	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.
@@ -1215,24 +1190,23 @@ CellSelectionPlugin.prototype._updateColumnSelection = function (from, to) {
 * @param {number} to Exclusive destination index
 */
 CellSelectionPlugin.prototype._updateRowSelection = function (from, to) {
-  if (from === to) {
-    return;
-  }
-  var 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);
-      }
-    }
-  }
+	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
@@ -1241,10 +1215,10 @@ CellSelectionPlugin.prototype._updateRowSelection = function (from, to) {
 * @param {boolean} isSelect
 */
 CellSelectionPlugin.prototype._selectAsPosition = function (rowIndex, colIndex, isSelect) {
-  var mapInfo = this._map[rowIndex];
-  if (mapInfo && !this._unselectables[mapInfo.type]) {
-    mapInfo.section.selectCell(colIndex, mapInfo.rowIndex, 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.
@@ -1254,13 +1228,14 @@ CellSelectionPlugin.prototype._selectAsPosition = function (rowIndex, colIndex,
 * @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;
+	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>
@@ -1269,10 +1244,11 @@ CellSelectionPlugin.prototype._isTheSamePosition = function (cellA, cellB) {
 * @return {Element}
 */
 CellSelectionPlugin.prototype._getGridHiddenInput = function () {
-  if (this._hosts[0]) {
-    return this._hosts[0].getHiddenInput();
-  }
-  return null;
+	if(this._hosts[0]) {
+		return this._hosts[0].getHiddenInput();
+	}
+
+	return null;
 };
 
 /** Get text from selected cells. If no selection, return empty string. <br>
@@ -1283,69 +1259,72 @@ CellSelectionPlugin.prototype._getGridHiddenInput = function () {
 * @return {string}
 */
 CellSelectionPlugin.prototype.getSelectedText = function () {
-  var activeGrid = this._getActiveGrid();
-  if (!activeGrid || !this.getGridApi() || this.getSelectionCount() <= 0) return "";
-  var ret_txt = "";
-  var dv = activeGrid.getDataSource();
-  for (var r = this._curRect.top; r < this._curRect.bottom; ++r) {
-    var rowMapping = this._map[r];
-    if (r !== this._curRect.top) {
-      ret_txt += "\n";
-    }
-    var rowData = null;
-    if (this._unselectables[rowMapping.type] === true) {
-      continue;
-    } else if (rowMapping.type === 'content') {
-      rowData = this._getRow(dv, rowMapping.rowIndex);
-    }
-    for (var 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) {
-          var cField = this._getField(c);
-          ret_txt += prepareTSVContent(rowData[cField]);
-        }
-      } else {
-        // other section not has row virtualization
-        // so we can get text from cell directly
-        var txt = rowMapping.section.getCell(c, rowMapping.rowIndex).getTextContent();
-        ret_txt += prepareTSVContent(txt);
-      }
-    }
-  }
-  return ret_txt;
+	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 () {
-  var activeGrid = this._getActiveGrid();
-  var 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", {});
+	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.
@@ -1353,32 +1332,31 @@ CellSelectionPlugin.prototype.selectAll = function () {
 * @return {boolean} true if there is any change
 */
 CellSelectionPlugin.prototype.deselectAll = function () {
-  if (this.getSelectionCount() <= 0) {
-    return false;
-  }
-
-  // clear selection from ui
-  var activeGrid = this._getActiveGrid();
-  if (activeGrid) {
-    var selectedCells = activeGrid.getElement().querySelectorAll("div.cell.selection"); // TODO: Move this logic to core grid
-    var c = selectedCells.length;
-    for (var i = 0; i < c; i++) {
-      selectedCells[i].classList.remove('selection');
-    }
-    var contentSect = activeGrid.getSection("content");
-    if (contentSect) {
-      contentSect.setCellBounds(0, 0, 0, 0);
-    }
-    var 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;
+	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
@@ -1386,9 +1364,9 @@ CellSelectionPlugin.prototype.deselectAll = function () {
 * @return {number}
 */
 CellSelectionPlugin.prototype.getSelectionCount = function () {
-  var width = this._curRect.right - this._curRect.left;
-  var height = this._curRect.bottom - this._curRect.top;
-  return width * height;
+	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
@@ -1397,25 +1375,24 @@ CellSelectionPlugin.prototype.getSelectionCount = function () {
 * @return {Object}
 */
 CellSelectionPlugin.prototype.getSelectionBounds = function (opt_ret) {
-  if (this.getSelectionCount() <= 0) {
-    return null;
-  }
-  var 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) {
-    var 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;
+	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
@@ -1424,14 +1401,13 @@ CellSelectionPlugin.prototype.getSelectionBounds = function (opt_ret) {
 * @return {Object}
 */
 CellSelectionPlugin.prototype.getLastSelectionBounds = function (opt_ret) {
-  if (this._lastSelection === null) {
-    return null;
-  }
-  var obj = opt_ret != null ? opt_ret : {};
-  for (var key in this._lastSelection) {
-    obj[key] = this._lastSelection[key];
-  }
-  return obj;
+	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 ]
@@ -1439,21 +1415,22 @@ CellSelectionPlugin.prototype.getLastSelectionBounds = function (opt_ret) {
 * @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;
-  }
-  var list = typeof types === "string" ? [types] : types;
-  for (var i = list.length; --i >= 0;) {
-    this._unselectables[list[i]] = false;
-  }
+	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.
@@ -1463,21 +1440,23 @@ CellSelectionPlugin.prototype.setSelectableSections = function (types) {
 * extension.selectSingleCell({colIndex: 1, rowIndex: 0});
 */
 CellSelectionPlugin.prototype.selectSingleCell = function (anchor) {
-  this.deselectAll();
-  if (!anchor) {
-    return;
-  }
-  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;
-  var tgtRect = this._newSelectionRect();
-  this._updateSelection(tgtRect);
+	this.deselectAll();
+
+	if(!anchor) { return; }
+
+	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.
@@ -1489,24 +1468,26 @@ CellSelectionPlugin.prototype.selectSingleCell = function (anchor) {
 * });
 */
 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;
-  var tgtRect = this._newSelectionRect();
-  this._updateSelection(tgtRect);
+	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);
 };
 
 /** Select next cell from the current selection anchor.
@@ -1514,76 +1495,64 @@ CellSelectionPlugin.prototype.selectCells = function (rect) {
 * @return {boolean} Return true if the next cell is selected, otherwise false
 */
 CellSelectionPlugin.prototype.selectNextCell = function () {
-  var newAnchor;
-  if (this._anchor) {
-    // TODO: Handle looping
-    var activeGrid = this._getActiveGrid();
-    if (this._mode == "row") {
-      newAnchor = activeGrid.getCellInfo({
-        "colIndex": 0,
-        "rowIndex": this._anchor["rowIndex"] + 1
-      });
-    } else if (this._mode == "column") {
-      newAnchor = activeGrid.getCellInfo({
-        "colIndex": this._anchor["colIndex"] + 1,
-        "rowIndex": 0
-      });
-    } else {
-      newAnchor = activeGrid.getNextCell(this._anchor);
-      if (newAnchor && !newAnchor.cell) {
-        newAnchor = null; // Last cell in the last row has been reached
-      }
-    }
-
-    // Need to store active-grid
-    if (newAnchor) {
-      newAnchor.grid = activeGrid;
-    }
-    this.selectSingleCell(newAnchor);
-  }
-  return newAnchor ? true : false;
+	let newAnchor;
+	if(this._anchor) { // TODO: Handle looping
+		let activeGrid = this._getActiveGrid();
+		if(this._mode == "row") {
+			newAnchor = activeGrid.getCellInfo({"colIndex": 0, "rowIndex": this._anchor["rowIndex"] + 1});
+		} else if(this._mode == "column") {
+			newAnchor = activeGrid.getCellInfo({"colIndex": this._anchor["colIndex"] + 1, "rowIndex": 0});
+		} else {
+			newAnchor = activeGrid.getNextCell(this._anchor);
+			if(newAnchor && !newAnchor.cell) {
+				newAnchor = null; // Last cell in the last row has been reached
+			}
+		}
+
+		// Need to store active-grid
+		if(newAnchor) {
+			newAnchor.grid = activeGrid;
+		}
+
+		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 () {
-  var newAnchor;
-  if (this._anchor) {
-    // TODO: Handle looping
-    var activeGrid = this._getActiveGrid();
-    if (this._mode == "row") {
-      newAnchor = activeGrid.getCellInfo({
-        "colIndex": 0,
-        "rowIndex": this._anchor["rowIndex"] - 1
-      });
-    } else if (this._mode == "column") {
-      newAnchor = activeGrid.getCellInfo({
-        "colIndex": this._anchor["colIndex"] - 1,
-        "rowIndex": 0
-      });
-    } else {
-      newAnchor = activeGrid.getPrevCell(this._anchor);
-      if (newAnchor && !newAnchor.cell) {
-        newAnchor = null; // The first cell in the first row has been reached
-      }
-    }
-
-    // Need to store active-grid
-    if (newAnchor) {
-      newAnchor.grid = activeGrid;
-    }
-    this.selectSingleCell(newAnchor);
-  }
-  return newAnchor ? true : false;
+	let newAnchor;
+	if(this._anchor) { // TODO: Handle looping
+		let activeGrid = this._getActiveGrid();
+		if(this._mode == "row") {
+			newAnchor = activeGrid.getCellInfo({"colIndex": 0, "rowIndex": this._anchor["rowIndex"] - 1});
+		} else if(this._mode == "column") {
+			newAnchor = activeGrid.getCellInfo({"colIndex": this._anchor["colIndex"] - 1, "rowIndex": 0});
+		} else {
+			newAnchor = activeGrid.getPrevCell(this._anchor);
+			if(newAnchor && !newAnchor.cell) {
+				newAnchor = null; // The first cell in the first row has been reached
+			}
+		}
+
+		// Need to store active-grid
+		if(newAnchor) {
+			newAnchor.grid = activeGrid;
+		}
+
+		this.selectSingleCell(newAnchor);
+	}
+	return newAnchor ? true : false;
 };
 /** Get information about current selection anchor
 * @public
 * @return {Object} MouseInfo
 */
 CellSelectionPlugin.prototype.getAnchorInfo = function () {
-  var activeGrid = this._getActiveGrid();
-  return activeGrid.getCellInfo(this._anchor);
+	let activeGrid = this._getActiveGrid();
+	return activeGrid.getCellInfo(this._anchor);
 };
 
 /** Use to get selected cells.
@@ -1591,17 +1560,21 @@ CellSelectionPlugin.prototype.getAnchorInfo = function () {
 * @return {Array.<Array>} 2D array of cells
 */
 CellSelectionPlugin.prototype.getSelectedCells = function () {
-  var selectedCells = [];
-  for (var r = this._curRect.top; r < this._curRect.bottom; ++r) {
-    var obj = this._map[r];
-    var cells = [];
-    for (var c = this._curRect.left; c < this._curRect.right; ++c) {
-      var cell = obj.section.getCell(c, obj.rowIndex);
-      cells.push(cell);
-    }
-    selectedCells.push(cells);
-  }
-  return selectedCells;
+	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
@@ -1609,7 +1582,7 @@ CellSelectionPlugin.prototype.getSelectedCells = function () {
 * @param {boolean=} opt_disable
 */
 CellSelectionPlugin.prototype.disableSelection = function (opt_disable) {
-  this._disabled = opt_disable !== false;
+	this._disabled = (opt_disable !== false);
 };
 
 /** Use to set Auto Deselecting when blur.
@@ -1617,7 +1590,7 @@ CellSelectionPlugin.prototype.disableSelection = function (opt_disable) {
 * @param {boolean} bool
 */
 CellSelectionPlugin.prototype.setAutoDeselectingOnBlur = function (bool) {
-  this._autoDeselecting = bool;
+	this._autoDeselecting = bool;
 };
 
 /** Use to get state Auto Deselecting.
@@ -1625,7 +1598,10 @@ CellSelectionPlugin.prototype.setAutoDeselectingOnBlur = function (bool) {
 * @return {boolean}
 */
 CellSelectionPlugin.prototype.getAutoDeselectingOnBlur = function () {
-  return this._autoDeselecting;
+	return this._autoDeselecting;
 };
+
+
+
 export default CellSelectionPlugin;
-export { CellSelectionPlugin, CellSelectionPlugin as CellSelection, CellSelectionPlugin as CellSelectionExtension };
+export { CellSelectionPlugin, CellSelectionPlugin as CellSelection, CellSelectionPlugin as CellSelectionExtension };