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

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);
@@ -37,22 +34,7 @@
     }
     class Container {
         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._delta = { value: 0, factor: 0 };
             this._nextFrame = (timestamp) => {
                 try {
                     if (!this._smooth &&
@@ -62,14 +44,14 @@
                         return;
                     }
                     this._lastFrameTime ??= timestamp;
-                    const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
-                    this.addLifeTime(delta.value);
+                    updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
+                    this.addLifeTime(this._delta.value);
                     this._lastFrameTime = timestamp;
-                    if (delta.value > Constants_js_1.millisecondsToSeconds) {
+                    if (this._delta.value > Constants_js_1.millisecondsToSeconds) {
                         this.draw(false);
                         return;
                     }
-                    this.canvas.drawParticles(delta);
+                    this.canvas.drawParticles(this._delta);
                     if (!this.alive()) {
                         this.destroy();
                         return;
@@ -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.plugins = [];
             this.effectDrawers = new Map();
             this.shapeDrawers = new Map();
             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,77 +102,6 @@
         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;
         }
@@ -214,39 +115,29 @@
         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);
             }
+            this.effectDrawers.clear();
             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);
+            this.shapeDrawers.clear();
+            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 +161,7 @@
             });
         }
         async export(type, options = {}) {
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 if (!plugin.export) {
                     continue;
                 }
@@ -283,15 +174,6 @@
             (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;
@@ -310,12 +192,21 @@
                     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);
+            for (const [plugin, containerPlugin] of allContainerPlugins) {
+                if (plugin.needsPlugin(this.actualOptions)) {
+                    this.plugins.push(containerPlugin);
+                }
             }
             this.retina.init();
             this.canvas.init();
@@ -330,30 +221,23 @@
             this._lifeTime = 0;
             this.fpsLimit = fpsLimit > Constants_js_1.minFpsLimit ? fpsLimit : Constants_js_1.defaultFpsLimit;
             this._smooth = smooth;
+            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);
             }
-            for (const plugin of this.plugins.values()) {
-                await plugin.init?.();
-            }
             this._engine.dispatchEvent(EventType_js_1.EventType.containerInit, { container: this });
             await this.particles.init();
             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 +249,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 +270,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 +305,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,27 +329,21 @@
             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.plugins.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;
         }
     }
     exports.Container = Container;

package/umd/Core/Engine.js

