From 1686d9d1362dfc2671b872cca877d184f7dc59d9 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 6 Dec 2020 08:56:31 -0800 Subject: [PATCH] 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 --- doc/CHANGES.md | 1 + spec/e2e/html/1330-maxw-left-resize.html | 21 ++++++++++++++++++ src/gridstack-dd.ts | 27 +++++++++++++----------- src/h5/dd-resizable.ts | 7 +++--- 4 files changed, 41 insertions(+), 15 deletions(-) create mode 100644 spec/e2e/html/1330-maxw-left-resize.html 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'; });