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

package/browser/Core/Container.js

@@ -1,42 +1,75 @@
-import { animate, cancelAnimation } from "../Utils/Utils";
-import { Canvas } from "./Canvas";
-import { EventListeners } from "./Utils/EventListeners";
-import { FrameManager } from "./Utils/FrameManager";
-import { Options } from "../Options/Classes/Options";
-import { Particles } from "./Particles";
-import { Retina } from "./Retina";
-import { getRangeValue } from "../Utils/NumberUtils";
-import { loadOptions } from "../Utils/OptionsUtils";
+import { Canvas } from "./Canvas.js";
+import { EventListeners } from "./Utils/EventListeners.js";
+import { Options } from "../Options/Classes/Options.js";
+import { Particles } from "./Particles.js";
+import { Retina } from "./Retina.js";
+import { errorPrefix } from "./Utils/Constants.js";
+import { getLogger } from "../Utils/Utils.js";
+import { getRangeValue } from "../Utils/NumberUtils.js";
+import { loadOptions } from "../Utils/OptionsUtils.js";
 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(engine, container);
     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: () => {
-    },
-};
 export 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) {
+                getLogger().error(`${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;
@@ -49,7 +82,6 @@ export class Container {
         this.retina = new Retina(this);
         this.canvas = new Canvas(this);
         this.particles = new Particles(this._engine, this);
-        this.frameManager = new FrameManager(this);
         this.pathGenerators = new Map();
         this.interactivity = {
             mouse: {
@@ -150,13 +182,19 @@ export class Container {
         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;
@@ -165,14 +203,12 @@ export class Container {
         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) {
@@ -185,30 +221,26 @@ export class Container {
             return;
         }
         let refreshTime = force;
-        this._drawAnimationFrame = 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);
+        getLogger().error(`${errorPrefix} - Export plugin with type ${type} not found`);
     }
     getAnimationStatus() {
         return !this._paused && !this.pageHidden && guardCheck(this);
@@ -219,53 +251,48 @@ export class Container {
         }
         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 = getRangeValue(this.actualOptions.duration) * 1000;
+        this._duration = getRangeValue(this.actualOptions.duration) * 1000;
         this._delay = 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 });
     }
@@ -281,16 +308,14 @@ export class Container {
             return;
         }
         if (this._drawAnimationFrame !== undefined) {
-            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;
@@ -330,37 +355,11 @@ export class Container {
         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;
@@ -374,9 +373,7 @@ export class Container {
                     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();
@@ -397,14 +394,12 @@ export class Container {
         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);
@@ -422,15 +417,4 @@ export class Container {
         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)();
-        }
-    }
 }

package/browser/Core/Engine.js

@@ -0,0 +1,271 @@
+import { errorPrefix, generatedAttribute } from "./Utils/Constants.js";
+import { executeOnSingleOrMultiple, getLogger, isBoolean, isFunction, isString, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
+import { Container } from "./Container.js";
+import { EventDispatcher } from "../Utils/EventDispatcher.js";
+import { getRandom } from "../Utils/NumberUtils.js";
+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 = itemFromSingleOrMultiple(data.url, data.index);
+    if (!url) {
+        return data.fallback;
+    }
+    const response = await fetch(url);
+    if (response.ok) {
+        return response.json();
+    }
+    getLogger().error(`${errorPrefix} ${response.status} while retrieving config file`);
+    return data.fallback;
+}
+export class Engine {
+    constructor() {
+        this._configs = new Map();
+        this._domArray = [];
+        this._eventDispatcher = new 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.1";
+    }
+    addConfig(nameOrConfig, config) {
+        if (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 (isBoolean(initOrRefresh)) {
+            realRefresh = initOrRefresh;
+            realInit = undefined;
+        }
+        else {
+            realInit = initOrRefresh;
+        }
+        if (isBoolean(afterEffectOrRefresh)) {
+            realRefresh = afterEffectOrRefresh;
+            realAfterEffect = undefined;
+        }
+        else {
+            realAfterEffect = afterEffectOrRefresh;
+        }
+        if (isBoolean(destroyOrRefresh)) {
+            realRefresh = destroyOrRefresh;
+            realDestroy = undefined;
+        }
+        else {
+            realDestroy = destroyOrRefresh;
+        }
+        if (isFunction(drawer)) {
+            customDrawer = {
+                afterEffect: realAfterEffect,
+                destroy: realDestroy,
+                draw: drawer,
+                init: realInit,
+            };
+        }
+        else {
+            customDrawer = drawer;
+        }
+        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(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 = 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[generatedAttribute] = "false";
+        }
+        else {
+            const existingCanvases = domContainer.getElementsByTagName("canvas");
+            if (existingCanvases.length) {
+                canvasEl = existingCanvases[0];
+                canvasEl.dataset[generatedAttribute] = "false";
+            }
+            else {
+                canvasEl = document.createElement("canvas");
+                canvasEl.dataset[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(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(`${errorPrefix} can only set click handlers after calling tsParticles.load()`);
+        }
+        for (const domItem of dom) {
+            domItem.addClickHandler(callback);
+        }
+    }
+}