Upgrade to Cropper v2, add configurable aspect ratios

[derhofbauer]

This PR contains multiple changes:

1. It cleans up the discrepancy between the package.json and the package-lock.json versions of cropper, upgrades cropper to version 2, adapts the API in curation.js, removes unused dist files and makes adaptions to the way new curations render images.
2. It makes the aspect ratios configurable, so that custom aspect ratios can be used and even injected dynamically.
3. The curation modal abort button did not work. It calls the livewire close() method now.
4. The curation modal did not auto-close after saving a curation.

The changes to loading thumbnails mentioned in point 1 are required for private S3-hosted files to be accessible, solving #687. This partially aligns with the Media.php::url() method.

I also had to set the cross-origin attribute of the <img> tag itself to 'anonymous' to be able to export the canvas to a data URL. Otherwise I'd get an error "Tainted canvases may not be exported". This was the easiest solution, not the cleanest, admittedly.

[awcodes]

Can you target the PR to the 4.x branch please?

Also revert any linting rules so that code styling isn't affected. Hard for me to focus on the changes with noise around things like single quotes changing to double quotes.

Can you please not use pnpm? I'd prefer to keep it on npm.

[derhofbauer]

@awcodes I switched the target branch, removed the pnpm-lock file, ran the linter for PHP and fixed the prettier config, because that was not working either with prettier complaining about prettier-plugin-blade. I also ran the npm run prettier command, but that would cause way more formatting changes than the ones included in this PR, which would just drastically increase the noise. If really want me to run it, let me know.

[awcodes]

@derhofbauer havent forgotten about this, just haven't had time to do a full review and test. Hope to get to it soon. Thanks again.

[awcodes]

There appears to be some bugs in this:

1. When selected a ratio, there is no way to disable it again and go back to free form sizing.
2. I think that when selecting a ratio it should show that the option is selected.
3. Hitting the reset button is causing some unexpected change to the image / cropper viewing area.

[derhofbauer]

1. When selected a ratio, there is no way to disable it again and go back to free form sizing.
2. I think that when selecting a ratio it should show that the option is selected.
3. Hitting the reset button is causing some unexpected change to the image / cropper viewing area.

@awcodes 1 and 2 are fixed. Regarding 3, what is the expected behaviour here? When clicking a reset button I expect that things jump around a bit and return to the initial state. I agree, that this is not whats happening right now, because the selection is not reset, but I wanted to confirm the expected behaviour before starting to work on this.

For 1 I had to work with alpine x-if and render 2 buttons for each variant, which is not very elegant, but the quickest solution I could come with. Do you have other ideas how to implement this more elegantly?

[awcodes]

Just drop the 'x-if' stuff completely. No need to duplicate the buttons, just bind to the style attribute instead of using a class:

<x-filament::button
    type="button"
    color="gray"
    x-on:click="setAspectRatio({{ $ratio }})"
    x-bind:style="aspectRatio === {{ $ratio }} ? 'background-color: color-mix(in oklab, var(--gray-700)10%, transparent);' : ''"
>
    {{ $label }}
</x-filament::button>

For 3, yea, I think it should reset everything to the initial state when the modal was opened.

Thanks again on all your work on this.

[derhofbauer]

@awcodes I implemented the suggested piece of code.

For 3: The reset button now destroys and re-inits the whole canvas.

Please review :)