Cropper js V2 limit selection boundaries does not work smoothly as viewMode from Cropper js V2 behavior [V2]

[masdnp]

I am trying to create a same boundaries as viewmode image in the v2 using the limit selection boundaries example but the selection feels buggy and not smooth as version 1. How can we make the V2 limit selection boundaries smooth as the viewmode image from version 1?

[mathieudz]

The problem with the example is that it simply blocks events outside the bounding rectangle instead of correcting them to map to the closest rectangle inside the bounding rectangle. I'm not sure it is possible without native support for this feature. For me it's a blocker for upgrading.

[jdjfisher]

I experienced the same issue when migrating a project to use v2. Recreating the smooth behaviour of viewMode=1 from v1 was a must have for us so I adjusted the example from the v2 documentation to explicitly set constrained values of x, y, width and height before calling a manual $render in place of the cancelled change event. As suggested in the migration guide I also applied this logic to the transform event to handle zooms scales etc.

I've put together a trimmed down version of my Vue cropper component in a gist which demonstrates the approach above. I hope this helps.

cropper-demo.mov