@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.1

package/umd/Core/{Particles.js → ParticlesManager.js}

@@ -4,112 +4,41 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Constants.js", "../Enums/Types/EventType.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/Point.js", "./Utils/QuadTree.js", "./Utils/Ranges.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "./Utils/Constants.js", "../Enums/Types/EventType.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/SpatialHashGrid.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Particles = void 0;
+    exports.ParticlesManager = void 0;
     const Constants_js_1 = require("./Utils/Constants.js");
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const LimitMode_js_1 = require("../Enums/Modes/LimitMode.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 Ranges_js_1 = require("./Utils/Ranges.js");
+    const SpatialHashGrid_js_1 = require("./Utils/SpatialHashGrid.js");
     const LogUtils_js_1 = require("../Utils/LogUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-    const qTreeRectangle = (canvasSize) => {
-        const { height, width } = canvasSize;
-        return new Ranges_js_1.Rectangle(Constants_js_1.posOffset * width, Constants_js_1.posOffset * height, Constants_js_1.sizeFactor * width, Constants_js_1.sizeFactor * height);
-    };
-    class Particles {
-        constructor(engine, container) {
-            this._addToPool = (...particles) => {
-                this._pool.push(...particles);
-            };
-            this._applyDensity = (options, pluginsCount, group, groupOptions) => {
-                const numberOptions = options.number;
-                if (!numberOptions.density.enable) {
-                    if (group === undefined) {
-                        this._limit = numberOptions.limit.value;
-                    }
-                    else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
-                        this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
-                    }
-                    return;
-                }
-                const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > Constants_js_1.minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
-                if (group === undefined) {
-                    this._limit = numberOptions.limit.value * densityFactor;
-                }
-                else {
-                    this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
-                }
-                if (particlesCount < particlesNumber) {
-                    this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
-                }
-                else if (particlesCount > particlesNumber) {
-                    this.removeQuantity(particlesCount - particlesNumber, group);
-                }
-            };
-            this._initDensityFactor = densityOptions => {
-                const container = this._container;
-                if (!container.canvas.element || !densityOptions.enable) {
-                    return Constants_js_1.defaultDensityFactor;
-                }
-                const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-                return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** Constants_js_1.squareExp);
-            };
-            this._pushParticle = (position, overrideOptions, group, initializer) => {
-                try {
-                    const particle = this._pool.pop() ?? new Particle_js_1.Particle(this._engine, this._container);
-                    particle.init(this._nextId, position, overrideOptions, group);
-                    let canAdd = true;
-                    if (initializer) {
-                        canAdd = initializer(particle);
-                    }
-                    if (!canAdd) {
-                        return;
-                    }
-                    this._array.push(particle);
-                    this._zArray.push(particle);
-                    this._nextId++;
-                    this._engine.dispatchEvent(EventType_js_1.EventType.particleAdded, {
-                        container: this._container,
-                        data: {
-                            particle,
-                        },
-                    });
-                    return particle;
-                }
-                catch (e) {
-                    (0, LogUtils_js_1.getLogger)().warning(`error adding particle: ${e}`);
-                }
-                return undefined;
-            };
-            this._removeParticle = (index, group, override) => {
-                const particle = this._array[index];
-                if (!particle) {
-                    return false;
-                }
-                if (particle.group !== group) {
-                    return false;
-                }
-                const zIdx = this._zArray.indexOf(particle);
-                this._array.splice(index, Constants_js_1.deleteCount);
-                this._zArray.splice(zIdx, Constants_js_1.deleteCount);
-                particle.destroy(override);
-                this._engine.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
-                    container: this._container,
-                    data: {
-                        particle,
-                    },
-                });
-                this._addToPool(particle);
-                return true;
-            };
-            this._engine = engine;
+    class ParticlesManager {
+        checkParticlePositionPlugins;
+        grid;
+        _array;
+        _container;
+        _groupLimits;
+        _limit;
+        _maxZIndex;
+        _minZIndex;
+        _needsSort;
+        _nextId;
+        _particleResetPlugins;
+        _particleUpdatePlugins;
+        _pluginManager;
+        _pool;
+        _postParticleUpdatePlugins;
+        _postUpdatePlugins;
+        _resizeFactor;
+        _updatePlugins;
+        _zArray;
+        constructor(pluginManager, container) {
+            this._pluginManager = pluginManager;
             this._container = container;
             this._nextId = 0;
             this._array = [];
@@ -118,12 +47,15 @@
             this._limit = 0;
             this._groupLimits = new Map();
             this._needsSort = false;
-            this._lastZIndex = 0;
-            this._pluginsInitialized = false;
-            const canvasSize = container.canvas.size;
-            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), Constants_js_1.qTreeCapacity);
-            this.movers = [];
-            this.updaters = [];
+            this._minZIndex = 0;
+            this._maxZIndex = 0;
+            this.grid = new SpatialHashGrid_js_1.SpatialHashGrid(Constants_js_1.spatialHashGridCellSize);
+            this.checkParticlePositionPlugins = [];
+            this._particleResetPlugins = [];
+            this._particleUpdatePlugins = [];
+            this._postUpdatePlugins = [];
+            this._postParticleUpdatePlugins = [];
+            this._updatePlugins = [];
         }
         get count() {
             return this._array.length;
@@ -144,20 +76,48 @@
                             return;
                         }
                         break;
