Skip to content

Commit 50a95c3

Browse files
adumesnyadumesny
committed
TS: more fixed for load()
* more fixed for #1286 * load() was not correctly clearing the HTML items, and calling removed callback * added sample text case * also fixed other use cases includes
1 parent 6e8b5dc commit 50a95c3

8 files changed

+58
-32
lines changed

‎spec/e2e/html/1017-items-no-x-y-for-autoPosition.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,7 @@
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212

1313
<link rel="stylesheet" href="../../../demo/demo.css"/>
14-
15-
<script src="../../../dist/jquery.min.js"></script>
16-
<script src="../../../dist/jquery-ui.min.js"></script>
17-
<script src="../../../src/gridstack.js"></script>
18-
<script src="../../../src/gridstack.jQueryUI.js"></script>
14+
<script src="../../../dist/gridstack.all.js"></script>
1915

2016
<style type="text/css">
2117
.upper .grid-stack-item-content {

‎spec/e2e/html/1102-button-between-grids.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>lose functionality</title>
8-
98
<link rel="stylesheet" href="../../../demo/demo.css"/>
10-
119
<script src="../../../dist/gridstack.all.js"></script>
1210
</head>
1311
<body>

‎spec/e2e/html/1142_change_event_missing.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,8 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>1142 demo</title>
8-
98
<link rel="stylesheet" href="../../../demo/demo.css"/>
10-
11-
<script src="../../../dist/jquery.min.js"></script>
12-
<script src="../../../dist/jquery-ui.min.js"></script>
13-
<script src="../../../src/gridstack.js"></script>
14-
<script src="../../../src/gridstack.jQueryUI.js"></script>
9+
<script src="../../../dist/gridstack.all.js"></script>
1510
</head>
1611
<body>
1712
<div class="grid-stack">

‎spec/e2e/html/1143_nested_acceptWidget_types.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,7 @@
88

99
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
1010
<link rel="stylesheet" href="../../../demo/demo.css"/>
11-
12-
<script src="../../../dist/jquery.min.js"></script>
13-
<script src="../../../dist/jquery-ui.min.js"></script>
14-
<script src="../../../src/gridstack.js"></script>
15-
<script src="../../../src/gridstack.jQueryUI.js"></script>
16-
11+
<script src="../../../dist/gridstack.all.js"></script>
1712
<style type="text/css">
1813
.grid-stack-item-removing {
1914
opacity: 0.8;

‎spec/e2e/html/1155-max-row.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,8 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>maxRow Test</title>
8-
98
<link rel="stylesheet" href="../../../demo/demo.css"/>
10-
11-
<script src="../../../dist/jquery.min.js"></script>
12-
<script src="../../../dist/jquery-ui.min.js"></script>
13-
<script src="../../../src/gridstack.js"></script>
14-
<script src="../../../src/gridstack.jQueryUI.js"></script>
9+
<script src="../../../dist/gridstack.all.js"></script>
1510
</head>
1611
<body>
1712
<div class="container-fluid">

‎spec/e2e/html/1286-load.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>load() Test</title>
8+
<link rel="stylesheet" href="../../../demo/demo.css"/>
9+
<script src="../../../demo/events.js"></script>
10+
<script src="../../../dist/gridstack.all.js"></script>
11+
</head>
12+
<body>
13+
<div class="container-fluid">
14+
<h1>load() Test</h1>
15+
<br/>
16+
<div class="grid-stack">
17+
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2" data-gs-id="item1" id="item1">
18+
<div class="grid-stack-item-content">item 1</div>
19+
</div>
20+
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4" data-gs-id="item2" id="item2">
21+
<div class="grid-stack-item-content">item 2</div>
22+
</div>
23+
</div>
24+
</div>
25+
<script type="text/javascript">
26+
var grid = GridStack.init();
27+
addEvents(grid);
28+
29+
grid.load([{width:2, height:1, id:'item3'}], true);
30+
var layout = grid.save();
31+
console.log('layout should be {x:0, y:0, width:2, height:1, id:item3}');
32+
console.log(layout);
33+
// expect(layout).toEqual([{x:0, y:0, width:2, height:1, id:'item3'}]);
34+
</script>
35+
</body>
36+
</html>

‎src/gridstack-engine.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,8 @@ export class GridStackEngine {
325325
}
326326
node._id = null; // hint that node is being removed
327327
// TODO: .splice(findIndex(),1) would be faster but apparently there are cases we have 2 instances ! (see spec 'load add new, delete others')
328-
this.nodes = this.nodes.filter(n => n !== node);
328+
// this.nodes = this.nodes.filter(n => n !== node);
329+
this.nodes.splice(this.nodes.findIndex(n => n === node), 1);
329330
if (!this.float) {
330331
this._packNodes();
331332
}

‎src/gridstack.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -372,16 +372,19 @@ export class GridStack {
372372
**/
373373
public load(layout: GridStackWidget[], addAndRemove: boolean | ((w: GridStackWidget, add: boolean) => void) = true) {
374374
let items = GridStack.Utils.sort(layout);
375+
let removed: GridStackNode[] = [];
375376
this.batchUpdate();
376377
// see if any items are missing from new layout and need to be removed first
377378
if (addAndRemove) {
378-
this.engine.nodes.forEach(n => {
379+
let copyNodes = [...this.engine.nodes]; // don't loop through array you modify
380+
copyNodes.forEach(n => {
379381
let item = items.find(w => n.id === w.id);
380382
if (!item) {
381383
if (typeof(addAndRemove) === 'function') {
382384
addAndRemove(n, false);
383385
} else {
384-
this.removeWidget(n.el);
386+
removed.push(n); // batch keep track
387+
this.removeWidget(n.el, true, false);
385388
}
386389
}
387390
});
@@ -399,6 +402,7 @@ export class GridStack {
399402
}
400403
}
401404
});
405+
this.engine.removedNodes = removed;
402406
this.commit();
403407
}
404408

@@ -892,7 +896,7 @@ export class GridStack {
892896
* @param el widget or selector to modify
893897
* @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).
894898
*/
895-
public removeWidget(els: GridStackElement, removeDOM = true): GridStack {
899+
public removeWidget(els: GridStackElement, removeDOM = true, triggerEvent = true): GridStack {
896900
this.getElements(els).forEach(el => {
897901
if (el.parentElement !== this.el) return; // not our child!
898902
let node = el.gridstackNode;
@@ -906,10 +910,16 @@ export class GridStack {
906910
delete el.gridstackNode;
907911
this.dd.draggable(el, 'destroy').resizable(el, 'destroy');
908912

909-
this.engine.removeNode(node, removeDOM, true); // true for trigger event
913+
this.engine.removeNode(node, removeDOM, triggerEvent);
914+
915+
if (removeDOM && el.parentElement) {
916+
el.remove(); // in batch mode engine.removeNode doesn't call back to remove DOM
917+
}
910918
});
911-
this._triggerRemoveEvent();
912-
this._triggerChangeEvent();
919+
if (triggerEvent) {
920+
this._triggerRemoveEvent();
921+
this._triggerChangeEvent();
922+
}
913923
return this;
914924
}
915925

0 commit comments

Comments
 (0)