@tsparticles/engine 3.1.0 → 3.2.0

package/types/Core/Utils/InteractionManager.d.ts

@@ -6,12 +6,12 @@ export declare class InteractionManager {
     private readonly container;
     private readonly _engine;
     private _externalInteractors;
-    private readonly _interactors;
+    private _interactors;
     private _particleInteractors;
     constructor(engine: Engine, container: Container);
     externalInteract(delta: IDelta): Promise<void>;
     handleClickMode(mode: string): void;
-    init(): void;
+    init(): Promise<void>;
     particlesInteract(particle: Particle, delta: IDelta): Promise<void>;
     reset(particle: Particle): void;
 }

package/types/Enums/Modes/OutMode.d.ts

@@ -1,10 +1,7 @@
 export declare const enum OutMode {
     bounce = "bounce",
-    bounceHorizontal = "bounce-horizontal",
-    bounceVertical = "bounce-vertical",
     none = "none",
     out = "out",
     destroy = "destroy",
     split = "split"
 }
-export type OutModeAlt = "bounce-horizontal" | "bounce-vertical";

package/types/Options/Classes/BackgroundMask/BackgroundMaskCover.d.ts

@@ -3,7 +3,8 @@ import type { IOptionLoader } from "../../Interfaces/IOptionLoader.js";
 import { OptionsColor } from "../OptionsColor.js";
 import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
 export declare class BackgroundMaskCover implements IBackgroundMaskCover, IOptionLoader<IBackgroundMaskCover> {
-    color: OptionsColor;
+    color?: OptionsColor;
+    image?: string;
     opacity: number;
     constructor();
     load(data?: RecursivePartial<IBackgroundMaskCover> | undefined): void;

package/types/Options/Classes/Particles/Move/OutModes.d.ts

@@ -1,13 +1,13 @@
-import { OutMode, type OutModeAlt } from "../../../../Enums/Modes/OutMode.js";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader.js";
 import type { IOutModes } from "../../../Interfaces/Particles/Move/IOutModes.js";
+import { OutMode } from "../../../../Enums/Modes/OutMode.js";
 import type { RecursivePartial } from "../../../../Types/RecursivePartial.js";
 export declare class OutModes implements IOutModes, IOptionLoader<IOutModes> {
-    bottom?: OutMode | keyof typeof OutMode | OutModeAlt;
-    default: OutMode | keyof typeof OutMode | OutModeAlt;
-    left?: OutMode | keyof typeof OutMode | OutModeAlt;
-    right?: OutMode | keyof typeof OutMode | OutModeAlt;
-    top?: OutMode | keyof typeof OutMode | OutModeAlt;
+    bottom?: OutMode | keyof typeof OutMode;
+    default: OutMode | keyof typeof OutMode;
+    left?: OutMode | keyof typeof OutMode;
+    right?: OutMode | keyof typeof OutMode;
+    top?: OutMode | keyof typeof OutMode;
     constructor();
     load(data?: RecursivePartial<IOutModes>): void;
 }

package/types/Options/Interfaces/BackgroundMask/IBackgroundMask.d.ts

@@ -1,7 +1,8 @@
 import type { IBackgroundMaskCover } from "./IBackgroundMaskCover.js";
 import type { IColor } from "../../../Core/Interfaces/Colors.js";
+import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
 export interface IBackgroundMask {
     composite: GlobalCompositeOperation;
-    cover: IBackgroundMaskCover | IColor | string;
+    cover: RecursivePartial<IBackgroundMaskCover> | IColor | string;
     enable: boolean;
 }

package/types/Options/Interfaces/BackgroundMask/IBackgroundMaskCover.d.ts

@@ -1,5 +1,6 @@
 import type { IOptionsColor } from "../IOptionsColor.js";
 export interface IBackgroundMaskCover {
-    color: string | IOptionsColor;
+    color?: string | IOptionsColor;
+    image?: string;
     opacity: number;
 }

package/types/Options/Interfaces/Particles/Move/IMove.d.ts

@@ -1,5 +1,4 @@
 import type { MoveDirection, MoveDirectionAlt } from "../../../../Enums/Directions/MoveDirection.js";
-import type { OutMode, OutModeAlt } from "../../../../Enums/Modes/OutMode.js";
 import type { IDistance } from "../../../../Core/Interfaces/IDistance.js";
 import type { IMoveAngle } from "./IMoveAngle.js";
 import type { IMoveAttract } from "./IMoveAttract.js";
@@ -9,6 +8,7 @@ import type { IMovePath } from "./Path/IMovePath.js";
 import type { IMoveTrail } from "./IMoveTrail.js";
 import type { IOutModes } from "./IOutModes.js";
 import type { ISpin } from "./ISpin.js";
+import type { OutMode } from "../../../../Enums/Modes/OutMode.js";
 import type { RangeValue } from "../../../../Types/RangeValue.js";
 export interface IMove {
     angle: number | IMoveAngle;
@@ -20,7 +20,7 @@ export interface IMove {
     drift: RangeValue;
     enable: boolean;
     gravity: IMoveGravity;
-    outModes: IOutModes | OutMode | keyof typeof OutMode | OutModeAlt;
+    outModes: IOutModes | OutMode | keyof typeof OutMode;
     path: IMovePath;
     random: boolean;
     size: boolean;

package/types/Options/Interfaces/Particles/Move/IOutModes.d.ts

@@ -1,8 +1,8 @@
-import type { OutMode, OutModeAlt } from "../../../../Enums/Modes/OutMode.js";
+import type { OutMode } from "../../../../Enums/Modes/OutMode.js";
 export interface IOutModes {
-    bottom?: OutMode | keyof typeof OutMode | OutModeAlt;
-    default: OutMode | keyof typeof OutMode | OutModeAlt;
-    left?: OutMode | keyof typeof OutMode | OutModeAlt;
-    right?: OutMode | keyof typeof OutMode | OutModeAlt;
-    top?: OutMode | keyof typeof OutMode | OutModeAlt;
+    bottom?: OutMode | keyof typeof OutMode;
+    default: OutMode | keyof typeof OutMode;
+    left?: OutMode | keyof typeof OutMode;
+    right?: OutMode | keyof typeof OutMode;
+    top?: OutMode | keyof typeof OutMode;
 }

package/types/Utils/CanvasUtils.d.ts

@@ -11,7 +11,7 @@ export declare function drawLine(context: CanvasRenderingContext2D, begin: ICoor
 export declare function paintBase(context: CanvasRenderingContext2D, dimension: IDimension, baseColor?: string): void;
 export declare function paintImage(context: CanvasRenderingContext2D, dimension: IDimension, image: HTMLImageElement | undefined, opacity: number): void;
 export declare function clear(context: CanvasRenderingContext2D, dimension: IDimension): void;
-export declare function drawParticle(data: IDrawParticleParams): void;
+export declare function drawParticle(data: IDrawParticleParams): Promise<void>;
 interface DrawShapeData {
     container: Container;
     context: CanvasRenderingContext2D;
@@ -27,10 +27,10 @@ interface DrawShapeData {
         d: number;
     };
 }
-export declare function drawEffect(data: DrawShapeData): void;
-export declare function drawShape(data: DrawShapeData): void;
-export declare function drawShapeAfterDraw(data: DrawShapeData): void;
-export declare function drawPlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, delta: IDelta): void;
-export declare function drawParticlePlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;
+export declare function drawEffect(data: DrawShapeData): Promise<void>;
+export declare function drawShape(data: DrawShapeData): Promise<void>;
+export declare function drawShapeAfterDraw(data: DrawShapeData): Promise<void>;
+export declare function drawPlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, delta: IDelta): Promise<void>;
+export declare function drawParticlePlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, particle: Particle, delta: IDelta): Promise<void>;
 export declare function alterHsl(color: IHsl, type: AlterType, value: number): IHsl;
 export {};

package/umd/Core/Canvas.js

@@ -20,6 +20,26 @@
             factor[key] = (factor[key] ?? defaultValue) * newValue;
         }
     }
