Merge pull request #260 from swiety85/fix-position-and-size-bindings

fix: position and size binding on outside change
swiety85 · Jun 18, 2018 · 9b386f6 · 9b386f6
2 parents e4aa5f9 + 3a15ff2
commit 9b386f6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts b/projects/angular2gridster/src/lib/gridster-item/gridster-item.component.ts
@@ -300,6 +300,33 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
         if (!this.gridster.gridList) {
             return;
         }
+        let rerender = false;
+
+        ['w', ...Object.keys(GridListItem.W_PROPERTY_MAP).map(breakpoint => GridListItem.W_PROPERTY_MAP[breakpoint])]
+        .filter(propName => changes[propName] && !changes[propName].isFirstChange())
+        .forEach((propName: string) => {
+            if (changes[propName].currentValue > this.options.maxWidth) {
+                this[propName] = this.options.maxWidth;
+                setTimeout(() => this[propName + 'Change'].emit(this[propName]));
+            }
+            rerender = true;
+        });
+
+        ['h', ...Object.keys(GridListItem.H_PROPERTY_MAP).map(breakpoint => GridListItem.H_PROPERTY_MAP[breakpoint])]
+            .filter(propName => changes[propName] && !changes[propName].isFirstChange())
+            .forEach((propName: string) => {
+                if (changes[propName].currentValue > this.options.maxHeight) {
+                    this[propName] = this.options.maxHeight;
+                    setTimeout(() => this[propName + 'Change'].emit(this[propName]));
+                }
+                rerender = true;
+            });
+
+        ['x', 'y',
+        ...Object.keys(GridListItem.X_PROPERTY_MAP).map(breakpoint => GridListItem.X_PROPERTY_MAP[breakpoint]),
+        ...Object.keys(GridListItem.Y_PROPERTY_MAP).map(breakpoint => GridListItem.Y_PROPERTY_MAP[breakpoint])]
+            .filter(propName => changes[propName] && !changes[propName].isFirstChange())
+            .forEach((propName: string) => rerender = true);
 
         if (changes['dragAndDrop'] && !changes['dragAndDrop'].isFirstChange()) {
             if (changes['dragAndDrop'].currentValue && this.gridster.options.dragAndDrop) {
@@ -315,21 +342,9 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
                 this.disableResizable();
             }
         }
-        if (changes['w'] && !changes['w'].isFirstChange()) {
-            if (changes['w'].currentValue > this.options.maxWidth) {
-                this.w = this.options.maxWidth;
-                setTimeout(() => {
-                    this.wChange.emit(this.w);
-                });
-            }
-        }
-        if (changes['h'] && !changes['h'].isFirstChange()) {
-            if (changes['h'].currentValue > this.options.maxHeight) {
-                this.h = this.options.maxHeight;
-                setTimeout(() => {
-                    this.hChange.emit(this.h);
-                });
-            }
+
+        if (rerender && this.gridster.gridsterComponent.isReady) {
+            this.gridster.debounceRenderSubject.next();
         }
     }
 
@@ -478,7 +493,7 @@ export class GridsterItemComponent implements OnInit, OnChanges, AfterViewInit,
                 .subscribe(() => {
                     this.zone.run(() => {
                         this.gridster.onStop(this.item);
-                        this.gridster.render();
+                        this.gridster.debounceRenderSubject.next();
                         this.isDragging = false;
                         this.onEnd('drag');
                     });

diff --git a/projects/angular2gridster/src/lib/gridster.service.ts b/projects/angular2gridster/src/lib/gridster.service.ts
@@ -30,6 +30,8 @@ export class GridsterService {
 
     gridsterComponent: GridsterComponent;
 
+    debounceRenderSubject = new Subject();
+
     public $positionHighlight: HTMLElement;
 
     public maxItemWidth: number;
@@ -57,6 +59,8 @@ export class GridsterService {
             this.render();
             this.updateCachedItems();
         });
+
+        this.debounceRenderSubject.pipe(debounceTime(0)).subscribe(() => this.render());
     }
 
     isInitialized(): boolean {
@@ -192,7 +196,7 @@ export class GridsterService {
         this.gridsterComponent.isResizing = false;
 
         this.gridList.pullItemsToLeft(item);
-        this.render();
+        this.debounceRenderSubject.next();
 
         this.fixItemsPositions();
     }