Merge pull request #2778 from adumesny/master

memory leak Angular demo

Author: adumesny

angular/projects/demo/src/app/app.component.html

@@ -9,6 +9,7 @@
   <button (click)="onShow(5)" [class.active]="show===5">Component Dynamic</button>
   <button (click)="onShow(6)" [class.active]="show===6">Nested Grid</button>
   <button (click)="onShow(7)" [class.active]="show===7">Two Grids + sidebar</button>
+  <button (click)="onShow(8)" [class.active]="show===8">Leak Test</button>
 </div>
 
 <div class="test-container">
@@ -99,10 +100,17 @@
   </div>
 </div>
 
+<div *ngIf="show===8">
+  <p>load() memory leak test</p>
+  <button (click)="clearGrid()">Clear</button>
+  <button (click)="load(sub0)">load 0</button>
+  <button (click)="load(sub2)">load 2</button>
+  <gridstack [options]="gridOptionsFull"></gridstack>
+</div>
 
 <div class="grid-container"></div>
 
-<div class="text-container">
+<div class="text-container" *ngIf="show!=8">
   <textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
   <textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
 </div>

angular/projects/demo/src/app/app.component.ts

@@ -40,7 +40,7 @@ export class AppComponent implements OnInit {
     cellHeight: 70,
     columnOpts: { breakpoints: [{w:768, c:1}] },
   }
-  private sub0: NgGridStackWidget[] = [{x:0, y:0, selector:'app-a'}, {x:1, y:0, selector:'app-a', input: {text: 'bar'}}, {x:1, y:1, content:'plain html'}, {x:0, y:1, selector:'app-b'} ];
+  public sub0: NgGridStackWidget[] = [{x:0, y:0, selector:'app-a'}, {x:1, y:0, selector:'app-a', input: {text: 'bar'}}, {x:1, y:1, content:'plain html'}, {x:0, y:1, selector:'app-b'} ];
   public gridOptionsFull: NgGridStackOptions = {
     ...this.gridOptions,
     children: this.sub0,
@@ -53,8 +53,8 @@ export class AppComponent implements OnInit {
     acceptWidgets: true, // will accept .grid-stack-item by default
     margin: 5,
   };
-  private sub1: NgGridStackWidget[] = [ {x:0, y:0, selector:'app-a'}, {x:1, y:0, selector:'app-b'}, {x:2, y:0, selector:'app-c'}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
-  private sub2: NgGridStackWidget[] = [ {x:0, y:0}, {x:0, y:1, w:2}];
+  public sub1: NgGridStackWidget[] = [ {x:0, y:0, selector:'app-a'}, {x:1, y:0, selector:'app-b'}, {x:2, y:0, selector:'app-c'}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
+  public sub2: NgGridStackWidget[] = [ {x:0, y:0}, {x:0, y:1, w:2}];
   private subChildren: NgGridStackWidget[] = [
     {x:0, y:0, content: 'regular item'},
     {x:1, y:0, w:4, h:4, subGridOpts: {children: this.sub1, class: 'sub1', ...this.subOptions}},
@@ -177,6 +177,9 @@ export class AppComponent implements OnInit {
       {x:3, y:0, w:2, content:'new item'}, // new item
     ]);
   }
+  public load(layout: GridStackWidget[]) {
+    this.gridComp?.grid?.load(layout);
+  }
 
   /**
    * ngFor case: TEST TEMPLATE operations - NOT recommended unless you have no GS creating/re-parenting

angular/projects/demo/src/app/app.module.ts

@@ -18,13 +18,13 @@ import { GridstackModule, GridstackComponent } from 'gridstack/dist/angular';
     GridstackModule,
   ],
   declarations: [
-      AngularNgForCmdTestComponent,
-      AngularNgForTestComponent,
-      AngularSimpleComponent,
-      AppComponent,
-      AComponent,
-      BComponent,
-      CComponent,
+    AngularNgForCmdTestComponent,
+    AngularNgForTestComponent,
+    AngularSimpleComponent,
+    AppComponent,
+    AComponent,
+    BComponent,
+    CComponent,
   ],
   exports: [
   ],

angular/projects/lib/src/lib/gridstack.component.ts

@@ -186,18 +186,18 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   private hookEvents(grid?: GridStack) {
     if (!grid) return;
     grid
-    .on('added', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.addedCB.emit({event, nodes}); })
-    .on('change', (event: Event, nodes: GridStackNode[]) => this.changeCB.emit({event, nodes}))
-    .on('disable', (event: Event) => this.disableCB.emit({event}))
-    .on('drag', (event: Event, el: GridItemHTMLElement) => this.dragCB.emit({event, el}))
-    .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.dragStartCB.emit({event, el}))
-    .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.dragStopCB.emit({event, el}))
-    .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.droppedCB.emit({event, previousNode, newNode}))
-    .on('enable', (event: Event) => this.enableCB.emit({event}))
-    .on('removed', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.removedCB.emit({event, nodes}); })
-    .on('resize', (event: Event, el: GridItemHTMLElement) => this.resizeCB.emit({event, el}))
-    .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el}))
-    .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))
+      .on('added', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.addedCB.emit({event, nodes}); })
+      .on('change', (event: Event, nodes: GridStackNode[]) => this.changeCB.emit({event, nodes}))
+      .on('disable', (event: Event) => this.disableCB.emit({event}))
+      .on('drag', (event: Event, el: GridItemHTMLElement) => this.dragCB.emit({event, el}))
+      .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.dragStartCB.emit({event, el}))
+      .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.dragStopCB.emit({event, el}))
+      .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.droppedCB.emit({event, previousNode, newNode}))
+      .on('enable', (event: Event) => this.enableCB.emit({event}))
+      .on('removed', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.removedCB.emit({event, nodes}); })
+      .on('resize', (event: Event, el: GridItemHTMLElement) => this.resizeCB.emit({event, el}))
+      .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el}))
+      .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))
   }
 }
 

src/dd-gridstack.ts

@@ -118,17 +118,17 @@ export class DDGridStack {
 
   /** true if element is droppable */
   public isDroppable(el: DDElementHost): boolean {
-    return !!(el && el.ddElement && el.ddElement.ddDroppable && !el.ddElement.ddDroppable.disabled);
+    return !!(el?.ddElement?.ddDroppable && !el.ddElement.ddDroppable.disabled);
   }
 
   /** true if element is draggable */
   public isDraggable(el: DDElementHost): boolean {
-    return !!(el && el.ddElement && el.ddElement.ddDraggable && !el.ddElement.ddDraggable.disabled);
+    return !!(el?.ddElement?.ddDraggable && !el.ddElement.ddDraggable.disabled);
   }
 
   /** true if element is draggable */
   public isResizable(el: DDElementHost): boolean {
-    return !!(el && el.ddElement && el.ddElement.ddResizable && !el.ddElement.ddResizable.disabled);
+    return !!(el?.ddElement?.ddResizable && !el.ddElement.ddResizable.disabled);
   }
 
   public on(el: GridItemHTMLElement, name: string, callback: DDCallback): DDGridStack {