angular-gridster2
angular-gridster2 copied to clipboard
bugfix: The most bottom right gridster item in Gridster with boundary control is stuck and cannot be moved.
SYMPTOMS When you have boundary control enabled, the right bottom item was always stuck and couldn't be moved.
ROOT CAUSE
The root cause of the problem was that the last mouse event was:
this.lastMouse = { clientX: 0; clientY: 0; }
Therefore we got the wrong directions in the getDirections()
function. And because the directions were the length of 0, the lastMouse
variable wasn't updated. And therefore the item is stuck.
SOLUTION
In the getDirections()
method I have added checking, that if lastMouse clientX and clientY are 0, we update it, and it gives us the right directions and also the items are moved in the right way.
HOW TO VERIFY
-
Steps to reproduce
- Make a gridster grid with a few items. Like in the screenshot below.
- Try to move most right and bottom gridster items. It sometimes/most of the time gets stuck.
- Test without the fix It gets stuck and cannot be moved most of the time.
- Test with the fix It can be moved normally.
@dogukan10 look at the commit, maybe you can solve this more cleanly.
@polhek Shouldn't this.lastMouse.clientX = e.clientY;
be this.lastMouse.clientX = e.clientX;
in you below changes? Is it a typo?
if (this.lastMouse.clientX === 0 && this.lastMouse.clientY === 0) {
this.lastMouse.clientY = e.clientY;
this.lastMouse.clientX = e.clientY;
}
https://github.com/tiberiuzuld/angular-gridster2/pull/828/files#diff-f200aefe889e96e3aa1bca502c82b807fa65bbc8dc1bcd192e56510a645d9150R556
@AndeYashwanth it might really be a typo. I am almost 100% it is a typo, yes.
Thanks for finding that out. Can you add also this fix to your merge request?
@polhek I added the change to my merge request. When the widget is at bottom right or top right corner and drag is started it will change position on x axis as mentioned by the e.clientY incorrectly and come back immediately to correct position which looks like a flicker.
I noticed one more issue with enableBoundaryControl where if a widget is very quickly dragged into any edge and hold it, it is going out of bounds and staying there. I made some changes to fix but not sure if it's correct way. Will create new issue and share what changes I made when I have time.