gridstack 8.1.1 → 8.2.0

package/angular/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "gridstack-lib",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^14.2.0",
+    "@angular/common": "^14.2.0",
+    "@angular/compiler": "^14.2.0",
+    "@angular/core": "^14.2.0",
+    "@angular/forms": "^14.2.0",
+    "@angular/platform-browser": "^14.2.0",
+    "@angular/platform-browser-dynamic": "^14.2.0",
+    "@angular/router": "^14.2.0",
+    "gridstack": "^8.1.2",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.2.11",
+    "@angular/cli": "~14.2.10",
+    "@angular/compiler-cli": "^14.2.0",
+    "@types/jasmine": "~4.0.0",
+    "jasmine-core": "~4.3.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "ng-packagr": "^14.2.0",
+    "typescript": "~4.7.2"
+  }
+}

package/angular/projects/demo/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/angular/projects/demo/src/app/app.component.css

@@ -0,0 +1,11 @@
+.test-container {
+  margin-top: 30px;
+}
+button.active {
+  color: #fff;
+  background-color: #007bff;
+}
+
+.text-container {
+  display: flex;
+}

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

@@ -0,0 +1,78 @@
+
+<div class="button-container">
+  <p class="pick-info">Pick a demo to load:</p>
+  <button (click)="onShow(0)" [class.active]="show===0">Simple</button>
+  <button (click)="onShow(1)" [class.active]="show===1">ngFor case</button>
+  <button (click)="onShow(2)" [class.active]="show===2">ngFor custom command</button>
+  <button (click)="onShow(3)" [class.active]="show===3">Component HTML template</button>
+  <button (click)="onShow(4)" [class.active]="show===4">Component ngFor</button>
+  <button (click)="onShow(5)" [class.active]="show===5">Component Dynamic</button>
+  <button (click)="onShow(6)" [class.active]="show===6">Nested Grid</button>
+</div>
+
+<div class="test-container">
+<angular-simple-test *ngIf="show===0"></angular-simple-test>
+<angular-ng-for-test *ngIf="show===1"></angular-ng-for-test>
+<angular-ng-for-cmd-test *ngIf="show===2"></angular-ng-for-cmd-test>
+
+<div *ngIf="show===3">
+  <p><b>COMPONENT template</b>: using DOM template to use components statically</p>
+  <button (click)="add()">add item</button>
+  <button (click)="delete()">remove item</button>
+  <button (click)="modify()">modify item</button>
+  <button (click)="newLayout()">new layout</button>
+  <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
+    <gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
+    <gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
+  </gridstack>
+</div>
+
+<div *ngIf="show===4">
+  <p><b>COMPONENT ngFor</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
+  <button (click)="addNgFor()">add item</button>
+  <button (click)="deleteNgFor()">remove item</button>
+  <button (click)="modifyNgFor()">modify item</button>
+  <button (click)="newLayoutNgFor()">new layout</button>
+  <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
+    <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
+    </gridstack-item>
+  </gridstack>
+</div>
+
+<div *ngIf="show===5">
+  <p><b>COMPONENT dynamic</b>: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)</p>
+  <button (click)="add()">add item</button>
+  <button (click)="delete()">remove item</button>
+  <button (click)="modify()">modify item</button>
+  <button (click)="newLayout()">new layout</button>
+  <button (click)="saveGrid()">Save</button>
+  <button (click)="clearGrid()">Clear</button>
+  <button (click)="loadGrid()">Load</button>
+  <gridstack [options]="gridOptionsFull" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
+  </gridstack>
+</div>
+
+
+<div *ngIf="show===6">
+  <p><b>Nested Grid</b>: shows nested component grids, like nested.html demo but with Ng Components</p>
+  <button (click)="add()">add item</button>
+  <button (click)="delete()">remove item</button>
+  <button (click)="modify()">modify item</button>
+  <button (click)="newLayout()">new layout</button>
+  <button (click)="saveGrid()">Save</button>
+  <button (click)="clearGrid()">Clear</button>
+  <button (click)="loadGrid()">Load</button>
+  <!-- TODO: addGrid() in code for testing instead ? -->
+  <gridstack [options]="nestedGridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
+    <div empty-content>Add items here or reload the grid</div>
+  </gridstack>
+</div>
+
+<div class="grid-container"></div>
+
+<div class="text-container">
+  <textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
+  <textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
+</div>
+
+</div>

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

@@ -0,0 +1,25 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should have content', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.pick-info')?.textContent).toContain('Pick a demo to load');
+  });
+});

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

