@tsparticles/engine 4.0.0-alpha.2 → 4.0.0-alpha.20

package/umd/Core/Container.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/MathUtils.js", "./Utils/Constants.js", "./Canvas.js", "./Utils/EventListeners.js", "../Enums/Types/EventType.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js", "../Utils/Utils.js"], factory);
+        define(["require", "exports", "../Utils/MathUtils.js", "./Utils/Constants.js", "./Canvas.js", "./Utils/EventListeners.js", "../Enums/Types/EventType.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -20,15 +20,12 @@
     const Retina_js_1 = require("./Retina.js");
     const LogUtils_js_1 = require("../Utils/LogUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-    const Utils_js_1 = require("../Utils/Utils.js");
     function guardCheck(container) {
         return !container.destroyed;
     }
-    function initDelta(value, fpsLimit = Constants_js_1.defaultFps, smooth = false) {
-        return {
-            value,
-            factor: smooth ? Constants_js_1.defaultFps / fpsLimit : (Constants_js_1.defaultFps * value) / Constants_js_1.millisecondsToSeconds,
-        };
+    function updateDelta(delta, value, fpsLimit = Constants_js_1.defaultFps, smooth = false) {
+        delta.value = value;
+        delta.factor = smooth ? Constants_js_1.defaultFps / fpsLimit : (Constants_js_1.defaultFps * value) / Constants_js_1.millisecondsToSeconds;
     }
     function loadContainerOptions(engine, container, ...sourceOptionsArr) {
         const options = new Options_js_1.Options(engine, container);
@@ -36,52 +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._intersectionManager = entries => {
-                if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
-                    return;
-                }
-                for (const entry of entries) {
-                    if (entry.target !== this.interactivity.element) {
-                        continue;
-                    }
-                    if (entry.isIntersecting) {
-                        this.play();
-                    }
-                    else {
-                        this.pause();
-                    }
-                }
-            };
-            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;
-                    const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
-                    this.addLifeTime(delta.value);
-                    this._lastFrameTime = timestamp;
-                    if (delta.value > Constants_js_1.millisecondsToSeconds) {
-                        this.draw(false);
-                        return;
-                    }
-                    this.canvas.drawParticles(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;
@@ -97,28 +79,18 @@
             this._lastFrameTime = 0;
             this.zLayers = 100;
             this.pageHidden = false;
-            this._clickHandlers = new Map();
             this._sourceOptions = sourceOptions;
             this._initialSourceOptions = sourceOptions;
             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.interactivity = {
-                mouse: {
-                    clicking: false,
-                    inside: false,
-                },
-            };
-            this.plugins = new Map();
-            this.effectDrawers = new Map();
-            this.shapeDrawers = new Map();
+            this.plugins = [];
+            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);
-            this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)(entries => {
-                this._intersectionManager(entries);
-            });
             this._engine.dispatchEvent(EventType_js_1.EventType.containerBuilt, { container: this });
         }
         get animationStatus() {
@@ -130,123 +102,27 @@
         get sourceOptions() {
             return this._sourceOptions;
         }
-        addClickHandler(callback) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            const el = this.interactivity.element;
-            if (!el) {
-                return;
-            }
-            const clickOrTouchHandler = (e, pos, radius) => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                const pxRatio = this.retina.pixelRatio, posRetina = {
-                    x: pos.x * pxRatio,
-                    y: pos.y * pxRatio,
-                }, particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
-                callback(e, particles);
-            }, clickHandler = (e) => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                const mouseEvent = e, pos = {
-                    x: mouseEvent.offsetX || mouseEvent.clientX,
-                    y: mouseEvent.offsetY || mouseEvent.clientY,
-                };
-                clickOrTouchHandler(e, pos, Constants_js_1.clickRadius);
-            }, touchStartHandler = () => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                touched = true;
-                touchMoved = false;
-            }, touchMoveHandler = () => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                touchMoved = true;
-            }, touchEndHandler = (e) => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                if (touched && !touchMoved) {
-                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - Constants_js_1.touchEndLengthOffset];
-                    if (!lastTouch) {
-                        return;
-                    }
-                    const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
-                        x: lastTouch.clientX - (canvasRect ? canvasRect.left : Constants_js_1.minCoordinate),
-                        y: lastTouch.clientY - (canvasRect ? canvasRect.top : Constants_js_1.minCoordinate),
-                    };
-                    clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
-                }
-                touched = false;
-                touchMoved = false;
-            }, touchCancelHandler = () => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                touched = false;
-                touchMoved = false;
-            };
-            let touched = false, touchMoved = false;
-            this._clickHandlers.set("click", clickHandler);
-            this._clickHandlers.set("touchstart", touchStartHandler);
-            this._clickHandlers.set("touchmove", touchMoveHandler);
-            this._clickHandlers.set("touchend", touchEndHandler);
-            this._clickHandlers.set("touchcancel", touchCancelHandler);
-            for (const [key, handler] of this._clickHandlers) {
-                el.addEventListener(key, handler);
-            }
-        }
         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;
         }
