More detailed events please??

[GsHeri]

I'm using v2 (1.11.6) and i really wonder, why there is only ONE event?

my use-case is a user-details page. so i want to activate the save button only when the image was actually CHANGED. now this cropper fires its "changed" event on change, as well as init/load, or pretty much everything else. how am i supposed to listen for an actual "image was changed" event? i don't need the same event on load as on change. how does that help anyone?

am i missing something?

[Norserium]

@GsHeri, there will be a lot more events in the next major release: onChange, onUpdate, onReady, onError, onTransitionsStart, onTransitionsEnd, onResize, onResizeEnd, onMove, onMoveEnd, onTransformImage, onTransformImageEnd, onInteractionStart, onInteractionEnd.

But, alas, onChange still will be called after any state change and there is the reason, because the state of the cropper changes when user loads an another image.

Moreover, an user can undo its changes and in your approach the image will be still considered as changed. Instead in the new major version will be used another approach to suit your use-case:

const isDirty = !isEqualState(cropper.getState(), cropper.getDefaultState());

The new API is implemented in react-advanced-cropper now.

What can I offer you now? I can offer you the workaround, for example.

[GsHeri]

oh nice, that looks promising! i'll try it, thanks!

update: it's ALMOST working. one thing that's missing is the detection of actual "uploading a new image". i changed your code to { coordinates, visibleArea, imageTransforms, image }, but it looks to me that onReady fires on image upload, so they're always equal.... so, moving boundaries and cropping triggers a "changed", but uploading a completely new image resets the initial state to the new image do you have an idea about this?

update2: i went the easiest way and added another variable:

        onReady() {
            if (this.initialImageStored) return
            this.initialImageStored = true
            // ...

so far it seems to be doing exactly what i wanted :)

update3: unfortunately, it detects changes in browser window size / vue breakpoints or responsiveness as "change" :(