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

Combine multiple image into and create single combined image

<div x-data="configurator2d">
    <div class="position-relative">   
        
        <control-bar datatemplateurl="./controlBar.html" styles="global" shadow="true"></control-bar>
        

        <div class="my-2 my-lg-0">
            <div class="product-canvas-wrapper">
                <div class="card">
                    <div class="card-body">
                        
                        <div class="row gy-2 mb-3 gx-1">
                            <div class="col-3">
                                <label class="form-label" for="canvas-box-width" x-text="getTranslatedHTML('frameWidth')"></label>
                                <input id="canvas-box-width" type="number" min="1" :max="$store.canvas.maxCanvasWidth"  class="form-control form-control-sm border-primary border-2" 
                                    x-model="$store.canvas.canvasWidth"  @change="updateCanvasAspectRatio()"/>
                            </div>
                            <div class="col-3">
                                <label class="form-label" for="canvas-box-height" x-text="getTranslatedHTML('frameHeight')"></label>
                                <input id="canvas-box-height" type="number"  min="1" :max="$store.canvas.maxCanvasHeight" class="form-control form-control-sm border-primary border-2" 
                                    x-model="$store.canvas.canvasHeight" @change="updateCanvasAspectRatio()"  />
                            </div>
                            <div class="col">
                                <label class="form-label"  x-text="getTranslatedHTML('sizeTemplateSaveLabel')"></label>
                                <div class="input-group input-group-sm mb-2">
                                    <input class="form-control form-control-sm border-primary border-2" type="text" id="current-size-preset-label" x-model="currentSizePresetLabel"  
                                        :placeholder="getTranslatedHTML('templateName')" autocomplete="off"/>
                                    <button type="button" class="btn btn-sm btn-primary" x-text="getTranslatedHTML('addTitle')" @click="addSizeToTemplate()"></button>
                                </div>
                            </div>
                               
                        </div>
                        <div class="row gy-2 mb-3 gx-1">
                            <div class="col-auto">
                                <div class="form-check form-switch form-check-inline">
                                    <input class="form-check-input" type="checkbox" value="" id="workspace-template" name="workspace-template" x-model="isWorkspaceTemplate" />
                                    <label class="form-check-label" for="workspace-template" x-text="getTranslatedHTML('globalTemplate')"></label>
                                </div>
                            </div>
                            <div class="col" x-show="$store.canvas.sizeTemplates.length || $store.canvas.sizeTemplatesForWorkspace.length">
                                <label class="form-label" x-text="getTranslatedHTML('templateSelectionDropdownLabel')"></label>
                                <select class="form-select form-select-sm border" id="image-size-presets" x-model="presetCanvasDim"
                                    @canvas-reset.window="clearSizeTemplates()" @change="updateCanvasDim()"
                                    @canvas-data-restored.window="() => {
                                        populateSizeTemplates($event.detail.sizeTemplates)
                                    }" @canvas-is-ready.window.once="getSizeTemplateForWorkspace()">
                                    <template x-if="$store.canvas.sizeTemplates.length">
                                        <option value="" disabled x-text="getTranslatedHTML('savedPresets')"></option>
                                    </template>
                                    <template x-for="sizeTemplate in $store.canvas.sizeTemplates">
                                        <option :value="`${sizeTemplate.width}x${sizeTemplate.height}`"
                                            x-text="`${sizeTemplate.label} - ${sizeTemplate.width} x ${sizeTemplate.height} px`"></option>
                                    </template>
                                    <template x-if="$store.canvas.sizeTemplatesForWorkspace.length">
                                        <option value="" disabled x-text="getTranslatedHTML('globalPresets')"></option>
                                    </template>
                                    <template x-for="sizeTemplateForWorkspace in $store.canvas.sizeTemplatesForWorkspace">
                                        <option :value="`${sizeTemplateForWorkspace.width}x${sizeTemplateForWorkspace.height}`"
                                            x-text="`${sizeTemplateForWorkspace.label} - ${sizeTemplateForWorkspace.width} x ${sizeTemplateForWorkspace.height} px`"></option>
                                    </template>
                                </select>
                            </div> 
                        </div>
                        
                    </div>
                </div>
                <fabric-canvas datatemplateurl="./fabricCanvas.html" styles="global" shadow="true"></fabric-canvas>
            </div>
           
        </div>

        <div class="server-loader position-absolute w-100 h-100 start-0 top-0 pe-none bg-white-75 justify-content-center align-items-center" :class="$store.canvas.isServerLoaderCanvasVisible ? 'd-flex':'d-none'">
            <i class="fas fa-spinner fa-pulse" aria-hidden="true"></i>
        </div>
    </div>
</div>