tsparticles 1.34.1 → 1.35.0

package/Plugins/PolygonMask/plugin.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadPolygonMaskPlugin(tsParticles: Main): void;
+export declare function loadPolygonMaskPlugin(tsParticles: Main): Promise<void>;

package/Plugins/PolygonMask/plugin.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadPolygonMaskPlugin = void 0;
 const PolygonMaskInstance_1 = require("./PolygonMaskInstance");
@@ -27,7 +46,10 @@ class Plugin {
         polygonOptions.load(source === null || source === void 0 ? void 0 : source.polygon);
     }
 }
-function loadPolygonMaskPlugin(tsParticles) {
+async function loadPolygonMaskPlugin(tsParticles) {
+    if (!window.SVGPathSeg) {
+        await Promise.resolve().then(() => __importStar(require("./pathseg")));
+    }
     const plugin = new Plugin();
     tsParticles.addPlugin(plugin);
 }

package/Plugins/PolygonMask/types.d.ts

@@ -0,0 +1,8 @@
+import type { IOptions } from "../../Options/Interfaces/IOptions";
+import type { IPolygonMask } from "./Options/Interfaces/IPolygonMask";
+import type { SVGPathSegArcAbs, SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegLinetoAbs, SVGPathSegMovetoAbs, SVGPathSegArcRel, SVGPathSegCurvetoCubicRel, SVGPathSegCurvetoCubicSmoothRel, SVGPathSegCurvetoQuadraticRel, SVGPathSegCurvetoQuadraticSmoothRel, SVGPathSegLinetoRel, SVGPathSegMovetoRel } from "./pathseg";
+export declare type SvgAbsoluteCoordinatesTypes = SVGPathSegArcAbs | SVGPathSegCurvetoCubicAbs | SVGPathSegCurvetoCubicSmoothAbs | SVGPathSegCurvetoQuadraticAbs | SVGPathSegCurvetoQuadraticSmoothAbs | SVGPathSegLinetoAbs | SVGPathSegMovetoAbs;
+export declare type SvgRelativeCoordinatesTypes = SVGPathSegArcRel | SVGPathSegCurvetoCubicRel | SVGPathSegCurvetoCubicSmoothRel | SVGPathSegCurvetoQuadraticRel | SVGPathSegCurvetoQuadraticSmoothRel | SVGPathSegLinetoRel | SVGPathSegMovetoRel;
+export declare type IPolygonMaskOptions = IOptions & {
+    polygon: IPolygonMask;
+};

package/Plugins/PolygonMask/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/Plugins/PolygonMask/utils.d.ts

@@ -0,0 +1,11 @@
+import type { ICoordinates } from "../../Core/Interfaces";
+import type { IDrawStroke } from "./Options/Interfaces/IDrawStroke";
+import type { ISvgPath } from "./Interfaces/ISvgPath";
+import { Vector } from "../../Core/Particle/Vector";
+export declare function drawPolygonMask(context: CanvasRenderingContext2D, rawData: ICoordinates[], stroke: IDrawStroke): void;
+export declare function drawPolygonMaskPath(context: CanvasRenderingContext2D, path: Path2D, stroke: IDrawStroke, position: ICoordinates): void;
+export declare function parsePaths(paths: ISvgPath[], scale: number, offset: ICoordinates): ICoordinates[];
+export declare function calcClosestPtOnSegment(s1: ICoordinates, s2: ICoordinates, pos: ICoordinates): ICoordinates & {
+    isOnSegment: boolean;
+};
+export declare function segmentBounce(start: ICoordinates, stop: ICoordinates, velocity: Vector): void;

package/Plugins/PolygonMask/utils.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentBounce = exports.calcClosestPtOnSegment = exports.parsePaths = exports.drawPolygonMaskPath = exports.drawPolygonMask = void 0;
+const Utils_1 = require("../../Utils");
+function drawPolygonMask(context, rawData, stroke) {
+    const color = (0, Utils_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, Utils_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, Utils_1.colorToRgb)(stroke.color);
+    if (!color) {
+        return;
+    }
+    context.strokeStyle = (0, Utils_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;
+        const len = (_a = segments === null || segments === void 0 ? void 0 : segments.numberOfItems) !== null && _a !== void 0 ? _a : 0;
+        const 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, Utils_1.getDistances)(pos, s1);
+    const { dx: dxx, dy: dyy } = (0, Utils_1.getDistances)(s2, s1);
+    const t = (dx * dxx + dy * dyy) / (dxx ** 2 + dyy ** 2);
+    let x = s1.x + dxx * t;
+    let y = s1.y + dyy * t;
+    if (t < 0) {
+        x = s1.x;
+        y = s1.y;
+    }
+    else if (t > 1) {
+        x = s2.x;
+        y = s2.y;
+    }
+    return { x: x, y: y, isOnSegment: t >= 0 && t <= 1 };
+}
+exports.calcClosestPtOnSegment = calcClosestPtOnSegment;
+function segmentBounce(start, stop, velocity) {
+    const { dx, dy } = (0, Utils_1.getDistances)(start, stop);
+    const wallAngle = Math.atan2(dy, dx);
+    const wallNormalX = Math.sin(wallAngle);
+    const wallNormalY = -Math.cos(wallAngle);
+    const d = 2 * (velocity.x * wallNormalX + velocity.y * wallNormalY);
+    velocity.x -= d * wallNormalX;
+    velocity.y -= d * wallNormalY;
+}
+exports.segmentBounce = segmentBounce;

package/README.md

@@ -337,12 +337,6 @@ yarn install && yarn start
 
 _If you are brave enough_ you can switch to the `dev` branch for trying the features under development.
 
-## Dependencies
-
-You may have notices the \* near dependency free. Well almost all features works without any dependency, but... Well
-there's a little but. The **Polygon Mask** feature requires `[pathseg](https://github.com/progers/pathseg)` for some
-browsers to work fine, and obviously the Icon Fonts (like `FontAwesome` ) must be included in your page.
-
 ---
 
 ## Migrating from Particles.js

package/Shapes/Image/ImageDrawer.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 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");
@@ -50,86 +41,80 @@ class ImageDrawer {
         const containerImages = this.getImages(container);
         containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
     }
-    init(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-            yield this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
-            for (const manualParticle of container.actualOptions.manualParticles) {
-                yield this.loadImagesFromParticlesOptions(container, manualParticle.options);
-            }
-            const emitterOptions = container.actualOptions;
-            if (emitterOptions.emitters) {
-                if (emitterOptions.emitters instanceof Array) {
-                    for (const emitter of emitterOptions.emitters) {
-                        yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-                    }
-                }
-                else {
-                    yield this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
+    async init(container) {
+        await this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
+        await this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
+        for (const manualParticle of container.actualOptions.manualParticles) {
+            await this.loadImagesFromParticlesOptions(container, manualParticle.options);
+        }
+        const emitterOptions = container.actualOptions;
+        if (emitterOptions.emitters) {
+            if (emitterOptions.emitters instanceof Array) {
+                for (const emitter of emitterOptions.emitters) {
+                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
                 }
             }
-            const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
-            if (interactiveEmitters) {
-                if (interactiveEmitters instanceof Array) {
-                    for (const emitter of interactiveEmitters) {
-                        yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-                    }
-                }
-                else {
-                    yield this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
+            else {
+                await this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
+            }
+        }
+        const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
+        if (interactiveEmitters) {
+            if (interactiveEmitters instanceof Array) {
+                for (const emitter of interactiveEmitters) {
+                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
                 }
             }
-        });
+            else {
+                await this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
+            }
+        }
     }
     destroy() {
         __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
     }
-    loadImagesFromParticlesOptions(container, options) {
+    async loadImagesFromParticlesOptions(container, options) {
         var _a, _b, _c;
-        return __awaiter(this, void 0, void 0, function* () {
-            const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
-            if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) ||
-                !shapeOptions.options ||
-                (!Utils_1.isInArray(Enums_1.ShapeType.image, shapeOptions.type) && !Utils_1.isInArray(Enums_1.ShapeType.images, shapeOptions.type))) {
-                return;
-            }
-            const idx = __classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex((t) => t.id === container.id);
-            if (idx >= 0) {
-                __classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
-            }
-            const imageOptions = (_a = shapeOptions.options[Enums_1.ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[Enums_1.ShapeType.image];
-            if (imageOptions instanceof Array) {
-                for (const optionsImage of imageOptions) {
-                    yield this.loadImageShape(container, optionsImage);
-                }
-            }
-            else {
-                yield this.loadImageShape(container, imageOptions);
-            }
-            if (options === null || options === void 0 ? void 0 : options.groups) {
-                for (const groupName in options.groups) {
-                    const group = options.groups[groupName];
-                    yield this.loadImagesFromParticlesOptions(container, group);
-                }
+        const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
+        if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) ||
+            !shapeOptions.options ||
+            (!(0, Utils_1.isInArray)(Enums_1.ShapeType.image, shapeOptions.type) && !(0, Utils_1.isInArray)(Enums_1.ShapeType.images, shapeOptions.type))) {
+            return;
+        }
+        const idx = __classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex((t) => t.id === container.id);
+        if (idx >= 0) {
+            __classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
+        }
+        const imageOptions = (_a = shapeOptions.options[Enums_1.ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[Enums_1.ShapeType.image];
+        if (imageOptions instanceof Array) {
+            for (const optionsImage of imageOptions) {
+                await this.loadImageShape(container, optionsImage);
             }
-            if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
-                yield this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
+        }
+        else {
+            await this.loadImageShape(container, imageOptions);
+        }
+        if (options === null || options === void 0 ? void 0 : options.groups) {
+            for (const groupName in options.groups) {
+                const group = options.groups[groupName];
+                await this.loadImagesFromParticlesOptions(container, group);
             }
-        });
+        }
+        if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
+            await this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
+        }
     }
-    loadImageShape(container, imageShape) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const imageFunc = imageShape.replaceColor ? Utils_2.downloadSvgImage : Utils_2.loadImage;
-                const image = yield imageFunc(imageShape.src);
-                if (image) {
-                    this.addImage(container, image);
-                }
-            }
-            catch (_a) {
-                console.warn(`tsParticles error - ${imageShape.src} not found`);
+    async loadImageShape(container, imageShape) {
+        try {
+            const imageFunc = imageShape.replaceColor ? Utils_2.downloadSvgImage : Utils_2.loadImage;
+            const image = await imageFunc(imageShape.src);
+            if (image) {
+                this.addImage(container, image);
             }
-        });
+        }
+        catch (_a) {
+            console.warn(`tsParticles error - ${imageShape.src} not found`);
+        }
     }
     draw(context, particle, radius, opacity) {
         var _a, _b;
@@ -155,7 +140,7 @@ class ImageDrawer {
         }
     }
     loadShape(particle) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
@@ -168,7 +153,7 @@ class ImageDrawer {
             return;
         }
         if (image.svgData !== undefined && imageData.replaceColor && color) {
-            const svgColoredData = Utils_2.replaceColorSvg(image, color, particle.opacity.value);
+            const svgColoredData = (0, Utils_2.replaceColorSvg)(image, color, (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1);
             const svg = new Blob([svgColoredData], { type: "image/svg+xml" });
             const domUrl = URL || window.URL || window.webkitURL || window;
             const url = domUrl.createObjectURL(svg);
@@ -176,7 +161,7 @@ class ImageDrawer {
             imageRes = {
                 data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
                 ratio: imageData.width / imageData.height,
-                replaceColor: (_b = imageData.replaceColor) !== null && _b !== void 0 ? _b : imageData.replace_color,
+                replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
                 source: imageData.src,
             };
             img.addEventListener("load", () => {
@@ -189,7 +174,7 @@ class ImageDrawer {
             });
             img.addEventListener("error", () => {
                 domUrl.revokeObjectURL(url);
-                Utils_2.loadImage(imageData.src).then((img2) => {
+                (0, Utils_2.loadImage)(imageData.src).then((img2) => {
                     const pImage = particle.image;
                     if (pImage) {
                         image.element = img2 === null || img2 === void 0 ? void 0 : img2.element;
@@ -204,15 +189,15 @@ class ImageDrawer {
                 data: image,
                 loaded: true,
                 ratio: imageData.width / imageData.height,
-                replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+                replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
                 source: imageData.src,
             };
         }
         if (!imageRes.ratio) {
             imageRes.ratio = 1;
         }
-        const fill = (_d = imageData.fill) !== null && _d !== void 0 ? _d : particle.fill;
-        const close = (_e = imageData.close) !== null && _e !== void 0 ? _e : particle.close;
+        const fill = (_f = imageData.fill) !== null && _f !== void 0 ? _f : particle.fill;
+        const close = (_g = imageData.close) !== null && _g !== void 0 ? _g : particle.close;
         const imageShape = {
             image: imageRes,
             fill,

package/Shapes/Image/Utils.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.replaceColorSvg = exports.downloadSvgImage = exports.loadImage = void 0;
 const Utils_1 = require("../../Utils");
@@ -33,25 +24,23 @@ function loadImage(source) {
     });
 }
 exports.loadImage = loadImage;
-function downloadSvgImage(source) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (!source) {
-            throw new Error("Error tsParticles - No image.src");
-        }
-        const image = {
-            source: source,
-            type: source.substr(source.length - 3),
-        };
-        if (image.type !== "svg") {
-            return loadImage(source);
-        }
-        const response = yield fetch(image.source);
-        if (!response.ok) {
-            throw new Error("Error tsParticles - Image not found");
-        }
-        image.svgData = yield response.text();
-        return image;
-    });
+async function downloadSvgImage(source) {
+    if (!source) {
+        throw new Error("Error tsParticles - No image.src");
+    }
+    const image = {
+        source: source,
+        type: source.substr(source.length - 3),
+    };
+    if (image.type !== "svg") {
+        return loadImage(source);
+    }
+    const response = await fetch(image.source);
+    if (!response.ok) {
+        throw new Error("Error tsParticles - Image not found");
+    }
+    image.svgData = await response.text();
+    return image;
 }
 exports.downloadSvgImage = downloadSvgImage;
 function replaceColorSvg(imageShape, color, opacity) {
@@ -61,9 +50,9 @@ function replaceColorSvg(imageShape, color, opacity) {
     }
     if (svgData.includes("fill")) {
         const currentColor = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
-        return svgData.replace(currentColor, () => Utils_1.getStyleFromHsl(color, opacity));
+        return svgData.replace(currentColor, () => (0, Utils_1.getStyleFromHsl)(color, opacity));
     }
     const preFillIndex = svgData.indexOf(">");
-    return `${svgData.substring(0, preFillIndex)} fill="${Utils_1.getStyleFromHsl(color, opacity)}"${svgData.substring(preFillIndex)}`;
+    return `${svgData.substring(0, preFillIndex)} fill="${(0, Utils_1.getStyleFromHsl)(color, opacity)}"${svgData.substring(preFillIndex)}`;
 }
 exports.replaceColorSvg = replaceColorSvg;

package/Shapes/Text/TextDrawer.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextDrawer = exports.validTypes = void 0;
 const Utils_1 = require("../../Utils");
@@ -16,25 +7,23 @@ class TextDrawer {
     getSidesCount() {
         return 12;
     }
-    init(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const options = container.actualOptions;
-            if (exports.validTypes.find((t) => 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(Utils_1.loadFont(character));
-                    }
-                    yield Promise.allSettled(promises);
+    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));
                 }
-                else {
-                    if (shapeOptions !== undefined) {
-                        yield Utils_1.loadFont(shapeOptions);
-                    }
+                await Promise.allSettled(promises);
+            }
+            else {
+                if (shapeOptions !== undefined) {
+                    await (0, Utils_1.loadFont)(shapeOptions);
                 }
             }
-        });
+        }
     }
     draw(context, particle, radius, opacity) {
         var _a, _b, _c;
@@ -49,7 +38,7 @@ class TextDrawer {
         const textParticle = particle;
         if (textParticle.text === undefined) {
             textParticle.text =
-                textData instanceof Array ? Utils_1.itemFromArray(textData, particle.randomIndexData) : textData;
+                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 : "";

package/Updaters/Angle/AngleUpdater.d.ts

@@ -1,6 +1,10 @@
 import type { IDelta, IParticleUpdater } from "../../Core/Interfaces";
 import { Particle } from "../../Core/Particle";
+import { Container } from "../../Core/Container";
 export declare class AngleUpdater implements IParticleUpdater {
+    private readonly container;
+    constructor(container: Container);
+    init(particle: Particle): void;
     isEnabled(particle: Particle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }

package/Updaters/Angle/AngleUpdater.js

@@ -2,32 +2,68 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AngleUpdater = void 0;
 const Enums_1 = require("../../Enums");
+const Utils_1 = require("../../Utils");
 function updateAngle(particle, delta) {
     var _a;
-    const rotate = particle.options.rotate;
-    const rotateAnimation = rotate.animation;
-    const speed = ((_a = particle.rotate.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
+    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 (particle.rotate.status) {
+    switch (rotate.status) {
         case Enums_1.AnimationStatus.increasing:
-            particle.rotate.value += speed;
-            if (particle.rotate.value > max) {
-                particle.rotate.value -= max;
+            rotate.value += speed;
+            if (rotate.value > max) {
+                rotate.value -= max;
             }
             break;
         case Enums_1.AnimationStatus.decreasing:
         default:
-            particle.rotate.value -= speed;
-            if (particle.rotate.value < 0) {
-                particle.rotate.value += max;
+            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, Utils_1.getRangeValue)(rotateOptions.value) * Math.PI) / 180,
+        };
+        let rotateDirection = rotateOptions.direction;
+        if (rotateDirection === Enums_1.RotateDirection.random) {
+            const index = Math.floor(Math.random() * 2);
+            rotateDirection = index > 0 ? Enums_1.RotateDirection.counterClockwise : Enums_1.RotateDirection.clockwise;
+        }
+        switch (rotateDirection) {
+            case Enums_1.RotateDirection.counterClockwise:
+            case "counterClockwise":
+                particle.rotate.status = Enums_1.AnimationStatus.decreasing;
+                break;
+            case Enums_1.RotateDirection.clockwise:
+                particle.rotate.status = Enums_1.AnimationStatus.increasing;
+                break;
+        }
+        const rotateAnimation = particle.options.rotate.animation;
+        if (rotateAnimation.enable) {
+            particle.rotate.velocity = (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;

package/Updaters/Angle/index.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadAngleUpdater = void 0;
 const AngleUpdater_1 = require("./AngleUpdater");
 function loadAngleUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("angle", () => new AngleUpdater_1.AngleUpdater());
+    tsParticles.addParticleUpdater("angle", (container) => new AngleUpdater_1.AngleUpdater(container));
 }
 exports.loadAngleUpdater = loadAngleUpdater;