Bind resize to grid about angular-resizable HOT 3 OPEN

Cool! It's been on my list to implement a resize increment feature so that snapping to a grid would be possible.

At first thought, it seems best to implement something like 'r-increment-x' and 'r-increment-y' so that you can snap to a grid vertically or horizontally without requiring both. Then from there, we'd just need to set up how it renders. I will work towards a solution for this in my spare time. That said, if you want to submit a pull request or fork the codepen, go for it :)

I tried to find the difference in the value of width, but each method seems to be reporting the same value to me, but I may have misunderstood. See this pen

from angular-resizable.

Hi, thx for your interest!
I implemented a first version on my project: a horizontal grid is now working and tested. But maybe could be improved!
Maybe two different properties are better, anyway I intended "rGrid" as an array of [x,y] positions.

Basically I modified the "dragging" function recalculating offset this way:

var gridX = scope.rGrid[0] || 1,
      gridY = scope.rGrid[1] || 1;

      offset = (axis == 'x') 
          ? Math.round(((w+offset) - w) / gridX) * gridX
          : Math.round(((h+offset) - h) / gridY) * gridY;

from angular-resizable.

I created a pull request to submit my code.
Mainly the snap to grid functionality, plus other minor changes, like the correction to width (the problem was on IE) and the original size value returned by updateInfo (to keep track of the size before resize).

from angular-resizable.