+                    default:
+                        break;
                 }
             }
-            return this._pushParticle(position, overrideOptions, group, initializer);
+            try {
+                const particle = this._pool.pop() ?? new Particle_js_1.Particle(this._pluginManager, this._container);
+                particle.init(this._nextId, position, overrideOptions, group);
+                let canAdd = true;
+                if (initializer) {
+                    canAdd = initializer(particle);
+                }
+                if (!canAdd) {
+                    this._pool.push(particle);
+                    return;
+                }
+                this._array.push(particle);
+                this._zArray.push(particle);
+                this._nextId++;
+                this._container.dispatchEvent(EventType_js_1.EventType.particleAdded, {
+                    particle,
+                });
+                return particle;
+            }
+            catch (e) {
+                (0, LogUtils_js_1.getLogger)().warning(`error adding particle: ${e}`);
+            }
+            return undefined;
         }
         clear() {
             this._array = [];
             this._zArray = [];
-            this._pluginsInitialized = false;
         }
         destroy() {
             this._array = [];
+            this._pool.length = 0;
             this._zArray = [];
-            this.movers = [];
-            this.updaters = [];
+            this.checkParticlePositionPlugins = [];
+            this._particleResetPlugins = [];
+            this._particleUpdatePlugins = [];
+            this._postUpdatePlugins = [];
+            this._postParticleUpdatePlugins = [];
+            this._updatePlugins = [];
         }
         drawParticles(delta) {
             for (const particle of this._zArray) {
@@ -175,14 +135,46 @@
         }
         async init() {
             const container = this._container, options = container.actualOptions;
-            this._lastZIndex = 0;
+            this._minZIndex = 0;
+            this._maxZIndex = 0;
             this._needsSort = false;
+            this.checkParticlePositionPlugins = [];
+            this._updatePlugins = [];
+            this._particleUpdatePlugins = [];
+            this._postUpdatePlugins = [];
+            this._particleResetPlugins = [];
+            this._postParticleUpdatePlugins = [];
+            this.grid = new SpatialHashGrid_js_1.SpatialHashGrid(Constants_js_1.spatialHashGridCellSize * container.retina.pixelRatio);
             for (const plugin of container.plugins) {
                 if (plugin.redrawInit) {
                     await plugin.redrawInit();
                 }
+                if (plugin.checkParticlePosition) {
+                    this.checkParticlePositionPlugins.push(plugin);
+                }
+                if (plugin.update) {
+                    this._updatePlugins.push(plugin);
+                }
+                if (plugin.particleUpdate) {
+                    this._particleUpdatePlugins.push(plugin);
+                }
+                if (plugin.postUpdate) {
+                    this._postUpdatePlugins.push(plugin);
+                }
+                if (plugin.particleReset) {
+                    this._particleResetPlugins.push(plugin);
+                }
+                if (plugin.postParticleUpdate) {
+                    this._postParticleUpdatePlugins.push(plugin);
+                }
+            }
+            await this._container.initDrawersAndUpdaters();
+            for (const drawer of this._container.effectDrawers.values()) {
+                await drawer.init?.(container);
+            }
+            for (const drawer of this._container.shapeDrawers.values()) {
+                await drawer.init?.(container);
             }
-            await this.initPlugins();
             let handled = false;
             for (const plugin of container.plugins) {
                 handled = plugin.particlesInitialization?.() ?? handled;
@@ -206,17 +198,6 @@
                 }
             }
         }
