calling cropper methods - please add a little bit more documentation

[dantel35]

Hi,

first of all, thank you for providing this wrapper! It saves us all a lot of time.

It would be even more useful if you could provide just a little bit more documentation. Maybe it is just me being an ember beginner (and all the confusion mixed in that stems from all this octane vs pre-octane code), but I can not figure out how you are supposed to use your components. While I think I understand what

{{cropper.on 'crop' action=(action 'crop')}}

actually does (when "crop" is called on cropper, the passed action will be executed), I can not figure out how to utilize the "call" component to actually call "crop" when I want to (vs e.g. autocrop).

What I want is to simply add a toolbar where e.g. one clicks on the "fliip X" button and the image is flipped, clicking on "crop" crops the image etc..

Now I did get it to work like this:

{{! -- in *.hbs --}}

{{#image-cropper
  source=this.preview_image
  options=(hash
    aspectRatio=1
    viewMode=2
    responsive=true
  ) as |cropper|}}
<a class="button" {{on 'click'(fn  this.flip_x cropper.cropper)}}>Flip</a>
{{/image-cropper}}

//in *.js 
(...)
        @action
        flip_x(cropper)
        {
          var oldScale = cropper.imageData.scaleX ? cropper.imageData.scaleX : 1;
          cropper.scaleX( oldScale * -1);
        }
(...)

Please especially notice the "cropper.cropper" part. It does work but I am absolutely not sure if this is what I am supposed to do. It sounds like I shall use "cropper.call", but no matter how I do it, I always end up getting

Assertion Failed: image-cropper-call crop() must be a function on [object Object]

Furthermore I have no Idea how to call it using the on-modifier (or any way besides pasting in in the template directly).

If the above is a sane way to do it, please add it to the documentation. Otherwise any example of how to actually do this would be appreciated.