(feat) column() resizing now supports 'list' | 'compact' modes

adumesny · adumesny · commit 048767c2c8dc · 2023-06-12T20:50:41.000-07:00
* fix gridstack#2358 when your grid is display a sorted list of items, we now support reflowing that content during column resize and compact() methods. * compact() now takes options which today can be CompactOptions = 'list' | 'compact'; * column(N) now has new options ColumnOptions = 'list' | 'compact' | 'moveScale', etc... * also optimized some code while stepping in debugger. API is backward compatible and defaults to the same behavior. TODO: remember bigger width and restore back when going up in columns...
diff --git a/demo/column.html b/demo/column.html
@@ -17,6 +17,8 @@ <h1>column() grid demo (fix cellHeight)</h1>
     <div>
       <label>Choose re-layout:</label>
       <select onchange="setLayout(this.value)">
+        <option value="list">list</option>
+        <option value="compact">compact</option>
         <option value="moveScale">move + scale</option>
         <option value="move">move</option>
         <option value="scale">scale</option>
@@ -25,6 +27,8 @@ <h1>column() grid demo (fix cellHeight)</h1>
       </select>
     </div>
     <div>
+      <a onClick="grid.removeAll().load(layout1)" class="btn btn-primary" href="#">random</a>
+      <a onClick="grid.removeAll().load(layout2)" class="btn btn-primary" href="#">list</a>
       <a onClick="addWidget()" class="btn btn-primary" href="#">Add Widget</a>
       <a onClick="setOneColumn(false)" class="btn btn-primary" href="#">1 Column</a>
       <a onClick="setOneColumn(true)" class="btn btn-primary" href="#">1 Column DOM</a>
@@ -41,21 +45,7 @@ <h1>column() grid demo (fix cellHeight)</h1>
   </div>
 
   <script type="text/javascript">