-        clearClickHandlers() {
-            if (!guardCheck(this)) {
-                return;
-            }
-            for (const [key, handler] of this._clickHandlers) {
-                this.interactivity.element?.removeEventListener(key, handler);
-            }
-            this._clickHandlers.clear();
-        }
         destroy(remove = true) {
             if (!guardCheck(this)) {
                 return;
             }
             this.stop();
-            this.clearClickHandlers();
             this.particles.destroy();
             this.canvas.destroy();
-            for (const effectDrawer of this.effectDrawers.values()) {
-                effectDrawer.destroy?.(this);
-            }
-            for (const shapeDrawer of this.shapeDrawers.values()) {
-                shapeDrawer.destroy?.(this);
-            }
-            for (const key of this.effectDrawers.keys()) {
-                this.effectDrawers.delete(key);
-            }
-            for (const key of this.shapeDrawers.keys()) {
-                this.shapeDrawers.delete(key);
+            for (const plugin of this.plugins) {
+                plugin.destroy?.();
             }
+            this.plugins.length = 0;
             this._engine.clearPlugins(this);
             this.destroyed = true;
             if (remove) {
-                const mainArr = this._engine.items, idx = mainArr.findIndex(t => t === this);
+                const mainArr = this._engine.items, idx = mainArr.indexOf(this);
                 if (idx >= Constants_js_1.removeMinIndex) {
                     mainArr.splice(idx, Constants_js_1.removeDeleteCount);
                 }
@@ -270,7 +146,7 @@
             });
         }
         async export(type, options = {}) {
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 if (!plugin.export) {
                     continue;
                 }
@@ -283,39 +159,38 @@
             (0, LogUtils_js_1.getLogger)().error(`Export plugin with type ${type} not found`);
             return undefined;
         }
-        handleClickMode(mode) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            this.particles.handleClickMode(mode);
-            for (const plugin of this.plugins.values()) {
-                plugin.handleClickMode?.(mode);
-            }
-        }
         async init() {
             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);
+                if (containerPlugin.preInit) {
+                    await containerPlugin.preInit();
                 }
+                allContainerPlugins.set(plugin, containerPlugin);
             }
             await this.particles.initPlugins();
             this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
             this.actualOptions = loadContainerOptions(this._engine, this, this._options);
-            const availablePlugins = await this._engine.getAvailablePlugins(this);
-            for (const [id, plugin] of availablePlugins) {
-                this.plugins.set(id, plugin);
+            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();
             this.canvas.init();
@@ -330,30 +205,17 @@
             this._lifeTime = 0;
             this.fpsLimit = fpsLimit > Constants_js_1.minFpsLimit ? fpsLimit : Constants_js_1.defaultFpsLimit;
             this._smooth = smooth;
-            for (const drawer of this.effectDrawers.values()) {
-                await drawer.init?.(this);
-            }
-            for (const drawer of this.shapeDrawers.values()) {
-                await drawer.init?.(this);
-            }
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 await plugin.init?.();
             }
-            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.values()) {
+            for (const plugin of this.plugins) {
                 plugin.particlesSetup?.();
             }
             this._engine.dispatchEvent(EventType_js_1.EventType.particlesSetup, { container: this });
         }
-        async loadTheme(name) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            this._currentTheme = name;
-            await this.refresh();
-        }
         pause() {
             if (!guardCheck(this)) {
                 return;
@@ -365,7 +227,7 @@
             if (this._paused) {
                 return;
             }
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 plugin.pause?.();
             }
             if (!this.pageHidden) {
@@ -386,7 +248,7 @@
                 this._paused = false;
             }
             if (needsUpdate) {
-                for (const plugin of this.plugins.values()) {
+                for (const plugin of this.plugins) {
                     if (plugin.play) {
                         plugin.play();
                     }
@@ -421,10 +283,7 @@
             await new Promise(resolve => {
                 const start = async () => {
                     this._eventListeners.addListeners();
-                    if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
-                        this._intersectionObserver.observe(this.interactivity.element);
-                    }
-                    for (const plugin of this.plugins.values()) {
+                    for (const plugin of this.plugins) {
                         await plugin.start?.();
                     }
                     this._engine.dispatchEvent(EventType_js_1.EventType.containerStarted, { container: this });
@@ -448,28 +307,53 @@
             this.pause();
             this.particles.clear();
             this.canvas.stop();
-            if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
-                this._intersectionObserver.unobserve(this.interactivity.element);
-            }
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 plugin.stop?.();
             }
-            for (const key of this.plugins.keys()) {
-                this.plugins.delete(key);
-            }
+            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 });
         }
         updateActualOptions() {
-            this.actualOptions.responsive = [];
-            const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
-            this.actualOptions.setTheme(this._currentTheme);
-            if (this._responsiveMaxWidth === newMaxWidth) {
-                return false;
+            let refresh = false;
+            for (const plugin of this.plugins) {
+                if (plugin.updateActualOptions) {
+                    refresh = plugin.updateActualOptions() || refresh;
+                }
             }
-            this._responsiveMaxWidth = newMaxWidth;
-            return true;
+            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;
 });