Aspect ratio from corner

[AndrewPixel]

Is there some way it can be set so that resizing from a corner handle maintains the aspect ratio while resizing from a side's centre handle resizes in the handle's direction ie. doesn't maintain the aspect ratio?

[daybrush]

@AndrewPixel

set keepRatio prop.

https://daybrush.com/moveable/release/latest/doc/Moveable.Resizable.html#keepRatio

[damianhrabaszcz]

But that keeps ratio at all times. The author wants to keep the ratio when app is resized using controls at the corners, but not when resize using sides' center controls.

[damianhrabaszcz]

In React I can use keepRatio using useState. And then set keepRatio to false or true depending on OnResize events direction.

[damianhrabaszcz]

@AndrewPixel have you solved this?

[AndrewPixel]

I solved it by writing my own code to resize an element. It's nowhere near as full featured as Moveable but at least I got the resizing working the way they wanted it.

[SidIcarus]

@AndrewPixel

You can get this easily working with Moveable's by determining which handle the event is coming from. The event has the property direction which is [(-1, 0, 1), (-1, 0, 1)]. I provided a map below to easily show what is what. From, in resizeStart, you can call isCorner, save the current state of keepRatio in event.datas, set keepRatio to true. Then in resizeEnd you can restore the previous keepRatio value

const map = {
  ne: [1, -1],
  nw: [-1, -1],
  se: [1, 1],
  sw: [-1, 1],

  n: [0, -1],
  e: [1, 0],
  s: [0, 1],
  w: [-1, 0],
}
const isCorner = ([h, v]: [number, number]) => h !== 0 && v !== 0
// alternatively, h && v

[AndrewPixel]

Thanks, your code was trivial to implement - wish I'd known about it a year ago.

[damianhrabaszcz]

@AndrewPixel Thought, I'd share my code as well.

onResizeStart={e => {
    // Keeping aspect ratio if resized using controls at the connection points of the edges
    if (Math.abs(e.direction[0]) !== Math.abs(e.direction[1])) {
        setKeepAspectRatio(false);
    } else {
        setKeepAspectRatio(true);
    }
}}

Then keepAspectRatio from useState is what I provide to <Moveable ... />