angular-gridster2 - npm Package Compare versions

Comparing version 4.7.2 to 5.0.0

dist/gridster.component.d.ts

@@ -1,4 +0,3 @@
-import { ChangeDetectorRef, ElementRef, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges } from '@angular/core';
 import { GridsterConfig } from './gridsterConfig.interface';
-import { GridsterGridComponent } from './gridsterGrid.component';
 import { GridsterEmptyCell } from './gridsterEmptyCell.service';
@@ -10,5 +9,7 @@ import { GridsterCompact } from './gridsterCompact.service';
 import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
+import { GridsterRenderer } from './gridsterRenderer.service';
 export declare class GridsterComponent implements OnInit, OnChanges, OnDestroy, GridsterComponentInterface {
     renderer: Renderer2;
     cdRef: ChangeDetectorRef;
+    zone: NgZone;
     options: GridsterConfig;
@@ -28,8 +29,10 @@ calculateLayoutDebounce: () => void;
     curRowHeight: number;
+    gridColumns: never[];
+    gridRows: never[];
     windowResize: (() => void) | null;
-    gridLines: GridsterGridComponent;
     dragInProgress: boolean;
     emptyCell: GridsterEmptyCell;
     compact: GridsterCompact;
-    constructor(el: ElementRef, renderer: Renderer2, cdRef: ChangeDetectorRef);
+    gridRenderer: GridsterRenderer;
+    constructor(el: ElementRef, renderer: Renderer2, cdRef: ChangeDetectorRef, zone: NgZone);
     static checkCollisionTwoItems(item: GridsterItemS, item2: GridsterItemS): boolean;
@@ -47,2 +50,3 @@ ngOnInit(): void;
     calculateLayout(): void;
+    updateGrid(): void;
     addItem(itemComponent: GridsterItemComponentInterface): void;
@@ -56,4 +60,4 @@ removeItem(itemComponent: GridsterItemComponentInterface): void;
     getNextPossiblePosition(newItem: GridsterItemS, startingFrom?: {
-        rows?: number;
-        cols?: number;
+        y?: number;
+        x?: number;
     }): boolean;
@@ -60,0 +64,0 @@ getFirstPossiblePosition(item: GridsterItemS): GridsterItemS;

dist/gridster.component.js

@@ -8,9 +8,13 @@ "use strict";
 var gridsterCompact_service_1 = require("./gridsterCompact.service");
+var gridsterRenderer_service_1 = require("./gridsterRenderer.service");
 var GridsterComponent = /** @class */ (function () {
-    function GridsterComponent(el, renderer, cdRef) {
+    function GridsterComponent(el, renderer, cdRef, zone) {
         this.renderer = renderer;
         this.cdRef = cdRef;
+        this.zone = zone;
+        this.gridColumns = [];
+        this.gridRows = [];
         this.el = el.nativeElement;
         this.$options = JSON.parse(JSON.stringify(gridsterConfig_constant_1.GridsterConfigService));
-        this.calculateLayoutDebounce = gridsterUtils_service_1.GridsterUtils.debounce(this.calculateLayout.bind(this), 5);
+        this.calculateLayoutDebounce = gridsterUtils_service_1.GridsterUtils.debounce(this.calculateLayout.bind(this), 0);
         this.mobile = false;
@@ -25,2 +29,3 @@ this.curWidth = 0;
         this.compact = new gridsterCompact_service_1.GridsterCompact(this);
+        this.gridRenderer = new gridsterRenderer_service_1.GridsterRenderer(this);
     }
@@ -51,3 +56,3 @@ GridsterComponent.checkCollisionTwoItems = function (item, item2) {
             this.setGridSize();
-            this.calculateLayoutDebounce();
+            this.calculateLayout();
         }
@@ -110,3 +115,3 @@ };
         this.setGridSize();
-        this.calculateLayoutDebounce();
+        this.calculateLayout();
     };
@@ -163,3 +168,2 @@ GridsterComponent.prototype.checkIfToResize = function () {
     GridsterComponent.prototype.calculateLayout = function () {
-        // check to compact
         if (this.compact) {
@@ -173,11 +177,15 @@ this.compact.checkCompact();
                 marginWidth += this.$options.outerMarginLeft;
+                this.renderer.setStyle(this.el, 'padding-left', this.$options.outerMarginLeft + 'px');
             }
             else {
                 marginWidth += this.$options.margin;
+                this.renderer.setStyle(this.el, 'padding-left', this.$options.margin + 'px');
             }
             if (this.$options.outerMarginRight !== null) {
                 marginWidth += this.$options.outerMarginRight;
+                this.renderer.setStyle(this.el, 'padding-right', this.$options.outerMarginRight + 'px');
             }
             else {
                 marginWidth += this.$options.margin;
+                this.renderer.setStyle(this.el, 'padding-right', this.$options.margin + 'px');
             }
@@ -188,11 +196,15 @@ this.curColWidth = (this.curWidth - marginWidth) / this.columns;
                 marginHeight += this.$options.outerMarginTop;
+                this.renderer.setStyle(this.el, 'padding-top', this.$options.outerMarginTop + 'px');
             }
             else {
                 marginHeight += this.$options.margin;
+                this.renderer.setStyle(this.el, 'padding-top', this.$options.margin + 'px');
             }
             if (this.$options.outerMarginBottom !== null) {
                 marginHeight += this.$options.outerMarginBottom;
+                this.renderer.setStyle(this.el, 'padding-bottom', this.$options.outerMarginBottom + 'px');
             }
             else {
                 marginHeight += this.$options.margin;
+                this.renderer.setStyle(this.el, 'padding-bottom', this.$options.margin + 'px');
             }
@@ -204,60 +216,13 @@ this.curRowHeight = (this.curHeight - marginHeight) / this.rows;
             this.curRowHeight = (this.curHeight + this.$options.margin) / this.rows;
+            this.renderer.setStyle(this.el, 'padding-left', 0 + 'px');
+            this.renderer.setStyle(this.el, 'padding-right', 0 + 'px');
+            this.renderer.setStyle(this.el, 'padding-top', 0 + 'px');
+            this.renderer.setStyle(this.el, 'padding-bottom', 0 + 'px');
         }
-        var addClass = '';
-        var removeClass1 = '';
-        var removeClass2 = '';
-        var removeClass3 = '';
-        if (this.$options.gridType === 'fit') {
-            addClass = 'fit';
-            removeClass1 = 'scrollVertical';
-            removeClass2 = 'scrollHorizontal';
-            removeClass3 = 'fixed';
-        }
-        else if (this.$options.gridType === 'scrollVertical') {
-            this.curRowHeight = this.curColWidth;
-            addClass = 'scrollVertical';
-            removeClass1 = 'fit';
-            removeClass2 = 'scrollHorizontal';
-            removeClass3 = 'fixed';
-        }
-        else if (this.$options.gridType === 'scrollHorizontal') {
-            this.curColWidth = this.curRowHeight;
-            addClass = 'scrollHorizontal';
-            removeClass1 = 'fit';
-            removeClass2 = 'scrollVertical';
-            removeClass3 = 'fixed';
-        }
-        else if (this.$options.gridType === 'fixed') {
-            this.curColWidth = this.$options.fixedColWidth + (this.$options.ignoreMarginInRow ? 0 : this.$options.margin);
-            this.curRowHeight = this.$options.fixedRowHeight + (this.$options.ignoreMarginInRow ? 0 : this.$options.margin);
-            addClass = 'fixed';
-            removeClass1 = 'fit';
-            removeClass2 = 'scrollVertical';
-            removeClass3 = 'scrollHorizontal';
-        }
-        else if (this.$options.gridType === 'verticalFixed') {
-            this.curRowHeight = this.$options.fixedRowHeight + (this.$options.ignoreMarginInRow ? 0 : this.$options.margin);
-            addClass = 'scrollVertical';
-            removeClass1 = 'fit';
-            removeClass2 = 'scrollHorizontal';
-            removeClass3 = 'fixed';
-        }
-        else if (this.$options.gridType === 'horizontalFixed') {
-            this.curColWidth = this.$options.fixedColWidth + (this.$options.ignoreMarginInRow ? 0 : this.$options.margin);
-            addClass = 'scrollHorizontal';
-            removeClass1 = 'fit';
-            removeClass2 = 'scrollVertical';
-            removeClass3 = 'fixed';
-        }
-        this.renderer.addClass(this.el, addClass);
-        this.renderer.removeClass(this.el, removeClass1);
-        this.renderer.removeClass(this.el, removeClass2);
-        this.renderer.removeClass(this.el, removeClass3);
-        if (this.gridLines) {
-            this.gridLines.updateGrid();
-        }
+        this.gridRenderer.updateGridster();
+        this.updateGrid();
         var widgetsIndex = this.grid.length - 1, widget;
         for (; widgetsIndex >= 0; widgetsIndex--) {
             widget = this.grid[widgetsIndex];
-            widget.setSize(false);
+            widget.setSize();
             widget.drag.toggle();
@@ -268,2 +233,17 @@ widget.resize.toggle();
     };
+    GridsterComponent.prototype.updateGrid = function () {
+        if (this.$options.displayGrid === 'always' && !this.mobile) {
+            this.renderer.addClass(this.el, 'display-grid');
+        }
+        else if (this.$options.displayGrid === 'onDrag&Resize' && this.dragInProgress) {
+            this.renderer.addClass(this.el, 'display-grid');
+        }
+        else if (this.$options.displayGrid === 'none' || !this.dragInProgress || this.mobile) {
+            this.renderer.removeClass(this.el, 'display-grid');
+        }
+        this.setGridDimensions();
+        this.gridColumns.length = Math.max(this.columns, Math.floor(this.curWidth / this.curColWidth)) || 0;
+        this.gridRows.length = Math.max(this.rows, Math.floor(this.curHeight / this.curRowHeight)) || 0;
+        this.cdRef.markForCheck();
+    };
     GridsterComponent.prototype.addItem = function (itemComponent) {
@@ -364,6 +344,6 @@ if (itemComponent.$item.cols === undefined) {
         this.setGridDimensions();
-        var rowsIndex = startingFrom.rows || 0, colsIndex;
+        var rowsIndex = startingFrom.y || 0, colsIndex;
         for (; rowsIndex < this.rows; rowsIndex++) {
             newItem.y = rowsIndex;
-            colsIndex = startingFrom.cols || 0;
+            colsIndex = startingFrom.x || 0;
             for (; colsIndex < this.columns; colsIndex++) {
@@ -397,13 +377,14 @@ newItem.x = colsIndex;
     GridsterComponent.prototype.getLastPossiblePosition = function (item) {
-        var farthestItem;
+        var farthestItem = { y: 0, x: 0 };
         farthestItem = this.grid.reduce(function (prev, curr) {
             var currCoords = { y: curr.$item.y + curr.$item.rows - 1, x: curr.$item.x + curr.$item.cols - 1 };
-            var cmpResult = gridsterUtils_service_1.GridsterUtils.compareItems({ y: prev.rows, x: prev.cols }, { y: currCoords.y, x: currCoords.x });
-            return cmpResult === 1 ? { rows: currCoords.y, cols: currCoords.x, item: curr } : prev;
-        }, { rows: 0, cols: 0, item: null });
+            if (gridsterUtils_service_1.GridsterUtils.compareItems(prev, currCoords) === 1) {
+                return currCoords;
+            }
+            else {
+                return prev;
+            }
+        }, farthestItem);
         var tmpItem = Object.assign({}, item);
-        this.getNextPossiblePosition(tmpItem, {
-            rows: farthestItem.rows - farthestItem.item.$item.rows + 1,
-            cols: farthestItem.cols
-        });
+        this.getNextPossiblePosition(tmpItem, farthestItem);
         return tmpItem;
@@ -426,4 +407,4 @@ };
                     selector: 'gridster',
-                    template: "<gridster-grid class=\"gridster-grid\"></gridster-grid> <ng-content></ng-content> <gridster-preview class=\"gridster-preview\"></gridster-preview>",
-                    styles: ["gridster {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%;   user-select: none; }  gridster.fit {   overflow-x: hidden;   overflow-y: hidden; }  gridster.scrollVertical {   overflow-x: hidden;   overflow-y: auto; }  gridster.scrollHorizontal {   overflow-x: auto;   overflow-y: hidden; }  gridster.fixed {   overflow: auto; }  gridster.mobile {   overflow-x: hidden;   overflow-y: auto;   display: block; }  gridster.mobile gridster-item {   position: relative; }"],
+                    template: "<div class=\"gridster-column\" *ngFor=\"let column of gridColumns; let i = index;\"      [ngStyle]=\"gridRenderer.getGridColumnStyle(i)\"></div> <div class=\"gridster-row\" *ngFor=\"let row of gridRows; let i = index;\"      [ngStyle]=\"gridRenderer.getGridRowStyle(i)\"></div> <ng-content></ng-content> <gridster-preview class=\"gridster-preview\"></gridster-preview>",
+                    styles: ["gridster {   position: relative;   box-sizing: border-box;   background: grey;   width: 100%;   height: 100%;   user-select: none;   display: block; }  gridster.fit {   overflow-x: hidden;   overflow-y: hidden; }  gridster.scrollVertical {   overflow-x: hidden;   overflow-y: auto; }  gridster.scrollHorizontal {   overflow-x: auto;   overflow-y: hidden; }  gridster.fixed {   overflow: auto; }  gridster.mobile {   overflow-x: hidden;   overflow-y: auto; }  gridster.mobile gridster-item {   position: relative;   height: 25%; }  gridster .gridster-column, gridster .gridster-row {   position: absolute;   display: none;   transition: .3s;   box-sizing: border-box; }  gridster.display-grid .gridster-column, gridster.display-grid .gridster-row {   display: block; }  gridster .gridster-column {   border-left: 1px solid white;   border-right: 1px solid white; }  gridster .gridster-row {   border-top: 1px solid white;   border-bottom: 1px solid white; }"],
                     encapsulation: core_1.ViewEncapsulation.None
@@ -437,2 +418,3 @@ },] },
         { type: core_1.ChangeDetectorRef, },
+        { type: core_1.NgZone, },
     ]; };
