tsparticles 1.42.3 → 1.43.1

package/cjs/Plugins/PolygonMask/Utils.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentBounce = exports.calcClosestPtOnSegment = exports.parsePaths = exports.drawPolygonMaskPath = exports.drawPolygonMask = void 0;
+const ColorUtils_1 = require("../../Utils/ColorUtils");
+const Vector_1 = require("../../Core/Utils/Vector");
+const NumberUtils_1 = require("../../Utils/NumberUtils");
+function drawPolygonMask(context, rawData, stroke) {
+    const color = (0, ColorUtils_1.colorToRgb)(stroke.color);
+    if (!color) {
+        return;
+    }
+    context.beginPath();
+    context.moveTo(rawData[0].x, rawData[0].y);
+    for (const item of rawData) {
+        context.lineTo(item.x, item.y);
+    }
+    context.closePath();
+    context.strokeStyle = (0, ColorUtils_1.getStyleFromRgb)(color);
+    context.lineWidth = stroke.width;
+    context.stroke();
+}
+exports.drawPolygonMask = drawPolygonMask;
+function drawPolygonMaskPath(context, path, stroke, position) {
+    context.translate(position.x, position.y);
+    const color = (0, ColorUtils_1.colorToRgb)(stroke.color);
+    if (!color) {
+        return;
+    }
+    context.strokeStyle = (0, ColorUtils_1.getStyleFromRgb)(color, stroke.opacity);
+    context.lineWidth = stroke.width;
+    context.stroke(path);
+}
+exports.drawPolygonMaskPath = drawPolygonMaskPath;
+function parsePaths(paths, scale, offset) {
+    var _a;
+    const res = [];
+    for (const path of paths) {
+        const segments = path.element.pathSegList, len = (_a = segments === null || segments === void 0 ? void 0 : segments.numberOfItems) !== null && _a !== void 0 ? _a : 0, p = {
+            x: 0,
+            y: 0,
+        };
+        for (let i = 0; i < len; i++) {
+            const segment = segments === null || segments === void 0 ? void 0 : segments.getItem(i);
+            const svgPathSeg = window.SVGPathSeg;
+            switch (segment === null || segment === void 0 ? void 0 : segment.pathSegType) {
+                case svgPathSeg.PATHSEG_MOVETO_ABS:
+                case svgPathSeg.PATHSEG_LINETO_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
+                case svgPathSeg.PATHSEG_ARC_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS: {
+                    const absSeg = segment;
+                    p.x = absSeg.x;
+                    p.y = absSeg.y;
+                    break;
+                }
+                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:
+                    p.x = segment.x;
+                    break;
+                case svgPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
+                    p.y = segment.y;
+                    break;
+                case svgPathSeg.PATHSEG_LINETO_REL:
+                case svgPathSeg.PATHSEG_MOVETO_REL:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_REL:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
+                case svgPathSeg.PATHSEG_ARC_REL:
+                case svgPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
+                case svgPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL: {
+                    const relSeg = segment;
+                    p.x += relSeg.x;
+                    p.y += relSeg.y;
+                    break;
+                }
+                case svgPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:
+                    p.x += segment.x;
+                    break;
+                case svgPathSeg.PATHSEG_LINETO_VERTICAL_REL:
+                    p.y += segment.y;
+                    break;
+                case svgPathSeg.PATHSEG_UNKNOWN:
+                case svgPathSeg.PATHSEG_CLOSEPATH:
+                    continue;
+            }
+            res.push({
+                x: p.x * scale + offset.x,
+                y: p.y * scale + offset.y,
+            });
+        }
+    }
+    return res;
+}
+exports.parsePaths = parsePaths;
+function calcClosestPtOnSegment(s1, s2, pos) {
+    const { dx, dy } = (0, NumberUtils_1.getDistances)(pos, s1), { dx: dxx, dy: dyy } = (0, NumberUtils_1.getDistances)(s2, s1), t = (dx * dxx + dy * dyy) / (dxx ** 2 + dyy ** 2), res = {
+        x: s1.x + dxx * t,
+        y: s1.x + dyy * t,
+        isOnSegment: t >= 0 && t <= 1,
+    };
+    if (t < 0) {
+        res.x = s1.x;
+        res.y = s1.y;
+    }
+    else if (t > 1) {
+        res.x = s2.x;
+        res.y = s2.y;
+    }
+    return res;
+}
+exports.calcClosestPtOnSegment = calcClosestPtOnSegment;
+function segmentBounce(start, stop, velocity) {
+    const { dx, dy } = (0, NumberUtils_1.getDistances)(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector_1.Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = 2 * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
+    wallNormal.multTo(d);
+    velocity.subFrom(wallNormal);
+}
+exports.segmentBounce = segmentBounce;

package/cjs/Plugins/PolygonMask/index.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadPolygonMaskPlugin = void 0;
+const PolygonMask_1 = require("./Options/Classes/PolygonMask");
+const PolygonMaskInstance_1 = require("./PolygonMaskInstance");
+const Utils_1 = require("../../Utils/Utils");
+class PolygonMaskPlugin {
+    constructor() {
+        this.id = "polygonMask";
+    }
+    getPlugin(container) {
+        return new PolygonMaskInstance_1.PolygonMaskInstance(container);
+    }
+    needsPlugin(options) {
+        var _a, _b, _c;
+        return ((_b = (_a = options === null || options === void 0 ? void 0 : options.polygon) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : (((_c = options === null || options === void 0 ? void 0 : options.polygon) === null || _c === void 0 ? void 0 : _c.type) !== undefined && options.polygon.type !== "none"));
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(source)) {
+            return;
+        }
+        const optionsCast = options;
+        let polygonOptions = optionsCast.polygon;
+        if ((polygonOptions === null || polygonOptions === void 0 ? void 0 : polygonOptions.load) === undefined) {
+            optionsCast.polygon = polygonOptions = new PolygonMask_1.PolygonMask();
+        }
+        polygonOptions.load(source === null || source === void 0 ? void 0 : source.polygon);
+    }
+}
+async function loadPolygonMaskPlugin(engine) {
+    if (!(0, Utils_1.isSsr)() && !("SVGPathSeg" in window)) {
+        await Promise.resolve().then(() => __importStar(require("./pathseg.js")));
+    }
+    const plugin = new PolygonMaskPlugin();
+    await engine.addPlugin(plugin);
+}
+exports.loadPolygonMaskPlugin = loadPolygonMaskPlugin;
+__exportStar(require("./Enums/PolygonMaskInlineArrangement"), exports);
+__exportStar(require("./Enums/PolygonMaskMoveType"), exports);
+__exportStar(require("./Enums/PolygonMaskType"), exports);
+__exportStar(require("./Options/Interfaces/IPolygonMaskOptions"), exports);

package/cjs/Shapes/Image/ImageDrawer.js

@@ -0,0 +1,132 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ImageDrawer_images;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageDrawer = void 0;
+const Utils_1 = require("./Utils");
+class ImageDrawer {
+    constructor() {
+        _ImageDrawer_images.set(this, void 0);
+        __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
+    }
+    getSidesCount() {
+        return 12;
+    }
+    getImages(container) {
+        const containerImages = __classPrivateFieldGet(this, _ImageDrawer_images, "f").find((t) => t.id === container.id);
+        if (!containerImages) {
+            __classPrivateFieldGet(this, _ImageDrawer_images, "f").push({
+                id: container.id,
+                images: [],
+            });
+            return this.getImages(container);
+        }
+        else {
+            return containerImages;
+        }
+    }
+    addImage(container, image) {
+        const containerImages = this.getImages(container);
+        containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
+    }
+    destroy() {
+        __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
+    }
+    draw(context, particle, radius, opacity) {
+        var _a, _b;
+        const image = particle.image;
+        const element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
+        if (!element) {
+            return;
+        }
+        const ratio = (_b = image === null || image === void 0 ? void 0 : image.ratio) !== null && _b !== void 0 ? _b : 1;
+        const pos = {
+            x: -radius,
+            y: -radius,
+        };
+        if (!(image === null || image === void 0 ? void 0 : image.data.svgData) || !(image === null || image === void 0 ? void 0 : image.replaceColor)) {
+            context.globalAlpha = opacity;
+        }
+        context.drawImage(element, pos.x, pos.y, radius * 2, (radius * 2) / ratio);
+        if (!(image === null || image === void 0 ? void 0 : image.data.svgData) || !(image === null || image === void 0 ? void 0 : image.replaceColor)) {
+            context.globalAlpha = 1;
+        }
+    }
+    loadShape(particle) {
+        var _a, _b, _c;
+        if (particle.shape !== "image" && particle.shape !== "images") {
+            return;
+        }
+        const images = this.getImages(particle.container).images;
+        const imageData = particle.shapeData;
+        const image = images.find((t) => t.source === imageData.src);
+        let imageRes;
+        if (!image) {
+            this.loadImageShape(particle.container, imageData).then(() => {
+                this.loadShape(particle);
+            });
+            return;
+        }
+        if (image.error) {
+            return;
+        }
+        const color = particle.getFillColor();
+        if (image.svgData && imageData.replaceColor && color) {
+            imageRes = (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
+        }
+        else {
+            imageRes = {
+                data: image,
+                loaded: true,
+                ratio: imageData.width / imageData.height,
+                replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
+                source: imageData.src,
+            };
+        }
+        if (!imageRes.ratio) {
+            imageRes.ratio = 1;
+        }
+        const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill;
+        const close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close;
+        const imageShape = {
+            image: imageRes,
+            fill,
+            close,
+        };
+        particle.image = imageShape.image;
+        particle.fill = imageShape.fill;
+        particle.close = imageShape.close;
+    }
+    async loadImageShape(container, imageShape) {
+        const source = imageShape.src;
+        if (!source) {
+            throw new Error("Error tsParticles - No image.src");
+        }
+        try {
+            const image = {
+                source: source,
+                type: source.substr(source.length - 3),
+                error: false,
+                loading: true,
+            };
+            this.addImage(container, image);
+            const imageFunc = imageShape.replaceColor ? Utils_1.downloadSvgImage : Utils_1.loadImage;
+            await imageFunc(image);
+        }
+        catch (_a) {
+            throw new Error(`tsParticles error - ${imageShape.src} not found`);
+        }
+    }
+}
+exports.ImageDrawer = ImageDrawer;
+_ImageDrawer_images = new WeakMap();

package/cjs/Shapes/Image/Utils.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replaceImageColor = exports.downloadSvgImage = exports.loadImage = void 0;
+const ColorUtils_1 = require("../../Utils/ColorUtils");
+const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
+function replaceColorSvg(imageShape, color, opacity) {
+    const { svgData } = imageShape;
+    if (!svgData) {
+        return "";
+    }
+    const colorStyle = (0, ColorUtils_1.getStyleFromHsl)(color, opacity);
+    if (svgData.includes("fill")) {
+        return svgData.replace(currentColorRegex, () => colorStyle);
+    }
+    const preFillIndex = svgData.indexOf(">");
+    return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
+}
+async function loadImage(image) {
+    return new Promise((resolve) => {
+        image.loading = true;
+        const img = new Image();
+        img.addEventListener("load", () => {
+            image.element = img;
+            image.loading = false;
+            resolve();
+        });
+        img.addEventListener("error", () => {
+            image.error = true;
+            image.loading = false;
+            console.error(`Error tsParticles - loading image: ${image.source}`);
+            resolve();
+        });
+        img.src = image.source;
+    });
+}
+exports.loadImage = loadImage;
+async function downloadSvgImage(image) {
+    if (image.type !== "svg") {
+        await loadImage(image);
+        return;
+    }
+    image.loading = true;
+    const response = await fetch(image.source);
+    image.loading = false;
+    if (!response.ok) {
+        console.error("Error tsParticles - Image not found");
+        image.error = true;
+    }
+    if (!image.error) {
+        image.svgData = await response.text();
+    }
+}
+exports.downloadSvgImage = downloadSvgImage;
+function replaceImageColor(image, imageData, color, particle) {
+    var _a, _b, _c;
+    const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1);
+    const svg = new Blob([svgColoredData], { type: "image/svg+xml" });
+    const domUrl = URL || window.URL || window.webkitURL || window;
+    const url = domUrl.createObjectURL(svg);
+    const img = new Image();
+    const imageRes = {
+        data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        ratio: imageData.width / imageData.height,
+        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        source: imageData.src,
+    };
+    img.addEventListener("load", () => {
+        const pImage = particle.image;
+        if (pImage) {
+            pImage.loaded = true;
+            image.element = img;
+        }
+        domUrl.revokeObjectURL(url);
+    });
+    img.addEventListener("error", () => {
+        domUrl.revokeObjectURL(url);
+        const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+        loadImage(img2).then(() => {
+            const pImage = particle.image;
+            if (pImage) {
+                image.element = img2.element;
+                pImage.loaded = true;
+            }
+        });
+    });
+    img.src = url;
+    return imageRes;
+}
+exports.replaceImageColor = replaceImageColor;

package/cjs/Shapes/Text/TextDrawer.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextDrawer = exports.validTypes = void 0;
+const Utils_1 = require("../../Utils/Utils");
+exports.validTypes = ["text", "character", "char"];
+class TextDrawer {
+    getSidesCount() {
+        return 12;
+    }
+    async init(container) {
+        const options = container.actualOptions;
+        if (exports.validTypes.find((t) => (0, Utils_1.isInArray)(t, options.particles.shape.type))) {
+            const shapeOptions = exports.validTypes.map((t) => options.particles.shape.options[t]).find((t) => !!t);
+            if (shapeOptions instanceof Array) {
+                const promises = [];
+                for (const character of shapeOptions) {
+                    promises.push((0, Utils_1.loadFont)(character));
+                }
+                await Promise.allSettled(promises);
+            }
+            else {
+                if (shapeOptions !== undefined) {
+                    await (0, Utils_1.loadFont)(shapeOptions);
+                }
+            }
+        }
+    }
+    draw(context, particle, radius, opacity) {
+        var _a, _b, _c;
+        const character = particle.shapeData;
+        if (character === undefined) {
+            return;
+        }
+        const textData = character.value;
+        if (textData === undefined) {
+            return;
+        }
+        const textParticle = particle;
+        if (textParticle.text === undefined) {
+            textParticle.text =
+                textData instanceof Array ? (0, Utils_1.itemFromArray)(textData, particle.randomIndexData) : textData;
+        }
+        const text = textParticle.text;
+        const style = (_a = character.style) !== null && _a !== void 0 ? _a : "";
+        const weight = (_b = character.weight) !== null && _b !== void 0 ? _b : "400";
+        const size = Math.round(radius) * 2;
+        const font = (_c = character.font) !== null && _c !== void 0 ? _c : "Verdana";
+        const fill = particle.fill;
+        const offsetX = (text.length * radius) / 2;
+        context.font = `${style} ${weight} ${size}px "${font}"`;
+        const pos = {
+            x: -offsetX,
+            y: radius / 2,
+        };
+        context.globalAlpha = opacity;
+        if (fill) {
+            context.fillText(text, pos.x, pos.y);
+        }
+        else {
+            context.strokeText(text, pos.x, pos.y);
+        }
+        context.globalAlpha = 1;
+    }
+}
+exports.TextDrawer = TextDrawer;

package/cjs/Updaters/Angle/AngleUpdater.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngleUpdater = void 0;
+const NumberUtils_1 = require("../../Utils/NumberUtils");
+function updateAngle(particle, delta) {
+    var _a;
+    const rotate = particle.rotate;
+    if (!rotate) {
+        return;
+    }
+    const rotateOptions = particle.options.rotate;
+    const rotateAnimation = rotateOptions.animation;
+    const speed = ((_a = rotate.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
+    const max = 2 * Math.PI;
+    if (!rotateAnimation.enable) {
+        return;
+    }
+    switch (rotate.status) {
+        case 0:
+            rotate.value += speed;
+            if (rotate.value > max) {
+                rotate.value -= max;
+            }
+            break;
+        case 1:
+        default:
+            rotate.value -= speed;
+            if (rotate.value < 0) {
+                rotate.value += max;
+            }
+            break;
+    }
+}
+class AngleUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const rotateOptions = particle.options.rotate;
+        particle.rotate = {
+            enable: rotateOptions.animation.enable,
+            value: ((0, NumberUtils_1.getRangeValue)(rotateOptions.value) * Math.PI) / 180,
+        };
+        let rotateDirection = rotateOptions.direction;
+        if (rotateDirection === "random") {
+            const index = Math.floor(Math.random() * 2);
+            rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+        }
+        switch (rotateDirection) {
+            case "counter-clockwise":
+            case "counterClockwise":
+                particle.rotate.status = 1;
+                break;
+            case "clockwise":
+                particle.rotate.status = 0;
+                break;
+        }
+        const rotateAnimation = particle.options.rotate.animation;
+        if (rotateAnimation.enable) {
+            particle.rotate.velocity =
+                ((0, NumberUtils_1.getRangeValue)(rotateAnimation.speed) / 360) * this.container.retina.reduceFactor;
+            if (!rotateAnimation.sync) {
+                particle.rotate.velocity *= Math.random();
+            }
+        }
+    }
+    isEnabled(particle) {
+        const rotate = particle.options.rotate;
+        const rotateAnimation = rotate.animation;
+        return !particle.destroyed && !particle.spawning && !rotate.path && rotateAnimation.enable;
+    }
+    update(particle, delta) {
+        if (!this.isEnabled(particle)) {
+            return;
+        }
+        updateAngle(particle, delta);
+    }
+}
+exports.AngleUpdater = AngleUpdater;

package/cjs/Updaters/Color/ColorUpdater.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorUpdater = void 0;
+const ColorUtils_1 = require("../../Utils/ColorUtils");
+const NumberUtils_1 = require("../../Utils/NumberUtils");
+function updateColorValue(delta, value, valueAnimation, max, decrease) {
+    var _a;
+    const colorValue = value;
+    if (!colorValue || !valueAnimation.enable) {
+        return;
+    }
+    const offset = (0, NumberUtils_1.randomInRange)(valueAnimation.offset);
+    const velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6;
+    if (!decrease || colorValue.status === 0) {
+        colorValue.value += velocity;
+        if (decrease && colorValue.value > max) {
+            colorValue.status = 1;
+            colorValue.value -= colorValue.value % max;
+        }
+    }
+    else {
+        colorValue.value -= velocity;
+        if (colorValue.value < 0) {
+            colorValue.status = 0;
+            colorValue.value += colorValue.value;
+        }
+    }
+    if (colorValue.value > max) {
+        colorValue.value %= max;
+    }
+}
+function updateColor(particle, delta) {
+    var _a, _b, _c;
+    const animationOptions = particle.options.color.animation;
+    if (((_a = particle.color) === null || _a === void 0 ? void 0 : _a.h) !== undefined) {
+        updateColorValue(delta, particle.color.h, animationOptions.h, 360, false);
+    }
+    if (((_b = particle.color) === null || _b === void 0 ? void 0 : _b.s) !== undefined) {
+        updateColorValue(delta, particle.color.s, animationOptions.s, 100, true);
+    }
+    if (((_c = particle.color) === null || _c === void 0 ? void 0 : _c.l) !== undefined) {
+        updateColorValue(delta, particle.color.l, animationOptions.l, 100, true);
+    }
+}
+class ColorUpdater {
+    constructor(container) {
+        this.container = container;
+    }
+    init(particle) {
+        const hslColor = (0, ColorUtils_1.colorToHsl)(particle.options.color, particle.id, particle.options.reduceDuplicates);
+        if (hslColor) {
+            particle.color = (0, ColorUtils_1.getHslAnimationFromHsl)(hslColor, particle.options.color.animation, this.container.retina.reduceFactor);
+        }
+    }
+    isEnabled(particle) {
+        var _a, _b, _c;
+        const animationOptions = particle.options.color.animation;
+        return (!particle.destroyed &&
+            !particle.spawning &&
+            ((((_a = particle.color) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && animationOptions.h.enable) ||
+                (((_b = particle.color) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && animationOptions.s.enable) ||
+                (((_c = particle.color) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && animationOptions.l.enable)));
+    }
+    update(particle, delta) {
+        updateColor(particle, delta);
+    }
+}
+exports.ColorUpdater = ColorUpdater;