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

Combine multiple image into and create single combined image

<div x-data="colorPicker">
    <div class="block block-rounded mb-4 block-transparent" >
        <div x-bind="colordatawrapper">
            <div class="colorpickerwrapper">
                <div class="colorpickerwrapper__left">
                    <div  x-bind="getWrapperConfig()" class="canvas-holder" x-ref="canvasholder">
                        <canvas class="colorpicker" x-ref="colorpicker"></canvas>
                        <div  class="colorpicker-circle" x-ref="colorpickercircle"></div>
                    </div>
                </div>
                <div class="colorpickerwrapper__right ">
                    <div class="colorpickerwrapper__right__inner">
                        <div class="d-none align-items-center mb-2">
                            <div class="me-2">
                                <a class="btn editor-interface__square" :style="{backgroundColor: selectedColor,
                                    border: (lightness > 90 ? '1px solid': 'none')}"></a>
                            </div>
                            <div class="d-flex align-items-center position-relative">
                                <input type="range" id="hue" min="0" max="360" class="hue-range-slider" x-model="hue" 
                                    @input="updateRGBFromHue()" x-init="updateRGBFromHue()"
                                    @change.debounce.100ms="$dispatch('color-updated',{h:hue,s:saturation,l:lightness, componentKey})" />
                                <output class="hue-range-output" for="hue" :value="hue + '°'"></output>
                            </div>
                        </div>
                        <div class="d-flex colorpicker-input-section">
                            <div class="col-4">
                                <div class="form-group">
                                    <input type="number" class="form-control text-center" x-model="red" min="0" max="255"
                                        maxlength="3" step="1" id="red" @input="updateColorsInOtherModes('rgb')"
                                        @change.debounce.100ms="$dispatch('color-updated',{h: hue,s:saturation,l:lightness, componentKey})" />
                                    <div class="text-center fw-bold mt-1"><label class="text-primary" for="red">R</label></div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <input type="number" class="form-control text-center" x-model="green" min="0" max="255"
                                        maxlength="3" step="1"  id="green" @input="updateColorsInOtherModes('rgb')" 
                                        @change.debounce.100ms="$dispatch('color-updated',{h: hue,s:saturation,l:lightness, componentKey})" />
                                    <div class="text-center fw-bold mt-1"><label class="text-primary" for="green">G</label></div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <input type="number" class="form-control text-center" x-model="blue" min="0" max="255"
                                        maxlength="3" step="1"  id="blue" @input="updateColorsInOtherModes('rgb')" 
                                        @change.debounce.100ms="$dispatch('color-updated',{h: hue,s:saturation,l:lightness, componentKey})" />
                                    <div class="text-center fw-bold mt-1"><label class="text-primary" for="blue">B</label></div>
                                </div>
                            </div>
                        </div>
                        <div class="colorpicker-radius-section">
                            <div class="colorpicker-radius-section__inner"></div>
                        </div>
                        <div class="d-flex  colorpicker-input-section">
                            <div class="col">
                                <div class="form-group">
                                    <input type="number" class="form-control text-center" x-model="cyan" id="cyan" 
                                        @input="updateColorsInOtherModes('cmyk')"
                                        @change.debounce.100ms="$dispatch('color-updated',{h: hue,s:saturation,l:lightness, componentKey})"
                                        min="0" max="100"  />
                                    <div class="text-center fw-bold mt-1"><label class="text-primary" for="cyan">C</label></div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <input type="number" class="form-control text-center" x-model="magenta" id="magenta"
                                        @input="updateColorsInOtherModes('cmyk')"
                                        @change.debounce.100ms="$dispatch('color-updated',{h: hue,s:saturation,l:lightness, componentKey})"
                                        min="0" max="100"  />
                                    <div class="text-center fw-bold mt-1"><label class="text-primary" for="magenta">M</label></div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="form-group">
                                    <input type="number" class="form-control text-center" x-model="yellow" id="yellow"
                                        @input="updateColorsInOtherModes('cmyk')"
                                        @change.debounce.100ms="$dispatch('color-updated',{h: hue,s:saturation,l:lightness, componentKey})"
                                        min="0" max="100"  />
                                    <div class="text-center fw-bold mt-1"><label class="text-primary" for="yellow">Y</label></div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <input type="number" class="form-control text-center" x-model="key" id="key"
                                        @input="updateColorsInOtherModes('cmyk')"
                                        @change.debounce.100ms="$dispatch('color-updated',{h: hue,s:saturation,l:lightness, componentKey})"
                                        min="0" max="100"  />
                                    <div class="text-center fw-bold mt-1"><label class="text-primary" for="key">K</label></div>
                                </div>
                            </div>
                        </div>
                        <div class="colorpicker-radius-section">
                            <div class="colorpicker-radius-section__inner"></div>
                        </div>
                        <div class="d-flex colorpicker-input-section">
                            <div class="form-group w-100">
                                <input type="text" class="form-control text-center" x-model="hex" id="hex"
                                placeholder="#HEX"
                                @input="updateColorsInOtherModes('hex')"
                                @change.debounce.100ms="() => {
                                    hexCheck();
                                    $dispatch('color-updated',{h: hue,s:saturation,l:lightness, componentKey})
                                }" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>