JQ resize fix

fix #1669
now pass the original element around, as node.el is the placeholder during resize
(which doesn't have resize handlers)

Author: adumesny

doc/CHANGES.md

@@ -51,6 +51,7 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 ## 4.0.0-dev
 
+- fix [#1669](https://github.com/gridstack/gridstack.js/issues/1669) JQ resize broken
 - fix [#1661](https://github.com/gridstack/gridstack.js/issues/1661) serialization of nested grid
 
 ## 4.0.0 (2021-3-19)

src/gridstack-dd.ts

@@ -114,10 +114,10 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
       }
 
       // re-use the existing node dragging method
-      this._onStartMoving(event, ui, node, cellWidth, cellHeight);
+      this._onStartMoving(helper, event, ui, node, cellWidth, cellHeight);
     } else {
       // re-use the existing node dragging that does so much of the collision detection
-      this._dragOrResize(event, ui, node, cellWidth, cellHeight);
+      this._dragOrResize(helper, event, ui, node, cellWidth, cellHeight);
     }
   }
 
@@ -387,12 +387,12 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
     cellWidth = this.cellWidth();
     cellHeight = this.getCellHeight(true); // force pixels for calculations
 
-    this._onStartMoving(event, ui, node, cellWidth, cellHeight);
+    this._onStartMoving(el, event, ui, node, cellWidth, cellHeight);
   }
 
   /** called when item is being dragged/resized */
   let dragOrResize = (event: Event, ui: DDUIData) => {
-    this._dragOrResize(event, ui, node, cellWidth, cellHeight);
+    this._dragOrResize(el, event, ui, node, cellWidth, cellHeight);
   }
 
   /** called when the item stops moving/resizing */
@@ -466,7 +466,7 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
 }
 
 /** @internal called when item is starting a drag/resize */
-GridStack.prototype._onStartMoving = function(event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number) {
+GridStack.prototype._onStartMoving = function(el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number) {
   this.engine.cleanNodes()
     .beginUpdate(node);
 
@@ -490,7 +490,6 @@ GridStack.prototype._onStartMoving = function(event: Event, ui: DDUIData, node:
   // set the min/max resize info
   this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft);
   if (event.type === 'resizestart') {
-    let el = node.el;
     let dd = GridStackDD.get()
       .resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1))
       .resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));
@@ -533,8 +532,7 @@ GridStack.prototype._leave = function(node: GridStackNode, el: GridItemHTMLEleme
 }
 
 /** @internal called when item is being dragged/resized */
-GridStack.prototype._dragOrResize = function(event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number)  {
-  let el = node.el || event.target as GridItemHTMLElement;
+GridStack.prototype._dragOrResize = function(el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number)  {
   // calculate the place where we're landing by offsetting margin so actual edge crosses mid point
   let left = ui.position.left + (ui.position.left > node._lastUiPosition.left  ? -this.opts.marginRight : this.opts.marginLeft);
   let top = ui.position.top + (ui.position.top > node._lastUiPosition.top  ? -this.opts.marginBottom : this.opts.marginTop);

src/gridstack.ts

@@ -1512,9 +1512,9 @@ export class GridStack {
   /** @internal prepares the element for drag&drop **/
   public _prepareDragDropByNode(node: GridStackNode): GridStack { return this }
   /** @internal handles actual drag/resize start **/
-  public _onStartMoving(event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void { return }
+  public _onStartMoving(el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void { return }
   /** @internal handles actual drag/resize **/
-  public _dragOrResize(event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void { return }
+  public _dragOrResize(el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void { return }
   /** @internal called when a node leaves our area (mouse out or shape outside) **/
   public _leave(node: GridStackNode, el: GridItemHTMLElement, helper?: GridItemHTMLElement, dropoutEvent = false): void { return }
 }