addGrid() checks for nested '.grid-stack' div

part of #1687

Author: adumesny

doc/CHANGES.md

@@ -55,6 +55,8 @@ Change log
 - fix [#1679](https://github.com/gridstack/gridstack.js/issues/1679) `Resizable: {handles:'w/sw'}` work again in 4.x
 - fix [#1658](https://github.com/gridstack/gridstack.js/issues/1658) `enableMove(T/F)` not working correctly
 - fix `helper: myFunction` now working for H5 case for `dragInOptions` & `setupDragIn()`
+- fix prevent `addGrid()` from creating nested div grid if container already is a '.grid-stack' div
+
 ## 4.0.1 (2021-3-20)
 
 - fix [#1669](https://github.com/gridstack/gridstack.js/issues/1669) JQ resize broken

src/gridstack-dd.ts

@@ -94,8 +94,6 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
     if (!node) return;
 
     helper = helper || el;
-    // let left = event.pageX - gridPos.left;
-    // let top = event.pageY - gridPos.top;
     let rec = helper.getBoundingClientRect();
     let left = rec.left - gridPos.left;
     let top = rec.top - gridPos.top;
@@ -532,7 +530,7 @@ GridStack.prototype._leave = function(node: GridStackNode, el: GridItemHTMLEleme
 
 /** @internal called when item is being dragged/resized */
 GridStack.prototype._dragOrResize = function(el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number)  {
-  let p = {...node._orig};
+  let p = {...node._orig}; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
   let resizing: boolean;
 
   if (event.type === 'drag') {

src/gridstack.ts

@@ -160,11 +160,14 @@ export class GridStack {
   public static addGrid(parent: HTMLElement, opt: GridStackOptions = {}): GridStack {
     if (!parent) return null;
 
-    // create the grid element
-    let doc = document.implementation.createHTMLDocument();
-    doc.body.innerHTML = `<div class="grid-stack ${opt.class || ''}"></div>`;
-    let el = doc.body.children[0] as HTMLElement;
-    parent.appendChild(el);
+    // create the grid element, but check if the passed 'parent' already has grid styling and should be used instead
+    let el = parent;
+    if (!parent.classList.contains('grid-stack')) {
+      let doc = document.implementation.createHTMLDocument();
+      doc.body.innerHTML = `<div class="grid-stack ${opt.class || ''}"></div>`;
+      el = doc.body.children[0] as HTMLElement;
+      parent.appendChild(el);
+    }
 
     // create grid class and load any children
     let grid = GridStack.init(opt, el);