gridstack - npm Package Compare versions

Comparing version 7.2.3 to 7.3.0

dist/angular/gridstack-item.component.ts

 /**
- * gridstack-item.component.ts 7.2.3
+ * gridstack-item.component.ts 7.3.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 
-import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewContainerRef, OnDestroy } from '@angular/core';
 import { GridItemHTMLElement, GridStackNode } from 'gridstack';
 
+/** store element to Ng Class pointer back */
+export interface GridItemCompHTMLElement extends GridItemHTMLElement {
+  _gridItemComp?: GridstackItemComponent;
+}
+
 /**
@@ -16,4 +21,7 @@ * HTML Component Wrapper for gridstack items, in combination with GridstackComponent for parent grid
     <div class="grid-stack-item-content">
+      <!-- this is where you would create the right component based on some internal type or id. doing .content for demo purpose -->
       {{options.content}}
       <ng-content></ng-content>
+      <!-- where dynamic items go (like sub-grids) -->
+      <ng-template #container></ng-template>
     </div>`,
@@ -25,4 +33,7 @@ styles: [`
 })
-export class GridstackItemComponent {
+export class GridstackItemComponent implements OnDestroy {
 
+  /** container to append items dynamically */
+  @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
+
   /** list of options for creating/updating this item */
@@ -47,3 +58,3 @@ @Input() public set options(val: GridStackNode) {
   /** return the native element that contains grid specific fields as well */
-  public get el(): GridItemHTMLElement { return this.elementRef.nativeElement; }
+  public get el(): GridItemCompHTMLElement { return this.elementRef.nativeElement; }
 
@@ -56,3 +67,8 @@ /** clears the initial options now that we've built */
   constructor(private readonly elementRef: ElementRef<GridItemHTMLElement>) {
+    this.el._gridItemComp = this;
   }
+
+  public ngOnDestroy(): void {
+    delete this.el._gridItemComp;
+  }
 }

dist/angular/gridstack.component.ts

 /**
- * gridstack.component.ts 7.2.3
+ * gridstack.component.ts 7.3.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -10,5 +10,5 @@ */
 import { takeUntil } from 'rxjs/operators';
