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

Combine multiple image into and create single combined image

<div class="editor-interface__options" x-data="canvasControls">
    <div class="block block-rounded mb-0 p-3 position-relative" x-data="dragdrop">
        <ul class="nav nav-tabs nav-tabs-alt" role="tablist">
            <li class="nav-item flex-fill">
                <button type="button" class="nav-link text-primary w-100 border-end" id="common-controls-tab" data-bs-toggle="tab" data-bs-target="#common-controls" role="tab" aria-controls="common-controls" aria-selected="true" @click="activeSubTab = 'common-controls'" :class="activeSubTab === 'common-controls' ? 'active' : ''">
                    <span class="" x-text="getTranslatedHTML('commonSubTabTitle')"></span>
                </button>
            </li>
            <li class="nav-item flex-fill">
                <button type="button" class="nav-link text-primary w-100 border-end" id="filter-controls-tab" data-bs-toggle="tab" data-bs-target="#filter-controls" role="tab" aria-controls="filter-controls" aria-selected="true" @click="activeSubTab = 'filter-controls'" :class="activeSubTab === 'filter-controls' ? 'active' : ''">
                    <span class="" x-text="getTranslatedHTML('canvasFilterSubTabTitle')"></span>
                </button>
            </li>
            <li class="nav-item flex-fill">
                <button type="button" class="nav-link text-primary w-100" id="colors-controls-tab" data-bs-toggle="tab" data-bs-target="#colors-controls" role="tab" aria-controls="colors-controls" aria-selected="true" @click="activeSubTab = 'colors-controls'" :class="activeSubTab === 'colors-controls' ? 'active' : ''">
                    <span class="" x-text="getTranslatedHTML('colors')"></span>
                </button>
            </li>
        </ul>
        <div class="block-content block-content-full tab-content px-0">
            <div class="tab-pane" role="tabpanel" id="common-controls" aria-labelledby="common-controls-tab" :class="activeSubTab === 'common-controls' ? 'active' : ''">
                <div class="row justify-content-between gx-4 gy-4">
                    <div class="col-12 col-sm-8" :class="$store.canvas.isObjectDeselected ? 'inactiveblock': ''">
                        <div class="d-flex align-items-center mb-2">
                            <h6 class="mb-0" x-text="getTranslatedHTML('geometry')"></h6>
                            <span class="linedesign ms-3 me-0"></span>
                        </div>
                        <div class="row flex-nowrap gx-2">
                            <div class="col-auto">
                                <button type="button" class="btn editor-interface__square border bg-gray-lighter" @click="$store.canvas.setVerticalCenter()"
                                    data-bs-toggle="tooltip" :title="getTranslatedHTML('centerVerticalButtonTitle')" x-data="tooltip">
                                    <span class="bugano-vertical-align-icon fw-bold fs-4"></span>
                                </button>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn editor-interface__square border bg-gray-lighter" @click="$store.canvas.setHorizontalCenter()"
                                    data-bs-toggle="tooltip" :title="getTranslatedHTML('centerHorizontalButtonTitle')" x-data="tooltip">
                                    <span class="bugano-horizontal-align-icon fw-bold fs-4"></span>
                                </button>
                            </div>
                            <div class="col-auto">
                                <span class="btn editor-interface__square text-primary" >
                                    <span class="bugano-angle-icon fw-bold fs-4"></span>
                                </span>
                            </div>
                            <div class="col-auto" data-bs-toggle="tooltip" :title="getTranslatedHTML('rotateInputTitle')" x-data="tooltip">
                                <input type="number" min="0" max="360"  class="form-control border bg-gray-lighter" @change="$store.canvas.setAngle($el.value)" />
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-4" :class="$store.canvas.isObjectDeselected ? 'inactiveblock': ''">
                        <div class="d-flex align-items-center mb-2">
                            <h6 class="mb-0 text-uppercase" x-text="getTranslatedHTML('size')"></h6>
                            <span class="linedesign ms-3 me-0"></span>
                        </div>
                        <div class="row gx-2 flex-nowrap">
                            <div class="col-auto">
                                <button type="button" class="btn border editor-interface__square bg-gray-lighter fw-bold" @click="$store.canvas.increaseObjectSize()"
                                    x-data="tooltip" data-bs-toggle="tooltip" :title="getTranslatedHTML('sizeIncreaseButtonTitle')">
                                    <span><i class="fa-regular fa-plus"></i></span>
                                </button>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn border editor-interface__square bg-gray-lighter fw-bold" @click="$store.canvas.decreaseObjectSize()"
                                    x-data="tooltip" data-bs-toggle="tooltip" :title="getTranslatedHTML('sizeDecreaseButtonTitle')">
                                    <span><i class="fa-solid fa-minus"></i></span>
                                </button>
                            </div>
                        </div>
                    </div> 
                </div>
                <div class="row mt-0 justify-content-between gx-4 gy-4">
                    <div class="col" :class="$store.canvas.isCurveBlockDisabled ? 'inactiveblock':''">
                        <div class="d-flex align-items-center mb-2">
                            <h6 class="mb-0 text-uppercase" x-text="getTranslatedHTML('curvedText')"></h6>
                            <span class="linedesign ms-3 me-0"></span>
                        </div>     
                        <div class="row gx-2 flex-nowrap">
                            <div class="col-auto">
                                <button type="button" class="btn border editor-interface__square bg-gray-lighter fw-bold me-1" @click="() => {
                                            $store.canvas.curveDirection = 'upcurve';
                                            $store.canvas.applyCurvature();
                                        }" :disabled="$store.canvas.curveDirection === 'upcurve'"
                                        data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('curveDownTitle')"
                                    >
                                    <span>◡</span>
                                </button>
                                <button type="button" class="btn border editor-interface__square bg-gray-lighter fw-bold" @click="() => {
                                            $store.canvas.curveDirection = 'downcurve';
                                            $store.canvas.applyCurvature();
                                        }" :disabled="$store.canvas.curveDirection === 'downcurve'"
                                        data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('curveUpTitle')">
                                    <span>⌒</span>
                                </button>
                            </div>
                            <div class="col-auto" data-bs-toggle="tooltip" :title="getTranslatedHTML('angleAdjustTitle')" x-data="tooltip">
                                <input type="number" class="form-control border bg-gray-lighter" :disabled="$store.canvas.curveDirection === null"  
                                    x-model="$store.canvas.curvatureValue"
                                    @input.debounce.500ms="$store.canvas.applyCurvature()"
                                    id="heightcu" min="0" max="500" step="1" />
                            </div>
                        </div>
                    </div>
                    <div class="col-auto" :class="$store.canvas.isObjectDeselected ? 'inactiveblock': ''">
                        <div class="d-flex align-items-center mb-2">
                            <h6 class="mb-0 text-uppercase" x-text="getTranslatedHTML('shadowText')"></h6>
                            <span class="linedesign ms-3 me-0"></span>
                        </div>   
                        <div class="row gx-2 flex-nowrap">
                            <div class="col-auto">
                                <button type="button" class="btn border editor-interface__square bg-gray-lighter fw-bold me-1" @click="() => {
                                        $store.canvas.shadowEffect('apply');
                                    }" data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('addTitle')">
                                    <i class="far fa-clone fa-lg"></i>
                                </button>
                                <button type="button" class="btn border editor-interface__square bg-gray-lighter fw-bold me-1" @click="() => {
                                        $store.canvas.shadowEffect('remove');
                                    }" data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('removeTitle')">
                                    <i class="far fa-square fa-lg"></i>
                                </button>
                            </div>
                            <div class="col-auto" data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('distanceAdjustTitle')"
                                style="width: 72px;">
                                <input type="number" class="form-control border bg-gray-lighter px-2 text-center" 
                                    id="shadowEffectValue" x-model="$store.canvas.shadowDistance"  min="0" max="100"
                                    @input.debounce.500ms="$store.canvas.shadowEffect('apply')" />
                            </div>
                            <div class="col-auto" data-bs-toggle="tooltip" x-data="tooltip" :title="getTranslatedHTML('blurAdjustTitle')"
                                style="width: 72px;">
                                <input type="number" class="form-control border bg-gray-lighter px-2 text-center" 
                                    id="blurEffectValue" x-model="$store.canvas.blurDistance"  min="0" max="20"
                                    @input.debounce.500ms="$store.canvas.shadowEffect('apply')" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="server-loader position-absolute w-100 h-100 start-0 top-0 pe-none bg-white-75 d-flex justify-content-center align-items-center" :class="$store.canvas.isColorBlockLoaderVisible ? 'd-flex':'d-none'">
                    <i class="fas fa-spinner fa-pulse" aria-hidden="true"></i>
                </div>
            </div>
            <div class="tab-pane" role="tabpanel" id="filter-controls" aria-labelledby="filter-controls-tab"  :class="activeSubTab === 'filter-controls' ? 'active' : ''">
                <div class="col-xl-12">
                    <canvas-filter datatemplateurl="./canvasFilter.html" styles="global" shadow="true"></canvas-filter>
                </div>
            </div>
            <div class="tab-pane" role="tabpanel" id="colors-controls" aria-labelledby="colors-controls-tab"  :class="activeSubTab === 'colors-controls' ? 'active' : ''">
                <div class="col-12">
                    
                </div>
            </div>
        </div> 
    </div>
</div>