angular-gridster2 - npm Package Compare versions

Comparing version 3.9.0 to 3.10.0

dist/gridster.component.js

@@ -76,14 +76,14 @@ "use strict";
         }
-        if (this.$options.enableEmptyCellClickDrag && !this.emptyCellClick && this.$options.emptyCellClickCallback) {
+        if (this.$options.enableEmptyCellClick && !this.emptyCellClick && this.$options.emptyCellClickCallback) {
             this.emptyCellClick = this.renderer.listen(this.el, 'click', this.emptyCellClickCb.bind(this));
         }
-        else if (!this.$options.enableEmptyCellClickDrag && this.emptyCellClick) {
+        else if (!this.$options.enableEmptyCellClick && this.emptyCellClick) {
             this.emptyCellClick();
             this.emptyCellClick = null;
         }
-        if (this.$options.enableEmptyCellClickDrag && !this.emptyCellDrop && this.$options.emptyCellDropCallback) {
+        if (this.$options.enableEmptyCellDrop && !this.emptyCellDrop && this.$options.emptyCellDropCallback) {
             this.emptyCellDrop = this.renderer.listen(this.el, 'drop', this.emptyCellDragDrop.bind(this));
             this.emptyCellMove = this.renderer.listen(this.el, 'dragover', this.emptyCellDragOver.bind(this));
         }
-        else if (!this.$options.enableEmptyCellClickDrag && this.emptyCellDrop) {
+        else if (!this.$options.enableEmptyCellDrop && this.emptyCellDrop) {
             this.emptyCellDrop();
@@ -94,6 +94,6 @@ this.emptyCellMove();
         }
-        if (this.$options.enableEmptyCellClickDrag && !this.emptyCellDrag && this.$options.emptyCellDragCallback) {
+        if (this.$options.enableEmptyCellDrag && !this.emptyCellDrag && this.$options.emptyCellDragCallback) {
             this.emptyCellDrag = this.renderer.listen(this.el, 'mousedown', this.emptyCellMouseDown.bind(this));
         }
-        else if (!this.$options.enableEmptyCellClickDrag && this.emptyCellDrag) {
+        else if (!this.$options.enableEmptyCellDrag && this.emptyCellDrag) {
             this.emptyCellDrag();
@@ -185,4 +185,5 @@ this.emptyCellDrag = null;
         gridsterUtils_service_1.GridsterUtils.checkTouchEvent(e);
-        var x = e.pageX - this.el.scrollLeft - this.el.offsetLeft;
-        var y = e.pageY - this.el.scrollTop - this.el.offsetTop;
+        var rect = this.el.getBoundingClientRect();
+        var x = e.clientX + this.el.scrollLeft - rect.left;
+        var y = e.clientY + this.el.scrollTop - rect.top;
         var item = {
@@ -195,10 +196,16 @@ x: this.pixelsToPositionX(x, Math.floor),
         if (oldItem) {
-            item.cols = Math.abs(oldItem.x - item.x) + 1;
-            item.rows = Math.abs(oldItem.y - item.y) + 1;
+            item.cols = Math.min(Math.abs(oldItem.x - item.x) + 1, this.$options.emptyCellDragMaxCols);
+            item.rows = Math.min(Math.abs(oldItem.y - item.y) + 1, this.$options.emptyCellDragMaxRows);
             if (oldItem.x < item.x) {
                 item.x = oldItem.x;
             }
+            else if (oldItem.x - item.x > this.$options.emptyCellDragMaxCols - 1) {
+                item.x = this.movingItem.x;
+            }
             if (oldItem.y < item.y) {
                 item.y = oldItem.y;
             }
+            else if (oldItem.y - item.y > this.$options.emptyCellDragMaxRows - 1) {
+                item.y = this.movingItem.y;
+            }
         }
@@ -205,0 +212,0 @@ if (this.checkCollision(item)) {

dist/gridsterConfig.constant.js

@@ -39,6 +39,10 @@ "use strict";
     // Arguments: gridsterItem, gridsterItemComponent
-    enableEmptyCellClickDrag: false,
+    enableEmptyCellClick: false,
+    enableEmptyCellDrop: false,
+    enableEmptyCellDrag: false,
     emptyCellClickCallback: undefined,
     emptyCellDropCallback: undefined,
     emptyCellDragCallback: undefined,
+    emptyCellDragMaxCols: 50,
+    emptyCellDragMaxRows: 50,
     // Arguments: event, gridsterItem{x, y, rows: defaultItemRows, cols: defaultItemCols}
@@ -45,0 +49,0 @@ draggable: {

dist/gridsterConfig.constant.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"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,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"enableEmptyCellClickDrag":false,"emptyCellClickCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDropCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"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,"displayGrid":"onDrag&Resize","disableWindowResize":false}}},{"__symbolic":"module","version":1,"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,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"enableEmptyCellClickDrag":false,"emptyCellClickCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDropCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"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,"displayGrid":"onDrag&Resize","disableWindowResize":false}}}]
+[{"__symbolic":"module","version":3,"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,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"enableEmptyCellClick":false,"enableEmptyCellDrop":false,"enableEmptyCellDrag":false,"emptyCellClickCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDropCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragMaxCols":50,"emptyCellDragMaxRows":50,"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"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,"displayGrid":"onDrag&Resize","disableWindowResize":false}}},{"__symbolic":"module","version":1,"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,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"enableEmptyCellClick":false,"enableEmptyCellDrop":false,"enableEmptyCellDrag":false,"emptyCellClickCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDropCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragCallback":{"__symbolic":"reference","name":"undefined"},"emptyCellDragMaxCols":50,"emptyCellDragMaxRows":50,"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"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,"displayGrid":"onDrag&Resize","disableWindowResize":false}}}]

dist/gridsterConfig.interface.d.ts

@@ -38,6 +38,10 @@ export declare type GridType = 'fit' | 'scrollVertical' | 'scrollHorizontal' | 'fixed' | 'verticalFixed' | 'horizontalFixed';
     disableWindowResize?: boolean;
-    enableEmptyCellClickDrag?: boolean;
+    enableEmptyCellClick?: boolean;
+    enableEmptyCellDrop?: boolean;
+    enableEmptyCellDrag?: boolean;
     emptyCellClickCallback?: Function;
     emptyCellDropCallback?: Function;
     emptyCellDragCallback?: Function;
+    emptyCellDragMaxCols?: number;
+    emptyCellDragMaxRows?: number;
     api?: {
@@ -44,0 +48,0 @@ resize?: Function;

dist/gridsterDraggable.service.d.ts

@@ -9,4 +9,4 @@ import { GridsterSwap } from './gridsterSwap.service';
     lastMouse: {
-        pageX: number;
-        pageY: number;
+        clientX: number;
+        clientY: number;
     };
@@ -13,0 +13,0 @@ offsetLeft: number;

dist/gridsterDraggable.service.js

@@ -15,4 +15,4 @@ "use strict";
         this.lastMouse = {
-            pageX: 0,
-            pageY: 0
+            clientX: 0,
+            clientY: 0
         };
@@ -73,4 +73,4 @@ this.path = [];
         this.height = this.gridsterItem.height;
-        this.diffLeft = e.pageX + this.offsetLeft - this.margin - this.left;
-        this.diffTop = e.pageY + this.offsetTop - this.margin - this.top;
+        this.diffLeft = e.clientX + this.offsetLeft - this.margin - this.left;
+        this.diffTop = e.clientY + this.offsetTop - this.margin - this.top;
         this.gridster.movingItem = this.gridsterItem.$item;
@@ -92,9 +92,9 @@ this.gridster.previewStyle();
         this.calculateItemPositionFromMousePosition(e);
-        this.lastMouse.pageX = e.pageX;
-        this.lastMouse.pageY = e.pageY;
+        this.lastMouse.clientX = e.clientX;
+        this.lastMouse.clientY = e.clientY;
         this.gridster.gridLines.updateGrid();
     };
     GridsterDraggable.prototype.calculateItemPositionFromMousePosition = function (e) {
-        this.left = e.pageX + this.offsetLeft - this.margin - this.diffLeft;
-        this.top = e.pageY + this.offsetTop - this.margin - this.diffTop;
+        this.left = e.clientX + this.offsetLeft - this.margin - this.diffLeft;
+        this.top = e.clientY + this.offsetTop - this.margin - this.diffTop;
         this.calculateItemPosition();
@@ -101,0 +101,0 @@ };

dist/gridsterResizable.service.d.ts

@@ -9,4 +9,4 @@ import { GridsterItemComponent } from './gridsterItem.component';
     lastMouse: {
-        pageX: number;
-        pageY: number;
+        clientX: number;
+        clientY: number;
     };
@@ -13,0 +13,0 @@ itemBackup: Array<number>;

dist/gridsterResizable.service.js

@@ -14,4 +14,4 @@ "use strict";
         this.lastMouse = {
-            pageX: 0,
-            pageY: 0
+            clientX: 0,
+            clientY: 0
         };
@@ -45,4 +45,4 @@ this.itemBackup = [0, 0, 0, 0];
         this.gridsterItem.renderer.addClass(this.gridsterItem.el, 'gridster-item-resizing');
-        this.lastMouse.pageX = e.pageX;
-        this.lastMouse.pageY = e.pageY;
+        this.lastMouse.clientX = e.clientX;
+        this.lastMouse.clientY = e.clientY;
         this.left = this.gridsterItem.left;
@@ -57,6 +57,6 @@ this.top = this.gridsterItem.top;
         this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
-        this.diffLeft = e.pageX + this.offsetLeft - this.margin - this.left;
-        this.diffRight = e.pageX + this.offsetLeft - this.margin - this.right;
-        this.diffTop = e.pageY + this.offsetTop - this.margin - this.top;
-        this.diffBottom = e.pageY + this.offsetTop - this.margin - this.bottom;
+        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.minHeight = this.gridster.positionYToPixels(this.gridsterItem.$item.minItemRows || this.gridster.$options.minItemRows)
@@ -116,4 +116,4 @@ - this.margin;
         this.directionFunction(e);
-        this.lastMouse.pageX = e.pageX;
-        this.lastMouse.pageY = e.pageY;
+        this.lastMouse.clientX = e.clientX;
+        this.lastMouse.clientY = e.clientY;
         this.gridster.gridLines.updateGrid();
@@ -161,3 +161,3 @@ };
     GridsterResizable.prototype.handleN = function (e) {
-        this.top = e.pageY + this.offsetTop - this.margin - this.diffTop;
+        this.top = e.clientY + this.offsetTop - this.margin - this.diffTop;
         this.height = this.bottom - this.top;
@@ -192,3 +192,3 @@ if (this.minHeight > this.height) {
     GridsterResizable.prototype.handleW = function (e) {
-        this.left = e.pageX + this.offsetLeft - this.margin - this.diffLeft;
+        this.left = e.clientX + this.offsetLeft - this.margin - this.diffLeft;
         this.width = this.right - this.left;
@@ -223,3 +223,3 @@ if (this.minWidth > this.width) {
     GridsterResizable.prototype.handleS = function (e) {
-        this.height = e.pageY + this.offsetTop - this.margin - this.diffBottom - this.top;
+        this.height = e.clientY + this.offsetTop - this.margin - this.diffBottom - this.top;
         if (this.minHeight > this.height) {
@@ -248,3 +248,3 @@ this.height = this.minHeight;
     GridsterResizable.prototype.handleE = function (e) {
-        this.width = e.pageX + this.offsetLeft - this.margin - this.diffRight - this.left;
+        this.width = e.clientX + this.offsetLeft - this.margin - this.diffRight - this.left;
         if (this.minWidth > this.width) {
@@ -251,0 +251,0 @@ this.width = this.minWidth;

dist/gridsterScroll.service.js

@@ -25,3 +25,3 @@ "use strict";
     var elemBottomOffset = offsetHeight + offsetTop - gridsterItem.el.offsetTop - gridsterItem.el.offsetHeight;
-    if (lastMouse.pageY < e.pageY && elemBottomOffset < scrollSensitivity) {
+    if (lastMouse.clientY < e.clientY && elemBottomOffset < scrollSensitivity) {
         cancelN();
@@ -33,3 +33,3 @@ if ((resizeEvent && !resizeEventType.s) || intervalS) {
     }
-    else if (lastMouse.pageY > e.pageY && offsetTop > 0 && elemTopOffset < scrollSensitivity) {
+    else if (lastMouse.clientY > e.clientY && offsetTop > 0 && elemTopOffset < scrollSensitivity) {
         cancelS();
@@ -41,3 +41,3 @@ if ((resizeEvent && !resizeEventType.n) || intervalN) {
     }
-    else if (lastMouse.pageY !== e.pageY) {
+    else if (lastMouse.clientY !== e.clientY) {
         cancelVertical();
@@ -47,3 +47,3 @@ }
     var elemLeftOffset = gridsterItem.el.offsetLeft - offsetLeft;
-    if (lastMouse.pageX < e.pageX && elemRightOffset <= scrollSensitivity) {
+    if (lastMouse.clientX < e.clientX && elemRightOffset <= scrollSensitivity) {
         cancelW();
@@ -55,3 +55,3 @@ if ((resizeEvent && !resizeEventType.e) || intervalE) {
     }
-    else if (lastMouse.pageX > e.pageX && offsetLeft > 0 && elemLeftOffset < scrollSensitivity) {
+    else if (lastMouse.clientX > e.clientX && offsetLeft > 0 && elemLeftOffset < scrollSensitivity) {
         cancelE();
@@ -63,3 +63,3 @@ if ((resizeEvent && !resizeEventType.w) || intervalW) {
     }
-    else if (lastMouse.pageX !== e.pageX) {
+    else if (lastMouse.clientX !== e.clientX) {
         cancelHorizontal();
@@ -70,3 +70,3 @@ }
 function startVertical(sign, calculateItemPosition, lastMouse) {
-    var pageY = lastMouse.pageY;
+    var clientY = lastMouse.clientY;
     return setInterval(function () {
@@ -77,8 +77,8 @@ if (!gridsterElement || sign === -1 && gridsterElement.scrollTop - scrollSpeed < 0) {
         gridsterElement.scrollTop += sign * scrollSpeed;
-        pageY += sign * scrollSpeed;
-        calculateItemPosition({ pageX: lastMouse.pageX, pageY: pageY });
+        clientY += sign * scrollSpeed;
+        calculateItemPosition({ clientX: lastMouse.clientX, clientY: clientY });
     }.bind(this), intervalDuration);
 }
 function startHorizontal(sign, calculateItemPosition, lastMouse) {
-    var pageX = lastMouse.pageX;
+    var clientX = lastMouse.clientX;
     return setInterval(function () {
@@ -89,4 +89,4 @@ if (!gridsterElement || sign === -1 && gridsterElement.scrollLeft - scrollSpeed < 0) {
         gridsterElement.scrollLeft += sign * scrollSpeed;
-        pageX += sign * scrollSpeed;
-        calculateItemPosition({ pageX: pageX, pageY: lastMouse.pageY });
+        clientX += sign * scrollSpeed;
+        calculateItemPosition({ clientX: clientX, clientY: lastMouse.clientY });
     }.bind(this), intervalDuration);
@@ -93,0 +93,0 @@ }

dist/gridsterUtils.service.js

@@ -33,5 +33,5 @@ "use strict";
     GridsterUtils.checkTouchEvent = function (e) {
-        if (e.pageX === undefined && e.touches) {
-            e.pageX = e.touches[0].pageX;
-            e.pageY = e.touches[0].pageY;
+        if (e.clientX === undefined && e.touches) {
+            e.clientX = e.touches[0].clientX;
+            e.clientY = e.touches[0].clientY;
         }
@@ -38,0 +38,0 @@ };

dist/index.d.ts

 export { GridsterComponent } from './gridster.component';
 export { GridsterItemComponent } from './gridsterItem.component';
+export { GridsterItem } from './gridsterItem.interface';
 export { GridsterConfig, GridType, Draggable } from './gridsterConfig.interface';
 export { GridsterModule } from './gridster.module';

dist/index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./gridster.component","export":["GridsterComponent"]},{"from":"./gridsterItem.component","export":["GridsterItemComponent"]},{"from":"./gridsterConfig.interface","export":["GridsterConfig","GridType","Draggable"]},{"from":"./gridster.module","export":["GridsterModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./gridster.component","export":["GridsterComponent"]},{"from":"./gridsterItem.component","export":["GridsterItemComponent"]},{"from":"./gridsterConfig.interface","export":["GridsterConfig","GridType","Draggable"]},{"from":"./gridster.module","export":["GridsterModule"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./gridster.component","export":["GridsterComponent"]},{"from":"./gridsterItem.component","export":["GridsterItemComponent"]},{"from":"./gridsterItem.interface","export":["GridsterItem"]},{"from":"./gridsterConfig.interface","export":["GridsterConfig","GridType","Draggable"]},{"from":"./gridster.module","export":["GridsterModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./gridster.component","export":["GridsterComponent"]},{"from":"./gridsterItem.component","export":["GridsterItemComponent"]},{"from":"./gridsterItem.interface","export":["GridsterItem"]},{"from":"./gridsterConfig.interface","export":["GridsterConfig","GridType","Draggable"]},{"from":"./gridster.module","export":["GridsterModule"]}]}]

package.json

 {
   "name": "angular-gridster2",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "license": "MIT",
@@ -51,3 +51,3 @@ "main": "dist/index.js",
     "@angular/cdk": "2.0.0-beta.8",
-    "@angular/cli": "1.2.6",
+    "@angular/cli": "1.2.7",
     "@angular/common": "4.3.3",
@@ -54,0 +54,0 @@ "@angular/compiler": "4.3.3",

README.md

@@ -41,49 +41,20 @@ angular-gridster2
 
-Initialize the demo dashboard
+Initialize a simple dashboard:
 ```typescript
+   import {GridsterConfig, GridsterItem}  from 'angular-gridster2';
    options: GridsterConfig;
-   dashboard: Array<Object>;
- 
-   static eventStop(item, scope) {
-     console.info('eventStop', item, scope);
+   dashboard: Array<GridsterItem>;
+
+   static itemChange(item, itemComponent) {
+     console.info('itemChanged', item, itemComponent);
    }
  
-   static itemChange(item, scope) {
-     console.info('itemChanged', item, scope);
+   static itemResize(item, itemComponent) {
+     console.info('itemResized', item, itemComponent);
    }
  
-   static itemResize(item, scope) {
-     console.info('itemResized', item, scope);
-   }
- 
-   static itemInit(item) {
-     console.info('itemInitialized', item);
-   }
- 
    ngOnInit() {
      this.options = {
-       gridType: 'fit',
-       compactUp: false,
-       compactLeft: false,
        itemChangeCallback: AppComponent.itemChange,
        itemResizeCallback: AppComponent.itemResize,
-       margin: 10,
-       outerMargin: true,
-       maxItemCols: 50,
-       minItemCols: 1,
-       maxItemRows: 50,
-       minItemRows: 1,
-       defaultItemCols: 1,
-       defaultItemRows: 1,
-       fixedColWidth: 250,
-       fixedRowHeight: 250,
-       draggable: {
-         enabled: true,
-         stop: AppComponent.eventStop
-       },
-       resizable: {
-         enabled: true,
-         stop: AppComponent.eventStop
-       },
-       swap: false
      };
@@ -93,12 +64,3 @@
        {cols: 2, rows: 1, y: 0, x: 0},
-       {cols: 2, rows: 2, y: 0, x: 2},
-       {cols: 1, rows: 1, y: 0, x: 4},
-       {cols: 1, rows: 1, y: 0, x: 5},
-       {cols: undefined, rows: undefined, y: 1, x: 0},
-       {cols: 1, rows: 1, y: undefined, x: undefined},
-       {cols: 2, rows: 2, y: 1, x: 5, minItemRows: 2, minItemCols: 2, label: 'Min rows & cols = 2'},
-       {cols: 2, rows: 2, y: 2, x: 0, maxItemRows: 2, maxItemCols: 2, label: 'Max rows & cols = 2'},
-       {cols: 2, rows: 1, y: 2, x: 2, dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled'},
-       {cols: 1, rows: 1, y: 2, x: 4, dragEnabled: false, resizeEnabled: false, label: 'Drag&Resize Disabled'},
-       {cols: 1, rows: 1, y: 0, x: 6, initCallback: AppComponent.itemInit}
+       {cols: 2, rows: 2, y: 0, x: 2}
      ];
@@ -113,7 +75,7 @@ }
      this.dashboard.splice(this.dashboard.indexOf(item), 1);
-   };
+   }
  
    addItem() {
      this.dashboard.push({});
-   };
+   }
 ```
@@ -125,3 +87,3 @@
 ```typescript
-import {GridsterConfig} from './gridsterConfig.interface';
+import {GridsterConfig} from 'angular-gridster2';
 
@@ -164,3 +126,5 @@ export const GridsterConfigService: GridsterConfig = {
   // Arguments: gridsterItem, gridsterItemComponent
-  enableEmptyCellClickDrag: false, // enable empty cell click and drag drop events
+  enableEmptyCellClick: false, // enable empty cell click events
+  enableEmptyCellDrop: false, // enable empty cell drop events
+  enableEmptyCellDrag: false, // enable empty cell drag events
   emptyCellClickCallback: undefined, // empty cell click callback
@@ -170,2 +134,4 @@ emptyCellDropCallback: undefined, // empty cell drag drop callback. HTML5 Drag & Drop
   // 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
   draggable: {
@@ -197,3 +163,3 @@ enabled: false, // enable/disable draggable items
   swap: true, // allow items to switch position if drop on top of another
-pushItems: false, // push items when resizing and dragging
+  pushItems: false, // push items when resizing and dragging
   displayGrid: 'onDrag&Resize', // display background grid of rows and columns
@@ -200,0 +166,0 @@ disableWindowResize: false // disable the window on resize listener. This will stop grid to recalculate on window resize.

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

Total package byte prevSize

238838

increased by0.31%

Lines of code

2270

increased by0.71%

Worsened metrics

Number of lines in readme file

248

decreased by-12.06%

No dependency changes