Merge pull request #1335 from adumesny/typescript

TS: more fixed for load()
gridstack · Aug 17, 2020 · d4b546e · d4b546e
2 parents d26fa96 + 50a95c3
commit d4b546e
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 31 deletions.
diff --git a/spec/e2e/html/1017-items-no-x-y-for-autoPosition.html b/spec/e2e/html/1017-items-no-x-y-for-autoPosition.html
@@ -11,11 +11,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="stylesheet" href="../../../demo/demo.css"/>
-
-  <script src="../../../dist/jquery.min.js"></script>
-  <script src="../../../dist/jquery-ui.min.js"></script>
-  <script src="../../../src/gridstack.js"></script>
-  <script src="../../../src/gridstack.jQueryUI.js"></script>
+  <script src="../../../dist/gridstack.all.js"></script>
 
   <style type="text/css">
     .upper .grid-stack-item-content {

diff --git a/spec/e2e/html/1102-button-between-grids.html b/spec/e2e/html/1102-button-between-grids.html
@@ -5,9 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>lose functionality</title>
-
   <link rel="stylesheet" href="../../../demo/demo.css"/>
-
   <script src="../../../dist/gridstack.all.js"></script>
 </head>
 <body>

diff --git a/spec/e2e/html/1142_change_event_missing.html b/spec/e2e/html/1142_change_event_missing.html
@@ -5,13 +5,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>1142 demo</title>
-
   <link rel="stylesheet" href="../../../demo/demo.css"/>
-
-  <script src="../../../dist/jquery.min.js"></script>
-  <script src="../../../dist/jquery-ui.min.js"></script>
-  <script src="../../../src/gridstack.js"></script>
-  <script src="../../../src/gridstack.jQueryUI.js"></script>
+  <script src="../../../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="grid-stack">

diff --git a/spec/e2e/html/1143_nested_acceptWidget_types.html b/spec/e2e/html/1143_nested_acceptWidget_types.html
@@ -8,12 +8,7 @@
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="../../../demo/demo.css"/>
-
-  <script src="../../../dist/jquery.min.js"></script>
-  <script src="../../../dist/jquery-ui.min.js"></script>
-  <script src="../../../src/gridstack.js"></script>
-  <script src="../../../src/gridstack.jQueryUI.js"></script>
-
+  <script src="../../../dist/gridstack.all.js"></script>
   <style type="text/css">
     .grid-stack-item-removing {
       opacity: 0.8;

diff --git a/spec/e2e/html/1155-max-row.html b/spec/e2e/html/1155-max-row.html
@@ -5,13 +5,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>maxRow Test</title>
-
   <link rel="stylesheet" href="../../../demo/demo.css"/>
-
-  <script src="../../../dist/jquery.min.js"></script>
-  <script src="../../../dist/jquery-ui.min.js"></script>
-  <script src="../../../src/gridstack.js"></script>
-  <script src="../../../src/gridstack.jQueryUI.js"></script>
+  <script src="../../../dist/gridstack.all.js"></script>
 </head>
 <body>
   <div class="container-fluid">

diff --git a/spec/e2e/html/1286-load.html b/spec/e2e/html/1286-load.html
@@ -0,0 +1,36 @@
+<!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>load() Test</title>
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <script src="../../../demo/events.js"></script>
+  <script src="../../../dist/gridstack.all.js"></script>
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>load() Test</h1>
+    <br/>
+    <div class="grid-stack">
+      <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">
+        <div class="grid-stack-item-content">item 1</div>
+      </div>
+      <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">
+        <div class="grid-stack-item-content">item 2</div>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript">
+    var grid = GridStack.init();
+    addEvents(grid);
+
+    grid.load([{width:2, height:1, id:'item3'}], true);
+    var layout = grid.save();
+    console.log('layout should be {x:0, y:0, width:2, height:1, id:item3}');
+    console.log(layout);
+    // expect(layout).toEqual([{x:0, y:0, width:2, height:1, id:'item3'}]);
+  </script>
+</body>
+</html>
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
@@ -324,6 +324,8 @@ export class GridStackEngine {
       this.removedNodes.push(node);
     }
     node._id = null; // hint that node is being removed
+    // TODO: .splice(findIndex(),1) would be faster but apparently there are cases we have 2 instances ! (see spec 'load add new, delete others')
+    // this.nodes = this.nodes.filter(n => n !== node);
     this.nodes.splice(this.nodes.findIndex(n => n === node), 1);
     if (!this.float) {
       this._packNodes();

diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -372,16 +372,19 @@ export class GridStack {
    **/
   public load(layout: GridStackWidget[], addAndRemove: boolean | ((w: GridStackWidget, add: boolean) => void)  = true) {
     let items = GridStack.Utils.sort(layout);
+    let removed: GridStackNode[] = [];
     this.batchUpdate();
     // see if any items are missing from new layout and need to be removed first
     if (addAndRemove) {
-      this.engine.nodes.forEach(n => {
+      let copyNodes = [...this.engine.nodes]; // don't loop through array you modify
+      copyNodes.forEach(n => {
         let item = items.find(w => n.id === w.id);
         if (!item) {
           if (typeof(addAndRemove) === 'function') {
             addAndRemove(n, false);
           } else {
-            this.removeWidget(n.el);
+            removed.push(n); // batch keep track
+            this.removeWidget(n.el, true, false);
           }
         }
       });
@@ -399,6 +402,7 @@ export class GridStack {
         }
       }
     });
+    this.engine.removedNodes = removed;
     this.commit();
   }
 
@@ -892,7 +896,7 @@ export class GridStack {
    * @param el  widget or selector to modify
    * @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).
    */
-  public removeWidget(els: GridStackElement, removeDOM = true): GridStack {
+  public removeWidget(els: GridStackElement, removeDOM = true, triggerEvent = true): GridStack {
     this.getElements(els).forEach(el => {
       if (el.parentElement !== this.el) return; // not our child!
       let node = el.gridstackNode;
@@ -906,10 +910,16 @@ export class GridStack {
       delete el.gridstackNode;
       this.dd.draggable(el, 'destroy').resizable(el, 'destroy');
 
-      this.engine.removeNode(node, removeDOM, true); // true for trigger event
+      this.engine.removeNode(node, removeDOM, triggerEvent);
+
+      if (removeDOM && el.parentElement) {
+        el.remove(); // in batch mode engine.removeNode doesn't call back to remove DOM
+      }
     });
-    this._triggerRemoveEvent();
-    this._triggerChangeEvent();
+    if (triggerEvent) {
+      this._triggerRemoveEvent();
+      this._triggerChangeEvent();
+    }
     return this;
   }