Merge pull request #2827 from adumesny/master

angular support for lazyLoad + demo

Author: adumesny

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

@@ -9,7 +9,8 @@
   <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>
+  <button (click)="onShow(8)" [class.active]="show===8">Lazy Load</button>
+  <button (click)="onShow(9)" [class.active]="show===9">Leak Test</button>
 </div>
 
 <div class="test-container">
@@ -99,6 +100,13 @@
 </div>
 
 <div *ngIf="show===8">
+  <p>delay loading of components</p>
+  <div style="height: 120px; overflow-y: auto">
+    <gridstack [options]="gridOptionsDelay"></gridstack>
+  </div>
+</div>
+
+<div *ngIf="show===9">
   <p>load() + clear() to memory leak test between the two</p>
   <button (click)="clearGrid()">Clear</button>
   <button (click)="load(sub0)">load</button>

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

@@ -46,6 +46,13 @@ export class AppComponent implements OnInit {
     children: this.sub0,
   }
 
+  public lazyChildren: NgGridStackWidget[] = [];
+  public gridOptionsDelay: NgGridStackOptions = {
+    ...this.gridOptions,
+    lazyLoad: true,
+    children: this.lazyChildren,
+  }
+
   // nested grid options
   private subOptions: GridStackOptions = {
     cellHeight: 50, // should be 50 - top/bottom
@@ -99,6 +106,8 @@ export class AppComponent implements OnInit {
   ];
 
   constructor() {
+    for (let y = 0; y <= 5; y++) this.lazyChildren.push({x:0, y, id:String(y), selector: y%2 ? 'app-b' : 'app-a'});
+
     // give them content and unique id to make sure we track them during changes below...
     [...this.items, ...this.subChildren, ...this.sub1, ...this.sub2, ...this.sub0].forEach((w: NgGridStackWidget) => {
       if (!w.selector && !w.content && !w.subGridOpts) w.content = `item ${ids++}`;

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

@@ -19,6 +19,7 @@ import { BaseWidget, NgCompInputs } from 'gridstack/dist/angular';
 export class AComponent extends BaseWidget implements OnDestroy {
   @Input() text: string = 'foo'; // test custom input data
   public override serialize(): NgCompInputs | undefined  { return this.text ? {text: this.text} : undefined; }
+  constructor() { super(); console.log('Comp A created'); }
   ngOnDestroy() { console.log('Comp A destroyed'); } // test to make sure cleanup happens
 }
 
@@ -27,6 +28,7 @@ export class AComponent extends BaseWidget implements OnDestroy {
   template: 'Comp B',
 })
 export class BComponent extends BaseWidget implements OnDestroy {
+  constructor() { super(); console.log('Comp B created'); }
   ngOnDestroy() { console.log('Comp B destroyed'); }
 }
 

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

@@ -44,9 +44,10 @@ export class GridstackItemComponent implements OnDestroy {
 
   /** list of options for creating/updating this item */
   @Input() public set options(val: GridStackNode) {
-    if (this.el.gridstackNode?.grid) {
+    const grid = this.el.gridstackNode?.grid;
+    if (grid) {
       // already built, do an update...
-      this.el.gridstackNode.grid.update(this.el, val);
+      grid.update(this.el, val);
     } else {
       // store our custom element in options so we can update it and not re-create a generic div!
       this._options = {...val, el: this.el};

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

@@ -211,7 +211,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
 /**
  * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
  **/
-export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w: NgGridStackWidget | GridStackNode, add: boolean, isGrid: boolean): HTMLElement | undefined {
+export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, n: NgGridStackNode, add: boolean, isGrid: boolean): HTMLElement | undefined {
   if (add) {
     //
     // create the component dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
@@ -225,15 +225,15 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
       //   grid = createComponent(GridstackComponent, {environmentInjector, hostElement})?.instance;
       // }
 
-      const gridItemCom = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp;
-      if (!gridItemCom) return;
+      const gridItemComp = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp;
+      if (!gridItemComp) return;
       // check if gridItem has a child component with 'container' exposed to create under..
-      const container = (gridItemCom.childWidget as any)?.container || gridItemCom.container;
+      const container = (gridItemComp.childWidget as any)?.container || gridItemComp.container;
       const gridRef = container?.createComponent(GridstackComponent);
       const grid = gridRef?.instance;
       if (!grid) return;
       grid.ref = gridRef;
-      grid.options = w as GridStackOptions;
+      grid.options = n;
       return grid.el;
     } else {
       const gridComp = (host as GridCompHTMLElement)._gridComp;
@@ -243,15 +243,30 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
       gridItem.ref = gridItemRef
 
       // define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
-      const selector = (w as NgGridStackWidget).selector;
+      const selector = n.selector;
       const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
       if (type) {
-        const childWidget = gridItem.container?.createComponent(type)?.instance as BaseWidget;
-        // if proper BaseWidget subclass, save it and load additional data
-        if (childWidget && typeof childWidget.serialize === 'function' && typeof childWidget.deserialize === 'function') {
-          gridItem.childWidget = childWidget;
-          childWidget.deserialize(w);
+        // shared code to create our selector component
+        const createComp = () => {
+          const childWidget = gridItem.container?.createComponent(type)?.instance as BaseWidget;
+          // if proper BaseWidget subclass, save it and load additional data
+          if (childWidget && typeof childWidget.serialize === 'function' && typeof childWidget.deserialize === 'function') {
+            gridItem.childWidget = childWidget;
+            childWidget.deserialize(n);
+          }
         }
+
+        const lazyLoad = n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;
+        if (lazyLoad) {
+          if (!n.visibleObservable) {
+            n.visibleObservable = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) {
+              n.visibleObservable?.disconnect();
+              delete n.visibleObservable;
+              createComp();
+            }});
+            window.setTimeout(() => n.visibleObservable?.observe(gridItem.el)); // wait until callee sets position attributes
+          }
+        } else createComp();
       }
 
       return gridItem.el;
@@ -261,7 +276,6 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
     // REMOVE - have to call ComponentRef:destroy() for dynamic objects to correctly remove themselves
     // Note: this will destroy all children dynamic components as well: gridItem -> childWidget
     //
-    const n = w as GridStackNode;
     if (isGrid) {
       const grid = (n.el as GridCompHTMLElement)?._gridComp;
       if (grid?.ref) grid.ref.destroy();

demo/lazy_load.html

@@ -25,7 +25,7 @@ <h1>Lazy loading demo</h1>
       console.log('created node id ', w.id);
     };
     let children = [];
-    for (let y = 1; y <= 5; y++) children.push({x:0, y, id:y, content: String(y)});
+    for (let y = 0; y <= 5; y++) children.push({x:0, y, id:String(y), content: String(y)});
     let grid = GridStack.init({
       cellHeight: 200,
       children,

doc/CHANGES.md

@@ -119,7 +119,7 @@ Change log
 * fix: [#2231](https://github.com/gridstack/gridstack.js/bug/2231),[#1840](https://github.com/gridstack/gridstack.js/bug/1840),[#2354](https://github.com/gridstack/gridstack.js/bug/2354)
 big overall to how we do sidepanel drag&drop helper. see release notes.
 * feat: [#2818](https://github.com/gridstack/gridstack.js/pull/2818) support for Angular Component hosting true sub-grids (that size according to parent) without requring them to be only child of grid-item-content.
-* feat: Lazy loading of widget content until visible (`GridStackOptions.lazyLoad` and `GridStackWidget.lazyLoad`)
+* feat: [#2826](https://github.com/gridstack/gridstack.js/pull/2826) Lazy loading of widget content until visible (`GridStackOptions.lazyLoad` and `GridStackWidget.lazyLoad`)
 
 ## 10.3.1 (2024-07-21)
 * fix: [#2734](https://github.com/gridstack/gridstack.js/bug/2734) rotate() JS error

doc/README.md

@@ -10,7 +10,7 @@ gridstack.js API
     - [Breakpoint](#breakpoint)
   - [DDDragOpt](#dddragopt)
 - [Grid attributes](#grid-attributes)
-- [Item Options](#item-options)
+- [Item Options - GridStackWidget](#item-options---gridstackwidget)
 - [Item attributes](#item-attributes)
 - [Events](#events)
   - [added(event, items)](#addedevent-items)

src/types.ts

@@ -418,6 +418,8 @@ export interface GridStackNode extends GridStackWidget {
   grid?: GridStack;
   /** actual sub-grid instance */
   subGrid?: GridStack;
+  /** allow delay creation when visible */
+  visibleObservable?: IntersectionObserver;
   /** @internal internal id used to match when cloning engines or saving column layouts */
   _id?: number;
   /** @internal does the node attr ned to be updated due to changed x,y,w,h values */
@@ -452,6 +454,4 @@ export interface GridStackNode extends GridStackWidget {
   _removeDOM?: boolean;
   /** @internal had drag&drop been initialized */
   _initDD?: boolean;
-  /** @internal  allow delay creation when visible */
-  _visibleObservable?: IntersectionObserver;
 }

src/utils.ts

@@ -117,12 +117,14 @@ export class Utils {
 
     const lazyLoad = n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;
     if (lazyLoad) {
-      n._visibleObservable = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) {
-        n._visibleObservable.disconnect();
-        delete n._visibleObservable;
-        GridStack.renderCB(cont, n)
-      }});
-      window.setTimeout(() => n._visibleObservable.observe(el)); // wait until callee sets position attributes
+      if (!n.visibleObservable) {
+        n.visibleObservable = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) {
+          n.visibleObservable?.disconnect();
+          delete n.visibleObservable;
+          GridStack.renderCB(cont, n)
+        }});
+        window.setTimeout(() => n.visibleObservable?.observe(el)); // wait until callee sets position attributes
+      }
     } else GridStack.renderCB(cont, n);
 
     return el;