Applying a transform to the preview only

[caprica]

I would like to apply a rotation transform to only the preview, not the image in the cropper itself.

When I try this, I think I am seeing some weird interaction between the cropper and the wrapper div containing the preview that I rotate that is confusing the calculated size applied to the preview.

For example, if I apply transform: rotate(90deg) to the preview wrapper component, it rotates correctly, but it halves the height of the preview content.

Obviously a normal div wouldn't lose half the height when rotated.

Anyone has any clues or examples on how I might get this working for preview?

[caprica]

Here's an example of what I mean, the pink rectangle is the preview container, it is the correct size. The inner image is the preview itself from the cropper.

Here's the version without a rotation transform of zero degrees applied to the preview container, you can see no pink background this time because the preview image is perfectly sized:

Bizarrely, at least to me, this rectangle rotation transform seems to work OK until it reaches 64 degrees, at which point the pink background is visible round the edges, and then as you increase rotation past 64 degrees the image gets smaller and smaller until you see the first screenshot at 90 degrees.

[caprica]

Follow-up, it seems advanced-cropper-preview__content (and also the boundary stretcher) has a "wrong" size in this scenario:

If I override that element with a global style rule it (mostly, but not perfectly) works as expected - however this was just a hack, it's not a solution I can actually use.

[Norserium]

@caprica, could you create the sandbox that reproduces this issue? Also, it would be helpful if you record a video.

[caprica]

OK, so the problem comes down to this, What I am trying to achieve is to set an explicit pixel size on the preview. I need this so it fits into a specific part of my overall layout.

Here is a sandbox:

https://codesandbox.io/s/ancient-platform-5ptth9

This sandbox shows a cropper with two previews.

The first with a rotation that is not sized correctly. It keeps the same width, after rotation.

The second preview is normal, without any transformation, and is sized perfectly.

So I am not sure if I am just using CSS transforms incorrectly, or if there is some weird interaction between my rotated preview size and your library. But either way, I'm a bit stuck, so any tips would be very welcome.

(Also, anytime I make a change to the sandbox, I need to do a full refresh of the browser view otherwise the layout goes weird).

[Norserium]

@caprica, that is the peculiarity of getBoundingClientRect() that is used under the hood of the preview component. It gets the rotated size, not the original one, and it breaks everything.

First of all, why do you need to rotate the preview?

Secondly, I added in the last version the possibility to redefine the size algorithm to use, for example, clientWidth and clientHeight instead of using getBoundingClientRect. There is the example.

[caprica]

I need to rotate the preview because of a requirement I have to place the cropped image into a particular place in our UI design. The rotation won't be as severe as 90 degrees, that was just to illustrate the worst-case of the problem.

Thanks a lot for the example.

[Norserium]

@caprica, don't forget to update to the latest version 0.19.4. I've added this possibility today.

[caprica]

Again, thanks. This is a really nicely implemented library and I hope I can get it working how I need.

[caprica]

@Norserium do you have Ko-Fi or GitHub sponsor account or something?

I installed the new version with your size algorithm change and I think it's working beautifully. I only say "think" because I can't quite believe it.

[Norserium]

@caprica, I don't have any of that accounts, but thank you for your proposal. I appreciate that. Good luck with the project!