Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

column('none') now ignores layouts #2581

Merged
merged 1 commit into from
Dec 18, 2023
+62 −23
Merged

column('none') now ignores layouts #2581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions doc/CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ Change log
## 10.0.1-dev (TBD)
* feat: [#2574](https://github.com/gridstack/gridstack.js/pull/2574) Allow cell height in cm and mm units
* fix: [#2577](https://github.com/gridstack/gridstack.js/issues/2577) ui-resizable-s/-n style fix
* fix: [#2578](https://github.com/gridstack/gridstack.js/issues/2578) column('none') now ignores layouts

## 10.0.1 (2023-12-10)
* fix: [#2552](https://github.com/gridstack/gridstack.js/issues/2552) DOM init doesn't sizeToContent
Expand Down
52 changes: 52 additions & 0 deletions spec/e2e/html/2576_insert_column_shift_content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column insert bug #2578</title>
<link rel="stylesheet" href="../../../demo/demo.css" />
<script src="../../../dist/gridstack-all.js"></script>
<link rel="stylesheet" href="../../../dist/gridstack-extra.css"/>
</head>

<body>
<button onClick="addColAtIndex(0)">Add column 0</button>
<button onClick="removeColAtIndex(0)">Remove column 0</button>
<div class="grid-stack"></div>
</div>
<script type="text/javascript">
var items = [
{ content: 'Item 1', x: 0, y: 0 },
{ content: 'Item 2', x: 1, y: 0 },
{ content: 'Item 3', x: 2, y: 2 },
];
var options = { float: true, column: 3, row: 3, cellHeight: 50, children: items};

var grid = GridStack.init(options);

const addColAtIndex = (colIndex) => {
grid.column(grid.getColumn() + 1, 'none');
grid.engine.nodes.filter(n => n.x >= colIndex).sort((a, b) => b.x - a.x).forEach(n =>
grid.update(n.el, {x: n.x+1})
)
};

const removeColAtIndex = (colIndex) => {
grid.engine.nodes.filter(n => n.x >= colIndex).sort((a, b) => a.x - b.x).forEach(n => {
if (n.x) grid.update(n.el, {x: n.x-1})
})
grid.column(grid.getColumn() - 1, 'none')
};

addColAtIndex(0)
addColAtIndex(0)
removeColAtIndex(0)
removeColAtIndex(0)
addColAtIndex(0)
addColAtIndex(0)
</script>
</body>

</html>
30 changes: 8 additions & 22 deletions src/gridstack-engine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -797,13 +797,15 @@ export class GridStackEngine {
*
* @param prevColumn previous number of columns
* @param column new column number
* @param nodes different sorted list (ex: DOM order) instead of current list
* @param layout specify the type of re-layout that will happen (position, size, etc...).
* Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column
*/
public columnChanged(prevColumn: number, column: number, nodes: GridStackNode[], layout: ColumnOptions = 'moveScale'): GridStackEngine {
public columnChanged(prevColumn: number, column: number, layout: ColumnOptions = 'moveScale'): GridStackEngine {
if (!this.nodes.length || !column || prevColumn === column) return this;

// in this mode no layout is done whatsoever, up to the caller to handle it
if (layout === 'none') return this;

// simpler shortcuts layouts
const doCompact = layout === 'compact' || layout === 'list';
if (doCompact) {
Expand All @@ -814,23 +816,7 @@ export class GridStackEngine {
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[] = [];

// if we're going to 1 column and using DOM order (item passed in) rather than default sorting, then generate that layout
let domOrder = false;
if (column === 1 && nodes?.length) {
domOrder = true;
let top = 0;
nodes.forEach(n => {
n.x = 0;
n.w = 1;
n.y = Math.max(n.y, top);
top = n.y + n.h;
});
newNodes = nodes;
nodes = [];
} else {
nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
}
let nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1, prevColumn); // 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).
Expand Down Expand Up @@ -887,8 +873,8 @@ export class GridStackEngine {
if (nodes.length) {
if (typeof layout === 'function') {
layout(column, prevColumn, newNodes, nodes);
} else if (!domOrder) {
let ratio = (doCompact || layout === 'none') ? 1 : column / prevColumn;
} else {
let ratio = doCompact ? 1 : column / prevColumn;
let move = (layout === 'move' || layout === 'moveScale');
let scale = (layout === 'scale' || layout === 'moveScale');
nodes.forEach(node => {
Expand All @@ -902,7 +888,7 @@ export class GridStackEngine {
}

// finally re-layout them in reverse order (to get correct placement)
if (!domOrder) newNodes = Utils.sort(newNodes, -1, column);
newNodes = Utils.sort(newNodes, -1, column);
this._inColumnResize = true; // prevent cache update
this.nodes = []; // pretend we have no nodes to start with (add() will use same structures) to simplify layout
newNodes.forEach(node => {
Expand Down
2 changes: 1 addition & 1 deletion src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -954,7 +954,7 @@ export class GridStack {
// update the items now, checking if we have a custom children layout
/*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
if (newChildren) this.load(newChildren);
else*/ this.engine.columnChanged(oldColumn, column, undefined, layout);
else*/ this.engine.columnChanged(oldColumn, column, layout);
if (this._isAutoCellHeight) this.cellHeight();

this.resizeToContentCheck(true); // wait for width resizing
Expand Down