tsparticles 1.34.1 → 1.35.0

package/browser/Options/Classes/AnimatableColor.d.ts

@@ -1,11 +1,11 @@
 import type { IAnimatableColor } from "../Interfaces/IAnimatableColor";
 import { OptionsColor } from "./OptionsColor";
-import type { RecursivePartial } from "../../Types";
+import type { RecursivePartial, SingleOrMultiple } from "../../Types";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader";
 import { HslAnimation } from "./HslAnimation";
 export declare class AnimatableColor extends OptionsColor implements IAnimatableColor, IOptionLoader<IAnimatableColor> {
     animation: HslAnimation;
     constructor();
-    static create(source?: AnimatableColor, data?: string | RecursivePartial<IAnimatableColor>): AnimatableColor;
+    static create(source?: AnimatableColor, data?: SingleOrMultiple<string> | RecursivePartial<IAnimatableColor>): AnimatableColor;
     load(data?: RecursivePartial<IAnimatableColor>): void;
 }

package/browser/Options/Classes/AnimatableColor.js

@@ -6,9 +6,15 @@ export class AnimatableColor extends OptionsColor {
         this.animation = new HslAnimation();
     }
     static create(source, data) {
-        const color = source !== null && source !== void 0 ? source : new AnimatableColor();
+        const color = new AnimatableColor();
+        color.load(source);
         if (data !== undefined) {
-            color.load(typeof data === "string" ? { value: data } : data);
+            if (typeof data === "string" || data instanceof Array) {
+                color.load({ value: data });
+            }
+            else {
+                color.load(data);
+            }
         }
         return color;
     }

package/browser/Options/Classes/FullScreen/FullScreen.d.ts

@@ -1,6 +1,6 @@
 import type { IFullScreen } from "../../Interfaces/FullScreen/IFullScreen";
-import { IOptionLoader } from "../../Interfaces/IOptionLoader";
-import { RecursivePartial } from "../../../Types";
+import type { IOptionLoader } from "../../Interfaces/IOptionLoader";
+import type { RecursivePartial } from "../../../Types";
 export declare class FullScreen implements IFullScreen, IOptionLoader<IFullScreen> {
     enable: boolean;
     zIndex: number;

package/browser/Options/Classes/Options.d.ts

@@ -11,6 +11,7 @@ import { Motion } from "./Motion/Motion";
 import { ManualParticle } from "./ManualParticle";
 import { Responsive } from "./Responsive";
 export declare class Options implements IOptions, IOptionLoader<IOptions> {
+    #private;
     get fps_limit(): number;
     set fps_limit(value: number);
     get retina_detect(): boolean;
@@ -34,10 +35,12 @@ export declare class Options implements IOptions, IOptionLoader<IOptions> {
     responsive: Responsive[];
     themes: Theme[];
     zLayers: number;
+    defaultDarkTheme?: string;
+    defaultLightTheme?: string;
     [name: string]: unknown;
     constructor();
     load(data?: RecursivePartial<IOptions>): void;
     setTheme(name?: string): void;
-    private importPreset;
     setResponsive(width: number, pxRatio: number, defaultOptions: IOptions): void;
+    private importPreset;
 }

package/browser/Options/Classes/Options.js

@@ -1,3 +1,9 @@
+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 _Options_instances, _Options_findDefaultTheme;
 import { Interactivity } from "./Interactivity/Interactivity";
 import { ParticlesOptions } from "./Particles/ParticlesOptions";
 import { BackgroundMask } from "./BackgroundMask/BackgroundMask";
@@ -11,6 +17,7 @@ import { ManualParticle } from "./ManualParticle";
 import { Responsive } from "./Responsive";
 export class Options {
     constructor() {
+        _Options_instances.add(this);
         this.autoPlay = true;
         this.background = new Background();
         this.backgroundMask = new BackgroundMask();
@@ -47,7 +54,7 @@ export class Options {
         this.fullScreen.load(value);
     }
     load(data) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (data === undefined) {
             return;
         }
@@ -85,7 +92,13 @@ export class Options {
             this.zLayers = data.zLayers;
         }
         this.background.load(data.background);
-        this.fullScreen.load((_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode);
+        const fullScreen = (_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode;
+        if (typeof fullScreen === "boolean") {
+            this.fullScreen.enable = fullScreen;
+        }
+        else {
+            this.fullScreen.load(fullScreen);
+        }
         this.backgroundMask.load(data.backgroundMask);
         this.interactivity.load(data.interactivity);
         if (data.manualParticles !== undefined) {
@@ -113,6 +126,8 @@ export class Options {
                 this.themes.push(optTheme);
             }
         }
+        this.defaultDarkTheme = (_d = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, ThemeMode.dark)) === null || _d === void 0 ? void 0 : _d.name;
+        this.defaultLightTheme = (_e = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, ThemeMode.light)) === null || _e === void 0 ? void 0 : _e.name;
     }
     setTheme(name) {
         if (name) {
@@ -122,24 +137,22 @@ export class Options {
             }
         }
         else {
-            const clientDarkMode = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)").matches;
-            let defaultTheme = this.themes.find((theme) => theme.default.value &&
-                ((theme.default.mode === ThemeMode.dark && clientDarkMode) ||
-                    (theme.default.mode === ThemeMode.light && !clientDarkMode)));
-            if (!defaultTheme) {
-                defaultTheme = this.themes.find((theme) => theme.default.value && theme.default.mode === ThemeMode.any);
-            }
+            const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch && mediaMatch.matches, defaultTheme = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, clientDarkMode ? ThemeMode.dark : ThemeMode.light);
             if (defaultTheme) {
                 this.load(defaultTheme.options);
             }
         }
     }
-    importPreset(preset) {
-        this.load(Plugins.getPreset(preset));
-    }
     setResponsive(width, pxRatio, defaultOptions) {
         var _a;
         this.load(defaultOptions);
         this.load((_a = this.responsive.find((t) => t.maxWidth * pxRatio > width)) === null || _a === void 0 ? void 0 : _a.options);
     }
+    importPreset(preset) {
+        this.load(Plugins.getPreset(preset));
+    }
 }
