advanced-cropper / react-advanced-cropper

The react cropper library that embraces power of the advanced cropper core to give the possibility to create croppers that exactly suited for your website design
https://advanced-cropper.github.io/react-advanced-cropper/
Other
678 stars 34 forks source link

Mouse resizing doesn't work #50

Closed mohammadius closed 9 months ago

mohammadius commented 9 months ago

Hi, I'm trying to use react-advanced-cropper in my web application but my problem is that resizing the crop box with mouse doesn't work. resizing, moving and zooming does work with touch input and also zooming works with mouse scroll wheel. i've tested it with version 0.19.4 and 0.19.3. i'm giving the Cropper a base64 image and that's it.no onChange listeners or ref or states.

Norserium commented 9 months ago

@mohammadius, could you provide the codesandbox that reproduces this issue? Do you encounter this trouble in the documentation examples?

mohammadius commented 9 months ago

@Norserium well, that's the problem, I can't reproduce the problem in CodeSandBox. i have tried to do it in here, it's basically what i have in my own project. i have the cropper inside a popup and i'm rendering that with createPortal, could that cause a problem? and i have to use createPortal, for now at least.

Norserium commented 9 months ago

@mohammadius, could you reproduce in the codesandbox the using of createPortal?

mohammadius commented 9 months ago

okay, so the problem was kind of a miscommunication issue with my team. the problem was that there was another component rendering in the background that had mouse event listeners on document, and in those event listeners they had called preventDefault and stopPropagation on the event and one or both of them (probably stopPropagation) caused the cropper handles to not get the mouse events. calling any of those methods in those listeners were unnecessary anyways, so removing them fixed the problem.

Norserium commented 9 months ago

@mohammadius, all's well that ends well!