fix(demo): Fix resize widget by buttons in demo

swiety85 · Aug 20, 2019 · 3aab09c · 3aab09c
1 parent 35ca28c
commit 3aab09c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -133,10 +133,10 @@ <h5 class="panel-title">{{ widget.title }}</h5>
                   <label>
                       <input type="checkbox" [(ngModel)]="widget.resizable" value="true"> Resizable
                   </label>
-                  <button (click)="setWidth(widget, widget.w+1, $event, gridster1)">width +</button>
-                  <button (click)="setWidth(widget, widget.w-1, $event, gridster1)">width -</button>
-                  <button (click)="setHeight(widget, widget.h+1, $event, gridster1)">height +</button>
-                  <button (click)="setHeight(widget, widget.h-1, $event, gridster1)">height -</button>
+                  <button (click)="setWidth(widget, 1, $event, gridster1)">width +</button>
+                  <button (click)="setWidth(widget, -1, $event, gridster1)">width -</button>
+                  <button (click)="setHeight(widget, 1, $event, gridster1)">height +</button>
+                  <button (click)="setHeight(widget, -1, $event, gridster1)">height -</button>
               </p>
               <p>
                   <button (click)="remove($event, indx,gridster1)">remove</button>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -64,6 +64,7 @@ export class AppComponent implements OnInit {
         responsiveView: true, // turn on adopting items sizes on window resize and enable responsiveOptions
         responsiveDebounce: 500, // window resize debounce time
         responsiveSizes: true,
+        responsiveToParent: true,
         // List of different gridster configurations for different breakpoints.
         // Each breakpoint is defined by name stored in "breakpoint" property. There is fixed set of breakpoints
         // available to use with default minWidth assign to each.
@@ -183,10 +184,13 @@ export class AppComponent implements OnInit {
     setWidth(widget: any, size: number, e: MouseEvent, gridster) {
         e.stopPropagation();
         e.preventDefault();
-        if (size < 1) {
-            size = 1;
+
+        const breakpoint = gridster.options.breakpoint;
+        let newWidth = widget[AppComponent.W_PROPERTY_MAP[breakpoint] || 'w'] + size;
+        if (newWidth < 1) {
+            newWidth = 1;
         }
-        widget.w = size;
+        widget[AppComponent.W_PROPERTY_MAP[breakpoint] || 'w'] = newWidth;
 
         gridster.reload();
 
@@ -196,10 +200,13 @@ export class AppComponent implements OnInit {
     setHeight(widget: any, size: number, e: MouseEvent, gridster) {
         e.stopPropagation();
         e.preventDefault();
-        if (size < 1) {
-            size = 1;
+
+        const breakpoint = gridster.options.breakpoint;
+        let newHeight = widget[AppComponent.H_PROPERTY_MAP[breakpoint] || 'h'] + size;
+        if (newHeight < 1) {
+            newHeight = 1;
         }
-        widget.h = size;
+        widget[AppComponent.H_PROPERTY_MAP[breakpoint] || 'h'] = newHeight;
 
         gridster.reload();