@tsparticles/engine 4.0.0-alpha.5 → 4.0.0-beta.0

package/umd/Core/Container.js

@@ -33,37 +33,37 @@
         return options;
     }
     class Container {
+        actualOptions;
+        canvas;
+        destroyed;
+        fpsLimit;
+        hdr;
+        id;
+        pageHidden;
+        particleCreatedPlugins;
+        particleDestroyedPlugins;
+        particlePositionPlugins;
+        particles;
+        plugins;
+        retina;
+        started;
+        zLayers;
+        _delay;
+        _delayTimeout;
+        _delta = { value: 0, factor: 0 };
+        _drawAnimationFrame;
+        _duration;
+        _engine;
+        _eventListeners;
+        _firstStart;
+        _initialSourceOptions;
+        _lastFrameTime;
+        _lifeTime;
+        _options;
+        _paused;
+        _smooth;
+        _sourceOptions;
         constructor(engine, id, sourceOptions) {
-            this._delta = { value: 0, factor: 0 };
-            this._nextFrame = (timestamp) => {
-                try {
-                    if (!this._smooth &&
-                        this._lastFrameTime !== undefined &&
-                        timestamp < this._lastFrameTime + Constants_js_1.millisecondsToSeconds / this.fpsLimit) {
-                        this.draw(false);
-                        return;
-                    }
-                    this._lastFrameTime ??= timestamp;
-                    updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
-                    this.addLifeTime(this._delta.value);
-                    this._lastFrameTime = timestamp;
-                    if (this._delta.value > Constants_js_1.millisecondsToSeconds) {
-                        this.draw(false);
-                        return;
-                    }
-                    this.canvas.drawParticles(this._delta);
-                    if (!this.alive()) {
-                        this.destroy();
-                        return;
-                    }
-                    if (this.animationStatus) {
-                        this.draw(false);
-                    }
-                }
-                catch (e) {
-                    (0, LogUtils_js_1.getLogger)().error("error in animation loop", e);
-                }
-            };
             this._engine = engine;
             this.id = Symbol(id);
             this.fpsLimit = 120;
@@ -84,10 +84,10 @@
             this.retina = new Retina_js_1.Retina(this);
             this.canvas = new Canvas_js_1.Canvas(this, this._engine);
             this.particles = new Particles_js_1.Particles(this._engine, this);
-            this.pathGenerators = new Map();
             this.plugins = [];
-            this.effectDrawers = new Map();
-            this.shapeDrawers = new Map();
+            this.particleDestroyedPlugins = [];
+            this.particleCreatedPlugins = [];
+            this.particlePositionPlugins = [];
             this._options = loadContainerOptions(this._engine, this);
             this.actualOptions = loadContainerOptions(this._engine, this);
             this._eventListeners = new EventListeners_js_1.EventListeners(this);
@@ -105,13 +105,6 @@
         addLifeTime(value) {
             this._lifeTime += value;
         }
-        addPath(key, generator, override = false) {
-            if (!guardCheck(this) || (!override && this.pathGenerators.has(key))) {
-                return false;
-            }
-            this.pathGenerators.set(key, generator);
-            return true;
-        }
         alive() {
             return !this._duration || this._lifeTime <= this._duration;
         }
@@ -122,14 +115,6 @@
             this.stop();
             this.particles.destroy();
             this.canvas.destroy();
-            for (const effectDrawer of this.effectDrawers.values()) {
-                effectDrawer.destroy?.(this);
-            }
-            this.effectDrawers.clear();
-            for (const shapeDrawer of this.shapeDrawers.values()) {
-                shapeDrawer.destroy?.(this);
-            }
-            this.shapeDrawers.clear();
             for (const plugin of this.plugins) {
                 plugin.destroy?.();
             }
@@ -149,15 +134,12 @@
                 return;
             }
             let refreshTime = force;
-            const frame = (timestamp) => {
+            this._drawAnimationFrame = (0, MathUtils_js_1.animate)((timestamp) => {
                 if (refreshTime) {
                     this._lastFrameTime = undefined;
                     refreshTime = false;
                 }
                 this._nextFrame(timestamp);
-            };
-            this._drawAnimationFrame = (0, MathUtils_js_1.animate)(timestamp => {
-                frame(timestamp);
             });
         }
         async export(type, options = {}) {
@@ -178,20 +160,6 @@
             if (!guardCheck(this)) {
                 return;
             }
-            const effects = this._engine.getSupportedEffects();
-            for (const type of effects) {
-                const drawer = this._engine.getEffectDrawer(type);
-                if (drawer) {
-                    this.effectDrawers.set(type, drawer);
-                }
-            }
-            const shapes = this._engine.getSupportedShapes();
-            for (const type of shapes) {
-                const drawer = this._engine.getShapeDrawer(type);
-                if (drawer) {
-                    this.shapeDrawers.set(type, drawer);
-                }
-            }
             const allContainerPlugins = new Map();
             for (const plugin of this._engine.plugins) {
                 const containerPlugin = await plugin.getPlugin(this);
@@ -203,9 +171,22 @@
             await this.particles.initPlugins();
             this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
             this.actualOptions = loadContainerOptions(this._engine, this, this._options);
+            this.plugins.length = 0;
+            this.particleDestroyedPlugins.length = 0;
+            this.particleCreatedPlugins.length = 0;
+            this.particlePositionPlugins.length = 0;
             for (const [plugin, containerPlugin] of allContainerPlugins) {
                 if (plugin.needsPlugin(this.actualOptions)) {
                     this.plugins.push(containerPlugin);
+                    if (containerPlugin.particleCreated) {
+                        this.particleCreatedPlugins.push(containerPlugin);
+                    }
+                    if (containerPlugin.particleDestroyed) {
+                        this.particleDestroyedPlugins.push(containerPlugin);
+                    }
+                    if (containerPlugin.particlePosition) {
+                        this.particlePositionPlugins.push(containerPlugin);
+                    }
                 }
             }
             this.retina.init();
@@ -224,14 +205,8 @@
             for (const plugin of this.plugins) {
                 await plugin.init?.();
             }
-            for (const drawer of this.effectDrawers.values()) {
-                await drawer.init?.(this);
-            }
-            for (const drawer of this.shapeDrawers.values()) {
-                await drawer.init?.(this);
-            }
-            this._engine.dispatchEvent(EventType_js_1.EventType.containerInit, { container: this });
             await this.particles.init();
+            this._engine.dispatchEvent(EventType_js_1.EventType.containerInit, { container: this });
             this.particles.setDensity();
             for (const plugin of this.plugins) {
                 plugin.particlesSetup?.();
@@ -332,7 +307,9 @@
             for (const plugin of this.plugins) {
                 plugin.stop?.();
             }
-            this.plugins.length = 0;
+            this.particleCreatedPlugins.length = 0;
+            this.particleDestroyedPlugins.length = 0;
+            this.particlePositionPlugins.length = 0;
             this._sourceOptions = this._options;
             this._engine.dispatchEvent(EventType_js_1.EventType.containerStopped, { container: this });
         }
@@ -345,6 +322,35 @@
             }
             return refresh;
         }
+        _nextFrame = (timestamp) => {
+            try {
+                if (!this._smooth &&
+                    this._lastFrameTime !== undefined &&
+                    timestamp < this._lastFrameTime + Constants_js_1.millisecondsToSeconds / this.fpsLimit) {
+                    this.draw(false);
+                    return;
+                }
+                this._lastFrameTime ??= timestamp;
+                updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
+                this.addLifeTime(this._delta.value);
+                this._lastFrameTime = timestamp;
+                if (this._delta.value > Constants_js_1.millisecondsToSeconds) {
+                    this.draw(false);
+                    return;
+                }
+                this.canvas.drawParticles(this._delta);
+                if (!this.alive()) {
+                    this.destroy();
+                    return;
+                }
+                if (this.animationStatus) {
+                    this.draw(false);
+                }
+            }
+            catch (e) {
+                (0, LogUtils_js_1.getLogger)().error("error in animation loop", e);
+            }
+        };
     }
     exports.Container = Container;
 });

