diff --git a/spec/gridstack-engine-spec.ts b/spec/gridstack-engine-spec.ts index 990cbcb43..414ccadee 100644 --- a/spec/gridstack-engine-spec.ts +++ b/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(); diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts index 80917d6be..2354e8d60 100644 --- a/src/gridstack-engine.ts +++ b/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) {