Merge pull request #1334 from adumesny/typescript

2.0.0-rc2 release

Author: adumesny

README.md

@@ -94,8 +94,8 @@ alternatively in html
 or using CDN (minimized):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]rc/dist/gridstack.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/[email protected]rc/dist/gridstack.all.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]rc2/dist/gridstack.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/[email protected]rc2/dist/gridstack.all.js"></script>
 ```
 
 .map files are included for debugging purposes.

doc/CHANGES.md

@@ -44,7 +44,7 @@ Change log
 - add `margin` to replace `verticalMargin` which affects both dimensions in code, rather than one in code the other in CSS.
 You can now have perfect square cells (default) [723](https://github.com/gridstack/gridstack.js/issues/723)
 - fix [1299](https://github.com/gridstack/gridstack.js/pull/1299) many columns round-off error
-- fix [1102](https://github.com/gridstack/gridstack.js/issues/1102) lose functionality when they are moved to a new grid
+- fix [1102](https://github.com/gridstack/gridstack.js/issues/1102) loose functionality when they are moved to a new grid
 
 ## 1.2.0 (2020-08-01)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "2.0.0-rc",
+  "version": "2.0.0-rc2",
   "description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
   "main": "./dist/index.js",
   "typings": "./dist/index.d.ts",

src/gridstack-dd.ts

@@ -1,4 +1,4 @@
-// gridstack-dd.ts 2.0.0-rc @preserve
+// gridstack-dd.ts 2.0.0-rc2 @preserve
 
 /**
  * https://gridstackjs.com/

src/gridstack-engine.ts

@@ -1,4 +1,4 @@
-// gridstack-engine.ts 2.0.0-rc @preserve
+// gridstack-engine.ts 2.0.0-rc2 @preserve
 
 /**
  * https://gridstackjs.com/
@@ -319,13 +319,15 @@ export class GridStackEngine {
     return node;
   }
 
-  public removeNode(node: GridStackNode, removeDOM = true, triggerRemoveEvent = false): GridStackEngine {
-    if (triggerRemoveEvent) { // we wait until final drop to manually track removed items (rather than during drag)
+  public removeNode(node: GridStackNode, removeDOM = true, triggerEvent = false): GridStackEngine {
+    if (triggerEvent) { // we wait until final drop to manually track removed items (rather than during drag)
       this.removedNodes.push(node);
     }
     node._id = null; // hint that node is being removed
-    this.nodes = this.nodes.filter(n => n !== node);
-    this._packNodes();
+    this.nodes.splice(this.nodes.findIndex(n => n === node), 1);
+    if (!this.float) {
+      this._packNodes();
+    }
     this._notify(node, removeDOM);
     return this;
   }

src/gridstack-extra.scss

@@ -1,5 +1,5 @@
 /*!
- * gridstack 2.0.0-rc extra CSS for [2-11] columns (non default)
+ * gridstack 2.0.0-rc2 extra CSS for [2-11] columns (non default)
  * https://gridstackjs.com/
  * (c) 2014-2020  Alain Dumesny, Dylan Weiss, Pavel Reznikov
  * gridstack.js may be freely distributed under the MIT license.

src/gridstack-poly.js

@@ -1,4 +1,4 @@
-// gridstack-poly.js 2.0.0-rc @preserve
+// gridstack-poly.js 2.0.0-rc2 @preserve
 
 /** IE and older browsers Polyfills for this library
  * https://gridstackjs.com/

src/gridstack.scss

@@ -1,5 +1,5 @@
 /*!
- * required gridstack 2.0.0-rc CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others
+ * required gridstack 2.0.0-rc2 CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others
  * https://gridstackjs.com/
  * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
  * gridstack.js may be freely distributed under the MIT license.

src/gridstack.ts

@@ -1,4 +1,4 @@
-// gridstack.ts 2.0.0-rc @preserve
+// gridstack.ts 2.0.0-rc2 @preserve
 
 /**
  * https://gridstackjs.com/
@@ -1214,10 +1214,11 @@ export class GridStack {
   }
 
   /** @internal prepares the element for drag&drop **/
-  private _prepareElementsByNode(el: GridItemHTMLElement, node: GridStackNode): GridStack {
+  private _prepareDragDropByNode(node: GridStackNode): GridStack {
     // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
     let cellWidth: number;
     let cellHeight: number;
+    let el = node.el;
 
     /** called when item starts moving/resizing */
     let onStartMoving = (event, ui) => {
@@ -1399,7 +1400,7 @@ export class GridStack {
     node = this.engine.addNode(node, triggerAddEvent);
     el.gridstackNode = node;
 
-    this._prepareElementsByNode(el, node);
+    this._prepareDragDropByNode(node);
     return this;
   }
 
@@ -1699,7 +1700,10 @@ export class GridStack {
         }
 
         // wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up
-        window.setTimeout(() => this._prepareElementsByNode(el, node));
+        // IFF we are still there (soe application will use as placeholder and insert their real widget instead)
+        window.setTimeout(() => {
+          if (node.el && node.el.parentElement) this._prepareDragDropByNode(node);
+        });
 
         return false; // prevent parent from receiving msg (which may be grid as well)
       });

src/jq/gridstack-dd-jqueryui.ts

@@ -1,4 +1,4 @@
-// gridstack-dd-jqueryui.ts 2.0.0-rc @preserve
+// gridstack-dd-jqueryui.ts 2.0.0-rc2 @preserve
 
 /** JQuery UI Drag&Drop plugin
  * https://gridstackjs.com/