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

Combine multiple image into and create single combined image

<div class="container" x-data="containerModal">
    <div class="row">
        <div class="col-12 modalParent">
            <div class="modal fade pe-none" id="imageCombinerModal" aria-labelledby="imageCombinerModalLabel"
            x-init="() => {
              $store.elements.containerModalEL = $el;
              $store.modal.createModal($el, $dispatch)
            }" x-bind="imageCombinerModal">
              <div class="modal-dialog modal-xl pe-auto">
                <div class="modal-content">
                  <div class="block block-rounded shadow-none mb-0">
                    <div class="block-header block-header-default">
                      <h5 class="block-title" id="imageCombinerModalLabel" x-text="getTranslatedHTML('componentModalTitle')"></h5>
                      <div class="block-options">
                        <div class="block-options-item">
                          <div class="text-start rounded-3 btn bg-gray mb-0"
                              :class="{ 'p-0': !($store.canvas.activeObjectWidth && $store.canvas.activeObjectHeight) }">
                              <span x-text="$store.canvas.activeObjectWidth"></span>
                              <span x-text="$store.canvas.activeObjectHeight"></span>
                          </div>
                        </div>
                        <!-- dropdown with bootstrap -->
                        <div class="btn-group me-2" :class="($store.canvas.isObjectDeselected || $store.canvas.isTextObjectSelected) ? 'inactiveblock': ''"> 
                            <button class="btn btn-lg btn-elegance-primary" type="button" x-text="getTranslatedHTML('applySameSize')">
                            </button>
                            <button class="btn btn-lg btn-elegance-primary dropdown-toggle dropdown-toggle-split" type="button" id="sameSizeDropdownBtn" 
                                data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false" x-init="createSameSizeDropdown($el)"
                                @click.stop="toggleSameSizeDropdown()" @click.outside="sameSizeDropdown?.hide()">
                            </button>
                            <ul class="dropdown-menu custom_dropdown" aria-labelledby="sameSizeDropdownBtn">
                                <li><a :class="{ 'disabled': $store.canvas.isMarkObjectOptionDisabled }" class="dropdown-item" x-text="getTranslatedHTML('markObject')"
                                    @click="$store.canvas.markObject(); sameSizeDropdown?.hide()" href="javascript:void(0)"></a>
                                    <span :class="{ 'd-block': $store.canvas.isMarkObjectOptionDisabled }" class="position-absolute"><i class="fa-solid fa-square-check"></i></span>
                                </li>
                                <li><a class="dropdown-item" x-text="getTranslatedHTML('applySameSize')"
                                    @click="$store.canvas.applySameSizeAsMarkedObject(); sameSizeDropdown?.hide()" href="javascript:void(0)"></a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close"
                          @click="$store.modal.closeModal($store.elements.containerModalEL)">
                          <i class="fa fa-times"></i>
                        </button>
                      </div>
                    </div>
                    <div class="block-content bg-body">
                      <div class="editor-interface row gx-2 position-relative z-index-5 align-items-start flex-nowrap">
                        <div class="col-lg-6 col-xl col-xxl-6 top-0"   :class="[productBlockVisibleMobile ? 'd-block':'d-none d-lg-block',
                                  !($store.canvas.isFullScreen) ? 'position-lg-sticky':'']">
                            <configurator-component datatemplateurl="./configurator.html" styles="global"
                              shadow="true"></configurator-component>
                        </div>
                        <div class="editor-interface__thumbnail">
                          <layer-thumbnail datatemplateurl="./layerThumbnail.html" styles="global"
                              shadow="true"></layer-thumbnail>
                        </div>
                        <div class="col-lg-6 col-xxl"  :class="[productBlockVisibleMobile ? 'd-none d-lg-block':'d-block', currentLocale === 'de' ? 'de':'']"
                          >
                          <configurator-tabs datatemplateurl="./configuratorTabs.html" styles="global" shadow="true"></configurator-tabs>
                        </div>
                      </div>
                    </div>
                    <div class="block-content block-content-full text-end">
                      <button type="button" class="btn btn-primary" @click="$store.modal.closeModal($store.elements.containerModalEL)">
                          <span x-text="getTranslatedHTML('closeText')"></span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            
            </div>
            <div class="modal-backdrop fade show d-none" @imagecombinermodal-shown.window="($event) => {
              $el.classList.remove('d-none');
            }"  @imagecombinermodal-hidden.window="($event) => {
              $el.classList.add('d-none');
            }" @click="$store.modal.closeModal($store.elements.containerModalEL)"></div>
            
        </div>
        <delete-confirm-modal datatemplateurl="./deleteConfirmModal.html"  styles="global"
        shadow="true"></delete-confirm-modal>
        <background-crop-modal datatemplateurl="" shadow="true" styles="global"></background-crop-modal>
        <shape-crop-modal datatemplateurl="./shapeCropModal.html" shadow="true" styles="global"></shape-crop-modal>
        <main-picture-crop-modal datatemplateurl="./mainPictureCropModal.html" shadow="true" styles="global"></main-picture-crop-modal>
        <ai-modal datatemplateurl="./aiModal.html" shadow="true" styles="global"></ai-modal>
      </div>
    
</div>