handle minW resizing when column count is less

* fix #2676
gridstack · May 25, 2024 · bb5e0d6 · bb5e0d6
1 parent 6b4ae89
commit bb5e0d6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/demo/responsive.html b/demo/responsive.html
@@ -43,7 +43,7 @@ <h1>Responsive: by column size</h1>
     let count = 0;
     let items = [ // our initial 12 column layout loaded first so we can compare
       {x: 0, y: 0},
-      {x: 1, y: 0, w: 2, h: 2},
+      {x: 1, y: 0, w: 2, h: 2, minW: 4},
       {x: 4, y: 0, w: 2},
       {x: 1, y: 3, w: 4},
       {x: 5, y: 3, w: 2},

diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [10.1.2-dev (TBD)](#1012-dev-tbd)
 - [10.1.2 (2024-03-30)](#1012-2024-03-30)
 - [10.1.1 (2024-03-03)](#1011-2024-03-03)
 - [10.1.0 (2024-02-04)](#1010-2024-02-04)
@@ -108,6 +109,10 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+## 10.1.2-dev (TBD)
+* fix: [#2672](https://github.com/gridstack/gridstack.js/pull/2672) dropping into full grid JS error
+* fix: [#2676](https://github.com/gridstack/gridstack.js/issues/2676) handle minW resizing when column count is less
+
 ## 10.1.2 (2024-03-30)
 * fix: [#2628](https://github.com/gridstack/gridstack.js/issues/2628) `removeAll()` does not trigger Angular's ngOnDestroy 
 * fix: [#2503](https://github.com/gridstack/gridstack.js/issues/2503) Drag and drop a widget on top of a locked widget - Thank you [JakubEleniuk](https://github.com/JakubEleniuk)

diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -2470,11 +2470,11 @@ export class GridStack {
       node._moving = true; // AFTER, mark as moving object (wanted fix location before)
     }
 
-    // set the min/max resize info
+    // set the min/max resize info taking into account the column count and position (so we don't resize outside the grid)
     this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop as number, this.opts.marginRight as number, this.opts.marginBottom as number, this.opts.marginLeft as number);
     if (event.type === 'resizestart') {
-      dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1))
-        .resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));
+      dd.resizable(el, 'option', 'minWidth', cellWidth * Math.min(node.minW || 1, this.getColumn() - node.x))
+        .resizable(el, 'option', 'minHeight', cellHeight * Math.min(node.minH || 1, (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - node.y));
       if (node.maxW) { dd.resizable(el, 'option', 'maxWidth', cellWidth * node.maxW); }
       if (node.maxH) { dd.resizable(el, 'option', 'maxHeight', cellHeight * node.maxH); }
     }