drag in/out re-write

- fix gridstack#393 gridstack#1612 gridstack#1578 - re-write of the **drag in/out code - fixing 5 years old bug** 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.
adumesny · Mar 8, 2021 · 091006a · 091006a
1 parent aac4170
commit 091006a
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 203 deletions.
diff --git a/README.md b/README.md
@@ -43,6 +43,7 @@ Join us on Slack: https://gridstackjs.troolee.com
   - [Migrating to v1](#migrating-to-v1)
   - [Migrating to v2](#migrating-to-v2)
   - [Migrating to v3](#migrating-to-v3)
+  - [Migrating to v4](#migrating-to-v4)
 - [jQuery Application](#jquery-application)
 - [Changes](#changes)
 - [The Team](#the-team)
@@ -390,6 +391,30 @@ Breaking changes:
 
 5. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well
 
+## Migrating to v4
+
+make sure to read v3 migration first!
+
+v4 is a complete re-write of the collision and drag in/out heuristics to fix some very long standing request & bugs. It also greatly improved usability. Read the release notes for more detail.
+
+**Unlikely** Breaking Changes (internal usage):
+
+1. `removeTimeout` was removed (feedback over trash will be immediate - actual removal still on mouse up)
+
+2. the following `GridStackEngine` methods changed (used internally, doesn't affect `GridStack` public API)
+
+```js
+// moved to 3 methods with new option params to support new code and pixel coverage check
+`collision()` -> `collide(), collideAll(), collideCoverage()`
+`moveNodeCheck(node, x, y, w, h)` -> `moveNodeCheck(node, opt: GridStackMoveOpts)`
+`isNodeChangedPosition(node, x, y, w, h)` -> `changedPosConstrain(node, opt: GridStackMoveOpts)`
+`moveNode(node, x, y, w, h, noPack)` -> `moveNode(node, opt: GridStackMoveOpts)`
+```
+
+3. removed old obsolete (v0.6-v1 methods/attrs) `getGridHeight()`, `verticalMargin`, `data-gs-current-height`,
+`locked()`, `maxWidth()`, `minWidth()`, `maxHeight()`, `minHeight()`, `move()`, `resize()`
+
+
 # jQuery Application
 
 We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. IFF you want to use gridstack-jq instead and your app needs to bring your own JQ version (only possible in 1.x), you should **instead** use v1.x and include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).

diff --git a/demo/two-jq.html b/demo/two-jq.html
@@ -92,7 +92,6 @@ <h1>Two grids demo (Jquery version)</h1>
       dragIn: '.sidebar .grid-stack-item', // add draggable to class
       dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
       removable: '.trash', // drag-out delete class
-      removeTimeout: 100,
       acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value
     };
     grids = GridStack.initAll(options);

diff --git a/demo/two.html b/demo/two.html
@@ -90,7 +90,6 @@ <h1>Two grids demo</h1>
       // dragIn: '.sidebar .grid-stack-item', // add draggable to class
       // dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
       removable: '.trash', // drag-out delete class
-      removeTimeout: 100,
       acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value
     };
     let grids = GridStack.initAll(options);

diff --git a/demo/web2.html b/demo/web2.html
@@ -62,7 +62,6 @@ <h1>Advanced Demo</h1>
       dragIn: '.newWidget',  // class that can be dragged from outside
       dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
       removable: '#trash', // drag-out delete class
-      removeTimeout: 100,
     });
 
     let items = [

diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -50,13 +50,19 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 ## 3.3.0-dev
 
-- 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**! 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.
-- Dragging up and down now behave the same (used to require push WAY down past to swap/append). Also much more efficient collision code.
-- handle mid point of dragged over items (>50%) rather than a new row/column and check for the most covered when multiple items collide.
+- 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**
+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.
+
+- fix [#393](https://github.com/gridstack/gridstack.js/issues/393) [#1612](https://github.com/gridstack/gridstack.js/issues/1612) [#1578](https://github.com/gridstack/gridstack.js/issues/1578) re-write of the **drag in/out code - fixing 5 years old bug**
+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 `drag | resize` events while dragging [1616](https://github.com/gridstack/gridstack.js/pull/1616). Thanks [@MrCorba](https://github.com/MrCorba)
-- add `GridStack.setupDragIn()` so user can update external draggable after the grid has been created [1637](https://github.com/gridstack/gridstack.js/issues/1637)
+- add [1616](https://github.com/gridstack/gridstack.js/pull/1616) `drag | resize` events while dragging. Thanks [@MrCorba](https://github.com/MrCorba)
+- add [1637](https://github.com/gridstack/gridstack.js/issues/1637) `GridStack.setupDragIn()` so user can update external draggable after the grid has been created
 
 ## 3.3.0 (2021-2-2)
 

diff --git a/spec/e2e/html/1570_drag_bottom_max_row.html b/spec/e2e/html/1570_drag_bottom_max_row.html
@@ -91,7 +91,6 @@
     maxRow: 3, // change this to show issue
     acceptWidgets: true,
     removable: true,
-    removeTimeout: 0,
     float: true
   }
 

diff --git a/spec/e2e/html/1571_drop_onto_full.html b/spec/e2e/html/1571_drop_onto_full.html
@@ -89,7 +89,6 @@ <h1>drop onto full</h1>
       dragIn: '.sidebar .grid-stack-item', // class that can be dragged from outside
       dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
       removable: '.trash', // drag-out delete class
-      removeTimeout: 100,
       acceptWidgets: function(el) { return true; } // function example, else can be simple: true | false | '.someClass' value
     };
     let grids = GridStack.initAll(options);