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

Combine multiple image into and create single combined image

<div class="modalParent" x-data="shapeCropModal">
    <div class="modal fade pe-none" id="cropModal"  aria-hidden="true"
        x-init="() => {
            $store.elements.cropShapeModalEL = $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)
        }" 
        @cropmodal-shown.window="($event) => {
            if($store.shapeCropperModalStore.cropperShapeImg) {
                $store.shapeCropperModalStore.initShapeCropper($store.shapeCropperModalStore.cropperShapeImg);
            }
        }">
        <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('cropMotiveTitle')"></h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" id="bttncancel"  @click="() => {
                                $store.modal.closeModal($store.elements.cropShapeModalEL)
                            }" 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-12">
                                <div class="mb-4">
                                    <div class="btn-group m-1">
                                        <button type="button" class="js-bs-tooltip btn btn-lg"
                                            :class="$store.shapeCropperModalStore.dragMode === 'move' ? 'btn-primary':'btn-alt-primary' "
                                            @click="$store.shapeCropperModalStore.setDragMode('move')"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setDragMoveTooltip')">
                                            <i class="fa fa-arrows-alt"></i>
                                        </button>
                                        <button type="button" class="js-bs-tooltip btn btn-lg"
                                            :class="$store.shapeCropperModalStore.dragMode === 'crop' ? 'btn-primary':'btn-alt-primary'"
                                            @click="$store.shapeCropperModalStore.setDragMode('crop')"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setDragCropTooltip')">
                                            <i class="fa fa-crop"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group m-1">
                                        <button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.shapeCropperModalStore.zoom('0.1', 'zoomIn')"
                                            :class="$store.shapeCropperModalStore.zoomMode === 'zoomIn' ? 'btn-primary':'btn-alt-primary'"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('zoomInTooltip')">
                                            <i class="fa fa-search-plus"></i>
                                        </button>
                                        <button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.shapeCropperModalStore.zoom('-0.1', 'zoomOut')"
                                            :class="$store.shapeCropperModalStore.zoomMode === 'zoomOut' ? 'btn-primary':'btn-alt-primary'"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('zoomOutTooltip')">
                                            <i class="fa fa-search-minus"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group m-1">
                                        <button type="button" class="js-bs-tooltip btn btn-round btn-lg" @click="$store.shapeCropperModalStore.setRadius()"
                                            :class="$store.shapeCropperModalStore.shouldPushRounded ? 'btn-primary':'btn-alt-primary'"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setRadiusTooltip')">
                                            <i class="far fa-circle"></i>
                                        </button>
                                        <button type="button" class="js-bs-tooltip btn btn-square btn-lg" @click="$store.shapeCropperModalStore.setSquare()"
                                            :class="$store.shapeCropperModalStore.shouldPushRounded ? 'btn-alt-primary':'btn-primary'"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setSquareTooltip')">
                                            <i class="far fa-square"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group m-1">
                                        <button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.shapeCropperModalStore.setAspectRatio('1.77')"
                                            :class="$store.shapeCropperModalStore.aspectRatio === '1.77' ? 'btn-primary': 'btn-alt-primary'"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
                                            <span>16:9</span>
                                        </button>
                                        <button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.shapeCropperModalStore.setAspectRatio('1.33')"
                                            :class="$store.shapeCropperModalStore.aspectRatio === '1.33' ? 'btn-primary': 'btn-alt-primary'"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
                                            <span>4:3</span>
                                        </button>
                                        <button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.shapeCropperModalStore.setAspectRatio('1')"
                                            :class="$store.shapeCropperModalStore.aspectRatio === '1' ? 'btn-primary': 'btn-alt-primary'"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
                                            <span>1:1</span>
                                        </button>
                                        <button type="button" class="js-bs-tooltip btn btn-lg" @click="$store.shapeCropperModalStore.setAspectRatio('0.66')"
                                            :class="$store.shapeCropperModalStore.aspectRatio === '0.66' ? 'btn-primary': 'btn-alt-primary'"
                                            data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
                                            <span>2:3</span>
                                        </button>
                                        <dropdown-menu datatemplateurl="./dropdownMenu.html" styles="global" shadow="true"  x-data="dropdownMenu"
                                            class="btn-group btn-group-lg " dropdown-trigger-class="dropdown-toggle-split btn-alt-primary">
                                            <span slot="dropdown-trigger" class="pe-none">
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </span>
                                            <ul slot="dropdown-content" class="list-unstyled">
                                                <template x-for="savedAspectRatio in $store.shapeCropperModalStore.savedAspectRatios">
                                                    <li>
                                                        <a href="javascript:void(0)" class="dropdown-item position-relative pe-5" 
                                                            @click="$store.shapeCropperModalStore.setAspectRatio(`${savedAspectRatio.value}`)">
                                                            <span x-text="savedAspectRatio.label"></span>
                                                            <span class="position-absolute end-0 me-2 top-50 translate-middle-y" 
                                                                x-show="$store.shapeCropperModalStore.aspectRatio === `${savedAspectRatio.value}`">
                                                                <i class="fa fa-check"></i>
                                                            </span>
                                                        </a>
                                                    </li>
                                                </template>
                                                
                                            </ul>
                                        </dropdown-menu>
                                        
                                        
                                    </div>
                                    <button type="button" class="js-bs-tooltip btn btn-lg m-1"
                                        :class="$store.shapeCropperModalStore.aspectRatio === 'NaN' ? 'btn-primary': 'btn-alt-primary'"
                                        @click="$store.shapeCropperModalStore.setAspectRatio('NaN')"
                                        data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('setAspectRatioTooltip')">
                                        <span x-text="getTranslatedHTML('freeText')"></span>
                                    </button>
                                    <div class="form-check form-switch form-check-inline" :class="$store.shapeCropperModalStore.aspectRatio === 'NaN' ? '' : 'inactiveblock'"
                                        x-show="!$store.shapeCropperModalStore.uploadWithoutConfig">
                                        <input class="form-check-input" type="checkbox" value="" id="shape-save-aspect-ratio" name="shape-save-aspect-ratio" 
                                            x-model="$store.shapeCropperModalStore.shouldCurrentAspectRatioSaved" />
                                        <label class="form-check-label" for="shape-save-aspect-ratio" x-text="getTranslatedHTML('saveAspectRatio')"></label>
                                    </div>
                                    <div class="btn-group m-1">
                                        <button type="button" @click="$store.shapeCropperModalStore.clear()" class="js-bs-tooltip btn btn-lg btn-alt-danger" data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('resetTooltip')">
                                          <i class="fa fa-times"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group m-1">
                                        <button type="button" class="js-bs-tooltip btn btn-lg btn-alt-primary p-0"  data-bs-dismiss="modal">
                                            <a class="btn btn-lg btn-primary" x-show="!$store.shapeCropperModalStore.cropperData"  data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('confirmText')"  
                                                @click="async() => {
                                                    $store.modal.closeModal($store.elements.cropShapeModalEL)
                                                    if(!$store.shapeCropperModalStore.uploadWithoutConfig) {
                                                        $store.shapeCropperModalStore.processUpload($store)
                                                    } else {
                                                        $store.shapeCropperModalStore.processUploadWithoutConfigurator($store)
                                                    }
                                                    
                                                }">
                                                <i class="fa fa-check"></i>
                                                <span x-text="getTranslatedHTML('confirmText')"></span>
                                            </a>
                                            <a class="btn btn-lg btn-primary" x-show="$store.shapeCropperModalStore.cropperData" :title="getTranslatedHTML('updateCrop')"
                                                @click="async() => {
                                                    $store.modal.closeModal($store.elements.cropShapeModalEL)
                                                    $store.shapeCropperModalStore.processUpdate($store)
                                                }">
                                                <i class="fa fa-check"></i>
                                                <span x-text="getTranslatedHTML('updateCrop')"></span>
                                            </a>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row items-push">
                            <div class="col-md-8 position-relative">
                                <div class="crop-init-element" id="imgcrop" x-init="$store.elements.imgCropEL = $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.shapeCropperModalStore.cropBoxWidth"></span> x
                                    <span x-text="$store.shapeCropperModalStore.cropBoxHeight"></span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h4 class="mt-3 mb-5"><span x-text="getTranslatedHTML('imagepreview')"></span></h4>
                                <div class="overflow-hidden mb-2">
                                    <div class="cropper-preview js-img-cropper-preview js-img-inside-cropper-preview center-block overflow-hidden pe-none" style="height: 150px;"
                                        x-init="$store.elements.cropperShapePreviewEL = $el"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END Cropper -->
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show d-none" @cropmodal-shown.window="($event) => {
        $el.classList.remove('d-none');
      }"  @cropmodal-hidden.window="($event) => {
        $el.classList.add('d-none');
      }" @click="$store.modal.closeModal($store.elements.cropShapeModalEL)"></div>
</div>