gridstack 8.1.0 → 8.1.2

package/angular/angular.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "lib": {
+      "projectType": "library",
+      "root": "projects/lib",
+      "sourceRoot": "projects/lib/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/lib/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/lib/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/lib/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/lib/src/test.ts",
+            "tsConfig": "projects/lib/tsconfig.spec.json",
+            "karmaConfig": "projects/lib/karma.conf.js"
+          }
+        }
+      }
+    },
+    "demo": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/demo",
+      "sourceRoot": "projects/demo/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "projects/demo/src/index.html",
+            "main": "projects/demo/src/main.ts",
+            "polyfills": "projects/demo/src/polyfills.ts",
+            "tsConfig": "projects/demo/tsconfig.app.json",
+            "assets": [
+              "projects/demo/src/favicon.ico",
+              "projects/demo/src/assets"
+            ],
+            "styles": [
+              "projects/demo/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/demo/src/environments/environment.ts",
+                  "with": "projects/demo/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            },
+            "development": {
+              "browserTarget": "demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/demo/src/test.ts",
+            "polyfills": "projects/demo/src/polyfills.ts",
+            "tsConfig": "projects/demo/tsconfig.spec.json",
+            "karmaConfig": "projects/demo/karma.conf.js",
+            "assets": [
+              "projects/demo/src/favicon.ico",
+              "projects/demo/src/assets"
+            ],
+            "styles": [
+              "projects/demo/src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

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.1",
+    "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, but normal include would be 'gridstack/dist/angular'
+import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from '../../../../../dist/angular';
+// 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 = 6;
+
+  /** 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: GridStackOptions = {
+    ...this.gridOptions,
+    children: this.items,
+  }
+
+  // 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, type:'app-a'}, {x:1, y:0, type:'app-b'}, {x:2, y:0, type:'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.type && !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,38 @@
+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 copy but user would use 'gridstack/dist/angular'
+import { GridstackModule, GridstackComponent } from '../../../../../dist/angular';
+// 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,29 @@
+/**
+ * gridstack.component.ts 8.1.2
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+
+// dummy testing component that will be grid items content
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-a',
+  template: 'Comp A',
+})
+export class AComponent {
+}
+
+@Component({
+  selector: 'app-b',
+  template: 'Comp B',
+})
+export class BComponent {
+}
+
+@Component({
+  selector: 'app-c',
+  template: 'Comp C',
+})
+export class CComponent {
+}