Method load

src/gridstack.ts:722–827

* Load widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there. * Used to restore a grid layout for a saved layout list (see `save()`). * * @param items list of widgets definition to update/create * @param addRemove boolean (default

(items: GridStackWidget[], addRemove: boolean | AddRemoveFcn = GridStack.addRemoveCB || true)

   * @see {@link http://gridstackjs.com/demo/serialization.html} for complete example
   */
  public load(items: GridStackWidget[], addRemove: boolean | AddRemoveFcn = GridStack.addRemoveCB || true): GridStack {
    // items = Utils.cloneDeep(items); // TODO: let callee decide by using directly instead of copy we can modify ?

    // make sure size 1x1 (default) is present as it may need to override current sizes
    items.forEach(n => { n.w = n.w || n.minW || 1; n.h = n.h || n.minH || 1 });

    // sort items. those without coord will be appended last
    items = Utils.sort(items);

    this.engine.skipCacheUpdate = this._ignoreLayoutsNodeChange = true; // skip layout update

    // if we're loading a layout into for example 1 column and items don't fit, make sure to save
    // the original wanted layout so we can scale back up correctly #1471
    let maxColumn = 0;
    items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w) });
    if (maxColumn > this.engine.defaultColumn) this.engine.defaultColumn = maxColumn;
    const column = this.getColumn();
    if (maxColumn > column) {
      // if we're loading (from empty) into a smaller column, check for special responsive layout
      if (this.engine.nodes.length === 0 && this.responseLayout) {
        this.engine.nodes = items;
        this.engine.columnChanged(maxColumn, column, this.responseLayout);
        items = this.engine.nodes;
        this.engine.nodes = [];
        delete this.responseLayout;
      } else this.engine.cacheLayout(items, maxColumn, true);
    }

    // if given a different callback, temporally set it as global option so creating will use it
    const prevCB = GridStack.addRemoveCB;
    if (typeof (addRemove) === 'function') GridStack.addRemoveCB = addRemove as AddRemoveFcn;

    const removed: GridStackNode[] = [];
    this.batchUpdate();

    // if we are loading from empty temporarily remove animation
    const blank = !this.engine.nodes.length;
    const noAnim = blank && this.opts.animate;
    if (noAnim) this.setAnimation(false);

    // see if any items are missing from new layout and need to be removed first
    if (!blank && addRemove) {
      const copyNodes = [...this.engine.nodes]; // don't loop through array you modify
      copyNodes.forEach(n => {
        if (!n.id) return;
        const item = Utils.find(items, n.id);
        if (!item) {
          if (GridStack.addRemoveCB) GridStack.addRemoveCB(this.el, n, false, false);
          removed.push(n); // batch keep track
          this.removeWidget(n.el, true, false);
        }
      });
    }

    // now add/update the widgets - starting with removing items in the new layout we will reposition
    // to reduce collision and add no-coord ones at next available spot
    this.engine._loading = true; // help with collision
    const updateNodes: GridStackWidget[] = [];