Merge pull request #1663 from adumesny/develop

collision: more edge case fixes

Author: adumesny

LICENSE

@@ -1,7 +1,11 @@
-The MIT License (MIT)
+v4 Copyright (c) 2021 Alain Dumesny
+under MIT license
 
+previous v3.x and older is:
 Copyright (c) 2014-2020  Alain Dumesny, Dylan Weiss, Pavel Reznikov
 
+The MIT License (MIT)
+
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

demo/two.html

@@ -95,9 +95,9 @@ <h1>Two grids demo</h1>
     let grids = GridStack.initAll(options);
     grids[1].float(true);
 
-    // new 4.x static method instead of setting up options on every grid (never been per grid really but old options still work)
+    // new 4.x static method instead of setting up options on every grid (never been per grid really) but old options still works
     GridStack.setupDragIn('.sidebar .grid-stack-item', { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' });
-    // GridStack.setupDragIn(); // will now work as well (cache last values)
+    // GridStack.setupDragIn(); // second call will now work (cache last values)
 
     let items = [
       {x: 0, y: 0, w: 2, h: 2},

doc/CHANGES.md

@@ -5,7 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [3.3.0-dev](#330-dev)
+- [4.0.0](#400)
 - [3.3.0 (2021-2-2)](#330-2021-2-2)
 - [3.2.0 (2021-1-25)](#320-2021-1-25)
 - [3.1.5 (2021-1-23)](#315-2021-1-23)
@@ -48,9 +48,9 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
-## 3.3.0-dev
+## 4.0.0
 
-- fix [#149](https://github.com/gridstack/gridstack.js/issues/149) [#1094](https://github.com/gridstack/gridstack.js/issues/1094) [#1605](https://github.com/gridstack/gridstack.js/issues/1605) re-write of the **collision code - fixing 6 years old most requested request**
+- fix [#149](https://github.com/gridstack/gridstack.js/issues/149) [#1094](https://github.com/gridstack/gridstack.js/issues/1094) [#1605](https://github.com/gridstack/gridstack.js/issues/1605) [#1534](https://github.com/gridstack/gridstack.js/issues/1534) re-write of the **collision code - fixing 6 years old most requested request**
 1. you can now swap items of the same size (vertical/horizontal) when grid is full, and is the default in `float:false` (top gravity) as it feels more natural. Could add Alt key for swap vs push behavior later.
 2. Dragging up and down now behave the same (used to require push WAY down past to swap/append). Also much more efficient collision code.
 3. handle mid point of dragged over items (>50%) rather than just a new row/column and check for the most covered item when multiple collide.
@@ -59,6 +59,7 @@ Change log
 1. we now remove item when cursor leaves (`acceptWidgets` case using `dropout` event) or shape is outside (re-using same method) and re-insert on cursor enter (since we only get `dropover` event). Should **not be possible to have 2 placeholders** which confuses the grids.
 2. major re-write and cleanup of the drag in/out. Vars have been renamed and fully documented as I couldn't understand the legacy buggy code.
 3. removed any over trash delay feedback as I don't see the point and could introduce race conditions.
+
 - fix [1617](https://github.com/gridstack/gridstack.js/issues/1617) FireFox DOM order issue. Thanks [@marcel-necker](https://github.com/marcel-necker)
 - fix changing column # `column(n)` now resizes `cellHeight:'auto'` to keep square
 - add [1616](https://github.com/gridstack/gridstack.js/pull/1616) `drag | resize` events while dragging. Thanks [@MrCorba](https://github.com/MrCorba)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "3.3.0-dev",
+  "version": "4.0.0",
   "description": "TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)",
   "main": "./dist/gridstack.js",
   "types": "./dist/gridstack.d.ts",

spec/e2e/html/141_1534_swap.html

@@ -13,6 +13,7 @@
 <body>
   <div class="container-fluid">
     <h1>Swap collision demo</h1>
+    <p>for bugs 141 <b>1094</b> 1534 1605</p>
     <div>
       <a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
       <a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#"></a>
@@ -21,8 +22,9 @@ <h1>Swap collision demo</h1>
       with layouts:
       <a class="btn btn-primary" onclick="load(0)" href="#">load 0</a>
       <a class="btn btn-primary" onclick="load(1)" href="#">load 1</a>
-      <a class="btn btn-primary" onclick="load(2)" href="#">load web1</a>
-      <a class="btn btn-primary" onclick="loadAdvanced()" href="#">load web2</a>
+      <a class="btn btn-primary" onclick="load(2)" href="#">load 2</a>
+      <a class="btn btn-primary" onclick="load(3)" href="#">load web1</a>
+      <a class="btn btn-primary" onclick="load(3); loadAdvanced()" href="#">load web2</a>
     </div>
     <br><br>
     <div class="grid-stack"></div>
@@ -38,17 +40,19 @@ <h1>Swap collision demo</h1>
     let grid = GridStack.init({float: false, cellHeight: 70, maxRow: 0});
     addEvents(grid);
 
-    let items = [[
+    let items = [[ // load 0
       {x:0, y:0}, {x:0, y:1}, {x:0, y:2},{x:1, y:0}, {x:1, y:1}, {x:1, y:2, /*h:2, w:2*/},
       {x:5, y:0}, {x:4, y:1, w:3, locked: false, _content: 'locked'}, {x:5, y:2},
       {x:7, y:0}, {x:8, y:0}, {x:9, y:0}, {x:7, y:1, w:3}, {x:8, y:2},
       {x:11, y:0}, {x:11, y:1, h:2},
-    ], [
-      {x:1, y:0}, {x:1, y:1}, {x:1, y:2, w:2},  {x:0, y:3, w:3}, {x:1, y:4, h:2},
+    ], [ // load 1
+      {x:1, y:0}, {x:1, y:1, w:2}, {x:1, y:2, h:2}, {x:0, y:4, w:3}, 
       {x:3, y:0, w:3, h:3}, {x:6, y:0},
       {x:7, y:0, w:3}, {x:8, y:1, w:3},
-    ],[
-      // web1.html demo
+    ], [ // load 2
+      {x:1, y:0, w:2}, {x:1, y:1, h:2}, {x:2, y:1}, {x:0, y:3, w:3} , {x:0, y:4},
+      // {x:5, y:0, w:2}, {x:6, y:1}, {x:4, y:2, w:3} , {x:5, y:4, h:2}, {x:4, y:4},
+    ],[ // web1.html demo
       {x:0, y:0, w:4, h:2},
       {x:4, y:0, w:4, h:4, id: 'big'},
       {x:8, y:0, w:2, h:2},
@@ -84,7 +88,6 @@ <h1>Swap collision demo</h1>
       grid.load(items[i]);
     }
     loadAdvanced = function() {
-      load(2);
       grid.update(grid.engine.nodes[1].el, {locked: true, content:'locked'});
     }
     toggleFloat = function() {

src/gridstack-dd.ts

@@ -1,10 +1,5 @@
-// gridstack-GridStackDD.get().ts 3.3.0-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
- * gridstack.js may be freely distributed under the MIT license.
-*/
+// gridstack-GridStackDD.get().ts 4.0.0
+// (c) 2021 Alain Dumesny - see root license
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { GridStackDDI } from './gridstack-ddi';
 import { GridItemHTMLElement, GridStackNode, GridStackElement, DDUIData, DDDragInOpt, GridStackPosition } from './types';
@@ -432,8 +427,7 @@ GridStack.prototype._prepareDragDropByNode = function(node: GridStackNode): Grid
       } else {
         // got removed - restore item back to before dragging position
         Utils.removePositioningStyles(target);
-        Utils.copyPos(node, node._beforeDrag);
-        delete node._beforeDrag;
+        Utils.copyPos(node, node._orig);
         this._writePosAttr(target, node);
         this.engine.addNode(node);
       }
@@ -483,14 +477,14 @@ GridStack.prototype._onStartMoving = function(event: Event, ui: DDUIData, node:
   node.el = this.placeholder;
   node._lastUiPosition = ui.position;
   node._prevYPix = ui.position.top;
-  node._moving = (event.type === 'dragstart');
+  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);
-    this.engine.addNode(node); // will add, constrain, update attr and clear _temporaryRemoved
-    node._moving = true; // lastly mark as moving object
+    this.engine.addNode(node); // will add, fix collisions, update attr and clear _temporaryRemoved
+    node._moving = true; // AFTER, mark as moving object (wanted fix location before)
   }
 
   // set the min/max resize info
@@ -533,6 +527,8 @@ GridStack.prototype._leave = function(node: GridStackNode, el: GridItemHTMLEleme
     // item came from outside (like a toolbar) so nuke any node info
     delete node.el;
     delete el.gridstackNode;
+    // and restore all nodes back to original
+    this.engine.restoreInitial();
   }
 }
 

src/gridstack-ddi.ts

@@ -1,12 +1,5 @@
-// gridstack-ddi.ts 3.3.0-dev @preserve
-
-/**
- * https://gridstackjs.com/
- * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
- * gridstack.js may be freely distributed under the MIT license.
-*/
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
+// gridstack-ddi.ts 4.0.0
+// (c) 2021 Alain Dumesny - see root license
 import { GridItemHTMLElement } from './types';
 
 /**