@@ -439,0 +421,0 @@ GridsterComponent.propDecorators = {

dist/gridster.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"gridster","template":"<gridster-grid class=\"gridster-grid\"></gridster-grid> <ng-content></ng-content> <gridster-preview class=\"gridster-preview\"></gridster-preview>","styles":["gridster {   position: relative;   display: flex;   overflow: auto;   flex: 1 auto;   background: grey;   width: 100%;   height: 100%;   user-select: none; }  gridster.fit {   overflow-x: hidden;   overflow-y: hidden; }  gridster.scrollVertical {   overflow-x: hidden;   overflow-y: auto; }  gridster.scrollHorizontal {   overflow-x: auto;   overflow-y: hidden; }  gridster.fixed {   overflow: auto; }  gridster.mobile {   overflow-x: hidden;   overflow-y: auto;   display: block; }  gridster.mobile gridster-item {   position: relative; }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":28,"character":17},"member":"None"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":51,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":51,"character":47},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":51,"character":72}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"setOptions":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"checkIfToResize":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"checkGridCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"findItemsWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"getNextPossiblePosition":[{"__symbolic":"method"}],"getFirstPossiblePosition":[{"__symbolic":"method"}],"getLastPossiblePosition":[{"__symbolic":"method"}],"pixelsToPositionX":[{"__symbolic":"method"}],"pixelsToPositionY":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}]},"statics":{"checkCollisionTwoItems":{"__symbolic":"function","parameters":["item","item2"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"<","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"x"},"right":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"x"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"cols"}}},"right":{"__symbolic":"binop","operator":">","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"x"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"cols"}},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"x"}}},"right":{"__symbolic":"binop","operator":"<","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"y"},"right":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"y"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"rows"}}}},"right":{"__symbolic":"binop","operator":">","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"y"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"rows"}},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"y"}}}}}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"gridster","template":"<div class=\"gridster-column\" *ngFor=\"let column of gridColumns; let i = index;\"      [ngStyle]=\"gridRenderer.getGridColumnStyle(i)\"></div> <div class=\"gridster-row\" *ngFor=\"let row of gridRows; let i = index;\"      [ngStyle]=\"gridRenderer.getGridRowStyle(i)\"></div> <ng-content></ng-content> <gridster-preview class=\"gridster-preview\"></gridster-preview>","styles":["gridster {   position: relative;   box-sizing: border-box;   background: grey;   width: 100%;   height: 100%;   user-select: none;   display: block; }  gridster.fit {   overflow-x: hidden;   overflow-y: hidden; }  gridster.scrollVertical {   overflow-x: hidden;   overflow-y: auto; }  gridster.scrollHorizontal {   overflow-x: auto;   overflow-y: hidden; }  gridster.fixed {   overflow: auto; }  gridster.mobile {   overflow-x: hidden;   overflow-y: auto; }  gridster.mobile gridster-item {   position: relative;   height: 25%; }  gridster .gridster-column, gridster .gridster-row {   position: absolute;   display: none;   transition: .3s;   box-sizing: border-box; }  gridster.display-grid .gridster-column, gridster.display-grid .gridster-row {   display: block; }  gridster .gridster-column {   border-left: 1px solid white;   border-right: 1px solid white; }  gridster .gridster-row {   border-top: 1px solid white;   border-bottom: 1px solid white; }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":29,"character":17},"member":"None"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":54,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":54,"character":47},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":54,"character":72},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":54,"character":104}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"setOptions":[{"__symbolic":"method"}],"optionsChanged":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"checkIfToResize":[{"__symbolic":"method"}],"setGridSize":[{"__symbolic":"method"}],"setGridDimensions":[{"__symbolic":"method"}],"calculateLayout":[{"__symbolic":"method"}],"updateGrid":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"checkCollision":[{"__symbolic":"method"}],"checkGridCollision":[{"__symbolic":"method"}],"findItemWithItem":[{"__symbolic":"method"}],"findItemsWithItem":[{"__symbolic":"method"}],"autoPositionItem":[{"__symbolic":"method"}],"getNextPossiblePosition":[{"__symbolic":"method"}],"getFirstPossiblePosition":[{"__symbolic":"method"}],"getLastPossiblePosition":[{"__symbolic":"method"}],"pixelsToPositionX":[{"__symbolic":"method"}],"pixelsToPositionY":[{"__symbolic":"method"}],"positionXToPixels":[{"__symbolic":"method"}],"positionYToPixels":[{"__symbolic":"method"}]},"statics":{"checkCollisionTwoItems":{"__symbolic":"function","parameters":["item","item2"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"<","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"x"},"right":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"x"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"cols"}}},"right":{"__symbolic":"binop","operator":">","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"x"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"cols"}},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"x"}}},"right":{"__symbolic":"binop","operator":"<","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"y"},"right":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"y"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"rows"}}}},"right":{"__symbolic":"binop","operator":">","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"y"},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item"},"member":"rows"}},"right":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"item2"},"member":"y"}}}}}}}}]

dist/gridster.interface.d.ts

 import { GridsterConfigS } from './gridsterConfigS.interface';
