W side resize and maxW fix

fix gridstack#1330 * we now set maxWidth/maxHeight to prevent grid item from resizing past their size * fixed code to prevent item from moving left when they reach max width * added sample test case
adumesny · Dec 6, 2020 · 1686d9d · 1686d9d
1 parent 64a8264
commit 1686d9d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 15 deletions.
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -46,6 +46,7 @@ Change log
 ## 3.1.0-dev
 
 - fix [1419](https://github.com/gridstack/gridstack.js/issues/1419) dragging into a fixed row grid works better (check if it will fit, else try to append, else won't insert)
+- fix [1330](https://github.com/gridstack/gridstack.js/issues/1330) `maxW` does not work as intended with resizable handle `"w"`
 
 ## 3.1.0 (2020-12-4)
 

diff --git a/spec/e2e/html/1330-maxw-left-resize.html b/spec/e2e/html/1330-maxw-left-resize.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>resize maxW</title>
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <script src="../../../dist/gridstack-h5.js"></script>
+</head>
+<body>
+  <div class="container-fluid">
+    <p>resize to left with maxW set</p>
+    <div class="grid-stack"></div>
+  </div>
+  <script src="../../../demo/events.js"></script>
+  <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'}]);
+  </script>
+</body>
+</html>
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
@@ -21,7 +21,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';
+export type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';
 export type DDValue = number | string;
 
 /** drag&drop events callbacks */
@@ -373,22 +373,29 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
 
     GridStackDD.get().resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1));
     GridStackDD.get().resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));
+    // also set max if set #1330
+    if (node.maxW) {
+      GridStackDD.get().resizable(el, 'option', 'maxWidth', cellWidth * node.maxW);
+    }
+    if (node.maxH) {
+      GridStackDD.get().resizable(el, 'option', 'maxHeight', cellHeight * node.maxH);
+    }
   }
 
   /** called when item is being dragged/resized */
   let dragOrResize = (event: Event, ui: DDUIData): void => {
     let x = Math.round(ui.position.left / cellWidth);
     let y = Math.floor((ui.position.top + cellHeight / 2) / cellHeight);
-    let w;
-    let h;
+    let w: number;
+    let h: number;
 
     if (event.type === 'drag') {
       let distance = ui.position.top - node._prevYPix;
       node._prevYPix = ui.position.top;
       Utils.updateScrollPosition(el, ui.position, distance);
       // if inTrash, outside of the bounds or added to another grid (#393) temporarily remove it from us
       if (el.dataset.inTrashZone || x < 0 || x >= this.engine.column || y < 0 || (!this.engine.float && y > this.engine.getRow()) || node._added) {
-        if (node._temporaryRemoved) { return; }
+        if (node._temporaryRemoved) return;
         if (this.opts.removable === true) {
           this._setupRemovingTimeout(el);
         }
@@ -415,19 +422,15 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
           delete node._temporaryRemoved;
         }
       }
+      if (node._lastTriedX === x && node._lastTriedY === y) return;
     } else if (event.type === 'resize')  {
       if (x < 0) return;
       w = Math.round(ui.size.width / cellWidth);
       h = Math.round(ui.size.height / cellHeight);
+      if (w === node.w && h === node.h) return;
     }
-    // width and height are undefined if not resizing
-    let _lastTriedW = (w || node._lastTriedW);
-    let _lastTriedH = (h || node._lastTriedH);
-    if (!this.engine.canMoveNode(node, x, y, w, h) ||
-      (node._lastTriedX === x && node._lastTriedY === y &&
-      node._lastTriedW === _lastTriedW && node._lastTriedH === _lastTriedH)) {
-      return;
-    }
+
+    if (!this.engine.canMoveNode(node, x, y, w, h)) return;
     node._lastTriedX = x;
     node._lastTriedY = y;
     node._lastTriedW = w;

diff --git a/src/h5/dd-resizable.ts b/src/h5/dd-resizable.ts
@@ -242,13 +242,13 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     const reshape = this._getReShapeSize(newRect.width, newRect.height);
     if (newRect.width !== reshape.width) {
       if (dir.indexOf('w') > -1) {
-        newRect.left += reshape.width - newRect.width;
+        newRect.left += newRect.width - reshape.width;
       }
       newRect.width = reshape.width;
     }
     if (newRect.height !== reshape.height) {
       if (dir.indexOf('n') > -1) {
-        newRect.top += reshape.height - newRect.height;
+        newRect.top += newRect.height - reshape.height;
       }
       newRect.height = reshape.height;
     }
@@ -274,7 +274,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
       const { left, top } = containmentEl.getBoundingClientRect();
       containmentRect = { left, top, width: 0, height: 0 };
     }
-    Object.keys(this.temporalRect || this.originalRect).forEach(key => {
+    if (!this.temporalRect) return this;
+    Object.keys(this.temporalRect).forEach(key => {
       const value = this.temporalRect[key];
       this.el.style[key] = value - containmentRect[key] + 'px';
     });