aico-image-editor/src/components/backgroundCropModal/backgroundCropModal.html

Combine multiple image into and create single combined image

<div class="modalParent" x-data="backgroundCropModal">
    <div class="modal fade pe-none" id="cropbgModal" 
        aria-hidden="true"
        x-init="() => {
            $store.elements.cropbgModalEL = $el;
            $store.modal.createModal($el, $dispatch, {
                backdrop: false,
                keyboard: false,
                focus: true,
                container: 'body'
            })
            // use this setting if directly want to open upon load
            // some modifications needed in crop method in canvas store.
            // $store.canvas.crop($store)
        }" 
        @cropbgmodal-shown.window="($event) => {
            if($store.bgshapeCropperModalStore.cropBgImage) {
                $store.bgshapeCropperModalStore.initBackgroundCropper($store.bgshapeCropperModalStore.cropBgImage);
            }
        }">
        <div class="modal-dialog  modal-dialog-centered modal-xl pe-auto">
            <div class="modal-content bg-light">
                <div class="block block-rounded mb-0">
                    <div class="block-header block-header-default">
                        <h3 class="block-title" x-text="getTranslatedHTML('cropBackgroundTitle')"></h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" id="bttncancel"  @click="() => {
                                $store.modal.closeModal($store.elements.cropbgModalEL)
                            }" data-bs-dismiss="modal" aria-label="Close"> <i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    
                    <!-- Cropper -->
                    <div class="block-content block-content-full">
                        <div class="row items-push">
                            <div class="col-md-8 position-relative">
                                <div class="crop-init-element" id="imgbgcrop" x-init="$store.elements.imgBgCropEL = $el"></div>
                                <div class="position-absolute top-0 end-0 me-4 mt-3 p-2 bg-secondary text-white rounded-4 fs-md">
                                    <span x-text="$store.bgshapeCropperModalStore.cropBoxWidth"></span> x
                                    <span x-text="$store.bgshapeCropperModalStore.cropBoxHeight"></span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h4><span x-text="getTranslatedHTML('imagepreview')"></span></h4>
                                <div class="overflow-hidden mb-2">
                                    <div class="cropper-preview js-bgimg-cropper-preview js-img-inside-cropper-preview center-block overflow-hidden pe-none" style="height: 200px;"
                                        x-init="$store.elements.cropperBgPreviewEL = $el"></div>
                                </div>
                                <div class="btn-group m-1">
                                    <button type="button" class="js-bs-tooltip btn btn-lg btn-alt-danger"  title="Clear" @click="$store.bgshapeCropperModalStore.clear()">
                                        <i class="fa fa-times"></i> <span x-text="getTranslatedHTML('clear')"></span>
                                    </button>
                                    <button type="button" class="js-bs-tooltip btn btn-alt-success p-0"  data-bs-dismiss="modal">
                                        <a class="btn btn-lg btn-alt-success" x-show="!$store.bgshapeCropperModalStore.cropperData"  :title="getTranslatedHTML('crop')"
                                            @click="async () => {
                                                $store.modal.closeModal($store.elements.cropbgModalEL)
                                                await $store.bgshapeCropperModalStore.processUpload($store);
                                            }">
                                            <i class="fa fa-check"></i>
                                            <span x-text="getTranslatedHTML('crop')"></span>
                                        </a>
                                        <a class="btn btn-lg btn-alt-success" x-show="$store.bgshapeCropperModalStore.cropperData"  :title="getTranslatedHTML('updateCrop')"
                                            @click="async () => {
                                                $store.modal.closeModal($store.elements.cropbgModalEL)
                                                await $store.bgshapeCropperModalStore.processUpdate($store)
                                            }">
                                            <i class="fa fa-check"></i>
                                            <span x-text="getTranslatedHTML('updateCrop')"></span>
                                        </a>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END Cropper -->
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show d-none" @cropbgmodal-shown.window="($event) => {
        $el.classList.remove('d-none');
      }"  @cropbgmodal-hidden.window="($event) => {
        $el.classList.add('d-none');
      }" @click="$store.modal.closeModal($store.elements.cropbgModalEL)"></div>

</div>