-import { ChangeDetectorRef, Renderer2 } from '@angular/core';
+import { ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
 import { GridsterEmptyCell } from './gridsterEmptyCell.service';
 import { GridsterCompact } from './gridsterCompact.service';
-import { GridsterGridComponent } from './gridsterGrid.component';
 import { GridsterConfig } from './gridsterConfig.interface';
 import { GridsterItemS } from './gridsterItemS.interface';
 import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
+import { GridsterRenderer } from './gridsterRenderer.service';
 export declare abstract class GridsterComponentInterface {
@@ -22,6 +22,10 @@ $options: GridsterConfigS;
     renderer: Renderer2;
+    gridRenderer: GridsterRenderer;
     cdRef: ChangeDetectorRef;
     options: GridsterConfig;
     calculateLayoutDebounce: () => void;
+    updateGrid: () => void;
     movingItem: GridsterItemS | null;
+    addItem: (item: GridsterItemComponentInterface) => void;
+    removeItem: (item: GridsterItemComponentInterface) => void;
     previewStyle: (drag?: boolean) => void;
@@ -36,6 +40,9 @@ mobile: boolean;
     windowResize: (() => void) | null;
-    gridLines: GridsterGridComponent;
+    setGridDimensions: (() => void);
     dragInProgress: boolean;
     emptyCell: GridsterEmptyCell;
     compact: GridsterCompact;
+    zone: NgZone;
+    gridRows: Array<number>;
+    gridColumns: Array<number>;
 }

dist/gridster.module.js

@@ -8,3 +8,2 @@ "use strict";
 var gridsterPreview_component_1 = require("./gridsterPreview.component");
-var gridsterGrid_component_1 = require("./gridsterGrid.component");
 var GridsterModule = /** @class */ (function () {
@@ -18,3 +17,2 @@ function GridsterModule() {
                         gridsterItem_component_1.GridsterItemComponent,
-                        gridsterGrid_component_1.GridsterGridComponent,
                         gridsterPreview_component_1.GridsterPreviewComponent
@@ -21,0 +19,0 @@ ],

dist/gridster.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":10,"character":4},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent","line":11,"character":4},{"__symbolic":"reference","module":"./gridsterGrid.component","name":"GridsterGridComponent","line":12,"character":4},{"__symbolic":"reference","module":"./gridsterPreview.component","name":"GridsterPreviewComponent","line":13,"character":4}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4}],"exports":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":18,"character":12},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent","line":18,"character":31}],"providers":[],"bootstrap":[]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":9,"character":4},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent","line":10,"character":4},{"__symbolic":"reference","module":"./gridsterPreview.component","name":"GridsterPreviewComponent","line":11,"character":4}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":4}],"exports":[{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":16,"character":12},{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent","line":16,"character":31}],"providers":[],"bootstrap":[]}]}]}}}]

dist/gridsterConfig.constant.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var gridsterConfig_interface_1 = require("./gridsterConfig.interface");
 exports.GridsterConfigService = {
-    gridType: 'fit',
+    gridType: gridsterConfig_interface_1.GridType.Fit,
     // 'fit' will fit the items in the container without scroll;
@@ -19,3 +20,3 @@ // 'scrollVertical' will fit on width and height of the items will be the same as the width
     // keep the width from fixed gridType in mobile layout
-    compactType: 'none',
+    compactType: gridsterConfig_interface_1.CompactType.None,
     // compact items: 'none' | 'compactUp' | 'compactLeft' | 'compactUp&Left' | 'compactLeft&Up'
@@ -100,5 +101,5 @@ mobileBreakpoint: 640,
     // limit empty cell drag max rows
+    // Arguments: event, gridsterItem{x, y, rows: defaultItemRows, cols: defaultItemCols}
     ignoreMarginInRow: false,
     // ignore the gap between rows for items which span multiple rows (see #162, #224)
-    // Arguments: event, gridsterItem{x, y, rows: defaultItemRows, cols: defaultItemCols}
     draggable: {
@@ -151,3 +152,3 @@ delayStart: 0,
     // on resize of item will shrink adjacent items
-    displayGrid: 'onDrag&Resize',
+    displayGrid: gridsterConfig_interface_1.DisplayGrid.OnDragAndResize,
     // display background grid of rows and columns
@@ -154,0 +155,0 @@ disableWindowResize: false,

dist/gridsterConfig.constant.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":false,"keepFixedWidthInMobile":false,"compactType":"none","mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"minItemArea":1,"maxItemArea":2500,"margin":10,"outerMargin":true,"outerMarginTop":null,"outerMarginRight":null,"outerMarginBottom":null,"outerMarginLeft":null,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"destroyCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"itemRemovedCallback":{"__symbolic":"reference","name":"undefined"},"enableEmptyCellClick":false,"enableEmptyCellContextMenu":false,"enableEmptyCellDrop":false,"enableEmptyCellDrag":false,"emptyCellClickCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellContextMenuCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDropCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragMaxCols":50,"emptyCellDragMaxRows":50,"ignoreMarginInRow":false,"draggable":{"delayStart":0,"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"delayStart":0,"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false,"disablePushOnDrag":false,"disablePushOnResize":false,"pushDirections":{"north":true,"east":true,"south":true,"west":true},"pushResizeItems":false,"displayGrid":"onDrag&Resize","disableWindowResize":false,"disableWarnings":false,"scrollToNewItems":false}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterConfigService":{"gridType":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./gridsterConfig.interface","name":"GridType","line":3,"character":12},"member":"Fit"},"fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":false,"keepFixedWidthInMobile":false,"compactType":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./gridsterConfig.interface","name":"CompactType","line":13,"character":15},"member":"None"},"mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"minItemArea":1,"maxItemArea":2500,"margin":10,"outerMargin":true,"outerMarginTop":null,"outerMarginRight":null,"outerMarginBottom":null,"outerMarginLeft":null,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"destroyCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"itemRemovedCallback":{"__symbolic":"reference","name":"undefined"},"enableEmptyCellClick":false,"enableEmptyCellContextMenu":false,"enableEmptyCellDrop":false,"enableEmptyCellDrag":false,"emptyCellClickCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellContextMenuCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDropCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragMaxCols":50,"emptyCellDragMaxRows":50,"ignoreMarginInRow":false,"draggable":{"delayStart":0,"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"delayStart":0,"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false,"disablePushOnDrag":false,"disablePushOnResize":false,"pushDirections":{"north":true,"east":true,"south":true,"west":true},"pushResizeItems":false,"displayGrid":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./gridsterConfig.interface","name":"DisplayGrid","line":90,"character":15},"member":"OnDragAndResize"},"disableWindowResize":false,"disableWarnings":false,"scrollToNewItems":false}}}]

dist/gridsterDraggable.service.d.ts

@@ -0,1 +1,2 @@
+import { NgZone } from '@angular/core';
 import { GridsterSwap } from './gridsterSwap.service';
@@ -6,2 +7,3 @@ import { GridsterPush } from './gridsterPush.service';
 export declare class GridsterDraggable {
+    private zone;
     gridsterItem: GridsterItemComponentInterface;
@@ -44,3 +46,3 @@ gridster: GridsterComponentInterface;
     }>;
-    constructor(gridsterItem: GridsterItemComponentInterface, gridster: GridsterComponentInterface);
+    constructor(gridsterItem: GridsterItemComponentInterface, gridster: GridsterComponentInterface, zone: NgZone);
     destroy(): void;
@@ -47,0 +49,0 @@ dragStart(e: any): void;

dist/gridsterDraggable.service.js

@@ -11,3 +11,4 @@ "use strict";
 var GridsterDraggable = /** @class */ (function () {
-    function GridsterDraggable(gridsterItem, gridster) {
+    function GridsterDraggable(gridsterItem, gridster, zone) {
+        this.zone = zone;
         this.gridsterItem = gridsterItem;
@@ -34,2 +35,3 @@ this.gridster = gridster;
     GridsterDraggable.prototype.dragStart = function (e) {
+        var _this = this;
         switch (e.which) {
@@ -51,6 +53,8 @@ case 1:
         this.dragStopFunction = this.dragStop.bind(this);
-        this.mousemove = this.gridsterItem.renderer.listen('document', 'mousemove', this.dragFunction);
+        this.zone.runOutsideAngular(function () {
+            _this.mousemove = _this.gridsterItem.renderer.listen('document', 'mousemove', _this.dragFunction);
+            _this.touchmove = _this.gridster.renderer.listen(_this.gridster.el, 'touchmove', _this.dragFunction);
+        });
         this.mouseup = this.gridsterItem.renderer.listen('document', 'mouseup', this.dragStopFunction);
         this.cancelOnBlur = this.gridsterItem.renderer.listen('window', 'blur', this.dragStopFunction);
-        this.touchmove = this.gridster.renderer.listen(this.gridster.el, 'touchmove', this.dragFunction);
         this.touchend = this.gridsterItem.renderer.listen('document', 'touchend', this.dragStopFunction);
@@ -62,4 +66,4 @@ this.touchcancel = this.gridsterItem.renderer.listen('document', 'touchcancel', this.dragStopFunction);
         this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-        this.left = this.gridsterItem.left;
-        this.top = this.gridsterItem.top;
+        this.left = this.gridsterItem.left - this.margin;
+        this.top = this.gridsterItem.top - this.margin;
         this.width = this.gridsterItem.width;
@@ -74,3 +78,3 @@ this.height = this.gridsterItem.height;
         this.gridster.dragInProgress = true;
-        this.gridster.gridLines.updateGrid();
+        this.gridster.updateGrid();
         this.path.push({ x: this.gridsterItem.item.x || 0, y: this.gridsterItem.item.y || 0 });
@@ -84,12 +88,15 @@ };
         this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-        gridsterScroll_service_1.scroll(this.gridsterItem, e, this.lastMouse, this.calculateItemPositionFromMousePosition.bind(this));
+        gridsterScroll_service_1.scroll(this.gridster, this.left, this.top, this.width, this.height, e, this.lastMouse, this.calculateItemPositionFromMousePosition.bind(this));
         this.calculateItemPositionFromMousePosition(e);
-        this.lastMouse.clientX = e.clientX;
-        this.lastMouse.clientY = e.clientY;
-        this.gridster.gridLines.updateGrid();
     };
     GridsterDraggable.prototype.calculateItemPositionFromMousePosition = function (e) {
-        this.left = e.clientX + this.offsetLeft - this.margin - this.diffLeft;
-        this.top = e.clientY + this.offsetTop - this.margin - this.diffTop;
+        var _this = this;
+        this.left = e.clientX + this.offsetLeft - this.diffLeft;
+        this.top = e.clientY + this.offsetTop - this.diffTop;
         this.calculateItemPosition();
+        this.lastMouse.clientX = e.clientX;
+        this.lastMouse.clientY = e.clientY;
+        this.zone.run(function () {
+            _this.gridster.updateGrid();
+        });
     };
@@ -109,3 +116,3 @@ GridsterDraggable.prototype.dragStop = function (e) {
         this.gridster.dragInProgress = false;
-        this.gridster.gridLines.updateGrid();
+        this.gridster.updateGrid();
         this.path = [];
@@ -129,3 +136,3 @@ if (this.gridster.options.draggable && this.gridster.options.draggable.stop) {
         this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
-        this.gridsterItem.setSize(true);
+        this.gridsterItem.setSize();
         this.push.restoreItems();
@@ -139,4 +146,4 @@ this.swap.restoreSwapItem();
     GridsterDraggable.prototype.makeDrag = function () {
+        this.gridsterItem.setSize();
         this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.gridsterItem.item);
-        this.gridsterItem.setSize(true);
         this.push.setPushedItems();
@@ -158,5 +165,2 @@ this.swap.setSwapItem();
         }
-        else {
-            this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'left', this.left + 'px');
-        }
         this.gridsterItem.$item.y = this.positionY;
@@ -166,5 +170,4 @@ if (this.gridster.checkGridCollision(this.gridsterItem.$item)) {
         }
-        else {
-            this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'top', this.top + 'px');
-        }
+        var transform = 'translate(' + this.left + 'px, ' + this.top + 'px)';
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'transform', transform);
         if (this.positionXBackup !== this.gridsterItem.$item.x || this.positionYBackup !== this.gridsterItem.$item.y) {
@@ -256,2 +259,3 @@ var lastPosition = this.path[this.path.length - 1];
         { type: gridster_interface_1.GridsterComponentInterface, },
+        { type: core_1.NgZone, },
     ]; };
@@ -258,0 +262,0 @@ return GridsterDraggable;

dist/gridsterDraggable.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterDraggable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItemComponent.interface","name":"GridsterItemComponentInterface","line":46,"character":28},{"__symbolic":"reference","module":"./gridster.interface","name":"GridsterComponentInterface","line":46,"character":70}]}],"destroy":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"calculateItemPositionFromMousePosition":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelDrag":[{"__symbolic":"method"}],"makeDrag":[{"__symbolic":"method"}],"calculateItemPosition":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"dragStartDelay":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterDraggable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItemComponent.interface","name":"GridsterItemComponentInterface","line":46,"character":28},{"__symbolic":"reference","module":"./gridster.interface","name":"GridsterComponentInterface","line":46,"character":70},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":46,"character":112}]}],"destroy":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"calculateItemPositionFromMousePosition":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelDrag":[{"__symbolic":"method"}],"makeDrag":[{"__symbolic":"method"}],"calculateItemPosition":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"dragStartDelay":[{"__symbolic":"method"}]}}}}]

dist/gridsterEmptyCell.service.js