@@ -0,0 +1,208 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { GridStack, GridStackOptions, GridStackWidget } from 'gridstack';
+import { AngularSimpleComponent } from './simple';
+import { AngularNgForTestComponent } from './ngFor';
+import { AngularNgForCmdTestComponent } from './ngFor_cmd';
+
+// NOTE: local testing of file
+// import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from './gridstack.component';
+import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from 'gridstack/dist/angular';
+
+// unique ids sets for each item for correct ngFor updating
+let ids = 1;
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent implements OnInit {
+
+  @ViewChild(AngularSimpleComponent) case0Comp?: AngularSimpleComponent;
+  @ViewChild(AngularNgForTestComponent) case1Comp?: AngularNgForTestComponent;
+  @ViewChild(AngularNgForCmdTestComponent) case2Comp?: AngularNgForCmdTestComponent;
+  @ViewChild(GridstackComponent) gridComp?: GridstackComponent;
+  @ViewChild('origTextArea', {static: true}) origTextEl?: ElementRef<HTMLTextAreaElement>;
+  @ViewChild('textArea', {static: true}) textEl?: ElementRef<HTMLTextAreaElement>;
+
+  // which sample to show
+  public show = 5;
+
+  /** sample grid options and items to load... */
+  public items: GridStackWidget[] = [
+    {x: 0, y: 0, minW: 2},
+    {x: 1, y: 1},
+    {x: 2, y: 2},
+  ];
+  public gridOptions: GridStackOptions = {
+    margin: 5,
+    float: true,
+    minRow: 1,
+  }
+  public gridOptionsFull: NgGridStackOptions = {
+    ...this.gridOptions,
+    children: [{x:0, y:0, selector:'app-a'}, {x:1, y:0, selector:'app-b'}, {x:2, y:0, content:'plain html'}],
+  }
+
+  // nested grid options
+  private subOptions: GridStackOptions = {
+    cellHeight: 50, // should be 50 - top/bottom
+    column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
+    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}];
+  private subChildren: NgGridStackWidget[] = [
+    {x:0, y:0, content: 'regular item'},
+    {x:1, y:0, w:4, h:4, subGridOpts: {children: this.sub1, id:'sub1_grid', class: 'sub1', ...this.subOptions}},
+    {x:5, y:0, w:3, h:4, subGridOpts: {children: this.sub2, id:'sub2_grid', class: 'sub2', ...this.subOptions}},
+  ]
+  public nestedGridOptions: NgGridStackOptions = { // main grid options
+    cellHeight: 50,
+    margin: 5,
+    minRow: 2, // don't collapse when empty
+    disableOneColumnMode: true,
+    acceptWidgets: true,
+    id: 'main',
+    children: this.subChildren
+  };
+  private serializedData?: NgGridStackOptions;
+
+  constructor() {
+    // give them content and unique id to make sure we track them during changes below...
+    [...this.items, ...this.subChildren, ...this.sub1, ...this.sub2].forEach((w: NgGridStackWidget) => {
+      if (!w.selector && !w.subGridOpts) w.content = `item ${ids}`;
+      w.id = String(ids++);
+    });
+  }
+
+  ngOnInit(): void {
+    this.onShow(this.show);
+
+    // TEST
+    // setTimeout(() => {
+    //   if (!this.gridComp) return;
+    //   this.saveGrid();
+    //   // this.clearGrid();
+    //   this.delete();
+    //   this.delete();
+    //   this.loadGrid();
+    //   this.delete();
+    //   this.delete();
+    // }, 500)
+  }
+
+  public onShow(val: number) {
+    this.show = val;
+
+    // set globally our method to create the right widget type
+    if (val < 3) GridStack.addRemoveCB = undefined;
+    else GridStack.addRemoveCB = gsCreateNgComponents;
+
+    // let the switch take affect then load the starting values (since we sometimes save())
+    setTimeout(() => {
+      let data;
+      switch(val) {
+        case 0: data = this.case0Comp?.items; break;
+        case 1: data = this.case1Comp?.items; break;
+        case 2: data = this.case2Comp?.items; break;
+        case 3: data = this.gridComp?.grid?.save(true, true); break;
+        case 4: data = this.items; break;
+        case 5: data = this.gridOptionsFull; break;
+        case 6: data = this.nestedGridOptions; break;
+      }
+      if (this.origTextEl) this.origTextEl.nativeElement.value = JSON.stringify(data, null, '  ');
+    });
+    if (this.textEl) this.textEl.nativeElement.value = '';
+
+    // if (val === 6 && !this.gridComp) {
+    //   const cont: HTMLElement | null = document.querySelector('.grid-container');
+    //   if (cont) GridStack.addGrid(cont, this.serializedData);
+    // }
+  }
+
+  /** called whenever items change size/position/etc.. */
+  public onChange(data: nodesCB) {
+    // TODO: update our TEMPLATE list to match ?
+    // NOTE: no need for dynamic as we can always use grid.save() to get latest layout, or grid.engine.nodes
+    console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
+  }
+
+  public onResizeStop(data: elementCB) {
+    console.log('resizestop ', data.el.gridstackNode);
+  }
+
+  /**
+   * TEST dynamic grid operations - uses grid API directly (since we don't track structure that gets out of sync)
+   */
+  public add() {
+    // TODO: BUG the content doesn't appear until widget is moved around (or another created). Need to force
+    // angular detection changes...
+    this.gridComp?.grid?.addWidget({x:3, y:0, w:2, content:`item ${ids}`, id:String(ids++)});
+  }
+  public delete() {
+    let grid = this.gridComp?.grid;
+    if (!grid) return;
+    let node = grid.engine.nodes[0];
+    // delete any children first before subGrid itself...
+    if (node?.subGrid && node.subGrid.engine.nodes.length) {
+      grid = node.subGrid;
+      node = grid.engine.nodes[0];
+    }
+    if (node) grid.removeWidget(node.el!);
+  }
+  public modify() {
+    this.gridComp?.grid?.update(this.gridComp?.grid.engine.nodes[0]?.el!, {w:3})
+  }
+  public newLayout() {
+    this.gridComp?.grid?.load([
+      {x:0, y:1, id:'1', minW:1, w:1}, // new size/constrain
+      {x:1, y:1, id:'2'},
+      // {x:2, y:1, id:'3'}, // delete item
+      {x:3, y:0, w:2, content:'new item'}, // new item
+    ]);
+  }
+
+  /**
+   * ngFor case: TEST TEMPLATE operations - NOT recommended unless you have no GS creating/re-parenting
+   */
+  public addNgFor() {
+    // 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:2, content:`item ${ids}`, id:String(ids++)});
+  }
+  public deleteNgFor() {
+    this.items.pop();
+  }
+  public modifyNgFor() {
+    // 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;
+    const gridItem = this.gridComp?.gridstackItems?.get(0);
+    if (gridItem) gridItem.options = {w:3};
+  }
+  public newLayoutNgFor() {
+    this.items = [
+      {x:0, y:1, id:'1', minW:1, w:1}, // new size/constrain
+      {x:1, y:1, id:'2'},
+      // {x:2, y:1, id:'3'}, // delete item
+      {x:3, y:0, w:2, content:'new item'}, // new item
+    ];
+  }
+  public clearGrid() {
+    if (!this.gridComp) return;
+    this.gridComp.grid?.removeAll(true);
+  }
+  public saveGrid() {
+    this.serializedData = this.gridComp?.grid?.save(false, true) as GridStackOptions || ''; // no content, full options
+    if (this.textEl) this.textEl.nativeElement.value = JSON.stringify(this.serializedData, null, '  ');
+  }
+  public loadGrid() {
+    if (!this.gridComp) return;
+    GridStack.addGrid(this.gridComp.el, this.serializedData);
+  }
+
+  // ngFor TEMPLATE unique node id to have correct match between our items used and GS
+  public identify(index: number, w: GridStackWidget) {
+    return w.id; // or use index if no id is set and you only modify at the end...
+  }
+}

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

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { AngularNgForTestComponent } from './ngFor';
+import { AngularNgForCmdTestComponent } from './ngFor_cmd';
+import { AngularSimpleComponent } from './simple';
+import { AComponent, BComponent, CComponent } from './dummy.component';
+
+// local testing
+// import { GridstackModule } from './gridstack.module';
+// import { GridstackComponent } from './gridstack.component';
+import { GridstackModule, GridstackComponent } from 'gridstack/dist/angular';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    GridstackModule,
+  ],
+  declarations: [
+      AngularNgForCmdTestComponent,
+      AngularNgForTestComponent,
+      AngularSimpleComponent,
+      AppComponent,
+      AComponent,
+      BComponent,
+      CComponent,
+  ],
+  exports: [
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+  constructor() {
+    // register all our dynamic components created in the grid
+    GridstackComponent.addComponentToSelectorType([AComponent, BComponent, CComponent]);
+  }
+}

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

