fix(crop-area): recalculate sizes on media objectFit change

[kruchkou]

Hello @ValentinH!

I've faced an issue with crop area size computation on picture changes with obejct-fit: "cover".

Pre requirements

• Use round cropper with fixed size

Cropper properties

object-fit: "cover",
aspect: 1,
cropShape: "round",

Container css properties:

width: 500px,
height: 500px

Steps to reproduce:

• Choose Horizontal Big image (all sides > 500px)
• Change image to Vertical Small (all sides < 500px)

(Same for Vertical Big - Horizontal Small image pair)

Expected behaviour

Crop area is 500x500

Observed behaviour

Crop area is 250x250

To fix the issue I've moved the getObjectFIt() result value into state and added callback to recalculateSize() on this state value change.

Issue code example: https://codesandbox.io/p/sandbox/react-easy-crop-demo-forked-6xh2m2?file=%2Fsrc%2Findex.js
Fix code example: https://codesandbox.io/p/sandbox/react-easy-crop-forked-vzrfyk?file=%2Fsrc%2Findex.js

[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 8e9c779:

Sandbox	Source
react-easy-crop	Configuration

[ValentinH]

Thank you for catching this and providing a fix. I have a question though before approving this PR.

[ValentinH]

Do we need to store this in the state? Couldn't just call this.computeSizes when this prop changes (like done for other props above)?

[kruchkou]

We could not catch this through props since it's not the props.objectFit changes

What is being changed is the result of getObjectFit() method that calculates how to properly align the image inside the container (should horizontal-cover or vertical-cover be applied)

• To determine which one should be applied the image should already be presented on the layout to get its sizes (that's why requires re-render)
• Since we already calculated the sizes and props haven't changed on the second render run, the componentDidUpdate() doesn't call computeSIzes() method

Thats why on getObjectFit() result change we need a callback for computeSizes() and re-render (on state change) to apply new sizes

[ValentinH]

Thanks again for this PR!

[github-actions]

🚀 PR was released in v5.0.4 🚀