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

package/cjs/Core/Container.js

@@ -21,37 +21,37 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
     return options;
 }
 export 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 + 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 > millisecondsToSeconds) {
-                    this.draw(false);
-                    return;
-                }
-                this.canvas.drawParticles(this._delta);
-                if (!this.alive()) {
-                    this.destroy();
-                    return;
-                }
-                if (this.animationStatus) {
-                    this.draw(false);
-                }
-            }
-            catch (e) {
-                getLogger().error("error in animation loop", e);
-            }
-        };
         this._engine = engine;
         this.id = Symbol(id);
         this.fpsLimit = 120;
@@ -72,10 +72,10 @@ export class Container {
         this.retina = new Retina(this);
         this.canvas = new Canvas(this, this._engine);
         this.particles = new 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(this);
@@ -93,13 +93,6 @@ export class Container {
     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;
     }
@@ -110,14 +103,6 @@ export class Container {
         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?.();
         }
@@ -137,15 +122,12 @@ export class Container {
             return;
         }
         let refreshTime = force;
-        const frame = (timestamp) => {
+        this._drawAnimationFrame = animate((timestamp) => {
             if (refreshTime) {
                 this._lastFrameTime = undefined;
                 refreshTime = false;
             }
             this._nextFrame(timestamp);
-        };
-        this._drawAnimationFrame = animate(timestamp => {
-            frame(timestamp);
         });
     }
     async export(type, options = {}) {
@@ -166,20 +148,6 @@ export class Container {
         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);
@@ -191,9 +159,22 @@ export class Container {
         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();
@@ -212,14 +193,8 @@ export class Container {
         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.containerInit, { container: this });
         await this.particles.init();
+        this._engine.dispatchEvent(EventType.containerInit, { container: this });
         this.particles.setDensity();
         for (const plugin of this.plugins) {
             plugin.particlesSetup?.();
@@ -320,7 +295,9 @@ export class Container {
         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.containerStopped, { container: this });
     }
@@ -333,4 +310,33 @@ export class Container {
         }
         return refresh;
     }
+    _nextFrame = (timestamp) => {
+        try {
+            if (!this._smooth &&
+                this._lastFrameTime !== undefined &&
+                timestamp < this._lastFrameTime + 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 > millisecondsToSeconds) {
+                this.draw(false);
+                return;
+            }
+            this.canvas.drawParticles(this._delta);
+            if (!this.alive()) {
+                this.destroy();
+                return;
+            }
+            if (this.animationStatus) {
+                this.draw(false);
+            }
+        }
+        catch (e) {
+            getLogger().error("error in animation loop", e);
+        }
+    };
 }

package/cjs/Core/Engine.js

@@ -1,5 +1,5 @@
 import { canvasFirstIndex, canvasTag, generatedAttribute, generatedFalse, generatedTrue, loadMinIndex, loadRandomFactor, none, one, removeDeleteCount, } from "./Utils/Constants.js";
-import { getItemsFromInitializer, itemFromSingleOrMultiple, safeDocument } from "../Utils/Utils.js";
+import { getItemMapFromInitializer, getItemsFromInitializer, itemFromSingleOrMultiple, safeDocument, } from "../Utils/Utils.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { getLogger } from "../Utils/LogUtils.js";
@@ -52,29 +52,27 @@ const getCanvasFromContainer = (domContainer) => {
     return domContainer;
 };
 export class Engine {
-    constructor() {
-        this._configs = new Map();
-        this._domArray = [];
-        this._eventDispatcher = new 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();
+    _executedSet = new Set();
+    _initialized = false;
+    _isRunningLoaders = false;
+    _loadPromises = new Set();
     get configs() {
         const res = {};
         for (const [name, config] of this._configs) {
@@ -86,10 +84,10 @@ export class Engine {
         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";
@@ -103,25 +101,16 @@ export class Engine {
         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)) {
@@ -135,12 +124,9 @@ export class Engine {
         }
         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) {
@@ -150,8 +136,9 @@ export class Engine {
         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);
@@ -159,14 +146,11 @@ export class Engine {
     getEasing(name) {
         return this.easingFunctions.get(name) ?? ((value) => value);
     }
-    getEffectDrawer(type) {
-        return this.effectDrawers.get(type);
-    }
-    async getMovers(container, force = false) {
-        return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
+    getEffectDrawers(container, force = false) {
+        return 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);
@@ -174,21 +158,16 @@ export class Engine {
     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 getItemMapFromInitializer(container, this.shapeDrawers, this.initializers.shapes, force);
     }
     async getUpdaters(container, force = false) {
-        return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
+        return 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);
@@ -213,9 +192,7 @@ export class Engine {
     }
     async load(params) {
         await this.init();
-        const { Container } = await import("./Container.js"), id = params.id ??
-            params.element?.id ??
-            `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
+        const { Container } = await import("./Container.js"), id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
         if (oldIndex >= loadMinIndex) {
             const old = this.item(oldIndex), deleteCount = old ? one : none;
             if (old && !old.destroyed) {