aico-image-editor/src/components/canvasControls/gradientControl/gradientControl.js

Combine multiple image into and create single combined image

import i18next from "i18next";

//import Alpine from 'alpinejs';
import chroma from "chroma-js";
import { ColorUtils } from "../../colorPicker/color-utilities";

const loadGradientControlHTML = () => import(/* webpackMode: "eager" */'./gradientControl.html');

// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initHTML from "../../../initHTML";
initHTML('gradient-control',loadGradientControlHTML);



export default () => ({
    init() {

    },
    gradientAngle: 0,
    isGradientToCanvasBackground: false,
    gradientText: i18next.t('gradients', {lng: Alpine.store('canvas').currentLocale}),
    colorStops: [
        {
            id: 'colorStop0',
            posX: 0,
            posY: 100,
            color: '#000000',
        },
        {
            id: 'colorStop1',
            posX: 100,
            posY: 100,
            color: '#ffffff',
        },
    ],
    getBackgroundGradientStyles() {
        let colorStopsSortedByPos = this.colorStops.slice().sort(function(colorStop1, colorStop2) {
            return colorStop1.posX - colorStop2.posX;
        })

        let colorStopGradientStyleString = '';

        colorStopsSortedByPos.forEach(function(colorStop, colorStopIndex, arr) {
            colorStopGradientStyleString += `${colorStop.color} ${Math.floor(colorStop.posX)}% `;
            if(colorStopIndex <  arr.length - 1) {
                colorStopGradientStyleString += ','
            }
        });

        const angle = parseInt(this.gradientAngle) + 90;

        return {
            'background-image': `linear-gradient(${angle}deg, ${colorStopGradientStyleString})`
        }
    },
    gradientTrigger: {
        ['@color-stop-position-updated.window']($event) {
            const activeColorStop = this.colorStops.find(colorStop => colorStop.id === $event.detail.stopId);
            activeColorStop.posX = $event.detail.positionX;

            this.applyGradient()
        },
        ['@gradientcolor-updated-in-colorpicker.window'](event) {
            const activeColorStop = this.colorStops.find(colorStop => colorStop.id === this.activeColorStopId);
            if(activeColorStop) {
                activeColorStop.color = event.detail.colorObj.color;
                this.applyGradient()
            }
        }
    },
    colorStopClickHandler(activeColorStopId) {
        this.setActiveColorStop(activeColorStopId)
    },
    getActiveDotColor(color) {
        const colorLightness = ColorUtils.hexToHSL(color)[2]
        return {
            color: colorLightness < 50 ? '#ffffff' : '#000000'
        }
    },
    activeColorStopId: null,
    setActiveColorStop(activeColorStopId) {
        this.activeColorStopId = activeColorStopId;
    },
    applyGradient() {
        let colorStopsForCanvasGradient = this.colorStops.slice().sort(function(colorStop1, colorStop2) {
            return colorStop1.posX - colorStop2.posX;
        }).map(({ color, posX }) => ({
            color,
            offset: posX / 100,
        }));

        if(this.isGradientToCanvasBackground) {
            this.$store.canvas.setCanvasGradient(colorStopsForCanvasGradient, this.gradientAngle)
        } 
    },
    
   
})