@@ -19,2 +19,3 @@ "use strict";
     GridsterEmptyCell.prototype.updateOptions = function () {
+        var _this = this;
         if (this.gridster.$options.enableEmptyCellClick && !this.emptyCellClick && this.gridster.options.emptyCellClickCallback) {
@@ -40,3 +41,5 @@ this.emptyCellClick = this.gridster.renderer.listen(this.gridster.el, 'click', this.emptyCellClickCb.bind(this));
             this.emptyCellDrop = this.gridster.renderer.listen(this.gridster.el, 'drop', this.emptyCellDragDrop.bind(this));
-            this.emptyCellMove = this.gridster.renderer.listen(this.gridster.el, 'dragover', this.emptyCellDragOver.bind(this));
+            this.gridster.zone.runOutsideAngular(function () {
+                _this.emptyCellMove = _this.gridster.renderer.listen(_this.gridster.el, 'dragover', _this.emptyCellDragOver.bind(_this));
+            });
         }
@@ -101,10 +104,15 @@ else if (!this.gridster.$options.enableEmptyCellDrop && this.emptyCellDrop && this.emptyCellMove) {
         e.stopPropagation();
-        if (this.getValidItemFromEvent(e)) {
+        var item = this.getValidItemFromEvent(e);
+        if (item) {
             e.dataTransfer.dropEffect = 'move';
+            this.gridster.movingItem = item;
         }
         else {
             e.dataTransfer.dropEffect = 'none';
+            this.gridster.movingItem = null;
         }
+        this.gridster.previewStyle();
     };
     GridsterEmptyCell.prototype.emptyCellMouseDown = function (e) {
+        var _this = this;
         if (gridsterUtils_service_1.GridsterUtils.checkContentClassForEmptyCellClickEvent(this.gridster, e)) {
@@ -122,4 +130,6 @@ return;
         this.gridster.previewStyle();
-        this.emptyCellMMove = this.gridster.renderer.listen('window', 'mousemove', this.emptyCellMouseMove.bind(this));
-        this.emptyCellMMoveTouch = this.gridster.renderer.listen('window', 'touchmove', this.emptyCellMouseMove.bind(this));
+        this.gridster.zone.runOutsideAngular(function () {
+            _this.emptyCellMMove = _this.gridster.renderer.listen('window', 'mousemove', _this.emptyCellMouseMove.bind(_this));
+            _this.emptyCellMMoveTouch = _this.gridster.renderer.listen('window', 'touchmove', _this.emptyCellMouseMove.bind(_this));
+        });
         this.emptyCellUp = this.gridster.renderer.listen('window', 'mouseup', this.emptyCellMouseUp.bind(this));
@@ -126,0 +136,0 @@ this.emptyCellUpTouch = this.gridster.renderer.listen('window', 'touchend', this.emptyCellMouseUp.bind(this));

dist/gridsterItem.component.d.ts

@@ -1,4 +0,3 @@
-import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { ElementRef, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { GridsterItem } from './gridsterItem.interface';
-import { GridsterComponent } from './gridster.component';
 import { GridsterDraggable } from './gridsterDraggable.service';
@@ -8,4 +7,6 @@ import { GridsterResizable } from './gridsterResizable.service';
 import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
+import { GridsterComponent } from './gridster.component';
 export declare class GridsterItemComponent implements OnInit, OnDestroy, GridsterItemComponentInterface {
     renderer: Renderer2;
+    private zone;
     item: GridsterItem;
@@ -15,6 +16,2 @@ $item: GridsterItemS;
     gridster: GridsterComponent;
-    itemTop: number;
-    itemLeft: number;
-    itemWidth: number;
-    itemHeight: number;
     top: number;
@@ -24,3 +21,2 @@ left: number;
     height: number;
-    itemMargin: string;
     drag: GridsterDraggable;
@@ -30,7 +26,8 @@ resize: GridsterResizable;
     init: boolean;
-    constructor(el: ElementRef, gridster: GridsterComponent, renderer: Renderer2);
+    constructor(el: ElementRef, gridster: GridsterComponent, renderer: Renderer2, zone: NgZone);
     ngOnInit(): void;
     updateOptions(): void;
     ngOnDestroy(): void;
-    setSize(noCheck: Boolean): void;
+    setSize(): void;
+    updateItemSize(): void;
     itemChanged(): void;
@@ -37,0 +34,0 @@ checkItemChanges(newValue: GridsterItem, oldValue: GridsterItem): void;

dist/gridsterItem.component.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
-var gridster_component_1 = require("./gridster.component");
 var gridsterDraggable_service_1 = require("./gridsterDraggable.service");
 var gridsterResizable_service_1 = require("./gridsterResizable.service");
 var gridsterUtils_service_1 = require("./gridsterUtils.service");
+var gridster_component_1 = require("./gridster.component");
 var GridsterItemComponent = /** @class */ (function () {
-    function GridsterItemComponent(el, gridster, renderer) {
+    function GridsterItemComponent(el, gridster, renderer, zone) {
         this.renderer = renderer;
+        this.zone = zone;
         this.el = el.nativeElement;
@@ -19,4 +20,4 @@ this.$item = {
         this.gridster = gridster;
-        this.drag = new gridsterDraggable_service_1.GridsterDraggable(this, gridster);
-        this.resize = new gridsterResizable_service_1.GridsterResizable(this, gridster);
+        this.drag = new gridsterDraggable_service_1.GridsterDraggable(this, gridster, this.zone);
+        this.resize = new gridsterResizable_service_1.GridsterResizable(this, gridster, this.zone);
     }
@@ -52,65 +53,13 @@ GridsterItemComponent.prototype.ngOnInit = function () {
     };
-    GridsterItemComponent.prototype.setSize = function (noCheck) {
-        if (this.gridster.mobile) {
-            this.top = 0;
-            this.left = 0;
-            if (this.gridster.$options.keepFixedWidthInMobile) {
-                this.width = this.$item.cols * this.gridster.$options.fixedColWidth;
-            }
-            else {
-                this.width = this.gridster.curWidth - (this.gridster.$options.outerMargin ? 2 * this.gridster.$options.margin : 0);
-            }
-            if (this.gridster.$options.keepFixedHeightInMobile) {
-                this.height = this.$item.rows * this.gridster.$options.fixedRowHeight;
-            }
-            else {
-                this.height = this.width / 2;
-            }
-        }
-        else {
-            this.top = this.$item.y * this.gridster.curRowHeight;
-            this.left = this.$item.x * this.gridster.curColWidth;
-            this.width = this.$item.cols * this.gridster.curColWidth - this.gridster.$options.margin;
-            this.height = this.$item.rows * this.gridster.curRowHeight - this.gridster.$options.margin;
-        }
-        if (!noCheck && this.top === this.itemTop && this.left === this.itemLeft &&
-            this.width === this.itemWidth && this.height === this.itemHeight) {
-            return;
-        }
-        if (this.gridster.$options.outerMargin) {
-            if (this.gridster.$options.outerMarginTop !== null) {
-                this.itemMargin = this.gridster.$options.outerMarginTop + 'px ';
-            }
-            else {
-                this.itemMargin = this.gridster.$options.margin + 'px ';
-            }
-            if (this.gridster.$options.outerMarginRight !== null) {
-                this.itemMargin += this.gridster.$options.outerMarginRight + 'px ';
-            }
-            else {
-                this.itemMargin += this.gridster.$options.margin + 'px ';
-            }
-            if (this.gridster.$options.outerMarginBottom !== null) {
-                this.itemMargin += this.gridster.$options.outerMarginBottom + 'px ';
-            }
-            else {
-                this.itemMargin += this.gridster.$options.margin + 'px ';
-            }
-            if (this.gridster.$options.outerMarginLeft !== null) {
-                this.itemMargin += this.gridster.$options.outerMarginLeft + 'px';
-            }
-            else {
-                this.itemMargin += this.gridster.$options.margin + 'px';
-            }
-        }
-        else {
-            this.itemMargin = 0 + 'px';
-        }
-        this.renderer.setStyle(this.el, 'display', this.notPlaced ? 'none' : 'block');
-        this.renderer.setStyle(this.el, 'top', this.top + 'px');
-        this.renderer.setStyle(this.el, 'left', this.left + 'px');
-        this.renderer.setStyle(this.el, 'width', this.width + 'px');
-        this.renderer.setStyle(this.el, 'height', this.height + 'px');
-        this.renderer.setStyle(this.el, 'margin', this.itemMargin);
-        if (!this.init && this.width > 0 && this.height > 0) {
+    GridsterItemComponent.prototype.setSize = function () {
+        this.renderer.setStyle(this.el, 'display', this.notPlaced ? null : 'block');
+        this.gridster.gridRenderer.updateItem(this.el, this.$item, this.renderer);
+        this.updateItemSize();
+    };
+    GridsterItemComponent.prototype.updateItemSize = function () {
+        var top = this.$item.y * this.gridster.curRowHeight;
+        var left = this.$item.x * this.gridster.curColWidth;
+        var width = this.$item.cols * this.gridster.curColWidth - this.gridster.$options.margin;
+        var height = this.$item.rows * this.gridster.curRowHeight - this.gridster.$options.margin;
+        if (!this.init && width > 0 && height > 0) {
             this.init = true;
@@ -127,3 +76,5 @@ if (this.item.initCallback) {
         }
-        if (this.width !== this.itemWidth || this.height !== this.itemHeight) {
+        if (width !== this.width || height !== this.height) {
+            this.width = width;
+            this.height = height;
             if (this.gridster.options.itemResizeCallback) {
@@ -133,6 +84,4 @@ this.gridster.options.itemResizeCallback(this.item, this);
         }
-        this.itemTop = this.top;
-        this.itemLeft = this.left;
-        this.itemWidth = this.width;
-        this.itemHeight = this.height;
+        this.top = top;
+        this.left = left;
     };
@@ -153,2 +102,3 @@ GridsterItemComponent.prototype.itemChanged = function () {
             this.$item.rows = oldValue.rows || 1;
+            this.setSize();
         }
@@ -160,3 +110,3 @@ else {
             this.item.y = this.$item.y;
-            this.gridster.calculateLayout();
+            this.gridster.calculateLayoutDebounce();
             this.itemChanged();
@@ -186,2 +136,3 @@ }
         { type: core_1.Renderer2, },
+        { type: core_1.NgZone, },
     ]; };
@@ -188,0 +139,0 @@ GridsterItemComponent.propDecorators = {

dist/gridsterItem.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"gridster-item","template":"<ng-content></ng-content> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.s || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.e || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.n || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.w || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.se || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.ne || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.sw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.nw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>","styles":["gridster-item {   box-sizing: border-box;   z-index: 1;   position: absolute;   overflow: hidden;   transition: .3s;   display: none;   background: white;   user-select: text; }  gridster-item.gridster-item-moving {   cursor: move; }  gridster-item.gridster-item-resizing, gridster-item.gridster-item-moving {   transition: 0s;   z-index: 2;   box-shadow: 0 0 5px 5px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12); }  .gridster-item-resizable-handler {   position: absolute;   z-index: 2; }  .gridster-item-resizable-handler.handle-n {   cursor: n-resize;   height: 10px;   right: 0;   top: 0;   left: 0; }  .gridster-item-resizable-handler.handle-e {   cursor: e-resize;   width: 10px;   bottom: 0;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-s {   cursor: s-resize;   height: 10px;   right: 0;   bottom: 0;   left: 0; }  .gridster-item-resizable-handler.handle-w {   cursor: w-resize;   width: 10px;   left: 0;   top: 0;   bottom: 0; }  .gridster-item-resizable-handler.handle-ne {   cursor: ne-resize;   width: 10px;   height: 10px;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-nw {   cursor: nw-resize;   width: 10px;   height: 10px;   left: 0;   top: 0; }  .gridster-item-resizable-handler.handle-se {   cursor: se-resize;   width: 0;   height: 0;   right: 0;   bottom: 0;   border-style: solid;   border-width: 0 0 10px 10px;   border-color: transparent; }  .gridster-item-resizable-handler.handle-sw {   cursor: sw-resize;   width: 10px;   height: 10px;   left: 0;   bottom: 0; }  gridster-item:hover .gridster-item-resizable-handler.handle-se {   border-color: transparent transparent #ccc }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":14,"character":17},"member":"None"}}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":35,"character":31}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":35,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":35,"character":84}]}],"ngOnInit":[{"__symbolic":"method"}],"updateOptions":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSize":[{"__symbolic":"method"}],"itemChanged":[{"__symbolic":"method"}],"checkItemChanges":[{"__symbolic":"method"}],"canBeDragged":[{"__symbolic":"method"}],"canBeResized":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"gridster-item","template":"<ng-content></ng-content> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.s || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-s\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.e || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-e\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.n || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-n\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.w || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-w\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.se || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-se\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.ne || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-ne\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.sw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-sw\"></div> <div (mousedown)=\"resize.dragStartDelay($event)\" (touchstart)=\"resize.dragStartDelay($event)\"      [hidden]=\"!gridster.$options.resizable.handles.nw || !resize.resizeEnabled\"      class=\"gridster-item-resizable-handler handle-nw\"></div>","styles":["gridster-item {   box-sizing: border-box;   z-index: 1;   position: absolute;   overflow: hidden;   transition: .3s;   display: none;   background: white;   user-select: text; }  gridster-item.gridster-item-moving {   cursor: move; }  gridster-item.gridster-item-resizing, gridster-item.gridster-item-moving {   transition: 0s;   z-index: 2;   box-shadow: 0 0 5px 5px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12); }  .gridster-item-resizable-handler {   position: absolute;   z-index: 2; }  .gridster-item-resizable-handler.handle-n {   cursor: n-resize;   height: 10px;   right: 0;   top: 0;   left: 0; }  .gridster-item-resizable-handler.handle-e {   cursor: e-resize;   width: 10px;   bottom: 0;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-s {   cursor: s-resize;   height: 10px;   right: 0;   bottom: 0;   left: 0; }  .gridster-item-resizable-handler.handle-w {   cursor: w-resize;   width: 10px;   left: 0;   top: 0;   bottom: 0; }  .gridster-item-resizable-handler.handle-ne {   cursor: ne-resize;   width: 10px;   height: 10px;   right: 0;   top: 0; }  .gridster-item-resizable-handler.handle-nw {   cursor: nw-resize;   width: 10px;   height: 10px;   left: 0;   top: 0; }  .gridster-item-resizable-handler.handle-se {   cursor: se-resize;   width: 0;   height: 0;   right: 0;   bottom: 0;   border-style: solid;   border-width: 0 0 10px 10px;   border-color: transparent; }  .gridster-item-resizable-handler.handle-sw {   cursor: sw-resize;   width: 10px;   height: 10px;   left: 0;   bottom: 0; }  gridster-item:hover .gridster-item-resizable-handler.handle-se {   border-color: transparent transparent #ccc }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":14,"character":17},"member":"None"}}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":30,"character":31}}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":30,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":30,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":30,"character":84},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":30,"character":109}]}],"ngOnInit":[{"__symbolic":"method"}],"updateOptions":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSize":[{"__symbolic":"method"}],"updateItemSize":[{"__symbolic":"method"}],"itemChanged":[{"__symbolic":"method"}],"checkItemChanges":[{"__symbolic":"method"}],"canBeDragged":[{"__symbolic":"method"}],"canBeResized":[{"__symbolic":"method"}]}}}}]

dist/gridsterItemComponent.interface.d.ts

@@ -10,6 +10,2 @@ import { GridsterItem } from './gridsterItem.interface';
     $item: GridsterItemS;
-    itemTop: number;
-    itemLeft: number;
-    itemWidth: number;
-    itemHeight: number;
     top: number;
@@ -19,3 +15,2 @@ left: number;
     height: number;
-    itemMargin: string;
     drag: GridsterDraggable;
@@ -26,3 +21,3 @@ resize: GridsterResizable;
     itemChanged: () => void;
-    setSize: (noCheck: Boolean) => void;
+    setSize: () => void;
     checkItemChanges: (newValue: GridsterItem, oldValue: GridsterItem) => void;
@@ -29,0 +24,0 @@ canBeDragged: () => boolean;

dist/gridsterPreview.component.js

@@ -19,3 +19,3 @@ "use strict";
         if (!this.gridster.movingItem) {
-            this.renderer.setStyle(this.el, 'display', 'none');
+            this.renderer.setStyle(this.el, 'display', null);
         }
@@ -26,40 +26,4 @@ else {
             }
-            var margin = void 0;
-            var curRowHeight = this.gridster.curRowHeight;
-            var curColWidth = this.gridster.curColWidth;
-            if (this.gridster.$options.outerMargin) {
-                if (this.gridster.$options.outerMarginTop !== null) {
-                    margin = this.gridster.$options.outerMarginTop + 'px ';
-                }
-                else {
-                    margin = this.gridster.$options.margin + 'px ';
-                }
-                if (this.gridster.$options.outerMarginRight !== null) {
-                    margin += this.gridster.$options.outerMarginRight + 'px ';
-                }
-                else {
-                    margin += this.gridster.$options.margin + 'px ';
-                }
-                if (this.gridster.$options.outerMarginBottom !== null) {
-                    margin += this.gridster.$options.outerMarginBottom + 'px ';
-                }
-                else {
-                    margin += this.gridster.$options.margin + 'px ';
-                }
-                if (this.gridster.$options.outerMarginLeft !== null) {
-                    margin += this.gridster.$options.outerMarginLeft + 'px';
-                }
-                else {
-                    margin += this.gridster.$options.margin + 'px';
-                }
-            }
-            else {
-                margin = 0 + 'px';
-            }
             this.renderer.setStyle(this.el, 'display', 'block');
-            this.renderer.setStyle(this.el, 'height', (this.gridster.movingItem.rows * curRowHeight - this.gridster.$options.margin) + 'px');
-            this.renderer.setStyle(this.el, 'width', (this.gridster.movingItem.cols * curColWidth - this.gridster.$options.margin) + 'px');
-            this.renderer.setStyle(this.el, 'top', (this.gridster.movingItem.y * curRowHeight) + 'px');
-            this.renderer.setStyle(this.el, 'left', (this.gridster.movingItem.x * curColWidth) + 'px');
-            this.renderer.setStyle(this.el, 'margin', margin);
+            this.gridster.gridRenderer.updateItem(this.el, this.gridster.movingItem, this.renderer);
         }
@@ -71,3 +35,3 @@ };
                     template: '',
-                    styles: ["gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"],
+                    styles: ["gridster-preview {   display: none;   background: rgba(0, 0, 0, 0.15); }"],
                     encapsulation: core_1.ViewEncapsulation.None
@@ -74,0 +38,0 @@ },] },

