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

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

@@ -0,0 +1,1777 @@
+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";
+/** @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 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 {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
+*/
+
+/** @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).
+*/
+
+/** @event CellSelectionPlugin#beforeMouseDown
+* @description Happens when mouse is down.
+* @type {Object}
+* @property {boolean=} cancel Set to true to cancel operation.
+*/
+
+/** Active cell selected.
+* @private
+* @param {Object} cell
+*/
+
+var selectCell = function selectCell(cell) {
+  if (cell) cell.enableClass("selection", true);
+};
+/** Deactive cell selected.
+* @private
+* @param {Object} cell
+*/
+
+
+var deselectCell = function deselectCell(cell) {
+  if (cell) cell.enableClass("selection", false);
+};
+/** @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
+    });
+  }
+};
+
+Ext.inherits(CellSelectionPlugin, GridPlugin);
+/** @type {Range}
+* @private
+*/
+
+CellSelectionPlugin.prototype._textRange = null;
+/** 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;
+/** 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.
+* @type {boolean}
+* @private
+*/
+
+CellSelectionPlugin.prototype._autoDeselecting = true;
+/** Turn on/off cell selection.
+* @type {boolean}
+* @private
+*/
+
+CellSelectionPlugin.prototype._disabled = false;
+/** Trait Mouse Down
+* @type {MouseDownTrait}
+* @private
+*/
+
+CellSelectionPlugin.prototype._mouseTrait = null;
+/** Allow user to select multiple cell.
+* @type {boolean}
+* @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
+};
+/** 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._timeoutID = 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._draggable = 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); // 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);
+  }
+};
+/** 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;
+  }
+};
+/** 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");
+};
+/** @public
+* @param {Object=} gridOptions
+* @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;
+};
+/** 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);
+  activeGrid.setAttribute("draggable", "true");
+  this._draggable = true;
+};
+/** Fire when mouse is draging.
+* @private
+* @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);
+
+  if (newMouse.sectionIndex === 0) {
+    // prevent first row (header) selection
+    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);
+};
+/** 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];
+  }
+};
+/** Set scroll speed
+* @private
+* @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;
+  }
+};
+/** Detect direction vector
+* @private
+* @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;
+};
+/** 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;
+  }
+
+  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;
+};
+/** @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;
+    var addCount = 1;
+
+    if (dirVectors.y !== 0) {
+      // updates scroll position
+      this._hosts[0].setScrollTop(scrollToTop);
+
+      var vScrollView = this._hosts[0].getVScrollView();
+
+      var isEndOfVerticalScroll = this._isEndOfVerticalScroll();
+
+      if (isYPositive) {
+        var nextBottomVal = vScrollView.lastFullRow;
+
+        if (!!(this._prevRect && this._prevRect.bottom > nextBottomVal) && !isEndOfVerticalScroll) {
+          tgtRect.top = nextBottomVal;
+        } else {
+          if (isEndOfVerticalScroll) {
+            tgtRect.bottom = this._hosts[0].getRowCount();
+          } else {
+            tgtRect.bottom = nextBottomVal;
+          }
+        }
+      } else {
+        var nextTopVal = vScrollView.firstFullRow + 2;
+
+        if (!!(this._prevRect && this._prevRect.top < nextTopVal) && !isEndOfVerticalScroll) {
+          tgtRect.bottom = nextTopVal + addCount;
+        } else {
+          if (isEndOfVerticalScroll) {
+            tgtRect.top = 1;
+          } else {
+            tgtRect.top = nextTopVal;
+          }
+        }
+      }
+    }
+
+    if (dirVectors.x !== 0) {
+      // updates scroll position
+      this._hosts[0].setScrollLeft(Math.floor(scrollToLeft));
+
+      var isEndOfHorizontalScroll = this._isEndOfHorizontalScroll();
+
+      var gridWidth = this._hosts[0].getWidth();
+
+      var curColumnWidth = this._hosts[0].getColumnWidth(tgtRect.right + addCount);
+
+      if (isXPositive) {
+        var leftColumnPosition = this._hosts[0].getColumnLeft(tgtRect.right + addCount);
+
+        var rightColPos = this._hosts[0].getColumnLeft(tgtRect.right);
+
+        var rightSps = this._hosts[0].getColumnRight(tgtRect.left + 2);
+
+        var rightPosition = gridWidth - curColumnWidth;
+
+        if (leftColumnPosition < rightPosition) {
+          do {
+            tgtRect.right += addCount;
+          } while (this._hosts[0].getColumnLeft(tgtRect.right + addCount) < rightPosition);
+        } else {
+          if (rightColPos - cellWidth - gridWidth > 0 && leftColumnPosition > rightColPos && rightSps < gridWidth) {
+            do {
+              tgtRect.left += addCount;
+            } while (this._hosts[0].getColumnLeft(tgtRect.right + addCount) > rightColPos);
+          } else if (isEndOfHorizontalScroll) {
+            tgtRect.right = this._hosts[0].getColumnCount();
+          }
+        }
+      } else {
+        var rightColumnPosition = this._hosts[0].getColumnRight(tgtRect.left - addCount);
+
+        var leftColPos = this._hosts[0].getColumnRight(tgtRect.left);
+
+        var colPos = this._hosts[0].getColumnRight(tgtRect.right - 2);
+
+        if (rightColumnPosition - curColumnWidth > 0) {
+          tgtRect.left -= addCount;
+        } else {
+          if (leftColPos - cellWidth < 0 && rightColumnPosition < leftColPos && colPos > curColumnWidth * 2) {
+            tgtRect.right -= addCount;
+          } 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();
+};
+/** @private
+* @return {boolean}
+*/
+
+
+CellSelectionPlugin.prototype._isEndOfHorizontalScroll = function () {
+  var getScrollTop = this._hosts[0].getScrollLeft();
+
+  return getScrollTop === 0 || getScrollTop + this._hosts[0].getWidth() > this._hosts[0].getScrollWidth();
+};
+/** Fire when draging was end.
+* @private
+* @param {Object} e
+*/
+
+
+CellSelectionPlugin.prototype._onMouseUp = function (e) {
+  if (this._timeoutID) {
+    clearTimeout(this._timeoutID);
+    this._mouseOutOfGrid = false;
+  }
+
+  if (this._disabled || !this._dirty) {
+    return;
+  }
+
+  this._hosts[0].removeAttribute("draggable");
+
+  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) {
+    // we cannot set start with hidden input
+    // it will cause error in IE11
+    // So we use hiddenInput parent instead
+    this._textRange.setStart(hiddenInput.parentNode, 0);
+
+    this._textRange.setEnd(hiddenInput, 0);
+
+    var selection = window.getSelection();
+    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().getParent().focus();
+  }
+};
+/** Fire when out of focus.
+* @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", {});
+  }
+};
+/** to remove selection UI when column moved, then postSectionData will rerender selection UI again
+* @private
+* @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];
+    var cell = rowObj.section.getCell(clearColIndex, rowObj.rowIndex);
+    deselectCell(cell);
+  } // NOTED: No need to reselect after clear selection UI.
+  // postSectionDataBinding will do this job
+
+
+  this._updateSelectionText();
+};
+/** 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;
+};
+/** 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) {
+  var obj = {
+    "grid": this._hosts[0],
+    "sender": this,
+    "data": "",
+    "format": "",
+    "clipboards": []
+  };
+
+  this._dispatch("copy", obj);
+
+  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);
+};
+/** @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);
+    }
+  }
+};
+/** @private
+* @param {Object} e for cell style binding
+*/
+
+
+CellSelectionPlugin.prototype._onPostSectionDataBinding = function (e) {
+  var activeGrid = this._getActiveGrid();
+
+  if (this.getSelectionCount() > 0 && activeGrid === e.sender) {
+    // var 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 cell, 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++) {
+          cell = e.section.getCell(colIndex, rowIndex);
+          selectCell(cell);
+        }
+      } else {
+        for (colIndex = selectionColStart; colIndex < selectionColEnd; colIndex++) {
+          cell = e.section.getCell(colIndex, rowIndex);
+          deselectCell(cell);
+        }
+      }
+    }
+  }
+};
+/** 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]";
+};
+/** @private */
+
+
+CellSelectionPlugin.prototype._cacheSectionMap = function () {
+  var sectionCount = this._hosts[0].getSectionCount();
+
+  var totalRow = 0,
+      rowCount = 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();
+    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.type = sectionSettings.getType();
+      this._map[totalRow] = obj;
+      totalRow++;
+    }
+
+    this._hasCellSpan |= hasCellSpan;
+  }
+
+  this._map.length = totalRow;
+};
+/** @private
+* @param {Object} obj
+* @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"];
+};
+/** Add new selection rectangle area.
+* @private
+* @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;
+};
+/** we will expand rect by cell span (cell merged)
+* @private
+* @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);
+};
+/** @private
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {Object} 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;
+};
+/** 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;
+};
+/** 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;
+  }
+
+  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);
+      }
+    }
+  }
+};
+/** 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;
+  }
+
+  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);
+      }
+    }
+  }
+};
+/** @private
+* @param {number} rowIndex
+* @param {number} colIndex
+* @param {boolean} isSelect
+*/
+
+
+CellSelectionPlugin.prototype._selectAsPosition = function (rowIndex, colIndex, isSelect) {
+  var mapInfo = this._map[rowIndex];
+  if (!mapInfo || this._unselectables[mapInfo.type] === true) return;
+  var cell = mapInfo.section.getCell(colIndex, mapInfo.rowIndex);
+
+  if (isSelect) {
+    selectCell(cell);
+  } else {
+    deselectCell(cell);
+  }
+};
+/** 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 () {
+  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;
+};
+/** 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", {});
+};
+/** 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
+
+
+  var activeGrid = this._getActiveGrid();
+
+  var selectedCells = activeGrid.getElement().querySelectorAll("div.cell.selection");
+  var c = selectedCells.length;
+
+  for (var i = 0; i < c; i++) {
+    selectedCells[i].classList.remove('selection');
+  }
+
+  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 () {
+  var width = this._curRect.right - this._curRect.left;
+  var 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;
+  }
+
+  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;
+};
+/** 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;
+  }
+
+  var obj = opt_ret != null ? opt_ret : {};
+
+  for (var 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;
+  }
+
+  var list = typeof types === "string" ? [types] : types;
+
+  for (var 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) {
+  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);
+};
+/** Use to select multiple cells, can be selected by rectangle area.
+* @public
+* @param {Object} rect
+*/
+
+
+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);
+};
+/** 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 () {
+  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;
+};
+/** 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;
+};
+/** Get information about current selection anchor
+* @public
+* @return {Object} MouseInfo
+*/
+
+
+CellSelectionPlugin.prototype.getAnchorInfo = function () {
+  var activeGrid = this._getActiveGrid();
+
+  return activeGrid.getCellInfo(this._anchor);
+};
+/** Use to get selected cells.
+* @public
+* @return {Array.<Object>} array of cell
+*/
+
+
+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;
+};
+/** 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 };