+    function setStyle(canvas, style, important = false) {
+        if (!style) {
+            return;
+        }
+        const element = canvas;
+        if (!element) {
+            return;
+        }
+        const elementStyle = element.style;
+        if (!elementStyle) {
+            return;
+        }
+        for (const key in style) {
+            const value = style[key];
+            if (!value) {
+                continue;
+            }
+            elementStyle.setProperty(key, value, important ? "important" : "");
+        }
+    }
     class Canvas {
         constructor(container) {
             this.container = container;
@@ -68,14 +88,36 @@
                 }
                 return [fColor, sColor];
             };
-            this._initCover = () => {
-                const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = (0, ColorUtils_js_1.rangeColorToRgb)(color);
-                if (coverRgb) {
-                    const coverColor = {
-                        ...coverRgb,
-                        a: cover.opacity,
-                    };
-                    this._coverColorStyle = (0, ColorUtils_js_1.getStyleFromRgb)(coverColor, coverColor.a);
+            this._initCover = async () => {
+                const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color;
+                if (color) {
+                    const coverRgb = (0, ColorUtils_js_1.rangeColorToRgb)(color);
+                    if (coverRgb) {
+                        const coverColor = {
+                            ...coverRgb,
+                            a: cover.opacity,
+                        };
+                        this._coverColorStyle = (0, ColorUtils_js_1.getStyleFromRgb)(coverColor, coverColor.a);
+                    }
+                }
+                else {
+                    await new Promise((resolve, reject) => {
+                        if (!cover.image) {
+                            return;
+                        }
+                        const img = document.createElement("img");
+                        img.addEventListener("load", () => {
+                            this._coverImage = {
+                                image: img,
+                                opacity: cover.opacity,
+                            };
+                            resolve();
+                        });
+                        img.addEventListener("error", (evt) => {
+                            reject(evt.error);
+                        });
+                        img.src = cover.image;
+                    });
                 }
             };
             this._initStyle = () => {
@@ -160,13 +202,7 @@
                 if (!(element && originalStyle)) {
                     return;
                 }
-                const style = element.style;
-                style.position = originalStyle.position;
-                style.zIndex = originalStyle.zIndex;
-                style.top = originalStyle.top;
-                style.left = originalStyle.left;
-                style.width = originalStyle.width;
-                style.height = originalStyle.height;
+                setStyle(element, originalStyle);
             };
             this._safeMutationObserver = (callback) => {
                 if (!this._mutationObserver) {
@@ -179,13 +215,15 @@
                 if (!element) {
                     return;
                 }
-                const priority = "important", style = element.style, radix = 10;
-                style.setProperty("position", "fixed", priority);
-                style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(radix), priority);
-                style.setProperty("top", "0", priority);
-                style.setProperty("left", "0", priority);
-                style.setProperty("width", "100%", priority);
-                style.setProperty("height", "100%", priority);
+                const radix = 10;
+                setStyle(element, {
+                    position: "fixed",
+                    zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),
+                    top: "0",
+                    left: "0",
+                    width: "100%",
+                    height: "100%",
+                }, true);
             };
             this.size = {
                 height: 0,
@@ -241,7 +279,14 @@
             }
             return cb(ctx);
         }
