255 lines
40 KiB
JavaScript
255 lines
40 KiB
JavaScript
|
import { GridsterUtils } from './gridsterUtils.service';
|
||
|
|
export class GridsterEmptyCell {
|
||
|
|
constructor(gridster) {
|
||
|
|
this.gridster = gridster;
|
||
|
|
this.emptyCellClickCb = (e) => {
|
||
|
|
if (!this.gridster ||
|
||
|
|
this.gridster.movingItem ||
|
||
|
|
GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const item = this.getValidItemFromEvent(e);
|
||
|
|
if (!item) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.gridster.options.emptyCellClickCallback) {
|
||
|
|
this.gridster.options.emptyCellClickCallback(e, item);
|
||
|
|
}
|
||
|
|
this.gridster.cdRef.markForCheck();
|
||
|
|
};
|
||
|
|
this.emptyCellContextMenuCb = (e) => {
|
||
|
|
if (this.gridster.movingItem ||
|
||
|
|
GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
const item = this.getValidItemFromEvent(e);
|
||
|
|
if (!item) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.gridster.options.emptyCellContextMenuCallback) {
|
||
|
|
this.gridster.options.emptyCellContextMenuCallback(e, item);
|
||
|
|
}
|
||
|
|
this.gridster.cdRef.markForCheck();
|
||
|
|
};
|
||
|
|
this.emptyCellDragDrop = (e) => {
|
||
|
|
const item = this.getValidItemFromEvent(e);
|
||
|
|
if (!item) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.gridster.options.emptyCellDropCallback) {
|
||
|
|
this.gridster.options.emptyCellDropCallback(e, item);
|
||
|
|
}
|
||
|
|
this.gridster.cdRef.markForCheck();
|
||
|
|
};
|
||
|
|
this.emptyCellDragOver = (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
const item = this.getValidItemFromEvent(e);
|
||
|
|
if (item) {
|
||
|
|
if (e.dataTransfer) {
|
||
|
|
e.dataTransfer.dropEffect = 'move';
|
||
|
|
}
|
||
|
|
this.gridster.movingItem = item;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (e.dataTransfer) {
|
||
|
|
e.dataTransfer.dropEffect = 'none';
|
||
|
|
}
|
||
|
|
this.gridster.movingItem = null;
|
||
|
|
}
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
};
|
||
|
|
this.emptyCellMouseDown = (e) => {
|
||
|
|
if (GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
const item = this.getValidItemFromEvent(e);
|
||
|
|
const leftMouseButtonCode = 1;
|
||
|
|
if (!item ||
|
||
|
|
(e.buttons !== leftMouseButtonCode && !(e instanceof TouchEvent))) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.initialItem = item;
|
||
|
|
this.gridster.movingItem = item;
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
this.gridster.zone.runOutsideAngular(() => {
|
||
|
|
this.removeWindowMousemoveListenerFn = this.gridster.renderer.listen('window', 'mousemove', this.emptyCellMouseMove);
|
||
|
|
this.removeWindowTouchmoveListenerFn = this.gridster.renderer.listen('window', 'touchmove', this.emptyCellMouseMove);
|
||
|
|
});
|
||
|
|
this.removeWindowMouseupListenerFn = this.gridster.renderer.listen('window', 'mouseup', this.emptyCellMouseUp);
|
||
|
|
this.removeWindowTouchendListenerFn = this.gridster.renderer.listen('window', 'touchend', this.emptyCellMouseUp);
|
||
|
|
};
|
||
|
|
this.emptyCellMouseMove = (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
const item = this.getValidItemFromEvent(e, this.initialItem);
|
||
|
|
if (!item) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.gridster.movingItem = item;
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
};
|
||
|
|
this.emptyCellMouseUp = (e) => {
|
||
|
|
this.removeWindowMousemoveListenerFn();
|
||
|
|
this.removeWindowTouchmoveListenerFn();
|
||
|
|
this.removeWindowMouseupListenerFn();
|
||
|
|
this.removeWindowTouchendListenerFn();
|
||
|
|
const item = this.getValidItemFromEvent(e, this.initialItem);
|
||
|
|
if (item) {
|
||
|
|
this.gridster.movingItem = item;
|
||
|
|
}
|
||
|
|
if (this.gridster.options.emptyCellDragCallback &&
|
||
|
|
this.gridster.movingItem) {
|
||
|
|
this.gridster.options.emptyCellDragCallback(e, this.gridster.movingItem);
|
||
|
|
}
|
||
|
|
setTimeout(() => {
|
||
|
|
this.initialItem = null;
|
||
|
|
if (this.gridster) {
|
||
|
|
this.gridster.movingItem = null;
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.gridster.cdRef.markForCheck();
|
||
|
|
};
|
||
|
|
}
|
||
|
|
destroy() {
|
||
|
|
if (this.gridster.previewStyle) {
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
}
|
||
|
|
this.gridster.movingItem = null;
|
||
|
|
this.initialItem = this.gridster = null;
|
||
|
|
if (this.removeDocumentDragendListenerFn) {
|
||
|
|
this.removeDocumentDragendListenerFn();
|
||
|
|
this.removeDocumentDragendListenerFn = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updateOptions() {
|
||
|
|
if (this.gridster.$options.enableEmptyCellClick &&
|
||
|
|
!this.removeEmptyCellClickListenerFn &&
|
||
|
|
this.gridster.options.emptyCellClickCallback) {
|
||
|
|
this.removeEmptyCellClickListenerFn = this.gridster.renderer.listen(this.gridster.el, 'click', this.emptyCellClickCb);
|
||
|
|
this.removeEmptyCellTouchendListenerFn = this.gridster.renderer.listen(this.gridster.el, 'touchend', this.emptyCellClickCb);
|
||
|
|
}
|
||
|
|
else if (!this.gridster.$options.enableEmptyCellClick &&
|
||
|
|
this.removeEmptyCellClickListenerFn &&
|
||
|
|
this.removeEmptyCellTouchendListenerFn) {
|
||
|
|
this.removeEmptyCellClickListenerFn();
|
||
|
|
this.removeEmptyCellTouchendListenerFn();
|
||
|
|
this.removeEmptyCellClickListenerFn = null;
|
||
|
|
this.removeEmptyCellTouchendListenerFn = null;
|
||
|
|
}
|
||
|
|
if (this.gridster.$options.enableEmptyCellContextMenu &&
|
||
|
|
!this.removeEmptyCellContextMenuListenerFn &&
|
||
|
|
this.gridster.options.emptyCellContextMenuCallback) {
|
||
|
|
this.removeEmptyCellContextMenuListenerFn = this.gridster.renderer.listen(this.gridster.el, 'contextmenu', this.emptyCellContextMenuCb);
|
||
|
|
}
|
||
|
|
else if (!this.gridster.$options.enableEmptyCellContextMenu &&
|
||
|
|
this.removeEmptyCellContextMenuListenerFn) {
|
||
|
|
this.removeEmptyCellContextMenuListenerFn();
|
||
|
|
this.removeEmptyCellContextMenuListenerFn = null;
|
||
|
|
}
|
||
|
|
if (this.gridster.$options.enableEmptyCellDrop &&
|
||
|
|
!this.removeEmptyCellDropListenerFn &&
|
||
|
|
this.gridster.options.emptyCellDropCallback) {
|
||
|
|
this.removeEmptyCellDropListenerFn = this.gridster.renderer.listen(this.gridster.el, 'drop', this.emptyCellDragDrop);
|
||
|
|
this.gridster.zone.runOutsideAngular(() => {
|
||
|
|
this.removeEmptyCellDragoverListenerFn = this.gridster.renderer.listen(this.gridster.el, 'dragover', this.emptyCellDragOver);
|
||
|
|
});
|
||
|
|
this.removeDocumentDragendListenerFn = this.gridster.renderer.listen('document', 'dragend', () => {
|
||
|
|
this.gridster.movingItem = null;
|
||
|
|
this.gridster.previewStyle();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else if (!this.gridster.$options.enableEmptyCellDrop &&
|
||
|
|
this.removeEmptyCellDropListenerFn &&
|
||
|
|
this.removeEmptyCellDragoverListenerFn &&
|
||
|
|
this.removeDocumentDragendListenerFn) {
|
||
|
|
this.removeEmptyCellDropListenerFn();
|
||
|
|
this.removeEmptyCellDragoverListenerFn();
|
||
|
|
this.removeDocumentDragendListenerFn();
|
||
|
|
this.removeEmptyCellDragoverListenerFn = null;
|
||
|
|
this.removeEmptyCellDropListenerFn = null;
|
||
|
|
this.removeDocumentDragendListenerFn = null;
|
||
|
|
}
|
||
|
|
if (this.gridster.$options.enableEmptyCellDrag &&
|
||
|
|
!this.removeEmptyCellMousedownListenerFn &&
|
||
|
|
this.gridster.options.emptyCellDragCallback) {
|
||
|
|
this.removeEmptyCellMousedownListenerFn = this.gridster.renderer.listen(this.gridster.el, 'mousedown', this.emptyCellMouseDown);
|
||
|
|
this.removeEmptyCellTouchstartListenerFn = this.gridster.renderer.listen(this.gridster.el, 'touchstart', this.emptyCellMouseDown);
|
||
|
|
}
|
||
|
|
else if (!this.gridster.$options.enableEmptyCellDrag &&
|
||
|
|
this.removeEmptyCellMousedownListenerFn &&
|
||
|
|
this.removeEmptyCellTouchstartListenerFn) {
|
||
|
|
this.removeEmptyCellMousedownListenerFn();
|
||
|
|
this.removeEmptyCellTouchstartListenerFn();
|
||
|
|
this.removeEmptyCellMousedownListenerFn = null;
|
||
|
|
this.removeEmptyCellTouchstartListenerFn = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getPixelsX(e, rect) {
|
||
|
|
const scale = this.gridster.options.scale;
|
||
|
|
if (scale) {
|
||
|
|
return ((e.clientX - rect.left) / scale +
|
||
|
|
this.gridster.el.scrollLeft -
|
||
|
|
this.gridster.gridRenderer.getLeftMargin());
|
||
|
|
}
|
||
|
|
return (e.clientX +
|
||
|
|
this.gridster.el.scrollLeft -
|
||
|
|
rect.left -
|
||
|
|
this.gridster.gridRenderer.getLeftMargin());
|
||
|
|
}
|
||
|
|
getPixelsY(e, rect) {
|
||
|
|
const scale = this.gridster.options.scale;
|
||
|
|
if (scale) {
|
||
|
|
return ((e.clientY - rect.top) / scale +
|
||
|
|
this.gridster.el.scrollTop -
|
||
|
|
this.gridster.gridRenderer.getTopMargin());
|
||
|
|
}
|
||
|
|
return (e.clientY +
|
||
|
|
this.gridster.el.scrollTop -
|
||
|
|
rect.top -
|
||
|
|
this.gridster.gridRenderer.getTopMargin());
|
||
|
|
}
|
||
|
|
getValidItemFromEvent(e, oldItem) {
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
GridsterUtils.checkTouchEvent(e);
|
||
|
|
const rect = this.gridster.el.getBoundingClientRect();
|
||
|
|
const x = this.getPixelsX(e, rect);
|
||
|
|
const y = this.getPixelsY(e, rect);
|
||
|
|
const item = {
|
||
|
|
x: this.gridster.pixelsToPositionX(x, Math.floor, true),
|
||
|
|
y: this.gridster.pixelsToPositionY(y, Math.floor, true),
|
||
|
|
cols: this.gridster.$options.defaultItemCols,
|
||
|
|
rows: this.gridster.$options.defaultItemRows
|
||
|
|
};
|
||
|
|
if (oldItem) {
|
||
|
|
item.cols = Math.min(Math.abs(oldItem.x - item.x) + 1, this.gridster.$options.emptyCellDragMaxCols);
|
||
|
|
item.rows = Math.min(Math.abs(oldItem.y - item.y) + 1, this.gridster.$options.emptyCellDragMaxRows);
|
||
|
|
if (oldItem.x < item.x) {
|
||
|
|
item.x = oldItem.x;
|
||
|
|
}
|
||
|
|
else if (oldItem.x - item.x >
|
||
|
|
this.gridster.$options.emptyCellDragMaxCols - 1) {
|
||
|
|
item.x = this.gridster.movingItem ? this.gridster.movingItem.x : 0;
|
||
|
|
}
|
||
|
|
if (oldItem.y < item.y) {
|
||
|
|
item.y = oldItem.y;
|
||
|
|
}
|
||
|
|
else if (oldItem.y - item.y >
|
||
|
|
this.gridster.$options.emptyCellDragMaxRows - 1) {
|
||
|
|
item.y = this.gridster.movingItem ? this.gridster.movingItem.y : 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!this.gridster.$options.enableOccupiedCellDrop &&
|
||
|
|
this.gridster.checkCollision(item)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
return item;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZHN0ZXJFbXB0eUNlbGwuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItZ3JpZHN0ZXIyL3NyYy9saWIvZ3JpZHN0ZXJFbXB0eUNlbGwuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFJeEQsTUFBTSxPQUFPLGlCQUFpQjtJQWU1QixZQUFvQixRQUFvQztRQUFwQyxhQUFRLEdBQVIsUUFBUSxDQUE0QjtRQTBIeEQscUJBQWdCLEdBQUcsQ0FBQyxDQUFhLEVBQVEsRUFBRTtZQUN6QyxJQUNFLENBQUMsSUFBSSxDQUFDLFFBQVE7Z0JBQ2QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVO2dCQUN4QixhQUFhLENBQUMsdUNBQXVDLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsRUFDdkU7Z0JBQ0EsT0FBTzthQUNSO1lBQ0QsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQzNDLElBQUksQ0FBQyxJQUFJLEVBQUU7Z0JBQ1QsT0FBTzthQUNSO1lBQ0QsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxzQkFBc0IsRUFBRTtnQkFDaEQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsc0JBQXNCLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO2FBQ3ZEO1lBQ0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDckMsQ0FBQyxDQUFDO1FBRUYsMkJBQXNCLEdBQUcsQ0FBQyxDQUFhLEVBQVEsRUFBRTtZQUMvQyxJQUNFLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVTtnQkFDeEIsYUFBYSxDQUFDLHVDQUF1QyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFD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
|