fix(crop size): handle vertical ratio properly

[ValentinH]

Fixes #151 #152

We are now using the container size to compute the crop size. Thanks to this, we can better use to available size for the crop area.

@ajlende Could you please confirm that this fix is working for your use case? Here's your example running the library version from this PR: https://codesandbox.io/s/react-easy-crop-image-aspect-lwpee
You can use this version of the package to test locally: "https://pkg.csb.dev/ricardo-ch/react-easy-crop/commit/4f8563a2/react-easy-crop"

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4f8563a:

Sandbox	Source
react-easy-crop	Configuration
react-easy-crop-image-aspect	Issue #151

[ajlende]

Seems like it's closer than before, but when the window is really wide I still see the issue, even in the sandbox. It may be because when the image is rotated, the CSS transform doesn't recalculate the size of the element, so measurements are still based off the non-rotated width and height?

[ValentinH]

I'm not sure to understand which issue you see. What output would you expect?

The crop area size looks correct to me. If you are talking about the image being taller than the screen, this is indeed because we are using a transformation to rotate it.

[ajlende]

Notice that the zoom slider. It is zoomed out as much as possible. You should be able to zoom out further so that the whole image fits within the crop area.

[ValentinH]

I see what you mean. Basically, you need to allow a zoom value lower than 1 in this case (probably equals to the aspect ratio?).

The image positioning is not handled by JavaScript, we only let the browser fit the image in the container. As mentioned above, when we rotate the image using a transformation, then this automatic positioning let the image flow outside of its container.

I don't see (at the moment) how to address this as part of the library without changing too many things.

[ajlende]

Basically, you need to allow a zoom value lower than 1 in this case.

I'd prefer that a zoom value of 1, an aspect ratio that matches the image (even when rotated), and restrictPosition set to true to always cover the entire image. That is, a value of less than one would only serve as to add padding around the image, if allowed.

I don't see (at the moment) how to address this as part of the library without changing too many things.

That's okay, this is a step in the right direction. And it seems to fix #152 for me. 👍

I'll start playing around with a solution for #151, but it sounds like it might end up needing to change a lot, so we'll see how it goes.

[ValentinH]

I'd prefer that a zoom value of 1, an aspect ratio that matches the image (even when rotated), and restrictPosition set to true to always cover the entire image. That is, a value of less than one would only serve as to add padding around the image, if allowed.

Yes, it makes sense. However, with the way the image is rotated today (transformation), this is tricky. If you come up with a PR for this, I'll be happy to review.

[ValentinH]

Released under v3.1.1