-import { AddRemoveFcn, GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
+import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
 
-import { GridstackItemComponent } from './gridstack-item.component';
+import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
 
@@ -21,2 +21,7 @@ /** events handlers emitters signature for different events */
 
+/** store element to Ng Class pointer back */
+export interface GridCompHTMLElement extends GridHTMLElement {
+  _gridComp?: GridstackComponent;
+}
+
 /**
@@ -76,3 +81,3 @@ * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
   /** return the native element that contains grid specific fields as well */
-  public get el(): GridHTMLElement { return this.elementRef.nativeElement; }
+  public get el(): GridCompHTMLElement { return this.elementRef.nativeElement; }
 
@@ -85,9 +90,9 @@ /** return the GridStack class */
   private loaded?: boolean;
-  private outsideAddRemove?: AddRemoveFcn;
   private ngUnsubscribe: Subject<void> = new Subject();
 
   constructor(
-    private readonly ngZone: NgZone,
-    private readonly elementRef: ElementRef<GridHTMLElement>,
+    private readonly zone: NgZone,
+    private readonly elementRef: ElementRef<GridCompHTMLElement>,
   ) {
+    this.el._gridComp = this;
   }
@@ -98,4 +103,3 @@
     const opts: GridStackOptions = this._options || {};
-    if (opts.addRemoveCB) this.outsideAddRemove = opts.addRemoveCB;
-    opts.addRemoveCB = this._addRemoveCB.bind(this);
+    opts.addRemoveCB = GridstackComponent._addRemoveCB;
 
@@ -110,3 +114,3 @@ // init ourself before any template children are created since we track them below anyway - no need to double create+update widgets
   public ngAfterContentInit(): void {
-    this.ngZone.runOutsideAngular(() => {
+    this.zone.runOutsideAngular(() => {
       // track whenever the children list changes and update the layout...
@@ -127,2 +131,3 @@ this.gridstackItems?.changes
     delete this._grid;
+    delete this.el._gridComp;
   }
@@ -154,27 +159,35 @@
     grid
-    .on('added', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => { this.checkEmpty(); this.addedCB.emit({event, nodes}); }))
-    .on('change', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => this.changeCB.emit({event, nodes})))
-    .on('disable', (event: Event) => this.ngZone.run(() => this.disableCB.emit({event})))
-    .on('drag', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragCB.emit({event, el})))
-    .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragStartCB.emit({event, el})))
-    .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragStopCB.emit({event, el})))
-    .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.ngZone.run(() => this.droppedCB.emit({event, previousNode, newNode})))
-    .on('enable', (event: Event) => this.ngZone.run(() => this.enableCB.emit({event})))
-    .on('removed', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => { this.checkEmpty(); this.removedCB.emit({event, nodes}); }))
-    .on('resize', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizeCB.emit({event, el})))
-    .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizeStartCB.emit({event, el})))
-    .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizeStopCB.emit({event, el})))
+    .on('added', (event: Event, nodes: GridStackNode[]) => this.zone.run(() => { this.checkEmpty(); this.addedCB.emit({event, nodes}); }))
+    .on('change', (event: Event, nodes: GridStackNode[]) => this.zone.run(() => this.changeCB.emit({event, nodes})))
+    .on('disable', (event: Event) => this.zone.run(() => this.disableCB.emit({event})))
+    .on('drag', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.dragCB.emit({event, el})))
+    .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.dragStartCB.emit({event, el})))
+    .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.dragStopCB.emit({event, el})))
+    .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.zone.run(() => this.droppedCB.emit({event, previousNode, newNode})))
+    .on('enable', (event: Event) => this.zone.run(() => this.enableCB.emit({event})))
+    .on('removed', (event: Event, nodes: GridStackNode[]) => this.zone.run(() => { this.checkEmpty(); this.removedCB.emit({event, nodes}); }))
+    .on('resize', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.resizeCB.emit({event, el})))
+    .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.resizeStartCB.emit({event, el})))
+    .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.resizeStopCB.emit({event, el})))
   }
 
   /** called by GS when a new item needs to be created, which we do as a Angular component, or deleted (skip) */
-  private _addRemoveCB(g: GridStack, w: GridStackWidget, add: boolean): HTMLElement | undefined {
+  private static _addRemoveCB(parent: GridCompHTMLElement | HTMLElement, w: GridStackWidget | GridStackOptions, add: boolean, isGrid: boolean): HTMLElement | undefined {
     if (add) {
-      if (!this.container) return;
+      if (!parent) return;
       // create the grid item dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
-      const gridItem = this.container.createComponent(GridstackItemComponent)?.instance;
-      return gridItem?.el;
+      if (isGrid) {
+        const gridItemComp = (parent.parentElement as GridItemCompHTMLElement)._gridItemComp;
+        const grid = gridItemComp?.container?.createComponent(GridstackComponent)?.instance;
+        if (grid) grid.options = w as GridStackOptions;
+        return grid?.el;
+      } else {
+        // TODO: use GridStackWidget to define what type of component to create as child, or do it in GridstackItemComponent template...
+        const gridComp = (parent as GridCompHTMLElement)._gridComp;
+        const gridItem = gridComp?.container?.createComponent(GridstackItemComponent)?.instance;
+        return gridItem?.el;
+      }
     }
-    // if (this.outsideAddRemove) this.outsideAddRemove(g, w, add); // TODO: ?
     return;
   }
 }

dist/dd-base-impl.d.ts

 /**
- * dd-base-impl.ts 7.2.3
+ * dd-base-impl.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-base-impl.js

 "use strict";
 /**
- * dd-base-impl.ts 7.2.3
+ * dd-base-impl.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/dd-draggable.d.ts

 /**
- * dd-draggable.ts 7.2.3
+ * dd-draggable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-draggable.js

 "use strict";
 /**
- * dd-draggable.ts 7.2.3
+ * dd-draggable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -19,4 +19,4 @@ */
         // get the element that is actually supposed to be dragged by
