diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 0985c29f2..d01965ea2 100644
--- 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
new file mode 100644
index 000000000..a04e2ce41
--- /dev/null
+++ b/spec/e2e/html/1330-maxw-left-resize.html
@@ -0,0 +1,21 @@
+
+
+
+
+ resize maxW
+
+
+
+
+
+
resize to left with maxW set
+
+
+
+
+
+
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
index 6359e7036..2f6fb9e08 100644
--- 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,14 +373,21 @@ 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;
@@ -388,7 +395,7 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
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
index 8447fd34a..d9b348051 100644
--- 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';
});