Resizing issue

Author: hbcarlos

src/gridstack-dd.ts

@@ -342,6 +342,7 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
   // variables used/cashed between the 3 start/move/end methods, in addition to node passed above
   let cellWidth: number;
   let cellHeight: number;
+  let minRow: number;
 
   /** called when item starts moving/resizing */
   let onStartMoving = (event: Event, ui: DDUIData): void => {
@@ -352,6 +353,11 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
       this._gsEventHandler[event.type](event, target);
     }
 
+    // Saving `minRow` and adding new ones for resizing
+    minRow = this.opts.minRow;
+    this.opts.minRow = this.getRow() + 100;
+    this._updateContainerHeight();
+
     this.engine.cleanNodes();
     this.engine.beginUpdate(node);
     cellWidth = this.cellWidth();
@@ -422,6 +428,8 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
       if (node._lastTriedX === x && node._lastTriedY === y) return;
     } else if (event.type === 'resize')  {
       if (x < 0) return;
+      // Scrolling page if needed
+      Utils.updateScrollResize(event as MouseEvent, el, cellHeight);
       w = Math.round(ui.size.width / cellWidth);
       h = Math.round(ui.size.height / cellHeight);
       if (w === node.w && h === node.h) return;
@@ -483,6 +491,10 @@ 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

@@ -8,6 +8,7 @@
 import { DDResizableHandle } from './dd-resizable-handle';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
 import { DDUtils } from './dd-utils';
+import { Utils } from '../utils';
 import { DDUIData, Rect, Size } from '../types';
 
 // TODO: merge with DDDragOpt
@@ -37,6 +38,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   private temporalRect: Rect;
   /** @internal */
+  private scrollY: number;
+  /** @internal */
   private startEvent: MouseEvent;
   /** @internal value saved in the same order as _originStyleProp[] */
   private elOriginStyleVal: string[];
@@ -152,6 +155,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   private _resizeStart(event: MouseEvent): DDResizable {
     this.originalRect = this.el.getBoundingClientRect();
+    const scrollEl = Utils.getScrollParent(this.el);
+    this.scrollY = scrollEl === null ? 0 : scrollEl.scrollTop;
     this.startEvent = event;
     this._setupHelper();
     this._applyChange();
@@ -188,6 +193,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     delete this.startEvent;
     delete this.originalRect;
     delete this.temporalRect;
+    delete this.scrollY;
     return this;
   }
 
@@ -216,12 +222,15 @@ 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,
+      height: this.originalRect.height + scrolled,
       left: this.originalRect.left,
-      top: this.originalRect.top
+      top: this.originalRect.top - scrolled
     };
+    
     const offsetH = event.clientX - oEvent.clientX;
     const offsetV = event.clientY - oEvent.clientY;
 
@@ -291,9 +300,16 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   private _ui = (): DDUIData => {
-    const containmentEl = this.el.parentElement;
-    const containmentRect = containmentEl.getBoundingClientRect();
-    const rect = this.temporalRect || this.originalRect;
+    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,
+      left: this.originalRect.left,
+      top: this.originalRect.top - scrolled
+    };
+    const rect = this.temporalRect || newRect;
     return {
       position: {
         left: rect.left - containmentRect.left,

src/utils.ts

@@ -327,5 +327,27 @@ export class Utils {
       }
     }
   }
+
+  /** @internal */
+  static updateScrollResize(event: MouseEvent, el: HTMLElement, distance: number): void {
+    let scrollEl = this.getScrollParent(el);
+    if (scrollEl === null) return;
+
+    //const width = scrollEl.clientWidth;
+    const height = scrollEl.clientHeight;
+
+    const top = event.clientY < distance;
+    const bottom = event.clientY > height - distance;
+
+    if (top) {
+      // 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) {
+      scrollEl.scrollBy({ behavior: 'smooth', top: distance - (height - event.clientY)});
+    }
+  }
 }