resize snap to grid relative to dragged edge location

[oldo]

trafficstars

I'm using react-rnd version [7.1.4]

First up, thanks so much for maintaining and developing this component. It has been fantastic and really intuitive to work with :-)

I have an issue that I can't seem to resolve though: I am rendering rnd components in various locations on my page and have enabled resizing in left and right directions and set them snap to a resizeGrid: [40, 0]. My desired behaviour is that when resizing I want the resize to snap to 40px to the left or right of the resized edge original location, however I'm finding that resizing is snapping to a global grid starting from the edge of the browser window.

So lets say I have an rnd component located with the right edge at 135px from the edge of browser window. When I drag to the right I want the next snap point to be at 135 + 40 = 175px, but instead I am finding that the first snap point is 160px.

Is there a way for resize grid to be relative to the location of the edge being dragged instead of a global grid?

Thanks :-)

[bokuweb]

@oldo Thanks for your report. I'm gonna do some investigation. could you please wait for a while

[oldo]

Thanks @bokuweb

Let me know if there is anything I can do down my end :-)

[oldo]

Hi @bokuweb

Any news on this? :-)

[bokuweb]

@oldo Sorry. I have not started yet...

[gabriel-cardoso]

I have the same issue with the same configuration: left and right resizing and dragging with resize and drag grids.

I set the same configuration from this example.

Could it come from the parent containers CSS attributes ? Or maybe because my component is mapped to Redux ?

[gabriel-cardoso]

I think it comes from the fact that my component is connected to Redux.

I manage to have it working by calling this.forceUpdate() on resize.

[oldo]

Hi @gabriel-cardoso

Although my components are also connected to Redux, that didn't help me.

If I change the initial width and position in your code sandbox to I get the same snapping error where resize is snapping to a global grid instead of a grid relative to location of component:

constructor() {
  super();
  this.state = {
    width: 220,
    height: 200,
    x: 290,
    y: 10
  };
}

[FullstackJack]

Hi, I see this is a pretty old ticket. Is this library still being maintained? If not, do you recommend something else? If so, are you welcome to PRs to address problems and refactor the code? I'm coming from using react-dnd where I developed resizing on top of that, but I'm finding the implementation to be a bit convoluted and this library looks like a good alternative without having to handle synchronizing of drop zones and drag layers.