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

Combine multiple image into and create single combined image

<div x-data="layeringTab">
    <div class="block block-transparent position-relative mb-0">
        <div class="row">
            <div class="col-12 text-primary">
                <p x-text="getTranslatedHTML('layersTabInstruction')"></p>
            </div>
        </div>
    </div>
    <div class="block block-transparent position-relative">
        <div class="editor-interface__scroll__inner ps-3" id="layers" x-data="{
            layers: $store.canvas.layers
        }" x-init="initMainSortable($el)" @sort-objects-from-layer.window="$store.canvas.sortFromLayers($event.detail.layersSortingEndArray)"
            @object-restored-via-undo-redo.window="$store.canvas.syncLayerToObject($event.detail.object)">
            <template data-layer-id="ignore" x-for="(layer,index) in layers" :key="layer.id">
                <div  class="d-flex border p-3 rounded-5 align-items-center layerblock position-relative mb-3" :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="d-flex align-items-center flex-grow-1" :class="!!layer.visible ? '':'opacity-40'">
                        <span class="layernum" x-text="layer.idNumeric + 1"></span>
                        <div class="me-4 ms-3">
                            <div class="img-avatar img-avatar64">
                                <div class="d-flex align-items-center justify-content-center border border-2 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="40" height="40" />
                                    </template>
                                    <template x-if="layer.type === 'label'">
                                        <span class="fa-xl fa-solid fa-font"></span>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 d-flex align-items-center">
                            <span class="mb-0 h3 layertext" ><span x-text="getTranslatedHTML('layer')"></span> <span x-text="'#' + (layer.idNumeric + 1)"></span></span>
                            <span class="mx-3 opacity-50" ><i class="fa-solid fa-circle-small fa-2xs"></i></span>
                            <span class="opacity-50 text-uppercase" >
                                <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>
        </div>
    </div>
</div>