@@ -0,0 +1,35 @@
+/**
+ * gridstack.component.ts 8.2.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+
+// dummy testing component that will be grid items content
+
+import { Component, OnDestroy, Input } from '@angular/core';
+import { BaseWidget, NgCompInputs } from 'gridstack/dist/angular';
+
+@Component({
+  selector: 'app-a',
+  template: 'Comp A {{text}}',
+})
+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; }
+  ngOnDestroy() {
+    console.log('Comp A destroyed'); // test to make sure cleanup happens
+  }
+}
+
+@Component({
+  selector: 'app-b',
+  template: 'Comp B',
+})
+export class BComponent extends BaseWidget {
+}
+
+@Component({
+  selector: 'app-c',
+  template: 'Comp C',
+})
+export class CComponent extends BaseWidget {
+}

package/angular/projects/demo/src/app/ngFor.ts

@@ -0,0 +1,131 @@
+/**
+ * Example using Angular ngFor to loop through items and create DOM items
+ */
+
+import { Component, AfterViewInit, Input, ViewChildren, QueryList, ElementRef } from '@angular/core';
+import { GridItemHTMLElement, GridStack, GridStackNode, GridStackWidget, Utils } from 'gridstack';
+
+// unique ids sets for each item for correct ngFor updating
+let ids = 1;
+
+@Component({
+  selector: "angular-ng-for-test",
+  template: `
+    <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)="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)
+      NOTE: this example is NOT complete as there are many more properties than listed (minW, maxW, etc....)
+      -->
+      <div *ngFor="let n of items; trackBy: identify"
+        class="grid-stack-item"
+        [attr.gs-id]="n.id"
+        [attr.gs-x]="n.x"
+        [attr.gs-y]="n.y"
+        [attr.gs-w]="n.w"
+        [attr.gs-h]="n.h"
+        #gridStackItem
+      >
+        <div class="grid-stack-item-content">item {{ n.id }}</div>
+      </div>
+    </div>
+  `,
+  // gridstack.min.css and other custom styles should be included in global styles.scss or here
+})
+export class AngularNgForTestComponent implements AfterViewInit {
+  /** list of HTML items that we track to know when the DOM has been updated to make/remove GS widgets */
+  @ViewChildren("gridStackItem") gridstackItems!: QueryList<ElementRef<GridItemHTMLElement>>;
+
+  /** set the items to display. */
+  @Input() public set items(list: GridStackWidget[]) {
+    this._items = list || [];
+    this._items.forEach(w => w.id = w.id || String(ids++)); // make sure a unique id is generated for correct ngFor loop update
+  }
+  public get items(): GridStackWidget[] { return this._items}
+
+  private grid!: GridStack;
+  public _items!: GridStackWidget[];
+
+  constructor() {
+    this.items = [
+      {x: 0, y: 0},
+      {x: 1, y: 1},
+      {x: 2, y: 2},
+    ];
+  }
+
+  // wait until after DOM is ready to init gridstack - can't be ngOnInit() as angular ngFor needs to run first!
+  public ngAfterViewInit() {
+    this.grid = GridStack.init({
+      margin: 5,
+      float: true,
+    })
+    .on('change added', (event: Event, nodes: GridStackNode[]) => this.onChange(nodes));
+
+    // sync initial actual valued rendered (in case init() had to merge conflicts)
+    this.onChange();
+
+    /**
+     * this is called when the list of items changes - get a list of nodes and
+     * update the layout accordingly (which will take care of adding/removing items changed by Angular)
+     */
+    this.gridstackItems.changes.subscribe(() => {
+      const layout: GridStackWidget[] = [];
+      this.gridstackItems.forEach(ref => {
+        const n = ref.nativeElement.gridstackNode || this.grid.makeWidget(ref.nativeElement).gridstackNode;
+        if (n) layout.push(n);
+      });
+      this.grid.load(layout); // efficient that does diffs only
+    })
+  }
+
+  /** Optional: called when given widgets are changed (moved/resized/added) - update our list to match.
+   * Note this is not strictly necessary as demo works without this
+   */
+  public onChange(list = this.grid.engine.nodes) {
+    setTimeout(() => // prevent new 'added' items from ExpressionChangedAfterItHasBeenCheckedError. TODO: find cleaner way to sync outside Angular change detection ?
+      list.forEach(n => {
+        const item = this._items.find(i => i.id === n.id);
+        if (item) Utils.copyPos(item, n);
+      })
+    , 0);
+  }
+
+  /**
+   * CRUD operations
+   */
+  public add() {
+    // new array isn't required as Angular seem to detect changes to content
+    // this.items = [...this.items, { x:3, y:0, w:3, id:String(ids++) }];
+    this.items.push({ x:3, y:0, w:3, id:String(ids++) });
+  }
+
+  public delete() {
+    this.items.pop();
+  }
+
+  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;
+    const n = this.grid.engine.nodes[0];
+    if (n?.el) this.grid.update(n.el, {w:3});
+  }
+
+  public newLayout() {
+    this.items = [ // test updating existing and creating new one
+      {x:0, y:1, id:'1'},
+      {x:1, y:1, id:'2'},
+      // {x:2, y:1, id:3}, // delete item
+      {x:3, y:0, w:3}, // new item
+    ];
+  }
+
+  // ngFor unique node id to have correct match between our items used and GS
+  identify(index: number, w: GridStackWidget) {
+    return w.id;
+  }
+}