@tsparticles/engine 3.0.0-alpha.0 → 3.0.0-beta.0

package/umd/Core/Container.js

@@ -4,51 +4,84 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/Utils", "./Canvas", "./Utils/EventListeners", "./Utils/FrameManager", "../Options/Classes/Options", "./Particles", "./Retina", "../Utils/NumberUtils", "../Utils/OptionsUtils"], factory);
+        define(["require", "exports", "./Canvas", "./Utils/EventListeners", "../Options/Classes/Options", "./Particles", "./Retina", "./Utils/Constants", "../Utils/Utils", "../Utils/NumberUtils", "../Utils/OptionsUtils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Container = void 0;
-    const Utils_1 = require("../Utils/Utils");
     const Canvas_1 = require("./Canvas");
     const EventListeners_1 = require("./Utils/EventListeners");
-    const FrameManager_1 = require("./Utils/FrameManager");
     const Options_1 = require("../Options/Classes/Options");
     const Particles_1 = require("./Particles");
     const Retina_1 = require("./Retina");
+    const Constants_1 = require("./Utils/Constants");
+    const Utils_1 = require("../Utils/Utils");
     const NumberUtils_1 = require("../Utils/NumberUtils");
     const OptionsUtils_1 = require("../Utils/OptionsUtils");
     function guardCheck(container) {
         return container && !container.destroyed;
     }
+    function initDelta(value, fpsLimit = 60, smooth = false) {
+        return {
+            value,
+            factor: smooth ? 60 / fpsLimit : (60 * value) / 1000,
+        };
+    }
     function loadContainerOptions(engine, container, ...sourceOptionsArr) {
         const options = new Options_1.Options(engine, container);
         (0, OptionsUtils_1.loadOptions)(options, ...sourceOptionsArr);
         return options;
     }
-    const defaultPathGeneratorKey = "default", defaultPathGenerator = {
-        generate: (p) => {
-            const v = p.velocity.copy();
-            v.angle += (v.length * Math.PI) / 180;
-            return v;
-        },
-        init: () => {
-        },
-        update: () => {
-        },
-        reset: () => {
-        },
-    };
     class Container {
         constructor(engine, id, sourceOptions) {
             this.id = id;
+            this._intersectionManager = (entries) => {
+                if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
+                    return;
+                }
+                for (const entry of entries) {
+                    if (entry.target !== this.interactivity.element) {
+                        continue;
+                    }
+                    (entry.isIntersecting ? this.play : this.pause)();
+                }
+            };
+            this._nextFrame = async (timestamp) => {
+                try {
+                    if (!this.smooth &&
+                        this.lastFrameTime !== undefined &&
+                        timestamp < this.lastFrameTime + 1000 / 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 > 1000) {
+                        this.draw(false);
+                        return;
+                    }
+                    await this.particles.draw(delta);
+                    if (!this.alive()) {
+                        this.destroy();
+                        return;
+                    }
+                    if (this.getAnimationStatus()) {
+                        this.draw(false);
+                    }
+                }
+                catch (e) {
+                    (0, Utils_1.getLogger)().error(`${Constants_1.errorPrefix} in animation loop`, e);
+                }
+            };
             this._engine = engine;
             this.fpsLimit = 120;
             this.smooth = false;
             this._delay = 0;
-            this.duration = 0;
-            this.lifeTime = 0;
+            this._duration = 0;
+            this._lifeTime = 0;
             this._firstStart = true;
             this.started = false;
             this.destroyed = false;
@@ -61,7 +94,6 @@
             this.retina = new Retina_1.Retina(this);
             this.canvas = new Canvas_1.Canvas(this);
             this.particles = new Particles_1.Particles(this._engine, this);
-            this.frameManager = new FrameManager_1.FrameManager(this);
             this.pathGenerators = new Map();
             this.interactivity = {
                 mouse: {
@@ -162,13 +194,19 @@
             el.addEventListener("touchend", touchEndHandler);
             el.addEventListener("touchcancel", touchCancelHandler);
         }
+        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 !== null && generator !== void 0 ? generator : defaultPathGenerator);
+            this.pathGenerators.set(key, generator);
             return true;
         }
+        alive() {
+            return !this._duration || this._lifeTime <= this._duration;
+        }
         destroy() {
             if (!guardCheck(this)) {
                 return;
@@ -177,14 +215,12 @@
             this.particles.destroy();
             this.canvas.destroy();
             for (const [, drawer] of this.drawers) {
-                if (drawer.destroy) {
-                    drawer.destroy(this);
-                }
+                drawer.destroy && drawer.destroy(this);
             }
             for (const key of this.drawers.keys()) {
                 this.drawers.delete(key);
             }
-            this._engine.plugins.destroy(this);
+            this._engine.clearPlugins(this);
             this.destroyed = true;
             const mainArr = this._engine.dom(), idx = mainArr.findIndex((t) => t === this);
             if (idx >= 0) {
@@ -197,30 +233,26 @@
                 return;
             }
             let refreshTime = force;
-            this._drawAnimationFrame = (0, Utils_1.animate)()(async (timestamp) => {
+            this._drawAnimationFrame = requestAnimationFrame(async (timestamp) => {
                 if (refreshTime) {
                     this.lastFrameTime = undefined;
                     refreshTime = false;
                 }
-                await this.frameManager.nextFrame(timestamp);
+                await this._nextFrame(timestamp);
             });
         }
-        exportConfiguration() {
-            return JSON.stringify(this.actualOptions, (key, value) => {
-                if (key === "_engine" || key === "_container") {
-                    return;
+        async export(type, options = {}) {
+            for (const [, plugin] of this.plugins) {
+                if (!plugin.export) {
+                    continue;
                 }
-                return value;
-            }, 2);
-        }
-        exportImage(callback, type, quality) {
-            const element = this.canvas.element;
-            if (element) {
-                element.toBlob(callback, type !== null && type !== void 0 ? type : "image/png", quality);
+                const res = await plugin.export(type, options);
+                if (!res.supported) {
+                    continue;
+                }
+                return res.blob;
             }
-        }
-        exportImg(callback) {
-            this.exportImage(callback);
+            (0, Utils_1.getLogger)().error(`${Constants_1.errorPrefix} - Export plugin with type ${type} not found`);
         }
         getAnimationStatus() {
             return !this._paused && !this.pageHidden && guardCheck(this);
@@ -231,53 +263,48 @@
             }
             this.particles.handleClickMode(mode);
             for (const [, plugin] of this.plugins) {
-                if (plugin.handleClickMode) {
-                    plugin.handleClickMode(mode);
-                }
+                plugin.handleClickMode && plugin.handleClickMode(mode);
             }
         }
         async init() {
             if (!guardCheck(this)) {
                 return;
             }
-            const shapes = this._engine.plugins.getSupportedShapes();
+            const shapes = this._engine.getSupportedShapes();
             for (const type of shapes) {
-                const drawer = this._engine.plugins.getShapeDrawer(type);
+                const drawer = this._engine.getShapeDrawer(type);
                 if (drawer) {
                     this.drawers.set(type, drawer);
                 }
             }
             this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
             this.actualOptions = loadContainerOptions(this._engine, this, this._options);
-            const availablePlugins = this._engine.plugins.getAvailablePlugins(this);
+            const availablePlugins = this._engine.getAvailablePlugins(this);
             for (const [id, plugin] of availablePlugins) {
                 this.plugins.set(id, plugin);
             }
             this.retina.init();
             await this.canvas.init();
+            this.updateActualOptions();
+            this.canvas.initBackground();
+            this.canvas.resize();
             this.zLayers = this.actualOptions.zLayers;
-            this.duration = (0, NumberUtils_1.getRangeValue)(this.actualOptions.duration) * 1000;
+            this._duration = (0, NumberUtils_1.getRangeValue)(this.actualOptions.duration) * 1000;
             this._delay = (0, NumberUtils_1.getRangeValue)(this.actualOptions.delay) * 1000;
-            this.lifeTime = 0;
+            this._lifeTime = 0;
             this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
             this.smooth = this.actualOptions.smooth;
             for (const [, drawer] of this.drawers) {
-                if (drawer.init) {
-                    await drawer.init(this);
-                }
+                drawer.init && (await drawer.init(this));
             }
             for (const [, plugin] of this.plugins) {
-                if (plugin.init) {
-                    await plugin.init();
-                }
+                plugin.init && (await plugin.init());
             }
             this._engine.dispatchEvent("containerInit", { container: this });
             this.particles.init();
             this.particles.setDensity();
             for (const [, plugin] of this.plugins) {
-                if (plugin.particlesSetup) {
-                    plugin.particlesSetup();
-                }
+                plugin.particlesSetup && plugin.particlesSetup();
             }
             this._engine.dispatchEvent("particlesSetup", { container: this });
         }
@@ -293,16 +320,14 @@
                 return;
             }
             if (this._drawAnimationFrame !== undefined) {
-                (0, Utils_1.cancelAnimation)()(this._drawAnimationFrame);
+                cancelAnimationFrame(this._drawAnimationFrame);
                 delete this._drawAnimationFrame;
             }
             if (this._paused) {
                 return;
             }
             for (const [, plugin] of this.plugins) {
-                if (plugin.pause) {
-                    plugin.pause();
-                }
+                plugin.pause && plugin.pause();
             }
             if (!this.pageHidden) {
                 this._paused = true;
@@ -342,37 +367,11 @@
             if (!guardCheck(this)) {
                 return;
             }
+            this._initialSourceOptions = undefined;
             this._options = loadContainerOptions(this._engine, this);
+            this.actualOptions = loadContainerOptions(this._engine, this, this._options);
             return this.refresh();
         }
-        setNoise(noiseOrGenerator, init, update) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            this.setPath(noiseOrGenerator, init, update);
-        }
-        setPath(pathOrGenerator, init, update) {
-            if (!pathOrGenerator || !guardCheck(this)) {
-                return;
-            }
-            const pathGenerator = Object.assign({}, defaultPathGenerator);
-            if (typeof pathOrGenerator === "function") {
-                pathGenerator.generate = pathOrGenerator;
-                if (init) {
-                    pathGenerator.init = init;
-                }
-                if (update) {
-                    pathGenerator.update = update;
-                }
-            }
-            else {
-                const oldGenerator = pathGenerator;
-                pathGenerator.generate = pathOrGenerator.generate || oldGenerator.generate;
-                pathGenerator.init = pathOrGenerator.init || oldGenerator.init;
-                pathGenerator.update = pathOrGenerator.update || oldGenerator.update;
-            }
-            this.addPath(defaultPathGeneratorKey, pathGenerator, true);
-        }
         async start() {
             if (!guardCheck(this) || this.started) {
                 return;
@@ -386,9 +385,7 @@
                         this._intersectionObserver.observe(this.interactivity.element);
                     }
                     for (const [, plugin] of this.plugins) {
-                        if (plugin.start) {
-                            await plugin.start();
-                        }
+                        plugin.start && (await plugin.start());
                     }
                     this._engine.dispatchEvent("containerStarted", { container: this });
                     this.play();
@@ -409,14 +406,12 @@
             this._eventListeners.removeListeners();
             this.pause();
             this.particles.clear();
-            this.canvas.clear();
+            this.canvas.stop();
             if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
                 this._intersectionObserver.unobserve(this.interactivity.element);
             }
             for (const [, plugin] of this.plugins) {
-                if (plugin.stop) {
-                    plugin.stop();
-                }
+                plugin.stop && plugin.stop();
             }
             for (const key of this.plugins.keys()) {
                 this.plugins.delete(key);
@@ -434,17 +429,6 @@
             this.responsiveMaxWidth = newMaxWidth;
             return true;
         }
-        _intersectionManager(entries) {
-            if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
-                return;
-            }
-            for (const entry of entries) {
-                if (entry.target !== this.interactivity.element) {
-                    continue;
-                }
-                (entry.isIntersecting ? this.play : this.pause)();
-            }
-        }
     }
     exports.Container = Container;
 });

package/umd/Core/Engine.js

@@ -0,0 +1,285 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./Utils/Constants", "../Utils/Utils", "./Container", "../Utils/EventDispatcher", "../Utils/NumberUtils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Engine = void 0;
+    const Constants_1 = require("./Utils/Constants");
+    const Utils_1 = require("../Utils/Utils");
+    const Container_1 = require("./Container");
+    const EventDispatcher_1 = require("../Utils/EventDispatcher");
+    const NumberUtils_1 = require("../Utils/NumberUtils");
+    function getItemsFromInitializer(container, map, initializers, force = false) {
+        let res = map.get(container);
+        if (!res || force) {
+            res = [...initializers.values()].map((t) => t(container));
+            map.set(container, res);
+        }
+        return res;
+    }
+    async function getDataFromUrl(data) {
+        const url = (0, Utils_1.itemFromSingleOrMultiple)(data.url, data.index);
+        if (!url) {
+            return data.fallback;
+        }
+        const response = await fetch(url);
+        if (response.ok) {
+            return response.json();
+        }
+        (0, Utils_1.getLogger)().error(`${Constants_1.errorPrefix} ${response.status} while retrieving config file`);
+        return data.fallback;
+    }
+    class Engine {
+        constructor() {
+            this._configs = new Map();
+            this._domArray = [];
+            this._eventDispatcher = new EventDispatcher_1.EventDispatcher();
+            this._initialized = false;
+            this.plugins = [];
+            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();
+            this.drawers = new Map();
+            this.pathGenerators = new Map();
+        }
+        get configs() {
+            const res = {};
+            for (const [name, config] of this._configs) {
+                res[name] = config;
+            }
+            return res;
+        }
+        get version() {
+            return "3.0.0-beta.0";
+        }
+        addConfig(nameOrConfig, config) {
+            if ((0, Utils_1.isString)(nameOrConfig)) {
+                if (config) {
+                    config.name = nameOrConfig;
+                    this._configs.set(nameOrConfig, config);
+                }
+            }
+            else {
+                this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
+            }
+        }
+        addEventListener(type, listener) {
+            this._eventDispatcher.addEventListener(type, listener);
+        }
+        async addInteractor(name, interactorInitializer, refresh = true) {
+            this._initializers.interactors.set(name, interactorInitializer);
+            await this.refresh(refresh);
+        }
+        async addMover(name, moverInitializer, refresh = true) {
+            this._initializers.movers.set(name, moverInitializer);
+            await this.refresh(refresh);
+        }
+        async addParticleUpdater(name, updaterInitializer, refresh = true) {
+            this._initializers.updaters.set(name, updaterInitializer);
+            await this.refresh(refresh);
+        }
+        async addPathGenerator(name, generator, refresh = true) {
+            !this.getPathGenerator(name) && this.pathGenerators.set(name, generator);
+            await this.refresh(refresh);
+        }
+        async addPlugin(plugin, refresh = true) {
+            !this.getPlugin(plugin.id) && this.plugins.push(plugin);
+            await this.refresh(refresh);
+        }
+        async addPreset(preset, options, override = false, refresh = true) {
+            (override || !this.getPreset(preset)) && this.presets.set(preset, options);
+            await this.refresh(refresh);
+        }
+        async addShape(shape, drawer, initOrRefresh, afterEffectOrRefresh, destroyOrRefresh, refresh = true) {
+            let customDrawer;
+            let realRefresh = refresh, realInit, realAfterEffect, realDestroy;
+            if ((0, Utils_1.isBoolean)(initOrRefresh)) {
+                realRefresh = initOrRefresh;
+                realInit = undefined;
+            }
+            else {
+                realInit = initOrRefresh;
+            }
+            if ((0, Utils_1.isBoolean)(afterEffectOrRefresh)) {
+                realRefresh = afterEffectOrRefresh;
+                realAfterEffect = undefined;
+            }
+            else {
+                realAfterEffect = afterEffectOrRefresh;
+            }
+            if ((0, Utils_1.isBoolean)(destroyOrRefresh)) {
+                realRefresh = destroyOrRefresh;
+                realDestroy = undefined;
+            }
+            else {
+                realDestroy = destroyOrRefresh;
+            }
+            if ((0, Utils_1.isFunction)(drawer)) {
+                customDrawer = {
+                    afterEffect: realAfterEffect,
+                    destroy: realDestroy,
+                    draw: drawer,
+                    init: realInit,
+                };
+            }
+            else {
+                customDrawer = drawer;
+            }
+            (0, Utils_1.executeOnSingleOrMultiple)(shape, (type) => {
+                !this.getShapeDrawer(type) && this.drawers.set(type, customDrawer);
+            });
+            await this.refresh(realRefresh);
+        }
+        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._domArray;
+        }
+        domItem(index) {
+            const dom = this.dom(), item = dom[index];
+            if (!item || item.destroyed) {
+                dom.splice(index, 1);
+                return;
+            }
+            return item;
+        }
+        getAvailablePlugins(container) {
+            const res = new Map();
+            for (const plugin of this.plugins) {
+                plugin.needsPlugin(container.actualOptions) && res.set(plugin.id, plugin.getPlugin(container));
+            }
+            return res;
+        }
+        getInteractors(container, force = false) {
+            return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
+        }
+        getMovers(container, force = false) {
+            return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
+        }
+        getPathGenerator(type) {
+            return this.pathGenerators.get(type);
+        }
+        getPlugin(plugin) {
+            return this.plugins.find((t) => t.id === plugin);
+        }
+        getPreset(preset) {
+            return this.presets.get(preset);
+        }
+        getShapeDrawer(type) {
+            return this.drawers.get(type);
+        }
+        getSupportedShapes() {
+            return this.drawers.keys();
+        }
+        getUpdaters(container, force = false) {
+            return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
+        }
+        init() {
+            if (this._initialized) {
+                return;
+            }
+            this._initialized = true;
+        }
+        async load(params) {
+            const id = params.id ?? `tsparticles${Math.floor((0, NumberUtils_1.getRandom)() * 10000)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
+            let domContainer = params.element ?? document.getElementById(id);
+            if (!domContainer) {
+                domContainer = document.createElement("div");
+                domContainer.id = id;
+                document.body.append(domContainer);
+            }
+            const currentOptions = (0, Utils_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === id);
+            if (oldIndex >= 0) {
+                const old = this.domItem(oldIndex);
+                if (old && !old.destroyed) {
+                    old.destroy();
+                    dom.splice(oldIndex, 1);
+                }
+            }
+            let canvasEl;
+            if (domContainer.tagName.toLowerCase() === "canvas") {
+                canvasEl = domContainer;
+                canvasEl.dataset[Constants_1.generatedAttribute] = "false";
+            }
+            else {
+                const existingCanvases = domContainer.getElementsByTagName("canvas");
+                if (existingCanvases.length) {
+                    canvasEl = existingCanvases[0];
+                    canvasEl.dataset[Constants_1.generatedAttribute] = "false";
+                }
+                else {
+                    canvasEl = document.createElement("canvas");
+                    canvasEl.dataset[Constants_1.generatedAttribute] = "true";
+                    domContainer.appendChild(canvasEl);
+                }
+            }
+            if (!canvasEl.style.width) {
+                canvasEl.style.width = "100%";
+            }
+            if (!canvasEl.style.height) {
+                canvasEl.style.height = "100%";
+            }
+            const newItem = new Container_1.Container(this, id, currentOptions);
+            if (oldIndex >= 0) {
+                dom.splice(oldIndex, 0, newItem);
+            }
+            else {
+                dom.push(newItem);
+            }
+            newItem.canvas.loadCanvas(canvasEl);
+            await newItem.start();
+            return newItem;
+        }
+        loadOptions(options, sourceOptions) {
+            for (const plugin of this.plugins) {
+                plugin.loadOptions(options, sourceOptions);
+            }
+        }
+        loadParticlesOptions(container, options, ...sourceOptions) {
+            const updaters = this.updaters.get(container);
+            if (!updaters) {
+                return;
+            }
+            for (const updater of updaters) {
+                updater.loadOptions && updater.loadOptions(options, ...sourceOptions);
+            }
+        }
+        async refresh(refresh = true) {
+            if (!refresh) {
+                return;
+            }
+            this.dom().forEach((t) => t.refresh());
+        }
+        removeEventListener(type, listener) {
+            this._eventDispatcher.removeEventListener(type, listener);
+        }
+        setOnClickHandler(callback) {
+            const dom = this.dom();
+            if (!dom.length) {
+                throw new Error(`${Constants_1.errorPrefix} can only set click handlers after calling tsParticles.load()`);
+            }
+            for (const domItem of dom) {
+                domItem.addClickHandler(callback);
+            }
+        }
+    }
+    exports.Engine = Engine;
+});