angular-gridster2 icon indicating copy to clipboard operation
angular-gridster2 copied to clipboard

bugfix: The most bottom right gridster item in Gridster with boundary control is stuck and cannot be moved.

Open polhek opened this issue 2 years ago • 1 comments

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
    1. Make a gridster grid with a few items. Like in the screenshot below.
    2. 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.

image

polhek avatar Aug 01 '22 12:08 polhek

@dogukan10 look at the commit, maybe you can solve this more cleanly.

polhek avatar Aug 06 '22 08:08 polhek

@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 avatar Jan 16 '23 19:01 AndeYashwanth

@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 avatar Jan 16 '23 20:01 polhek

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

AndeYashwanth avatar Jan 16 '23 20:01 AndeYashwanth