- Introduced default columns to avoid using the 12 value as default for non-12 scenarios

Author: lmartorella

spec/gridstack-engine-spec.ts

@@ -371,6 +371,53 @@ describe('gridstack engine', function() {
     });
   });
 
+  describe('test columnChanged and save', function() {
+    beforeAll(function() {
+    });
+    it('wont\'t break layouts with 12 columns', function() {
+      engine = new GridStackEngine({ column: 12 });
+      // Add two side-by-side components 6+6 = 12 columns
+      engine.addNode({ x: 0, y: 0, w: 6, h: 1, id: "left" });
+      engine.addNode({ x: 6, y: 0, w: 6, h: 1, id: "right" });
+      engine.save().forEach(node => engine.nodeBoundFix(findNode(engine, node.id!)!));
+      expect(findNode(engine, "left")).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6, h: 1}));
+      expect(findNode(engine, "right")).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6, h: 1}));
+      // Resize to 1 column
+      engine.column = 1;
+      engine.columnChanged(12, 1);
+      engine.save().forEach(node => engine.nodeBoundFix(findNode(engine, node.id!)!));
+      expect(findNode(engine, "left")).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1, h: 1}));
+      expect(findNode(engine, "right")).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1, h: 1}));
+      // Resize back to 12 column
+      engine.column = 12;
+      engine.columnChanged(1, 12);
+      engine.save().forEach(node => engine.nodeBoundFix(findNode(engine, node.id!)!));
+      expect(findNode(engine, "left")).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 6, h: 1}));
+      expect(findNode(engine, "right")).toEqual(jasmine.objectContaining({x: 6, y: 0, w: 6, h: 1}));
+    });
+    it('wont\'t break layouts with more than 12 columns', function() {
+      engine = new GridStackEngine({ column: 24 });
+      // Add two side-by-side components 12+12 = 24 columns
+      engine.addNode({ x: 0, y: 0, w: 12, h: 1, id: "left" });
+      engine.addNode({ x: 12, y: 0, w: 12, h: 1, id: "right" });
+      engine.save().forEach(node => engine.nodeBoundFix(findNode(engine, node.id!)!));
+      expect(findNode(engine, "left")).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1}));
+      expect(findNode(engine, "right")).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12, h: 1}));
+      // Resize to 1 column
+      engine.column = 1;
+      engine.columnChanged(24, 1);
+      engine.save().forEach(node => engine.nodeBoundFix(findNode(engine, node.id!)!));
+      expect(findNode(engine, "left")).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 1, h: 1}));
+      expect(findNode(engine, "right")).toEqual(jasmine.objectContaining({x: 0, y: 1, w: 1, h: 1}));
+      // Resize back to 24 column
+      engine.column = 24;
+      engine.columnChanged(1, 24);
+      engine.save().forEach(node => engine.nodeBoundFix(findNode(engine, node.id!)!));
+      expect(findNode(engine, "left")).toEqual(jasmine.objectContaining({x: 0, y: 0, w: 12, h: 1}));
+      expect(findNode(engine, "right")).toEqual(jasmine.objectContaining({x: 12, y: 0, w: 12, h: 1}));
+    });
+  });
+
   describe('test compact', function() {
     beforeAll(function() {
       engine = new GridStackEngine();

src/gridstack-engine.ts

@@ -31,6 +31,7 @@ export class GridStackEngine {
   public addedNodes: GridStackNode[] = [];
   public removedNodes: GridStackNode[] = [];
   public batchMode: boolean;
+  public defaultColumn = 12;
   /** @internal callback to update the DOM attributes */
   protected onChange: OnChangeCB;
   /** @internal */
@@ -49,7 +50,7 @@ export class GridStackEngine {
   public static _idSeq = 0;
 
   public constructor(opts: GridStackEngineOptions = {}) {
-    this.column = opts.column || 12;
+    this.column = opts.column || this.defaultColumn;
     this.maxRow = opts.maxRow;
     this._float = opts.float;
     this.nodes = opts.nodes || [];
@@ -403,12 +404,12 @@ export class GridStackEngine {
     // remember it's position & width so we can restore back (1 -> 12 column) #1655 #1985
     // IFF we're not in the middle of column resizing!
     const saveOrig = (node.x || 0) + (node.w || 1) > this.column;
-    if (saveOrig && this.column < 12 && !this._inColumnResize && node._id && this.findCacheLayout(node, 12) === -1) {
+    if (saveOrig && this.column < this.defaultColumn && !this._inColumnResize && node._id && this.findCacheLayout(node, this.defaultColumn) === -1) {
       const copy = {...node}; // need _id + positions
       if (copy.autoPosition || copy.x === undefined) { delete copy.x; delete copy.y; }
-      else copy.x = Math.min(11, copy.x);
-      copy.w = Math.min(12, copy.w || 1);
-      this.cacheOneLayout(copy, 12);
+      else copy.x = Math.min(this.defaultColumn - 1, copy.x);
+      copy.w = Math.min(this.defaultColumn, copy.w || 1);
+      this.cacheOneLayout(copy, this.defaultColumn);
     }
 
     if (node.w > this.column) {