Skip to content

Commit

Permalink
fix resize when padding is large vs cellHeight
Browse files Browse the repository at this point in the history
* fix gridstack#1855
* reduce padding when calculating mid point if more than 10% of the cell height/width so it doesn't throw off calculations
  • Loading branch information
adumesny committed Oct 18, 2021
1 parent d8b6d25 commit cb7b5ca
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 1 deletion.
1 change: 1 addition & 0 deletions doc/CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ Change log
## 4.3.0-dev (TBD)
* fix [#1868](https://github.com/gridstack/gridstack.js/issues/1868) prevent swap during resize
* fix [#1849](https://github.com/gridstack/gridstack.js/issues/1849) [#1816](https://github.com/gridstack/gridstack.js/issues/1816) save highest resolution in 1 column mode
* fix [#1855](https://github.com/gridstack/gridstack.js/issues/1855) fix resize when padding is large vs cellHeight

## 4.3.0 (2021-10-15)
* you can now swap items of different width if they are the same row/height. Thanks to [spektrummedia](http://spektrummedia.com) for sponsoring it.
Expand Down
10 changes: 9 additions & 1 deletion src/gridstack-dd.ts
Original file line number Diff line number Diff line change
Expand Up @@ -535,10 +535,18 @@ GridStack.prototype._leave = function(this: GridStack, el: GridItemHTMLElement,
GridStack.prototype._dragOrResize = function(this: GridStack, el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number) {
let p = {...node._orig}; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)
let resizing: boolean;
const mLeft = this.opts.marginLeft as number,
let mLeft = this.opts.marginLeft as number,
mRight = this.opts.marginRight as number,
mTop = this.opts.marginTop as number,
mBottom = this.opts.marginBottom as number;

// if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855
let mHeight = Math.round(cellHeight * 0.1),
mWidth = Math.round(cellWidth * 0.1);
mLeft = Math.min(mLeft, mWidth);
mRight = Math.min(mRight, mWidth);
mTop = Math.min(mTop, mHeight);
mBottom = Math.min(mBottom, mHeight);

if (event.type === 'drag') {
if (node._temporaryRemoved) return; // handled by dropover
Expand Down
1 change: 1 addition & 0 deletions src/h5/dd-resizable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
this.originalRect = this.el.getBoundingClientRect();
this.scrollEl = Utils.getScrollElement(this.el);
this.scrollY = this.scrollEl.scrollTop;
this.scrolled = 0;
this.startEvent = event;
this._setupHelper();
this._applyChange();
Expand Down

0 comments on commit cb7b5ca

Please sign in to comment.