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

Combine multiple image into and create single combined image

<div class="card" x-data="controlBar">
    <div class="card-body space-x-4 position-relative d-flex align-items-center">
        <div>
            <button type="button" class="btn p-0" @click="() => {
                    activeBlock = activeBlock !== 'backgroundremove' ? 'backgroundremove' : null
                }" >
                <span x-text="getTranslatedHTML('backgroundRemoval')"></span>
            </button>
            <div class="position-absolute start-0 top-100 w-100 z-index-3 mt-1 overflow-auto" x-show="activeBlock === 'backgroundremove'" style="max-height: 70vh;">
                <background-removal datatemplateurl="./backgroundRemoval.html" styles="global" shadow="true"></background-removal>
            </div>
        </div>
        <div>
            <button type="button" class="btn p-0" @click="() => {
                    activeBlock = activeBlock !== 'colorpicker' ? 'colorpicker' : null
                }">
                <i class="fas fa-circle fa-lg" @textcolor-updated-in-colorpicker.window="() => {
                    $el.style.color = $event.detail.colorObj.color
                }"></i>
            </button>
            <div class="position-absolute start-0 top-100 w-100 z-index-3 mt-1" x-show="activeBlock === 'colorpicker'">
                <color-tab datatemplateurl="./colorTab.html" styles="global" shadow="true"></color-tab>
            </div>
        </div>
        <div>
            <button class="btn p-0" data-bs-toggle="tooltip" x-data="tooltip"
                :title="getTranslatedHTML('crop')"
                :disabled="$store.canvas.isObjectDeselected || $store.canvas.isObjectFilterControlsDisabled"
                @click="$store.canvas.crop($store)">
                <i class="fa-solid fa-crop"></i>
            </button>
            <div  class="position-absolute w-100 start-0 top-100 z-index-3" style="min-width: 800px;">

                <cropper-block datatemplateurl="./cropperBlock.html" styles="global" shadow="true"></cropper-block>
            </div>             
        </div>
        <div x-data="{activeTab: null}">
            <button type="button" class="btn p-0" @click="() => {
                $dispatch('get-active-tab')
                
                $dispatch('go-to-tab', {tab: activeTab !== 'layer' ? 'layer': null})
            }" @emit-active-tab.window="activeTab = $event.detail.activeTab">
                <i class="bugano-layers fa-lg"></i>
            </button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn p-0" @click="() => {
                    activeBlock = activeBlock !== 'rearrange' ? 'rearrange' : null
                }">
                <i class="fas fa-clone fa-lg"></i>
            </button>
            <div class="position-absolute start-0 top-100 w-auto z-index-3 mt-1 translate-middle-x" x-show="activeBlock === 'rearrange'"
                @keydown.window="keydownHandler($event)">
                <div class="block block-rounded p-2 mb-0">
                    <ul class="list-unstyled">
                        <li>
                            <button id="bring-forward" class="btn dropdown-item d-flex align-items-center" @click="arrangeObjects('bringForward')">
                                <span class="bugano-moveforward fa-lg me-2"></span>
                                <span class="me-3" x-text="getTranslatedHTML('1forward')"></span>
                                <span class="ms-auto">Ctrl + ]</span>
                            </button>
                        </li>
                        <li>
                            <button id="bring-to-front" class="btn dropdown-item d-flex align-items-center" @click="arrangeObjects('bringToFront')">
                                <span class="bugano-movetofront fa-lg me-2"></span>
                                <span class="me-3" x-text="getTranslatedHTML('moveToFront')"></span>
                                <span class="ms-auto">Ctrl + Alt + ]</span>
                            </button>
                        </li>
                        <li>
                            <button id="send-backwards" class="btn dropdown-item d-flex align-items-center" @click="arrangeObjects('sendBackwards')">
                                <span class="bugano-movebackward fa-lg me-2"></span>
                                <span class="me-3" x-text="getTranslatedHTML('1backwards')"></span>
                                <span class="ms-auto">Ctrl + [</span>
                            </button>
                        </li>
                        <li>
                            <button id="send-to-back" class="btn dropdown-item d-flex align-items-center" @click="arrangeObjects('sendToBack')">
                                <span class="bugano-movetoback fa-lg me-2"></span>
                                <span class="me-3" x-text="getTranslatedHTML('moveToBack')"></span>
                                <span class="ms-auto">Ctrl + Alt + [</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
    </div>
</div>