collision: fix for single grid drag out/in

* fix #1676
* simplified the code so cursor is what make items leave/enter (else we can get double shadow)
* no longer need `engine.isOutside()` (we use cursor leave event)
or `_isCursorOutside` (use `_temporaryRemoved`)
* we also always use 'dropover'/'dropout' to track when we enter/leave to be consistent between multi grids and single one that doesn't accept widgets
(instead of sing acceptWidgets flag)

Author: adumesny

doc/CHANGES.md

@@ -55,17 +55,18 @@ Change log
 
 - fix [#1693](https://github.com/gridstack/gridstack.js/issues/1693) `load` after `init()` broken in 4.x
 - fix [#1687](https://github.com/gridstack/gridstack.js/issues/1687) drag between 2 grids with `row / maxRow` broken in 4.x
+- fix [#1676](https://github.com/gridstack/gridstack.js/issues/1676) drag edge case in/out single grid without acceptWidgets fix broken in 4.x
 
 ## 4.0.2 (2021-3-27)
 
 - fix [#1679](https://github.com/gridstack/gridstack.js/issues/1679) `Resizable: {handles:'w/sw'}` broken in 4.x
 - fix [#1658](https://github.com/gridstack/gridstack.js/issues/1658) `enableMove(T/F)` not working correctly
-- fix `helper: myFunction` now working for H5 case for `dragInOptions` & `setupDragIn()`
+- fix `helper: myFunction` now working for H5 case for `dragInOptions` & `setupDragIn()` broken in 3.x
 - fix prevent `addGrid()` from creating nested div grid if container already is a '.grid-stack' div
 
 ## 4.0.1 (2021-3-20)
 
-- fix [#1669](https://github.com/gridstack/gridstack.js/issues/1669) JQ resize broken
+- fix [#1669](https://github.com/gridstack/gridstack.js/issues/1669) JQ resize broken in 4.x
 - fix [#1661](https://github.com/gridstack/gridstack.js/issues/1661) serialization of nested grid
 
 ## 4.0.0 (2021-3-19)

spec/e2e/html/141_1534_swap.html

@@ -37,7 +37,13 @@ <h1>Swap collision demo</h1>
     let size = 1;
     let layout = 0;
 
-    let grid = GridStack.init({float: false, cellHeight: 70, maxRow: 0, resizable: {handles: 'sw,w,e,se'}});
+    let opt = {
+      float: false,
+      cellHeight: 70,
+      maxRow: 0,
+      resizable: {handles: 'sw,w,e,se'}
+    };
+    let grid = GridStack.init(opt);
     addEvents(grid);
 
     let items = [[ // load 0

src/gridstack-dd.ts

@@ -76,15 +76,6 @@ export abstract class GridStackDD extends GridStackDDI {
 GridStack.prototype._setupAcceptWidget = function(): GridStack {
   if (this.opts.staticGrid) return this;
 
-  // if we don't accept external widgets (default) we still need to accept dragging within our
-  // list of items (else we get a no-drop icon on windows)
-  if (!this.opts.acceptWidgets) {
-    GridStackDD.get().droppable(this.el, {
-      accept: (el: GridItemHTMLElement) => el.gridstackNode && el.gridstackNode.grid === this
-    })
-    return this;
-  }
-
   // vars shared across all methods
   let gridPos: MousePosition;
   let cellHeight: number, cellWidth: number;
@@ -128,6 +119,7 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
         let node: GridStackNode = el.gridstackNode;
         // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
         if (node && node.grid === this) return true;
+        if (!this.opts.acceptWidgets) return false;
         // check for accept method or class matching
         let canAccept = true;
         if (typeof this.opts.acceptWidgets === 'function') {
@@ -199,9 +191,6 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
         node._temporaryRemoved = true; // so we can insert it
       }
 
-      // we're entering this grid (even if we left another)
-      delete node._isCursorOutside;
-
       GridStackDD.get().on(el, 'drag', onDrag);
       // make sure this is called at least once when going fast #1578
       onDrag(event as DragEvent, el, helper);
@@ -477,7 +466,6 @@ GridStack.prototype._onStartMoving = function(el: GridItemHTMLElement, event: Ev
   node._prevYPix = ui.position.top;
   node._moving = (event.type === 'dragstart'); // 'dropover' are not initially moving so they can go exactly where they enter (will push stuff out of the way)
   delete node._lastTried;
-  delete node._isCursorOutside;
 
   if (event.type === 'dropover' && node._temporaryRemoved) {
     // TEST console.log('engine.addNode x=' + node.x);
@@ -504,7 +492,6 @@ GridStack.prototype._leave = function(node: GridStackNode, el: GridItemHTMLEleme
   if (!node) return;
 
   if (dropoutEvent) {
-    node._isCursorOutside = true;
     GridStackDD.get().off(el, 'drag'); // no need to track while being outside
   }
 
@@ -535,7 +522,7 @@ GridStack.prototype._dragOrResize = function(el: GridItemHTMLElement, event: Eve
   let resizing: boolean;
 
   if (event.type === 'drag') {
-    if (node._isCursorOutside) return; // handled by dropover
+    if (node._temporaryRemoved) return; // handled by dropover
     let distance = ui.position.top - node._prevYPix;
     node._prevYPix = ui.position.top;
     Utils.updateScrollPosition(el, ui.position, distance);
@@ -545,19 +532,6 @@ GridStack.prototype._dragOrResize = function(el: GridItemHTMLElement, event: Eve
     let top = ui.position.top + (ui.position.top > node._lastUiPosition.top  ? -this.opts.marginBottom : this.opts.marginTop);
     p.x = Math.round(left / cellWidth);
     p.y = Math.round(top / cellHeight);
-
-    // if inTrash or outside of the bounds (but not external which is handled by 'dropout' event), temporarily remove it from us
-    if (node._isAboutToRemove || (!node._isExternal && this.engine.isOutside(p.x, p.y, node))) {
-      this._leave(node, event.target);
-    } else {
-      if (node._temporaryRemoved) {
-        node.el = this.placeholder;
-        this.engine.addNode(node);
-        this.el.appendChild(this.placeholder);
-        // TEST console.log('drag placeholder');
-        delete node._temporaryRemoved;
-      }
-    }
     if (node.x === p.x && node.y === p.y) return; // skip same
     // DON'T skip one we tried as we might have failed because of coverage <50% before
     // if (node._lastTried && node._lastTried.x === x && node._lastTried.y === y) return;

src/gridstack-ddi.ts

@@ -24,7 +24,8 @@ export class GridStackDDI {
   }
 
   /** removes any drag&drop present (called during destroy) */
-  public remove(_el: GridItemHTMLElement): GridStackDDI {
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  public remove(el: GridItemHTMLElement): GridStackDDI {
     return this; // no-op for static grids
   }
 }

src/gridstack-engine.ts

@@ -565,32 +565,6 @@ export class GridStackEngine {
     return clone.getRow() <= this.maxRow;
   }
 
-  /** return true if the passed in node (x,y) is being dragged outside of the grid, and not added to bottom */
-  public isOutside(x: number, y: number, node: GridStackNode): boolean {
-    if (node._isCursorOutside) return false; // dragging out is handled by 'dropout' event instead
-    // simple outside boundaries
-    if (x < 0 || x >= this.column || y < 0) return true;
-    if (this.maxRow) return (y >= this.maxRow);
-    else if (this.float) return false; // infinite grow with no maxRow
-
-    // see if dragging PAST bottom (row+1)
-    let row = this.getRow();
-    if (y < row || y === 0) return false;
-    if (y > row) return true;
-    // else check to see if we can add that item to the bottom... (y == row)
-    if (!node._temporaryRemoved) {
-      let clone = new GridStackEngine({
-        column: this.column,
-        float: this.float,
-        nodes: this.nodes.filter(n => n !== node).map(n => {return {...n}})
-      });
-      let nn = {...node, x, y};
-      clone.addNode(nn);
-      return nn.y === node.y && nn.x === node.x; // didn't actually move, so last row was a drag out and not a new place...
-    }
-    return node._temporaryRemoved; // if still outside so we don't flicker back & forth
-  }
-
   /** true if x,y or w,h are different after clamping to min/max */
   public changedPosConstrain(node: GridStackNode, p: GridStackPosition): boolean {
     // make sure w,h are set

src/gridstack.ts

@@ -760,7 +760,7 @@ export class GridStack {
   public getCellFromPixel(position: MousePosition, useDocRelative = false): CellPosition {
     let box = this.el.getBoundingClientRect();
     // console.log(`getBoundingClientRect left: ${box.left} top: ${box.top} w: ${box.w} h: ${box.h}`)
-    let containerPos;
+    let containerPos: {top: number, left: number};
     if (useDocRelative) {
       containerPos = {top: box.top + document.documentElement.scrollTop, left: box.left};
       // console.log(`getCellFromPixel scrollTop: ${document.documentElement.scrollTop}`)

src/types.ts

@@ -326,8 +326,6 @@ export interface GridStackNode extends GridStackWidget {
   _dirty?: boolean;
   /** @internal */
   _updating?: boolean;
-  /** @internal true if the cursor is outside of the grid, as we get dropout/dropover vs shape being outside */
-  _isCursorOutside?: boolean;
   /** @internal true when over trash/another grid so we don't bother removing drag CSS style that would animate back to old position */
   _isAboutToRemove?: boolean;
   /** @internal true if item came from outside of the grid -> actual item need to be moved over */