Load() make copy of layout

* before we modify the passed in layout, we make a (shallow) copy so sort() doesn't affect user's data
* also removed passing removeDOM to onChange() callback as we have node._removeDOM

Author: adumesny

doc/CHANGES.md

@@ -56,7 +56,7 @@ Change log
 ## 4.1.0-dev
 
 - fix [#1704](https://github.com/gridstack/gridstack.js/issues/1704) scrollbar fix broken in 4.x
-- add [#1682](https://github.com/gridstack/gridstack.js/issues/1682) `addWidget()` now supports recursive grids like init/addGrid() does.
+- add [#1682](https://github.com/gridstack/gridstack.js/issues/1682) `addWidget()` now supports nested grids like init/addGrid() does.
 
 ## 4.1.0 (2021-4-7)
 

src/gridstack-engine.ts

@@ -484,7 +484,7 @@ export class GridStackEngine {
     // don't use 'faster' .splice(findIndex(),1) in case node isn't in our list, or in multiple times.
     this.nodes = this.nodes.filter(n => n !== node);
     return this._packNodes()
-      ._notify(node, removeDOM);
+      ._notify(node);
   }
 
   public removeAll(removeDOM = true): GridStackEngine {
@@ -493,7 +493,7 @@ export class GridStackEngine {
     removeDOM && this.nodes.forEach(n => n._removeDOM = true); // let CB remove actual HTML (used to set _id to null, but then we loose layout info)
     this.removedNodes = this.nodes;
     this.nodes = [];
-    return this._notify(this.removedNodes, removeDOM);
+    return this._notify(this.removedNodes);
   }
 
   /** checks if item can be moved (layout constrain) vs moveNode(), returning true if was able to move.

src/gridstack.ts

@@ -314,12 +314,12 @@ export class GridStack {
       column: this.opts.column,
       float: this.opts.float,
       maxRow: this.opts.maxRow,
-      onChange: (cbNodes, removeDOM = true) => {
+      onChange: (cbNodes) => {
         let maxH = 0;
         this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h) });
         cbNodes.forEach(n => {
           let el = n.el;
-          if (removeDOM && n._removeDOM) { // TODO: do we need to pass 'removeDOM' ?
+          if (n._removeDOM) {
             if (el) el.remove();
             delete n._removeDOM;
           } else {
@@ -498,7 +498,7 @@ export class GridStack {
    * see http://gridstackjs.com/demo/serialization.html
    **/
   public load(layout: GridStackWidget[], addAndRemove: boolean | ((g: GridStack, w: GridStackWidget, add: boolean) => GridItemHTMLElement)  = true): GridStack {
-    let items = GridStack.Utils.sort(layout, -1, this._prevColumn || this.opts.column);
+    let items = GridStack.Utils.sort([...layout], -1, this._prevColumn || this.opts.column); // make copy before we mod/sort
     this._insertNotAppend = true; // since create in reverse order...
 
     // if we're loading a layout into 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save