@internal handles actual drag/resize
(el: GridItemHTMLElement, event: GridStackMouseEvent, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number)
| 2878 | |
| 2879 | /** @internal handles actual drag/resize */ |
| 2880 | protected _dragOrResize(el: GridItemHTMLElement, event: GridStackMouseEvent, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void { |
| 2881 | const p = { ...node._orig }; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value) |
| 2882 | let resizing: boolean; |
| 2883 | let mLeft = this.opts.marginLeft as number, |
| 2884 | mRight = this.opts.marginRight as number, |
| 2885 | mTop = this.opts.marginTop as number, |
| 2886 | mBottom = this.opts.marginBottom as number; |
| 2887 | |
| 2888 | // if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855 |
| 2889 | const mHeight = Math.round(cellHeight * 0.1), |
| 2890 | mWidth = Math.round(cellWidth * 0.1); |
| 2891 | mLeft = Math.min(mLeft, mWidth); |
| 2892 | mRight = Math.min(mRight, mWidth); |
| 2893 | mTop = Math.min(mTop, mHeight); |
| 2894 | mBottom = Math.min(mBottom, mHeight); |
| 2895 | |
| 2896 | if (event.type === 'drag') { |
| 2897 | if (node._temporaryRemoved) return; // handled by dropover |
| 2898 | node._prevYPix = ui.position.top; |
| 2899 | if (this.opts.draggable.scroll !== false) { |
| 2900 | DDManager.dragElement?.updateScrollPosition(this.el); |
| 2901 | } |
| 2902 | |
| 2903 | // get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin) |
| 2904 | const left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft); |
| 2905 | const top = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop); |
| 2906 | p.x = Math.round(left / cellWidth); |
| 2907 | p.y = Math.round(top / cellHeight); |
| 2908 | |
| 2909 | // @ts-ignore// if we're at the bottom hitting something else, grow the grid so cursor doesn't leave when trying to place below others |
| 2910 | const prev = this._extraDragRow; |
| 2911 | if (this.engine.collide(node, p)) { |
| 2912 | const row = this.getRow(); |
| 2913 | let extra = Math.max(0, (p.y + node.h) - row); |
| 2914 | if (this.opts.maxRow && row + extra > this.opts.maxRow) { |
| 2915 | extra = Math.max(0, this.opts.maxRow - row); |
| 2916 | }// @ts-ignore |
| 2917 | this._extraDragRow = extra;// @ts-ignore |
| 2918 | } else this._extraDragRow = 0;// @ts-ignore |
| 2919 | if (this._extraDragRow !== prev) this._updateContainerHeight(); |
| 2920 | |
| 2921 | if (node.x === p.x && node.y === p.y) return; // skip same |
| 2922 | // DON'T skip one we tried as we might have failed because of coverage <50% before |
| 2923 | // if (node._lastTried && node._lastTried.x === x && node._lastTried.y === y) return; |
| 2924 | } else if (event.type === 'resize') { |
| 2925 | if (p.x < 0) return; |
| 2926 | // Scrolling page if needed |
| 2927 | Utils.updateScrollResize(event, el, cellHeight); |
| 2928 | |
| 2929 | // get new size |
| 2930 | p.w = Math.round((ui.size.width - mLeft) / cellWidth); |
| 2931 | p.h = Math.round((ui.size.height - mTop) / cellHeight); |
| 2932 | if (node.w === p.w && node.h === p.h) return; |
| 2933 | if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h) return; // skip one we tried (but failed) |
| 2934 | |
| 2935 | // only recalculate position for handles that move the top-left corner (N/W). |
| 2936 | // for SE/S/E handles the top-left is anchored — recalculating from pixels causes |
| 2937 | // rounding drift on fine grids where cellWidth/cellHeight are only a few pixels. #385 #1356 |
no test coverage detected