dist/gridsterPreview.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterPreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"gridster-preview","template":"","styles":["gridster-preview {   background: rgba(0, 0, 0, 0.15);   position: absolute; }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":17},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":14,"character":31}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":14,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":14,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":14,"character":84}]}],"ngOnDestroy":[{"__symbolic":"method"}],"previewStyle":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterPreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"gridster-preview","template":"","styles":["gridster-preview {   display: none;   background: rgba(0, 0, 0, 0.15); }"],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":8,"character":17},"member":"None"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":14,"character":31}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":14,"character":18},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent","line":14,"character":48},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":14,"character":84}]}],"ngOnDestroy":[{"__symbolic":"method"}],"previewStyle":[{"__symbolic":"method"}]}}}}]

dist/gridsterPush.service.js

@@ -58,3 +58,3 @@ "use strict";
             pushedItem.$item.y = pushedItem.item.y || 0;
-            pushedItem.setSize(true);
+            pushedItem.setSize();
         }
@@ -157,3 +157,3 @@ this.pushedItems = [];
         if (this.push(gridsterItemCollide, this.fromNorth)) {
-            gridsterItemCollide.setSize(true);
+            gridsterItemCollide.setSize();
             this.addToPushed(gridsterItemCollide);
@@ -174,3 +174,3 @@ return true;
         if (this.push(gridsterItemCollide, this.fromSouth)) {
-            gridsterItemCollide.setSize(true);
+            gridsterItemCollide.setSize();
             this.addToPushed(gridsterItemCollide);
@@ -191,3 +191,3 @@ return true;
         if (this.push(gridsterItemCollide, this.fromWest)) {
-            gridsterItemCollide.setSize(true);
+            gridsterItemCollide.setSize();
             this.addToPushed(gridsterItemCollide);
@@ -208,3 +208,3 @@ return true;
         if (this.push(gridsterItemCollide, this.fromEast)) {
-            gridsterItemCollide.setSize(true);
+            gridsterItemCollide.setSize();
             this.addToPushed(gridsterItemCollide);
@@ -234,3 +234,3 @@ return true;
         gridsterItem.$item.y = tempPosition.y;
-        gridsterItem.setSize(true);
+        gridsterItem.setSize();
         if (!this.pushedItemsTempPath[i].length) {
@@ -280,3 +280,3 @@ this.pushedItemsTemp.splice(i, 1);
             if (!this.gridster.findItemWithItem(pushedItem.$item)) {
-                pushedItem.setSize(true);
+                pushedItem.setSize();
                 path.splice(j + 1, path.length - j - 1);
@@ -283,0 +283,0 @@ change = true;

dist/gridsterPushResize.service.js

@@ -45,3 +45,3 @@ "use strict";
             pushedItem.$item.row = pushedItem.item.row || 1;
-            pushedItem.setSize(true);
+            pushedItem.setSize();
         }
@@ -94,3 +94,3 @@ this.pushedItems = [];
             && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-            gridsterItemCollide.setSize(true);
+            gridsterItemCollide.setSize();
             this.addToPushed(gridsterItemCollide);
@@ -111,3 +111,3 @@ this.push(gridsterItem, direction);
             && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-            gridsterItemCollide.setSize(true);
+            gridsterItemCollide.setSize();
             this.addToPushed(gridsterItemCollide);
@@ -129,3 +129,3 @@ this.push(gridsterItem, direction);
             && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-            gridsterItemCollide.setSize(true);
+            gridsterItemCollide.setSize();
             this.addToPushed(gridsterItemCollide);
@@ -146,3 +146,3 @@ this.push(gridsterItem, direction);
             && !this.gridster.checkGridCollision(gridsterItemCollide.$item)) {
-            gridsterItemCollide.setSize(true);
+            gridsterItemCollide.setSize();
             this.addToPushed(gridsterItemCollide);
@@ -206,3 +206,3 @@ this.push(gridsterItem, direction);
             if (!this.gridster.findItemWithItem(pushedItem.$item)) {
-                pushedItem.setSize(true);
+                pushedItem.setSize();
                 path.splice(j + 1, path.length - 1 - j);
@@ -209,0 +209,0 @@ }

dist/gridsterResizable.service.d.ts

@@ -0,1 +1,2 @@
+import { NgZone } from '@angular/core';
 import { GridsterResizeEventType } from './gridsterResizeEventType.interface';
@@ -7,2 +8,3 @@ import { GridsterPush } from './gridsterPush.service';
 export declare class GridsterResizable {
+    private zone;
     gridsterItem: GridsterItemComponentInterface;
@@ -26,3 +28,2 @@ gridster: GridsterComponentInterface;
     touchcancel: Function;
-    mousedown: Function;
     push: GridsterPush;
@@ -46,3 +47,3 @@ pushResize: GridsterPushResize;
     newPosition: number;
-    constructor(gridsterItem: GridsterItemComponentInterface, gridster: GridsterComponentInterface);
+    constructor(gridsterItem: GridsterItemComponentInterface, gridster: GridsterComponentInterface, zone: NgZone);
     destroy(): void;
@@ -64,2 +65,6 @@ dragStart(e: any): void;
     dragStartDelay(e: any): void;
+    setItemTop(top: number): void;
+    setItemLeft(left: number): void;
+    setItemHeight(height: number): void;
+    setItemWidth(width: number): void;
 }

dist/gridsterResizable.service.js

@@ -11,3 +11,4 @@ "use strict";
 var GridsterResizable = /** @class */ (function () {
-    function GridsterResizable(gridsterItem, gridster) {
+    function GridsterResizable(gridsterItem, gridster, zone) {
+        this.zone = zone;
         this.gridsterItem = gridsterItem;
@@ -31,2 +32,3 @@ this.gridster = gridster;
     GridsterResizable.prototype.dragStart = function (e) {
+        var _this = this;
         switch (e.which) {
@@ -48,6 +50,8 @@ case 1:
         this.dragStopFunction = this.dragStop.bind(this);
-        this.mousemove = this.gridsterItem.renderer.listen('document', 'mousemove', this.dragFunction);
+        this.zone.runOutsideAngular(function () {
+            _this.mousemove = _this.gridsterItem.renderer.listen('document', 'mousemove', _this.dragFunction);
+            _this.touchmove = _this.gridster.renderer.listen(_this.gridster.el, 'touchmove', _this.dragFunction);
+        });
         this.mouseup = this.gridsterItem.renderer.listen('document', 'mouseup', this.dragStopFunction);
         this.cancelOnBlur = this.gridsterItem.renderer.listen('window', 'blur', this.dragStopFunction);
-        this.touchmove = this.gridster.renderer.listen(this.gridster.el, 'touchmove', this.dragFunction);
         this.touchend = this.gridsterItem.renderer.listen('document', 'touchend', this.dragStopFunction);
@@ -67,6 +71,6 @@ this.touchcancel = this.gridsterItem.renderer.listen('document', 'touchcancel', this.dragStopFunction);
         this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-        this.diffLeft = e.clientX + this.offsetLeft - this.margin - this.left;
-        this.diffRight = e.clientX + this.offsetLeft - this.margin - this.right;
-        this.diffTop = e.clientY + this.offsetTop - this.margin - this.top;
-        this.diffBottom = e.clientY + this.offsetTop - this.margin - this.bottom;
+        this.diffLeft = e.clientX + this.offsetLeft - this.left;
+        this.diffRight = e.clientX + this.offsetLeft - this.right;
+        this.diffTop = e.clientY + this.offsetTop - this.top;
+        this.diffBottom = e.clientY + this.offsetTop - this.bottom;
         this.minHeight = this.gridster.positionYToPixels(this.gridsterItem.$item.minItemRows || this.gridster.$options.minItemRows)
@@ -81,18 +85,18 @@ - this.margin;
         this.gridster.dragInProgress = true;
-        this.gridster.gridLines.updateGrid();
+        this.gridster.updateGrid();
         if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-n') > -1) {
             this.resizeEventScrollType.n = true;
-            this.directionFunction = this.handleN.bind(this);
+            this.directionFunction = this.handleN;
         }
         else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-w') > -1) {
             this.resizeEventScrollType.w = true;
-            this.directionFunction = this.handleW.bind(this);
+            this.directionFunction = this.handleW;
         }
         else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-s') > -1) {
             this.resizeEventScrollType.s = true;
-            this.directionFunction = this.handleS.bind(this);
+            this.directionFunction = this.handleS;
         }
         else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-e') > -1) {
             this.resizeEventScrollType.e = true;
-            this.directionFunction = this.handleE.bind(this);
+            this.directionFunction = this.handleE;
         }
@@ -102,3 +106,3 @@ else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-nw') > -1) {
             this.resizeEventScrollType.w = true;
-            this.directionFunction = this.handleNW.bind(this);
+            this.directionFunction = this.handleNW;
         }
@@ -108,3 +112,3 @@ else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-ne') > -1) {
             this.resizeEventScrollType.e = true;
-            this.directionFunction = this.handleNE.bind(this);
+            this.directionFunction = this.handleNE;
         }
@@ -114,3 +118,3 @@ else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-sw') > -1) {
             this.resizeEventScrollType.w = true;
-            this.directionFunction = this.handleSW.bind(this);
+            this.directionFunction = this.handleSW;
         }
@@ -120,6 +124,7 @@ else if (e.target.hasAttribute('class') && e.target.getAttribute('class').split(' ').indexOf('handle-se') > -1) {
             this.resizeEventScrollType.e = true;
-            this.directionFunction = this.handleSE.bind(this);
+            this.directionFunction = this.handleSE;
         }
     };
     GridsterResizable.prototype.dragMove = function (e) {
+        var _this = this;
         e.stopPropagation();
@@ -130,7 +135,9 @@ e.preventDefault();
         this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
-        gridsterScroll_service_1.scroll(this.gridsterItem, e, this.lastMouse, this.directionFunction, true, this.resizeEventScrollType);
+        gridsterScroll_service_1.scroll(this.gridster, this.left, this.top, this.width, this.height, e, this.lastMouse, this.directionFunction.bind(this), true, this.resizeEventScrollType);
         this.directionFunction(e);
         this.lastMouse.clientX = e.clientX;
         this.lastMouse.clientY = e.clientY;
-        this.gridster.gridLines.updateGrid();
+        this.zone.run(function () {
+            _this.gridster.updateGrid();
+        });
     };
@@ -148,5 +155,4 @@ GridsterResizable.prototype.dragStop = function (e) {
         this.touchcancel();
-        this.gridsterItem.renderer.removeClass(this.gridsterItem.el, 'gridster-item-resizing');
         this.gridster.dragInProgress = false;
-        this.gridster.gridLines.updateGrid();
+        this.gridster.updateGrid();
         if (this.gridster.options.resizable && this.gridster.options.resizable.stop) {
@@ -160,2 +166,3 @@ Promise.resolve(this.gridster.options.resizable.stop(this.gridsterItem.item, this.gridsterItem, e))
         setTimeout(function () {
+            _this.gridsterItem.renderer.removeClass(_this.gridsterItem.el, 'gridster-item-resizing');
             if (_this.gridster) {
@@ -172,3 +179,3 @@ _this.gridster.movingItem = null;
         this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
-        this.gridsterItem.setSize(true);
+        this.gridsterItem.setSize();
         this.push.restoreItems();
@@ -182,4 +189,4 @@ this.pushResize.restoreItems();
     GridsterResizable.prototype.makeResize = function () {
+        this.gridsterItem.setSize();
         this.gridsterItem.checkItemChanges(this.gridsterItem.$item, this.gridsterItem.item);
-        this.gridsterItem.setSize(true);
         this.push.setPushedItems();
@@ -193,3 +200,3 @@ this.pushResize.setPushedItems();
     GridsterResizable.prototype.handleN = function (e) {
-        this.top = e.clientY + this.offsetTop - this.margin - this.diffTop;
+        this.top = e.clientY + this.offsetTop - this.diffTop;
         this.height = this.bottom - this.top;
@@ -200,3 +207,3 @@ if (this.minHeight > this.height) {
         }
-        this.newPosition = this.gridster.pixelsToPositionY(this.top, Math.floor);
+        this.newPosition = this.gridster.pixelsToPositionY(this.top + this.margin, Math.floor);
         if (this.gridsterItem.$item.y !== this.newPosition) {
@@ -212,5 +219,4 @@ this.itemBackup[1] = this.gridsterItem.$item.y;
                 this.gridsterItem.$item.rows = this.itemBackup[3];
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'top', this.gridster.positionYToPixels(this.gridsterItem.$item.y) + 'px');
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.gridster.positionYToPixels(this.gridsterItem.$item.rows)
-                    - this.gridster.$options.margin + 'px');
+                this.setItemTop(this.gridster.positionYToPixels(this.gridsterItem.$item.y));
+                this.setItemHeight(this.gridster.positionYToPixels(this.gridsterItem.$item.rows) - this.margin);
                 return;
@@ -224,7 +230,7 @@ }
         }
-        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'top', this.top + 'px');
-        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.height + 'px');
+        this.setItemTop(this.top);
+        this.setItemHeight(this.height);
     };
     GridsterResizable.prototype.handleW = function (e) {
-        this.left = e.clientX + this.offsetLeft - this.margin - this.diffLeft;
+        this.left = e.clientX + this.offsetLeft - this.diffLeft;
         this.width = this.right - this.left;
@@ -235,3 +241,3 @@ if (this.minWidth > this.width) {
         }
-        this.newPosition = this.gridster.pixelsToPositionX(this.left, Math.floor);
+        this.newPosition = this.gridster.pixelsToPositionX(this.left + this.margin, Math.floor);
         if (this.gridsterItem.$item.x !== this.newPosition) {
@@ -247,5 +253,4 @@ this.itemBackup[0] = this.gridsterItem.$item.x;
                 this.gridsterItem.$item.cols = this.itemBackup[2];
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'left', this.gridster.positionXToPixels(this.gridsterItem.$item.x) + 'px');
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.gridster.positionXToPixels(this.gridsterItem.$item.cols)
-                    - this.gridster.$options.margin + 'px');
+                this.setItemLeft(this.gridster.positionXToPixels(this.gridsterItem.$item.x));
+                this.setItemWidth(this.gridster.positionXToPixels(this.gridsterItem.$item.cols) - this.margin);
                 return;
@@ -259,7 +264,7 @@ }
         }
-        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'left', this.left + 'px');
-        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.width + 'px');
+        this.setItemLeft(this.left);
+        this.setItemWidth(this.width);
     };
     GridsterResizable.prototype.handleS = function (e) {
-        this.height = e.clientY + this.offsetTop - this.margin - this.diffBottom - this.top;
+        this.height = e.clientY + this.offsetTop - this.diffBottom - this.top;
         if (this.minHeight > this.height) {
@@ -277,4 +282,3 @@ this.height = this.minHeight;
                 this.gridsterItem.$item.rows = this.itemBackup[3];
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.gridster.positionYToPixels(this.gridsterItem.$item.rows)
-                    - this.gridster.$options.margin + 'px');
+                this.setItemHeight(this.gridster.positionYToPixels(this.gridsterItem.$item.rows) - this.margin);
                 return;
@@ -288,6 +292,6 @@ }
         }
