Merge pull request gridstack#2680 from adumesny/master

adumesny · web-flow · commit 76d01b032cf6 · 2024-05-25T11:57:58.000-07:00
handle minW resizing when column count is less
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); }
     }

Original file line number	Diff line number	Diff line change
`@@ -2470,11 +2470,11 @@ export class GridStack {`
`2470`	`2470`	`node._moving = true; // AFTER, mark as moving object (wanted fix location before)`
`2471`	`2471`	`}`
`2472`	`2472`
`2473`		`- // set the min/max resize info`
	`2473`	`+ // set the min/max resize info taking into account the column count and position (so we don't resize outside the grid)`
`2474`	`2474`	`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);`
`2475`	`2475`	`if (event.type === 'resizestart') {`
`2476`		`- dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minW \|\| 1))`
`2477`		`- .resizable(el, 'option', 'minHeight', cellHeight * (node.minH \|\| 1));`
	`2476`	`+ dd.resizable(el, 'option', 'minWidth', cellWidth * Math.min(node.minW \|\| 1, this.getColumn() - node.x))`
	`2477`	`+ .resizable(el, 'option', 'minHeight', cellHeight * Math.min(node.minH \|\| 1, (this.opts.maxRow \|\| Number.MAX_SAFE_INTEGER) - node.y));`
`2478`	`2478`	`if (node.maxW) { dd.resizable(el, 'option', 'maxWidth', cellWidth * node.maxW); }`
`2479`	`2479`	`if (node.maxH) { dd.resizable(el, 'option', 'maxHeight', cellHeight * node.maxH); }`
`2480`	`2480`	`}`