-        let className = option.handle.substring(1);
-        this.dragEl = el.classList.contains(className) ? el : el.querySelector(option.handle) || el;
+        let handleName = option.handle.substring(1);
+        this.dragEl = el.classList.contains(handleName) ? el : el.querySelector(option.handle) || el;
         // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
@@ -91,6 +91,5 @@ this._mouseDown = this._mouseDown.bind(this);
             return true;
+        // REMOVE: why would we get the event if it wasn't for us or child ?
         // make sure we are clicking on a drag handle or child of it...
         // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)
-        //
-        // REMOVE: why would we get the event if it wasn't for us or child ?
         // let className = this.option.handle.substring(1);
@@ -97,0 +96,0 @@ // let el = e.target as HTMLElement;

dist/dd-droppable.d.ts

 /**
- * dd-droppable.ts 7.2.3
+ * dd-droppable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-droppable.js

 "use strict";
 /**
- * dd-droppable.ts 7.2.3
+ * dd-droppable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/dd-element.d.ts

 /**
- * dd-elements.ts 7.2.3
+ * dd-elements.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-element.js

 "use strict";
 /**
- * dd-elements.ts 7.2.3
+ * dd-elements.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/dd-gridstack.d.ts

 /**
- * dd-gridstack.ts 7.2.3
+ * dd-gridstack.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-gridstack.js

 "use strict";
 /**
- * dd-gridstack.ts 7.2.3
+ * dd-gridstack.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/dd-manager.d.ts

 /**
- * dd-manager.ts 7.2.3
+ * dd-manager.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-manager.js

 "use strict";
 /**
- * dd-manager.ts 7.2.3
+ * dd-manager.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/dd-resizable-handle.d.ts

 /**
- * dd-resizable-handle.ts 7.2.3
+ * dd-resizable-handle.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-resizable-handle.js

 "use strict";
 /**
- * dd-resizable-handle.ts 7.2.3
+ * dd-resizable-handle.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/dd-resizable.d.ts

 /**
- * dd-resizable.ts 7.2.3
+ * dd-resizable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-resizable.js

 "use strict";
 /**
- * dd-resizable.ts 7.2.3
+ * dd-resizable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/dd-touch.d.ts

 /**
- * touch.ts 7.2.3
+ * touch.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-touch.js

 "use strict";
 /**
- * touch.ts 7.2.3
+ * touch.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -155,2 +155,3 @@ */
 function pointerdown(e) {
+    // console.log("pointer down")
     e.target.releasePointerCapture(e.pointerId); // <- Important!
@@ -157,0 +158,0 @@ }

dist/es5/dd-base-impl.d.ts

 /**
- * dd-base-impl.ts 7.2.3
+ * dd-base-impl.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-base-impl.js

 "use strict";
 /**
- * dd-base-impl.ts 7.2.3
+ * dd-base-impl.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-draggable.d.ts

 /**
- * dd-draggable.ts 7.2.3
+ * dd-draggable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-draggable.js

 "use strict";
 /**
- * dd-draggable.ts 7.2.3
+ * dd-draggable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -34,4 +34,4 @@ */
         // get the element that is actually supposed to be dragged by
-        var className = option.handle.substring(1);
-        _this.dragEl = el.classList.contains(className) ? el : el.querySelector(option.handle) || el;
+        var handleName = option.handle.substring(1);
+        _this.dragEl = el.classList.contains(handleName) ? el : el.querySelector(option.handle) || el;
         // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
@@ -109,6 +109,5 @@ _this._mouseDown = _this._mouseDown.bind(_this);
             return true;
+        // REMOVE: why would we get the event if it wasn't for us or child ?
         // make sure we are clicking on a drag handle or child of it...
         // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)
-        //
-        // REMOVE: why would we get the event if it wasn't for us or child ?
         // let className = this.option.handle.substring(1);
