gridstack 8.1.0 → 8.1.2

package/README.md

@@ -147,8 +147,8 @@ GridStack no longer requires external dependencies as of v1.0.0 (lodash was remo
 
 search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
 
-- **Angular**: we now ship out of the box with Angular wrapper components - see <a href="https://github.com/gridstack/gridstack.js/tree/master/demo/angular/src/app" target="_blank">Angular Demo</a>.
-- **Angular9**: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance so recommend for **concept ONLY if you wish to use directive instead**.
+- **Angular**: we now ship out of the box with Angular wrapper components - see <a href="https://github.com/gridstack/gridstack.js/tree/master/angular" target="_blank">Angular Component</a>.
+- **Angular9**: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance so recommend for **concept ONLY if you wish to use directive instead**. teh code has been vented as I use components.
 - **AngularJS**: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
 - **Ember**: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
 - **knockout**: see [demo](https://gridstackjs.com/demo/knockout.html) using component, but check [custom bindings ticket](https://github.com/gridstack/gridstack.js/issues/465) which is likely better approach.
@@ -219,56 +219,44 @@ See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.htm
 
 If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[gs-w="X"]` and `.grid-stack-item[gs-x="X"]`.
 
-For instance for 3-column grid you need to rewrite CSS to be:
+For instance for 4-column grid you need CSS to be:
 
 ```css
-.grid-stack-item[gs-w="3"]  { width: 100% }
-.grid-stack-item[gs-w="2"]  { width: 66.67% }
-.grid-stack-item[gs-w="1"]  { width: 33.33% }
-
-.grid-stack-item[gs-x="2"]  { left: 66.67% }
-.grid-stack-item[gs-x="1"]  { left: 33.33% }
-```
-
-For 4-column grid it should be:
-
-```css
-.grid-stack-item[gs-w="4"]  { width: 100% }
-.grid-stack-item[gs-w="3"]  { width: 75% }
-.grid-stack-item[gs-w="2"]  { width: 50% }
-.grid-stack-item[gs-w="1"]  { width: 25% }
-
-.grid-stack-item[gs-x="3"]  { left: 75% }
-.grid-stack-item[gs-x="2"]  { left: 50% }
-.grid-stack-item[gs-x="1"]  { left: 25% }
+.gs-4 > .grid-stack-item[gs-x="1"]  { left: 25% }
+.gs-4 > .grid-stack-item[gs-x="2"]  { left: 50% }
+.gs-4 > .grid-stack-item[gs-x="3"]  { left: 75% }
+
+.gs-4 > .grid-stack-item { width: 25% }
+.gs-4 > .grid-stack-item[gs-w="2"]  { width: 50% }
+.gs-4 > .grid-stack-item[gs-w="3"]  { width: 75% }
+.gs-4 > .grid-stack-item[gs-w="4"]  { width: 100% }
 ```
 
-and so on.
-
-Better yet, here is a SASS code snippet, you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
+Better yet, here is a SCSS code snippet, you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
 
-```sass
-$columns: 12;
+```scss
+$columns: 20;
 @function fixed($float) {
-  @return calc(round($float * 100) / 100); // total 4 digits being %
+  @return round($float * 1000) / 1000; // total 2+3 digits being %
 }
-.grid-stack-#{$columns} > .grid-stack-item {
+.gs-#{$columns} > .grid-stack-item {
 
-  min-width: fixed(calc(100% / $columns));
+  width: fixed(100% / $columns);
 
   @for $i from 1 through $columns - 1 {
-    &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
-    &[gs-w='#{$i+1}'] { width: fixed(calc(100% / $columns) * ($i+1)); }
+    &[gs-x='#{$i}'] { left: fixed((100% / $columns) * $i); }
+    &[gs-w='#{$i+1}'] { width: fixed((100% / $columns) * ($i+1)); }
   }
 }
 ```
 
-you can also use the SASS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns.
+you can also use the SCSS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns.
 
 Sample gulp command for 30 columns:
 ```js
 gulp.src('node_modules/gridstack/dist/src/gridstack-extra.scss')
-        .pipe(replace('$gridstack-columns: 11 !default;','$gridstack-columns: 30;'))
+        .pipe(replace('$start: 2 !default;','$start: 30;'))
+        .pipe(replace('$end: 11 !default;','$end: 30;'))
         .pipe(sass({outputStyle: 'compressed'}))
         .pipe(rename({extname: '.min.css'}))
         .pipe(gulp.dest('dist/css'))
@@ -449,11 +437,11 @@ New addition, no API breakage per say. See release notes about creating sub-grid
 ## Migrating to v8
 
 Possible breaking change if you use nested grid JSON format, or original Angular wrapper, or relied on specific CSS paths. Also target is now ES2020 (see release notes).
-* `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts` rename
-* We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (was `subGrid` with both types which is error prone)
+* `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts` rename. We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (was both types which is error prone)
 * `GridStackOptions.addRemoveCB` -> `GridStack.addRemoveCB` is now global instead of grid option
-* removed `GridStackOptions.dragInOptions` since `setupDragIn()`has it replaced since 4.0
+* removed `GridStackOptions.dragInOptions` since `GridStack.setupDragIn()` has it replaced since 4.0
 * remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead
+* CSS rules removed `.grid-stack` prefix for anything already gs based, 12 column (default) now uses `.gs-12`, extra.css is less than 1/4th it original size!, `gs-min|max_w|h` attribute no longer written (but read)
 
 # jQuery Application
 
@@ -501,4 +489,4 @@ View our change log [here](https://github.com/gridstack/gridstack.js/tree/master
 
 # The Team
 
-gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny) and [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.
+gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny), before that [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.

package/angular/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/angular/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/angular/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/angular/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/{dist/ng → angular}/README.md

@@ -1,154 +1,170 @@
-# Angular wrapper
-
-The Angular [wrapper component](./gridstack.component.ts) <gridstack> is a better way to use Gridstack, but alternative raw [ngFor](./ngFor.ts) or [simple](./simple.ts) demos are also given.
-
-# Dynamic grid items
-this is the recommended way if you are going to have multiple grids (alow drag&drop between) or drag from toolbar to create items, or drag to remove items, etc...
-
-I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
-
-HTML 
-```html
-<gridstack [options]="gridOptions">
-</gridstack>
-```
-Code
-```ts
-import { GridStack, GridStackOptions } from 'gridstack';
-import { gsCreateNgComponents } from 'gridstack/dist/ng/gridstack.component';
-
-constructor() {
-  // use the built in component creation code
-  GridStack.addRemoveCB = gsCreateNgComponents;
-}
-
-// sample grid options and items to load...
-public gridOptions: GridStackOptions = {
-  margin: 5,
-  float: true,
-  children: [ // or call load()/addWidget() with same data
-    {x:0, y:0, minW:2, content:'Item 1'},
-    {x:1, y:1, content:'Item 2'},
-    {x:2, y:2, content:'Item 3'},
-  ]
-}
-```
-
-# More Complete example
-In this example will your actual custom angular components inside each grid item (instead of dummy html content)
-
-HTML 
-```html
-<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
-  <div empty-content>message when grid is empty</div>
-</gridstack>
-```
-
-Code
-```ts
-import { Component } from '@angular/core';
-import { GridStack, GridStackOptions } from 'gridstack';
-import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB } from 'gridstack/dist/ng/gridstack.component';
-
-// some custom components
-@Component({
-  selector: 'app-a',
-  template: 'Comp A', // your real ng content goes in each component instead...
-})
-export class AComponent {
-}
-
-@Component({
-  selector: 'app-b',
-  template: 'Comp B',
-})
-export class BComponent {
-}
-
-// .... in your module for example
-constructor() {
-  // register all our dynamic components created in the grid
-  GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
-  // set globally our method to create the right widget type
-  GridStack.addRemoveCB = gsCreateNgComponents;
-  GridStack.saveCB = gsSaveAdditionalNgInfo;
-}
-
-// and now our content will look like instead of dummy html content
-public gridOptions: NgGridStackOptions = {
-  margin: 5,
-  float: true,
-  minRow: 1, // make space for empty message
-  children: [ // or call load()/addWidget() with same data
-    {x:0, y:0, minW:2, type:'app-a'},
-    {x:1, y:1, type:'app-b'},
-    {x:2, y:2, content:'plain html content'},
-  ]
-}
-
-// called whenever items change size/position/etc.. see other events
-public onChange(data: nodesCB) {
-  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
-}
-```
-
-# ngFor with wrapper
-For simple case where you control the children creation (gridstack doesn't do create or re-parenting)
-
-HTML 
-```html
-<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
-  <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
-    Item {{n.id}}
-  </gridstack-item>
-</gridstack>
-```
-
-Code
-```javascript
-import { GridStackOptions, GridStackWidget } from 'gridstack';
-import { nodesCB } from 'gridstack/dist/ng/gridstack.component';
-
-/** sample grid options and items to load... */
-public gridOptions: GridStackOptions = {
-  margin: 5,
-  float: true,
-}
-public items: GridStackWidget[] = [
-  {x:0, y:0, minW:2, id:'1'}, // must have unique id used for trackBy
-  {x:1, y:1, id:'2'},
-  {x:2, y:2, id:'3'},
-];
-
-// called whenever items change size/position/etc..
-public onChange(data: nodesCB) {
-  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
-}
-
-// ngFor 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...
-}
-```
-
-## Demo
-You can see a fuller example at [app.component.ts](https://github.com/gridstack/gridstack.js/blob/master/demo/angular/src/app/app.component.ts)
-
-to build the demo, go to demo/angular and run `yarn` + `yarn start` and Navigate to `http://localhost:4200/` 
-
-## Caveats 
-
- - This wrapper needs: 
-    - gridstack v8.0+ to run as it needs the latest changes (use older version to match gs versions)
-    - Angular 13+ for dynamic createComponent() API
- - Code in now shipped starting with v8.0+ in dist/ng for people to use directly!
-
- ## *ngFor Caveats
- - 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 update the `GridstackItemComponent.option` directly - see [modifyNgFor()](./app.component.ts#L174) example.
- - 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.
-
-
- Would appreciate getting help doing the same for React and Vue (2 other popular frameworks)
- 
- -Alain
+# Angular wrapper
+
+The Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts) <gridstack> is a better way to use Gridstack, but alternative raw [ngFor](projects/demo/src/app/ngFor.ts) or [simple](projects/demo/src/app/simple.ts) demos are also given.
+
+# Dynamic grid items
+this is the recommended way if you are going to have multiple grids (alow drag&drop between) or drag from toolbar to create items, or drag to remove items, etc...
+
+I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
+
+HTML 
+```html
+<gridstack [options]="gridOptions">
+</gridstack>
+```
+
+CSS
+```css
+@import "gridstack/dist/gridstack.min.css";
+
+.grid-stack {
+  background: #FAFAD2;
+}
+.grid-stack-item-content {
+  text-align: center;
+  background-color: #18bc9c;
+}
+```
+
+in your module Code
+```ts
+import { GridstackModule } from 'gridstack/dist/angular';
+
+@NgModule({
+  imports: [GridstackModule, ...]
+  ...
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+Component Code
+```ts
+import { GridStackOptions } from 'gridstack';
+
+// sample grid options + items to load...
+public gridOptions: GridStackOptions = {
+  margin: 5,
+  float: true,
+  children: [ // or call load()/addWidget() with same data
+    {x:0, y:0, minW:2, content:'Item 1'},
+    {x:1, y:1, content:'Item 2'},
+    {x:2, y:2, content:'Item 3'},
+  ]
+}
+```
+
+# More Complete example
+In this example (build on previous one) will use your actual custom angular components inside each grid item (instead of dummy html content)
+
+HTML 
+```html
+<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
+  <div empty-content>message when grid is empty</div>
+</gridstack>
+```
+
+Code
+```ts
+import { Component } from '@angular/core';
+import { GridStack, GridStackOptions } from 'gridstack';
+import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB } from 'gridstack/dist/angular';
+
+// some custom components
+@Component({
+  selector: 'app-a',
+  template: 'Comp A', // your real ng content goes in each component instead...
+})
+export class AComponent {
+}
+
+@Component({
+  selector: 'app-b',
+  template: 'Comp B',
+})
+export class BComponent {
+}
+
+// .... in your module for example
+constructor() {
+  // register all our dynamic components types created by the grid
+  GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
+}
+
+// now our content will use Components instead of dummy html content
+public gridOptions: NgGridStackOptions = {
+  margin: 5,
+  float: true,
+  minRow: 1, // make space for empty message
+  children: [ // or call load()/addWidget() with same data
+    {x:0, y:0, minW:2, type:'app-a'},
+    {x:1, y:1, type:'app-b'},
+    {x:2, y:2, content:'plain html content'},
+  ]
+}
+
+// called whenever items change size/position/etc.. see other events
+public onChange(data: nodesCB) {
+  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
+}
+```
+
+# ngFor with wrapper
+For simple case where you control the children creation (gridstack doesn't do create or re-parenting)
+
+HTML 
+```html
+<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
+  <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
+    Item {{n.id}}
+  </gridstack-item>
+</gridstack>
+```
+
+Code
+```javascript
+import { GridStackOptions, GridStackWidget } from 'gridstack';
+import { nodesCB } from 'gridstack/dist/angular';
+
+/** sample grid options and items to load... */
+public gridOptions: GridStackOptions = {
+  margin: 5,
+  float: true,
+}
+public items: GridStackWidget[] = [
+  {x:0, y:0, minW:2, id:'1'}, // must have unique id used for trackBy
+  {x:1, y:1, id:'2'},
+  {x:2, y:2, id:'3'},
+];
+
+// called whenever items change size/position/etc..
+public onChange(data: nodesCB) {
+  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
+}
+
+// ngFor 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...
+}
+```
+
+## Demo
+You can see a fuller example at [app.component.ts](src/app/app.component.ts)
+
+to build the demo, go to angular/projects/demo and run `yarn` + `yarn start` and navigate to `http://localhost:4200/` 
+
+Code now shipped starting with v8.1.2+ in `dist/angular` for people to use directly! (source code under `dist/angular/src`)
+## Caveats 
+
+ - This wrapper needs: 
+    - gridstack v8 to run as it needs the latest changes (use older version that matches GS versions)
+    - Angular 13+ for dynamic createComponent() API
+
+ ## *ngFor Caveats
+ - 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 update the `GridstackItemComponent.option` directly - see [modifyNgFor()](src/app/app.component.ts#L174) example.
+ - 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.
+
+ Would appreciate getting help doing the same for React and Vue (2 other popular frameworks)
+ 
+ -Alain

package/angular/README_build.md

@@ -0,0 +1,27 @@
+# GridstackLib
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.10.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.