Check if cropper is dirty

[lucianobosco]

I'm trying to figure out what's the easiest way to check if crop/size/etc has changed since the component was mounted on Vue 3.
I'd like to send crop data to my patch API endpoint ONLY if the user performed any action intentionally.

Unfortunately, the change() event does not provide the event (mounting, resizing the stencil, moving the stencil, and changing the image) so I can't distinguish between events dispatched programmatically (on mounted) or because user interaction.

So far, the only way I found is watching everything coordinates, image, visibleArea, canvas but it looks that it's not the most effective way.

Any hint will be appreciated

[Norserium]

@lucianobosco, I can offer you to use @ready event, save the initial state as the default state and compare the current state with one. The example.

In the new core it will be pretty easy, you can easily retrieve default state and compare it with the current state:

import { isEqualStates } from 'advanced-cropper/service'

const cropper = cropperRef.value;

if (cropper) {
   const state = cropper.getState();
   const image = cropper.getImage();
   if (state && image) {
      isEqualStates(state, cropper.getDefaultState(state.boundary, image));
   }
  return true;
}

But currently it's not available.

[lucianobosco]

Awesome! Thank you so much! Do you have an ETA for the next release? Those methods look very interesting

[Norserium]

@lucianobosco, it depends.

I've used the new core in react-advanced-cropper. It's currently in the beta testing, so I'm awaiting the growth of this library popularity to get some user feedback.

According to the dynamic I assume that Vue version based on new core will be available only in the next year.