resizing left from right most item works

* fix #2730
* we now have a max remaining left side and top side so we can correctly resize elements that are places at the edge, sizing back towards (0,0)

Author: adumesny

doc/CHANGES.md

@@ -117,6 +117,7 @@ Change log
 * fix: [#2734](https://github.com/gridstack/gridstack.js/bug/2734) rotate() JS error
 * fix: [#2741](https://github.com/gridstack/gridstack.js/pull/2741) resizeToContent JS error with nested grid
 * fix: [#2740](https://github.com/gridstack/gridstack.js/bug/2740) nested grid drag fix
+* fix: [#2730](https://github.com/gridstack/gridstack.js/bug/2730) resizing left from right most item works
 
 ## 10.3.0 (2024-06-26)
 * fix: [#2720](https://github.com/gridstack/gridstack.js/pull/2720) load() now creates widgets in order (used to be reverse due to old collision code)

src/dd-gridstack.ts

@@ -18,7 +18,7 @@ export type DDDropOpt = {
 /** drag&drop options currently called from the main code, but others can be passed in grid options */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
-export type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';
+export type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'maxHeightMoveUp' | 'maxWidthMoveLeft';
 export type DDValue = number | string;
 
 /** drag&drop events callbacks */

src/dd-resizable.ts

@@ -16,7 +16,9 @@ export interface DDResizableOpt {
   autoHide?: boolean;
   handles?: string;
   maxHeight?: number;
+  maxHeightMoveUp?: number;
   maxWidth?: number;
+  maxWidthMoveLeft?: number;
   minHeight?: number;
   minWidth?: number;
   start?: (event: Event, ui: DDUIData) => void;
@@ -254,20 +256,24 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
     const offsetX = event.clientX - oEvent.clientX;
     const offsetY = this.sizeToContent ? 0 : event.clientY - oEvent.clientY; // prevent vert resize
+    let moveLeft: boolean;
+    let moveUp: boolean;
 
     if (dir.indexOf('e') > -1) {
       newRect.width += offsetX;
     } else if (dir.indexOf('w') > -1) {
       newRect.width -= offsetX;
       newRect.left += offsetX;
+      moveLeft = true;
     }
     if (dir.indexOf('s') > -1) {
       newRect.height += offsetY;
     } else if (dir.indexOf('n') > -1) {
       newRect.height -= offsetY;
       newRect.top += offsetY
+      moveUp = true;
     }
-    const constrain = this._constrainSize(newRect.width, newRect.height);
+    const constrain = this._constrainSize(newRect.width, newRect.height, moveLeft, moveUp);
     if (Math.round(newRect.width) !== Math.round(constrain.width)) { // round to ignore slight round-off errors
       if (dir.indexOf('w') > -1) {
         newRect.left += newRect.width - constrain.width;
@@ -284,11 +290,12 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   }
 
   /** @internal constrain the size to the set min/max values */
-  protected _constrainSize(oWidth: number, oHeight: number): Size {
-    const maxWidth = this.option.maxWidth || Number.MAX_SAFE_INTEGER;
-    const minWidth = this.option.minWidth / this.rectScale.x || oWidth;
-    const maxHeight = this.option.maxHeight || Number.MAX_SAFE_INTEGER;
-    const minHeight = this.option.minHeight / this.rectScale.y || oHeight;
+  protected _constrainSize(oWidth: number, oHeight: number, moveLeft: boolean, moveUp: boolean): Size {
+    const o = this.option;
+    const maxWidth = (moveLeft ? o.maxWidthMoveLeft : o.maxWidth) || Number.MAX_SAFE_INTEGER;
+    const minWidth = o.minWidth / this.rectScale.x || oWidth;
+    const maxHeight = (moveUp ? o.maxHeightMoveUp : o.maxHeight) || Number.MAX_SAFE_INTEGER;
+    const minHeight = o.minHeight / this.rectScale.y || oHeight;
     const width = Math.min(maxWidth, Math.max(minWidth, oWidth));
     const height = Math.min(maxHeight, Math.max(minHeight, oHeight));
     return { width, height };

src/gridstack.ts

@@ -2505,7 +2505,9 @@ export class GridStack {
       dd.resizable(el, 'option', 'minWidth', cellWidth * Math.min(node.minW || 1, colLeft))
         .resizable(el, 'option', 'minHeight', cellHeight * Math.min(node.minH || 1, rowLeft))
         .resizable(el, 'option', 'maxWidth', cellWidth * Math.min(node.maxW || Number.MAX_SAFE_INTEGER, colLeft))
-        .resizable(el, 'option', 'maxHeight', cellHeight * Math.min(node.maxH || Number.MAX_SAFE_INTEGER, rowLeft));
+        .resizable(el, 'option', 'maxWidthMoveLeft', cellWidth * Math.min(node.maxW || Number.MAX_SAFE_INTEGER, node.x+node.w))
+        .resizable(el, 'option', 'maxHeight', cellHeight * Math.min(node.maxH || Number.MAX_SAFE_INTEGER, rowLeft))
+        .resizable(el, 'option', 'maxHeightMoveUp', cellHeight * Math.min(node.maxH || Number.MAX_SAFE_INTEGER, node.y+node.h));
     }
   }