review changes

Author: hbcarlos

src/gridstack-dd.ts

@@ -353,10 +353,8 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
       this._gsEventHandler[event.type](event, target);
     }
 
-    // Saving `minRow` and adding new ones for resizing
+    // Saving `minRow`
     minRow = this.opts.minRow;
-    this.opts.minRow = this.getRow() + 100;
-    this._updateContainerHeight();
 
     this.engine.cleanNodes();
     this.engine.beginUpdate(node);
@@ -428,8 +426,17 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
       if (node._lastTriedX === x && node._lastTriedY === y) return;
     } else if (event.type === 'resize')  {
       if (x < 0) return;
+      // Addin an extra row if the item it's at the bottom of the layout
+      if (node.y+node.h >= this.getRow()-1) {
+        this.opts.minRow = this.getRow() + 1;
+        this._updateContainerHeight();
+      }
+
       // Scrolling page if needed
       Utils.updateScrollResize(event as MouseEvent, el, cellHeight);
+      // Restore minRow
+      this.opts.minRow = minRow;
+
       w = Math.round(ui.size.width / cellWidth);
       h = Math.round(ui.size.height / cellHeight);
       if (w === node.w && h === node.h) return;
@@ -491,10 +498,6 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
 
     this.engine.endUpdate();
 
-    // Removing lines rows added on `resizestart`
-    this.opts.minRow = minRow;
-    this._updateContainerHeight();
-
     // if we re-sized a nested grid item, let the children resize as well
     if (event.type === 'resizestop') {
       this._resizeNestedGrids(target);

src/h5/dd-resizable.ts

@@ -40,6 +40,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   private scrollY: number;
   /** @internal */
+  private scrolled: number;
+  /** @internal */
   private startEvent: MouseEvent;
   /** @internal value saved in the same order as _originStyleProp[] */
   private elOriginStyleVal: string[];
@@ -156,7 +158,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   private _resizeStart(event: MouseEvent): DDResizable {
     this.originalRect = this.el.getBoundingClientRect();
     const scrollEl = Utils.getScrollParent(this.el);
-    this.scrollY = scrollEl === null ? 0 : scrollEl.scrollTop;
+    this.scrollY = scrollEl ? scrollEl.scrollTop : 0;
     this.startEvent = event;
     this._setupHelper();
     this._applyChange();
@@ -171,6 +173,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   private _resizing(event: MouseEvent, dir: string): DDResizable {
+    const scrollEl = Utils.getScrollParent(this.el);
+    this.scrolled = scrollEl ? (scrollEl.scrollTop - this.scrollY) : this.scrollY;
     this.temporalRect = this._getChange(event, dir);
     this._applyChange();
     const ev = DDUtils.initEvent<MouseEvent>(event, { type: 'resize', target: this.el });
@@ -194,6 +198,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     delete this.originalRect;
     delete this.temporalRect;
     delete this.scrollY;
+    delete this.scrolled;
     return this;
   }
 
@@ -222,13 +227,11 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   private _getChange(event: MouseEvent, dir: string): Rect {
     const oEvent = this.startEvent;
-    const scrollEl = Utils.getScrollParent(this.el);
-    const scrolled = scrollEl === null ? 0 : (scrollEl.scrollTop - this.scrollY);
     const newRect = { // Note: originalRect is a complex object, not a simple Rect, so copy out.
       width: this.originalRect.width,
-      height: this.originalRect.height + scrolled,
+      height: this.originalRect.height + this.scrolled,
       left: this.originalRect.left,
-      top: this.originalRect.top - scrolled
+      top: this.originalRect.top - this.scrolled
     };
 
     const offsetH = event.clientX - oEvent.clientX;
@@ -300,14 +303,12 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   private _ui = (): DDUIData => {
-    const scrollEl = Utils.getScrollParent(this.el);
-    const scrolled = scrollEl === null ? 0 : (scrollEl.scrollTop - this.scrollY);
     const containmentRect = this.el.parentElement.getBoundingClientRect();
     const newRect = { // Note: originalRect is a complex object, not a simple Rect, so copy out.
       width: this.originalRect.width,
-      height: this.originalRect.height + scrolled,
+      height: this.originalRect.height + this.scrolled,
       left: this.originalRect.left,
-      top: this.originalRect.top - scrolled
+      top: this.originalRect.top - this.scrolled
     };
     const rect = this.temporalRect || newRect;
     return {

src/utils.ts

@@ -328,10 +328,18 @@ export class Utils {
     }
   }
 
-  /** @internal */
+  /** 
+   * @internal
+   * 
+   * Function used to scroll the page.
+   * 
+   * @param event `MouseEvent` that triggers the resize
+   * @param el `HTMLElement` that's being resized
+   * @param distance Distance to scroll
+   */
   static updateScrollResize(event: MouseEvent, el: HTMLElement, distance: number): void {
     let scrollEl = this.getScrollParent(el);
-    if (scrollEl === null) return;
+    if (!scrollEl ) return;
 
     //const width = scrollEl.clientWidth;
     const height = scrollEl.clientHeight;
@@ -343,9 +351,8 @@ export class Utils {
       // This also can be done with a timeout to keep scrolling while the mouse is
       // in the scrolling zone. (will have smoother behavior)
       scrollEl.scrollBy({ behavior: 'smooth', top: event.clientY - distance});
-    }
 
-    if (bottom) {
+    } else if (bottom) {
       scrollEl.scrollBy({ behavior: 'smooth', top: distance - (height - event.clientY)});
     }
   }