Merge pull request gridstack#1607 from adumesny/develop

adumesny · web-flow · commit fcbecd48de24 · 2021-02-02T19:57:36.000-08:00
H5: resize from left side can move item right
diff --git 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-1559-left-resize-maxW-and-others.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
@@ -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));