-        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', this.height + 'px');
+        this.setItemHeight(this.height);
     };
     GridsterResizable.prototype.handleE = function (e) {
-        this.width = e.clientX + this.offsetLeft - this.margin - this.diffRight - this.left;
+        this.width = e.clientX + this.offsetLeft - this.diffRight - this.left;
         if (this.minWidth > this.width) {
@@ -305,4 +309,3 @@ this.width = this.minWidth;
                 this.gridsterItem.$item.cols = this.itemBackup[2];
-                this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.gridster.positionXToPixels(this.gridsterItem.$item.cols)
-                    - this.gridster.$options.margin + 'px');
+                this.setItemWidth(this.gridster.positionXToPixels(this.gridsterItem.$item.cols) - this.margin);
                 return;
@@ -316,3 +319,3 @@ }
         }
-        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', this.width + 'px');
+        this.setItemWidth(this.width);
     };
@@ -369,2 +372,16 @@ GridsterResizable.prototype.handleNW = function (e) {
     };
+    GridsterResizable.prototype.setItemTop = function (top) {
+        var transform = 'translate(' + this.left + 'px, ' + top + 'px)';
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'transform', transform);
+    };
+    GridsterResizable.prototype.setItemLeft = function (left) {
+        var transform = 'translate(' + left + 'px, ' + this.top + 'px)';
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'transform', transform);
+    };
+    GridsterResizable.prototype.setItemHeight = function (height) {
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'height', height + 'px');
+    };
+    GridsterResizable.prototype.setItemWidth = function (width) {
+        this.gridsterItem.renderer.setStyle(this.gridsterItem.el, 'width', width + 'px');
+    };
     GridsterResizable.decorators = [
@@ -377,2 +394,3 @@ { type: core_1.Injectable },
         { type: gridster_interface_1.GridsterComponentInterface, },
+        { type: core_1.NgZone, },
     ]; };
