@blare/angular2gridster
Version:
[](https://badge.fury.io/js/angular2gridster)
1,465 lines (1,462 loc) • 489 kB
JavaScript
import { Injectable, Component, ElementRef, ViewChild, NgZone, Input, Output, EventEmitter, ChangeDetectionStrategy, HostBinding, ViewEncapsulation, Inject, Directive, NgModule } from '@angular/core';
import { Subject, merge, of, fromEvent, Subscription } from 'rxjs';
import { debounceTime, takeUntil, switchMap, map, scan, filter, share, tap, distinctUntilChanged, publish, take, skip } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const utils = {
setCssElementPosition: function ($element, position) {
$element.style.left = position.x + 'px';
$element.style.top = position.y + 'px';
},
resetCSSElementPosition: function ($element) {
$element.style.left = '';
$element.style.top = '';
},
setTransform: function ($element, position) {
/** @type {?} */
const left = position.x;
/** @type {?} */
const top = position.y;
// Replace unitless items with px
/** @type {?} */
const translate = `translate(${left}px,${top}px)`;
$element.style['transform'] = translate;
$element.style['WebkitTransform'] = translate;
$element.style['MozTransform'] = translate;
$element.style['msTransform'] = translate;
$element.style['OTransform'] = translate;
},
resetTransform: function ($element) {
$element.style['transform'] = '';
$element.style['WebkitTransform'] = '';
$element.style['MozTransform'] = '';
$element.style['msTransform'] = '';
$element.style['OTransform'] = '';
},
clearSelection: () => {
if (document['selection']) {
document['selection'].empty();
}
else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
},
isElementFitContainer: function (element, containerEl) {
/** @type {?} */
const containerRect = containerEl.getBoundingClientRect();
/** @type {?} */
const elRect = element.getBoundingClientRect();
return elRect.left > containerRect.left &&
elRect.right < containerRect.right &&
elRect.top > containerRect.top &&
elRect.bottom < containerRect.bottom;
},
isElementIntersectContainer: function (element, containerEl) {
/** @type {?} */
const containerRect = containerEl.getBoundingClientRect();
/** @type {?} */
const elRect = element.getBoundingClientRect();
/** @type {?} */
const elWidth = elRect.right - elRect.left;
/** @type {?} */
const elHeight = elRect.bottom - elRect.top;
return (elRect.left + (elWidth / 2)) > containerRect.left &&
(elRect.right - (elWidth / 2)) < containerRect.right &&
(elRect.top + (elHeight / 2)) > containerRect.top &&
(elRect.bottom - (elHeight / 2)) < containerRect.bottom;
},
isElementTouchContainer: function (element, containerEl) {
/** @type {?} */
const containerRect = containerEl.getBoundingClientRect();
/** @type {?} */
const elRect = element.getBoundingClientRect();
return elRect.right > containerRect.left &&
elRect.bottom > containerRect.top &&
elRect.left < containerRect.right &&
elRect.top < containerRect.bottom;
},
isCursorAboveElement: function (event, element) {
/** @type {?} */
const elRect = element.getBoundingClientRect();
return event.pageX > elRect.left &&
event.pageX < elRect.right &&
event.pageY > elRect.top &&
event.pageY < elRect.bottom;
},
getElementOuterHeight: function ($element) {
/** @type {?} */
const styleObj = window.getComputedStyle($element);
// NOTE: Manually calculating height because IE's `clientHeight` isn't always
// reliable.
return parseFloat(styleObj.getPropertyValue('height')) +
parseFloat(styleObj.getPropertyValue('padding-top')) +
parseFloat(styleObj.getPropertyValue('padding-bottom'));
},
getRelativeCoordinates: (element, parentElement) => {
/** @type {?} */
const parentElementRect = parentElement.getBoundingClientRect();
/** @type {?} */
const elementRect = element.getBoundingClientRect();
return {
top: elementRect.top - parentElementRect.top,
left: elementRect.left - parentElementRect.left
};
},
/**
* @param {?} node
* @return {?}
*/
getScrollableContainer(node) {
/** @type {?} */
const regex = /(auto|scroll)/;
/** @type {?} */
const parents = (_node, ps) => {
if (_node.parentNode === null) {
return ps;
}
return parents(_node.parentNode, ps.concat([_node]));
};
/** @type {?} */
const style = (_node, prop) => {
return getComputedStyle(_node, null).getPropertyValue(prop);
};
/** @type {?} */
const overflow = _node => {
return (style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x'));
};
/** @type {?} */
const scroll = _node => regex.test(overflow(_node));
/* eslint-disable consistent-return */
/** @type {?} */
const scrollParent = _node => {
if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
return;
}
/** @type {?} */
const ps = parents(_node.parentNode, []);
for (let i = 0; i < ps.length; i += 1) {
if (scroll(ps[i])) {
return ps[i];
}
}
return document.scrollingElement || document.documentElement;
};
return scrollParent(node);
}
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
const GridCol = function (lanes) {
for (let i = 0; i < lanes; i++) {
this.push(null);
}
};
// Extend the Array prototype
GridCol.prototype = [];
/**
* A GridList manages the two-dimensional positions from a list of items,
* within a virtual matrix.
*
* The GridList's main function is to convert the item positions from one
* grid size to another, maintaining as much of their order as possible.
*
* The GridList's second function is to handle collisions when moving an item
* over another.
*
* The positioning algorithm places items in columns. Starting from left to
* right, going through each column top to bottom.
*
* The size of an item is expressed using the number of cols and rows it
* takes up within the grid (w and h)
*
* The position of an item is express using the col and row position within
* the grid (x and y)
*
* An item is an object of structure:
* {
* w: 3, h: 1,
* x: 0, y: 1
* }
*/
class GridList {
/**
* @param {?} items
* @param {?} options
*/
constructor(items, options) {
this.options = options;
this.items = items;
this.adjustSizeOfItems();
this.generateGrid();
}
/**
* Illustrates grid as text-based table, using a number identifier for each
* item. E.g.
*
* #| 0 1 2 3 4 5 6 7 8 9 10 11 12 13
* --------------------------------------------
* 0| 00 02 03 04 04 06 08 08 08 12 12 13 14 16
* 1| 01 -- 03 05 05 07 09 10 11 11 -- 13 15 --
*
* Warn: Does not work if items don't have a width or height specified
* besides their position in the grid.
* @return {?}
*/
toString() {
/** @type {?} */
const widthOfGrid = this.grid.length;
/** @type {?} */
let output = '\n #|';
/** @type {?} */
let border = '\n --';
/** @type {?} */
let item;
/** @type {?} */
let i;
/** @type {?} */
let j;
// Render the table header
for (i = 0; i < widthOfGrid; i++) {
output += ' ' + this.padNumber(i, ' ');
border += '---';
}
output += border;
// Render table contents row by row, as we go on the y axis
for (i = 0; i < this.options.lanes; i++) {
output += '\n' + this.padNumber(i, ' ') + '|';
for (j = 0; j < widthOfGrid; j++) {
output += ' ';
item = this.grid[j][i];
output += item
? this.padNumber(this.items.indexOf(item), '0')
: '--';
}
}
output += '\n';
return output;
}
/**
* @param {?} name
* @param {?} value
* @return {?}
*/
setOption(name, value) {
this.options[name] = value;
}
/**
* Build the grid structure from scratch, with the current item positions
* @return {?}
*/
generateGrid() {
/** @type {?} */
let i;
this.resetGrid();
for (i = 0; i < this.items.length; i++) {
this.markItemPositionToGrid(this.items[i]);
}
}
/**
* @param {?} lanes
* @return {?}
*/
resizeGrid(lanes) {
/** @type {?} */
let currentColumn = 0;
this.options.lanes = lanes;
this.adjustSizeOfItems();
this.sortItemsByPosition();
this.resetGrid();
// The items will be sorted based on their index within the this.items array,
// that is their "1d position"
for (let i = 0; i < this.items.length; i++) {
/** @type {?} */
const item = this.items[i];
/** @type {?} */
const position = this.getItemPosition(item);
this.updateItemPosition(item, this.findPositionForItem(item, { x: currentColumn, y: 0 }));
// New items should never be placed to the left of previous items
currentColumn = Math.max(currentColumn, position.x);
}
this.pullItemsToLeft();
}
/**
* This method has two options for the position we want for the item:
* - Starting from a certain row/column number and only looking for
* positions to its right
* - Accepting positions for a certain row number only (use-case: items
* being shifted to the left/right as a result of collisions)
*
* @param {?} item
* @param {?} start
* @param {?=} fixedRow
* @return {?} Array x and y.
*/
findPositionForItem(item, start, fixedRow) {
/** @type {?} */
let x;
/** @type {?} */
let y;
/** @type {?} */
let position;
// Start searching for a position from the horizontal position of the
// rightmost item from the grid
for (x = start.x; x < this.grid.length; x++) {
if (fixedRow !== undefined) {
position = [x, fixedRow];
if (this.itemFitsAtPosition(item, position)) {
return position;
}
}
else {
for (y = start.y; y < this.options.lanes; y++) {
position = [x, y];
if (this.itemFitsAtPosition(item, position)) {
return position;
}
}
}
}
// If we've reached this point, we need to start a new column
/** @type {?} */
const newCol = this.grid.length;
/** @type {?} */
let newRow = 0;
if (fixedRow !== undefined &&
this.itemFitsAtPosition(item, [newCol, fixedRow])) {
newRow = fixedRow;
}
return [newCol, newRow];
}
/**
* @param {?} item
* @param {?} newPosition
* @param {?} size
* @return {?}
*/
moveAndResize(item, newPosition, size) {
/** @type {?} */
const position = this.getItemPosition({
x: newPosition[0],
y: newPosition[1],
w: item.w,
h: item.h
});
/** @type {?} */
const width = size.w || item.w;
/** @type {?} */
const height = size.h || item.h;
this.updateItemPosition(item, [position.x, position.y]);
this.updateItemSize(item, width, height);
this.resolveCollisions(item);
}
/**
* @param {?} item
* @param {?} newPosition
* @return {?}
*/
moveItemToPosition(item, newPosition) {
/** @type {?} */
const position = this.getItemPosition({
x: newPosition[0],
y: newPosition[1],
w: item.w,
h: item.h
});
this.updateItemPosition(item, [position.x, position.y]);
this.resolveCollisions(item);
}
/**
* Resize an item and resolve collisions.
*
* @param {?} item
* @param {?} size
* @return {?}
*/
resizeItem(item, size) {
/** @type {?} */
const width = size.w || item.w;
/** @type {?} */
const height = size.h || item.h;
this.updateItemSize(item, width, height);
this.pullItemsToLeft(item);
}
/**
* Compare the current items against a previous snapshot and return only
* the ones that changed their attributes in the meantime. This includes both
* position (x, y) and size (w, h)
*
* Each item that is returned is not the GridListItem but the helper that holds GridListItem
* and list of changed properties.
* @param {?} initialItems
* @param {?=} breakpoint
* @return {?}
*/
getChangedItems(initialItems, breakpoint) {
return this.items
.map((item) => {
/** @type {?} */
const changes = [];
/** @type {?} */
const oldValues = {};
/** @type {?} */
const initItem = initialItems.find(initItm => initItm.$element === item.$element);
if (!initItem) {
return { item, changes: ['x', 'y', 'w', 'h'], isNew: true };
}
/** @type {?} */
const oldX = initItem.getValueX(breakpoint);
if (item.getValueX(breakpoint) !== oldX) {
changes.push('x');
if (oldX || oldX === 0) {
oldValues.x = oldX;
}
}
/** @type {?} */
const oldY = initItem.getValueY(breakpoint);
if (item.getValueY(breakpoint) !== oldY) {
changes.push('y');
if (oldY || oldY === 0) {
oldValues.y = oldY;
}
}
if (item.getValueW(breakpoint) !==
initItem.getValueW(breakpoint)) {
changes.push('w');
oldValues.w = initItem.w;
}
if (item.getValueH(breakpoint) !==
initItem.getValueH(breakpoint)) {
changes.push('h');
oldValues.h = initItem.h;
}
return { item, oldValues, changes, isNew: false };
})
.filter((itemChange) => {
return itemChange.changes.length;
});
}
/**
* @param {?} item
* @return {?}
*/
resolveCollisions(item) {
if (!this.tryToResolveCollisionsLocally(item)) {
this.pullItemsToLeft(item);
}
if (this.options.floating) {
this.pullItemsToLeft();
}
else if (this.getItemsCollidingWithItem(item).length) {
this.pullItemsToLeft();
}
}
/**
* @param {?=} fixedItem
* @return {?}
*/
pushCollidingItems(fixedItem) {
// Start a fresh grid with the fixed item already placed inside
this.sortItemsByPosition();
this.resetGrid();
this.generateGrid();
this.items
.filter(item => !this.isItemFloating(item) && item !== fixedItem)
.forEach(item => {
if (!this.tryToResolveCollisionsLocally(item)) {
this.pullItemsToLeft(item);
}
});
}
/**
* Build the grid from scratch, by using the current item positions and
* pulling them as much to the left as possible, removing as space between
* them as possible.
*
* If a "fixed item" is provided, its position will be kept intact and the
* rest of the items will be layed around it.
* @param {?=} fixedItem
* @return {?}
*/
pullItemsToLeft(fixedItem) {
if (this.options.direction === 'none') {
return;
}
// Start a fresh grid with the fixed item already placed inside
this.sortItemsByPosition();
this.resetGrid();
// Start the grid with the fixed item as the first positioned item
if (fixedItem) {
/** @type {?} */
const fixedPosition = this.getItemPosition(fixedItem);
this.updateItemPosition(fixedItem, [
fixedPosition.x,
fixedPosition.y
]);
}
this.items
.filter((item) => {
return !item.dragAndDrop && item !== fixedItem;
})
.forEach((item) => {
/** @type {?} */
const fixedPosition = this.getItemPosition(item);
this.updateItemPosition(item, [
fixedPosition.x,
fixedPosition.y
]);
});
for (let i = 0; i < this.items.length; i++) {
/** @type {?} */
const item = this.items[i];
/** @type {?} */
const position = this.getItemPosition(item);
// The fixed item keeps its exact position
if ((fixedItem && item === fixedItem) ||
!item.dragAndDrop ||
(!this.options.floating &&
this.isItemFloating(item) &&
!this.getItemsCollidingWithItem(item).length)) {
continue;
}
/** @type {?} */
const x = this.findLeftMostPositionForItem(item);
/** @type {?} */
const newPosition = this.findPositionForItem(item, { x: x, y: 0 }, position.y);
this.updateItemPosition(item, newPosition);
}
}
/**
* @param {?} x
* @param {?} y
* @param {?} w
* @param {?} h
* @param {?=} item
* @return {?}
*/
isOverFixedArea(x, y, w, h, item = null) {
/** @type {?} */
let itemData = { x, y, w, h };
if (this.options.direction !== 'horizontal') {
itemData = { x: y, y: x, w: h, h: w };
}
for (let i = itemData.x; i < itemData.x + itemData.w; i++) {
for (let j = itemData.y; j < itemData.y + itemData.h; j++) {
if (this.grid[i] &&
this.grid[i][j] &&
this.grid[i][j] !== item &&
!this.grid[i][j].dragAndDrop) {
return true;
}
}
}
return false;
}
/**
* @param {?} item
* @param {?} newPosition
* @return {?}
*/
checkItemAboveEmptyArea(item, newPosition) {
/** @type {?} */
let itemData = {
x: newPosition.x,
y: newPosition.y,
w: item.w,
h: item.h
};
if (!item.itemPrototype &&
item.x === newPosition.x &&
item.y === newPosition.y) {
return true;
}
if (this.options.direction === 'horizontal') {
itemData = {
x: newPosition.y,
y: newPosition.x,
w: itemData.h,
h: itemData.w
};
}
return !this.checkItemsInArea(itemData.y, itemData.y + itemData.h - 1, itemData.x, itemData.x + itemData.w - 1, item);
}
/**
* @param {?} options
* @return {?}
*/
fixItemsPositions(options) {
// items with x, y that fits gird with size of options.lanes
/** @type {?} */
const validItems = this.items
.filter((item) => item.itemComponent)
.filter((item) => this.isItemValidForGrid(item, options));
// items that x, y must be generated
/** @type {?} */
const invalidItems = this.items
.filter((item) => item.itemComponent)
.filter((item) => !this.isItemValidForGrid(item, options));
/** @type {?} */
const gridList = new GridList([], options);
// put items with defined positions to the grid
gridList.items = validItems.map((item) => {
return item.copyForBreakpoint(options.breakpoint);
});
gridList.generateGrid();
invalidItems.forEach(item => {
// TODO: check if this change does not broke anything
// const itemCopy = item.copy();
/** @type {?} */
const itemCopy = item.copyForBreakpoint(options.breakpoint);
/** @type {?} */
const position = gridList.findPositionForItem(itemCopy, {
x: 0,
y: 0
});
gridList.items.push(itemCopy);
gridList.setItemPosition(itemCopy, position);
gridList.markItemPositionToGrid(itemCopy);
});
gridList.pullItemsToLeft();
gridList.pushCollidingItems();
this.items.forEach((itm) => {
/** @type {?} */
const cachedItem = gridList.items.filter(cachedItm => {
return cachedItm.$element === itm.$element;
})[0];
itm.setValueX(cachedItem.x, options.breakpoint);
itm.setValueY(cachedItem.y, options.breakpoint);
itm.setValueW(cachedItem.w, options.breakpoint);
itm.setValueH(cachedItem.h, options.breakpoint);
itm.autoSize = cachedItem.autoSize;
});
}
/**
* @param {?} item
* @return {?}
*/
deleteItemPositionFromGrid(item) {
/** @type {?} */
const position = this.getItemPosition(item);
/** @type {?} */
let x;
/** @type {?} */
let y;
for (x = position.x; x < position.x + position.w; x++) {
// It can happen to try to remove an item from a position not generated
// in the grid, probably when loading a persisted grid of items. No need
// to create a column to be able to remove something from it, though
if (!this.grid[x]) {
continue;
}
for (y = position.y; y < position.y + position.h; y++) {
// Don't clear the cell if it's been occupied by a different widget in
// the meantime (e.g. when an item has been moved over this one, and
// thus by continuing to clear this item's previous position you would
// cancel the first item's move, leaving it without any position even)
if (this.grid[x][y] === item) {
this.grid[x][y] = null;
}
}
}
}
/**
* @param {?} item
* @return {?}
*/
isItemFloating(item) {
if (item.itemComponent && item.itemComponent.isDragging) {
return false;
}
/** @type {?} */
const position = this.getItemPosition(item);
if (position.x === 0) {
return false;
}
/** @type {?} */
const rowBelowItem = this.grid[position.x - 1];
return (rowBelowItem || [])
.slice(position.y, position.y + position.h)
.reduce((isFloating, cellItem) => {
return isFloating && !cellItem;
}, true);
}
/**
* @param {?} item
* @param {?} options
* @return {?}
*/
isItemValidForGrid(item, options) {
/** @type {?} */
const itemData = options.direction === 'horizontal'
? {
x: item.getValueY(options.breakpoint),
y: item.getValueX(options.breakpoint),
w: item.getValueH(options.breakpoint),
h: Math.min(item.getValueW(this.options.breakpoint), options.lanes)
}
: {
x: item.getValueX(options.breakpoint),
y: item.getValueY(options.breakpoint),
w: Math.min(item.getValueW(this.options.breakpoint), options.lanes),
h: item.getValueH(options.breakpoint)
};
return (typeof itemData.x === 'number' &&
typeof itemData.y === 'number' &&
itemData.x + itemData.w <= options.lanes);
}
/**
* @param {?} width
* @param {?} height
* @return {?}
*/
findDefaultPositionHorizontal(width, height) {
for (const col of this.grid) {
/** @type {?} */
const colIdx = this.grid.indexOf(col);
/** @type {?} */
let rowIdx = 0;
while (rowIdx < col.length - height + 1) {
if (!this.checkItemsInArea(colIdx, colIdx + width - 1, rowIdx, rowIdx + height - 1)) {
return [colIdx, rowIdx];
}
rowIdx++;
}
}
return [this.grid.length, 0];
}
/**
* @param {?} width
* @param {?} height
* @return {?}
*/
findDefaultPositionVertical(width, height) {
for (const row of this.grid) {
/** @type {?} */
const rowIdx = this.grid.indexOf(row);
/** @type {?} */
let colIdx = 0;
while (colIdx < row.length - width + 1) {
if (!this.checkItemsInArea(rowIdx, rowIdx + height - 1, colIdx, colIdx + width - 1)) {
return [colIdx, rowIdx];
}
colIdx++;
}
}
return [0, this.grid.length];
}
/**
* @param {?} rowStart
* @param {?} rowEnd
* @param {?} colStart
* @param {?} colEnd
* @param {?=} item
* @return {?}
*/
checkItemsInArea(rowStart, rowEnd, colStart, colEnd, item) {
for (let i = rowStart; i <= rowEnd; i++) {
for (let j = colStart; j <= colEnd; j++) {
if (this.grid[i] &&
this.grid[i][j] &&
(item ? this.grid[i][j] !== item : true)) {
return true;
}
}
}
return false;
}
/**
* @return {?}
*/
sortItemsByPosition() {
this.items.sort((item1, item2) => {
/** @type {?} */
const position1 = this.getItemPosition(item1);
/** @type {?} */
const position2 = this.getItemPosition(item2);
// Try to preserve columns.
if (position1.x !== position2.x) {
return position1.x - position2.x;
}
if (position1.y !== position2.y) {
return position1.y - position2.y;
}
// The items are placed on the same position.
return 0;
});
}
/**
* Some items can have 100% height or 100% width. Those dimmensions are
* expressed as 0. We need to ensure a valid width and height for each of
* those items as the number of items per lane.
* @return {?}
*/
adjustSizeOfItems() {
for (let i = 0; i < this.items.length; i++) {
/** @type {?} */
const item = this.items[i];
// This can happen only the first time items are checked.
// We need the property to have a value for all the items so that the
// `cloneItems` method will merge the properties properly. If we only set
// it to the items that need it then the following can happen:
//
// cloneItems([{id: 1, autoSize: true}, {id: 2}],
// [{id: 2}, {id: 1, autoSize: true}]);
//
// will result in
//
// [{id: 1, autoSize: true}, {id: 2, autoSize: true}]
if (item.autoSize === undefined) {
item.autoSize = item.w === 0 || item.h === 0;
}
if (item.autoSize) {
if (this.options.direction === 'horizontal') {
item.h = this.options.lanes;
}
else {
item.w = this.options.lanes;
}
}
}
}
/**
* @return {?}
*/
resetGrid() {
this.grid = [];
}
/**
* Check that an item wouldn't overlap with another one if placed at a
* certain position within the grid
* @param {?} item
* @param {?} newPosition
* @return {?}
*/
itemFitsAtPosition(item, newPosition) {
/** @type {?} */
const position = this.getItemPosition(item);
/** @type {?} */
let x;
/** @type {?} */
let y;
// No coordonate can be negative
if (newPosition[0] < 0 || newPosition[1] < 0) {
return false;
}
// Make sure the item isn't larger than the entire grid
if (newPosition[1] + Math.min(position.h, this.options.lanes) >
this.options.lanes) {
return false;
}
if (this.isOverFixedArea(item.x, item.y, item.w, item.h)) {
return false;
}
// Make sure the position doesn't overlap with an already positioned
// item.
for (x = newPosition[0]; x < newPosition[0] + position.w; x++) {
/** @type {?} */
const col = this.grid[x];
// Surely a column that hasn't even been created yet is available
if (!col) {
continue;
}
for (y = newPosition[1]; y < newPosition[1] + position.h; y++) {
// Any space occupied by an item can continue to be occupied by the
// same item.
if (col[y] && col[y] !== item) {
return false;
}
}
}
return true;
}
/**
* @param {?} item
* @param {?} position
* @return {?}
*/
updateItemPosition(item, position) {
if (item.x !== null && item.y !== null) {
this.deleteItemPositionFromGrid(item);
}
this.setItemPosition(item, position);
this.markItemPositionToGrid(item);
}
/**
* @param {?} item
* @param {?} width
* @param {?} height
* @return {?}
*/
updateItemSize(item, width, height) {
if (item.x !== null && item.y !== null) {
this.deleteItemPositionFromGrid(item);
}
item.w = width;
item.h = height;
this.markItemPositionToGrid(item);
}
/**
* Mark the grid cells that are occupied by an item. This prevents items
* from overlapping in the grid
* @param {?} item
* @return {?}
*/
markItemPositionToGrid(item) {
/** @type {?} */
const position = this.getItemPosition(item);
/** @type {?} */
let x;
/** @type {?} */
let y;
// Ensure that the grid has enough columns to accomodate the current item.
this.ensureColumns(position.x + position.w);
for (x = position.x; x < position.x + position.w; x++) {
for (y = position.y; y < position.y + position.h; y++) {
this.grid[x][y] = item;
}
}
}
/**
* Ensure that the grid has at least N columns available.
* @param {?} N
* @return {?}
*/
ensureColumns(N) {
for (let i = 0; i < N; i++) {
if (!this.grid[i]) {
this.grid.push(new GridCol(this.options.lanes));
}
}
}
/**
* @param {?} item
* @return {?}
*/
getItemsCollidingWithItem(item) {
/** @type {?} */
const collidingItems = [];
for (let i = 0; i < this.items.length; i++) {
if (item !== this.items[i] &&
this.itemsAreColliding(item, this.items[i])) {
collidingItems.push(i);
}
}
return collidingItems;
}
/**
* @param {?} item1
* @param {?} item2
* @return {?}
*/
itemsAreColliding(item1, item2) {
/** @type {?} */
const position1 = this.getItemPosition(item1);
/** @type {?} */
const position2 = this.getItemPosition(item2);
return !(position2.x >= position1.x + position1.w ||
position2.x + position2.w <= position1.x ||
position2.y >= position1.y + position1.h ||
position2.y + position2.h <= position1.y);
}
/**
* Attempt to resolve the collisions after moving an item over one or more
* other items within the grid, by shifting the position of the colliding
* items around the moving one. This might result in subsequent collisions,
* in which case we will revert all position permutations. To be able to
* revert to the initial item positions, we create a virtual grid in the
* process
* @param {?} item
* @return {?}
*/
tryToResolveCollisionsLocally(item) {
/** @type {?} */
const collidingItems = this.getItemsCollidingWithItem(item);
if (!collidingItems.length) {
return true;
}
/** @type {?} */
const _gridList = new GridList(this.items.map(itm => {
return itm.copy();
}), this.options);
/** @type {?} */
let leftOfItem;
/** @type {?} */
let rightOfItem;
/** @type {?} */
let aboveOfItem;
/** @type {?} */
let belowOfItem;
for (let i = 0; i < collidingItems.length; i++) {
/** @type {?} */
const collidingItem = _gridList.items[collidingItems[i]];
/** @type {?} */
const collidingPosition = this.getItemPosition(collidingItem);
// We use a simple algorithm for moving items around when collisions occur:
// In this prioritized order, we try to move a colliding item around the
// moving one:
// 1. to its left side
// 2. above it
// 3. under it
// 4. to its right side
/** @type {?} */
const position = this.getItemPosition(item);
leftOfItem = [
position.x - collidingPosition.w,
collidingPosition.y
];
rightOfItem = [position.x + position.w, collidingPosition.y];
aboveOfItem = [
collidingPosition.x,
position.y - collidingPosition.h
];
belowOfItem = [collidingPosition.x, position.y + position.h];
if (_gridList.itemFitsAtPosition(collidingItem, leftOfItem)) {
_gridList.updateItemPosition(collidingItem, leftOfItem);
}
else if (_gridList.itemFitsAtPosition(collidingItem, aboveOfItem)) {
_gridList.updateItemPosition(collidingItem, aboveOfItem);
}
else if (_gridList.itemFitsAtPosition(collidingItem, belowOfItem)) {
_gridList.updateItemPosition(collidingItem, belowOfItem);
}
else if (_gridList.itemFitsAtPosition(collidingItem, rightOfItem)) {
_gridList.updateItemPosition(collidingItem, rightOfItem);
}
else {
// Collisions failed, we must use the pullItemsToLeft method to arrange
// the other items around this item with fixed position. This is our
// plan B for when local collision resolving fails.
return false;
}
}
// If we reached this point it means we managed to resolve the collisions
// from one single iteration, just by moving the colliding items around. So
// we accept this scenario and merge the branched-out grid instance into the
// original one
this.items.forEach((itm, idx) => {
/** @type {?} */
const cachedItem = _gridList.items.filter(cachedItm => {
return cachedItm.$element === itm.$element;
})[0];
itm.x = cachedItem.x;
itm.y = cachedItem.y;
itm.w = cachedItem.w;
itm.h = cachedItem.h;
itm.autoSize = cachedItem.autoSize;
});
this.generateGrid();
return true;
}
/**
* When pulling items to the left, we need to find the leftmost position for
* an item, with two considerations in mind:
* - preserving its current row
* - preserving the previous horizontal order between items
* @param {?} item
* @return {?}
*/
findLeftMostPositionForItem(item) {
/** @type {?} */
let tail = 0;
/** @type {?} */
const position = this.getItemPosition(item);
for (let i = 0; i < this.grid.length; i++) {
for (let j = position.y; j < position.y + position.h; j++) {
/** @type {?} */
const otherItem = this.grid[i][j];
if (!otherItem) {
continue;
}
/** @type {?} */
const otherPosition = this.getItemPosition(otherItem);
if (this.items.indexOf(otherItem) < this.items.indexOf(item)) {
tail = otherPosition.x + otherPosition.w;
}
}
}
return tail;
}
/**
* @param {?} x
* @param {?} y
* @return {?}
*/
findItemByPosition(x, y) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].x === x && this.items[i].y === y) {
return this.items[i];
}
}
}
/**
* @param {?} key
* @param {?} value
* @return {?}
*/
getItemByAttribute(key, value) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i][key] === value) {
return this.items[i];
}
}
return null;
}
/**
* @param {?} nr
* @param {?} prefix
* @return {?}
*/
padNumber(nr, prefix) {
// Currently works for 2-digit numbers (<100)
return nr >= 10 ? nr : prefix + nr;
}
/**
* If the direction is vertical we need to rotate the grid 90 deg to the
* left. Thus, we simulate the fact that items are being pulled to the top.
*
* Since the items have widths and heights, if we apply the classic
* counter-clockwise 90 deg rotation
*
* [0 -1]
* [1 0]
*
* then the top left point of an item will become the bottom left point of
* the rotated item. To adjust for this, we need to subtract from the y
* position the height of the original item - the width of the rotated item.
*
* However, if we do this then we'll reverse some actions: resizing the
* width of an item will stretch the item to the left instead of to the
* right; resizing an item that doesn't fit into the grid will push the
* items around it instead of going on a new row, etc.
*
* We found it better to do a vertical flip of the grid after rotating it.
* This restores the direction of the actions and greatly simplifies the
* transformations.
* @param {?} item
* @return {?}
*/
getItemPosition(item) {
if (this.options.direction === 'horizontal') {
return item;
}
else {
return {
x: item.y,
y: item.x,
w: item.h,
h: item.w
};
}
}
/**
* See getItemPosition.
* @param {?} item
* @param {?} position
* @return {?}
*/
setItemPosition(item, position) {
if (this.options.direction === 'horizontal') {
item.x = position[0];
item.y = position[1];
}
else {
// We're supposed to subtract the rotated item's height which is actually
// the non-rotated item's width.
item.x = position[1];
item.y = position[0];
}
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
class GridsterService {
constructor() {
this.items = [];
this._items = [];
this._itemsMap = {};
this.disabledItems = [];
this.debounceRenderSubject = new Subject();
this.itemRemoveSubject = new Subject();
this.isInit = false;
this.itemRemoveSubject.pipe(debounceTime(0)).subscribe(() => {
this.gridList.pullItemsToLeft();
this.render();
this.updateCachedItems();
});
this.debounceRenderSubject.pipe(debounceTime(0)).subscribe(() => this.render());
}
/**
* @return {?}
*/
isInitialized() {
return this.isInit;
}
/**
* Must be called before init
* @param {?} item
* @return {?}
*/
registerItem(item) {
this.items.push(item);
return item;
}
/**
* @param {?} gridsterComponent
* @return {?}
*/
init(gridsterComponent) {
this.gridsterComponent = gridsterComponent;
this.draggableOptions = gridsterComponent.draggableOptions;
this.gridsterOptions = gridsterComponent.gridsterOptions;
}
/**
* @return {?}
*/
start() {
this.updateMaxItemSize();
// Used to highlight a position an element will land on upon drop
if (this.$positionHighlight) {
this.removePositionHighlight();
}
this.initGridList();
this.isInit = true;
setTimeout(() => {
this.copyItems();
this.fixItemsPositions();
this.gridsterComponent.reflowGridster(true);
this.gridsterComponent.setReady();
});
}
/**
* @return {?}
*/
initGridList() {
// Create instance of GridList (decoupled lib for handling the grid
// positioning and sorting post-drag and dropping)
this.gridList = new GridList(this.items, this.options);
}
/**
* @return {?}
*/
render() {
this.updateMaxItemSize();
this.gridList.generateGrid();
this.applySizeToItems();
this.applyPositionToItems();
this.refreshLines();
}
/**
* @return {?}
*/
reflow() {
this.calculateCellSize();
this.render();
}
/**
* @return {?}
*/
fixItemsPositions() {
if (this.options.responsiveSizes) {
this.gridList.fixItemsPositions(this.options);
}
else {
this.gridList.fixItemsPositions(this.gridsterOptions.basicOptions);
this.gridsterOptions.responsiveOptions.forEach((options) => {
this.gridList.fixItemsPositions(options);
});
}
this.updateCachedItems();
}
/**
* @param {?} item
* @return {?}
*/
removeItem(item) {
/** @type {?} */
const idx = this.items.indexOf(item);
if (idx >= 0) {
this.items.splice(this.items.indexOf(item), 1);
}
this.gridList.deleteItemPositionFromGrid(item);
this.removeItemFromCache(item);
}
/**
* @param {?} item
* @return {?}
*/
onResizeStart(item) {
this.currentElement = item.$element;
this.copyItems();
this._maxGridCols = this.gridList.grid.length;
this.highlightPositionForItem(item);
this.gridsterComponent.isResizing = true;
this.refreshLines();
}
/**
* @param {?} item
* @return {?}
*/
onResizeDrag(item) {
/** @type {?} */
const newSize = this.snapItemSizeToGrid(item);
/** @type {?} */
const sizeChanged = this.dragSizeChanged(newSize);
/** @type {?} */
const newPosition = this.snapItemPositionToGrid(item);
/** @type {?} */
const positionChanged = this.dragPositionChanged(newPosition);
if (sizeChanged || positionChanged) {
// Regenerate the grid with the positions from when the drag started
this.restoreCachedItems();
this.gridList.generateGrid();
this.previousDragPosition = newPosition;
this.previousDragSize = newSize;
this.gridList.moveAndResize(item, newPosition, { w: newSize[0], h: newSize[1] });
// Visually update item positions and highlight shape
this.applyPositionToItems(true);
this.highlightPositionForItem(item);
}
}
/**
* @param {?} item
* @return {?}
*/
onResizeStop(item) {
this.currentElement = undefined;
this.updateCachedItems();
this.previousDragSize = null;
this.removePositionHighlight();
this.gridsterComponent.isResizing = false;
this.gridList.pullItemsToLeft(item);
this.debounceRenderSubject.next();
this.fixItemsPositions();
}
/**
* @param {?} item
* @return {?}
*/
onStart(item) {
this.currentElement = item.$element;
// itemCtrl.isDragging = true;
// Create a deep copy of the items; we use them to revert the item
// positions after each drag change, making an entire drag operation less
// distructable
this.copyItems();
// Since dragging actually alters the grid, we need to establish the number
// of cols (+1 extra) before the drag starts
this._maxGridCols = this.gridList.grid.length;
this.gridsterComponent.isDragging = true;
this.gridsterComponent.updateGridsterElementData();
this.refreshLines();
}
/**
* @param {?} item
* @return {?}
*/
onDrag(item) {
/** @type {?} */
const newPosition = this.snapItemPositionToGrid(item);
if (this.dragPositionChanged(newPosition)) {
// Regenerate the grid with the positions from when the drag started
this.restoreCachedItems();
this.gridList.generateGrid();
this.previousDragPosition = newPosition;
if (this.options.direction === 'none' &&
!this.gridList.checkItemAboveEmptyArea(item, { x: newPosition[0], y: newPosition[1] })) {
return;
}
// Since the items list is a deep copy, we need to fetch the item
// corresponding to this drag action again
this.gridList.moveItemToPosition(item, newPosition);
// Visually update item positions and highlight shape
this.applyPositionToItems(true);
this.highlightPositionForItem(item);
}
}
/**
* @return {?}
*/
cancel() {
this.restoreCachedItems();
this.previousDragPosition = null;
this.updateMaxItemSize();
this.applyPositionToItems();
this.removePositionHighlight();
this.currentElement = undefined;
this.gridsterComponent.isDragging = false;
}
/**
* @param {?} item
* @return {?}
*/
onDragOut(item) {
this.cancel();
/** @type {?} */
const idx = this.items.indexOf(item);
if (idx >= 0) {
this.items.splice(idx, 1);
}
this.gridList.pullItemsToLeft();
this.render();
}
/**
* @param {?} item
* @return {?}
*/
onStop(item) {
this.currentElement = undefined;
this.updateCachedItems();
this.previousDragPosition = null;
this.removePositionHighlight();
this.gridList.pullItemsToLeft(item);
this.gridsterComponent.isDragging = false;
this.refreshLines();
}
/**
* @return {?}
*/
calculateCellSize() {
if (this.options.direction === 'horizontal') {
this.cellHeight = this.calculateCellHeight();
this.cellWidth = this.options.cellWidth || this.cellHeight * this.options.widthHeightRatio;
}
else {
this.cellWidth = this.calculateCellWidth();
this.cellHeight = this.options.cellHeight || this.cellWidth / this.options.widthHeightRatio;
}
if (this.options.heightToFontSizeRatio) {
this._fontSize = this.cellHeight * this.options.heightToFontSizeRatio;
}
}
/**
* @param {?=} increaseGridsterSize
* @return {?}
*/
applyPositionToItems(increaseGridsterSize) {
if (!this.options.shrink) {
increaseGridsterSize = true;
}
// TODO: Implement group separators
for (let i = 0; i < this.items.length; i++) {
// Don't interfere with the positions of the dragged items
if (this.isCurrentElement(this.items[i].$element)) {
continue;
}
this.items[i].applyPosition(this);
}
/** @type {?} */
const child = (/** @type {?} */ (this.gridsterComponent.$element.firstChild));
// Update the width of the entire grid container with enough room on the
// right to allow dragging items to the end of the grid.
if (this.options.direction === 'horizontal') {
/** @type {?} */
const increaseWidthWith = (increaseGridsterSize) ? this.maxItemWidth : 0;
child.style.height = '';