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

Combine multiple image into and create single combined image

<div x-data="labellingTab" class="h-100">
    <form x-data="dragdrop" enctype="multipart/form-data" class="h-100">
        <div class="block block-transparent h-100 d-flex flex-column">
            <div class="block-header pb-0 ">
                <h6 class="block-title" x-text="getTranslatedHTML('textTabTitle')">Elemente</h6>
            </div>
            <div class="block-content block-content-full d-flex flex-column flex-grow-1 overflow-auto">
                <div class="row gy-2 mb-3">
                    <div class="col-12">
                        <strong class="fs-md" x-text="getTranslatedHTML('fonts')"></strong>
                    </div>
                    <div class="col-12">
                        <select class="form-select shadow-sm" 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-12">
                        <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">
                        <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  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 class="col-12" x-show="$store.canvas.productId || $store.canvas.configuratorId">
                        <button type="button"  @click="$store.modal.openModal($store.elements.fontUploadModalEl)"
                            class="btn btn-lg btn-outline-primary w-100">
                            <span x-text="getTranslatedHTML('uploadfont')"></span>
                        </button>
                    </div>
                </div>
                <div class="row gy-2">
                    <div class="col-12">
                        <strong class="fs-md" x-text="getTranslatedHTML('formatTemplates')"></strong>
                    </div>
                    <template x-for="template in templates">
                            <div class="col-12">
                                <div class="card cursor-pointer" @click="addTemplate(template)">
                                    <div class="card-body">
                                        <span x-text="template.text" :style="{
                                            fontFamily: template.fontFamily,
                                            fontSize: template.fontSize + 'px',
                                            fontWeight: template.fontWeight
                                        }"></span>
                                    </div>
                                </div>
                            </div>
                    </template>
                </div>
                <font-upload-modal datatemplateurl="./fontUploadModal.html" shadow="true" styles="global"></font-upload-modal>
            </div>
        </div>
        
    </form>
</div>