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

Combine multiple image into and create single combined image

<div x-data="layerThumbnail">
    <div class="canvas-inside-layers d-lg-block d-none editor-interface__scroll__inner" id="canvaslayer"  x-data="{
            layers: $store.canvas.layers
        }"
        x-init="initSortableThumbnail($el)"
        :class="layers.length ? 'border':'border-0'">
        <h6 class="mb-0 fs-sm px-2 pb-2 border-bottom" x-text="getTranslatedHTML('layerThumbnailBlockTitle')"></h6>
        <template data-layer-id="ignore" x-for="(layer,index) in layers" :key="layer.id">
            <div class="border p-2 rounded-5 layerblock position-relative" :class="[ 
                    $store.canvas.markedObject && $store.canvas.markedObject.id === layer.id ? 'mark-active' : '',
                    layer.color,
                    $store.canvas.activeObjectLayerId === layer.id ? 'active':''
                ]" 
                :data-layer-id="layer.id" @click="$store.canvas.setActiveObjectFromLayerId(layer.id)">
                <div :class="!layer.visible ? 'opacity-40':''">
                    <span class="layernum" x-text="layer.idNumeric + 1"></span>
                    <div class="mx-2 text-center lh-1">
                        <div class="img-avatar img-avatar40">
                            <div class="d-flex align-items-center justify-content-center  rounded-5 w-100 h-100">
                                <template x-if="layer.type === 'motive' || layer.type === 'symbol' || layer.type === 'mainPicture' || layer.type === 'subPicture'">
                                    <img class="img-contain" :src="layer.imageUrl" alt="" width="30" height="30" />
                                </template>
                                <template x-if="layer.type === 'label'">
                                    <span class="fa-xl fa-solid fa-font"></span>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="font-small text-center mt-1">
                        <span class="mb-0 h3 layertext" ><span x-text="getTranslatedHTML('layer')"></span> <span x-text="'#' + (layer.idNumeric + 1)"></span></span>
                        <span class="opacity-50 text-uppercase d-block" >
                            <template x-if="layer.type === 'motive' || layer.type === 'symbol' || layer.type === 'mainPicture' || layer.type === 'subPicture'">
                                <span x-text="layer.type" class="text-capitalize"></span>
                            </template>
                            <template x-if="layer.type === 'label'">
                                <span x-text="layer.text"></span>
                            </template>
                        </span>
                    </div>
                </div>
                <div class="position-absolute end-0 top-0 mt-2 me-2">
                    <delete-context-menu datatemplateurl="./deleteContextMenu.html" styles="global" shadow="true" x-data="deleteContextMenu">
                        <li ><a href="#" class="dropdown-item mb-0" @click="$store.modal.openModal($store.elements.deleteObjectModalEL)" x-text="getTranslatedHTML('deleteLayerText')"></a></li>
                        <li> <a href="#" class="dropdown-item mb-0" @click="$store.canvas.toggleObjectById(layer.id, $nextTick)"
                                x-text="getTranslatedHTML('toggleObjectOptionText', {visibility: layer.visible ? 'hideText':'unhideText'})"></a></li>
                    </delete-context-menu>
                </div>
            </div>
        </template>
        <template x-if="!layers.length">
            <p class="p-2 lh-sm fs-sm" x-text="getTranslatedHTML('noThubnailText')"></p>
        </template>
    </div>
</div>