@@ -379,0 +397,0 @@ return GridsterResizable;

dist/gridsterResizable.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItemComponent.interface","name":"GridsterItemComponentInterface","line":50,"character":28},{"__symbolic":"reference","module":"./gridster.interface","name":"GridsterComponentInterface","line":50,"character":70}]}],"destroy":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"dragStartDelay":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItemComponent.interface","name":"GridsterItemComponentInterface","line":49,"character":28},{"__symbolic":"reference","module":"./gridster.interface","name":"GridsterComponentInterface","line":49,"character":70},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":49,"character":112}]}],"destroy":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"dragStartDelay":[{"__symbolic":"method"}],"setItemTop":[{"__symbolic":"method"}],"setItemLeft":[{"__symbolic":"method"}],"setItemHeight":[{"__symbolic":"method"}],"setItemWidth":[{"__symbolic":"method"}]}}}}]

dist/gridsterScroll.service.d.ts

 import { GridsterResizeEventType } from './gridsterResizeEventType.interface';
-import { GridsterItemComponentInterface } from './gridsterItemComponent.interface';
-export declare function scroll(gridsterItem: GridsterItemComponentInterface, e: MouseEvent, lastMouse: any, calculateItemPosition: Function, resize?: boolean, resizeEventScrollType?: GridsterResizeEventType): void;
+import { GridsterComponentInterface } from './gridster.interface';
+export declare function scroll(gridster: GridsterComponentInterface, left: number, top: number, width: number, height: number, e: MouseEvent, lastMouse: any, calculateItemPosition: Function, resize?: boolean, resizeEventScrollType?: GridsterResizeEventType): void;
 export declare function cancelScroll(): void;

dist/gridsterScroll.service.js

@@ -13,6 +13,6 @@ "use strict";
 var intervalS;