-        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);
-            for (const pathGenerator of container.pathGenerators.values()) {
-                pathGenerator.init(container);
-            }
-        }
         push(nb, position, overrideOptions, group) {
             for (let i = 0; i < nb; i++) {
                 this.addParticle(position, overrideOptions, group);
@@ -225,7 +206,7 @@
         async redraw() {
             this.clear();
             await this.init();
-            this._container.canvas.drawParticles({ value: 0, factor: 0 });
+            this._container.canvas.render.drawParticles({ value: 0, factor: 0 });
         }
         remove(particle, group, override) {
             this.removeAt(this._array.indexOf(particle), undefined, group, override);
@@ -258,25 +239,21 @@
                 if (!groupData) {
                     continue;
                 }
-                const groupDataOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, this._container, groupData);
+                const groupDataOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._pluginManager, this._container, groupData);
                 this._applyDensity(groupDataOptions, pluginsCount, group);
             }
             this._applyDensity(options.particles, pluginsCount);
         }
         setLastZIndex(zIndex) {
-            this._lastZIndex = zIndex;
-            this._needsSort = this._needsSort || this._lastZIndex < zIndex;
+            this._needsSort ||= zIndex >= this._maxZIndex || (zIndex > this._minZIndex && zIndex < this._maxZIndex);
         }
         setResizeFactor(factor) {
             this._resizeFactor = factor;
         }
         update(delta) {
-            const container = this._container, particlesToDelete = new Set();
-            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), Constants_js_1.qTreeCapacity);
-            for (const pathGenerator of container.pathGenerators.values()) {
-                pathGenerator.update();
-            }
-            for (const plugin of container.plugins) {
+            const particlesToDelete = new Set();
+            this.grid.clear();
+            for (const plugin of this._updatePlugins) {
                 plugin.update?.(delta);
             }
             const resizeFactor = this._resizeFactor;
@@ -288,71 +265,113 @@
                     particle.initialPosition.y *= resizeFactor.height;
                 }
                 particle.ignoresResizeRatio = false;