+_Options_instances = new WeakSet(), _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
+    var _a;
+    return ((_a = this.themes.find((theme) => theme.default.value && theme.default.mode === mode)) !== null && _a !== void 0 ? _a : this.themes.find((theme) => theme.default.value && theme.default.mode === ThemeMode.any));
+};

package/browser/Options/Classes/OptionsColor.d.ts

@@ -1,5 +1,5 @@
 import type { IOptionsColor } from "../Interfaces/IOptionsColor";
-import type { IRgb, IHsl, IHsv, IValueColor } from "../../Core/Interfaces/Colors";
+import type { IRgb, IHsl, IHsv, IValueColor } from "../../Core/Interfaces";
 import type { RecursivePartial, SingleOrMultiple } from "../../Types";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader";
 export declare class OptionsColor implements IOptionsColor, IOptionLoader<IOptionsColor> {

package/browser/Options/Classes/OptionsColor.js

@@ -3,7 +3,8 @@ export class OptionsColor {
         this.value = "#fff";
     }
     static create(source, data) {
-        const color = source !== null && source !== void 0 ? source : new OptionsColor();
+        const color = new OptionsColor();
+        color.load(source);
         if (data !== undefined) {
             if (typeof data === "string" || data instanceof Array) {
                 color.load({ value: data });

package/browser/Options/Classes/Particles/ParticlesOptions.js

@@ -66,7 +66,7 @@ export class ParticlesOptions {
             return;
         }
         this.bounce.load(data.bounce);
-        this.color = AnimatableColor.create(this.color, data.color);
+        this.color.load(AnimatableColor.create(this.color, data.color));
         this.destroy.load(data.destroy);
         this.life.load(data.life);
         const links = (_b = (_a = data.links) !== null && _a !== void 0 ? _a : data.lineLinked) !== null && _b !== void 0 ? _b : data.line_linked;

package/browser/Options/Classes/Particles/Roll/Roll.d.ts

@@ -3,11 +3,13 @@ import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
 import type { RangeValue, RecursivePartial } from "../../../../Types";
 import { OptionsColor } from "../../OptionsColor";
 import { RollLight } from "./RollLight";
+import { RollMode } from "../../../../Enums";
 export declare class Roll implements IRoll, IOptionLoader<IRoll> {
     backColor?: OptionsColor;
     darken: RollLight;
     enable: boolean;
     enlighten: RollLight;
+    mode: RollMode | keyof typeof RollMode;
     speed: RangeValue;
     constructor();
     load(data?: RecursivePartial<IRoll>): void;

package/browser/Options/Classes/Particles/Roll/Roll.js

@@ -1,11 +1,13 @@
 import { OptionsColor } from "../../OptionsColor";
 import { RollLight } from "./RollLight";
 import { setRangeValue } from "../../../../Utils";
+import { RollMode } from "../../../../Enums";
 export class Roll {
     constructor() {
         this.darken = new RollLight();
         this.enable = false;
         this.enlighten = new RollLight();
+        this.mode = RollMode.vertical;
         this.speed = 25;
     }
     load(data) {
@@ -20,6 +22,9 @@ export class Roll {
             this.enable = data.enable;
         }
         this.enlighten.load(data.enlighten);
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
         if (data.speed !== undefined) {
             this.speed = setRangeValue(data.speed);
         }

package/browser/Options/Classes/Theme/ThemeDefault.d.ts

@@ -1,8 +1,9 @@
 import type { IThemeDefault } from "../../Interfaces/Theme/IThemeDefault";
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader";
-import { ThemeMode } from "../../../Enums/Modes";
+import { ThemeMode } from "../../../Enums";
 import type { RecursivePartial } from "../../../Types";
 export declare class ThemeDefault implements IThemeDefault, IOptionLoader<IThemeDefault> {
+    auto: boolean;
     mode: ThemeMode | keyof ThemeMode;
     value: boolean;
     constructor();

package/browser/Options/Classes/Theme/ThemeDefault.js

@@ -1,13 +1,17 @@
-import { ThemeMode } from "../../../Enums/Modes";
+import { ThemeMode } from "../../../Enums";
 export class ThemeDefault {
     constructor() {
+        this.auto = false;
         this.mode = ThemeMode.any;
         this.value = false;
     }
     load(data) {
-        if (data === undefined) {
+        if (!data) {
             return;
         }
+        if (data.auto !== undefined) {
+            this.auto = data.auto;
+        }
         if (data.mode !== undefined) {
             this.mode = data.mode;
         }

package/browser/Options/Interfaces/IOptions.d.ts

@@ -2,7 +2,7 @@ import type { IInteractivity } from "./Interactivity/IInteractivity";
 import type { IParticles } from "./Particles/IParticles";
 import type { IBackgroundMask } from "./BackgroundMask/IBackgroundMask";
 import type { IBackground } from "./Background/IBackground";
-import type { RangeValue, SingleOrMultiple } from "../../Types";
+import type { RangeValue, RecursivePartial, SingleOrMultiple } from "../../Types";
 import type { ITheme } from "./Theme/ITheme";
 import type { IFullScreen } from "./FullScreen/IFullScreen";
 import type { IMotion } from "./Motion/IMotion";
@@ -12,12 +12,12 @@ export interface IOptions {
     autoPlay: boolean;
     background: IBackground;
     backgroundMask: IBackgroundMask;
-    backgroundMode: IFullScreen;
+    backgroundMode: RecursivePartial<IFullScreen> | boolean;
     detectRetina: boolean;
     duration: RangeValue;
     fps_limit: number;
     fpsLimit: number;
-    fullScreen: IFullScreen;
+    fullScreen: RecursivePartial<IFullScreen> | boolean;
     interactivity: IInteractivity;
     manualParticles: IManualParticle[];
     motion: IMotion;

package/browser/Options/Interfaces/Particles/Roll/IRoll.d.ts

@@ -1,10 +1,12 @@
 import type { RangeValue, SingleOrMultiple } from "../../../../Types";
-import type { IColor } from "../../../../Core/Interfaces/Colors";
+import type { IColor } from "../../../../Core/Interfaces";
 import type { IRollLight } from "./IRollLight";
+import type { RollMode } from "../../../../Enums";
 export interface IRoll {
     backColor?: SingleOrMultiple<string> | IColor;
     darken: IRollLight;
     enable: boolean;
     enlighten: IRollLight;
+    mode: RollMode | keyof typeof RollMode;
     speed: RangeValue;
 }

package/browser/Options/Interfaces/Theme/IThemeDefault.d.ts

@@ -1,5 +1,6 @@
 import type { ThemeMode } from "../../../Enums";
 export interface IThemeDefault {
+    auto: boolean;
     mode: ThemeMode | keyof ThemeMode;
     value: boolean;
 }

package/browser/Plugins/Absorbers/AbsorberInstance.js

@@ -134,7 +134,8 @@ export class AbsorberInstance {
             particle.position.y = this.position.y + orbitRadius * updateFunc.y(orbitAngle);
             particle.absorberOrbit.length -= v.length;
             particle.absorberOrbit.angle +=
-                ((((_a = particle.moveSpeed) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio) / 100) * container.retina.reduceFactor;
+                ((((_a = particle.retina.moveSpeed) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio) / 100) *
+                    container.retina.reduceFactor;
         }
         else {
             const addV = Vector.origin;

package/browser/Plugins/Emitters/EmitterInstance.js

@@ -193,7 +193,7 @@ export class EmitterInstance {
         };
         for (let i = 0; i < quantity; i++) {
             const particlesOptions = deepExtend({}, this.particlesOptions);
-            if (this.spawnColor !== undefined) {
+            if (this.spawnColor) {
                 const colorAnimation = (_a = this.emitterOptions.spawnColor) === null || _a === void 0 ? void 0 : _a.animation;
                 if (colorAnimation) {
                     const hueAnimation = colorAnimation;

package/browser/Plugins/Emitters/Shapes/Circle/CircleShape.js

@@ -17,7 +17,7 @@ export class CircleShape {
                 return -theta;
             }
         };
-        const radius = (x, y, theta) => (x * y) / Math.sqrt(Math.pow((y * Math.cos(theta)), 2) + Math.pow((x * Math.sin(theta)), 2));
+        const radius = (x, y, theta) => (x * y) / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2);
         const [a, b] = [offset.x / 2, offset.y / 2];
         const randomTheta = generateTheta(a, b), maxRadius = radius(a, b, randomTheta), randomRadius = fill ? maxRadius * Math.sqrt(Math.random()) : maxRadius;
         return {

package/browser/Plugins/PolygonMask/Interfaces/ISvgPath.d.ts

@@ -1,3 +1,4 @@
+import type { SVGPathElement } from "../pathseg";
 export interface ISvgPath {
     element: SVGPathElement;
     length: number;

package/browser/Plugins/PolygonMask/PolygonMaskInstance.d.ts

@@ -1,18 +1,11 @@
 import type { Container } from "../../Core/Container";
-import type { ICoordinates } from "../../Core/Interfaces/ICoordinates";
+import type { IContainerPlugin, ICoordinates, IDelta, IDimension } from "../../Core/Interfaces";
 import { Particle } from "../../Core/Particle";
-import type { IDimension } from "../../Core/Interfaces/IDimension";
 import type { ISvgPath } from "./Interfaces/ISvgPath";
-import type { IContainerPlugin } from "../../Core/Interfaces/IContainerPlugin";
-import type { IOptions } from "../../Options/Interfaces/IOptions";
 import type { RecursivePartial } from "../../Types";
-import type { IPolygonMask } from "./Options/Interfaces/IPolygonMask";
 import { PolygonMask } from "./Options/Classes/PolygonMask";
-import type { IDelta } from "../../Core/Interfaces/IDelta";
 import { OutModeDirection } from "../../Enums";
-declare type IPolygonMaskOptions = IOptions & {
-    polygon: IPolygonMask;
-};
+import type { IPolygonMaskOptions } from "./types";
 export declare class PolygonMaskInstance implements IContainerPlugin {
     private readonly container;
     redrawTimeout?: number;
@@ -45,4 +38,3 @@ export declare class PolygonMaskInstance implements IContainerPlugin {
     private createPath2D;
     private initRawData;
 }
-export {};

package/browser/Plugins/PolygonMask/PolygonMaskInstance.js

@@ -1,127 +1,8 @@
-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());
-    });
-};
 import { InlineArrangement, Type } from "./Enums";
-import { colorToRgb, Constants, deepExtend, getDistance, getDistances, getStyleFromRgb, itemFromArray, } from "../../Utils";
+import { Constants, deepExtend, getDistance, getDistances, itemFromArray } from "../../Utils";
 import { PolygonMask } from "./Options/Classes/PolygonMask";
 import { OutModeDirection } from "../../Enums";
-function drawPolygonMask(context, rawData, stroke) {
-    const color = 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 = getStyleFromRgb(color);
-    context.lineWidth = stroke.width;
-    context.stroke();
-}
-function drawPolygonMaskPath(context, path, stroke, position) {
-    context.translate(position.x, position.y);
-    const color = colorToRgb(stroke.color);
-    if (!color) {
-        return;
-    }
-    context.strokeStyle = getStyleFromRgb(color, stroke.opacity);
-    context.lineWidth = stroke.width;
-    context.stroke(path);
-}
-function parsePaths(paths, scale, offset) {
-    const res = [];
-    for (const path of paths) {
-        const segments = path.element.pathSegList;
-        const len = segments.numberOfItems;
-        const p = {
-            x: 0,
-            y: 0,
-        };
-        for (let i = 0; i < len; i++) {
-            const segment = segments.getItem(i);
-            const svgPathSeg = window.SVGPathSeg;
-            switch (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;
-}
-function calcClosestPtOnSegment(s1, s2, pos) {
-    const { dx, dy } = getDistances(pos, s1);
-    const { dx: dxx, dy: dyy } = getDistances(s2, s1);
-    const t = (dx * dxx + dy * dyy) / (Math.pow(dxx, 2) + Math.pow(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 };
-}
-function segmentBounce(start, stop, velocity) {
-    const { dx, dy } = 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;
-}
+import { calcClosestPtOnSegment, drawPolygonMask, drawPolygonMaskPath, parsePaths, segmentBounce } from "./utils";
 export class PolygonMaskInstance {
     constructor(container) {
         this.container = container;
@@ -133,15 +14,13 @@ export class PolygonMaskInstance {
         this.options = new PolygonMask();
         this.polygonMaskMoveRadius = this.options.move.radius * container.retina.pixelRatio;
     }
-    initAsync(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.options.load(options === null || options === void 0 ? void 0 : options.polygon);
-            const polygonMaskOptions = this.options;
-            this.polygonMaskMoveRadius = polygonMaskOptions.move.radius * this.container.retina.pixelRatio;
-            if (polygonMaskOptions.enable) {
-                yield this.initRawData();
-            }
-        });
+    async initAsync(options) {
+        this.options.load(options === null || options === void 0 ? void 0 : options.polygon);
+        const polygonMaskOptions = this.options;
+        this.polygonMaskMoveRadius = polygonMaskOptions.move.radius * this.container.retina.pixelRatio;
+        if (polygonMaskOptions.enable) {
+            await this.initRawData();
+        }
     }
     resize() {
         const container = this.container;
@@ -152,10 +31,10 @@ export class PolygonMaskInstance {
         if (this.redrawTimeout) {
             clearTimeout(this.redrawTimeout);
         }
-        this.redrawTimeout = window.setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-            yield this.initRawData(true);
+        this.redrawTimeout = window.setTimeout(async () => {
+            await this.initRawData(true);
             container.particles.redraw();
-        }), 250);
+        }, 250);
     }
     stop() {
         delete this.raw;
@@ -215,7 +94,7 @@ export class PolygonMaskInstance {
             }
         }
     }
-    polygonBounce(particle, delta, direction) {
+    polygonBounce(particle, _delta, direction) {
         const options = this.options;
         if (!this.raw || !options.enable || direction !== OutModeDirection.top) {
             return false;
@@ -320,20 +199,18 @@ export class PolygonMaskInstance {
         };
         return parsePaths(this.paths, scale, this.offset);
     }
-    downloadSvgPath(svgUrl, force) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const options = this.options;
-            const url = svgUrl || options.url;
-            const forceDownload = force !== null && force !== void 0 ? force : false;
-            if (!url || (this.paths !== undefined && !forceDownload)) {
-                return this.raw;
-            }
-            const req = yield fetch(url);
-            if (!req.ok) {
-                throw new Error("tsParticles Error - Error occurred during polygon mask download");
-            }
-            return this.parseSvgPath(yield req.text(), force);
-        });
+    async downloadSvgPath(svgUrl, force) {
+        const options = this.options;
+        const url = svgUrl || options.url;
+        const forceDownload = force !== null && force !== void 0 ? force : false;
+        if (!url || (this.paths !== undefined && !forceDownload)) {
+            return this.raw;
+        }
+        const req = await fetch(url);
+        if (!req.ok) {
+            throw new Error("tsParticles Error - Error occurred during polygon mask download");
+        }
+        return this.parseSvgPath(await req.text(), force);
     }
     drawPoints() {
         if (!this.raw) {
@@ -477,28 +354,26 @@ export class PolygonMaskInstance {
             path.path2d.closePath();
         }
     }
-    initRawData(force) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const options = this.options;
-            if (options.url) {
-                this.raw = yield this.downloadSvgPath(options.url, force);
+    async initRawData(force) {
+        const options = this.options;
+        if (options.url) {
+            this.raw = await this.downloadSvgPath(options.url, force);
+        }
+        else if (options.data) {
+            const data = options.data;
+            let svg;
+            if (typeof data !== "string") {
+                const path = data.path instanceof Array
+                    ? data.path.map((t) => `<path d="${t}" />`).join("")
+                    : `<path d="${data.path}" />`;
+                const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
+                svg = `<svg ${namespaces} width="${data.size.width}" height="${data.size.height}">${path}</svg>`;
             }
-            else if (options.data) {
-                const data = options.data;
-                let svg;
-                if (typeof data !== "string") {
-                    const path = data.path instanceof Array
-                        ? data.path.map((t) => `<path d="${t}" />`).join("")
-                        : `<path d="${data.path}" />`;
-                    const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
-                    svg = `<svg ${namespaces} width="${data.size.width}" height="${data.size.height}">${path}</svg>`;
-                }
-                else {
-                    svg = data;
-                }
-                this.raw = this.parseSvgPath(svg, force);
+            else {
+                svg = data;
             }
-            this.createPath2D();
-        });
+            this.raw = this.parseSvgPath(svg, force);
+        }
+        this.createPath2D();
     }
 }