470 lines
82 KiB
JavaScript
470 lines
82 KiB
JavaScript
|
import { DirTypes } from './gridsterConfig.interface';
|
||
|
|
import { GridsterPush } from './gridsterPush.service';
|
||
|
|
import { GridsterPushResize } from './gridsterPushResize.service';
|
||
|
|
import { cancelScroll, scroll } from './gridsterScroll.service';
|
||
|
|
import { GridsterUtils } from './gridsterUtils.service';
|
||
|
|
export class GridsterResizable {
|
||
|
|
constructor(gridsterItem, gridster, zone) {
|
||
|
|
this.zone = zone;
|
||
|
|
/**
|
||
|
|
* The direction function may reference any of the `GridsterResizable` class methods, that are
|
||
|
|
* responsible for gridster resize when the `dragmove` event is being handled. E.g. it may reference
|
||
|
|
* the `handleNorth` method when the north handle is pressed and moved by a mouse.
|
||
|
|
*/
|
||
|
|
this.directionFunction = null;
|
||
|
|
this.dragMove = (e) => {
|
||
|
|
if (this.directionFunction === null) {
|
||
|
|
throw new Error('The `directionFunction` has not been set before calling `dragMove`.');
|
||
|
|
}
|
||
|
|
e.stopPropagation();
|
||
|
|
e.preventDefault();
|
||
|
|
GridsterUtils.checkTouchEvent(e);
|
||
|
|
this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
|
||
|
|
this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
|
||
|
|
scroll(this.gridster, this.left, this.top, this.width, this.height, e, this.lastMouse, this.directionFunction, true, this.resizeEventScrollType);
|
||
|
|
const scale = this.gridster.options.scale || 1;
|
||
|
|
this.directionFunction({
|
||
|
|
clientX: this.originalClientX + (e.clientX - this.originalClientX) / scale,
|
||
|
|
clientY: this.originalClientY + (e.clientY - this.originalClientY) / scale
|
||
|
|
});
|
||
|
|
this.lastMouse.clientX = e.clientX;
|
||
|
|
this.lastMouse.clientY = e.clientY;
|
||
|
|
this.zone.run(() => {
|
||
|
|
this.gridster.updateGrid();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
this.dragStop = (e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
e.preventDefault();
|
||
|
|
cancelScroll();
|
||
|
|
this.mousemove();
|
||
|
|
this.mouseup();
|
||
|
|
this.mouseleave();
|
||
|
|
this.cancelOnBlur();
|
||
|
|
this.touchmove();
|
||
|
|
this.touchend();
|
||
|
|
this.touchcancel();
|
||
|
|
this.gridster.dragInProgress = false;
|
||
|
|
this.gridster.updateGrid();
|
||
|
|
if (this.gridster.options.resizable &&
|
||
|
|
this.gridster.options.resizable.stop) {
|
||
|
|
Promise.resolve(this.gridster.options.resizable.stop(this.gridsterItem.item, this.gridsterItem, e)).then(this.makeResize, this.cancelResize);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.makeResize();
|
||
|
|
}
|
||
|
|
setTimeout(() => {
|
||
|
|
this.gridsterItem.renderer.removeClass(this.gridsterItem.el, 'gridster-item-resizing');
|
||
|
|
if (this.gridster) {
|
||
|
|
this.gridster.movingItem = null;
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
this.cancelResize = () => {
|
||
|
|
this.gridsterItem.$item.cols = this.gridsterItem.item.cols || 1;
|
||
|
|
this.gridsterItem.$item.rows = this.gridsterItem.item.rows || 1;
|
||
|
|
this.gridsterItem.$item.x = this.gridsterItem.item.x || 0;
|
||
|
|
this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
|
||
|
|
this.gridsterItem.setSize();
|
||
|
|
this.push.restoreItems();
|
||
|
|
this.pushResize.restoreItems();
|
||
|
|
this.push.destroy();
|
||
|
|
this.push = null;
|
||
|
|
this.pushResize.destroy();
|
||
|
|
this.pushResize = null;
|
||
|
|
};
|
||
|
|
this.makeResize = () => {
|
||
|
|
this.gridsterItem.setSize();
|
||
|
|
this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.gridsterItem.item);
|
||
|
|
this.push.setPushedItems();
|
||
|
|
this.pushResize.setPushedItems();
|
||
|
|
this.push.destroy();
|
||
|
|
this.push = null;
|
||
|
|
this.pushResize.destroy();
|
||
|
|
this.pushResize = null;
|
||
|
|
};
|
||
|
|
this.handleNorth = (e) => {
|
||
|
|
this.top = e.clientY + this.offsetTop - this.diffTop;
|
||
|
|
this.height = this.bottom - this.top;
|
||
|
|
if (this.minHeight > this.height) {
|
||
|
|
this.height = this.minHeight;
|
||
|
|
this.top = this.bottom - this.minHeight;
|
||
|
|
}
|
||
|
|
else if (this.gridster.options.enableBoundaryControl) {
|
||
|
|
this.top = Math.max(0, this.top);
|
||
|
|
this.height = this.bottom - this.top;
|
||
|
|
}
|
||
|
|
const marginTop = this.gridster.options.pushItems ? this.margin : 0;
|
||
|
|
this.newPosition = this.gridster.pixelsToPositionY(this.top + marginTop, Math.floor);
|
||
|
|
if (this.gridsterItem.$item.y !== this.newPosition) {
|
||
|
|
this.itemBackup[1] = this.gridsterItem.$item.y;
|
||
|
|
this.itemBackup[3] = this.gridsterItem.$item.rows;
|
||
|
|
this.gridsterItem.$item.rows +=
|
||
|
|
this.gridsterItem.$item.y - this.newPosition;
|
||
|
|
this.gridsterItem.$item.y = this.newPosition;
|
||
|
|
this.pushResize.pushItems(this.pushResize.fromSouth);
|
||
|
|
this.push.pushItems(this.push.fromSouth, this.gridster.$options.disablePushOnResize);
|
||
|
|
if (this.gridster.checkCollision(this.gridsterItem.$item)) {
|
||
|
|
this.gridsterItem.$item.y = this.itemBackup[1];
|
||
|
|
this.gridsterItem.$item.rows = this.itemBackup[3];
|
||
|
|
this.top = this.gridster.positionYToPixels(this.gridsterItem.$item.y);
|
||
|
|
this.setItemTop(this.gridster.positionYToPixels(this.gridsterItem.$item.y));
|
||
|
|
this.setItemHeight(this.gridster.positionYToPixels(this.gridsterItem.$item.rows) -
|
||
|
|
this.margin);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
}
|
||
|
|
this.pushResize.checkPushBack();
|
||
|
|
this.push.checkPushBack();
|
||
|
|
}
|
||
|
|
this.setItemTop(this.top);
|
||
|
|
this.setItemHeight(this.height);
|
||
|
|
};
|
||
|
|
this.handleWest = (e) => {
|
||
|
|
const clientX = this.gridster.$options.dirType === DirTypes.RTL
|
||
|
|
? this.originalClientX + (this.originalClientX - e.clientX)
|
||
|
|
: e.clientX;
|
||
|
|
this.left = clientX + this.offsetLeft - this.diffLeft;
|
||
|
|
this.width = this.right - this.left;
|
||
|
|
if (this.minWidth > this.width) {
|
||
|
|
this.width = this.minWidth;
|
||
|
|
this.left = this.right - this.minWidth;
|
||
|
|
}
|
||
|
|
else if (this.gridster.options.enableBoundaryControl) {
|
||
|
|
this.left = Math.max(0, this.left);
|
||
|
|
this.width = this.right - this.left;
|
||
|
|
}
|
||
|
|
const marginLeft = this.gridster.options.pushItems ? this.margin : 0;
|
||
|
|
this.newPosition = this.gridster.pixelsToPositionX(this.left + marginLeft, Math.floor);
|
||
|
|
if (this.gridsterItem.$item.x !== this.newPosition) {
|
||
|
|
this.itemBackup[0] = this.gridsterItem.$item.x;
|
||
|
|
this.itemBackup[2] = this.gridsterItem.$item.cols;
|
||
|
|
this.gridsterItem.$item.cols +=
|
||
|
|
this.gridsterItem.$item.x - this.newPosition;
|
||
|
|
this.gridsterItem.$item.x = this.newPosition;
|
||
|
|
this.pushResize.pushItems(this.pushResize.fromEast);
|
||
|
|
this.push.pushItems(this.push.fromEast, this.gridster.$options.disablePushOnResize);
|
||
|
|
if (this.gridster.checkCollision(this.gridsterItem.$item)) {
|
||
|
|
this.gridsterItem.$item.x = this.itemBackup[0];
|
||
|
|
this.gridsterItem.$item.cols = this.itemBackup[2];
|
||
|
|
this.left = this.gridster.positionXToPixels(this.gridsterItem.$item.x);
|
||
|
|
this.setItemLeft(this.gridster.positionXToPixels(this.gridsterItem.$item.x));
|
||
|
|
this.setItemWidth(this.gridster.positionXToPixels(this.gridsterItem.$item.cols) -
|
||
|
|
this.margin);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
}
|
||
|
|
this.pushResize.checkPushBack();
|
||
|
|
this.push.checkPushBack();
|
||
|
|
}
|
||
|
|
this.setItemLeft(this.left);
|
||
|
|
this.setItemWidth(this.width);
|
||
|
|
};
|
||
|
|
this.handleSouth = (e) => {
|
||
|
|
this.height = e.clientY + this.offsetTop - this.diffBottom - this.top;
|
||
|
|
if (this.minHeight > this.height) {
|
||
|
|
this.height = this.minHeight;
|
||
|
|
}
|
||
|
|
this.bottom = this.top + this.height;
|
||
|
|
if (this.gridster.options.enableBoundaryControl) {
|
||
|
|
const margin = this.outerMarginBottom ?? this.margin;
|
||
|
|
const box = this.gridster.el.getBoundingClientRect();
|
||
|
|
this.bottom = Math.min(this.bottom, box.bottom - box.top - 2 * margin);
|
||
|
|
this.height = this.bottom - this.top;
|
||
|
|
}
|
||
|
|
const marginBottom = this.gridster.options.pushItems ? 0 : this.margin;
|
||
|
|
this.newPosition = this.gridster.pixelsToPositionY(this.bottom + marginBottom, Math.ceil);
|
||
|
|
if (this.gridsterItem.$item.y + this.gridsterItem.$item.rows !==
|
||
|
|
this.newPosition) {
|
||
|
|
this.itemBackup[3] = this.gridsterItem.$item.rows;
|
||
|
|
this.gridsterItem.$item.rows =
|
||
|
|
this.newPosition - this.gridsterItem.$item.y;
|
||
|
|
this.pushResize.pushItems(this.pushResize.fromNorth);
|
||
|
|
this.push.pushItems(this.push.fromNorth, this.gridster.$options.disablePushOnResize);
|
||
|
|
if (this.gridster.checkCollision(this.gridsterItem.$item)) {
|
||
|
|
this.gridsterItem.$item.rows = this.itemBackup[3];
|
||
|
|
this.setItemHeight(this.gridster.positionYToPixels(this.gridsterItem.$item.rows) -
|
||
|
|
this.margin);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
}
|
||
|
|
this.pushResize.checkPushBack();
|
||
|
|
this.push.checkPushBack();
|
||
|
|
}
|
||
|
|
this.setItemHeight(this.height);
|
||
|
|
};
|
||
|
|
this.handleEast = (e) => {
|
||
|
|
const clientX = this.gridster.$options.dirType === DirTypes.RTL
|
||
|
|
? this.originalClientX + (this.originalClientX - e.clientX)
|
||
|
|
: e.clientX;
|
||
|
|
this.width = clientX + this.offsetLeft - this.diffRight - this.left;
|
||
|
|
if (this.minWidth > this.width) {
|
||
|
|
this.width = this.minWidth;
|
||
|
|
}
|
||
|
|
this.right = this.left + this.width;
|
||
|
|
if (this.gridster.options.enableBoundaryControl) {
|
||
|
|
const margin = this.outerMarginRight ?? this.margin;
|
||
|
|
const box = this.gridster.el.getBoundingClientRect();
|
||
|
|
this.right = Math.min(this.right, box.right - box.left - 2 * margin);
|
||
|
|
this.width = this.right - this.left;
|
||
|
|
}
|
||
|
|
const marginRight = this.gridster.options.pushItems ? 0 : this.margin;
|
||
|
|
this.newPosition = this.gridster.pixelsToPositionX(this.right + marginRight, Math.ceil);
|
||
|
|
if (this.gridsterItem.$item.x + this.gridsterItem.$item.cols !==
|
||
|
|
this.newPosition) {
|
||
|
|
this.itemBackup[2] = this.gridsterItem.$item.cols;
|
||
|
|
this.gridsterItem.$item.cols =
|
||
|
|
this.newPosition - this.gridsterItem.$item.x;
|
||
|
|
this.pushResize.pushItems(this.pushResize.fromWest);
|
||
|
|
this.push.pushItems(this.push.fromWest, this.gridster.$options.disablePushOnResize);
|
||
|
|
if (this.gridster.checkCollision(this.gridsterItem.$item)) {
|
||
|
|
this.gridsterItem.$item.cols = this.itemBackup[2];
|
||
|
|
this.setItemWidth(this.gridster.positionXToPixels(this.gridsterItem.$item.cols) -
|
||
|
|
this.margin);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
}
|
||
|
|
this.pushResize.checkPushBack();
|
||
|
|
this.push.checkPushBack();
|
||
|
|
}
|
||
|
|
this.setItemWidth(this.width);
|
||
|
|
};
|
||
|
|
this.handleNorthWest = (e) => {
|
||
|
|
this.handleNorth(e);
|
||
|
|
this.handleWest(e);
|
||
|
|
};
|
||
|
|
this.handleNorthEast = (e) => {
|
||
|
|
this.handleNorth(e);
|
||
|
|
this.handleEast(e);
|
||
|
|
};
|
||
|
|
this.handleSouthWest = (e) => {
|
||
|
|
this.handleSouth(e);
|
||
|
|
this.handleWest(e);
|
||
|
|
};
|
||
|
|
this.handleSouthEast = (e) => {
|
||
|
|
this.handleSouth(e);
|
||
|
|
this.handleEast(e);
|
||
|
|
};
|
||
|
|
this.gridsterItem = gridsterItem;
|
||
|
|
this.gridster = gridster;
|
||
|
|
this.lastMouse = {
|
||
|
|
clientX: 0,
|
||
|
|
clientY: 0
|
||
|
|
};
|
||
|
|
this.itemBackup = [0, 0, 0, 0];
|
||
|
|
this.resizeEventScrollType = {
|
||
|
|
west: false,
|
||
|
|
east: false,
|
||
|
|
north: false,
|
||
|
|
south: false
|
||
|
|
};
|
||
|
|
}
|
||
|
|
destroy() {
|
||
|
|
this.gridster?.previewStyle();
|
||
|
|
this.gridster = this.gridsterItem = null;
|
||
|
|
}
|
||
|
|
dragStart(e) {
|
||
|
|
if (e.which && e.which !== 1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.gridster.options.resizable &&
|
||
|
|
this.gridster.options.resizable.start) {
|
||
|
|
this.gridster.options.resizable.start(this.gridsterItem.item, this.gridsterItem, e);
|
||
|
|
}
|
||
|
|
e.stopPropagation();
|
||
|
|
e.preventDefault();
|
||
|
|
this.zone.runOutsideAngular(() => {
|
||
|
|
this.mousemove = this.gridsterItem.renderer.listen('document', 'mousemove', this.dragMove);
|
||
|
|
this.touchmove = this.gridster.renderer.listen(this.gridster.el, 'touchmove', this.dragMove);
|
||
|
|
});
|
||
|
|
this.mouseup = this.gridsterItem.renderer.listen('document', 'mouseup', this.dragStop);
|
||
|
|
this.mouseleave = this.gridsterItem.renderer.listen('document', 'mouseleave', this.dragStop);
|
||
|
|
this.cancelOnBlur = this.gridsterItem.renderer.listen('window', 'blur', this.dragStop);
|
||
|
|
this.touchend = this.gridsterItem.renderer.listen('document', 'touchend', this.dragStop);
|
||
|
|
this.touchcancel = this.gridsterItem.renderer.listen('document', 'touchcancel', this.dragStop);
|
||
|
|
this.gridsterItem.renderer.addClass(this.gridsterItem.el, 'gridster-item-resizing');
|
||
|
|
this.lastMouse.clientX = e.clientX;
|
||
|
|
this.lastMouse.clientY = e.clientY;
|
||
|
|
this.left = this.gridsterItem.left;
|
||
|
|
this.top = this.gridsterItem.top;
|
||
|
|
this.originalClientX = e.clientX;
|
||
|
|
this.originalClientY = e.clientY;
|
||
|
|
this.width = this.gridsterItem.width;
|
||
|
|
this.height = this.gridsterItem.height;
|
||
|
|
this.bottom = this.gridsterItem.top + this.gridsterItem.height;
|
||
|
|
this.right = this.gridsterItem.left + this.gridsterItem.width;
|
||
|
|
this.margin = this.gridster.$options.margin;
|
||
|
|
this.outerMarginTop = this.gridster.$options.outerMarginTop;
|
||
|
|
this.outerMarginRight = this.gridster.$options.outerMarginRight;
|
||
|
|
this.outerMarginBottom = this.gridster.$options.outerMarginBottom;
|
||
|
|
this.outerMarginLeft = this.gridster.$options.outerMarginLeft;
|
||
|
|
this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
|
||
|
|
this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
|
||
|
|
this.diffLeft = e.clientX + this.offsetLeft - this.left;
|
||
|
|
this.diffRight = e.clientX + this.offsetLeft - this.right;
|
||
|
|
this.diffTop = e.clientY + this.offsetTop - this.top;
|
||
|
|
this.diffBottom = e.clientY + this.offsetTop - this.bottom;
|
||
|
|
this.minHeight =
|
||
|
|
this.gridster.positionYToPixels(this.gridsterItem.$item.minItemRows ||
|
||
|
|
this.gridster.$options.minItemRows) - this.margin;
|
||
|
|
this.minWidth =
|
||
|
|
this.gridster.positionXToPixels(this.gridsterItem.$item.minItemCols ||
|
||
|
|
this.gridster.$options.minItemCols) - this.margin;
|
||
|
|
this.gridster.movingItem = this.gridsterItem.$item;
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
this.push = new GridsterPush(this.gridsterItem);
|
||
|
|
this.pushResize = new GridsterPushResize(this.gridsterItem);
|
||
|
|
this.gridster.dragInProgress = true;
|
||
|
|
this.gridster.updateGrid();
|
||
|
|
const { classList } = e.target;
|
||
|
|
if (classList.contains('handle-n')) {
|
||
|
|
this.resizeEventScrollType.north = true;
|
||
|
|
this.directionFunction = this.handleNorth;
|
||
|
|
}
|
||
|
|
else if (classList.contains('handle-w')) {
|
||
|
|
if (this.gridster.$options.dirType === DirTypes.RTL) {
|
||
|
|
this.resizeEventScrollType.east = true;
|
||
|
|
this.directionFunction = this.handleEast;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.resizeEventScrollType.west = true;
|
||
|
|
this.directionFunction = this.handleWest;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (classList.contains('handle-s')) {
|
||
|
|
this.resizeEventScrollType.south = true;
|
||
|
|
this.directionFunction = this.handleSouth;
|
||
|
|
}
|
||
|
|
else if (classList.contains('handle-e')) {
|
||
|
|
if (this.gridster.$options.dirType === DirTypes.RTL) {
|
||
|
|
this.resizeEventScrollType.west = true;
|
||
|
|
this.directionFunction = this.handleWest;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.resizeEventScrollType.east = true;
|
||
|
|
this.directionFunction = this.handleEast;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (classList.contains('handle-nw')) {
|
||
|
|
if (this.gridster.$options.dirType === DirTypes.RTL) {
|
||
|
|
this.resizeEventScrollType.north = true;
|
||
|
|
this.resizeEventScrollType.east = true;
|
||
|
|
this.directionFunction = this.handleNorthEast;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.resizeEventScrollType.north = true;
|
||
|
|
this.resizeEventScrollType.west = true;
|
||
|
|
this.directionFunction = this.handleNorthWest;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (classList.contains('handle-ne')) {
|
||
|
|
if (this.gridster.$options.dirType === DirTypes.RTL) {
|
||
|
|
this.resizeEventScrollType.north = true;
|
||
|
|
this.resizeEventScrollType.west = true;
|
||
|
|
this.directionFunction = this.handleNorthWest;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.resizeEventScrollType.north = true;
|
||
|
|
this.resizeEventScrollType.east = true;
|
||
|
|
this.directionFunction = this.handleNorthEast;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (classList.contains('handle-sw')) {
|
||
|
|
if (this.gridster.$options.dirType === DirTypes.RTL) {
|
||
|
|
this.resizeEventScrollType.south = true;
|
||
|
|
this.resizeEventScrollType.east = true;
|
||
|
|
this.directionFunction = this.handleSouthEast;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.resizeEventScrollType.south = true;
|
||
|
|
this.resizeEventScrollType.west = true;
|
||
|
|
this.directionFunction = this.handleSouthWest;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (classList.contains('handle-se')) {
|
||
|
|
if (this.gridster.$options.dirType === DirTypes.RTL) {
|
||
|
|
this.resizeEventScrollType.south = true;
|
||
|
|
this.resizeEventScrollType.west = true;
|
||
|
|
this.directionFunction = this.handleSouthWest;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.resizeEventScrollType.south = true;
|
||
|
|
this.resizeEventScrollType.east = true;
|
||
|
|
this.directionFunction = this.handleSouthEast;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
toggle() {
|
||
|
|
this.resizeEnabled = this.gridsterItem.canBeResized();
|
||
|
|
this.resizableHandles = this.gridsterItem.getResizableHandles();
|
||
|
|
}
|
||
|
|
dragStartDelay(e) {
|
||
|
|
GridsterUtils.checkTouchEvent(e);
|
||
|
|
if (!this.gridster.$options.resizable.delayStart) {
|
||
|
|
this.dragStart(e);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const timeout = setTimeout(() => {
|
||
|
|
this.dragStart(e);
|
||
|
|
cancelDrag();
|
||
|
|
}, this.gridster.$options.resizable.delayStart);
|
||
|
|
const { cancelMouse, cancelMouseLeave, cancelOnBlur, cancelTouchMove, cancelTouchEnd, cancelTouchCancel } = this.zone.runOutsideAngular(() => {
|
||
|
|
// Note: all of these events are being added within the `<root>` zone since they all
|
||
|
|
// don't do any view updates and don't require Angular running change detection.
|
||
|
|
// All event listeners call `cancelDrag` once the event is dispatched, the `cancelDrag`
|
||
|
|
// is responsible only for removing event listeners.
|
||
|
|
const cancelMouse = this.gridsterItem.renderer.listen('document', 'mouseup', cancelDrag);
|
||
|
|
const cancelMouseLeave = this.gridsterItem.renderer.listen('document', 'mouseleave', cancelDrag);
|
||
|
|
const cancelOnBlur = this.gridsterItem.renderer.listen('window', 'blur', cancelDrag);
|
||
|
|
const cancelTouchMove = this.gridsterItem.renderer.listen('document', 'touchmove', cancelMove);
|
||
|
|
const cancelTouchEnd = this.gridsterItem.renderer.listen('document', 'touchend', cancelDrag);
|
||
|
|
const cancelTouchCancel = this.gridsterItem.renderer.listen('document', 'touchcancel', cancelDrag);
|
||
|
|
return {
|
||
|
|
cancelMouse,
|
||
|
|
cancelMouseLeave,
|
||
|
|
cancelOnBlur,
|
||
|
|
cancelTouchMove,
|
||
|
|
cancelTouchEnd,
|
||
|
|
cancelTouchCancel
|
||
|
|
};
|
||
|
|
});
|
||
|
|
function cancelMove(eventMove) {
|
||
|
|
GridsterUtils.checkTouchEvent(eventMove);
|
||
|
|
if (Math.abs(eventMove.clientX - e.clientX) > 9 ||
|
||
|
|
Math.abs(eventMove.clientY - e.clientY) > 9) {
|
||
|
|
cancelDrag();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function cancelDrag() {
|
||
|
|
clearTimeout(timeout);
|
||
|
|
cancelOnBlur();
|
||
|
|
cancelMouse();
|
||
|
|
cancelMouseLeave();
|
||
|
|
cancelTouchMove();
|
||
|
|
cancelTouchEnd();
|
||
|
|
cancelTouchCancel();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setItemTop(top) {
|
||
|
|
this.gridster.gridRenderer.setCellPosition(this.gridsterItem.renderer, this.gridsterItem.el, this.left, top);
|
||
|
|
}
|
||
|
|
setItemLeft(left) {
|
||
|
|
this.gridster.gridRenderer.setCellPosition(this.gridsterItem.renderer, this.gridsterItem.el, left, this.top);
|
||
|
|
}
|
||
|
|
setItemHeight(height) {
|
||
|
|
this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', height + 'px');
|
||
|
|
}
|
||
|
|
setItemWidth(width) {
|
||
|
|
this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', width + 'px');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZHN0ZXJSZXNpemFibGUuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZ3JpZHN0ZXIyL3NyYy9saWIvZ3JpZHN0ZXJSZXNpemFibGUuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFFdEQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3RELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBR2xFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRXhELE1BQU0sT0FBTyxpQkFBaUI7SUE4RDVCLFlBQ0UsWUFBNEMsRUFDNUMsUUFBb0MsRUFDNUIsSUFBWTtRQUFaLFNBQUksR0FBSixJQUFJLENBQVE7UUF2RHRCOzs7O1dBSUc7UUFDSyxzQkFBaUIsR0FFZCxJQUFJLENBQUM7UUEwT2hCLGFBQVEsR0FBRyxDQUFDLENBQWEsRUFBUSxFQUFFO1lBQ2pDLElBQUksSUFBSSxDQUFDLGlCQUFpQixLQUFLLElBQUksRUFBRTtnQkFDbkMsTUFBTSxJQUFJLEtBQUssQ0FDYixxRUFBcUUsQ0FDdEUsQ0FBQzthQUNIO1lBRUQsQ0FBQyxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3BCLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUNuQixhQUFhLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ2pDLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLFNBQVMsQ0FBQztZQUN6RSxJQUFJLENBQUMsVUFBVSxHQUFH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
|