Understanding Dynamic Aligning

[D-Cryp7]

Hi!! I'm using a lot of Fabric js functionalities for an e-commerce project where the users can customize their products. In that way, i want to do dynamic aligning in objects for a better user experience. For that, i used the "initAligningGuidelines" base from Fabric.js library. My first approach was this:

I set the "left" parameter of the active object to 0 if the "activeObject.left" value is approaching some tolerance, so the first conditional was something like this:
if (activeObject.left <= 5) { activeObject.set('left', 0) }
and i repeat that concept to align the element to the right, top and buttom. The thing that i was not considering was the object rotation, because the "left" value (this is an assumption of mine regarding the tests i have done) is the x-axis distance to the top left corner of the element (¿activeObject.left = activeObject.aCoords.tl.x?).

Anyway, i search for that type of aligning and my new code was based in this Stack Overflow question: https://stackoverflow.com/questions/61340776/align-object-to-canvas-in-fabricjs and i realized that the aligning depends in the activeObject.angle value too, but i wanted to try to solve the problem with the activeObject.getBoundingRect() property, so i end up with something like this:

But the problem is the following:

When the element is aligned to the left, then i can't move the element to the right. I know that i need to make a "static" condition. For example, doing if (activeObject.left <= 5) { activeObject.set('left', activeObject.left) } doesn't make sense for dynamic aligning.

So, after the explanation above, i created a JSFiddle with the issue: https://jsfiddle.net/Danex4517/L65fvz2b/37/. Thanks for the help in advance!! :D

[melchiar]

When you set the object's left value, you should use a Math.max() statement so that if the drag position is larger than the boundary then it uses the drag position instead activeObject.set('left', Math.max(left, activeObject.left))

https://jsfiddle.net/melchiar/xu7fedgj/

[D-Cryp7]

Thank you so much for the response! It work perfectly :D!!

[asturur]

Not sure if you solved already. The issue with the bounding box is that you have to consider the mouse position instead of the object one.
For the sake of having controls working, objects coords are updated during moving.

For the use case of aligning horizontally, You can reference each object aCoords x position, and on mousemove, if one of those coords is at the snapping position distance, you change the object left for the current difference between acoord.x and your snapping boundary.

[D-Cryp7]

The @melchiar response works very well and solve my problem, but i still have trouble with other types of dynamic aligning, so maybe the approach with the mouse position can solve that. Consider the following JSFiddle (https://jsfiddle.net/Danex4517/L65fvz2b/56/) where i want to align the center of the canvas with the left value of the bounding box (i would like to align the center of the canvas with the "right" value of the bounding box too). I tried something for the case that the active object is approaching from the left and from the right of the center, but i don't know how to solve it. Thank you so much for the response by the way!! :D