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

Combine multiple image into and create single combined image

<div x-data="layeringTab" class="h-100">
    <div class="block block-transparent position-relative d-flex flex-column h-100">
        <div class="block-header pb-0 ">
            <h6 class="block-title" x-text="getTranslatedHTML('layersTabTitle')">Elemente</h6>
        </div>
        <div class="block-content block-content-full overflow-auto flex-grow-1">
            <div class="editor-interface__scroll__inner" 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-2 rounded-3 align-items-center position-relative mb-3 layerblock" :class="[
                            $store.canvas.markedObject && $store.canvas.markedObject.id === layer.id ? 'border-success': '',
                            layer.color,
                            $store.canvas.activeObjectLayerId === layer.id ? 'border-primary':''
                        ]" 
                        :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'">
                            
                            <div class="img-avatar img-avatar20 layerblockmove cursor-move">
                                <div class="d-flex align-items-center justify-content-center w-100 h-100">
                                    <i class="fa-md bugano-grip-dots-vertical"></i>
                                </div>
                            </div>
                            <div class="img-avatar img-avatar32 mx-2">
                                <div class="d-flex align-items-center justify-content-center w-100 h-100 border rounded-3">
                                    <template x-if="layer.type === 'motive' || layer.type === 'symbol' || layer.type === 'mainPicture' || layer.type === 'subPicture'">
                                        <img class="img-contain rounded-3" :src="layer.imageUrl" alt="" width="32" height="32" />
                                    </template>
                                    <template x-if="layer.type === 'label'">
                                        <span class="fa-md fa-solid fa-font"></span>
                                    </template>
                                </div>
                            </div>
                            <div class="flex-grow-1 d-flex align-items-center">
                                <span class="layertext text-nowrap fs-sm fw-medium">
                                    <span x-text="getTranslatedHTML('layer')"></span> <span x-text="layer.idNumeric + 1"></span>
                                </span>
                                <span class="mx-2 opacity-50" ><i class="fa-solid fa-circle-small fa-2xs"></i></span>
                                <span class="text-uppercase fs-xs">
                                    <template x-if="layer.type === 'motive' || layer.type === 'mainPicture' || layer.type === 'subPicture'">
                                        <span x-text="getTranslatedHTML('picture')" class="text-capitalize"></span>
                                    </template>
                                    <template x-if="layer.type === 'symbol'">
                                        <span x-text="layer.type" class="text-capitalize"></span>
                                    </template>
                                    <template x-if="layer.type === 'label'">
                                        <span class="text-truncate d-block" style="max-width: 10ch;" x-text="layer.text"></span>
                                    </template>
                                </span>
                            </div>
                        </div>
                        <div class="position-absolute end-0 top-0 mt-2 me-1">
                            <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>
</div>