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

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -0,0 +1,794 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { cloneObject, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import Dom from "../../tr-grid-util/es6/Dom.js";
+
+/** @typedef {Object} RowDraggingPlugin~Options
+* @description Available options describing `rowDragging` object specified in grid's option
+* @property {boolean=} dragBox=false If enabled, information box will be shown during the drag
+* @property {boolean=} disabled=false If enabled, dataTransfer and autoScroll will be disabled, and guileline UI will not been shown.
+* @property {boolean=} mouseInput=true If disabled, mousemove/mousedown will not trigger the drag operation.
+* @property {boolean=} dataTransfer=true If disabled, internal row data will not be moved at the end of the drag operation.
+* @property {boolean=} autoScroll=true If disabled, grid will not be verticallly scrolled when mouse is hovering around the edges of the grid.
+* @property {Function=} dragBoxRenderer Allow user to customize dragBox
+* @property {Function=} dragStart=null Function handler for dragStart event
+* @property {Function=} drag=null Function handler for drag event
+* @property {Function=} dragEnd=null Function handler for dragEnd event
+* @property {Function=} dataMoved=null Function handler for dataMoved event
+*/
+
+/** @event RowDraggingPlugin#drag
+* @description Fired on each mousemove or touchmove
+* @type {Object}
+*/
+/** @event RowDraggingPlugin#dragStart
+* @description The event is fired at the beginning of the drag operation. You can cancel the operation by setting cancel property to true.
+* @type {Object}
+* @example
+* // ...
+* dragStart: function(e) {
+*   e.cancel = true; // To cancel the operation
+* }, // ..
+*/
+/** @event RowDraggingPlugin#dragEnd
+* @description The event will always be fired at the end of the drag operation. This is to allow clearing of any resource used. You can cancel the data moving operation by setting cancel property to true.
+* @type {Object}
+*/
+/** @event RowDraggingPlugin#dragInterval
+* @description Fired at an interval during drag
+* @type {Object}
+*/
+/** @event RowDraggingPlugin#dataMoved
+* @description Fired when rows or data are moved by drag operation.
+* @type {Object}
+*/
+
+/** @constructor
+* @param {RowDraggingPlugin.Options=} options
+* @extends {GridPlugin}
+*/
+var RowDraggingPlugin = function (options) {
+	var t = this;
+
+	t.startDrag = t.startDrag.bind(t);
+	t.stopDrag = t.stopDrag.bind(t);
+	t._clearCache = t._clearCache.bind(t);
+
+	t._onMouseDown = t._onMouseDown.bind(t);
+
+	t._onDragPulse = t._onDragPulse.bind(t);
+	t._onContentScrolled = t._onContentScrolled.bind(t);
+
+	t._onDragStart = t._onDragStart.bind(t);
+	t._onMouseMove = t._onMouseMove.bind(t);
+	t._onDragEnd = t._onDragEnd.bind(t);
+	t._onThemeLoaded = t._onThemeLoaded.bind(t);
+
+	t._hosts = [];
+
+	t._guideline = document.createElement("svg"); // TODO: Change from svg to normal div
+	t._guideline.className = "tr-row-guideline";
+
+	t.config({ "rowDragging": options });
+};
+Ext.inherits(RowDraggingPlugin, GridPlugin);
+
+/** @type {string}
+* @private
+*/
+RowDraggingPlugin._styles = ""; // Static variable
+/** @type {Promise<Object>}
+* @private
+*/
+RowDraggingPlugin._stylePromise = null; // Static variable
+
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._guideline = null;
+/** For disabled UI
+* @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._disabled = false;
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._dragTarget = null;
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBoxRenderer = null;
+/** @type {*}
+* @private
+*/
+RowDraggingPlugin.prototype._legacyRowReorder = null;
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._pos = null;
+/** @type {string}
+* @private
+*/
+RowDraggingPlugin.prototype._startingRid = "";
+/** Core grid instance
+* @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._startingGrid = null;
+
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._dragPulseId = 0;
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._topBound = 0; // For drag pulse
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._btmBound = 0; // For drag pulse
+/** @type {number}
+* @private
+*/
+RowDraggingPlugin.prototype._scrollStep = 40; // For drag pulse
+
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._dragging = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._scrollingZone = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._touchMode = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._mouseInput = true;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBoxEnabled = false;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._dataTransfer = true;
+/** @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._autoScroll = true;
+
+
+/** Prevent built-in config
+* @public
+* @param {string} optionName
+* @param {*} optionValue
+* @return {*}
+*/
+RowDraggingPlugin.prototype.beforeProcessOption = function (optionName, optionValue) {
+	if (optionName === "rowReorder") {
+		this._legacyRowReorder = optionValue;
+		return false; // eslint-disable-line
+	}
+	return; // eslint-disable-line
+};
+
+/** Plugin can have multiple hosts/tables and share its states across those hosts/tables.
+* @public
+* @override
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype.hasMultiTableSupport = function() {
+	return true;
+};
+
+/** @public
+* @return {string}
+*/
+RowDraggingPlugin.prototype.getName = function () {
+	return "RowDraggingPlugin"; // Read Only
+};
+/** @public
+* @param {Object} host core grid instance
+* @param {Object} options
+*/
+RowDraggingPlugin.prototype.initialize = function (host, options) {
+	if (this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	this.config(options);
+
+	if (this._mouseInput) {
+		host.setAttribute("draggable", "true");
+		host.listen("dragstart", this.startDrag);
+	}
+	// host.listen("mouseover", this._onContentScrolled);
+	host.listen("mousedown", this._onMouseDown);
+	host.listen("touchstart", this._onMouseDown);
+
+	if(RowDraggingPlugin._stylePromise) {
+		RowDraggingPlugin._applyThemeColor(host);
+	} else {
+		RowDraggingPlugin._stylePromise = ElfUtil.getThemeColors();
+		RowDraggingPlugin._stylePromise.then(this._onThemeLoaded);
+	}
+
+	// In case of lazy loading
+	// host.getAllSections("content").forEach(this._registerSection);
+};
+/** @public
+* @param {Object} host core grid instance
+*/
+RowDraggingPlugin.prototype.unload = function (host) {
+	var at = this._hosts.indexOf(host);
+	if (at < 0) { return; }
+
+	// host.removeAttribute("draggable");
+	host.unlisten("dragstart", this.startDrag);
+	// host.unlisten("mouseover", this._onContentScrolled);
+	host.unlisten("mousedown", this._onMouseDown);
+	host.unlisten("touchstart", this._onMouseDown);
+
+	this._hosts.splice(at, 1);
+	if (!this._hosts.length) {
+		this._clearCache();
+	}
+	this._dispose();
+};
+
+/** @private
+* @param {Object} colors
+*/
+RowDraggingPlugin.prototype._onThemeLoaded = function(colors) {
+	if(!RowDraggingPlugin._styles) {
+		var styles = [ // Main Styles without theme
+			".tr-row-guideline", [
+				"position: absolute;",
+				"left: 0;",
+				"top: 0;",
+				"pointer-events: none;",
+				"z-index: 1;",
+				"text-align: center;",
+				"border-top-width: 3px;",
+				"border-top-style: solid;"
+			]
+		];
+		var guidelineColor = "#ff9933";
+		var ElfVersion = ElfUtil.getElfVersion();
+		if(colors.primary) {
+			guidelineColor = colors.primary;
+		}
+		guidelineColor += ";";
+
+		styles.push(".tr-row-guideline", [
+			"border-top-color: " + guidelineColor,
+			"color: " + guidelineColor,
+			"background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));"
+		]);
+
+		if(ElfVersion < 3) { // Backward compatability
+			styles.push(".pearl .tr-row-guideline, *[theme=pearl] .tr-row-guideline", [
+				"border-top-color: #ee7600;",
+				"color: #ee7600;",
+				"background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));"
+			]);
+		}
+		RowDraggingPlugin._styles = prettifyCss(styles);
+	}
+
+	for(var i = this._hosts.length; --i >= 0;) {
+		RowDraggingPlugin._applyThemeColor(this._hosts[i]);
+	}
+};
+/** @private
+* @param {Object} grid core grid instance
+*/
+RowDraggingPlugin._applyThemeColor = function(grid) {
+	if(!grid || grid._rowDraggingStyles) {
+		return;
+	}
+	if(RowDraggingPlugin._styles) {
+		grid._rowDraggingStyles = true; // Prevent loading the same style twice
+		injectCss(RowDraggingPlugin._styles, grid.getElement());
+	}
+};
+
+/** @public
+* @param {Object=} options Grid model object
+*/
+RowDraggingPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	var extOptions = options["rowDragging"] || this._legacyRowReorder;
+	if (!extOptions) {
+		return;
+	}
+
+	if (typeof extOptions["dragBoxRenderer"] === "function") {
+		this._dragBoxRenderer = extOptions["dragBoxRenderer"];
+	}
+
+	this._dragBoxEnabled = !!extOptions["dragBox"];
+
+	var val = extOptions["mouseInput"];
+	if (val != null) {
+		this._mouseInput = !!val;
+	}
+	val = extOptions["dataTransfer"];
+	if (val != null) {
+		this._dataTransfer = !!val;
+	}
+	val = extOptions["autoScroll"];
+	if (val != null) {
+		this._autoScroll = !!val;
+	}
+
+	if (extOptions["disabled"]) {
+		this._disabled = true;
+	}
+
+	this.addListener(extOptions, "dragStart");
+	this.addListener(extOptions, "drag");
+	this.addListener(extOptions, "dragEnd");
+	this.addListener(extOptions, "dataMoved");
+};
+
+/** Get a current state of grid and extension config
+ * @public
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+RowDraggingPlugin.prototype.getConfigObject = function (out_obj) {
+	var obj = out_obj || {};
+
+	var extOptions = obj.rowDragging;
+	if(!extOptions) {
+		extOptions = obj.rowDragging = {};
+	}
+	extOptions.dragBox = this._dragBoxEnabled;
+	extOptions.mouseInput = this._mouseInput;
+	extOptions.autoScroll = this._autoScroll;
+	extOptions.dataTransfer = this._dataTransfer;
+	extOptions.disabled = this._disabled;
+
+	return obj;
+};
+
+/** @public
+* @param {*} startRef
+* @param {boolean=} opt_suppressEvent
+*/
+RowDraggingPlugin.prototype.startDrag = function (startRef) {
+	if (this._dragging || this._hosts.length <= 0) { return; }
+
+	var pos;
+	if (startRef) {
+		if (startRef.type === "dragstart") {
+			if(startRef["preventDefault"]) {
+				Dom.preventDefault(startRef);
+			}
+			var host = this.getRelativeGrid(startRef);
+			if (host) {
+				pos = host.getRelativePosition(this._dragTarget);
+			}
+		} else {
+			pos = this._hitTest(startRef);
+		}
+	} else {
+		var target = this._dragTarget || this._hosts[0].getSection("content").getCell(0, 0);
+		pos = this._hitTest(target);
+	}
+
+	if (pos && pos["sectionType"] === "content") {
+		this._clearCache();
+		this._pos = pos;
+		this._onDragStart(startRef);
+	}
+};
+/** @public */
+RowDraggingPlugin.prototype.stopDrag = function () {
+	if (!this._dragging) {
+		this.cancelDrag(); // Cancel drag if this method is called on dragStart event
+		return;
+	}
+
+	this.cancelDrag();
+	this._onDragEnd();
+};
+/** @public */
+RowDraggingPlugin.prototype.cancelDrag = function () {
+	if (this._pos) { this._pos["cancel"] = true; }
+};
+
+/** @public
+* @return {Element}
+*/
+RowDraggingPlugin.prototype.getGuideline = function () {
+	return this._guideline;
+};
+
+/** @private
+* @param {*} e
+* @return {!Object}
+*/
+RowDraggingPlugin.prototype._hitTest = function (e) {
+	var host = this.getRelativeGrid(e);
+	if (host) {
+		var pos;
+		if (e.changedTouches) {
+			// https://stackoverflow.com/questions/3918842/how-to-find-out-the-actual-event-target-of-touchmove-javascript-event
+			var touchPos = e.changedTouches[0];
+			pos = host.getRelativePosition(
+				document.elementFromPoint(
+					touchPos.clientX, touchPos.clientY
+				)
+			);
+			Dom.getRelativePosition(touchPos, host.getElement(), pos); // Overwrite x and y property
+		} else {
+			pos = host.getRelativePosition(e);
+		}
+		return pos;
+	} else {
+		return /** @type{!Object} */(e || {});
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+RowDraggingPlugin.prototype._onMouseDown = function (e) {
+	if (e.changedTouches) {
+		this._touchMode = true;
+	}
+	this._dragTarget = /** @type{Element} */(e.target);
+};
+/** @private
+* @param {*=} e
+*/
+RowDraggingPlugin.prototype._onDragStart = function (e) {
+	if (this._dragging) { return; }
+	if (!this._pos) { return; }
+
+	this._dispatch("dragStart", this._pos);
+	if (this._isDragCancelled()) {
+		return;
+	}
+
+	this._dragging = true;
+	// Event listeners
+	document.body.classList.add("tr-dragging"); // Prevent text selection
+
+	window.addEventListener("mousemove", this._onMouseMove, false);
+	window.addEventListener("touchmove", this._onMouseMove, false);
+	window.addEventListener("mouseup", this._onDragEnd, false);
+	window.addEventListener("touchend", this._onDragEnd, false);
+	window.addEventListener("touchcancel", this._onDragEnd, false);
+
+	if (this._touchMode) {
+		for (var i = this._hosts.length; --i >= 0;) {
+			var host = this._hosts[i];
+			host.getVScrollbar().disableTouchInput();
+			host.getHScrollbar().disableTouchInput();
+		}
+	}
+
+	// Update UI, grid cursor and guideline
+	if (!this._disabled) { //disabledUI
+		var grid = this._pos["grid"] || null;
+		if (!grid) return;
+
+		if (this._dataTransfer) {
+			var rowIndex = this._pos["rowIndex"];
+			var dv = grid.getDataSource();
+			this._startingRid = dv.getRowId(rowIndex);
+			this._startingGrid = grid;
+
+			if (this._dragBoxRenderer) { // For custom drag box rendering
+				var arg = cloneObject(e); // TODO: Check if cloning is necessary
+				arg.dragBox = this._guideline;
+				arg.dataRow = this._getRowData(dv.getRowDataAt(rowIndex));
+
+				if (this._legacyRowReorder) {
+					this._dragBoxRenderer(e, arg.dragBox, [arg.dataRow]);
+				} else {
+					this._dragBoxRenderer(arg);
+				}
+			}
+		}
+
+		// TODO: Just update curser will not gonna work since cell is pointer-events: none;
+		// we should do something to overwrite pointer-events first
+		// then set cursor move will have an effect
+		grid.getElement().style.cursor = "move";
+
+		// Initialize guideline
+		this._guideline.style.lineHeight = this._guideline.style.height = "";
+		this._updateGuideParent(); // Insert guideline to the document
+		this._updateGuidePosition();
+
+		if (this._autoScroll) {
+			var scrollbar = grid.getVScrollbar();
+			this._topBound = scrollbar.getTop() + 50;
+			this._btmBound = scrollbar.getTop() + scrollbar.getHeight() - 50;
+
+			if (this._topBound < this._btmBound) {
+				// For step scrolling
+				this._scrollStep = Math.floor(grid.getScrollHeight() / 25); // Update the scrollbar first
+				if (this._scrollStep < 40) {
+					this._scrollStep = 40;
+				} else if (this._scrollStep > 400) {
+					this._scrollStep = 400;
+				}
+				this._dragPulseId = setInterval(this._onDragPulse, 130); // Start pulse
+			}
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+RowDraggingPlugin.prototype._onMouseMove = function (e) {
+	if (!this._dragging) { return; }
+
+	if (e.type != "touchmove") {
+		if (!e || (e.which !== 1)) { // Left click is not down. Support in IE9 and up
+			this.stopDrag();
+			return;
+		}
+		Dom.preventDefault(e);
+	}
+
+	this._pos = this._hitTest(e); // A new object is created
+
+	this._updateGuideParent();
+
+	// Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
+	this._dispatch("drag", this._pos);
+
+	this._updateGuidePosition(e);
+};
+/** @private
+* @param {Object} e
+*/
+RowDraggingPlugin.prototype._onDragEnd = function (e) {
+	if (!this._dragging) { return; }
+	this._dragging = false;
+
+	if(e) {
+		Dom.preventDefault(e);
+	}
+	Dom.removeParent(this._guideline);
+
+	document.body.classList.remove("tr-dragging");
+
+	window.removeEventListener("mousemove", this._onMouseMove, false);
+	window.removeEventListener("touchmove", this._onMouseMove, false);
+	window.removeEventListener("mouseup", this._onDragEnd, false);
+	window.removeEventListener("touchend", this._onDragEnd, false);
+	window.removeEventListener("touchcancel", this._onDragEnd, false);
+
+	if (this._touchMode) {
+		for (var i = this._hosts.length; --i >= 0;) {
+			var host = this._hosts[i];
+			host.getVScrollbar().disableTouchInput(false);
+			host.getHScrollbar().disableTouchInput(false);
+		}
+	}
+
+	var srcGrid = this._startingGrid || this._hosts[0];
+	srcGrid.getElement().style.cursor = "";
+
+	var destPos = this._pos; // This can be null
+	if(!this._isDragCancelled()) {
+		destPos["srcGrid"] = srcGrid; // destPos is always valid at this point
+		 // WARNING: dropTarget is not correct for element in a shadow root
+		destPos["dropTarget"] = e ? e.target : null;
+
+		if (!this.disabled) {
+			if (this._dataTransfer && this._isInContentSection()) {
+				var destGrid = destPos["grid"] || srcGrid;
+				var destRowIndex = destPos["rowIndex"];
+
+				var rowSelection = srcGrid.getPlugin('RowSelectionPlugin');
+				var srcRowIndices = rowSelection && rowSelection.getSelectedRows();
+				if (!srcRowIndices || !srcRowIndices.length) {
+					// case no row selection or it disabled
+					srcRowIndices = this._startingRid; // Str Type
+				}
+
+				this._moveRows(srcRowIndices, destRowIndex, srcGrid, destGrid, destPos);
+			}
+		}
+	}
+
+	this._dispatch("dragEnd", destPos || {}); // Always fire drag end for client to clean up its resource
+	this._clearCache();
+};
+/** @private
+* @param {Array.<number>|string} srcRowRef
+* @param {number} destRowIndex
+* @param {Object} srcGrid core grid instance
+* @param {Object} destGrid core grid instance
+* @param {Object} evtArg
+* @return {number}
+*/
+RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGrid, destGrid, evtArg) {
+	var destDv = destGrid.getDataSource();
+	var destRowId = destDv.getRowId(destRowIndex);
+
+	if(!destRowId) {
+		return 0;
+	}
+
+	var srcRowIndices = null;
+	var srcDv = srcGrid.getDataSource();
+	if(typeof srcRowRef === "string") {
+		var srcRowIndex = srcDv.getRowIndex(this._startingRid);
+		if(srcRowIndex >= 0) {
+			srcRowIndices = [srcRowIndex];
+		}
+	} else if(Array.isArray(srcRowRef)) {
+		srcRowIndices = srcRowRef;
+	}
+
+	if(!srcRowIndices) {
+		return 0;
+	}
+
+	var movedRowIds = null;
+	if(srcGrid === destGrid) {
+		movedRowIds = srcDv.moveRow(srcRowIndices, destRowIndex) || [];
+	} else {
+		movedRowIds = [];
+		evtArg["destGrid"] = destGrid;
+
+		var originalRows = [];
+		var i;
+		var len = srcRowIndices.length;
+		for(i = 0; i < len; ++i) {
+			var rowId = srcDv.getRowId(srcRowIndices[i]);
+			var rowData = srcDv.getRowData(rowId);
+			if(rowData) {
+				movedRowIds.push(rowId);
+				originalRows.push(rowData);
+			}
+		}
+		len = originalRows.length;
+		if(len) {
+			srcDv.removeRows(srcRowIndices);
+			if(this._realTimeGrid) {
+				for(i = 0; i < len; ++i) {
+					var rowDef = originalRows[i]["ROW_DEF"];
+					rowDef.registerToView(destDv, destRowId);
+				}
+			} else {
+				for(i = 0; i < len; ++i) {
+					destDv.insertRow(destRowId, originalRows[i]); // TODO: Update view data source and grid
+				}
+			}
+		}
+	}
+
+	if(movedRowIds.length) {
+		evtArg["originRowId"] = movedRowIds[0];
+		evtArg["originRowIds"] = movedRowIds;
+		evtArg["destinationRowId"] = destRowId;
+
+		this._dispatch("dataMoved", evtArg);
+	}
+	return movedRowIds.length;
+};
+/** @private
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype._isInContentSection = function () {
+	return (this._pos["sectionType"] === "content");
+};
+/** @private
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype._hasValidTarget = function () {
+	return (this._pos && this._pos["invalidTarget"]) ? false : true;
+};
+/** @private
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype._isDragCancelled = function () {
+	return (this._pos && this._pos["cancel"]) ? true : false;
+};
+
+/** @private */
+RowDraggingPlugin.prototype._updateGuideParent = function () {
+	if (this._disabled) return;
+
+	if (this._isInContentSection()) {
+		var grid = this._pos["grid"] || null;
+		var pn = this._pos["section"].getColumnHost(); // This is to hide out of view guideline
+		if (pn !== this._guideline.parentNode) {
+			this._guideline.style.width = grid.getWidth() + "px";
+			pn.appendChild(this._guideline);
+		}
+	}
+};
+
+/** @private
+* @param {Event} e
+*/
+RowDraggingPlugin.prototype._updateGuidePosition = function (e) {
+	if (this._disabled) return;
+
+	if (this._isInContentSection()) {
+		if (this._hasValidTarget()) {
+			var pos = Dom.getRelativePosition(this._pos["cellElement"], this._guideline.parentNode);
+			this._guideline.style.top = (pos["y"] - 1) + "px";
+			var height = (this._pos["section"].getRowHeight(
+				this._pos["rowIndex"]
+			) - 3) + "px";
+			this._guideline.style.lineHeight = this._guideline.style.height = height;
+		}
+	}
+};
+/** @private */
+RowDraggingPlugin.prototype._clearCache = function () {
+	if (this._dragPulseId) {
+		clearInterval(this._dragPulseId);
+		this._dragPulseId = 0;
+	}
+
+	this._pos = this._dragTarget = this._startingGrid = null;
+
+	this._scrollingZone = false;
+};
+
+
+/** @private */
+RowDraggingPlugin.prototype._onDragPulse = function () {
+	if (!this._dragging) { return; }
+
+	this._dispatch("dragInterval", this._pos);
+
+	// Manage vertical scrollbar
+	var primaryHost = this._pos["grid"] || this._startingGrid;
+	if (!primaryHost || !primaryHost.getVScrollbar().isActive()) {
+		return;
+	}
+
+	var y = this._pos["y"];
+	if (y == null) { return; }
+
+	if (y >= this._topBound && y <= this._btmBound) {
+		this._scrollingZone = false;
+	} else {
+		this._scrollingZone = true;
+		var scrollVal = (this._scrollStep * (0.8 + Math.random())) | 0;
+
+		if (y < this._topBound) {
+			scrollVal = -scrollVal;
+		}
+		primaryHost.scrollDown(scrollVal);
+	}
+};
+/** @private
+* @param {Event=} e
+*/
+RowDraggingPlugin.prototype._onContentScrolled = function (e) {
+	if (this._scrollingZone && this._dragging && this._pos["hit"]) {
+		var grid = this._pos["grid"];
+		if (grid.getElement() === e.currentTarget) {
+			this._pos = this._hitTest(e);
+			this._dispatch("drag", this._pos);
+			this._updateGuidePosition();
+		}
+	}
+};
+
+
+
+export default RowDraggingPlugin;
+export { RowDraggingPlugin, RowDraggingPlugin as RowDragging, RowDraggingPlugin as RowDraggingExtension };