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

Combine multiple image into and create single combined image

<div x-data="labellingTab">
    <form x-data="dragdrop" enctype="multipart/form-data">
        <div class="block bg-transparent shadow-none">
            <div class="row mb-5 gy-3">
                <div class="col">
                    <textarea id="contentbox" x-model="enteredText" class="form-control" rows="4" x-init="$store.elements.textareaEL = $el"
                    @input="$store.canvas.updateObjectText(enteredText)"
                    @update-text-area.window="enteredText = $event.detail.text"></textarea>
                </div>
                <div class="col-12 col-sm-auto">
                    <button type="button" class="btn btn-lg btn-primary position-relative w-100" @click="addLabel(enteredText)"
                        :class="$store.canvas.isTextObjectSelected ? 'btn-warning text-white' : 'btn-primary'">
                        <span class="triangle right d-none d-sm-block"></span>
                        <span  x-show="!$store.canvas.isTextObjectSelected" x-text="getTranslatedHTML('updateButtonText')"></span>
                        <span x-show="$store.canvas.isTextObjectSelected" x-text="getTranslatedHTML('updatetext')"></span> </button>
                    </button>
                </div>
            </div>
        </div>
        <div class="block bg-transparent shadow-none">
            <div class="d-flex align-items-center mb-2">
                <h6 class="mb-0" x-text="getTranslatedHTML('fonts')"></h6>
                <span class="linedesign ms-3 me-0"></span>
            </div>
            
            <font-upload-modal datatemplateurl="./fontUploadModal.html" shadow="true" styles="global"></font-upload-modal>
            <div class="row g-2">
                <div class="col  mb-4">
                    <select class="form-select shadow-sm border-primary editor-interface__font__select" id="font-select" x-model="selectedFont"
                    :style="{fontFamily: selectedFont.substring(0, selectedFont.lastIndexOf('.')) || selectedFont}"
                        @change="setSelectedFont(selectedFont)">
                        <option value="" x-text="getTranslatedHTML('fontSelectLabel')" disabled></option>
                        <template x-for="(defaultFont,defaultFontIndex) in defaultFonts" :key="defaultFont.id">
                            <option x-text="defaultFont.name":style="{fontFamily: defaultFont.name}"
                                :value="defaultFont.name"></option>
                        </template>
                        <template x-for="(uploadedFont,uploadedFontIndex) in uploadedFonts" :key="uploadedFont.id">
                            <option x-text="uploadedFont.name.substring(0, uploadedFont.name.lastIndexOf('.')) || uploadedFont.name"
                                :style="{fontFamily: uploadedFont.name.substring(0, uploadedFont.name.lastIndexOf('.')) || uploadedFont.name}"
                                :value="uploadedFont.name"></option>
                        </template>
                    </select>
                </div>
                <div class="col-auto" x-show="$store.canvas.productId || $store.canvas.configuratorId">
                    <button type="button"  @click="$store.modal.openModal($store.elements.fontUploadModalEl)"
                    class="btn btn-lg btn-primary ">
                        <i class="fas fa-lg fa-upload"></i> <span x-text="getTranslatedHTML('uploadfont')"></span>
                    </button>
                </div>
                
            </div>
        </div>
    </form>
</div>