-        drawParticle(particle, delta) {
+        drawAsync(cb) {
+            const ctx = this._context;
+            if (!ctx) {
+                return Promise.resolve(undefined);
+            }
+            return cb(ctx);
+        }
+        async drawParticle(particle, delta) {
             if (particle.spawning || particle.destroyed) {
                 return;
             }
@@ -260,13 +305,13 @@
             if (!fColor && !sColor) {
                 return;
             }
-            this.draw((ctx) => {
+            await this.drawAsync(async (ctx) => {
                 const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactorOffset = 1, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, defaultOpacity = 1, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
                     fill: fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
                 };
                 colorStyles.stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
                 this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
-                (0, CanvasUtils_js_1.drawParticle)({
+                await (0, CanvasUtils_js_1.drawParticle)({
                     container,
                     context: ctx,
                     particle,
@@ -282,11 +327,11 @@
                 this._applyPostDrawUpdaters(particle);
             });
         }
-        drawParticlePlugin(plugin, particle, delta) {
-            this.draw((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
+        async drawParticlePlugin(plugin, particle, delta) {
+            await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
         }
-        drawPlugin(plugin, delta) {
-            this.draw((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
+        async drawPlugin(plugin, delta) {
+            await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
         }
         async init() {
             this._safeMutationObserver((obs) => obs.disconnect());
@@ -299,7 +344,7 @@
             });
             this.resize();
             this._initStyle();
-            this._initCover();
+            await this._initCover();
             try {
                 await this._initTrail();
             }
@@ -389,7 +434,15 @@
             this.draw((ctx) => {
                 if (options.backgroundMask.enable && options.backgroundMask.cover) {
                     (0, CanvasUtils_js_1.clear)(ctx, this.size);
-                    this._paintBase(this._coverColorStyle);
+                    if (this._coverImage) {
+                        this._paintImage(this._coverImage.image, this._coverImage.opacity);
+                    }
+                    else if (this._coverColorStyle) {
+                        this._paintBase(this._coverColorStyle);
+                    }
+                    else {
+                        this._paintBase();
+                    }
                 }
                 else {
                     this._paintBase();
@@ -431,7 +484,7 @@
                 return;
             }
             const container = this.container, needsRefresh = container.updateActualOptions();
-            container.particles.setDensity();
+            await container.particles.setDensity();
             this._applyResizePlugins();
             if (needsRefresh) {
                 await container.refresh();

package/umd/Core/Container.js

@@ -73,7 +73,7 @@
                         this.destroy();
                         return;
                     }
-                    if (this.getAnimationStatus()) {
+                    if (this.animationStatus) {
                         this.draw(false);
                     }
                 }
@@ -116,6 +116,9 @@
             this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)((entries) => this._intersectionManager(entries));
             this._engine.dispatchEvent("containerBuilt", { container: this });
         }
+        get animationStatus() {
+            return !this._paused && !this.pageHidden && guardCheck(this);
+        }
         get options() {
             return this._options;
         }
@@ -268,9 +271,6 @@
             }
             (0, Utils_js_1.getLogger)().error(`${Constants_js_1.errorPrefix} - Export plugin with type ${type} not found`);
         }
-        getAnimationStatus() {
-            return !this._paused && !this.pageHidden && guardCheck(this);
-        }
         handleClickMode(mode) {
             if (!guardCheck(this)) {
                 return;
@@ -298,9 +298,10 @@
                     this.shapeDrawers.set(type, drawer);
                 }
             }
+            await this.particles.initPlugins();
             this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
             this.actualOptions = loadContainerOptions(this._engine, this, this._options);
-            const availablePlugins = this._engine.getAvailablePlugins(this);
+            const availablePlugins = await this._engine.getAvailablePlugins(this);
             for (const [id, plugin] of availablePlugins) {
                 this.plugins.set(id, plugin);
             }
@@ -326,8 +327,8 @@
                 await plugin.init?.();
             }
             this._engine.dispatchEvent("containerInit", { container: this });
-            this.particles.init();
-            this.particles.setDensity();
+            await this.particles.init();
+            await this.particles.setDensity();
             for (const [, plugin] of this.plugins) {
                 plugin.particlesSetup?.();
             }

package/umd/Core/Engine.js

@@ -1,24 +1,47 @@
+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;
+};
 (function (factory) {
     if (typeof module === "object" && typeof module.exports === "object") {
         var v = factory(require, exports);
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Constants.js", "../Utils/Utils.js", "./Container.js", "../Utils/EventDispatcher.js", "../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "./Utils/Constants.js", "../Utils/Utils.js", "../Utils/EventDispatcher.js", "../Utils/NumberUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Engine = void 0;
     const Constants_js_1 = require("./Utils/Constants.js");
     const Utils_js_1 = require("../Utils/Utils.js");
-    const Container_js_1 = require("./Container.js");
     const EventDispatcher_js_1 = require("../Utils/EventDispatcher.js");
     const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
-    function getItemsFromInitializer(container, map, initializers, force = false) {
+    async function getItemsFromInitializer(container, map, initializers, force = false) {
         let res = map.get(container);
         if (!res || force) {
-            res = [...initializers.values()].map((t) => t(container));
+            res = await Promise.all([...initializers.values()].map((t) => t(container)));
             map.set(container, res);
         }
         return res;
@@ -30,7 +53,7 @@
         }
         const response = await fetch(url);
         if (response.ok) {
-            return response.json();
+            return (await response.json());
         }
         (0, Utils_js_1.getLogger)().error(`${Constants_js_1.errorPrefix} ${response.status} while retrieving config file`);
         return data.fallback;
@@ -63,7 +86,7 @@
             return res;
         }
         get version() {
-            return "3.1.0";
+            return "3.2.0";
         }
         addConfig(config) {
             const key = config.key ?? config.name ?? "default";
@@ -139,11 +162,11 @@
             }
             return item;
         }
-        getAvailablePlugins(container) {
+        async getAvailablePlugins(container) {
             const res = new Map();
             for (const plugin of this.plugins) {
                 if (plugin.needsPlugin(container.actualOptions)) {
-                    res.set(plugin.id, plugin.getPlugin(container));
+                    res.set(plugin.id, await plugin.getPlugin(container));
                 }
             }
             return res;
@@ -151,11 +174,11 @@
         getEffectDrawer(type) {
             return this.effectDrawers.get(type);
         }
-        getInteractors(container, force = false) {
-            return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
+        async getInteractors(container, force = false) {
+            return await getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
         }
-        getMovers(container, force = false) {
-            return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
+        async getMovers(container, force = false) {
+            return await getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
         }
         getPathGenerator(type) {
             return this.pathGenerators.get(type);
@@ -175,8 +198,8 @@
         getSupportedShapes() {
             return this.shapeDrawers.keys();
         }
-        getUpdaters(container, force = false) {
-            return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
+        async getUpdaters(container, force = false) {
+            return await getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
         }
         init() {
             if (this._initialized) {
@@ -225,7 +248,7 @@
             if (!canvasEl.style.height) {
                 canvasEl.style.height = "100%";
             }
-            const newItem = new Container_js_1.Container(this, id, currentOptions);
+            const { Container } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Container.js"))) : new Promise((resolve_1, reject_1) => { require(["./Container.js"], resolve_1, reject_1); }).then(__importStar)), newItem = new Container(this, id, currentOptions);
             if (oldIndex >= minIndex) {
                 const deleteCount = 0;
                 dom.splice(oldIndex, deleteCount, newItem);
@@ -255,7 +278,7 @@
             if (!refresh) {
                 return;
             }
-            await Promise.allSettled(this.dom().map((t) => t.refresh()));
+            await Promise.all(this.dom().map((t) => t.refresh()));
         }
         removeEventListener(type, listener) {
             this._eventDispatcher.removeEventListener(type, listener);

package/umd/Core/Particle.js

@@ -53,7 +53,7 @@
         }
     }
     class Particle {
-        constructor(engine, id, container, position, overrideOptions, group) {
+        constructor(engine, container) {
             this.container = container;
             this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
                 for (const [, plugin] of container.plugins) {
@@ -68,7 +68,7 @@
                 }), pos = Vector3d_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
                     fixOutMode({
                         outMode,
-                        checkModes: ["bounce", "bounce-horizontal"],
+                        checkModes: ["bounce"],
                         coord: pos.x,
                         maxCoord: container.canvas.size.width,
                         setCb: (value) => (pos.x += value),
@@ -77,7 +77,7 @@
                 }, fixVertical = (outMode) => {
                     fixOutMode({
                         outMode,
-                        checkModes: ["bounce", "bounce-vertical"],
+                        checkModes: ["bounce"],
                         coord: pos.y,
                         maxCoord: container.canvas.size.height,
                         setCb: (value) => (pos.y += value),
@@ -164,7 +164,6 @@
                 this.offset = Vector_js_1.Vector.origin;
             };
             this._engine = engine;
-            this.init(id, position, overrideOptions, group);
         }
         destroy(override) {
             if (this.unbreakable || this.destroyed) {
@@ -189,12 +188,12 @@
                 },
             });
         }
-        draw(delta) {
+        async draw(delta) {
             const container = this.container, canvas = container.canvas;
             for (const [, plugin] of container.plugins) {
-                canvas.drawParticlePlugin(plugin, this, delta);
+                await canvas.drawParticlePlugin(plugin, this, delta);
             }
-            canvas.drawParticle(this, delta);
+            await canvas.drawParticle(this, delta);
         }
         getFillColor() {
             return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
@@ -215,7 +214,7 @@
         getStrokeColor() {
             return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.strokeColor));
         }
-        init(id, position, overrideOptions, group) {
+        async init(id, position, overrideOptions, group) {
             const container = this.container, engine = this._engine;
             this.id = id;
             this.group = group;
@@ -279,7 +278,7 @@
             if (pathOptions.generator) {
                 this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
                 if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
-                    this.pathGenerator.init(container);
+                    await this.pathGenerator.init(container);
                 }
             }
             container.retina.initParticle(this);
@@ -308,7 +307,7 @@
                 }
             }
             if (effectDrawer?.loadEffect) {
-                effectDrawer.loadEffect(this);
+                await effectDrawer.loadEffect(this);
             }
             let shapeDrawer = container.shapeDrawers.get(this.shape);
             if (!shapeDrawer) {
@@ -318,7 +317,7 @@
                 }
             }
             if (shapeDrawer?.loadShape) {
-                shapeDrawer.loadShape(this);
+                await shapeDrawer.loadShape(this);
             }
             const sideCountFunc = shapeDrawer?.getSidesCount;
             if (sideCountFunc) {
@@ -327,13 +326,13 @@
             this.spawning = false;
             this.shadowColor = (0, ColorUtils_js_1.rangeColorToRgb)(this.options.shadow.color);
             for (const updater of particles.updaters) {
-                updater.init(this);
+                await updater.init(this);
             }
             for (const mover of particles.movers) {
-                mover.init?.(this);
+                await mover.init?.(this);
             }
-            effectDrawer?.particleInit?.(container, this);
-            shapeDrawer?.particleInit?.(container, this);
+            await effectDrawer?.particleInit?.(container, this);
+            await shapeDrawer?.particleInit?.(container, this);
             for (const [, plugin] of container.plugins) {
                 plugin.particleCreated?.(this);
             }