Skip to content

Commit 1686d9d

Browse files
adumesnyadumesny
committed
W side resize and maxW fix
fix #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
1 parent 64a8264 commit 1686d9d

File tree

4 files changed

+41
-15
lines changed

4 files changed

+41
-15
lines changed

‎doc/CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ Change log
4646
## 3.1.0-dev
4747

4848
- 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)
49+
- fix [1330](https://github.com/gridstack/gridstack.js/issues/1330) `maxW` does not work as intended with resizable handle `"w"`
4950

5051
## 3.1.0 (2020-12-4)
5152

‎spec/e2e/html/1330-maxw-left-resize.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>resize maxW</title>
6+
<link rel="stylesheet" href="../../../demo/demo.css"/>
7+
<script src="../../../dist/gridstack-h5.js"></script>
8+
</head>
9+
<body>
10+
<div class="container-fluid">
11+
<p>resize to left with maxW set</p>
12+
<div class="grid-stack"></div>
13+
</div>
14+
<script src="../../../demo/events.js"></script>
15+
<script type="text/javascript">
16+
let grid = GridStack.init({resizable: { handles: 'sw, se, w, e, s' }});
17+
addEvents(grid);
18+
grid.load([{x: 2, y: 0, maxW: 1, content: 'max 1'}, {x: 5, y: 0, maxW: 2, content: 'max 2'}]);
19+
</script>
20+
</body>
21+
</html>

‎src/gridstack-dd.ts

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export type DDDropOpt = {
2121
/** drag&drop options currently called from the main code, but others can be passed in grid options */
2222
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2323
export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
24-
export type DDKey = 'minWidth' | 'minHeight';
24+
export type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';
2525
export type DDValue = number | string;
2626

2727
/** drag&drop events callbacks */
@@ -373,22 +373,29 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
373373

374374
GridStackDD.get().resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1));
375375
GridStackDD.get().resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));
376+
// also set max if set #1330
377+
if (node.maxW) {
378+
GridStackDD.get().resizable(el, 'option', 'maxWidth', cellWidth * node.maxW);
379+
}
380+
if (node.maxH) {
381+
GridStackDD.get().resizable(el, 'option', 'maxHeight', cellHeight * node.maxH);
382+
}
376383
}
377384

378385
/** called when item is being dragged/resized */
379386
let dragOrResize = (event: Event, ui: DDUIData): void => {
380387
let x = Math.round(ui.position.left / cellWidth);
381388
let y = Math.floor((ui.position.top + cellHeight / 2) / cellHeight);
382-
let w;
383-
let h;
389+
let w: number;
390+
let h: number;
384391

385392
if (event.type === 'drag') {
386393
let distance = ui.position.top - node._prevYPix;
387394
node._prevYPix = ui.position.top;
388395
Utils.updateScrollPosition(el, ui.position, distance);
389396
// if inTrash, outside of the bounds or added to another grid (#393) temporarily remove it from us
390397
if (el.dataset.inTrashZone || x < 0 || x >= this.engine.column || y < 0 || (!this.engine.float && y > this.engine.getRow()) || node._added) {
391-
if (node._temporaryRemoved) { return; }
398+
if (node._temporaryRemoved) return;
392399
if (this.opts.removable === true) {
393400
this._setupRemovingTimeout(el);
394401
}
@@ -415,19 +422,15 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
415422
delete node._temporaryRemoved;
416423
}
417424
}
425+
if (node._lastTriedX === x && node._lastTriedY === y) return;
418426
} else if (event.type === 'resize') {
419427
if (x < 0) return;
420428
w = Math.round(ui.size.width / cellWidth);
421429
h = Math.round(ui.size.height / cellHeight);
430+
if (w === node.w && h === node.h) return;
422431
}
423-
// width and height are undefined if not resizing
424-
let _lastTriedW = (w || node._lastTriedW);
425-
let _lastTriedH = (h || node._lastTriedH);
426-
if (!this.engine.canMoveNode(node, x, y, w, h) ||
427-
(node._lastTriedX === x && node._lastTriedY === y &&
428-
node._lastTriedW === _lastTriedW && node._lastTriedH === _lastTriedH)) {
429-
return;
430-
}
432+
433+
if (!this.engine.canMoveNode(node, x, y, w, h)) return;
431434
node._lastTriedX = x;
432435
node._lastTriedY = y;
433436
node._lastTriedW = w;

‎src/h5/dd-resizable.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -242,13 +242,13 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
242242
const reshape = this._getReShapeSize(newRect.width, newRect.height);
243243
if (newRect.width !== reshape.width) {
244244
if (dir.indexOf('w') > -1) {
245-
newRect.left += reshape.width - newRect.width;
245+
newRect.left += newRect.width - reshape.width;
246246
}
247247
newRect.width = reshape.width;
248248
}
249249
if (newRect.height !== reshape.height) {
250250
if (dir.indexOf('n') > -1) {
251-
newRect.top += reshape.height - newRect.height;
251+
newRect.top += newRect.height - reshape.height;
252252
}
253253
newRect.height = reshape.height;
254254
}
@@ -274,7 +274,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
274274
const { left, top } = containmentEl.getBoundingClientRect();
275275
containmentRect = { left, top, width: 0, height: 0 };
276276
}
277-
Object.keys(this.temporalRect || this.originalRect).forEach(key => {
277+
if (!this.temporalRect) return this;
278+
Object.keys(this.temporalRect).forEach(key => {
278279
const value = this.temporalRect[key];
279280
this.el.style[key] = value - containmentRect[key] + 'px';
280281
});

0 commit comments

Comments
 (0)