@blare/angular2gridster
Version:
[](https://badge.fury.io/js/angular2gridster)
1,253 lines (1,247 loc) • 592 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('@blare/angular2gridster', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/common'], factory) :
(factory((global.blare = global.blare || {}, global.blare.angular2gridster = {}),global.ng.core,global.rxjs,global.rxjs.operators,global.ng.common));
}(this, (function (exports,core,rxjs,operators,common) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
var 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 {?} */
var left = position.x;
/** @type {?} */
var top = position.y;
// Replace unitless items with px
/** @type {?} */
var 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: function () {
if (document['selection']) {
document['selection'].empty();
}
else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
},
isElementFitContainer: function (element, containerEl) {
/** @type {?} */
var containerRect = containerEl.getBoundingClientRect();
/** @type {?} */
var 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 {?} */
var containerRect = containerEl.getBoundingClientRect();
/** @type {?} */
var elRect = element.getBoundingClientRect();
/** @type {?} */
var elWidth = elRect.right - elRect.left;
/** @type {?} */
var 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 {?} */
var containerRect = containerEl.getBoundingClientRect();
/** @type {?} */
var 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 {?} */
var elRect = element.getBoundingClientRect();
return event.pageX > elRect.left &&
event.pageX < elRect.right &&
event.pageY > elRect.top &&
event.pageY < elRect.bottom;
},
getElementOuterHeight: function ($element) {
/** @type {?} */
var 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: function (element, parentElement) {
/** @type {?} */
var parentElementRect = parentElement.getBoundingClientRect();
/** @type {?} */
var elementRect = element.getBoundingClientRect();
return {
top: elementRect.top - parentElementRect.top,
left: elementRect.left - parentElementRect.left
};
},
getScrollableContainer: /**
* @param {?} node
* @return {?}
*/ function (node) {
/** @type {?} */
var regex = /(auto|scroll)/;
/** @type {?} */
var parents = function (_node, ps) {
if (_node.parentNode === null) {
return ps;
}
return parents(_node.parentNode, ps.concat([_node]));
};
/** @type {?} */
var style = function (_node, prop) {
return getComputedStyle(_node, null).getPropertyValue(prop);
};
/** @type {?} */
var overflow = function (_node) {
return (style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x'));
};
/** @type {?} */
var scroll = function (_node) { return regex.test(overflow(_node)); };
/* eslint-disable consistent-return */
/** @type {?} */
var scrollParent = function (_node) {
if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
return;
}
/** @type {?} */
var ps = parents(_node.parentNode, []);
for (var i = 0; i < ps.length; i += 1) {
if (scroll(ps[i])) {
return ps[i];
}
}
return document.scrollingElement || document.documentElement;
};
return scrollParent(node);
}
};
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m)
return m.call(o);
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc
*/
/** @type {?} */
var GridCol = function (lanes) {
for (var 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
* }
*/
var /**
* 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
* }
*/ GridList = /** @class */ (function () {
function GridList(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.
*/
/**
* 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 {?}
*/
GridList.prototype.toString = /**
* 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 {?}
*/
function () {
/** @type {?} */
var widthOfGrid = this.grid.length;
/** @type {?} */
var output = '\n #|';
/** @type {?} */
var border = '\n --';
/** @type {?} */
var item;
/** @type {?} */
var i;
/** @type {?} */
var 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 {?}
*/
GridList.prototype.setOption = /**
* @param {?} name
* @param {?} value
* @return {?}
*/
function (name, value) {
this.options[name] = value;
};
/**
* Build the grid structure from scratch, with the current item positions
*/
/**
* Build the grid structure from scratch, with the current item positions
* @return {?}
*/
GridList.prototype.generateGrid = /**
* Build the grid structure from scratch, with the current item positions
* @return {?}
*/
function () {
/** @type {?} */
var i;
this.resetGrid();
for (i = 0; i < this.items.length; i++) {
this.markItemPositionToGrid(this.items[i]);
}
};
/**
* @param {?} lanes
* @return {?}
*/
GridList.prototype.resizeGrid = /**
* @param {?} lanes
* @return {?}
*/
function (lanes) {
/** @type {?} */
var 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 (var i = 0; i < this.items.length; i++) {
/** @type {?} */
var item = this.items[i];
/** @type {?} */
var 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 Object item
* @param Object start Position from which to start
* the search.
* @param number [fixedRow] If provided, we're going to try to find a
* position for the new item on it. If doesn't fit there, we're going
* to put it on the first row.
*
* @returns Array x and y.
*/
/**
* 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.
*/
GridList.prototype.findPositionForItem = /**
* 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.
*/
function (item, start, fixedRow) {
/** @type {?} */
var x;
/** @type {?} */
var y;
/** @type {?} */
var 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 {?} */
var newCol = this.grid.length;
/** @type {?} */
var newRow = 0;
if (fixedRow !== undefined &&
this.itemFitsAtPosition(item, [newCol, fixedRow])) {
newRow = fixedRow;
}
return [newCol, newRow];
};
/**
* @param {?} item
* @param {?} newPosition
* @param {?} size
* @return {?}
*/
GridList.prototype.moveAndResize = /**
* @param {?} item
* @param {?} newPosition
* @param {?} size
* @return {?}
*/
function (item, newPosition, size) {
/** @type {?} */
var position = this.getItemPosition({
x: newPosition[0],
y: newPosition[1],
w: item.w,
h: item.h
});
/** @type {?} */
var width = size.w || item.w;
/** @type {?} */
var 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 {?}
*/
GridList.prototype.moveItemToPosition = /**
* @param {?} item
* @param {?} newPosition
* @return {?}
*/
function (item, newPosition) {
/** @type {?} */
var 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 Object item A reference to an item that's part of the grid.
* @param Object size
* @param number [size.w=item.w] The new width.
* @param number [size.h=item.h] The new height.
*/
/**
* Resize an item and resolve collisions.
*
* @param {?} item
* @param {?} size
* @return {?}
*/
GridList.prototype.resizeItem = /**
* Resize an item and resolve collisions.
*
* @param {?} item
* @param {?} size
* @return {?}
*/
function (item, size) {
/** @type {?} */
var width = size.w || item.w;
/** @type {?} */
var 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.
*/
/**
* 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 {?}
*/
GridList.prototype.getChangedItems = /**
* 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 {?}
*/
function (initialItems, breakpoint) {
return this.items
.map(function (item) {
/** @type {?} */
var changes = [];
/** @type {?} */
var oldValues = {};
/** @type {?} */
var initItem = initialItems.find(function (initItm) { return initItm.$element === item.$element; });
if (!initItem) {
return { item: item, changes: ['x', 'y', 'w', 'h'], isNew: true };
}
/** @type {?} */
var oldX = initItem.getValueX(breakpoint);
if (item.getValueX(breakpoint) !== oldX) {
changes.push('x');
if (oldX || oldX === 0) {
oldValues.x = oldX;
}
}
/** @type {?} */
var 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: item, oldValues: oldValues, changes: changes, isNew: false };
})
.filter(function (itemChange) {
return itemChange.changes.length;
});
};
/**
* @param {?} item
* @return {?}
*/
GridList.prototype.resolveCollisions = /**
* @param {?} item
* @return {?}
*/
function (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 {?}
*/
GridList.prototype.pushCollidingItems = /**
* @param {?=} fixedItem
* @return {?}
*/
function (fixedItem) {
var _this = this;
// Start a fresh grid with the fixed item already placed inside
this.sortItemsByPosition();
this.resetGrid();
this.generateGrid();
this.items
.filter(function (item) { return !_this.isItemFloating(item) && item !== fixedItem; })
.forEach(function (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.
*/
/**
* 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 {?}
*/
GridList.prototype.pullItemsToLeft = /**
* 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 {?}
*/
function (fixedItem) {
var _this = this;
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 {?} */
var fixedPosition = this.getItemPosition(fixedItem);
this.updateItemPosition(fixedItem, [
fixedPosition.x,
fixedPosition.y
]);
}
this.items
.filter(function (item) {
return !item.dragAndDrop && item !== fixedItem;
})
.forEach(function (item) {
/** @type {?} */
var fixedPosition = _this.getItemPosition(item);
_this.updateItemPosition(item, [
fixedPosition.x,
fixedPosition.y
]);
});
for (var i = 0; i < this.items.length; i++) {
/** @type {?} */
var item = this.items[i];
/** @type {?} */
var 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 {?} */
var x = this.findLeftMostPositionForItem(item);
/** @type {?} */
var 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 {?}
*/
GridList.prototype.isOverFixedArea = /**
* @param {?} x
* @param {?} y
* @param {?} w
* @param {?} h
* @param {?=} item
* @return {?}
*/
function (x, y, w, h, item) {
if (item === void 0) {
item = null;
}
/** @type {?} */
var itemData = { x: x, y: y, w: w, h: h };
if (this.options.direction !== 'horizontal') {
itemData = { x: y, y: x, w: h, h: w };
}
for (var i = itemData.x; i < itemData.x + itemData.w; i++) {
for (var 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 {?}
*/
GridList.prototype.checkItemAboveEmptyArea = /**
* @param {?} item
* @param {?} newPosition
* @return {?}
*/
function (item, newPosition) {
/** @type {?} */
var 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 {?}
*/
GridList.prototype.fixItemsPositions = /**
* @param {?} options
* @return {?}
*/
function (options) {
var _this = this;
// items with x, y that fits gird with size of options.lanes
/** @type {?} */
var validItems = this.items
.filter(function (item) { return item.itemComponent; })
.filter(function (item) {
return _this.isItemValidForGrid(item, options);
});
// items that x, y must be generated
/** @type {?} */
var invalidItems = this.items
.filter(function (item) { return item.itemComponent; })
.filter(function (item) { return !_this.isItemValidForGrid(item, options); });
/** @type {?} */
var gridList = new GridList([], options);
// put items with defined positions to the grid
gridList.items = validItems.map(function (item) {
return item.copyForBreakpoint(options.breakpoint);
});
gridList.generateGrid();
invalidItems.forEach(function (item) {
// TODO: check if this change does not broke anything
// const itemCopy = item.copy();
/** @type {?} */
var itemCopy = item.copyForBreakpoint(options.breakpoint);
/** @type {?} */
var 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(function (itm) {
/** @type {?} */
var cachedItem = gridList.items.filter(function (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 {?}
*/
GridList.prototype.deleteItemPositionFromGrid = /**
* @param {?} item
* @return {?}
*/
function (item) {
/** @type {?} */
var position = this.getItemPosition(item);
/** @type {?} */
var x;
/** @type {?} */
var 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 {?}
*/
GridList.prototype.isItemFloating = /**
* @param {?} item
* @return {?}
*/
function (item) {
if (item.itemComponent && item.itemComponent.isDragging) {
return false;
}
/** @type {?} */
var position = this.getItemPosition(item);
if (position.x === 0) {
return false;
}
/** @type {?} */
var rowBelowItem = this.grid[position.x - 1];
return (rowBelowItem || [])
.slice(position.y, position.y + position.h)
.reduce(function (isFloating, cellItem) {
return isFloating && !cellItem;
}, true);
};
/**
* @param {?} item
* @param {?} options
* @return {?}
*/
GridList.prototype.isItemValidForGrid = /**
* @param {?} item
* @param {?} options
* @return {?}
*/
function (item, options) {
/** @type {?} */
var 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 {?}
*/
GridList.prototype.findDefaultPositionHorizontal = /**
* @param {?} width
* @param {?} height
* @return {?}
*/
function (width, height) {
var e_1, _a;
try {
for (var _b = __values(this.grid), _c = _b.next(); !_c.done; _c = _b.next()) {
var col = _c.value;
/** @type {?} */
var colIdx = this.grid.indexOf(col);
/** @type {?} */
var rowIdx = 0;
while (rowIdx < col.length - height + 1) {
if (!this.checkItemsInArea(colIdx, colIdx + width - 1, rowIdx, rowIdx + height - 1)) {
return [colIdx, rowIdx];
}
rowIdx++;
}
}
}
catch (e_1_1) {
e_1 = { error: e_1_1 };
}
finally {
try {
if (_c && !_c.done && (_a = _b.return))
_a.call(_b);
}
finally {
if (e_1)
throw e_1.error;
}
}
return [this.grid.length, 0];
};
/**
* @param {?} width
* @param {?} height
* @return {?}
*/
GridList.prototype.findDefaultPositionVertical = /**
* @param {?} width
* @param {?} height
* @return {?}
*/
function (width, height) {
var e_2, _a;
try {
for (var _b = __values(this.grid), _c = _b.next(); !_c.done; _c = _b.next()) {
var row = _c.value;
/** @type {?} */
var rowIdx = this.grid.indexOf(row);
/** @type {?} */
var colIdx = 0;
while (colIdx < row.length - width + 1) {
if (!this.checkItemsInArea(rowIdx, rowIdx + height - 1, colIdx, colIdx + width - 1)) {
return [colIdx, rowIdx];
}
colIdx++;
}
}
}
catch (e_2_1) {
e_2 = { error: e_2_1 };
}
finally {
try {
if (_c && !_c.done && (_a = _b.return))
_a.call(_b);
}
finally {
if (e_2)
throw e_2.error;
}
}
return [0, this.grid.length];
};
/**
* @param {?} rowStart
* @param {?} rowEnd
* @param {?} colStart
* @param {?} colEnd
* @param {?=} item
* @return {?}
*/
GridList.prototype.checkItemsInArea = /**
* @param {?} rowStart
* @param {?} rowEnd
* @param {?} colStart
* @param {?} colEnd
* @param {?=} item
* @return {?}
*/
function (rowStart, rowEnd, colStart, colEnd, item) {
for (var i = rowStart; i <= rowEnd; i++) {
for (var 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 {?}
*/
GridList.prototype.sortItemsByPosition = /**
* @return {?}
*/
function () {
var _this = this;
this.items.sort(function (item1, item2) {
/** @type {?} */
var position1 = _this.getItemPosition(item1);
/** @type {?} */
var 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.
*/
/**
* 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 {?}
*/
GridList.prototype.adjustSizeOfItems = /**
* 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 {?}
*/
function () {
for (var i = 0; i < this.items.length; i++) {
/** @type {?} */
var 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 {?}
*/
GridList.prototype.resetGrid = /**
* @return {?}
*/
function () {
this.grid = [];
};
/**
* Check that an item wouldn't overlap with another one if placed at a
* certain position within the 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 {?}
*/
GridList.prototype.itemFitsAtPosition = /**
* Check that an item wouldn't overlap with another one if placed at a
* certain position within the grid
* @param {?} item
* @param {?} newPosition
* @return {?}
*/
function (item, newPosition) {
/** @type {?} */
var position = this.getItemPosition(item);
/** @type {?} */
var x;
/** @type {?} */
var 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 {?} */
var 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 {?}
*/
GridList.prototype.updateItemPosition = /**
* @param {?} item
* @param {?} position
* @return {?}
*/
function (item, position) {
if (item.x !== null && item.y !== null) {
this.deleteItemPositionFromGrid(item);
}
this.setItemPosition(item, position);
this.markItemPositionToGrid(item);
};
/**
* @param Object item A reference to a grid item.
* @param number width The new width.
* @param number height The new height.
*/
/**
* @param {?} item
* @param {?} width
* @param {?} height