package/umd/Core/Engine.js

@@ -98,29 +98,27 @@ var __importStar = (this && this.__importStar) || (function () {
         return domContainer;
     };
     class Engine {
-        constructor() {
-            this._configs = new Map();
-            this._domArray = [];
-            this._eventDispatcher = new EventDispatcher_js_1.EventDispatcher();
-            this._initialized = false;
-            this._isRunningLoaders = false;
-            this._loadPromises = new Set();
-            this._allLoadersSet = new Set();
-            this._executedSet = new Set();
-            this.plugins = [];
-            this.colorManagers = new Map();
-            this.easingFunctions = new Map();
-            this._initializers = {
-                movers: new Map(),
-                updaters: new Map(),
-            };
-            this.movers = new Map();
-            this.updaters = new Map();
-            this.presets = new Map();
-            this.effectDrawers = new Map();
-            this.shapeDrawers = new Map();
-            this.pathGenerators = new Map();
-        }
+        colorManagers = new Map();
+        easingFunctions = new Map();
+        effectDrawers = new Map();
+        initializers = {
+            effects: new Map(),
+            shapes: new Map(),
+            updaters: new Map(),
+        };
+        palettes = new Map();
+        plugins = [];
+        presets = new Map();
+        shapeDrawers = new Map();
+        updaters = new Map();
+        _allLoadersSet = new Set();
+        _configs = new Map();
+        _domArray = [];
+        _eventDispatcher = new EventDispatcher_js_1.EventDispatcher();
+        _executedSet = new Set();
+        _initialized = false;
+        _isRunningLoaders = false;
+        _loadPromises = new Set();
         get configs() {
             const res = {};
             for (const [name, config] of this._configs) {
@@ -132,10 +130,10 @@ var __importStar = (this && this.__importStar) || (function () {
             return this._domArray;
         }
         get version() {
-            return "4.0.0-alpha.5";
+            return "4.0.0-beta.0";
         }
-        addColorManager(manager) {
-            this.colorManagers.set(manager.key, manager);
+        addColorManager(name, manager) {
+            this.colorManagers.set(name, manager);
         }
         addConfig(config) {
             const key = config.key ?? config.name ?? "default";
@@ -149,25 +147,16 @@ var __importStar = (this && this.__importStar) || (function () {
             this.easingFunctions.set(name, easing);
         }
         addEffect(effect, drawer) {
-            if (this.getEffectDrawer(effect)) {
-                return;
-            }
-            this.effectDrawers.set(effect, drawer);
+            this.initializers.effects.set(effect, drawer);
         }
         addEventListener(type, listener) {
             this._eventDispatcher.addEventListener(type, listener);
         }
-        addMover(name, moverInitializer) {
-            this._initializers.movers.set(name, moverInitializer);
+        addPalette(name, palette) {
+            this.palettes.set(name, palette);
         }
         addParticleUpdater(name, updaterInitializer) {
-            this._initializers.updaters.set(name, updaterInitializer);
-        }
-        addPathGenerator(name, generator) {
-            if (this.getPathGenerator(name)) {
-                return;
-            }
-            this.pathGenerators.set(name, generator);
+            this.initializers.updaters.set(name, updaterInitializer);
         }
         addPlugin(plugin) {
             if (this.getPlugin(plugin.id)) {
@@ -181,12 +170,9 @@ var __importStar = (this && this.__importStar) || (function () {
             }
             this.presets.set(preset, options);
         }
-        addShape(drawer) {
-            for (const validType of drawer.validTypes) {
-                if (this.getShapeDrawer(validType)) {
-                    continue;
-                }
-                this.shapeDrawers.set(validType, drawer);
+        addShape(shapes, drawer) {
+            for (const shape of shapes) {
+                this.initializers.shapes.set(shape, drawer);
             }
         }
         checkVersion(pluginVersion) {
@@ -196,8 +182,9 @@ var __importStar = (this && this.__importStar) || (function () {
             throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${this.version}. Plugin version: ${pluginVersion}`);
         }
         clearPlugins(container) {
+            this.effectDrawers.delete(container);
+            this.shapeDrawers.delete(container);
             this.updaters.delete(container);
-            this.movers.delete(container);
         }
         dispatchEvent(type, args) {
             this._eventDispatcher.dispatchEvent(type, args);
@@ -205,14 +192,11 @@ var __importStar = (this && this.__importStar) || (function () {
         getEasing(name) {
             return this.easingFunctions.get(name) ?? ((value) => value);
         }
-        getEffectDrawer(type) {
-            return this.effectDrawers.get(type);
-        }
-        async getMovers(container, force = false) {
-            return (0, Utils_js_1.getItemsFromInitializer)(container, this.movers, this._initializers.movers, force);
+        getEffectDrawers(container, force = false) {
+            return (0, Utils_js_1.getItemMapFromInitializer)(container, this.effectDrawers, this.initializers.effects, force);
         }
-        getPathGenerator(type) {
-            return this.pathGenerators.get(type);
+        getPalette(name) {
+            return this.palettes.get(name);
         }
         getPlugin(plugin) {
             return this.plugins.find(t => t.id === plugin);
@@ -220,21 +204,16 @@ var __importStar = (this && this.__importStar) || (function () {
         getPreset(preset) {
             return this.presets.get(preset);
         }
-        getShapeDrawer(type) {
-            return this.shapeDrawers.get(type);
-        }
-        getSupportedEffects() {
-            return this.effectDrawers.keys();
-        }
-        getSupportedShapes() {
-            return this.shapeDrawers.keys();
+        async getShapeDrawers(container, force = false) {
+            return (0, Utils_js_1.getItemMapFromInitializer)(container, this.shapeDrawers, this.initializers.shapes, force);
         }
         async getUpdaters(container, force = false) {
-            return (0, Utils_js_1.getItemsFromInitializer)(container, this.updaters, this._initializers.updaters, force);
+            return (0, Utils_js_1.getItemsFromInitializer)(container, this.updaters, this.initializers.updaters, force);
         }
         async init() {
-            if (this._initialized || this._isRunningLoaders)
+            if (this._initialized || this._isRunningLoaders) {
                 return;
+            }
             this._isRunningLoaders = true;
             this._executedSet = new Set();
             this._allLoadersSet = new Set(this._loadPromises);
@@ -259,9 +238,7 @@ var __importStar = (this && this.__importStar) || (function () {
         }
         async load(params) {
             await this.init();
-            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)), id = params.id ??
-                params.element?.id ??
-                `tsparticles${Math.floor((0, MathUtils_js_1.getRandom)() * Constants_js_1.loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new 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)), id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0, MathUtils_js_1.getRandom)() * Constants_js_1.loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
             if (oldIndex >= Constants_js_1.loadMinIndex) {
                 const old = this.item(oldIndex), deleteCount = old ? Constants_js_1.one : Constants_js_1.none;
                 if (old && !old.destroyed) {