Merge pull request #2132 from adumesny/master

rev 7.1.2

Author: adumesny

Gruntfile.js

@@ -42,6 +42,9 @@ module.exports = function(grunt) {
           'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'],
           'dist/src/gridstack.scss': ['src/gridstack.scss'],
           'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
+          'dist/angular/README.md': ['demo/angular/src/app/README.md'],
+          'dist/angular/gridstack.component.ts': ['demo/angular/src/app/gridstack.component.ts'],
+          'dist/angular/gridstack-item.component.ts': ['demo/angular/src/app/gridstack-item.component.ts'],
         }
       }
     },

demo/angular/src/app/README.md

@@ -16,9 +16,9 @@ public gridOptions: GridStackOptions = {
   float: true,
 }
 public items: GridStackWidget[] = [
-  {x:0, y:0, minW:2},
-  {x:1, y:1},
-  {x:2, y:2},
+  {x:0, y:0, minW:2, id:'1'},
+  {x:1, y:1, id:'2'},
+  {x:2, y:2, id:'3'},
 ];
 
 // called whenever items change size/position/etc..
@@ -28,7 +28,7 @@ public onChange(data: nodesCB) {
 
 // ngFor unique node id to have correct match between our items used and GS
 public identify(index: number, w: GridStackWidget) {
-  return w.id;
+  return w.id; // or use index if no id is set and you only modify at the end...
 }
 ```
 HTML 
@@ -50,3 +50,8 @@ to build the demo, go to demo/angular and run `yarn` + `yarn start` and Navigate
  - This wrapper needs v7.1.2+ to run as it needs the latest changes
  - This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update, you must manually call the `Gridstack.update()` method directly.
  - The original client list of items is not updated to match **content** changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items. Client could use change/added/removed events to sync that list if they wish to do so now.
+ - Code isn't compiled into a side lib to use right now - you need to copy those files for now. Let me know (slack) if you are using it...
+
+ thank you!
+ Would appreciate getting help doing the same for React and Vue (2 other popular frameworks)
+ - Alain

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

@@ -16,7 +16,7 @@
   <p><b>COMPONENT</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
   <button (click)="add(grid)">add item</button>
   <button (click)="delete(grid)">remove item</button>
-  <button (click)="change(grid)">modify item</button>
+  <button (click)="modify(grid)">modify item</button>
   <button (click)="newLayout(grid)">new layout</button>
   <gridstack #grid [options]="gridOptions" (changeCB)="onChange($event)" (resizestopCB)="onResizeStop($event)">
     <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">

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

@@ -45,26 +45,25 @@ export class AppComponent {
   /**
    * CRUD TEST operations
    */
-  public add(comp: GridstackComponent) {
-    // new array isn't required as Angular seem to detect changes to content
+  public add(gridComp: GridstackComponent) {
+    // new array isn't required as Angular detects changes to content with trackBy:identify()
     // this.items = [...this.items, { x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++) }];
-    this.items.push({ x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++)});
+    this.items.push({x:3, y:0, w:3, content:`item ${ids}`, id:String(ids++)});
   }
 
-  public delete(comp: GridstackComponent) {
+  public delete(gridComp: GridstackComponent) {
     this.items.pop();
   }
 
-  public change(comp: GridstackComponent) {
-    // this will not update the DOM nor trigger gridstackItems.changes for GS to auto-update, so call GS update() instead
+  public modify(gridComp: GridstackComponent) {
+    // this will not update the DOM nor trigger gridstackItems.changes for GS to auto-update, so set new option of the gridItem instead
     // this.items[0].w = 3;
-    // comp.updateAll();
-    const n = comp.grid?.engine.nodes[0];
-    if (n?.el) comp.grid?.update(n.el, {w:3});
+    const gridItem = gridComp.gridstackItems?.get(0);
+    if (gridItem) gridItem.options = {w:3};
   }
 
   /** test updating existing and creating new one */
-  public newLayout(comp: GridstackComponent) {
+  public newLayout(gridComp: GridstackComponent) {
     this.items = [
       {x:0, y:1, id:'1', minW:1, w:1}, // new size/constrain
       {x:1, y:1, id:'2'},
@@ -75,6 +74,6 @@ export class AppComponent {
 
   // ngFor unique node id to have correct match between our items used and GS
   public identify(index: number, w: GridStackWidget) {
-    return w.id;
+    return w.id; // or use index if no id is set and you only modify at the end...
   }
 }

demo/angular/src/app/gridstack-item.component.ts

@@ -1,6 +1,14 @@
+/**
+ * gridstack-item.component.ts 7.1.2
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+
 import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
 import { GridItemHTMLElement, GridStackNode } from 'gridstack';
 
+/**
+ * HTML Component Wrapper for gridstack items, in combination with GridstackComponent for parent grid
+ */
 @Component({
   selector: 'gridstack-item',
   template: `
@@ -14,13 +22,15 @@ import { GridItemHTMLElement, GridStackNode } from 'gridstack';
 })
 export class GridstackItemComponent {
 
-  /** list of options for creating this item */
+  /** list of options for creating/updating this item */
   @Input() public set options(val: GridStackNode) {
-    val.el = this.element; // connect this element to options so we can convert to widget later
     if (this.element.gridstackNode?.grid) {
+      // already built, do an update...
       this.element.gridstackNode.grid.update(this.element, val);
     } else {
-      this._options = val; // store initial values (before we're built)
+      // store our custom element in options so we can update it and not re-create a generic div!
+      val.el = this.element;
+      this._options = val;
     }
   }
   /** return the latest grid options (from GS once built, otherwise initial values) */

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

@@ -1,3 +1,8 @@
+/**
+ * gridstack.component.ts 7.1.2
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+
 import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input,
   NgZone, OnDestroy, OnInit, Output, QueryList } from '@angular/core';
 import { Subject } from 'rxjs';

demo/angular/src/app/ngFor.ts

@@ -14,7 +14,7 @@ let ids = 1;
     <p><b>ngFor</b>: Example using Angular ngFor to loop through items and create DOM items. This track changes made to the array of items, waits for DOM rendering, then update GS</p>
     <button (click)="add()">add item</button>
     <button (click)="delete()">remove item</button>
-    <button (click)="change()">modify item</button>
+    <button (click)="modify()">modify item</button>
     <button (click)="newLayout()">new layout</button>
     <div class="grid-stack">
       <!-- using angular templating to create DOM, otherwise an easier way is to simply call grid.load(items)
@@ -107,7 +107,7 @@ export class AngularNgForTestComponent implements AfterViewInit {
     this.items.pop();
   }
 
-  public change() {
+  public modify() {
     // this will only update the DOM attr (from the ngFor loop in our template above)
     // but not trigger gridstackItems.changes for GS to auto-update, so call GS update() instead
     // this.items[0].w = 2;

demo/angular/src/app/ngFor_cmd.ts

@@ -14,7 +14,7 @@ import { GridItemHTMLElement, GridStack, GridStackWidget } from 'gridstack';
     <p><b>ngFor CMD</b>: Example using Angular ngFor to loop through items, but uses an explicity command to let us update GS (see automatic better way)</p>
     <button (click)="add()">add item</button>
     <button (click)="delete()">remove item</button>
-    <button (click)="change()">modify item</button>
+    <button (click)="modify()">modify item</button>
     <div class="grid-stack">
       <!-- using angular templating to create DOM, otherwise an easier way is to simply call grid.load(items) -->
       <div
@@ -94,7 +94,7 @@ export class AngularNgForCmdTestComponent implements AfterViewInit {
   }
 
   // a change of a widget doesn´t change to amount of items in ngFor therefore we don´t need to do it through the zip function above
-  public change() {
+  public modify() {
     const updateEl = this.grid.getGridItems().find((el) => el.id === `${0}`);
     this.grid.update(updateEl!, { w: 2 });
   }

doc/CHANGES.md

@@ -5,7 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [7.1.1-dev (TBD)](#711-dev-tbd)
+- [7.1.2 (2022-12-29)](#712-2022-12-29)
 - [7.1.1 (2022-11-13)](#711-2022-11-13)
 - [7.1.0 (2022-10-23)](#710-2022-10-23)
 - [7.0.1 (2022-10-14)](#701-2022-10-14)
@@ -77,7 +77,7 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## 7.1.1-dev (TBD)
+## 7.1.2 (2022-12-29)
 * fix [#939](https://github.com/gridstack/gridstack.js/issues/2039) 'prototype' undefined error for dd-gridstack.js
 * add [#939](https://github.com/gridstack/gridstack.js/issues/2105) disable/enable are methods now recursive by default
 * add better `GridStackEventHandlerCallback` spelled out types

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "7.1.1-dev",
+  "version": "7.1.2",
   "description": "TypeScript/JS lib for dashboard layout and creation, responsive, mobile support, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)",
   "main": "./dist/gridstack.js",
   "types": "./dist/gridstack.d.ts",