-                for (const plugin of this._container.plugins) {
-                    if (plugin.particleReset) {
-                        plugin.particleReset(particle);
-                    }
+                for (const plugin of this._particleResetPlugins) {
+                    plugin.particleReset?.(particle);
                 }
-                for (const plugin of this._container.plugins) {
+                for (const plugin of this._particleUpdatePlugins) {
                     if (particle.destroyed) {
                         break;
                     }
                     plugin.particleUpdate?.(particle, delta);
                 }
-                for (const mover of this.movers) {
-                    if (mover.isEnabled(particle)) {
-                        mover.move(particle, delta);
-                    }
-                }
                 if (particle.destroyed) {
                     particlesToDelete.add(particle);
                     continue;
                 }
-                this.quadTree.insert(new Point_js_1.Point(particle.getPosition(), particle));
+                this.grid.insert(particle);
             }
-            if (particlesToDelete.size) {
-                const checkDelete = (p) => !particlesToDelete.has(p);
-                this._array = this.filter(checkDelete);
-                this._zArray = this._zArray.filter(checkDelete);
-                for (const particle of particlesToDelete) {
-                    this._engine.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
-                        container: this._container,
-                        data: {
-                            particle,
-                        },
-                    });
-                }
-                this._addToPool(...particlesToDelete);
-            }
-            for (const plugin of container.plugins) {
-                if (plugin.postUpdate) {
-                    plugin.postUpdate(delta);
-                }
+            for (const plugin of this._postUpdatePlugins) {
+                plugin.postUpdate?.(delta);
             }
             for (const particle of this._array) {
-                for (const updater of this.updaters) {
+                if (particle.destroyed) {
+                    particlesToDelete.add(particle);
+                    continue;
+                }
+                for (const updater of this._container.particleUpdaters) {
                     updater.update(particle, delta);
                 }
                 if (!particle.destroyed && !particle.spawning) {
-                    for (const plugin of container.plugins) {
-                        if (plugin.postParticleUpdate) {
-                            plugin.postParticleUpdate(particle, delta);
-                        }
+                    for (const plugin of this._postParticleUpdatePlugins) {
+                        plugin.postParticleUpdate?.(particle, delta);
                     }
                 }
+                else if (particle.destroyed) {
+                    particlesToDelete.add(particle);
+                }
+            }
+            if (particlesToDelete.size) {
+                for (const particle of particlesToDelete) {
+                    this.remove(particle);
+                }
             }
             delete this._resizeFactor;
             if (this._needsSort) {
                 const zArray = this._zArray;
                 zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-                const lastItem = zArray[zArray.length - Constants_js_1.lengthOffset];
-                if (!lastItem) {
+                const firstItem = zArray[Constants_js_1.minIndex], lastItem = zArray[zArray.length - Constants_js_1.lengthOffset];
+                if (!firstItem || !lastItem) {
                     return;
                 }
-                this._lastZIndex = lastItem.position.z;
+                this._maxZIndex = firstItem.position.z;
+                this._minZIndex = lastItem.position.z;
                 this._needsSort = false;
             }
         }
+        _addToPool = (...particles) => {
+            this._pool.push(...particles);
+        };
+        _applyDensity = (options, pluginsCount, group, groupOptions) => {
+            const numberOptions = options.number;
+            if (!numberOptions.density.enable) {
+                if (group === undefined) {
+                    this._limit = numberOptions.limit.value;
+                }
+                else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
+                    this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
+                }
+                return;
+            }
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > Constants_js_1.minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
+            if (group === undefined) {
+                this._limit = numberOptions.limit.value * densityFactor;
+            }
+            else {
+                this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
+            }
+            if (particlesCount < particlesNumber) {
+                this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
+            }
+            else if (particlesCount > particlesNumber) {
+                this.removeQuantity(particlesCount - particlesNumber, group);
+            }
+        };
+        _initDensityFactor = densityOptions => {
+            const container = this._container;
+            if (!container.canvas.element || !densityOptions.enable) {
+                return Constants_js_1.defaultDensityFactor;
+            }
+            const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
+            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** Constants_js_1.squareExp);
+        };
+        _removeParticle = (index, group, override) => {
+            const particle = this._array[index];
+            if (!particle) {
+                return false;
+            }
+            if (particle.group !== group) {
+                return false;
+            }
+            const zIdx = this._zArray.indexOf(particle);
+            this._array.splice(index, Constants_js_1.deleteCount);
+            this._zArray.splice(zIdx, Constants_js_1.deleteCount);
+            particle.destroy(override);
+            this._container.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
+                particle,
+            });
+            this._addToPool(particle);
+            return true;
+        };
     }
-    exports.Particles = Particles;
+    exports.ParticlesManager = ParticlesManager;
 });