274 lines
38 KiB
JavaScript
274 lines
38 KiB
JavaScript
|
import { DirTypes, GridType } from './gridsterConfig.interface';
|
||
|
|
export class GridsterRenderer {
|
||
|
|
constructor(gridster) {
|
||
|
|
this.gridster = gridster;
|
||
|
|
/**
|
||
|
|
* Caches the last grid column styles.
|
||
|
|
* This improves the grid responsiveness by caching and reusing the last style object instead of creating a new one.
|
||
|
|
*/
|
||
|
|
this.lastGridColumnStyles = {};
|
||
|
|
/**
|
||
|
|
* Caches the last grid column styles.
|
||
|
|
* This improves the grid responsiveness by caching and reusing the last style object instead of creating a new one.
|
||
|
|
*/
|
||
|
|
this.lastGridRowStyles = {};
|
||
|
|
}
|
||
|
|
destroy() {
|
||
|
|
this.gridster = null;
|
||
|
|
}
|
||
|
|
updateItem(el, item, renderer) {
|
||
|
|
if (this.gridster.mobile) {
|
||
|
|
this.clearCellPosition(renderer, el);
|
||
|
|
if (this.gridster.$options.keepFixedHeightInMobile) {
|
||
|
|
renderer.setStyle(el, 'height', (item.rows - 1) * this.gridster.$options.margin +
|
||
|
|
item.rows * this.gridster.$options.fixedRowHeight +
|
||
|
|
'px');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
renderer.setStyle(el, 'height', (item.rows * this.gridster.curWidth) / item.cols + 'px');
|
||
|
|
}
|
||
|
|
if (this.gridster.$options.keepFixedWidthInMobile) {
|
||
|
|
renderer.setStyle(el, 'width', this.gridster.$options.fixedColWidth + 'px');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
renderer.setStyle(el, 'width', '');
|
||
|
|
}
|
||
|
|
renderer.setStyle(el, 'margin-bottom', this.gridster.$options.margin + 'px');
|
||
|
|
renderer.setStyle(el, DirTypes.LTR ? 'margin-right' : 'margin-left', '');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const x = Math.round(this.gridster.curColWidth * item.x);
|
||
|
|
const y = Math.round(this.gridster.curRowHeight * item.y);
|
||
|
|
const width = this.gridster.curColWidth * item.cols - this.gridster.$options.margin;
|
||
|
|
const height = this.gridster.curRowHeight * item.rows - this.gridster.$options.margin;
|
||
|
|
// set the cell style
|
||
|
|
this.setCellPosition(renderer, el, x, y);
|
||
|
|
renderer.setStyle(el, 'width', width + 'px');
|
||
|
|
renderer.setStyle(el, 'height', height + 'px');
|
||
|
|
let marginBottom = null;
|
||
|
|
let marginRight = null;
|
||
|
|
if (this.gridster.$options.outerMargin) {
|
||
|
|
if (this.gridster.rows === item.rows + item.y) {
|
||
|
|
if (this.gridster.$options.outerMarginBottom !== null) {
|
||
|
|
marginBottom = this.gridster.$options.outerMarginBottom + 'px';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
marginBottom = this.gridster.$options.margin + 'px';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.gridster.columns === item.cols + item.x) {
|
||
|
|
if (this.gridster.$options.outerMarginBottom !== null) {
|
||
|
|
marginRight = this.gridster.$options.outerMarginRight + 'px';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
marginRight = this.gridster.$options.margin + 'px';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
renderer.setStyle(el, 'margin-bottom', marginBottom);
|
||
|
|
renderer.setStyle(el, DirTypes.LTR ? 'margin-right' : 'margin-left', marginRight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updateGridster() {
|
||
|
|
let addClass = '';
|
||
|
|
let removeClass1 = '';
|
||
|
|
let removeClass2 = '';
|
||
|
|
let removeClass3 = '';
|
||
|
|
if (this.gridster.$options.gridType === GridType.Fit) {
|
||
|
|
addClass = GridType.Fit;
|
||
|
|
removeClass1 = GridType.ScrollVertical;
|
||
|
|
removeClass2 = GridType.ScrollHorizontal;
|
||
|
|
removeClass3 = GridType.Fixed;
|
||
|
|
}
|
||
|
|
else if (this.gridster.$options.gridType === GridType.ScrollVertical) {
|
||
|
|
this.gridster.curRowHeight =
|
||
|
|
this.gridster.curColWidth * this.gridster.$options.rowHeightRatio;
|
||
|
|
addClass = GridType.ScrollVertical;
|
||
|
|
removeClass1 = GridType.Fit;
|
||
|
|
removeClass2 = GridType.ScrollHorizontal;
|
||
|
|
removeClass3 = GridType.Fixed;
|
||
|
|
}
|
||
|
|
else if (this.gridster.$options.gridType === GridType.ScrollHorizontal) {
|
||
|
|
const widthRatio = this.gridster.$options.rowHeightRatio;
|
||
|
|
const calWidthRatio = widthRatio >= 1 ? widthRatio : widthRatio + 1;
|
||
|
|
this.gridster.curColWidth = this.gridster.curRowHeight * calWidthRatio;
|
||
|
|
addClass = GridType.ScrollHorizontal;
|
||
|
|
removeClass1 = GridType.Fit;
|
||
|
|
removeClass2 = GridType.ScrollVertical;
|
||
|
|
removeClass3 = GridType.Fixed;
|
||
|
|
}
|
||
|
|
else if (this.gridster.$options.gridType === GridType.Fixed) {
|
||
|
|
this.gridster.curColWidth =
|
||
|
|
this.gridster.$options.fixedColWidth +
|
||
|
|
(this.gridster.$options.ignoreMarginInRow
|
||
|
|
? 0
|
||
|
|
: this.gridster.$options.margin);
|
||
|
|
this.gridster.curRowHeight =
|
||
|
|
this.gridster.$options.fixedRowHeight +
|
||
|
|
(this.gridster.$options.ignoreMarginInRow
|
||
|
|
? 0
|
||
|
|
: this.gridster.$options.margin);
|
||
|
|
addClass = GridType.Fixed;
|
||
|
|
removeClass1 = GridType.Fit;
|
||
|
|
removeClass2 = GridType.ScrollVertical;
|
||
|
|
removeClass3 = GridType.ScrollHorizontal;
|
||
|
|
}
|
||
|
|
else if (this.gridster.$options.gridType === GridType.VerticalFixed) {
|
||
|
|
this.gridster.curRowHeight =
|
||
|
|
this.gridster.$options.fixedRowHeight +
|
||
|
|
(this.gridster.$options.ignoreMarginInRow
|
||
|
|
? 0
|
||
|
|
: this.gridster.$options.margin);
|
||
|
|
addClass = GridType.ScrollVertical;
|
||
|
|
removeClass1 = GridType.Fit;
|
||
|
|
removeClass2 = GridType.ScrollHorizontal;
|
||
|
|
removeClass3 = GridType.Fixed;
|
||
|
|
}
|
||
|
|
else if (this.gridster.$options.gridType === GridType.HorizontalFixed) {
|
||
|
|
this.gridster.curColWidth =
|
||
|
|
this.gridster.$options.fixedColWidth +
|
||
|
|
(this.gridster.$options.ignoreMarginInRow
|
||
|
|
? 0
|
||
|
|
: this.gridster.$options.margin);
|
||
|
|
addClass = GridType.ScrollHorizontal;
|
||
|
|
removeClass1 = GridType.Fit;
|
||
|
|
removeClass2 = GridType.ScrollVertical;
|
||
|
|
removeClass3 = GridType.Fixed;
|
||
|
|
}
|
||
|
|
if (this.gridster.mobile ||
|
||
|
|
(this.gridster.$options.setGridSize &&
|
||
|
|
this.gridster.$options.gridType !== GridType.Fit)) {
|
||
|
|
this.gridster.renderer.removeClass(this.gridster.el, addClass);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.gridster.renderer.addClass(this.gridster.el, addClass);
|
||
|
|
}
|
||
|
|
this.gridster.renderer.removeClass(this.gridster.el, removeClass1);
|
||
|
|
this.gridster.renderer.removeClass(this.gridster.el, removeClass2);
|
||
|
|
this.gridster.renderer.removeClass(this.gridster.el, removeClass3);
|
||
|
|
}
|
||
|
|
getGridColumnStyle(i) {
|
||
|
|
// generates the new style
|
||
|
|
const newPos = {
|
||
|
|
left: this.gridster.curColWidth * i,
|
||
|
|
width: this.gridster.curColWidth - this.gridster.$options.margin,
|
||
|
|
height: this.gridster.gridRows.length * this.gridster.curRowHeight -
|
||
|
|
this.gridster.$options.margin,
|
||
|
|
style: {}
|
||
|
|
};
|
||
|
|
newPos.style = {
|
||
|
|
...this.getLeftPosition(newPos.left),
|
||
|
|
width: newPos.width + 'px',
|
||
|
|
height: newPos.height + 'px'
|
||
|
|
};
|
||
|
|
// use the last cached style if it has same values as the generated one
|
||
|
|
const last = this.lastGridColumnStyles[i];
|
||
|
|
if (last &&
|
||
|
|
last.left === newPos.left &&
|
||
|
|
last.width === newPos.width &&
|
||
|
|
last.height === newPos.height) {
|
||
|
|
return last.style;
|
||
|
|
}
|
||
|
|
// cache and set new style
|
||
|
|
this.lastGridColumnStyles[i] = newPos;
|
||
|
|
return newPos.style;
|
||
|
|
}
|
||
|
|
getGridRowStyle(i) {
|
||
|
|
// generates the new style
|
||
|
|
const newPos = {
|
||
|
|
top: this.gridster.curRowHeight * i,
|
||
|
|
width: this.gridster.gridColumns.length * this.gridster.curColWidth +
|
||
|
|
this.gridster.$options.margin,
|
||
|
|
height: this.gridster.curRowHeight - this.gridster.$options.margin,
|
||
|
|
style: {}
|
||
|
|
};
|
||
|
|
newPos.style = {
|
||
|
|
...this.getTopPosition(newPos.top),
|
||
|
|
width: newPos.width + 'px',
|
||
|
|
height: newPos.height + 'px'
|
||
|
|
};
|
||
|
|
// use the last cached style if it has same values as the generated one
|
||
|
|
const last = this.lastGridRowStyles[i];
|
||
|
|
if (last &&
|
||
|
|
last.top === newPos.top &&
|
||
|
|
last.width === newPos.width &&
|
||
|
|
last.height === newPos.height) {
|
||
|
|
return last.style;
|
||
|
|
}
|
||
|
|
// cache and set new style
|
||
|
|
this.lastGridRowStyles[i] = newPos;
|
||
|
|
return newPos.style;
|
||
|
|
}
|
||
|
|
getLeftPosition(d) {
|
||
|
|
const dPosition = this.gridster.$options.dirType === DirTypes.RTL ? -d : d;
|
||
|
|
if (this.gridster.$options.useTransformPositioning) {
|
||
|
|
return {
|
||
|
|
transform: 'translateX(' + dPosition + 'px)'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return {
|
||
|
|
left: this.getLeftMargin() + dPosition + 'px'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getTopPosition(d) {
|
||
|
|
if (this.gridster.$options.useTransformPositioning) {
|
||
|
|
return {
|
||
|
|
transform: 'translateY(' + d + 'px)'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return {
|
||
|
|
top: this.getTopMargin() + d + 'px'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
clearCellPosition(renderer, el) {
|
||
|
|
if (this.gridster.$options.useTransformPositioning) {
|
||
|
|
renderer.setStyle(el, 'transform', '');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
renderer.setStyle(el, 'top', '');
|
||
|
|
renderer.setStyle(el, 'left', '');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setCellPosition(renderer, el, x, y) {
|
||
|
|
const xPosition = this.gridster.$options.dirType === DirTypes.RTL ? -x : x;
|
||
|
|
if (this.gridster.$options.useTransformPositioning) {
|
||
|
|
const transform = 'translate3d(' + xPosition + 'px, ' + y + 'px, 0)';
|
||
|
|
renderer.setStyle(el, 'transform', transform);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
renderer.setStyle(el, 'left', this.getLeftMargin() + xPosition + 'px');
|
||
|
|
renderer.setStyle(el, 'top', this.getTopMargin() + y + 'px');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getLeftMargin() {
|
||
|
|
if (this.gridster.$options.outerMargin) {
|
||
|
|
if (this.gridster.$options.outerMarginLeft !== null) {
|
||
|
|
return this.gridster.$options.outerMarginLeft;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return this.gridster.$options.margin;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getTopMargin() {
|
||
|
|
if (this.gridster.$options.outerMargin) {
|
||
|
|
if (this.gridster.$options.outerMarginTop !== null) {
|
||
|
|
return this.gridster.$options.outerMarginTop;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return this.gridster.$options.margin;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZHN0ZXJSZW5kZXJlci5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1ncmlkc3RlcjIvc3JjL2xpYi9ncmlkc3RlclJlbmRlcmVyLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0EsT0FBTyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQVFoRSxNQUFNLE9BQU8sZ0JBQWdCO0lBYTNCLFlBQW9CLFFBQW9DO1FBQXBDLGFBQVEsR0FBUixRQUFRLENBQTRCO1FBWnhEOzs7V0FHRztRQUNLLHlCQUFvQixHQUEwQyxFQUFFLENBQUM7UUFFekU7OztXQUdHO1FBQ0ssc0JBQWlCLEdBQXVDLEVBQUUsQ0FBQztJQUVSLENBQUM7SUFFNUQsT0FBTztRQUNMLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxVQUFVLENBQUMsRUFBVyxFQUFFLElBQWtCLEVBQUUsUUFBbUI7UUFDN0QsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sRUFBRTtZQUN4QixJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQ3JDLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsdUJBQXVCLEVBQUU7Z0JBQ2xELFFBQVEsQ0FBQyxRQUFRLENBQ2YsRUFBRSxFQUNGLFFBQVEsRUFDUixDQUFDLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsTUFBTTtvQkFDN0MsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxjQUFjO29CQUNqRCxJQUFJLENBQ1AsQ0FBQzthQUNIO2lCQUFNO2dCQUNMLFFBQVEsQ0FBQyxRQUFRLENBQ2YsRUFBRSxFQUNGLFFBQVEsRUFDUixDQUFDLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FDeEQsQ0FBQzthQUNIO1lBQ0QsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxzQkFBc0IsRUFBRTtnQkFDakQsUUFBUSxDQUFDLFFBQVEsQ0FDZixFQUFFLEVBQ0YsT0FBTyxFQUNQLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQzVDLENBQUM7YUFDSDtpQkFBTTtnQkFDTCxRQUFRLENBQUMsUUFBUSxDQUFDLEVBQUUsRUFBRSxPQUFPLEVBQUUsRUFBRSxDQUFDLENBQUM7YUFDcEM7WUFFRCxRQUFRLENBQUMsUUFBUSxDQUNmLEVBQUUsRUFDRixlQUFlLEVBQ2YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLElBQUksQ0FDckMsQ0FBQztZQUNGLFFBQVEsQ0FBQyxRQUFRLENBQUMsRUFBRSxFQUFFLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsYUFBYSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1NBQzFFO2FBQU07WUFDTCxNQUFNLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUN6RCxNQUFNLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUMxRCxNQUFNLEtBQUssR0FDVCxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQztZQUN4RSxNQUFNLE1BQU0sR0FDVixJQUFJLENBQUMsUUFBUSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQztZQUN6RSxxQkFBcUI7WUFDckIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztZQUN6QyxRQUFRLENBQUMsUUFBUSxDQUFDLEVBQUUsRUFBRSxPQUFPLEVBQUUsS0FBSyxHQUFHLElBQUksQ0FBQyxDQUFDO1lBQzdDLFFBQVEsQ0FBQyxRQUFRLENBQUMsRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLEdBQUcsSUFBSSxDQUFDLENBQUM7WUFDL0MsSUFBSSxZQUFZLEdBQWtCLElBQUksQ0FBQztZQUN2QyxJQUFJLFdBQVcsR0FBa0IsSUFBSSxDQUFDO1lBQ3RDLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFO2dCQUN0QyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLENBQUMsRUFBRTtvQkFDN0MsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsS0FBSyxJQUFJLEVBQUU7d0JBQ3JELFlBQVksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUM7cUJBQ2hFO3lCQUFNO3dCQUNMLFlBQVksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO3FCQUNyRDtpQkFDRjtnQkFDRCxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLENBQUMsRUFBRTtvQkFDaEQsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxpQkFBaUIsS0FBSyxJQUFJLEVBQUU7d0JBQ3JELFdBQVcsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUM7cUJBQzlEO3lCQUFNO3dCQUNMLFdBQVcsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO3FCQUNwRDtpQkFDRjthQUNGO1lBRUQsUUFBUSxDQUFDLFFBQVEsQ0FBQyxFQUFFLEVBQUUsZUFBZSxFQUFFLFlBQVksQ0FBQyxDQUFDO1lBQ3JELFFBQVEsQ0FBQyxRQUFRLENBQ2YsRUFBRSxFQUNGLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsYUFBYSxFQUM3QyxXQUFXLENBQ1osQ0FBQztTQUNIO0lBQ0gsQ0FBQztJQUVELGNBQWM7UUFDWixJQUFJL
|