angular-gridster2 - npm Package Compare versions

Comparing version 3.3.1 to 3.4.0

dist/gridster.component.js

@@ -19,3 +19,5 @@ "use strict";
         this.$options.draggable.stop = undefined;
+        this.$options.draggable.start = undefined;
         this.$options.resizable.stop = undefined;
+        this.$options.resizable.start = undefined;
         this.$options.itemChangeCallback = undefined;
@@ -280,3 +282,3 @@ this.$options.itemResizeCallback = undefined;
         var canAddToColumns = this.$options.maxCols > this.columns + newItem.cols;
-        var addToRows = this.rows >= this.columns && canAddToRows;
+        var addToRows = this.rows <= this.columns && canAddToRows;
         if (!addToRows && canAddToColumns) {
@@ -283,0 +285,0 @@ newItem.x = this.columns;

dist/gridsterConfig.constant.js

@@ -35,3 +35,4 @@ "use strict";
         dragHandleClass: 'drag-handler',
-        stop: undefined // callback when dragging an item stops.  Accepts Promise return to cancel/approve drag.
+        stop: undefined,
+        start: undefined // callback when dragging an item starts.
         // Arguments: item, gridsterItem, event
@@ -51,3 +52,4 @@ },
         },
-        stop: undefined // callback when resizing an item stops. Accepts Promise return to cancel/approve resize.
+        stop: undefined,
+        start: undefined // callback when resizing an item starts.
         // Arguments: item, gridsterItem, event
@@ -54,0 +56,0 @@ },

dist/gridsterConfig.constant.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":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,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__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"}},"swap":true,"pushItems":false,"displayGrid":"onDrag&Resize"}}},{"__symbolic":"module","version":1,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":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,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__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"}},"swap":true,"pushItems":false,"displayGrid":"onDrag&Resize"}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":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,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__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"}}},{"__symbolic":"module","version":1,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":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,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__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"}}}]

dist/gridsterConfig.interface.d.ts

@@ -46,2 +46,3 @@ export declare type GridType = 'fit' | 'scrollVertical' | 'scrollHorizontal' | 'fixed';
     stop?: Function;
+    start?: Function;
 }
@@ -48,0 +49,0 @@ export interface Resizable extends Draggable {

dist/gridsterDraggable.service.js

@@ -54,2 +54,5 @@ "use strict";
         }
+        if (this.gridster.$options.draggable.start) {
+            this.gridster.$options.draggable.start(this.gridsterItem.item, this.gridsterItem, e);
+        }
         e.stopPropagation();
@@ -56,0 +59,0 @@ e.preventDefault();

dist/gridsterResizable.service.d.ts

@@ -40,2 +40,10 @@ import { GridsterItemComponent } from './gridsterItem.component';
     static touchEvent(e: any): void;
+    static getOffsetSum(originalElement: any): {
+        top: number;
+        left: number;
+    };
+    static getScrollSum(originalElement: any): {
+        scrollTop: number;
+        scrollLeft: number;
+    };
     constructor(gridsterItem: GridsterItemComponent, gridster: GridsterComponent);
@@ -47,2 +55,6 @@ dragStart(e: any): void;
     makeResize(): void;
+    getRealCords(e: any): {
+        pageY: number;
+        pageX: number;
+    };
     handleN(e: any): void;
@@ -49,0 +61,0 @@ handleW(e: any): void;

dist/gridsterResizable.service.js

@@ -23,2 +23,24 @@ "use strict";
     };
+    GridsterResizable.getOffsetSum = function (originalElement) {
+        var top = 0;
+        var left = 0;
+        var element = originalElement;
+        while (element) {
+            top = top + parseFloat(element.offsetTop);
+            left = left + parseFloat(element.offsetLeft);
+            element = element.offsetParent;
+        }
+        return { top: Math.round(top), left: Math.round(left) };
+    };
+    GridsterResizable.getScrollSum = function (originalElement) {
+        var top = 0;
+        var left = 0;
+        var element = originalElement;
+        while (element) {
+            top = top + parseFloat(element.scrollTop);
+            left = left + parseFloat(element.scrollLeft);
+            element = element.offsetParent;
+        }
+        return { scrollTop: Math.round(top), scrollLeft: Math.round(left) };
+    };
     GridsterResizable.prototype.dragStart = function (e) {
@@ -34,2 +56,5 @@ switch (e.which) {
         }
+        if (this.gridster.$options.resizable.start) {
+            this.gridster.$options.resizable.start(this.gridsterItem.item, this.gridsterItem, e);
+        }
         e.stopPropagation();
@@ -151,4 +176,10 @@ e.preventDefault();
     };
+    GridsterResizable.prototype.getRealCords = function (e) {
+        var gridsterOffsets = GridsterResizable.getOffsetSum(this.gridster.el);
+        var pageY = e.pageY - gridsterOffsets.top + GridsterResizable.getScrollSum(this.gridster.el).scrollTop;
+        var pageX = e.pageX - gridsterOffsets.left + GridsterResizable.getScrollSum(this.gridster.el).scrollLeft;
+        return { pageY: pageY, pageX: pageX };
+    };
     GridsterResizable.prototype.handleN = function (e) {
-        this.top = e.pageY + this.offsetTop - this.margin;
+        this.top = this.getRealCords(e).pageY - this.margin;
         this.height = this.bottom - this.top;
@@ -183,3 +214,3 @@ if (this.minHeight > this.height) {
     GridsterResizable.prototype.handleW = function (e) {
-        this.left = e.pageX + this.offsetLeft - this.margin;
+        this.left = this.getRealCords(e).pageX - this.margin;
         this.width = this.right - this.left;
@@ -214,3 +245,3 @@ if (this.minWidth > this.width) {
     GridsterResizable.prototype.handleS = function (e) {
-        this.height = e.pageY + this.offsetTop - this.margin - this.gridsterItem.top;
+        this.height = this.getRealCords(e).pageY - this.margin - this.gridsterItem.top;
         if (this.minHeight > this.height) {
@@ -239,3 +270,3 @@ this.height = this.minHeight;
     GridsterResizable.prototype.handleE = function (e) {
-        this.width = e.pageX + this.offsetLeft - this.margin - this.gridsterItem.left;
+        this.width = this.getRealCords(e).pageX - this.margin - this.gridsterItem.left;
         if (this.minWidth > this.width) {
@@ -242,0 +273,0 @@ this.width = this.minWidth;

dist/gridsterResizable.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"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"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"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"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"getRealCords":[{"__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"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"getRealCords":[{"__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"}]}}}}]

package.json

 {
   "name": "angular-gridster2",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -154,3 +154,4 @@ angular-gridster2
     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.
+    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
@@ -170,3 +171,4 @@ },
     }, // resizable edges of an item
-    stop: undefined // callback when resizing an item stops. Accepts Promise return to cancel/approve resize.
+    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
@@ -173,0 +175,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

218917

increased by2.02%

Lines of code

2068

increased by2.53%

Number of lines in readme file

263

increased by0.77%

No dependency changes