@tsparticles/engine 3.1.0 → 3.2.0

package/umd/Core/Particles.js

@@ -1,18 +1,41 @@
+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/Utils.js", "./Utils/InteractionManager.js", "./Particle.js", "./Utils/Point.js", "./Utils/QuadTree.js", "./Utils/Rectangle.js", "./Utils/Constants.js"], factory);
+        define(["require", "exports", "../Utils/Utils.js", "./Utils/InteractionManager.js", "./Utils/Point.js", "./Utils/QuadTree.js", "./Utils/Rectangle.js", "./Utils/Constants.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Particles = void 0;
     const Utils_js_1 = require("../Utils/Utils.js");
     const InteractionManager_js_1 = require("./Utils/InteractionManager.js");
-    const Particle_js_1 = require("./Particle.js");
     const Point_js_1 = require("./Utils/Point.js");
     const QuadTree_js_1 = require("./Utils/QuadTree.js");
     const Rectangle_js_1 = require("./Utils/Rectangle.js");
@@ -29,7 +52,7 @@
                     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) {
@@ -48,7 +71,7 @@
                     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);
@@ -62,15 +85,14 @@
                 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_js_1.Particle(this._engine, this._nextId, this._container, position, overrideOptions, group);
+                    if (!particle) {
+                        const { Particle } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Particle.js"))) : new Promise((resolve_1, reject_1) => { require(["./Particle.js"], resolve_1, reject_1); }).then(__importStar));
+                        particle = new Particle(this._engine, this._container);
                     }
+                    await particle.init(this._nextId, position, overrideOptions, group);
                     let canAdd = true;
                     if (initializer) {
                         canAdd = initializer(particle);
@@ -122,21 +144,22 @@
             this._needsSort = false;
             this._lastZIndex = 0;
             this._interactionManager = new InteractionManager_js_1.InteractionManager(engine, container);
+            this._pluginsInitialized = false;
             const canvasSize = container.canvas.size;
             this.quadTree = new QuadTree_js_1.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 ? (0, Utils_js_1.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);
+                await this.addParticle(particle.position ? (0, Utils_js_1.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") {
@@ -151,11 +174,12 @@
                     }
                 }
             }
-            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 = [];
@@ -168,10 +192,10 @@
             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) {
@@ -186,13 +210,12 @@
         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();
@@ -201,32 +224,40 @@
                     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) {
@@ -248,12 +279,12 @@
             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;
@@ -289,7 +320,7 @@
                 }
                 for (const mover of this.movers) {
                     if (mover.isEnabled(particle)) {
-                        mover.move(particle, delta);
+                        await mover.move(particle, delta);
                     }
                 }
                 if (particle.destroyed) {
@@ -315,7 +346,7 @@
             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/umd/Core/Utils/EventListeners.js

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

package/umd/Core/Utils/InteractionManager.js

@@ -14,7 +14,7 @@
         constructor(engine, container) {
             this.container = container;
             this._engine = engine;
-            this._interactors = engine.getInteractors(this.container, true);
+            this._interactors = [];
             this._externalInteractors = [];
             this._particleInteractors = [];
         }
@@ -30,7 +30,8 @@
                 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/umd/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -27,7 +27,7 @@
             }
             if (data.cover !== undefined) {
                 const cover = data.cover, color = ((0, Utils_js_1.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/umd/Options/Classes/BackgroundMask/BackgroundMaskCover.js

@@ -13,8 +13,6 @@
     const OptionsColor_js_1 = require("../OptionsColor.js");
     class BackgroundMaskCover {
         constructor() {
-            this.color = new OptionsColor_js_1.OptionsColor();
-            this.color.value = "#fff";
             this.opacity = 1;
         }
         load(data) {
@@ -24,6 +22,9 @@
             if (data.color !== undefined) {
                 this.color = OptionsColor_js_1.OptionsColor.create(this.color, data.color);
             }
+            if (data.image !== undefined) {
+                this.image = data.image;
+            }
             if (data.opacity !== undefined) {
                 this.opacity = data.opacity;
             }

package/umd/Utils/CanvasUtils.js

@@ -37,7 +37,7 @@
         context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
     }
     exports.clear = clear;
-    function drawParticle(data) {
+    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),
@@ -76,14 +76,14 @@
             transformData,
             strokeWidth,
         };
-        drawShape(drawData);
-        drawShapeAfterDraw(drawData);
-        drawEffect(drawData);
+        await drawShape(drawData);
+        await drawShapeAfterDraw(drawData);
+        await drawEffect(drawData);
         context.globalCompositeOperation = "source-over";
         context.resetTransform();
     }
     exports.drawParticle = drawParticle;
-    function drawEffect(data) {
+    async function drawEffect(data) {
         const { container, context, particle, radius, opacity, delta, transformData } = data;
         if (!particle.effect) {
             return;
@@ -92,7 +92,7 @@
         if (!drawer) {
             return;
         }
-        drawer.draw({
+        await drawer.draw({
             context,
             particle,
             radius,
@@ -103,7 +103,7 @@
         });
     }
     exports.drawEffect = drawEffect;
-    function drawShape(data) {
+    async function drawShape(data) {
         const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
         if (!particle.shape) {
             return;
@@ -113,7 +113,7 @@
             return;
         }
         context.beginPath();
-        drawer.draw({
+        await drawer.draw({
             context,
             particle,
             radius,
@@ -133,7 +133,7 @@
         }
     }
     exports.drawShape = drawShape;
-    function drawShapeAfterDraw(data) {
+    async function drawShapeAfterDraw(data) {
         const { container, context, particle, radius, opacity, delta, transformData } = data;
         if (!particle.shape) {
             return;
@@ -142,7 +142,7 @@
         if (!drawer?.afterDraw) {
             return;
         }
-        drawer.afterDraw({
+        await drawer.afterDraw({
             context,
             particle,
             radius,
@@ -153,18 +153,18 @@
         });
     }
     exports.drawShapeAfterDraw = drawShapeAfterDraw;
-    function drawPlugin(context, plugin, delta) {
+    async function drawPlugin(context, plugin, delta) {
         if (!plugin.draw) {
             return;
         }
-        plugin.draw(context, delta);
+        await plugin.draw(context, delta);
     }
     exports.drawPlugin = drawPlugin;
-    function drawParticlePlugin(context, plugin, particle, delta) {
+    async function drawParticlePlugin(context, plugin, particle, delta) {
         if (!plugin.drawParticle) {
             return;
         }
-        plugin.drawParticle(context, particle, delta);
+        await plugin.drawParticle(context, particle, delta);
     }
     exports.drawParticlePlugin = drawParticlePlugin;
     function alterHsl(color, type, value) {