@@ -115,0 +114,0 @@ // let el = e.target as HTMLElement;

dist/es5/dd-droppable.d.ts

 /**
- * dd-droppable.ts 7.2.3
+ * dd-droppable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-droppable.js

 "use strict";
 /**
- * dd-droppable.ts 7.2.3
+ * dd-droppable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-element.d.ts

 /**
- * dd-elements.ts 7.2.3
+ * dd-elements.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-element.js

 "use strict";
 /**
- * dd-elements.ts 7.2.3
+ * dd-elements.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-gridstack.d.ts

 /**
- * dd-gridstack.ts 7.2.3
+ * dd-gridstack.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-gridstack.js

 "use strict";
 /**
- * dd-gridstack.ts 7.2.3
+ * dd-gridstack.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-manager.d.ts

 /**
- * dd-manager.ts 7.2.3
+ * dd-manager.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-manager.js

 "use strict";
 /**
- * dd-manager.ts 7.2.3
+ * dd-manager.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-resizable-handle.d.ts

 /**
- * dd-resizable-handle.ts 7.2.3
+ * dd-resizable-handle.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-resizable-handle.js

 "use strict";
 /**
- * dd-resizable-handle.ts 7.2.3
+ * dd-resizable-handle.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-resizable.d.ts

 /**
- * dd-resizable.ts 7.2.3
+ * dd-resizable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-resizable.js

 "use strict";
 /**
- * dd-resizable.ts 7.2.3
+ * dd-resizable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-touch.d.ts

 /**
- * touch.ts 7.2.3
+ * touch.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-touch.js

 "use strict";
 /**
- * touch.ts 7.2.3
+ * touch.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -158,2 +158,3 @@ */
 function pointerdown(e) {
+    // console.log("pointer down")
     e.target.releasePointerCapture(e.pointerId); // <- Important!
@@ -160,0 +161,0 @@ }

dist/es5/gridstack-all.js.LICENSE.txt

 /*!
- * GridStack 7.2.3
+ * GridStack 7.3.0
  * https://gridstackjs.com/
@@ -4,0 +4,0 @@ *

dist/es5/gridstack-engine.d.ts

 /**
- * gridstack-engine.ts 7.2.3
+ * gridstack-engine.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -61,4 +61,6 @@ */
     getDirtyNodes(verify?: boolean): GridStackNode[];
-    /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found */
-    findEmptyPosition(node: GridStackNode): boolean;
+    /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found.
+     * optionally you can pass your own existing node list and column count, otherwise defaults to that engine data.
+     */
+    findEmptyPosition(node: GridStackNode, nodeList?: GridStackNode[], column?: number): boolean;
     /** call to add the given node to our list, fixing collision and re-packing */
@@ -65,0 +67,0 @@ addNode(node: GridStackNode, triggerAddEvent?: boolean): GridStackNode;

dist/es5/gridstack-engine.js

 "use strict";
 /**
- * gridstack-engine.ts 7.2.3
+ * gridstack-engine.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -56,3 +56,3 @@ */
     GridStackEngine.prototype._useEntireRowArea = function (node, nn) {
-        return !this.float && !this._hasLocked && (!node._moving || node._skipDown || nn.y <= node.y);
+        return (!this.float || this.batchMode && !this._prevFloat) && !this._hasLocked && (!node._moving || node._skipDown || nn.y <= node.y);
     };
