gradient-generator-ui/lib/Classes/Generator.js

Library to create a gradient generator in vanilla-js with interactive user interface in html

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GradientGenerator = void 0;
const ColorUtils_1 = require("../ColorUtils");
const GradientUI_1 = require("./GradientUI");
const Manager_1 = require("./Manager");
const initialGradientColors = [
    { colorHex: '#ff0000', position: 10 },
    { colorHex: '#ffff00', position: 40 },
    { colorHex: '#00ff77', position: 70 },
];
class GradientGenerator {
    constructor({ mainElement, initialColors = initialGradientColors, }) {
        this.UI = null;
        this.mainElement = null;
        if (mainElement) {
            this.mainElement = mainElement;
            this.UI = new GradientUI_1.GradientUI(mainElement, initialColors);
            this.UI.onUpdateControls((controls) => {
                this.colors = controls.map(ctrl => ({
                    colorHex: ctrl.ColorHex,
                    position: ctrl.Position,
                }));
            });
        }
        this.colors = initialColors;
    }
    /**
     * Get the HTML Main Element
     */
    getMainElement() {
        if (!this.mainElement) {
            throw new Error('There is no main element in the generator');
        }
        return this.mainElement;
    }
    /**
     * Get the list of colors with their respective proportional position
     */
    getGradientColors() {
        return [...this.colors];
    }
    /**
     * Update the current list of colors
     * @param colors List of colors with their respective proportional position
     */
    setGradientColors(colors) {
        this.colors = [...colors];
        if (this.UI)
            this.UI.init(colors);
    }
    /**
     * Add a new color to the current list of colors and create a new color control in the UI
     * @param color A single colors with their respective proportional position
     * @param indx Optional position to append in the GradientGenerator
     */
    addColors(...newColors) {
        newColors.forEach(newColor => {
            const indx = this.colors.findIndex(gc => gc.position > newColor.position);
            if (indx > -1) {
                this.colors.splice(indx, 0, newColor);
            }
            else {
                this.colors.push(newColor);
            }
            if (this.UI)
                this.UI.addElement(newColor);
        });
    }
    /**
     * Generates an array of colors in hexadecimal with the current colors and the number of expected colors
     * @param size Expected number of colors generated
     */
    generateColors(size = 100) {
        const colors = [
            {
                colorHex: '#000000',
                position: 0,
            },
            ...this.colors,
            {
                colorHex: '#ffffff',
                position: 100,
            },
        ];
        return ColorUtils_1.createGradient(colors, size);
    }
    /**
     * Generate a manager with the current GradientGenerator
     * @param options Manager options
     */
    createUIManager(options) {
        return new Manager_1.GeneratorManager({
            ...options,
            generator: this,
        });
    }
}
exports.GradientGenerator = GradientGenerator;
//# sourceMappingURL=Generator.js.map