@tsparticles/engine 4.0.0-alpha.1 → 4.0.0-alpha.14

package/esm/Core/Container.js

@@ -1,5 +1,5 @@
 import { animate, cancelAnimation, getRangeValue } from "../Utils/MathUtils.js";
-import { clickRadius, defaultFps, defaultFpsLimit, millisecondsToSeconds, minCoordinate, minFpsLimit, removeDeleteCount, removeMinIndex, touchEndLengthOffset, } from "./Utils/Constants.js";
+import { defaultFps, defaultFpsLimit, millisecondsToSeconds, minFpsLimit, removeDeleteCount, removeMinIndex, } from "./Utils/Constants.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { EventType } from "../Enums/Types/EventType.js";
@@ -8,15 +8,12 @@ import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
-import { safeIntersectionObserver } from "../Utils/Utils.js";
 function guardCheck(container) {
     return !container.destroyed;
 }
-function initDelta(value, fpsLimit = defaultFps, smooth = false) {
-    return {
-        value,
-        factor: smooth ? defaultFps / fpsLimit : (defaultFps * value) / millisecondsToSeconds,
-    };
+function updateDelta(delta, value, fpsLimit = defaultFps, smooth = false) {
+    delta.value = value;
+    delta.factor = smooth ? defaultFps / fpsLimit : (defaultFps * value) / millisecondsToSeconds;
 }
 function loadContainerOptions(engine, container, ...sourceOptionsArr) {
     const options = new Options(engine, container);
@@ -24,52 +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._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 + 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 > millisecondsToSeconds) {
-                    this.draw(false);
-                    return;
-                }
-                this.canvas.drawParticles(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;
@@ -85,28 +67,18 @@ export class Container {
         this._lastFrameTime = 0;
         this.zLayers = 100;
         this.pageHidden = false;
-        this._clickHandlers = new Map();
         this._sourceOptions = sourceOptions;
         this._initialSourceOptions = sourceOptions;
         this.retina = new Retina(this);
         this.canvas = new Canvas(this, this._engine);
         this.particles = new 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(this);
-        this._intersectionObserver = safeIntersectionObserver(entries => {
-            this._intersectionManager(entries);
-        });
         this._engine.dispatchEvent(EventType.containerBuilt, { container: this });
     }
     get animationStatus() {
@@ -118,123 +90,27 @@ export class Container {
     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, 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 - touchEndLengthOffset];
-                if (!lastTouch) {
-                    return;
-                }
-                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
-                    x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
-                    y: lastTouch.clientY - (canvasRect ? canvasRect.top : 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 >= removeMinIndex) {
                 mainArr.splice(idx, removeDeleteCount);
             }
@@ -258,7 +134,7 @@ export class Container {
         });
     }
     async export(type, options = {}) {
-        for (const plugin of this.plugins.values()) {
+        for (const plugin of this.plugins) {
             if (!plugin.export) {
                 continue;
             }
@@ -271,39 +147,38 @@ export class Container {
         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();
@@ -318,30 +193,17 @@ export class Container {
         this._lifeTime = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : 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.containerInit, { container: this });
         await this.particles.init();
+        this._engine.dispatchEvent(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.particlesSetup, { container: this });
     }
-    async loadTheme(name) {
-        if (!guardCheck(this)) {
-            return;
-        }
-        this._currentTheme = name;
-        await this.refresh();
-    }
     pause() {
         if (!guardCheck(this)) {
             return;
@@ -353,7 +215,7 @@ export class Container {
         if (this._paused) {
             return;
         }
-        for (const plugin of this.plugins.values()) {
+        for (const plugin of this.plugins) {
             plugin.pause?.();
         }
         if (!this.pageHidden) {
@@ -374,7 +236,7 @@ export class Container {
             this._paused = false;
         }
         if (needsUpdate) {
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 if (plugin.play) {
                     plugin.play();
                 }
@@ -409,10 +271,7 @@ export class Container {
         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.containerStarted, { container: this });
@@ -436,26 +295,51 @@ export class Container {
         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.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 + 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);
+        }
+    };
 }