Feature Request: Propagate move/resize events

[ionicsolutions]

Currently, the Cropper component emits the change event once the stencil has been moved/resized. I would like to receive an event when the stencil starts changing as well, e.g., a changeStarted event. As far as I can see, this could be accomplished by propagating the move and resize events emitted by the stencil component.

If this is something you're interested in, I'm happy to provide a PR for it.

[Norserium]

@ionicsolutions, could you describe your use-case?

Actually, it's pretty easy to implement and it may be really useful, but there are questions:

• When you start to resize / move image, should the cropper emit change-start and change-end evens? When the resizing / moving is started? When the resizing / moving is ended?
• Should the cropper emit change-start and change-end on calling its methods? I suppose no, but change event will be fired anyway and it's may be confusing, that change-start and change-end are not fired.
• What should events pass as arguments? Obviously, they should pass the reason, why they were fired, so it's need to design the suitable interface for them.

This answers have no right answers, so I need pretty much time to choice the better solution.

[ionicsolutions]

I'm selecting a portion of an image and generate a prediction using an ML model (currently, there is an early demo publicly available here: https://test.xaidemo.de/inspection/). We would like to remove the prediction output as soon as the user moves/resizes the stencil, as it is no longer valid. I imagine that this is a somewhat common situation, e.g., let's say we show the size of the selected area next to the image.

Thus, I would like to access the move and resize events emitted here:

• https://github.com/Norserium/vue-advanced-cropper/blob/master/src/components/stencils/RectangleStencil.vue#L137
• https://github.com/Norserium/vue-advanced-cropper/blob/master/src/components/stencils/RectangleStencil.vue#L145

In my use case, I do not change the stencil using methods, so I don't have a strong opinion.

[Norserium]

Currently you can use the following workaround:

1. Set debounce to false. In this case change will fire on each change immediately.
2. Add to the callback function clearing of the current result and the debounced call of the image processing.

It's not the perfect solution, but it will create the illusion of the desired result.

Your feature request sounds pretty reasonable, I will try to figure out how resolve it, but I can't promise that it will be soon.

Nice project, by the way.

[Norserium]

I imagine that this is a somewhat common situation, e.g., let's say we show the size of the selected area next to the image.

In this case I would recommend to set debounce to false and display the size immediately. And it's won't be a workaround.

The same situation when you need to preview the image in real-time. There is the corresponding example in the documentation.

Maybe, the debounce will be disabled by default in this library in the next releases. But I decided to keep it for a while, because its disabling will be very painful breaking change.

[Norserium]

@ionicsolutions, could you give the feedback for the workaround above?

[ionicsolutions]

Hi Norserium, thanks for the hints! I haven't worked on that part of the app in the past week. I'll most likely get around to it over the next days (also the switch to 1.0) and will let you know as soon as I've tried.

[Norserium]

@ionicsolutions, any news?

[ionicsolutions]

Sorry that it took longer than expected, we have a deadline approaching so I needed to take care of some other issues first.

I've upgraded our project to 1.3.0 and tried the debounce workaround.

It has the desired effect, however, I would then need to handle waiting for the moving/resizing to stop in my part of the App. We trigger a backend request once there was a change and if I turn off the debounce, my backend API gets flooded with requests (as expected). Hence, I'd still like to be able to listen to a change-start event.

It's not a high priority for me right now, but as I offered in my initial post I'm happy to give it a try at some point in the future and provide a PR.

[Norserium]

@ionicsolutions I assume there is a little misunderstanding. You can clear the results on change and then call the debounced API request (I use debounce library for it in this library).

[ionicsolutions]

@Norserium Indeed, I didn't get that part!

Thanks for pointing this out, I was able to solve it in a matter of minutes now 👍

[hanzhenfang]

I face the same problem in my project.

I do blow this to prevent it from colliding with my scrolling logic.

then, I add a judgment code in my page scroll event.

something good work!