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

package/lib/tr-grid-column-resizing/es6/ColumnResizing.js

@@ -0,0 +1,1013 @@
+import {Ext} from '../../tr-grid-util/es6/Ext.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {Dom} from '../../tr-grid-util/es6/Dom.js';
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+
+/** @typedef {Object} ColumnResizingPlugin~Options
+* @description The options can be specified by `columnResizing` property of the main grid's options
+* @property {boolean=} preserveProportion=false By setting this to true, it will try to preserve proportion of the resized column compared to other columns
+* @property {boolean=} preserveGridSize=false By setting this to true, grid size will not change after double click to resize column
+* @property {boolean=} noResizing=false If enabled, all columns cannot be dragged to resize (column can still be resized programmatically). This overrides column config.
+* @property {Function=} columnResized=null Event handler
+* @property {Function=} dblClicked=null Event handler
+* @property {Function=} dragStart=null Event handler
+* @property {Function=} dragEnd=null Event handler
+*/
+
+/** @typedef {Object} ColumnResizingPlugin~ColumnOptions
+* @description The column options can be specified on each individual grid's column option:
+* @property {boolean=} noResizing=false If enabled, it will disable an ability to drag and resize the column
+* @property {number=} defaultWidth Specified default width used when user double clicks the column edge
+*/
+
+/** @event ColumnResizingPlugin#columnResized
+* @description Fired when dragging column edge has ended and the column width has changed
+* @property {number} colIndex
+* @property {number} width
+* @property {Array.<number>} colIndices
+* @property {boolean=} scalability
+*/
+/** @event ColumnResizingPlugin#dblClicked
+* @description Fired when column edge has been double clicked
+* @property {number} colIndex
+*/
+/** @event ColumnResizingPlugin#dragStart */
+/** @event ColumnResizingPlugin#dragEnd */
+
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {ColumnResizingPlugin~Options=} options
+*/
+var ColumnResizingPlugin = function (options) {
+	var t = this;
+	t._onPreSectionRender = t._onPreSectionRender.bind(t);
+	t._requestResizerUpdate = t._requestResizerUpdate.bind(t);
+	t._updateResizers = t._updateResizers.bind(t);
+	t._onTimer = t._onTimer.bind(t);
+	t._onColumnAdded = t._onColumnAdded.bind(t);
+
+	t._onDrag = t._onDrag.bind(t);
+	t._onDragEnd = t._onDragEnd.bind(t);
+	t._onDragStart = t._onDragStart.bind(t);
+	t._onDblClick = t._onDblClick.bind(t);
+	t._updateHandlebar = t._updateHandlebar.bind(t);
+
+	t._hosts = [];
+	t._guideline = Dom.create("svg", "tr-guideline");
+
+	if(options) {
+		t.config({"columnResizing": options});
+	}
+};
+Ext.inherits(ColumnResizingPlugin, GridPlugin);
+
+/** @type {string}
+* @private
+*/
+ColumnResizingPlugin._styles = prettifyCss([
+	".tr-pipe-resizer .resizer", [
+		"display: none;"
+	],
+	".tr-pipe-resizer .selected-column .resizer", [
+		"display: block;",
+		"width: 16px;",
+		"right: 0;",
+		"box-sizing: border-box;",
+		"padding-left: 4px;",
+		"text-align: center;"
+	],
+	".tr-pipe-resizer .selected-column.last .resizer", [
+		"right: 0;"
+	],
+	".tr-pipe-resizer .selected-column .floating-panel", [
+		"display: none;"
+	],
+	".tr-pipe-resizer .selected-column .resizer:before, .tr-pipe-resizer .selected-column .resizer:after", [
+		"content: \"\";",
+		"display: inline-block;",
+		"vertical-align: middle;"
+	],
+	".tr-pipe-resizer .selected-column .resizer:before", [
+		"border-left: 1px solid #ff9933;",
+		"border-right: 1px solid #ff9933;",
+		"width: 2px;",
+		"height: 45%;"
+	],
+	".tr-pipe-resizer .selected-column .resizer:after", [ //Used for vertical alignment
+		"width: 0;", /* Possibly unnecessary */
+		"height: 100%;"
+	],
+	"body:not(.tr-dragging) .tr-pipe-resizer .selected-column>.cell", [
+		"border-right-width: 2px;",
+		"border-right-style: solid;"
+	],
+	".tr-pipe-resizer .selected-column>.cell", [
+		"border-right-color: #ff9933;"
+	],
+	".pearl .tr-pipe-resizer .selected-column .resizer:before, [theme=\"pearl\"] .tr-pipe-resizer .selected-column .resizer:before", [
+		"border-left-color: #ee7600;",
+		"border-right-color: #ee7600;"
+	],
+	".pearl .tr-pipe-resizer .selected-column>.cell [theme=\"pearl\"] .tr-pipe-resizer .selected-column>.cell", [
+		"border-right-color: #ee7600;"
+	],
+	".tr-handlebar", [
+		"position: absolute;",
+		"box-sizing: border-box;",
+		"cursor: e-resize;",
+		"width: 10px;",
+		"margin-left: -4px;",
+		"border-radius: 5px;",
+		"height: 32px;",
+		"top: calc(50% - 16px);",
+		"box-sizing: border-box;",
+		"text-align: center;",
+		"background-color: #ff9933;",
+		"pointer-events: all;"
+	],
+	".tr-dragging .tr-handlebar", [
+		"pointer-events: none;"
+	],
+	".tr-hb-guideline.tr-guideline", [
+		"width: 2px;",
+		"height: 100%;"
+	],
+	".tr-handlebar:before, .tr-handlebar:after", [
+		"content: \"\";",
+		"display: inline-block;",
+		"vertical-align: middle;"
+	],
+	".tr-handlebar:before", [
+		"border-left: 1px solid #000;",
+		"border-right: 1px solid #000;",
+		"width: 2px;", "height: 55%;"
+	],
+	".tr-handlebar:after", [ //Used for vertical alignment
+		"width: 0;", /* Possibly unnecessary */
+		"height: 100%;"
+	]
+]);
+/** @private
+* @param {Object} grid core grid object
+*/
+ColumnResizingPlugin._applyStyles = function(grid) {
+	if(grid && !grid._columnResizingStyles) { // TODO: Support run-time theme loading
+		grid._columnResizingStyles = true; // Prevent loading the same style twice
+		injectCss(ColumnResizingPlugin._styles, grid.getElement());
+	}
+};
+
+/** @type {number}
+* @private
+*/
+ColumnResizingPlugin.prototype._anchorX = 0; // in pixel
+/** @type {number}
+* @private
+*/
+ColumnResizingPlugin.prototype._guideX = 0; // in pixel
+/** @type {number}
+* @private
+*/
+ColumnResizingPlugin.prototype._diffX = 0; // in pixel
+/** @type {number}
+* @private
+*/
+ColumnResizingPlugin.prototype._dragIndex = -1;
+/** Core grid object
+* @type {Object}
+* @private
+*/
+ColumnResizingPlugin.prototype._draggedGrid = null;
+/** @type {boolean}
+* @private
+*/
+ColumnResizingPlugin.prototype._keepProportion = false;
+/** @type {boolean}
+* @private
+*/
+ColumnResizingPlugin.prototype._keepGridSize = false;
+/** @type {boolean}
+* @private
+*/
+ColumnResizingPlugin.prototype._pipe = false;
+/** @type {boolean}
+* @private
+*/
+ColumnResizingPlugin.prototype._hbMode = false;
+/** @type {Element}
+* @private
+*/
+ColumnResizingPlugin.prototype._handlebar = null;
+/** @type {Element}
+* @private
+*/
+ColumnResizingPlugin.prototype._guideline;
+/** @type {number}
+* @private
+*/
+ColumnResizingPlugin.prototype._updateTimer = 0;
+/** @type {Element}
+* @private
+*/
+ColumnResizingPlugin.prototype._activeResizer = null;
+/** @type {Element}
+* @private
+*/
+ColumnResizingPlugin.prototype._disabled = false;
+
+/** @public
+* @return {string}
+*/
+ColumnResizingPlugin.prototype.getName = function () {
+	return "ColumnResizingPlugin"; // Read Only
+};
+/** Remove redundant built-in feature
+* @public
+* @param {string} optionName
+* @param {*} optionVal
+* @return {*} The transformed value of the option
+*/
+ColumnResizingPlugin.prototype.beforeProcessOption = function (optionName, optionVal) {
+	if (optionName == "columnResizability") {
+		return false; // eslint-disable-line
+	}
+	return; // eslint-disable-line
+};
+/** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
+* @public
+* @return {boolean}
+*/
+ColumnResizingPlugin.prototype.hasMultiTableSupport = function () {
+	return true;
+};
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+ColumnResizingPlugin.prototype.initialize = function (host, options) {
+	if(this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	if (this._hosts.length === 1) {
+		host.listen("columnMoved", this._requestResizerUpdate);
+		host.listen("columnRemoved", this._requestResizerUpdate);
+		host.listen("columnAdded", this._requestResizerUpdate);
+		host.listen("columnAdded", this._onColumnAdded);
+	}
+
+	host.listen("preSectionRender", this._onPreSectionRender);
+	this.config(options);
+	ColumnResizingPlugin._applyStyles(host);
+	this._updateResizerCount(host);
+	this._updateResizeHitBoxPosition(host);
+};
+/** @public
+* @param {Object} host core grid object
+*/
+ColumnResizingPlugin.prototype.unload = function (host) {
+	var at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+
+	this._hosts.splice(at, 1);
+	host.unlisten("columnMoved", this._requestResizerUpdate);
+	host.unlisten("columnRemoved", this._requestResizerUpdate);
+	host.unlisten("columnAdded", this._requestResizerUpdate);
+	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("preSectionRender", this._onPreSectionRender);
+
+	if(this._updateTimer) {
+		clearTimeout(this._updateTimer);
+		this._updateTimer = 0;
+	}
+
+	var titleSect = host.getSection("title");
+	if(titleSect) {
+		for(var c = host.getColumnCount(); --c >= 0;) {
+			var col = titleSect.getColumn(c);
+			if(col._resizers) {
+				var len = col._resizers.length;
+				for(var i = 0; i < len; ++i) {
+					var resizer = col._resizers[i];
+					if(resizer.dispose) {
+						resizer.dispose();
+					} else {
+						Dom.removeParent(resizer);
+					}
+				}
+				col._resizers = null;
+			}
+		}
+	}
+
+	if(!this._hosts.length) {
+		this._compositeGrid = null;
+	}
+};
+/** @public
+* @param {Object=} options
+*/
+ColumnResizingPlugin.prototype.config = function (options) {
+	if(!options) { return; }
+	var host = this._hosts[this._hosts.length - 1];
+	var pluginOption = options["columnResizing"];
+	if(pluginOption) {
+		if(pluginOption["preserveProportion"]) {
+			this._keepProportion = true;
+			if(host) {
+				host.preserveProportion(true);
+			}
+		}
+		if(pluginOption["preserveGridSize"]) {
+			this._keepGridSize = true;
+			if(host) {
+				host.preserveGridSize(true);
+			}
+		}
+		if(pluginOption["noResizing"]) {
+			this._disabled = true;
+		}
+		if (pluginOption["pipeHandle"]) {
+			// TODO: Pipe mode has bug when reduce size of column the pipe ui disappear
+			this.enablePipeHandleMode();
+		} else if (pluginOption["handlebar"]) {
+			this.enableHandlebarMode();
+		}
+
+		this.addListener(pluginOption, "columnResized");
+		this.addListener(pluginOption, "dblClicked");
+		this.addListener(pluginOption, "dragStart");
+		this.addListener(pluginOption, "dragEnd");
+	}
+
+	var columns = options["columns"];
+	if(!columns) { return; }
+
+	var len = columns.length;
+	for(var c = 0; c < len; ++c) {
+		this._configColumn(host, c, columns[c]);
+	}
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+ColumnResizingPlugin.prototype.getConfigObject = function (gridOptions) {
+	var obj = gridOptions || {};
+
+	var columns = obj.columns;
+	if (!columns) {
+		columns = obj.columns = [];
+	}
+
+	var len = this.getColumnCount();
+	for (var i = 0; i < len; ++i) {
+		var column = columns[i];
+		if (!column) {
+			column = columns[i] = {};
+		}
+
+		var noResizing = this._getColumnOption(i, 'noResizing', this._hosts[0]);
+		if (noResizing) {
+			column.noResizing = noResizing;
+		}
+
+		var defaultWidth = this._getColumnOption(i, 'defaultWidth', this._hosts[0]);
+		if (typeof defaultWidth == "number") {
+			column.defaultWidth = defaultWidth;
+		}
+	}
+
+	var extOptions = obj.columnResizing;
+	if (!extOptions) {
+		extOptions = obj.columnResizing = {};
+	}
+	extOptions.preserveProportion = this._keepProportion;
+	extOptions.preserveGridSize = this._keepGridSize;
+	extOptions.noResizing = this._disabled;
+	extOptions.pipeHandle = this._pipe;
+	extOptions.handlebar = this._hbMode;
+
+	return obj;
+};
+
+/** @private
+* @param {Object} host core grid object
+* @param {number} colIndex
+* @param {number} columnConfig
+*/
+ColumnResizingPlugin.prototype._configColumn = function(host, colIndex, columnConfig) {
+	if(columnConfig) {
+		if(columnConfig["noResizing"]) {
+			this._newColumnData(colIndex)["noResizing"] = true;
+		}
+		var num = columnConfig["defaultWidth"];
+		if(typeof num == "number") {
+			this._newColumnData(colIndex)["defaultWidth"] = num;
+			if(host) {
+				host.setColumnDefaultWidth(colIndex, num);
+			}
+		}
+	}
+};
+/** Used to block built-in features that are redundant with this extension
+* @protected
+* @ignore
+*/
+ColumnResizingPlugin.prototype._afterInit = function () {
+	if(this._compositeGrid) {
+		var core = this._compositeGrid.getCoreGrid();
+		core.unloadPlugin("ResizableTitlePlugin");
+	}
+};
+
+/** Disable ability to drag to resize for the specified column
+* @public
+* @param {number} colIndex
+* @param {boolean=} opt_disabled
+*/
+ColumnResizingPlugin.prototype.disableResizing = function(colIndex, opt_disabled) {
+	var colData = this._newColumnData(colIndex);
+	colData["noResizing"] = opt_disabled !== false;
+
+	for(var i = this._hosts.length; --i >= 0;) {
+		this._updateResizeHitBoxPosition(this._hosts[i], colIndex);
+	}
+};
+
+/** @public
+* @return {number} Return negative number if currently no column is dragged
+*/
+ColumnResizingPlugin.prototype.getDraggedColumnIndex = function() {
+	return this._dragIndex;
+};
+
+/** @public
+* @return {number} Return position of left size of column
+*/
+ColumnResizingPlugin.prototype.getDraggedAnchorX = function() {
+	return this._anchorX;
+};
+
+/** This function is used for set the size of multiple columns
+* @public
+* @param {Array.<number>} cols
+* @param {Array.<number>|number} width
+* @param {boolean=} opt_scalable If not defined false value is used instead
+*/
+ColumnResizingPlugin.prototype.setColumnWidths = function (cols, width, opt_scalable) {
+	var colCount = this.getColumnCount();
+	var widths = new Array(colCount);
+	var isNumber = typeof width === "number";
+	for (var c = 0; c < cols.length; c++) {
+		widths[cols[c]] = isNumber ? width : width[c];
+	}
+	var host;
+	for(var i = this._hosts.length; --i >= 0;) {
+		host = this._hosts[i];
+		host.setColumnWidths(widths, opt_scalable);
+	}
+};
+
+/** Set width for multiple column at once
+* @public
+* @param {number} colWidth width
+* @param {boolean=} scalability If not defined false value is used instead
+* @return {boolean} True if there is any changed
+*/
+ColumnResizingPlugin.prototype.setAllColumnWidths = function (colWidth, scalability) {
+	var colCount = this.getColumnCount();
+	var widths = new Array(colCount);
+	var i;
+	for (i = 0; i < colCount; i++) {
+		widths[i] = colWidth;
+	}
+	var host, dirty = false;
+	for(i = this._hosts.length; --i >= 0;) {
+		host = this._hosts[i];
+		dirty |= host.setColumnWidths(widths, scalability);
+	}
+	return dirty ? true : false;
+};
+
+/** Get width for multiple column
+* @public
+* @returns {Array.<number>} Array of width
+*/
+ColumnResizingPlugin.prototype.getColumnWidths = function () {
+	var colCount = this.getColumnCount();
+	var host = this._hosts[0], out = new Array(colCount);
+	for (var i = 0; i < colCount; i++) {
+		out[i] = host.getColumnWidth(i);
+	}
+	return out;
+};
+
+/** Reset to default column width
+* @public
+* @returns {boolean} True if there is any changed
+*/
+ColumnResizingPlugin.prototype.resetAllColumnsToDefaultWidth = function () {
+	var dirty = false;
+	var hosts = this._hosts;
+	var host;
+	for (var i = 0; i < hosts.length; i++ ) {
+		host = hosts[i];
+		dirty |= host.resetColumnWidths();
+	}
+	return dirty ? true : false;
+};
+
+/** Get JSON Object state of columns
+* @public
+* @returns {Array.<Object>} Columns state
+*/
+ColumnResizingPlugin.prototype.getColumnSizeStates = function () {
+	var colCount = this.getColumnCount();
+	var host = this._hosts[0], out = new Array(colCount);
+	for (var i = 0; i < colCount; i++) {
+		out[i] = {
+			width: host.getColumnWidth(i),
+			scalability: host.getColumnScalability(i)
+		};
+	}
+	return out;
+};
+
+/** Deprecated. Set JSON Object state of columns
+* @deprecated
+* @public
+* @param {Array.<Object>|string} columns Array or string
+*/
+ColumnResizingPlugin.prototype.setColumnSizeStates = function (columns) {
+	var host = this._hosts[0];
+
+	if (typeof columns === 'string') {
+		columns = JSON.parse(columns);
+	}
+
+	host.freezeLayout();
+	columns.forEach(function (col, colIndex) {
+		return host.setColumnWidth(colIndex, col.width, col.scalability);
+	});
+	host.unfreezeLayout();
+};
+
+/** @public
+* @param {boolean=} bool
+*/
+ColumnResizingPlugin.prototype.enablePipeHandleMode = function(bool) {
+	var pipe = this._pipe = (bool !== false);
+	var len = this._hosts.length;
+	for(var i = 0; i < len; ++i) {
+		this._hosts[i].enableClass("tr-pipe-resizer", pipe);
+	}
+};
+/** @public
+* @param {boolean=} bool
+*/
+ColumnResizingPlugin.prototype.enableHandlebarMode = function(bool) {
+	var enabled = this._hbMode = (bool !== false);
+
+	if(enabled) {
+		var csp = this._getCSP();
+		if(csp) {
+			csp.listen("selectionChanged", this._updateHandlebar);
+		} else {
+			setTimeout(this._onTimer, 100); // WORKAROUND
+		}
+	} else {
+		if(this._handlebar) {
+			Dom.removeParent(this._handlebar);
+			this._guideline.classList.remove("tr-hb-guideline");
+			this._handlebar = null;
+		}
+	}
+};
+
+/** @private
+* @param {Object=} e
+*/
+ColumnResizingPlugin.prototype._requestResizerUpdate = function (e) {
+	if(!this._updateTimer) {
+		this._updateTimer = setTimeout(this._updateResizers, 10);
+	}
+};
+/** @private */
+ColumnResizingPlugin.prototype._updateResizers = function () {
+	this._updateTimer = 0;
+	if(this._hbMode) {
+		this._updateHandlebar();
+	} else {
+		for(var i = this._hosts.length; --i >= 0;) {
+			var host = this._hosts[i];
+			this._updateResizerCount(host);
+			this._updateResizeHitBoxPosition(host, 0);
+		}
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+ColumnResizingPlugin.prototype._onPreSectionRender = function (e) {
+	if (e["sectionType"] === "title") { // HACK: Initialize resizers after all plugins have been loaded
+		this._updateResizerCount(e["sender"]);
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+ColumnResizingPlugin.prototype._onTimer = function() {
+	if(this._hbMode) {
+		var csp = this._getCSP();
+		if(csp) {
+			csp.listen("selectionChanged", this._updateHandlebar);
+		}
+	}
+};
+
+
+/** @private
+* @param {Event|Element} e
+*/
+ColumnResizingPlugin.prototype._onColumnAdded = function(e) {
+	if(e.context && e.colIndex != null) {
+		for(var i = this._hosts.length; --i >= 0;) {
+			var host = this._hosts[i];
+			this._configColumn(host, e.colIndex, e.context);
+		}
+	}
+};
+/** @private
+* @param {Event} e
+*/
+ColumnResizingPlugin.prototype._onDragStart = function (e) {
+	if (this._dragIndex >= 0) { return; }
+
+	var host = this._getDraggedGrid(e);
+	this._dragIndex = this._getResizerIndex(host, e);
+	if (this._dragIndex < 0) { return; }
+
+	// add style pointer-event = 'none' to avoid unexpected click event in title cell
+	this._activeResizer = e.currentTarget;
+	this._activeResizer.parentElement.style.pointerEvents = "none";
+
+	if(e.type === "dragstart") {
+		window.addEventListener("mousemove", this._onDrag);
+		window.addEventListener("mouseup", this._onDragEnd);
+	}
+
+	var gridParent = host.getElement().parentElement;
+
+	gridParent.classList.add("tr-dragging"); // Prevent text selection
+	gridParent.classList.add("tr-resize-cursor");
+
+	this._draggedGrid = host;
+	this._anchorX = this._getAnchorX(e);
+	this._guideline.style.height = (gridParent.clientHeight) + "px";
+	this._guideX = 1 + this._getColumnRight(host, this._dragIndex);
+	this._guideline.style.top = "1px";
+	this._guideline.style.left = this._guideX + "px";
+
+	Dom.appendChild(gridParent, this._guideline);
+	this._dispatch("dragStart", e);
+	Dom.preventDefault(e);
+};
+/** @private
+* @param {Event} e
+* @return {number}
+*/
+ColumnResizingPlugin.prototype._getAnchorX = function (e) {
+	if(typeof e.clientX === "number") {
+		return e.clientX;
+	}
+	if(e.touches != null) {
+		if(e.touches[0]) {
+			return e.touches[0].clientX;
+		}
+	}
+	return 0;
+};
+/** @private
+* @param {Event} e
+*/
+ColumnResizingPlugin.prototype._onDrag = function (e) {
+	if(!this._draggedGrid) {
+		return;
+	}
+
+	var diff = this._diffX = this._getAnchorX(e) - this._anchorX;
+	var width = this._draggedGrid.getColumnWidth(this._dragIndex);
+	var minWidth = this._draggedGrid.getMinimumColumnWidth(this._dragIndex);
+
+	if (width + diff < minWidth) {
+		diff = minWidth - width;
+	}
+
+	this._guideline.style.left = (this._guideX + diff) + "px";
+
+	Dom.preventDefault(e);
+};
+/** @private
+* @param {Event} e
+*/
+ColumnResizingPlugin.prototype._onDragEnd = function (e) {
+	window.removeEventListener("mousemove", this._onDrag);
+	window.removeEventListener("mouseup", this._onDragEnd);
+
+	var parentElement = this._guideline.parentElement;
+	if (parentElement) {
+		parentElement.classList.remove("tr-dragging");
+		parentElement.classList.remove("tr-resize-cursor");
+	}
+
+	Dom.removeParent(this._guideline);
+
+	// set back previous pointer event style of active resizer parent
+	this._activeResizer.parentElement.style.pointerEvents = "";
+	this._activeResizer = null;
+
+	if(this._diffX) { // There must be some change after dragging
+		var diff = this._diffX;
+		var minWidth = this._draggedGrid.getMinimumColumnWidth(this._dragIndex);
+		var newWidth = this._draggedGrid.getColumnWidth(this._dragIndex) + (diff / this._draggedGrid["zoomFactor"]);
+		if (newWidth < minWidth) { newWidth = minWidth; }
+
+		if (this._keepProportion) {
+			this.setColumnWidths([this._dragIndex], [newWidth]);
+
+			this._dispatch("columnResized", {
+				"colIndex": this._dragIndex,
+				"width": this._hosts[0].getColumnCustomLaneSize(this._dragIndex), // calculated weight
+				"scalability": true
+			});
+		} else {
+			var cols = this._getResizingCols(this._dragIndex);
+			this.setColumnWidths(cols, newWidth);
+
+			this._dispatch("columnResized", {
+				"colIndex": this._dragIndex,
+				"colIndices": cols,
+				"width": newWidth
+			});
+		}
+	}
+	this._updateHandlebar();
+	this._dispatch("dragEnd", e);
+
+	this._anchorX = this._guideX = this._diffX = 0;
+	this._dragIndex = -1;
+	this._draggedGrid = null;
+
+	Dom.preventDefault(e);
+};
+
+/** @private
+* @param {Event} e
+*/
+ColumnResizingPlugin.prototype._onDblClick = function(e){
+	var host = this.getRelativeGrid(e);
+	var colIndex = this._getResizerIndex(host, e);
+	var plugin = this._getPlugin("ColumnFitterPlugin");
+	if(!plugin) {
+		plugin = this._getPlugin("ColumnWidthAdjustingPlugin");
+	}
+
+	if(plugin) {
+		var cols = this._getResizingCols(colIndex);
+		var widths = [];
+		var index;
+		for(var i = cols.length; --i >= 0;) {
+			index = cols[i];
+			var defaultW = this._getColumnOption(index, "defaultWidth");
+			widths[i] = (defaultW != null) ? defaultW : plugin["getAdjustedColumnWidth"](index);
+		}
+
+		this.setColumnWidths(cols, widths);
+		Dom.preventDefault(e);
+	}
+	this._dispatch("dblClicked", {"colIndex": colIndex});
+	this._updateHandlebar();
+};
+
+/** @private
+* @param {Object=} e
+*/
+ColumnResizingPlugin.prototype._updateHandlebar = function(e) {
+	if(!this._hbMode) {
+		return;
+	}
+
+	var csp = this._getCSP();
+	if(!csp) {
+		return;
+	}
+
+	var sels = csp.getSelectedColumns();
+
+	var showHandlebar = sels.length === 1;
+	if(showHandlebar) {
+		if(!this._handlebar) {
+			this._handlebar = this._newResizer("tr-handlebar");
+			this._guideline.classList.add("tr-hb-guideline");
+			this._guideline.appendChild(this._handlebar);
+		}
+		var colIndex = this._handlebar._colIndex = sels[0];
+		var grid = null;
+		if(e) {
+			grid = this._handlebar._grid = e.grid;
+		} else {
+			grid = this._handlebar._grid;
+		}
+
+		if(grid) {
+			this._guideline.style.left = this._getColumnRight(grid, colIndex) + "px";
+			this._guideline.style.top = "";
+			this._guideline.style.height = "";
+			grid.getElement().appendChild(this._guideline);
+		}
+	} else {
+		if(this._handlebar) {
+			this._handlebar._colIndex = -1;
+			this._handlebar._grid = null;
+			Dom.removeParent(this._guideline);
+		}
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+ColumnResizingPlugin._stopPropagation = function (e) {
+	e.stopPropagation();
+};
+/** @private
+* @return {ColumnSelectionPlugin}
+*/
+ColumnResizingPlugin.prototype._getCSP = function () {
+	var csp = this._getPlugin("ColumnSelectionPlugin");
+	if(csp && csp.isEnabled()) {
+		return /** @type{ColumnSelectionPlugin} */(csp);
+	} else {
+		return null;
+	}
+};
+/** @private
+* @param {Object} host core grid object
+*/
+ColumnResizingPlugin.prototype._updateResizerCount = function (host) {
+	if(this._hbMode || this._disabled) {
+		return;
+	}
+
+	var titleSect = host.getSection("title");
+	if(!titleSect) {
+		return;
+	}
+	var colCount = host.getColumnCount();
+	var c, rowCount, col, boxes;
+	// Normal mode and Pipe mode
+	var titleSects = host.getAllSections("title");
+	for (var i = 0; i < titleSects.length; i++) {
+		titleSect = titleSects[i];
+		for (c = 0; c < colCount; ++c) {
+			rowCount = titleSect.getRowCount();
+			col = titleSect.getColumn(c);
+			boxes = col._resizers;
+			if (!boxes) {
+				boxes = col._resizers = [];
+			}
+			for (var j = 0; j < rowCount; j++) {
+				var cell = titleSect.getCell(c, j); // TODO: This can be optimized
+				var box = cell._resizer;
+				if (!box) {
+					box = this._newResizer();
+					cell._resizer = box; // Cache to prevent repeating creation
+					var cellElem = cell.getElement();
+					cellElem.insertBefore(box, cellElem.firstChild);
+					boxes.push(box);
+				}
+			}
+		}
+	}
+};
+/** @private
+* @param {string=} classStr
+* @return {!Element}
+*/
+ColumnResizingPlugin.prototype._newResizer = function (classStr) {
+	var box = Dom.div(classStr ? classStr : "resizer");
+	box.setAttribute("draggable", "true");
+	box.addEventListener("mousedown", ColumnResizingPlugin._stopPropagation);
+	box.addEventListener("click", ColumnResizingPlugin._stopPropagation);
+	box.addEventListener("dragstart", this._onDragStart);
+	box.addEventListener("dblclick", this._onDblClick);
+	box.addEventListener("touchstart", this._onDragStart);
+	box.addEventListener("touchend", this._onDragEnd);
+	box.addEventListener("touchcancel", this._onDragEnd);
+	// box.addEventListener("touchleave", this._onDragEnd);
+	box.addEventListener("touchmove", this._onDrag);
+	return box;
+};
+/** @private
+* @param {Object} host core grid object
+* @param {number=} from
+*/
+ColumnResizingPlugin.prototype._updateResizeHitBoxPosition = function (host, from) { // Slow
+	if(this._hbMode || this._disabled) {
+		return;
+	}
+
+	var titleSect = host.getSection("title");
+	if(!titleSect) {
+		return;
+	}
+
+	if(!from) {
+		from = 0;
+	}
+
+	var titleSects = host.getAllSections("title");
+	var colCount = host.getColumnCount();
+	for (var i = 0; i < titleSects.length; i++) {
+		titleSect = titleSects[i];
+		for (var c = from; c < colCount; ++c) {
+			var col = titleSect.getColumn(c);
+			var disabled = this._getColumnOption(c, "noResizing");
+			var boxes = col._resizers;
+			for (var j = 0; j < boxes.length; j++) {
+				var box = boxes[j];
+				box._disabled = disabled; // disabled is an internal flag
+				box.style.display = (disabled) ? "none" : "";
+			}
+		}
+	}
+};
+/** @private
+* @param {Event} e
+* @return {Object} host, core grid object
+*/
+ColumnResizingPlugin.prototype._getDraggedGrid = function (e) {
+	if(this._hbMode) {
+		return this._handlebar._grid;
+	} else {
+		return this.getRelativeGrid(e);
+	}
+};
+/** @private
+* @param {Object} host core grid object
+* @param {Event} e
+* @return {number}
+*/
+ColumnResizingPlugin.prototype._getResizerIndex = function (host, e) {
+	if(this._hbMode) {
+		if(this._handlebar) {
+			// TODO: Check for disabling flag
+			return /** @type{number} */(this._handlebar._colIndex);
+		} else {
+			return -1;
+		}
+	}
+
+	var box = e["currentTarget"];
+	if (box._disabled) { // disabled is an internal flag
+		return -1;
+	}
+
+	var pos = host.getRelativePosition(e);
+	var colIndex = pos.colIndex;
+	var rowIndex = pos.rowIndex;
+	var colSpan = pos["section"].getCellColSpan(colIndex, rowIndex);
+	return (colIndex != null) ? colIndex + colSpan - 1 : -1;
+};
+/** @private
+* @param {Object} host core grid object
+* @param {number} colIndex
+* @return {number}
+*/
+ColumnResizingPlugin.prototype._getColumnRight = function (host, colIndex) {
+	// TODO: Replace zoomFactor with more proper API
+	return (host.getColumnRight(colIndex) - 1) * host["zoomFactor"];
+};
+
+/** @private
+* @param {number} clickIndex
+* @return {Array.<number>}
+*/
+ColumnResizingPlugin.prototype._getResizingCols = function (clickIndex) {
+	var csp = this._getCSP();
+	if(csp) {
+		var cols = csp["getSelectedColumns"]();
+		if(cols.indexOf(clickIndex) >= 0) { // if clickIndex does not exist in selected columns then return clickIndex.
+			return cols;
+		}
+	}
+	return [clickIndex];
+};
+
+
+export default ColumnResizingPlugin;
+export { ColumnResizingPlugin, ColumnResizingPlugin as ColumnResizing, ColumnResizingPlugin as ColumnResizingExtension };