Merge pull request #1652 from adumesny/develop

drag in/out re-write

Author: adumesny

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)).

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);

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);

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 = [

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)
 

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
   }
 

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);

spec/gridstack-spec.ts

@@ -359,7 +359,7 @@ describe('gridstack', function() {
       // back to 1 column, move item2 to beginning to [3][1][2] vertically
       grid.column(1);
       expect(grid.getColumn()).toBe(1);
-      grid.move(el3, 0, 0);
+      grid.update(el3, {x:0, y:0});
       expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
       expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
       expect(parseInt(el3.getAttribute('gs-w'))).toBe(1);
@@ -619,11 +619,7 @@ describe('gridstack', function() {
       let grid = GridStack.init();
       let items = Utils.getElements('.grid-stack-item');
       for (let i = 0; i < items.length; i++) {
-        grid
-          .minWidth(items[i], 2)
-          .maxWidth(items[i], 3)
-          .minHeight(items[i], 4)
-          .maxHeight(items[i], 5);
+        grid.update(items[i], {minW: 2, maxW: 3, minH: 4, maxH: 5});
       }
       for (let j = 0; j < items.length; j++) {
         expect(parseInt(items[j].getAttribute('gs-min-w'), 10)).toBe(2);
@@ -632,11 +628,7 @@ describe('gridstack', function() {
         expect(parseInt(items[j].getAttribute('gs-max-h'), 10)).toBe(5);
       }
       // remove all constrain
-      grid
-        .minWidth('grid-stack-item', 0)
-        .maxWidth('.grid-stack-item', null)
-        .minHeight('grid-stack-item', undefined)
-        .maxHeight(undefined, 0);
+      grid.update('grid-stack-item', {minW: 0, maxW: null, minH: undefined, maxH: 0});
       for (let j = 0; j < items.length; j++) {
         expect(items[j].getAttribute('gs-min-w')).toBe(null);
         expect(items[j].getAttribute('gs-max-w')).toBe(null);
@@ -1093,7 +1085,7 @@ describe('gridstack', function() {
       };
       let grid = GridStack.init(options);
       let items = Utils.getElements('.grid-stack-item');
-      grid.resize(items[0], 5, 5);
+      grid.update(items[0], {w:5, h:5});
       expect(parseInt(items[0].getAttribute('gs-w'), 10)).toBe(5);
       expect(parseInt(items[0].getAttribute('gs-h'), 10)).toBe(5);
     });
@@ -1114,7 +1106,7 @@ describe('gridstack', function() {
       };
       let grid = GridStack.init(options);
       let items = Utils.getElements('.grid-stack-item');
-      grid.move(items[0], 5, 5);
+      grid.update(items[0], {x:5, y:5});
       expect(parseInt(items[0].getAttribute('gs-x'), 10)).toBe(5);
       expect(parseInt(items[0].getAttribute('gs-y'), 10)).toBe(5);
     });
@@ -1549,7 +1541,7 @@ describe('gridstack', function() {
         margin: 5
       };
       let grid = GridStack.init(options);
-      grid.locked('.grid-stack-item', true);
+      grid.update('.grid-stack-item', {locked: true});
       Utils.getElements('.grid-stack-item').forEach(item => {
         expect(item.getAttribute('gs-locked')).toBe('true');
       })
@@ -1560,7 +1552,7 @@ describe('gridstack', function() {
         margin: 5
       };
       let grid = GridStack.init(options);
-      grid.locked('.grid-stack-item', false);
+      grid.update('.grid-stack-item', {locked: false});
       Utils.getElements('.grid-stack-item').forEach(item => {
         expect(item.getAttribute('gs-locked')).toBe(null);
       })