TS: fix when dragging to delete and back

introduced during the jquery-ui removal.

Author: adumesny

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "build": "yarn --no-progress && rm -rf dist/* && webpack && tsc --stripInternal && grunt && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
     "t": "tsc --stripInternal",
-    "web": "rm -rf dist/* && webpack",
+    "w": "webpack",
     "test": "yarn lint && karma start karma.conf.js",
     "lint": "tsc --noEmit && eslint src/*.ts",
     "reset": "rm -rf dist node_modules",

spec/gridstack-engine-spec.ts

@@ -152,7 +152,7 @@ describe('gridstack engine', function() {
     });
 
     beforeEach(function() {
-      engine.batchMode = false;
+      delete engine.batchMode;
     });
 
     it('should return all dirty nodes', function() {
@@ -187,8 +187,8 @@ describe('gridstack engine', function() {
       expect(engine.float).toEqual(true);
       engine.commit();
       engine.commit();
-      expect(engine.batchMode).toBeFalse();
-      expect(engine.float).toEqual(false);
+      expect(engine.batchMode).not.toBeTrue();
+      expect(engine.float).not.toBeTrue;
     });
 
     it('should work on float grids', function() {
@@ -197,7 +197,7 @@ describe('gridstack engine', function() {
       expect(engine.batchMode).toBeTrue();
       expect(engine.float).toEqual(true);
       engine.commit();
-      expect(engine.batchMode).toBeFalse();
+      expect(engine.batchMode).not.toBeTrue();
       expect(engine.float).toEqual(true);
     });
   });
@@ -214,7 +214,7 @@ describe('gridstack engine', function() {
       expect(engine.batchMode).toBeTrue();
       expect(engine.float).toEqual(true);
       engine.commit();
-      expect(engine.batchMode).toBeFalse();
+      expect(engine.batchMode).not.toBeTrue();
       expect(engine.float).toEqual(true);
     });
   });

src/gridstack-engine.ts

@@ -285,7 +285,7 @@ export class GridStackEngine {
     return this;
   }
 
-  public addNode(node: GridStackNode, triggerAddEvent?: boolean): GridStackNode {
+  public addNode(node: GridStackNode, triggerAddEvent = false): GridStackNode {
     node = this.prepareNode(node);
 
     node._id = node._id || GridStackEngine._idSeq++;
@@ -320,9 +320,10 @@ export class GridStackEngine {
     return node;
   }
 
-  public removeNode(node: GridStackNode, detachNode?: boolean): GridStackEngine {
-    detachNode = (detachNode === undefined ? true : detachNode);
-    this.removedNodes.push(node);
+  public removeNode(node: GridStackNode, detachNode = true, triggerRemoveEvent = false): GridStackEngine {
+    if (triggerRemoveEvent) {
+      this.removedNodes.push(node);
+    }
     node._id = null; // hint that node is being removed
     this.nodes = this.nodes.filter(n => n !== node);
     this._packNodes();
@@ -459,7 +460,7 @@ export class GridStackEngine {
   public endUpdate(): GridStackEngine {
     let n = this.nodes.find(n => n._updating);
     if (n) {
-      n._updating = false;
+      delete n._updating;
       this.nodes.forEach(n => { delete n._packY; });
     }
     return this;

src/gridstack.ts

@@ -827,7 +827,7 @@ export class GridStack {
    * @param el  widget or selector to modify
    * @param detachNode if false DOM node won't be removed from the tree (Default? true).
    */
-  public removeWidget(els: GridStackElement, detachNode?: boolean): GridStack {
+  public removeWidget(els: GridStackElement, detachNode = true): GridStack {
     this.getElements(els).forEach(el => {
       if (el.parentElement !== this.el) return; // not our child!
       let node = el.gridstackNode;
@@ -841,7 +841,7 @@ export class GridStack {
       delete el.gridstackNode;
       this.dd.draggable(el, 'destroy').resizable(el, 'destroy');
 
-      this.engine.removeNode(node, detachNode);
+      this.engine.removeNode(node, detachNode, true); // true for trigger event
     });
     this._triggerRemoveEvent();
     this._triggerChangeEvent();
@@ -1165,9 +1165,9 @@ export class GridStack {
     let node = el.gridstackNode;
     if (!node || !node._removeTimeout) return this;
     clearTimeout(node._removeTimeout);
-    node._removeTimeout = null;
+    delete node._removeTimeout;
     el.classList.remove('grid-stack-item-removing');
-    node._isAboutToRemove = false;
+    delete node._isAboutToRemove;
     return this;
   }
 
@@ -1257,7 +1257,7 @@ export class GridStack {
             this._writeAttrs(this.placeholder, x, y, width, height);
             this.el.appendChild(this.placeholder);
             node.el = this.placeholder;
-            node._temporaryRemoved = false;
+            delete node._temporaryRemoved;
           }
         }
       } else if (event.type === 'resize')  {
@@ -1295,6 +1295,7 @@ export class GridStack {
         if (gridToNotify._gsEventHandler[event.type]) {
           gridToNotify._gsEventHandler[event.type](event, target);
         }
+        gridToNotify.engine.removedNodes.push(node);
         gridToNotify._triggerRemoveEvent();
         delete el.gridstackNode;
         el.remove();
@@ -1308,7 +1309,7 @@ export class GridStack {
           this._writeAttrs(target, node._beforeDragX, node._beforeDragY, node.width, node.height);
           node.x = node._beforeDragX;
           node.y = node._beforeDragY;
-          node._temporaryRemoved = false;
+          delete node._temporaryRemoved;
           this.engine.addNode(node);
         }
         if (this._gsEventHandler[event.type]) {
@@ -1475,7 +1476,7 @@ export class GridStack {
       this.column(1);
     } else {
       if (!this._oneColumnMode) { return this }
-      this._oneColumnMode = false;
+      delete this._oneColumnMode;
       this.column(this._prevColumn);
     }
     return this;
@@ -1499,7 +1500,7 @@ export class GridStack {
         .on(trashZone, 'dropout', (event, el) => {
           let node = el.gridstackNode;
           if (!node || node._grid !== this) return;
-          el.dataset.inTrashZone = 'false';
+          delete el.dataset.inTrashZone;
           this._clearRemovingTimeout(el);
         });
     }

webpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
   entry: {
     'gridstack.all': './src/index.ts'
   },
-  mode: 'production', // production vs development
+  mode: 'development', // production vs development
   module: {
     rules: [
       {