@tsparticles/engine 3.3.0 → 3.5.0

package/types/Options/Classes/Options.d.ts

@@ -5,6 +5,7 @@ import type { Engine } from "../../Core/Engine.js";
 import { FullScreen } from "./FullScreen/FullScreen.js";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader.js";
 import type { IOptions } from "../Interfaces/IOptions.js";
+import type { ISourceOptions } from "../../Types/ISourceOptions.js";
 import { Interactivity } from "./Interactivity/Interactivity.js";
 import { ManualParticle } from "./ManualParticle.js";
 import type { RangeValue } from "../../Types/RangeValue.js";
@@ -44,7 +45,7 @@ export declare class Options implements IOptions, IOptionLoader<IOptions> {
     private readonly _container;
     private readonly _engine;
     constructor(engine: Engine, container: Container);
-    load(data?: RecursivePartial<IOptions>): void;
+    load(data?: ISourceOptions): void;
     setResponsive(width: number, pxRatio: number, defaultOptions: IOptions): number | undefined;
     setTheme(name?: string): void;
     private readonly _findDefaultTheme;

package/types/Options/Classes/Responsive.d.ts

@@ -1,12 +1,12 @@
 import type { IOptionLoader } from "../Interfaces/IOptionLoader.js";
-import type { IOptions } from "../Interfaces/IOptions.js";
 import type { IResponsive } from "../Interfaces/IResponsive.js";
+import type { ISourceOptions } from "../../Types/ISourceOptions.js";
 import type { RecursivePartial } from "../../Types/RecursivePartial.js";
 import { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
 export declare class Responsive implements IResponsive, IOptionLoader<IResponsive> {
     maxWidth: number;
     mode: ResponsiveMode | keyof typeof ResponsiveMode;
-    options: RecursivePartial<IOptions>;
+    options: ISourceOptions;
     constructor();
     load(data?: RecursivePartial<IResponsive>): void;
 }

package/types/Options/Classes/Theme/Theme.d.ts

@@ -1,12 +1,12 @@
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader.js";
-import type { IOptions } from "../../Interfaces/IOptions.js";
+import type { ISourceOptions } from "../../../Types/ISourceOptions.js";
 import type { ITheme } from "../../Interfaces/Theme/ITheme.js";
 import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
 import { ThemeDefault } from "./ThemeDefault.js";
 export declare class Theme implements ITheme, IOptionLoader<ITheme> {
     readonly default: ThemeDefault;
     name: string;
-    options?: RecursivePartial<IOptions>;
+    options?: ISourceOptions;
     constructor();
     load(data?: RecursivePartial<ITheme>): void;
 }

package/types/Options/Interfaces/IResponsive.d.ts

@@ -1,8 +1,7 @@
-import type { IOptions } from "./IOptions.js";
-import type { RecursivePartial } from "../../Types/RecursivePartial.js";
+import type { ISourceOptions } from "../../Types/ISourceOptions.js";
 import type { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
 export interface IResponsive {
     maxWidth: number;
     mode: ResponsiveMode | keyof typeof ResponsiveMode;
-    options: RecursivePartial<IOptions>;
+    options: ISourceOptions;
 }

package/types/Options/Interfaces/Theme/ITheme.d.ts

@@ -1,8 +1,7 @@
-import type { IOptions } from "../IOptions.js";
+import type { ISourceOptions } from "../../../Types/ISourceOptions.js";
 import type { IThemeDefault } from "./IThemeDefault.js";
-import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
 export interface ITheme {
     default: IThemeDefault;
     name: string;
-    options?: RecursivePartial<IOptions>;
+    options?: ISourceOptions;
 }

package/types/Types/RangeType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum RangeType {
+export declare enum RangeType {
     circle = "circle",
     rectangle = "rectangle"
 }

package/types/Utils/NumberUtils.d.ts

@@ -9,6 +9,9 @@ export declare function addEasing(name: EasingType | EasingTypeAlt, easing: Easi
 export declare function getEasing(name: EasingType | EasingTypeAlt): EasingFunction;
 export declare function setRandom(rnd?: () => number): void;
 export declare function getRandom(): number;
+export declare function setAnimationFunctions(nextFrame: (callback: FrameRequestCallback) => number, cancel: (handle: number) => void): void;
+export declare function animate(fn: FrameRequestCallback): number;
+export declare function cancelAnimation(handle: number): void;
 export declare function clamp(num: number, min: number, max: number): number;
 export declare function mix(comp1: number, comp2: number, weight1: number, weight2: number): number;
 export declare function randomInRange(r: RangeValue): number;

package/umd/Core/Canvas.js

@@ -43,7 +43,7 @@
     class Canvas {
         constructor(container) {
             this.container = container;
-            this._applyPostDrawUpdaters = (particle) => {
+            this._applyPostDrawUpdaters = particle => {
                 for (const updater of this._postDrawUpdaters) {
                     updater.afterDraw?.(particle);
                 }
@@ -73,7 +73,7 @@
                     plugin.resize?.();
                 }
             };
-            this._getPluginParticleColors = (particle) => {
+            this._getPluginParticleColors = particle => {
                 let fColor, sColor;
                 for (const plugin of this._colorPlugins) {
                     if (!fColor && plugin.particleFillColor) {
@@ -113,7 +113,7 @@
                             };
                             resolve();
                         });
-                        img.addEventListener("error", (evt) => {
+                        img.addEventListener("error", evt => {
                             reject(evt.error);
                         });
                         img.src = cover.image;
@@ -174,28 +174,33 @@
                             };
                             resolve();
                         });
-                        img.addEventListener("error", (evt) => {
+                        img.addEventListener("error", evt => {
                             reject(evt.error);
                         });
                         img.src = trailFill.image;
                     });
                 }
             };
-            this._paintBase = (baseColor) => {
-                this.draw((ctx) => (0, CanvasUtils_js_1.paintBase)(ctx, this.size, baseColor));
+            this._paintBase = baseColor => {
+                this.draw(ctx => (0, CanvasUtils_js_1.paintBase)(ctx, this.size, baseColor));
             };
             this._paintImage = (image, opacity) => {
-                this.draw((ctx) => (0, CanvasUtils_js_1.paintImage)(ctx, this.size, image, opacity));
+                this.draw(ctx => (0, CanvasUtils_js_1.paintImage)(ctx, this.size, image, opacity));
             };
             this._repairStyle = () => {
                 const element = this.element;
                 if (!element) {
                     return;
                 }
-                this._safeMutationObserver((observer) => observer.disconnect());
+                this._safeMutationObserver(observer => observer.disconnect());
                 this._initStyle();
                 this.initBackground();
-                this._safeMutationObserver((observer) => observer.observe(element, { attributes: true }));
+                this._safeMutationObserver(observer => {
+                    if (!element || !(element instanceof Node)) {
+                        return;
+                    }
+                    observer.observe(element, { attributes: true });
+                });
             };
             this._resetOriginalStyle = () => {
                 const element = this.element, originalStyle = this._originalStyle;
@@ -204,7 +209,7 @@
                 }
                 setStyle(element, originalStyle);
             };
-            this._safeMutationObserver = (callback) => {
+            this._safeMutationObserver = callback => {
                 if (!this._mutationObserver) {
                     return;
                 }
@@ -253,7 +258,7 @@
                 }
             }
             else if (options.clear) {
-                this.draw((ctx) => {
+                this.draw(ctx => {
                     (0, CanvasUtils_js_1.clear)(ctx, this.size);
                 });
             }
@@ -328,14 +333,14 @@
             });
         }
         drawParticlePlugin(plugin, particle, delta) {
-            this.draw((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
+            this.draw(ctx => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
         }
         drawPlugin(plugin, delta) {
-            this.draw((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
+            this.draw(ctx => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
         }
         async init() {
-            this._safeMutationObserver((obs) => obs.disconnect());
-            this._mutationObserver = (0, Utils_js_1.safeMutationObserver)((records) => {
+            this._safeMutationObserver(obs => obs.disconnect());
+            this._mutationObserver = (0, Utils_js_1.safeMutationObserver)(records => {
                 for (const record of records) {
                     if (record.type === "attributes" && record.attributeName === "style") {
                         this._repairStyle();
@@ -352,8 +357,8 @@
                 (0, Utils_js_1.getLogger)().error(e);
             }
             this.initBackground();
-            this._safeMutationObserver((obs) => {
-                if (!this.element) {
+            this._safeMutationObserver(obs => {
+                if (!this.element || !(this.element instanceof Node)) {
                     return;
                 }
                 obs.observe(this.element, { attributes: true });
@@ -420,8 +425,8 @@
             this.size.height = canvas.offsetHeight;
             this.size.width = canvas.offsetWidth;
             this._context = this.element.getContext("2d");
-            this._safeMutationObserver((obs) => {
-                if (!this.element) {
+            this._safeMutationObserver(obs => {
+                if (!this.element || !(this.element instanceof Node)) {
                     return;
                 }
                 obs.observe(this.element, { attributes: true });
@@ -431,7 +436,7 @@
         }
         paint() {
             const options = this.container.actualOptions;
-            this.draw((ctx) => {
+            this.draw(ctx => {
                 if (options.backgroundMask.enable && options.backgroundMask.cover) {
                     (0, CanvasUtils_js_1.clear)(ctx, this.size);
                     if (this._coverImage) {
@@ -475,9 +480,9 @@
             return true;
         }
         stop() {
-            this._safeMutationObserver((obs) => obs.disconnect());
+            this._safeMutationObserver(obs => obs.disconnect());
             this._mutationObserver = undefined;
-            this.draw((ctx) => (0, CanvasUtils_js_1.clear)(ctx, this.size));
+            this.draw(ctx => (0, CanvasUtils_js_1.clear)(ctx, this.size));
         }
         async windowResize() {
             if (!this.element || !this.resize()) {

package/umd/Core/Container.js

@@ -4,20 +4,21 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Constants.js", "../Utils/Utils.js", "./Canvas.js", "./Utils/EventListeners.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "../Utils/NumberUtils.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "../Utils/NumberUtils.js", "./Utils/Constants.js", "../Utils/Utils.js", "./Canvas.js", "./Utils/EventListeners.js", "../Enums/Types/EventType.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Container = void 0;
+    const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
     const Constants_js_1 = require("./Utils/Constants.js");
     const Utils_js_1 = require("../Utils/Utils.js");
     const Canvas_js_1 = require("./Canvas.js");
     const EventListeners_js_1 = require("./Utils/EventListeners.js");
+    const EventType_js_1 = require("../Enums/Types/EventType.js");
     const Options_js_1 = require("../Options/Classes/Options.js");
     const Particles_js_1 = require("./Particles.js");
     const Retina_js_1 = require("./Retina.js");
-    const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
     function guardCheck(container) {
         return container && !container.destroyed;
@@ -36,7 +37,7 @@
     }
     class Container {
         constructor(engine, id, sourceOptions) {
-            this._intersectionManager = (entries) => {
+            this._intersectionManager = entries => {
                 if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                     return;
                 }
@@ -95,6 +96,7 @@
             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);
@@ -113,8 +115,8 @@
             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("containerBuilt", { container: this });
+            this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)(entries => this._intersectionManager(entries));
+            this._engine.dispatchEvent(EventType_js_1.EventType.containerBuilt, { container: this });
         }
         get animationStatus() {
             return !this._paused && !this.pageHidden && guardCheck(this);
@@ -142,8 +144,7 @@
                     y: pos.y * pxRatio,
                 }, particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
                 callback(e, particles);
-            };
-            const clickHandler = (e) => {
+            }, clickHandler = (e) => {
                 if (!guardCheck(this)) {
                     return;
                 }
@@ -152,27 +153,23 @@
                     y: mouseEvent.offsetY || mouseEvent.clientY,
                 }, radius = 1;
                 clickOrTouchHandler(e, pos, radius);
-            };
-            const touchStartHandler = () => {
+            }, touchStartHandler = () => {
                 if (!guardCheck(this)) {
                     return;
                 }
                 touched = true;
                 touchMoved = false;
-            };
-            const touchMoveHandler = () => {
+            }, touchMoveHandler = () => {
                 if (!guardCheck(this)) {
                     return;
                 }
                 touchMoved = true;
-            };
-            const touchEndHandler = (e) => {
+            }, touchEndHandler = (e) => {
                 if (!guardCheck(this)) {
                     return;
                 }
                 if (touched && !touchMoved) {
-                    const touchEvent = e;
-                    const lengthOffset = 1;
+                    const touchEvent = e, lengthOffset = 1;
                     let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];
                     if (!lastTouch) {
                         lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];
@@ -188,8 +185,7 @@
                 }
                 touched = false;
                 touchMoved = false;
-            };
-            const touchCancelHandler = () => {
+            }, touchCancelHandler = () => {
                 if (!guardCheck(this)) {
                     return;
                 }
@@ -197,11 +193,14 @@
                 touchMoved = false;
             };
             let touched = false, touchMoved = false;
-            el.addEventListener("click", clickHandler);
-            el.addEventListener("touchstart", touchStartHandler);
-            el.addEventListener("touchmove", touchMoveHandler);
-            el.addEventListener("touchend", touchEndHandler);
-            el.addEventListener("touchcancel", touchCancelHandler);
+            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;
@@ -216,11 +215,21 @@
         alive() {
             return !this._duration || this._lifeTime <= this._duration;
         }
-        destroy() {
+        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) {
@@ -237,12 +246,14 @@
             }
             this._engine.clearPlugins(this);
             this.destroyed = true;
-            const mainArr = this._engine.dom(), idx = mainArr.findIndex((t) => t === this), minIndex = 0;
-            if (idx >= minIndex) {
-                const deleteCount = 1;
-                mainArr.splice(idx, deleteCount);
+            if (remove) {
+                const mainArr = this._engine.items, idx = mainArr.findIndex(t => t === this), minIndex = 0;
+                if (idx >= minIndex) {
+                    const deleteCount = 1;
+                    mainArr.splice(idx, deleteCount);
+                }
             }
-            this._engine.dispatchEvent("containerDestroyed", { container: this });
+            this._engine.dispatchEvent(EventType_js_1.EventType.containerDestroyed, { container: this });
         }
         draw(force) {
             if (!guardCheck(this)) {
@@ -256,7 +267,7 @@
                 }
                 this._nextFrame(timestamp);
             };
-            this._drawAnimationFrame = requestAnimationFrame((timestamp) => frame(timestamp));
+            this._drawAnimationFrame = (0, NumberUtils_js_1.animate)(timestamp => frame(timestamp));
         }
         async export(type, options = {}) {
             for (const [, plugin] of this.plugins) {
@@ -310,13 +321,14 @@
             this.updateActualOptions();
             this.canvas.initBackground();
             this.canvas.resize();
-            this.zLayers = this.actualOptions.zLayers;
-            this._duration = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.duration) * Constants_js_1.millisecondsToSeconds;
-            this._delay = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.delay) * Constants_js_1.millisecondsToSeconds;
+            const { zLayers, duration, delay, fpsLimit, smooth } = this.actualOptions;
+            this.zLayers = zLayers;
+            this._duration = (0, NumberUtils_js_1.getRangeValue)(duration) * Constants_js_1.millisecondsToSeconds;
+            this._delay = (0, NumberUtils_js_1.getRangeValue)(delay) * Constants_js_1.millisecondsToSeconds;
             this._lifeTime = 0;
             const defaultFpsLimit = 120, minFpsLimit = 0;
-            this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;
-            this._smooth = this.actualOptions.smooth;
+            this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
+            this._smooth = smooth;
             for (const [, drawer] of this.effectDrawers) {
                 await drawer.init?.(this);
             }
@@ -326,13 +338,13 @@
             for (const [, plugin] of this.plugins) {
                 await plugin.init?.();
             }
-            this._engine.dispatchEvent("containerInit", { container: this });
+            this._engine.dispatchEvent(EventType_js_1.EventType.containerInit, { container: this });
             await this.particles.init();
             this.particles.setDensity();
             for (const [, plugin] of this.plugins) {
                 plugin.particlesSetup?.();
             }
-            this._engine.dispatchEvent("particlesSetup", { container: this });
+            this._engine.dispatchEvent(EventType_js_1.EventType.particlesSetup, { container: this });
         }
         async loadTheme(name) {
             if (!guardCheck(this)) {
@@ -346,7 +358,7 @@
                 return;
             }
             if (this._drawAnimationFrame !== undefined) {
-                cancelAnimationFrame(this._drawAnimationFrame);
+                (0, NumberUtils_js_1.cancelAnimation)(this._drawAnimationFrame);
                 delete this._drawAnimationFrame;
             }
             if (this._paused) {
@@ -358,7 +370,7 @@
             if (!this.pageHidden) {
                 this._paused = true;
             }
-            this._engine.dispatchEvent("containerPaused", { container: this });
+            this._engine.dispatchEvent(EventType_js_1.EventType.containerPaused, { container: this });
         }
         play(force) {
             if (!guardCheck(this)) {
@@ -379,7 +391,7 @@
                     }
                 }
             }
-            this._engine.dispatchEvent("containerPlay", { container: this });
+            this._engine.dispatchEvent(EventType_js_1.EventType.containerPlay, { container: this });
             this.draw(needsUpdate ?? false);
         }
         async refresh() {
@@ -389,12 +401,13 @@
             this.stop();
             return this.start();
         }
-        async reset() {
+        async reset(sourceOptions) {
             if (!guardCheck(this)) {
                 return;
             }
-            this._initialSourceOptions = undefined;
-            this._options = loadContainerOptions(this._engine, this);
+            this._initialSourceOptions = sourceOptions;
+            this._sourceOptions = sourceOptions;
+            this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
             this.actualOptions = loadContainerOptions(this._engine, this, this._options);
             return this.refresh();
         }
@@ -404,7 +417,7 @@
             }
             await this.init();
             this.started = true;
-            await new Promise((resolve) => {
+            await new Promise(resolve => {
                 const start = async () => {
                     this._eventListeners.addListeners();
                     if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
@@ -413,7 +426,7 @@
                     for (const [, plugin] of this.plugins) {
                         await plugin.start?.();
                     }
-                    this._engine.dispatchEvent("containerStarted", { container: this });
+                    this._engine.dispatchEvent(EventType_js_1.EventType.containerStarted, { container: this });
                     this.play();
                     resolve();
                 };
@@ -444,7 +457,7 @@
                 this.plugins.delete(key);
             }
             this._sourceOptions = this._options;
-            this._engine.dispatchEvent("containerStopped", { container: this });
+            this._engine.dispatchEvent(EventType_js_1.EventType.containerStopped, { container: this });
         }
         updateActualOptions() {
             this.actualOptions.responsive = [];