-function scroll(gridsterItem, e, lastMouse, calculateItemPosition, resize, resizeEventScrollType) {
-    scrollSensitivity = gridsterItem.gridster.$options.scrollSensitivity;
-    scrollSpeed = gridsterItem.gridster.$options.scrollSpeed;
-    gridsterElement = gridsterItem.gridster.el;
+function scroll(gridster, left, top, width, height, e, lastMouse, calculateItemPosition, resize, resizeEventScrollType) {
+    scrollSensitivity = gridster.$options.scrollSensitivity;
+    scrollSpeed = gridster.$options.scrollSpeed;
+    gridsterElement = gridster.el;
     resizeEvent = resize;
@@ -24,4 +24,4 @@ resizeEventType = resizeEventScrollType;
     var offsetTop = gridsterElement.scrollTop;
-    var elemTopOffset = gridsterItem.el.offsetTop - offsetTop;
-    var elemBottomOffset = offsetHeight + offsetTop - gridsterItem.el.offsetTop - gridsterItem.el.offsetHeight;
+    var elemTopOffset = top - offsetTop;
+    var elemBottomOffset = offsetHeight + offsetTop - top - height;
     if (lastMouse.clientY < e.clientY && elemBottomOffset < scrollSensitivity) {
@@ -44,4 +44,4 @@ cancelN();
     }
-    var elemRightOffset = offsetLeft + offsetWidth - gridsterItem.el.offsetLeft - gridsterItem.el.offsetWidth;
-    var elemLeftOffset = gridsterItem.el.offsetLeft - offsetLeft;
+    var elemRightOffset = offsetLeft + offsetWidth - left - width;
+    var elemLeftOffset = left - offsetLeft;
     if (lastMouse.clientX < e.clientX && elemRightOffset <= scrollSensitivity) {
@@ -48,0 +48,0 @@ cancelW();

dist/gridsterSwap.service.js

@@ -32,3 +32,3 @@ "use strict";
             else {
-                this.swapedItem.setSize(true);
+                this.swapedItem.setSize();
                 this.gridsterItem.$item.x = this.gridsterItem.item.x || 0;
@@ -44,3 +44,3 @@ this.gridsterItem.$item.y = this.gridsterItem.item.y || 0;
             this.swapedItem.$item.y = this.swapedItem.item.y || 0;
-            this.swapedItem.setSize(true);
+            this.swapedItem.setSize();
             this.swapedItem = undefined;
@@ -74,3 +74,3 @@ }
             else {
-                gridsterItemCollide.setSize(true);
+                gridsterItemCollide.setSize();
                 this.swapedItem = gridsterItemCollide;
@@ -77,0 +77,0 @@ }

dist/gridsterUtils.service.d.ts

@@ -9,6 +9,6 @@ import { GridsterComponentInterface } from './gridster.interface';
     static checkContentClass(target: any, current: any, contentClass: string): boolean;
-    static compareItems(item1: {
+    static compareItems(a: {
         x: number;
         y: number;
-    }, item2: {
+    }, b: {
         x: number;
@@ -15,0 +15,0 @@ y: number;

dist/gridsterUtils.service.js

@@ -9,3 +9,3 @@ "use strict";
         for (var p in obj2) {
-            if (obj2.hasOwnProperty(p) && properties.hasOwnProperty(p)) {
+            if (obj2[p] !== void 0 && properties.hasOwnProperty(p)) {
                 if (typeof obj2[p] === 'object') {
@@ -63,3 +63,3 @@ obj1[p] = GridsterUtils.merge(obj1[p], obj2[p], properties[p]);
     GridsterUtils.checkContentClass = function (target, current, contentClass) {
-        if (target === current) {
+        if (!target || target === current) {
             return false;
@@ -74,10 +74,10 @@ }
     };
-    GridsterUtils.compareItems = function (item1, item2) {
-        if (item1.y > item2.y) {
+    GridsterUtils.compareItems = function (a, b) {
+        if (a.y > b.y) {
             return -1;
         }
-        else if (item1.y < item2.y) {
+        else if (a.y < b.y) {
             return 1;
         }
-        else if (item1.x > item2.x) {
+        else if (a.x > b.x) {
             return -1;
@@ -84,0 +84,0 @@ }

package.json

 {
   "name": "angular-gridster2",
-  "version": "4.7.2",
+  "version": "5.0.0",
   "license": "MIT",
@@ -19,3 +19,4 @@ "main": "dist/index.js",
     "build-demo": "ng build --prod --base-href=./",
-    "build-npm": "gulp build && ngc -p tsconfig-lib.json"
+    "build-npm": "gulp build && ngc -p tsconfig-lib.json",
+    "deploy-demo": "ngh --dir=demo --no-silent --name='Tiberiu Zuld' --email='[e-mail]'"
   },
@@ -50,21 +51,23 @@ "homepage": "https://tiberiuzuld.github.io/angular-gridster2/angular",
   "devDependencies": {
-    "@angular/animations": "5.2.7",
-    "@angular/cdk": "5.2.3",
-    "@angular/cli": "1.7.2",
-    "@angular/common": "5.2.7",
-    "@angular/compiler": "5.2.7",
-    "@angular/compiler-cli": "5.2.7",
-    "@angular/core": "5.2.7",
-    "@angular/forms": "5.2.7",
-    "@angular/http": "5.2.7",
-    "@angular/language-service": "5.2.7",
-    "@angular/material": "5.2.3",
-    "@angular/platform-browser": "5.2.7",
-    "@angular/platform-browser-dynamic": "5.2.7",
-    "@angular/platform-server": "5.2.7",
-    "@angular/router": "5.2.7",
+    "@angular/animations": "5.2.9",
+    "@angular/cdk": "5.2.4",
+    "@angular/cli": "1.7.3",
+    "@angular/common": "5.2.9",
+    "@angular/compiler": "5.2.9",
+    "@angular/compiler-cli": "5.2.9",
+    "@angular/core": "5.2.9",
+    "@angular/forms": "5.2.9",
+    "@angular/http": "5.2.9",
+    "@angular/language-service": "5.2.9",
+    "@angular/material": "5.2.4",
+    "@angular/platform-browser": "5.2.9",
+    "@angular/platform-browser-dynamic": "5.2.9",
+    "@angular/platform-server": "5.2.9",
+    "@angular/router": "5.2.9",
     "@types/jasmine": "2.8.6",
-    "@types/node": "9.4.6",
-    "codelyzer": "4.1.0",
-    "core-js": "2.5.3",
+    "@types/jasminewd2": "2.0.3",
+    "@types/node": "9.6.1",
+    "angular-cli-ghpages": "0.5.2",
+    "codelyzer": "4.2.1",
+    "core-js": "2.5.4",
     "del": "3.0.0",
@@ -78,12 +81,9 @@ "gulp": "4.0.0",
     "karma-chrome-launcher": "2.2.0",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.4.1",
+    "karma-coverage-istanbul-reporter": "1.4.2",
     "karma-jasmine": "1.1.1",
-    "karma-jasmine-html-reporter": "0.2.2",
+    "karma-jasmine-html-reporter": "1.0.0",
+    "ngx-markdown": "1.5.2",
     "protractor": "5.3.0",
-    "rxjs": "5.5.6",
-    "systemjs": "0.21.0",
-    "ts-helpers": "1.1.2",
+    "rxjs": "5.5.8",
     "ts-node": "5.0.1",
-    "tslib": "1.9.0",
     "tslint": "5.9.1",
@@ -90,0 +90,0 @@ "typescript": "2.6.2",

README.md

@@ -9,5 +9,6 @@ angular-gridster2
 
-### Angular implementation of angular-gridster [Demo](http://tiberiuzuld.github.io/angular-gridster2/angular)
+### Angular implementation of angular-gridster [Demo](http://tiberiuzuld.github.io/angular-gridster2)
 
 ### Requires Angular 5.x
+### For other Angular versions check the other branches.
 
@@ -81,150 +82,3 @@ ## Install
 
-##### Default Grid Options:
-```typescript
-import { GridsterConfig } from 'angular-gridster2';
 
-export const GridsterConfigService: GridsterConfig = {
-  gridType: 'fit', // 'fit' will fit the items in the container without scroll;
-  // 'scrollVertical' will fit on width and height of the items will be the same as the width
-  // 'scrollHorizontal' will fit on height and width of the items will be the same as the height
-  // 'fixed' will set the rows and columns dimensions based on fixedColWidth and fixedRowHeight options
-  // 'verticalFixed' will set the rows to fixedRowHeight and columns width will fit the space available
-  // 'horizontalFixed' will set the columns to fixedColWidth and rows height will fit the space available
-  fixedColWidth: 250, // fixed col width for gridType: 'fixed'
-  fixedRowHeight: 250, // fixed row height for gridType: 'fixed'
-  keepFixedHeightInMobile: false, // keep the height from fixed gridType in mobile layout
-  keepFixedWidthInMobile: false, // keep the width from fixed gridType in mobile layout
-  compactType: 'none', // compact items: 'none' | 'compactUp' | 'compactLeft' | 'compactUp&Left' | 'compactLeft&Up'
-  mobileBreakpoint: 640, // if the screen is not wider that this, remove the grid layout and stack the items
-  minCols: 1, // minimum amount of columns in the grid
-  maxCols: 100, // maximum amount of columns in the grid
-  minRows: 1, // minimum amount of rows in the grid
-  maxRows: 100, // maximum amount of rows in the grid
-  defaultItemCols: 1, // default width of an item in columns
-  defaultItemRows: 1, // default height of an item in rows
-  maxItemCols: 50, // max item number of cols
-  maxItemRows: 50, // max item number of rows
-  minItemCols: 1, // min item number of columns
-  minItemRows: 1, // min item number of rows
-  minItemArea: 1, // min item area: cols * rows
-  maxItemArea: 2500, // max item area: cols * rows
-  margin: 10,  // margin between grid items
-  outerMargin: true,  // if margins will apply to the sides of the container
-  outerMarginTop: null, // override outer margin for grid
-  outerMarginRight: null, // override outer margin for grid
-  outerMarginBottom: null, // override outer margin for grid
-  outerMarginLeft: null, // override outer margin for grid
-  scrollSensitivity: 10,  // margin of the dashboard where to start scrolling
-  scrollSpeed: 20,  // how much to scroll each mouse move when in the scrollSensitivity zone
-  initCallback: undefined, // callback to call after grid has initialized. Arguments: gridsterComponent
-  destroyCallback: undefined, // callback to call after grid has destroyed. Arguments: gridsterComponent
-  itemChangeCallback: undefined,  // callback to call for each item when is changes x, y, rows, cols.
-  // Arguments: gridsterItem, gridsterItemComponent
-  itemResizeCallback: undefined,  // callback to call for each item when width/height changes.
-  // Arguments: gridsterItem, gridsterItemComponent
-  itemInitCallback: undefined,  // callback to call for each item when is initialized and has size > 0.
-  // Arguments: gridsterItem, gridsterItemComponent
-  itemRemovedCallback: undefined,  // callback to call for each item when is removed.
-    // Arguments: gridsterItem, gridsterItemComponent
-  enableEmptyCellClick: false, // enable empty cell click events
-  enableEmptyCellContextMenu: false, // enable empty cell context menu (right click) events
-  enableEmptyCellDrop: false, // enable empty cell drop events
-  enableEmptyCellDrag: false, // enable empty cell drag events
-  emptyCellClickCallback: undefined, // empty cell click callback
-  emptyCellContextMenuCallback: undefined, // empty cell context menu (right click) callback
-  emptyCellDropCallback: undefined, // empty cell drag drop callback. HTML5 Drag & Drop
-  emptyCellDragCallback: undefined, // empty cell drag and create item like excel cell selection
-  // Arguments: event, gridsterItem{x, y, rows: defaultItemRows, cols: defaultItemCols}
-  emptyCellDragMaxCols: 50, // limit empty cell drag max cols
-  emptyCellDragMaxRows: 50, // limit empty cell drag max rows
-  ignoreMarginInRow: false, // ignore the gap between rows for items which span multiple rows (see #162, #224)
-  // only for gridType: `fixed` , `verticalFixed`, `horizontalFixed`
-  draggable: {
-    delayStart: 0, // milliseconds to delay the start of resize, useful for touch interaction
-    enabled: false, // enable/disable draggable items
-    ignoreContentClass: 'gridster-item-content', // default content class to ignore the drag event from
-    ignoreContent: false, // if true drag will start only from elements from `dragHandleClass`
-    dragHandleClass: 'drag-handler', // drag event only from this class. If `ignoreContent` is true.
-    stop: undefined, // callback when dragging an item stops.  Accepts Promise return to cancel/approve drag.
-    start: undefined // callback when dragging an item starts.
-    // Arguments: item, gridsterItem, event
-  },
-  resizable: {
-    delayStart: 0, // milliseconds to delay the start of resize, useful for touch interaction
-    enabled: false, // enable/disable resizable items
-    handles: {
-      s: true,
-      e: true,
-      n: true,
-      w: true,
-      se: true,
-      ne: true,
-      sw: true,
-      nw: true
-    }, // resizable edges of an item
-    stop: undefined, // callback when resizing an item stops. Accepts Promise return to cancel/approve resize.
-    start: undefined // callback when resizing an item starts.
-    // Arguments: item, gridsterItem, event
-  },
-  swap: true, // allow items to switch position if drop on top of another
-  pushItems: false, // push items when resizing and dragging
-  disablePushOnDrag: false, // disable push on drag
-  disablePushOnResize: false, // disable push on resize
-  pushDirections: {north: true, east: true, south: true, west: true}, // control the directions items are pushed
-  pushResizeItems: false, // on resize of item will shrink adjacent items
-  displayGrid: 'onDrag&Resize', // display background grid of rows and columns. Options: 'always' | 'onDrag&Resize' | 'none'
-  disableWindowResize: false, // disable the window on resize listener. This will stop grid to recalculate on window resize.
-  disableWarnings: false, // disable console log warnings about misplacement of grid items
-  scrollToNewItems: false // scroll to new items placed in a scrollable view
-};
-```
-
-##### Gridster options api
-```typescript
-    this.options.api.resize(); // call if size of container changes. Grid will auto resize on window resize.
-    this.options.api.optionsChanged(); // call on change of options after initialization
-    this.options.api.getNextPossiblePosition(item: GridsterItem); // call to get a viable position for item. Returns true if found
-    this.options.api.getFirstPossiblePosition(item: GridsterItem); // call to get the first viable position for an item. Returns a copy of the item with the future position
-    this.options.api.getLastPossiblePosition(item: GridsterItem); // call to get a viable position for item. Returns a copy of the item with the future position
-
-// if you want to push items from code use the GridsterPush service
-import {GridsterItemComponent, GridsterPush, GridsterPushResize, GridsterSwap} from 'gridster'
-
-myMethod(gridsterItemComponent: GridsterItemComponent) {
-    const push = new GridsterPush(gridsterItemComponent); // init the service
-    gridsterItemComponent.$item.rows += 1; // move/resize your item
-    if (push.pushItems(push.fromNorth)) { // push items from a direction
-      push.checkPushBack(); // check for items can restore to original position
-      push.setPushedItems(); // save the items pushed
-      gridsterItemComponent.setSize(true);
-      gridsterItemComponent.checkItemChanges(gridsterItemComponent.$item, gridsterItemComponent.item);
-    } else {
-      gridsterItemComponent.$item.rows -= 1;
-      push.restoreItems(); // restore to initial state the pushed items
-    }
-    push.destroy(); // destroy push instance
-  // similar for GridsterPushResize and GridsterSwap
-}
-```
-
-##### Gridster item options:
-```typescript
-export interface GridsterItem {
-  x?: number; // x position if missing will auto position
-  y?: number; // y position if missing will auto position
-  rows?: number; // number of rows if missing will use grid option defaultItemRows
-  cols?: number; // number of columns if missing will use grid option defaultItemCols
-  initCallback?: Function; // initialization callback and has size > 0. Argument: GridsterItem, GridsterItemComponent
-  dragEnabled?: boolean; // override grid option draggable.enabled
-  resizeEnabled?: boolean; // override grid option resizable.enabled
-  compactEnabled?: boolean; // disable compact
-  maxItemRows?: number; // override grid option maxItemRows
-  minItemRows?: number; // override grid option minItemRows
-  maxItemCols?: number; // override grid option maxItemCols
-  minItemCols?: number; // override grid option minItemCols
-  minItemArea?: number; //  override grid option minItemArea
-  maxItemArea?: number; //  override grid option maxItemArea
-}
-```
-
 ### Load dynamic components inside the `gridster-item`
@@ -275,3 +129,2 @@
 
-##### angular-gridster2 inspired by [angular-gridster](https://github.com/ManifestWebDesign/angular-gridster) 
 ### License
@@ -278,0 +131,0 @@ The MIT License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

39

decreased by-2.5%

Worsened metrics

Total package byte prevSize

189183

decreased by-5.21%

Lines of code

3468

decreased by-0.77%

Number of lines in readme file

131

decreased by-52.88%

No dependency changes