I was trying to snap the rect to show up a perfect square upon transform. i.e when resizing if width and height becomes same I'll show lines indicating it's a square.
but, while doing the height or width of the rect is growing unexpectedly as shown in gif
The codesandbox link was https://codesandbox.io/s/snapex-forked-919s83
Here for snapping the rect around 3px
margin, I wrote the below code.
boundBoxFunc={(oldPos, newPos) => {
if (Math.abs(newPos.width - newPos.height) <= 3) {
if (Math.abs(oldPos.width - oldPos.height) <= 3) return newPos
let square = Math.max(newPos.width, newPos.height)
newPos.width = square
newPos.height = square
}
return newPos
}}
I knew this logic is what causing the issue. can anyone kindly help me to write better logic so the rect wont grow upon snapping.
the inherit Problem is, that youre changing the height while moving the width. But you probably only want to move that direction youre already moving on.
So the most simplest solution would be to look if youre moving the height or width.
So my solution would be this function:
boundBoxFunc={(oldPos, newPos) => {
if (Math.abs(newPos.width - newPos.height) <= 3) {
if (Math.abs(oldPos.width - oldPos.height) <= 3) return newPos;
// Find out if you moved the width or height.
if(newPos.height - oldPos.height != 0){
// We have moved the height and shouldnt manipulate the width
newPos.height = newPos.width;
}else{
// vice verca
newPos.width = newPos.height;
}
}
return newPos;
}