@@ -50,14 +50,7 @@ var __importStar = (this && this.__importStar) || (function () {
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const LogUtils_js_1 = require("../Utils/LogUtils.js");
     const MathUtils_js_1 = require("../Utils/MathUtils.js");
-    async function getItemsFromInitializer(container, map, initializers, force = false) {
-        let res = map.get(container);
-        if (!res || force) {
-            res = await Promise.all([...initializers.values()].map(t => t(container)));
-            map.set(container, res);
-        }
-        return res;
-    }
+    const fullPercent = "100%";
     async function getDataFromUrl(data) {
         const url = (0, Utils_js_1.itemFromSingleOrMultiple)(data.url, data.index);
         if (!url) {
@@ -71,6 +64,7 @@ var __importStar = (this && this.__importStar) || (function () {
         return data.fallback;
     }
     const getCanvasFromContainer = (domContainer) => {
+        const documentSafe = (0, Utils_js_1.safeDocument)();
         let canvasEl;
         if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === Constants_js_1.canvasTag) {
             canvasEl = domContainer;
@@ -83,28 +77,24 @@ var __importStar = (this && this.__importStar) || (function () {
                 canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedFalse;
             }
             else {
-                canvasEl = (0, Utils_js_1.safeDocument)().createElement(Constants_js_1.canvasTag);
+                canvasEl = documentSafe.createElement(Constants_js_1.canvasTag);
                 canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedTrue;
                 domContainer.appendChild(canvasEl);
             }
         }
-        const fullPercent = "100%";
-        if (!canvasEl.style.width) {
-            canvasEl.style.width = fullPercent;
-        }
-        if (!canvasEl.style.height) {
-            canvasEl.style.height = fullPercent;
-        }
+        canvasEl.style.width ||= fullPercent;
+        canvasEl.style.height ||= fullPercent;
         return canvasEl;
     }, getDomContainer = (id, source) => {
-        let domContainer = source ?? (0, Utils_js_1.safeDocument)().getElementById(id);
+        const documentSafe = (0, Utils_js_1.safeDocument)();
+        let domContainer = source ?? documentSafe.getElementById(id);
         if (domContainer) {
             return domContainer;
         }
-        domContainer = (0, Utils_js_1.safeDocument)().createElement("div");
+        domContainer = documentSafe.createElement("div");
         domContainer.id = id;
         domContainer.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedTrue;
-        (0, Utils_js_1.safeDocument)().body.append(domContainer);
+        documentSafe.body.append(domContainer);
         return domContainer;
     };
     class Engine {
@@ -118,11 +108,9 @@ var __importStar = (this && this.__importStar) || (function () {
             this.colorManagers = new Map();
             this.easingFunctions = new Map();
             this._initializers = {
-                interactors: new Map(),
                 movers: new Map(),
                 updaters: new Map(),
             };
-            this.interactors = new Map();
             this.movers = new Map();
             this.updaters = new Map();
             this.presets = new Map();
@@ -141,7 +129,7 @@ var __importStar = (this && this.__importStar) || (function () {
             return this._domArray;
         }
         get version() {
-            return "4.0.0-alpha.2";
+            return "4.0.0-alpha.4";
         }
         addColorManager(manager) {
             this.colorManagers.set(manager.key, manager);
@@ -166,9 +154,6 @@ var __importStar = (this && this.__importStar) || (function () {
         addEventListener(type, listener) {
             this._eventDispatcher.addEventListener(type, listener);
         }
-        addInteractor(name, interactorInitializer) {
-            this._initializers.interactors.set(name, interactorInitializer);
-        }
         addMover(name, moverInitializer) {
             this._initializers.movers.set(name, moverInitializer);
         }
@@ -210,37 +195,18 @@ var __importStar = (this && this.__importStar) || (function () {
         clearPlugins(container) {
             this.updaters.delete(container);
             this.movers.delete(container);
-            this.interactors.delete(container);
         }
         dispatchEvent(type, args) {
             this._eventDispatcher.dispatchEvent(type, args);
         }
-        dom() {
-            return this.items;
-        }
-        domItem(index) {
-            return this.item(index);
-        }
-        async getAvailablePlugins(container) {
-            const res = new Map();
-            for (const plugin of this.plugins) {
-                if (plugin.needsPlugin(container.actualOptions)) {
-                    res.set(plugin.id, await plugin.getPlugin(container));
-                }
-            }
-            return res;
-        }
         getEasing(name) {
             return this.easingFunctions.get(name) ?? ((value) => value);
         }
         getEffectDrawer(type) {
             return this.effectDrawers.get(type);
         }
-        async getInteractors(container, force = false) {
-            return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
-        }
         async getMovers(container, force = false) {
-            return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
+            return (0, Utils_js_1.getItemsFromInitializer)(container, this.movers, this._initializers.movers, force);
         }
         getPathGenerator(type) {
             return this.pathGenerators.get(type);
@@ -261,16 +227,42 @@ var __importStar = (this && this.__importStar) || (function () {
             return this.shapeDrawers.keys();
         }
         async getUpdaters(container, force = false) {
-            return 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) {
                 return;
             }
-            for (const loadPromise of this._loadPromises) {
-                await loadPromise(this);
+            const executed = new Set(), allLoaders = new Set(this._loadPromises), stack = [...allLoaders];
+            while (stack.length) {
+                const loader = stack.shift();
+                if (!loader) {
+                    continue;
+                }
+                if (executed.has(loader)) {
+                    continue;
+                }
+                executed.add(loader);
+                const inner = [], origRegister = this.register.bind(this);
+                this.register = (...loaders) => {
+                    inner.push(...loaders);
+                    for (const loader of loaders) {
+                        allLoaders.add(loader);
+                    }
+                };
+                try {
+                    await loader(this);
+                }
+                finally {
+                    this.register = origRegister;
+                }
+                stack.unshift(...inner);
+                this._loadPromises.delete(loader);
             }
             this._loadPromises.clear();
+            for (const loader of allLoaders) {
+                this._loadPromises.add(loader);
+            }
             this._initialized = true;
         }
         item(index) {
@@ -283,6 +275,7 @@ var __importStar = (this && this.__importStar) || (function () {
         }
         async load(params) {
             await this.init();
+            this._loadPromises.clear();
             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);
@@ -301,11 +294,6 @@ var __importStar = (this && this.__importStar) || (function () {
             await newItem.start();
             return newItem;
         }
-        loadOptions(options, sourceOptions) {
-            this.plugins.forEach(plugin => {
-                plugin.loadOptions(options, sourceOptions);
-            });
-        }
         loadParticlesOptions(container, options, ...sourceOptions) {
             const updaters = this.updaters.get(container);
             if (!updaters) {
@@ -330,15 +318,6 @@ var __importStar = (this && this.__importStar) || (function () {
         removeEventListener(type, listener) {
             this._eventDispatcher.removeEventListener(type, listener);
         }
-        setOnClickHandler(callback) {
-            const { items } = this;
-            if (!items.length) {
-                throw new Error("Click handlers can only be set after calling tsParticles.load()");
-            }
-            items.forEach(item => {
-                item.addClickHandler(callback);
-            });
-        }
     }
     exports.Engine = Engine;
 });