how to avoid rect width or height grow unexpectedly during snap in konva

Question

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.

Answer 1

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;
}