Method columnChanged

src/gridstack-engine.ts:1093–1191

* @internal Called to scale the widget width & position up/down based on the column change. * Note we store previous layouts (especially original ones) to make it possible to go * from say 12 -> 1 -> 12 and get back to where we were. * * @param prevColumn previous number of columns *

(prevColumn: number, column: number, layout: ColumnOptions = 'moveScale')

   * Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
   */
  public columnChanged(prevColumn: number, column: number, layout: ColumnOptions = 'moveScale'): GridStackEngine {
    if (!this.nodes.length || !column || prevColumn === column) return this;

    // simpler shortcuts layouts
    const doCompact = layout === 'compact' || layout === 'list';
    if (doCompact) {
      this.sortNodes(1); // sort with original layout once and only once (new column will affect order otherwise)
    }

    // cache the current layout in case they want to go back (like 12 -> 1 -> 12) as it requires original data IFF we're sizing down (see below)
    if (column < prevColumn) this.cacheLayout(this.nodes, prevColumn);
    this.batchUpdate(); // do this EARLY as it will call saveInitial() so we can detect where we started for _dirty and collision
    let newNodes: GridStackNode[] = [];
    let nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1); // current column reverse sorting so we can insert last to front (limit collision)

    // see if we have cached previous layout IFF we are going up in size (restore) otherwise always
    // generate next size down from where we are (looks more natural as you gradually size down).
    if (column > prevColumn && this._layouts) {
      const cacheNodes = this._layouts[column] || [];
      // ...if not, start with the largest layout (if not already there) as down-scaling is more accurate
      // by pretending we came from that larger column by assigning those values as starting point
      const lastIndex = this._layouts.length - 1;
      if (!cacheNodes.length && prevColumn !== lastIndex && this._layouts[lastIndex]?.length) {
        prevColumn = lastIndex;
        this._layouts[lastIndex].forEach(cacheNode => {
          const n = nodes.find(n => n._id === cacheNode._id);
          if (n) {
            // still current, use cache info positions
            if (!doCompact && !cacheNode.autoPosition) {
              n.x = cacheNode.x ?? n.x;
              n.y = cacheNode.y ?? n.y;
            }
            n.w = cacheNode.w ?? n.w;
            if (cacheNode.x == undefined || cacheNode.y === undefined) n.autoPosition = true;
          }
        });
      }

      // if we found cache re-use those nodes that are still current
      cacheNodes.forEach(cacheNode => {
        const j = nodes.findIndex(n => n._id === cacheNode._id);
        if (j !== -1) {
          const n = nodes[j];
          // still current, use cache info positions
          if (doCompact) {
            n.w = cacheNode.w; // only w is used, and don't trim the list
            return;
          }
          if (cacheNode.autoPosition || isNaN(cacheNode.x) || isNaN(cacheNode.y)) {
            this.findEmptyPosition(cacheNode, newNodes);
          }
          if (!cacheNode.autoPosition) {
            n.x = cacheNode.x ?? n.x;
            n.y = cacheNode.y ?? n.y;
            n.w = cacheNode.w ?? n.w;
            newNodes.push(n);
          }
          nodes.splice(j, 1);