@@ -407,5 +407,10 @@ /** @internal fix collision on given 'node', going to given new location 'nn', with optional 'collide' node already found.
         var saveOrig = this.column === 1 || node.x + node.w > this.column;
-        if (saveOrig && this.column < 12 && !this._inColumnResize && !node.autoPosition && node._id && this.findCacheLayout(node, 12) === -1) {
+        if (saveOrig && this.column < 12 && !this._inColumnResize && node._id && this.findCacheLayout(node, 12) === -1) {
             var copy = __assign({}, node); // need _id + positions
-            copy.x = Math.min(11, copy.x);
+            if (copy.autoPosition) {
+                delete copy.x;
+                delete copy.y;
+            }
+            else
+                copy.x = Math.min(11, copy.x);
             copy.w = Math.min(12, copy.w);
@@ -501,20 +506,24 @@ this.cacheOneLayout(copy, 12);
     };
-    /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found */
-    GridStackEngine.prototype.findEmptyPosition = function (node) {
-        this.sortNodes();
+    /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found.
+     * optionally you can pass your own existing node list and column count, otherwise defaults to that engine data.
+     */
+    GridStackEngine.prototype.findEmptyPosition = function (node, nodeList, column) {
+        if (nodeList === void 0) { nodeList = this.nodes; }
+        if (column === void 0) { column = this.column; }
+        nodeList = utils_1.Utils.sort(nodeList, -1, column);
         var found = false;
         var _loop_1 = function (i) {
-            var x = i % this_1.column;
-            var y = Math.floor(i / this_1.column);
-            if (x + node.w > this_1.column) {
+            var x = i % column;
+            var y = Math.floor(i / column);
+            if (x + node.w > column) {
                 return "continue";
             }
             var box = { x: x, y: y, w: node.w, h: node.h };
-            if (!this_1.nodes.find(function (n) { return utils_1.Utils.isIntercepted(box, n); })) {
+            if (!nodeList.find(function (n) { return utils_1.Utils.isIntercepted(box, n); })) {
                 node.x = x;
                 node.y = y;
+                delete node.autoPosition;
                 found = true;
             }
         };
-        var this_1 = this;
         for (var i = 0; !found; ++i) {
@@ -890,6 +899,11 @@ _loop_1(i);
                 // still current, use cache info positions
-                nodes[j].x = cacheNode.x;
-                nodes[j].y = cacheNode.y;
-                nodes[j].w = cacheNode.w;
-                newNodes.push(nodes[j]);
+                if (cacheNode.autoPosition || isNaN(cacheNode.x) || isNaN(cacheNode.y)) {
+                    _this.findEmptyPosition(cacheNode, newNodes);
+                }
+                if (!cacheNode.autoPosition) {
+                    nodes[j].x = cacheNode.x;
+                    nodes[j].y = cacheNode.y;
+                    nodes[j].w = cacheNode.w;
+                    newNodes.push(nodes[j]);
+                }
                 nodes.splice(j, 1);
@@ -954,3 +968,8 @@ }
         n._id = n._id || GridStackEngine._idSeq++;
-        var layout = { x: n.x, y: n.y, w: n.w, _id: n._id };
+        var l = { x: n.x, y: n.y, w: n.w, _id: n._id };
+        if (n.autoPosition) {
+            delete l.x;
+            delete l.y;
+            l.autoPosition = true;
+        }
         this._layouts = this._layouts || [];
@@ -960,5 +979,5 @@ this._layouts[column] = this._layouts[column] || [];
         if (index === -1)
-            this._layouts[column].push(layout);
+            this._layouts[column].push(l);
         else
-            this._layouts[column][index] = layout;
+            this._layouts[column][index] = l;
         return this;
@@ -965,0 +984,0 @@ };

dist/es5/gridstack-poly.js

 /**
- * gridstack-poly.ts 7.2.3 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
+ * gridstack-poly.ts 7.3.0 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/gridstack.d.ts

 /*!
- * GridStack 7.2.3
+ * GridStack 7.3.0
  * https://gridstackjs.com/
@@ -4,0 +4,0 @@ *

dist/es5/types.d.ts

 /**
- * types.ts 7.2.3
+ * types.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -27,4 +27,4 @@ */
 export declare type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;
-/** optional function called during load() to callback the user on new added/remove items */
-export declare type AddRemoveFcn = (g: GridStack, w: GridStackWidget, add: boolean) => HTMLElement | undefined;
+/** optional function called during load() to callback the user on new added/remove grid items | grids */
+export declare type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;
 /**
@@ -42,6 +42,8 @@ * Defines the options for a Grid
     /**
-     * callback method use when new items needs to be created or deleted, instead of the default
-     * <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div>
-     * Create: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget().
-     * Delete: the item will be removed from DOM (if not already done)
+     * callback method use when new items|grids needs to be created or deleted, instead of the default
+     * item: <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div>
+     * grid: <div class="grid-stack">grid content...</div>
+     * add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init().
+     * add = false: the item will be removed from DOM (if not already done)
+     * grid = true|false for grid vs grid-items
      */
@@ -126,2 +128,5 @@ addRemoveCB?: AddRemoveFcn;
     minRow?: number;
+    /** If you are using a nonce-based Content Security Policy, pass your nonce here and
+     * GridStack will add it to the <style> elements it creates. */
+    nonce?: string;
     /** minimal width before grid will be shown in one column mode (default?: 768) */
@@ -128,0 +133,0 @@ oneColumnSize?: number;

dist/es5/types.js

 "use strict";
 /**
- * types.ts 7.2.3
+ * types.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/utils.d.ts

 /**
- * utils.ts 7.2.3
+ * utils.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -47,3 +47,5 @@ */
      */
-    static createStylesheet(id: string, parent?: HTMLElement): CSSStyleSheet;
+    static createStylesheet(id: string, parent?: HTMLElement, options?: {
+        nonce?: string;
+    }): CSSStyleSheet;
     /** removed the given stylesheet id */
@@ -50,0 +52,0 @@ static removeStylesheet(id: string): void;

dist/es5/utils.js

 "use strict";
 /**
- * utils.ts 7.2.3
+ * utils.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -158,4 +158,7 @@ */
      */
-    Utils.createStylesheet = function (id, parent) {
+    Utils.createStylesheet = function (id, parent, options) {
         var style = document.createElement('style');
+        var nonce = options === null || options === void 0 ? void 0 : options.nonce;
+        if (nonce)
+            style.nonce = nonce;
         style.setAttribute('type', 'text/css');
@@ -162,0 +165,0 @@ style.setAttribute('gs-style-id', id);

dist/gridstack-all.js.LICENSE.txt

 /*!
- * GridStack 7.2.3
+ * GridStack 7.3.0
  * https://gridstackjs.com/
@@ -4,0 +4,0 @@ *

dist/gridstack-engine.d.ts

 /**
- * gridstack-engine.ts 7.2.3
+ * gridstack-engine.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -61,4 +61,6 @@ */
     getDirtyNodes(verify?: boolean): GridStackNode[];
-    /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found */
-    findEmptyPosition(node: GridStackNode): boolean;
+    /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found.
+     * optionally you can pass your own existing node list and column count, otherwise defaults to that engine data.
+     */
+    findEmptyPosition(node: GridStackNode, nodeList?: GridStackNode[], column?: number): boolean;
     /** call to add the given node to our list, fixing collision and re-packing */
@@ -65,0 +67,0 @@ addNode(node: GridStackNode, triggerAddEvent?: boolean): GridStackNode;

dist/gridstack-engine.js

 "use strict";
 /**
- * gridstack-engine.ts 7.2.3
+ * gridstack-engine.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -43,3 +43,3 @@ */
     _useEntireRowArea(node, nn) {
-        return !this.float && !this._hasLocked && (!node._moving || node._skipDown || nn.y <= node.y);
+        return (!this.float || this.batchMode && !this._prevFloat) && !this._hasLocked && (!node._moving || node._skipDown || nn.y <= node.y);
     }
@@ -382,5 +382,10 @@ /** @internal fix collision on given 'node', going to given new location 'nn', with optional 'collide' node already found.
         const saveOrig = this.column === 1 || node.x + node.w > this.column;
-        if (saveOrig && this.column < 12 && !this._inColumnResize && !node.autoPosition && node._id && this.findCacheLayout(node, 12) === -1) {
+        if (saveOrig && this.column < 12 && !this._inColumnResize && node._id && this.findCacheLayout(node, 12) === -1) {
             let copy = Object.assign({}, node); // need _id + positions
-            copy.x = Math.min(11, copy.x);
+            if (copy.autoPosition) {
+                delete copy.x;
+                delete copy.y;
+            }
+            else
+                copy.x = Math.min(11, copy.x);
             copy.w = Math.min(12, copy.w);
@@ -476,16 +481,19 @@ this.cacheOneLayout(copy, 12);
     }
-    /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found */
-    findEmptyPosition(node) {
-        this.sortNodes();
+    /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found.
+     * optionally you can pass your own existing node list and column count, otherwise defaults to that engine data.
+     */
+    findEmptyPosition(node, nodeList = this.nodes, column = this.column) {
+        nodeList = utils_1.Utils.sort(nodeList, -1, column);
         let found = false;
         for (let i = 0; !found; ++i) {
-            let x = i % this.column;
-            let y = Math.floor(i / this.column);
-            if (x + node.w > this.column) {
+            let x = i % column;
+            let y = Math.floor(i / column);
+            if (x + node.w > column) {
                 continue;
             }
             let box = { x, y, w: node.w, h: node.h };
-            if (!this.nodes.find(n => utils_1.Utils.isIntercepted(box, n))) {
+            if (!nodeList.find(n => utils_1.Utils.isIntercepted(box, n))) {
                 node.x = x;
                 node.y = y;
+                delete node.autoPosition;
                 found = true;
@@ -852,6 +860,11 @@ }
                 // still current, use cache info positions
-                nodes[j].x = cacheNode.x;
-                nodes[j].y = cacheNode.y;
-                nodes[j].w = cacheNode.w;
-                newNodes.push(nodes[j]);
+                if (cacheNode.autoPosition || isNaN(cacheNode.x) || isNaN(cacheNode.y)) {
+                    this.findEmptyPosition(cacheNode, newNodes);
+                }
+                if (!cacheNode.autoPosition) {
+                    nodes[j].x = cacheNode.x;
+                    nodes[j].y = cacheNode.y;
+                    nodes[j].w = cacheNode.w;
+                    newNodes.push(nodes[j]);
+                }
                 nodes.splice(j, 1);
@@ -915,3 +928,8 @@ }
         n._id = n._id || GridStackEngine._idSeq++;
-        let layout = { x: n.x, y: n.y, w: n.w, _id: n._id };
+        let l = { x: n.x, y: n.y, w: n.w, _id: n._id };
+        if (n.autoPosition) {
+            delete l.x;
+            delete l.y;
+            l.autoPosition = true;
+        }
         this._layouts = this._layouts || [];
@@ -921,5 +939,5 @@ this._layouts[column] = this._layouts[column] || [];
         if (index === -1)
-            this._layouts[column].push(layout);
+            this._layouts[column].push(l);
         else
-            this._layouts[column][index] = layout;
+            this._layouts[column][index] = l;
         return this;
@@ -926,0 +944,0 @@ }

dist/gridstack.d.ts

 /*!
- * GridStack 7.2.3
+ * GridStack 7.3.0
  * https://gridstackjs.com/
@@ -4,0 +4,0 @@ *

dist/types.d.ts

 /**
- * types.ts 7.2.3
+ * types.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -27,4 +27,4 @@ */
 export declare type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;
-/** optional function called during load() to callback the user on new added/remove items */
-export declare type AddRemoveFcn = (g: GridStack, w: GridStackWidget, add: boolean) => HTMLElement | undefined;
+/** optional function called during load() to callback the user on new added/remove grid items | grids */
+export declare type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;
 /**
@@ -42,6 +42,8 @@ * Defines the options for a Grid
     /**
-     * callback method use when new items needs to be created or deleted, instead of the default
-     * <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div>
-     * Create: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget().
-     * Delete: the item will be removed from DOM (if not already done)
+     * callback method use when new items|grids needs to be created or deleted, instead of the default
+     * item: <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div>
+     * grid: <div class="grid-stack">grid content...</div>
+     * add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init().
+     * add = false: the item will be removed from DOM (if not already done)
+     * grid = true|false for grid vs grid-items
      */
@@ -126,2 +128,5 @@ addRemoveCB?: AddRemoveFcn;
     minRow?: number;
+    /** If you are using a nonce-based Content Security Policy, pass your nonce here and
+     * GridStack will add it to the <style> elements it creates. */
+    nonce?: string;
     /** minimal width before grid will be shown in one column mode (default?: 768) */
@@ -128,0 +133,0 @@ oneColumnSize?: number;

dist/types.js

 "use strict";
 /**
- * types.ts 7.2.3
+ * types.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/utils.d.ts

 /**
- * utils.ts 7.2.3
+ * utils.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -47,3 +47,5 @@ */
      */
-    static createStylesheet(id: string, parent?: HTMLElement): CSSStyleSheet;
+    static createStylesheet(id: string, parent?: HTMLElement, options?: {
+        nonce?: string;
+    }): CSSStyleSheet;
     /** removed the given stylesheet id */
@@ -50,0 +52,0 @@ static removeStylesheet(id: string): void;

dist/utils.js

 "use strict";
 /**
- * utils.ts 7.2.3
+ * utils.ts 7.3.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -134,4 +134,7 @@ */
      */
-    static createStylesheet(id, parent) {
+    static createStylesheet(id, parent, options) {
         let style = document.createElement('style');
+        const nonce = options === null || options === void 0 ? void 0 : options.nonce;
+        if (nonce)
+            style.nonce = nonce;
         style.setAttribute('type', 'text/css');
@@ -138,0 +141,0 @@ style.setAttribute('gs-style-id', id);

doc/CHANGES.md

@@ -8,2 +8,3 @@ Change log
 
+- [7.3.0 (2023-04-01)](#730-2023-04-01)
 - [7.2.3 (2023-02-02)](#723-2023-02-02)
@@ -85,2 +86,8 @@ - [7.2.2 (2023-01-16)](#722-2023-01-16)
 
+## 7.3.0 (2023-04-01)
+* feat [#2229](https://github.com/gridstack/gridstack.js/pull/2229) support nonce for CSP. Thank you [@jedwards1211](https://github.com/jedwards1211)
+* feat: support nested grids with Angular component demo. Thank you R. Blanken for supporting this.
+* fix [#2206](https://github.com/gridstack/gridstack.js/issues/2206) `load()` with collision fix
+* fix [#2232](https://github.com/gridstack/gridstack.js/issues/2232) `autoPosition` bug loading from DOM
+
 ## 7.2.3 (2023-02-02)
@@ -87,0 +94,0 @@ * fix `addWidget()` to handle passing just {el} which was needed for Angular HMTL template demo

doc/README.md

@@ -121,2 +121,4 @@ gridstack.js API
 - `minRow` - minimum rows amount which is handy to prevent grid from collapsing when empty. Default is `0`. You can also do this with `min-height` CSS attribute on the grid div in pixels, which will round to the closest row.
+- `nonce` - If you are using a nonce-based Content Security Policy, pass your nonce here and
+GridStack will add it to the <style> elements it creates.
 - `oneColumnSize` - minimal width. If grid width is less than or equal to, grid will be shown in one-column mode (default: `768`)
@@ -123,0 +125,0 @@ - `oneColumnModeDomSort` - set to `true` if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: `false`)

package.json

 {
   "name": "gridstack",
-  "version": "7.2.3",
+  "version": "7.3.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Alain Dumesny <[e-mail]> (https://github.com/adumesny)",

README.md

@@ -18,3 +18,3 @@ # gridstack.js
 
-Join us on Slack: https://gridstackjs.slack.com
+Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/gridstackjs/shared_invite/zt-1jobnclsy-FqGGeLX5dFPM_ZQzTunBsw)
 
@@ -21,0 +21,0 @@ <!-- [![Slack Status](https://gridstackjs.com/badge.svg)](https://gridstackjs.slack.com) -->

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2436775

increased by0.5%

Lines of code

14764

increased by0.69%

No dependency changes