Bind resize to grid

[arcadeJHS]

Hi, in the project I am working on I need to bind resizing to a grid, resizing the element only by discrete steps. I introduced few minor changes into your source code (mainly a new scope param "rGrid", which accepts an x,y grid size array).

If you agree, I would like to submit you the code for a review, maybe through a pull request or putting the code somewhere online.

I also noticed a slight difference in the value of "width" returned by

w = parseInt(style.getPropertyValue("width"));

inside

var dragStart = function(e, direction) {}

I then decided to retrieve it by using:

var elRect = element[0].getBoundingClientRect();
 w = parseInt(elRect.width);

What do you think?

Thx!

[Reklino]

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

[arcadeJHS]

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;

[arcadeJHS]

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