Merge pull request #233 from swiety85/191-Possible-to-track-order-sequence-of-grid-items

feat(api): extend "change" event object to have isNew and oldValues

Author: swiety85

src/gridList/gridList.ts

@@ -241,26 +241,38 @@ export class GridList {
 
         return this.items.map((item: GridListItem) => {
             const changes = [];
+            const oldValues: {x?: number, y?: number, w?: number, h?: number} = {};
             const initItem = initialItems.find(initItm => initItm.$element === item.$element);
 
             if (!initItem) {
                 return {item, changes: ['x', 'y', 'w', 'h'], isNew: true};
             }
 
-            if (item.getValueX(breakpoint) !== initItem.getValueX(breakpoint)) {
+            const oldX = initItem.getValueX(breakpoint);
+            if (item.getValueX(breakpoint) !== oldX) {
                 changes.push('x');
+                if (oldX) {
+                    oldValues.x = oldX;
+                }
             }
-            if (item.getValueY(breakpoint) !== initItem.getValueY(breakpoint)) {
+
+            const oldY = initItem.getValueY(breakpoint);
+            if (item.getValueY(breakpoint) !== oldY) {
                 changes.push('y');
+                if (oldY) {
+                    oldValues.y = oldY;
+                }
             }
             if (item.w !== initItem.w) {
                 changes.push('w');
+                oldValues.w = initItem.w;
             }
             if (item.h !== initItem.h) {
                 changes.push('h');
+                oldValues.h = initItem.h;
             }
 
-            return {item, changes, isNew: false};
+            return {item, oldValues, changes, isNew: false};
         })
             .filter((itemChange: { item: GridListItem, changes: Array<string> }) => {
                 return itemChange.changes.length;

src/gridster.service.ts

@@ -576,6 +576,8 @@ export class GridsterService {
                 // should be called only once (not for each breakpoint)
                 itemChange.item.itemComponent.change.emit({
                     item: itemChange.item,
+                    oldValues: itemChange.oldValues || {},
+                    isNew: itemChange.isNew,
                     changes: itemChange.changes,
                     breakpoint: breakpoint
                 });