fix resize when padding is large vs cellHeight

* fix #1855
* reduce padding when calculating mid point if more than 10% of the cell height/width so it doesn't throw off calculations

Author: adumesny

doc/CHANGES.md

@@ -66,6 +66,7 @@ Change log
 ## 4.3.0-dev (TBD)
 * fix [#1868](https://github.com/gridstack/gridstack.js/issues/1868) prevent swap during resize
 * fix [#1849](https://github.com/gridstack/gridstack.js/issues/1849) [#1816](https://github.com/gridstack/gridstack.js/issues/1816) save highest resolution in 1 column mode
+* fix [#1855](https://github.com/gridstack/gridstack.js/issues/1855) fix resize when padding is large vs cellHeight
 
 ## 4.3.0 (2021-10-15)
 * you can now swap items of different width if they are the same row/height. Thanks to [spektrummedia](http://spektrummedia.com) for sponsoring it.

src/gridstack-dd.ts

@@ -535,11 +535,19 @@ GridStack.prototype._leave = function(this: GridStack, el: GridItemHTMLElement,
 GridStack.prototype._dragOrResize = function(this: GridStack, el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number)  {
   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;
-  const mLeft = this.opts.marginLeft as number,
+  let mLeft = this.opts.marginLeft as number,
     mRight = this.opts.marginRight as number,
     mTop = this.opts.marginTop as number,
     mBottom = this.opts.marginBottom as number;
 
+  // if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855
+  let mHeight = Math.round(cellHeight * 0.1),
+    mWidth = Math.round(cellWidth * 0.1);
+  mLeft = Math.min(mLeft, mWidth);
+  mRight = Math.min(mRight, mWidth);
+  mTop = Math.min(mTop, mHeight);
+  mBottom = Math.min(mBottom, mHeight);
+
   if (event.type === 'drag') {
     if (node._temporaryRemoved) return; // handled by dropover
     let distance = ui.position.top - node._prevYPix;

src/h5/dd-resizable.ts

@@ -156,6 +156,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     this.originalRect = this.el.getBoundingClientRect();
     this.scrollEl = Utils.getScrollElement(this.el);
     this.scrollY = this.scrollEl.scrollTop;
+    this.scrolled = 0;
     this.startEvent = event;
     this._setupHelper();
     this._applyChange();