@tsparticles/engine 3.1.0 → 3.2.0

package/esm/Core/Engine.js

@@ -1,12 +1,11 @@
 import { errorPrefix, generatedAttribute } from "./Utils/Constants.js";
 import { executeOnSingleOrMultiple, getLogger, itemFromSingleOrMultiple } from "../Utils/Utils.js";
-import { Container } from "./Container.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
 import { getRandom } from "../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;
@@ -18,7 +17,7 @@ async function getDataFromUrl(data) {
     }
     const response = await fetch(url);
     if (response.ok) {
-        return response.json();
+        return (await response.json());
     }
     getLogger().error(`${errorPrefix} ${response.status} while retrieving config file`);
     return data.fallback;
@@ -51,7 +50,7 @@ export class Engine {
         return res;
     }
     get version() {
-        return "3.1.0";
+        return "3.2.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";
@@ -127,11 +126,11 @@ export class Engine {
         }
         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;
@@ -139,11 +138,11 @@ export class Engine {
     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);
@@ -163,8 +162,8 @@ export class Engine {
     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) {
@@ -213,7 +212,7 @@ export class Engine {
         if (!canvasEl.style.height) {
             canvasEl.style.height = "100%";
         }
-        const newItem = new Container(this, id, currentOptions);
+        const { Container } = await import("./Container.js"), newItem = new Container(this, id, currentOptions);
         if (oldIndex >= minIndex) {
             const deleteCount = 0;
             dom.splice(oldIndex, deleteCount, newItem);
@@ -243,7 +242,7 @@ export class Engine {
         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/esm/Core/Particle.js

@@ -41,7 +41,7 @@ function fixOutMode(data) {
     }
 }
 export 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) {
@@ -56,7 +56,7 @@ export class Particle {
             }), pos = 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),
@@ -65,7 +65,7 @@ export class Particle {
             }, fixVertical = (outMode) => {
                 fixOutMode({
                     outMode,
-                    checkModes: ["bounce", "bounce-vertical"],
+                    checkModes: ["bounce"],
                     coord: pos.y,
                     maxCoord: container.canvas.size.height,
                     setCb: (value) => (pos.y += value),
@@ -152,7 +152,6 @@ export class Particle {
             this.offset = Vector.origin;
         };
         this._engine = engine;
-        this.init(id, position, overrideOptions, group);
     }
     destroy(override) {
         if (this.unbreakable || this.destroyed) {
@@ -177,12 +176,12 @@ export class Particle {
             },
         });
     }
-    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 ?? getHslFromAnimation(this.color));
@@ -203,7 +202,7 @@ export class Particle {
     getStrokeColor() {
         return this._getRollColor(this.bubble.color ?? 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;
@@ -267,7 +266,7 @@ export class Particle {
         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);
@@ -296,7 +295,7 @@ export class Particle {
             }
         }
         if (effectDrawer?.loadEffect) {
-            effectDrawer.loadEffect(this);
+            await effectDrawer.loadEffect(this);
         }
         let shapeDrawer = container.shapeDrawers.get(this.shape);
         if (!shapeDrawer) {
@@ -306,7 +305,7 @@ export class Particle {
             }
         }
         if (shapeDrawer?.loadShape) {
-            shapeDrawer.loadShape(this);
+            await shapeDrawer.loadShape(this);
         }
         const sideCountFunc = shapeDrawer?.getSidesCount;
         if (sideCountFunc) {
@@ -315,13 +314,13 @@ export class Particle {
         this.spawning = false;
         this.shadowColor = 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);
         }

package/esm/Core/Particles.js

@@ -1,6 +1,5 @@
 import { getLogger, getPosition } from "../Utils/Utils.js";
 import { InteractionManager } from "./Utils/InteractionManager.js";
-import { Particle } from "./Particle.js";
 import { Point } from "./Utils/Point.js";
 import { QuadTree } from "./Utils/QuadTree.js";
 import { Rectangle } from "./Utils/Rectangle.js";
@@ -17,7 +16,7 @@ export class Particles {
                 this._pool.push(particle);
             }
         };
-        this._applyDensity = (options, manualCount, group) => {
+        this._applyDensity = async (options, manualCount, group) => {
             const numberOptions = options.number;
             if (!options.number.density?.enable) {
                 if (group === undefined) {
@@ -36,7 +35,7 @@ export class Particles {
                 this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
             }
             if (particlesCount < particlesNumber) {
-                this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
+                await this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
             }
             else if (particlesCount > particlesNumber) {
                 this.removeQuantity(particlesCount - particlesNumber, group);
@@ -50,15 +49,14 @@ export class Particles {
             const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
             return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
         };
-        this._pushParticle = (position, overrideOptions, group, initializer) => {
+        this._pushParticle = async (position, overrideOptions, group, initializer) => {
             try {
                 let particle = this._pool.pop();
-                if (particle) {
-                    particle.init(this._nextId, position, overrideOptions, group);
-                }
-                else {
-                    particle = new Particle(this._engine, this._nextId, this._container, position, overrideOptions, group);
+                if (!particle) {
+                    const { Particle } = await import("./Particle.js");
+                    particle = new Particle(this._engine, this._container);
                 }
+                await particle.init(this._nextId, position, overrideOptions, group);
                 let canAdd = true;
                 if (initializer) {
                     canAdd = initializer(particle);
@@ -110,21 +108,22 @@ export class Particles {
         this._needsSort = false;
         this._lastZIndex = 0;
         this._interactionManager = new InteractionManager(engine, container);
+        this._pluginsInitialized = false;
         const canvasSize = container.canvas.size;
         this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
-        this.movers = this._engine.getMovers(container, true);
-        this.updaters = this._engine.getUpdaters(container, true);
+        this.movers = [];
+        this.updaters = [];
     }
     get count() {
         return this._array.length;
     }
-    addManualParticles() {
+    async addManualParticles() {
         const container = this._container, options = container.actualOptions;
         for (const particle of options.manualParticles) {
-            this.addParticle(particle.position ? getPosition(particle.position, container.canvas.size) : undefined, particle.options);
+            await this.addParticle(particle.position ? getPosition(particle.position, container.canvas.size) : undefined, particle.options);
         }
     }
-    addParticle(position, overrideOptions, group, initializer) {
+    async addParticle(position, overrideOptions, group, initializer) {
         const limitOptions = this._container.actualOptions.particles.number.limit, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
         if (limit > minLimit) {
             if (limitOptions.mode === "delete") {
@@ -139,11 +138,12 @@ export class Particles {
                 }
             }
         }
-        return this._pushParticle(position, overrideOptions, group, initializer);
+        return await this._pushParticle(position, overrideOptions, group, initializer);
     }
     clear() {
         this._array = [];
         this._zArray = [];
+        this._pluginsInitialized = false;
     }
     destroy() {
         this._array = [];
@@ -156,10 +156,10 @@ export class Particles {
         canvas.clear();
         await this.update(delta);
         for (const [, plugin] of container.plugins) {
-            canvas.drawPlugin(plugin, delta);
+            await canvas.drawPlugin(plugin, delta);
         }
         for (const p of this._zArray) {
-            p.draw(delta);
+            await p.draw(delta);
         }
     }
     filter(condition) {
@@ -174,13 +174,12 @@ export class Particles {
     handleClickMode(mode) {
         this._interactionManager.handleClickMode(mode);
     }
-    init() {
+    async init() {
         const container = this._container, options = container.actualOptions;
         this._lastZIndex = 0;
         this._needsSort = false;
+        await this.initPlugins();
         let handled = false;
-        this.updaters = this._engine.getUpdaters(container, true);
-        this._interactionManager.init();
         for (const [, plugin] of container.plugins) {
             if (plugin.particlesInitialization !== undefined) {
                 handled = plugin.particlesInitialization();
@@ -189,32 +188,40 @@ export class Particles {
                 break;
             }
         }
-        this._interactionManager.init();
-        for (const [, pathGenerator] of container.pathGenerators) {
-            pathGenerator.init(container);
-        }
-        this.addManualParticles();
+        await this.addManualParticles();
         if (!handled) {
             const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
                 const groupOptions = groups[group];
                 for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
-                    this.addParticle(undefined, groupOptions, group);
+                    await this.addParticle(undefined, groupOptions, group);
                 }
             }
             for (let i = this.count; i < particlesOptions.number.value; i++) {
-                this.addParticle();
+                await this.addParticle();
             }
         }
     }
-    push(nb, mouse, overrideOptions, group) {
+    async initPlugins() {
+        if (this._pluginsInitialized) {
+            return;
+        }
+        const container = this._container;
+        this.movers = await this._engine.getMovers(container, true);
+        this.updaters = await this._engine.getUpdaters(container, true);
+        await this._interactionManager.init();
+        for (const [, pathGenerator] of container.pathGenerators) {
+            await pathGenerator.init(container);
+        }
+    }
+    async push(nb, mouse, overrideOptions, group) {
         for (let i = 0; i < nb; i++) {
-            this.addParticle(mouse?.position, overrideOptions, group);
+            await this.addParticle(mouse?.position, overrideOptions, group);
         }
     }
     async redraw() {
         this.clear();
-        this.init();
+        await this.init();
         await this.draw({ value: 0, factor: 0 });
     }
     remove(particle, group, override) {
@@ -236,12 +243,12 @@ export class Particles {
         const defaultIndex = 0;
         this.removeAt(defaultIndex, quantity, group);
     }
-    setDensity() {
+    async setDensity() {
         const options = this._container.actualOptions, groups = options.particles.groups, manualCount = 0;
         for (const group in groups) {
-            this._applyDensity(groups[group], manualCount, group);
+            await this._applyDensity(groups[group], manualCount, group);
         }
-        this._applyDensity(options.particles, options.manualParticles.length);
+        await this._applyDensity(options.particles, options.manualParticles.length);
     }
     setLastZIndex(zIndex) {
         this._lastZIndex = zIndex;
@@ -277,7 +284,7 @@ export class Particles {
             }
             for (const mover of this.movers) {
                 if (mover.isEnabled(particle)) {
-                    mover.move(particle, delta);
+                    await mover.move(particle, delta);
                 }
             }
             if (particle.destroyed) {
@@ -303,7 +310,7 @@ export class Particles {
         await this._interactionManager.externalInteract(delta);
         for (const particle of this._array) {
             for (const updater of this.updaters) {
-                updater.update(particle, delta);
+                await updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
                 await this._interactionManager.particlesInteract(particle, delta);

package/esm/Core/Utils/EventListeners.js

@@ -55,7 +55,7 @@ export class EventListeners {
             }
             else {
                 container.pageHidden = false;
-                if (container.getAnimationStatus()) {
+                if (container.animationStatus) {
                     container.play(true);
                 }
                 else {

package/esm/Core/Utils/InteractionManager.js

@@ -2,7 +2,7 @@ export class InteractionManager {
     constructor(engine, container) {
         this.container = container;
         this._engine = engine;
-        this._interactors = engine.getInteractors(this.container, true);
+        this._interactors = [];
         this._externalInteractors = [];
         this._particleInteractors = [];
     }
@@ -18,7 +18,8 @@ export class InteractionManager {
             interactor.handleClickMode?.(mode);
         }
     }
-    init() {
+    async init() {
+        this._interactors = await this._engine.getInteractors(this.container, true);
         this._externalInteractors = [];
         this._particleInteractors = [];
         for (const interactor of this._interactors) {

package/esm/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -15,7 +15,7 @@ export class BackgroundMask {
         }
         if (data.cover !== undefined) {
             const cover = data.cover, color = (isString(data.cover) ? { color: data.cover } : data.cover);
-            this.cover.load(cover.color !== undefined ? cover : { color: color });
+            this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;

package/esm/Options/Classes/BackgroundMask/BackgroundMaskCover.js

@@ -1,8 +1,6 @@
 import { OptionsColor } from "../OptionsColor.js";
 export class BackgroundMaskCover {
     constructor() {
-        this.color = new OptionsColor();
-        this.color.value = "#fff";
         this.opacity = 1;
     }
     load(data) {
@@ -12,6 +10,9 @@ export class BackgroundMaskCover {
         if (data.color !== undefined) {
             this.color = OptionsColor.create(this.color, data.color);
         }
+        if (data.image !== undefined) {
+            this.image = data.image;
+        }
         if (data.opacity !== undefined) {
             this.opacity = data.opacity;
         }

package/esm/Utils/CanvasUtils.js

@@ -21,7 +21,7 @@ export function paintImage(context, dimension, image, opacity) {
 export function clear(context, dimension) {
     context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
 }
-export function drawParticle(data) {
+export async function drawParticle(data) {
     const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
@@ -60,13 +60,13 @@ export function drawParticle(data) {
         transformData,
         strokeWidth,
     };
-    drawShape(drawData);
-    drawShapeAfterDraw(drawData);
-    drawEffect(drawData);
+    await drawShape(drawData);
+    await drawShapeAfterDraw(drawData);
+    await drawEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.resetTransform();
 }
-export function drawEffect(data) {
+export async function drawEffect(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
@@ -75,7 +75,7 @@ export function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -85,7 +85,7 @@ export function drawEffect(data) {
         transformData: { ...transformData },
     });
 }
-export function drawShape(data) {
+export async function drawShape(data) {
     const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
     if (!particle.shape) {
         return;
@@ -95,7 +95,7 @@ export function drawShape(data) {
         return;
     }
     context.beginPath();
-    drawer.draw({
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -114,7 +114,7 @@ export function drawShape(data) {
         context.fill();
     }
 }
-export function drawShapeAfterDraw(data) {
+export async function drawShapeAfterDraw(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
@@ -123,7 +123,7 @@ export function drawShapeAfterDraw(data) {
     if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw({
+    await drawer.afterDraw({
         context,
         particle,
         radius,
@@ -133,17 +133,17 @@ export function drawShapeAfterDraw(data) {
         transformData: { ...transformData },
     });
 }
-export function drawPlugin(context, plugin, delta) {
+export async function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
     }
-    plugin.draw(context, delta);
+    await plugin.draw(context, delta);
 }
-export function drawParticlePlugin(context, plugin, particle, delta) {
+export async function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;
     }
-    plugin.drawParticle(context, particle, delta);
+    await plugin.drawParticle(context, particle, delta);
 }
 export function alterHsl(color, type, value) {
     const lFactor = 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {