From 56493d93cec3a965468e697d0507b76092edc557 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Tue, 2 Feb 2021 19:56:34 -0800
Subject: [PATCH] H5: resize from left side can move item right

* fix 1599
---
 doc/CHANGES.md                                   |  1 +
 ...> 1330-1559-left-resize-maxW-and-others.html} |  6 +++++-
 src/h5/dd-resizable.ts                           | 16 ++++++++--------
 3 files changed, 14 insertions(+), 9 deletions(-)
 rename spec/e2e/html/{1330-maxw-left-resize.html => 1330-1559-left-resize-maxW-and-others.html} (77%)

diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 031b25041..7d42c802a 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -56,6 +56,7 @@ Change log
 - fix [1600](https://github.com/gridstack/gridstack.js/issues/1600) height too small with `cellHeight:auto` loading in 1 column. Now detect we load at 1 column and size accordingly (default 'auto' could make big 700x700 cells, so explicit px might still be wanted)
 - fix [1538](https://github.com/gridstack/gridstack.js/issues/1538) loading nested into small size and sizing back up
 - fix [1604](https://github.com/gridstack/gridstack.js/issues/1604) nested grid resizing fix
+- fix [1599](https://github.com/gridstack/gridstack.js/issues/1599) resize from left side can move item right
 
 ## 3.2.0 (2021-1-25)
 
diff --git a/spec/e2e/html/1330-maxw-left-resize.html b/spec/e2e/html/1330-1559-left-resize-maxW-and-others.html
similarity index 77%
rename from spec/e2e/html/1330-maxw-left-resize.html
rename to spec/e2e/html/1330-1559-left-resize-maxW-and-others.html
index a04e2ce41..496e57003 100644
--- a/spec/e2e/html/1330-maxw-left-resize.html
+++ b/spec/e2e/html/1330-1559-left-resize-maxW-and-others.html
@@ -15,7 +15,11 @@
   <script type="text/javascript">
     let grid = GridStack.init({resizable: { handles: 'sw, se, w, e, s' }});
     addEvents(grid);
-    grid.load([{x: 2, y: 0, maxW: 1, content: 'max 1'}, {x: 5, y: 0, maxW: 2, content: 'max 2'}]);
+    grid.load([
+      {x: 2, y: 0, maxW: 1, content: 'max 1'},
+      {x: 5, y: 0, maxW: 2, content: 'max 2'},
+      {x: 7, y: 0, content: 'normal'},
+    ]);
   </script>
 </body>
 </html>
diff --git a/src/h5/dd-resizable.ts b/src/h5/dd-resizable.ts
index 5cc833006..0bf9bcb04 100644
--- a/src/h5/dd-resizable.ts
+++ b/src/h5/dd-resizable.ts
@@ -232,8 +232,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
       top: this.originalRect.top - this.scrolled
     };
     
-    const offsetH = event.clientX - oEvent.clientX;
-    const offsetV = event.clientY - oEvent.clientY;
+    const offsetX = event.clientX - oEvent.clientX;
+    const offsetY = event.clientY - oEvent.clientY;
 
     if (dir.indexOf('e') > -1) {
       newRect.width += event.clientX - oEvent.clientX;
@@ -242,12 +242,12 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
       newRect.height += event.clientY - oEvent.clientY;
     }
     if (dir.indexOf('w') > -1) {
-      newRect.width -= offsetH;
-      newRect.left += offsetH;
+      newRect.width -= offsetX;
+      newRect.left += offsetX;
     }
     if (dir.indexOf('n') > -1) {
-      newRect.height -= offsetV;
-      newRect.top += offsetV
+      newRect.height -= offsetY;
+      newRect.top += offsetY
     }
     const reshape = this._getReShapeSize(newRect.width, newRect.height);
     if (newRect.width !== reshape.width) {
@@ -267,9 +267,9 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   private _getReShapeSize(oWidth: number, oHeight: number): Size {
-    const maxWidth = this.option.maxWidth || oWidth;
+    const maxWidth = this.option.maxWidth || Number.MAX_SAFE_INTEGER;
     const minWidth = this.option.minWidth || oWidth;
-    const maxHeight = this.option.maxHeight || oHeight;
+    const maxHeight = this.option.maxHeight || Number.MAX_SAFE_INTEGER;
     const minHeight = this.option.minHeight || oHeight;
     const width = Math.min(maxWidth, Math.max(minWidth, oWidth));
     const height = Math.min(maxHeight, Math.max(minHeight, oHeight));