-    let grid = GridStack.init({
-      float: true,
-      disableOneColumnMode: true, // prevent auto column for this manual demo
-      cellHeight: 100 // fixed as default 'auto' (square) makes it hard to test 1-3 column in actual large windows tests
-    });
-    let text = document.querySelector('#column-text');
-    let layout = 'moveScale';
-
-    grid.on('added removed change', function(e, items) {
-      let str = '';
-      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
-      console.log(e.type + ' ' + items.length + ' items:' + str );
-    });
-
-    let items = [
+    let layout1 = [ // DOM order will be 0,1,2,3,4,5,6 vs column1 = 0,1,4,3,2,5,6
       /* match karma testing
       {x: 0, y: 0, w: 4, h: 2},
       {x: 4, y: 0, w: 4, h: 4},
@@ -71,12 +61,30 @@ <h1>column() grid demo (fix cellHeight)</h1>
       {x: 5, y: 3, w: 2},
       {x: 0, y: 4, w: 12}
     ];
+    let layout2 = [{h:2},{},{},{},{},{},{},{},{},{w:2},{},{},{},{},{},{}];
+    layout2.forEach((n,i) => {
+      n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + ++i;
+    });
     let count = 0;
-    items.forEach(n => {
+    layout1.forEach(n => {
       n.content = '<button onClick="grid.removeWidget(this.parentNode.parentNode)">X</button><br>' + count++ + (n.text ? n.text : '');
-      grid.addWidget(n); // DOM order will be 0,1,2,3,4,5,6 vs column1 = 0,1,4,3,2,5,6
     });
 
+    let grid = GridStack.init({
+      float: true,
+      disableOneColumnMode: true, // prevent auto column for this manual demo
+      cellHeight: 100 // fixed as default 'auto' (square) makes it hard to test 1-3 column in actual large windows tests
+    }).load(layout2);
+    let text = document.querySelector('#column-text');
+    let layout = 'list';
+
+    grid.on('added removed change', function(e, items) {
+      let str = '';
+      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
+
+
     function addWidget() {
       let n = items[count] || {
         x: Math.round(12 * Math.random()),
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [8.2.3-dev TBD](#823-dev-tbd)
 - [8.2.3 (2023-06-11)](#823-2023-06-11)
 - [8.2.1 (2023-05-26)](#821-2023-05-26)
 - [8.2.0 (2023-05-24)](#820-2023-05-24)
@@ -90,6 +91,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 8.2.3-dev TBD
+* feat [#2358](https://github.com/gridstack/gridstack.js/issues/2358) column() resizing now support reflowing content as list
+
 ## 8.2.3 (2023-06-11)
 * fix [#2349](https://github.com/gridstack/gridstack.js/issues/2349) grid NoMove vs item NoMove support
 * fix [#2352](https://github.com/gridstack/gridstack.js/issues/2352) .ui-draggable-dragging z-index for modal dialogs
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
@@ -4,7 +4,7 @@
  */
 
 import { Utils } from './utils';
-import { GridStackNode, ColumnOptions, GridStackPosition, GridStackMoveOpts, SaveFcn } from './types';
+import { GridStackNode, ColumnOptions, GridStackPosition, GridStackMoveOpts, SaveFcn, CompactOptions } from './types';
 
 /** callback to update the DOM attributes since this class is generic (no HTML or other info) for items that changed - see _notify() */
 type OnChangeCB = (nodes: GridStackNode[]) => void;
@@ -258,20 +258,23 @@ export class GridStackEngine {
     return !this.collide(nn);
   }
 
-  /** re-layout grid items to reclaim any empty space */
-  public compact(): GridStackEngine {
+  /** re-layout grid items to reclaim any empty space - optionally keeping the sort order exactly the same (list mode) vs truly finding an empty spaces */
+  public compact(layout: CompactOptions = 'compact', sortBefore = true): GridStackEngine {
     if (this.nodes.length === 0) return this;
     this.batchUpdate()
-      .sortNodes();
+    if (sortBefore) this.sortNodes();
+    this._inColumnResize = true; // faster addNode()
     let copyNodes = this.nodes;
     this.nodes = []; // pretend we have no nodes to conflict layout to start with...
-    copyNodes.forEach(node => {
-      if (!node.locked) {
-        node.autoPosition = true;
+    copyNodes.forEach((n, index, list) => {
+      let after: GridStackNode;
+      if (!n.locked) {
+        n.autoPosition = true;
+        if (layout === 'list' && index) after = list[index - 1];
       }
-      this.addNode(node, false); // 'false' for add event trigger
-      node._dirty = true; // will force attr update
+      this.addNode(n, false, after); // 'false' for add event trigger
     });
+    delete this._inColumnResize;
     return this.batchUpdate(false);
   }
 
@@ -288,8 +291,8 @@ export class GridStackEngine {
   public get float(): boolean { return this._float || false; }
 
   /** sort the nodes array from first to last, or reverse. Called during collision/placement to force an order */
-  public sortNodes(dir?: -1 | 1): GridStackEngine {
-    this.nodes = Utils.sort(this.nodes, dir, this.column);
+  public sortNodes(dir: 1 | -1 = 1, column = this.column): GridStackEngine {
+    this.nodes = Utils.sort(this.nodes, dir, column);
     return this;
   }
 
@@ -482,18 +485,20 @@ export class GridStackEngine {
 
   /** 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.
+   * Optionally pass a widget to start search AFTER, meaning the order will remain the same but possibly have empty slots we skipped
    */
-  public findEmptyPosition(node: GridStackNode, nodeList = this.nodes, column = this.column): boolean {
-    nodeList = Utils.sort(nodeList, -1, column);
+  public findEmptyPosition(node: GridStackNode, nodeList = this.nodes, column = this.column, after?: GridStackNode): boolean {
+    let start = after ? after.y * column + (after.x + after.w) : 0;
     let found = false;
-    for (let i = 0; !found; ++i) {
+    for (let i = start; !found; ++i) {
       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 (!nodeList.find(n => Utils.isIntercepted(box, n))) {
+        if (node.x !== x || node.y !== y) node._dirty = true;
         node.x = x;
         node.y = y;
         delete node.autoPosition;
@@ -504,7 +509,7 @@ export class GridStackEngine {
   }
 
   /** call to add the given node to our list, fixing collision and re-packing */
-  public addNode(node: GridStackNode, triggerAddEvent = false): GridStackNode {
+  public addNode(node: GridStackNode, triggerAddEvent = false, after?: GridStackNode): GridStackNode {
     let dup = this.nodes.find(n => n._id === node._id);
     if (dup) return dup; // prevent inserting twice! return it instead.
 
@@ -513,7 +518,7 @@ export class GridStackEngine {
     delete node._temporaryRemoved;
     delete node._removeDOM;
 
-    if (node.autoPosition && this.findEmptyPosition(node)) {
+    if (node.autoPosition && this.findEmptyPosition(node, this.nodes, this.column, after)) {
       delete node.autoPosition; // found our slot
     }
 
@@ -790,11 +795,19 @@ export class GridStackEngine {
   public updateNodeWidths(prevColumn: number, column: number, nodes: GridStackNode[], 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, prevColumn); // sort with original layout once and only once (new column will affect order otherwise)
+      return this.compact(layout, false);
+    }
+    
     // cache the current layout in case they want to go back (like 12 -> 1 -> 12) as it requires original data
     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[] = [];
 
+
     // if we're going to 1 column and using DOM order rather than default sorting, then generate that layout
     let domOrder = false;
     if (column === 1 && nodes?.length) {
diff --git a/src/types.ts b/src/types.ts
@@ -49,13 +49,19 @@ export const dragInDefaultOptions: DDDragInOpt = {
   // scroll: false,
 };
 
-/** different layout options when changing # of columns,
- * including a custom function that takes new/old column count, and array of new/old positions
+/** 
+ * different layout options when changing # of columns, including a custom function that takes new/old column count, and array of new/old positions
  * Note: new list may be partially already filled if we have a cache of the layout at that size and new items were added later.
+ * Options are:
+ * 'list' - treat items as sorted list, keeping items (unsized unless too big for column count) sequentially reflowing them
+ * 'compact' - similar to list, but using compact() method which will possibly re-order items if an empty slots are available due to a larger item needing to be pushed to next row
+ * 'moveScale' - will scale and move items by the ratio new newColumnCount / oldColumnCount
+ * 'move' | 'scale' - will only size or move items
+ * 'none' will leave items unchanged, unless they don't fit in column count
  */
-export type ColumnOptions = 'moveScale' | 'move' | 'scale' | 'none' |
+export type ColumnOptions = 'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none' |
   ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);
-
+export type CompactOptions = 'list' | 'compact';
 export type numberOrString = number | string;
 export interface GridItemHTMLElement extends HTMLElement {
   /** pointer to grid node instance */
diff --git a/src/utils.ts b/src/utils.ts
@@ -134,7 +134,7 @@ export class Utils {
    * @param dir 1 for asc, -1 for desc (optional)
    * @param width width of the grid. If undefined the width will be calculated automatically (optional).
    **/
-  static sort(nodes: GridStackNode[], dir?: -1 | 1, column?: number): GridStackNode[] {
+  static sort(nodes: GridStackNode[], dir: 1 | -1 = 1, column?: number): GridStackNode[] {
     column = column || nodes.reduce((col, n) => Math.max(n.x + n.w, col), 0) || 12;
     if (dir === -1)
       return nodes.sort((a, b) => (b.x + b.y * column)-(a.x + a.y * column));
