@tsparticles/engine 3.3.0 → 3.4.0

package/browser/Utils/Utils.js

@@ -1,6 +1,12 @@
 import { clamp, collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRange, } from "./NumberUtils.js";
 import { halfRandom, millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
 import { isArray, isObject } from "./TypeUtils.js";
+import { AnimationMode } from "../Enums/Modes/AnimationMode.js";
+import { AnimationStatus } from "../Enums/AnimationStatus.js";
+import { DestroyType } from "../Enums/Types/DestroyType.js";
+import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
+import { PixelMode } from "../Enums/Modes/PixelMode.js";
+import { StartValueType } from "../Enums/Types/StartValueType.js";
 import { Vector } from "../Core/Utils/Vectors.js";
 const _logger = {
     debug: console.debug,
@@ -37,10 +43,10 @@ function rectSideBounce(data) {
     return res;
 }
 function checkSelector(element, selectors) {
-    const res = executeOnSingleOrMultiple(selectors, (selector) => {
+    const res = executeOnSingleOrMultiple(selectors, selector => {
         return element.matches(selector);
     });
-    return isArray(res) ? res.some((t) => t) : res;
+    return isArray(res) ? res.some(t => t) : res;
 }
 export function isSsr() {
     return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
@@ -89,16 +95,16 @@ export function isPointInside(point, size, offset, radius, direction) {
 }
 export function areBoundsInside(bounds, size, offset, direction) {
     let inside = true;
-    if (!direction || direction === "bottom") {
+    if (!direction || direction === OutModeDirection.bottom) {
         inside = bounds.top < size.height + offset.x;
     }
-    if (inside && (!direction || direction === "left")) {
+    if (inside && (!direction || direction === OutModeDirection.left)) {
         inside = bounds.right > offset.x;
     }
-    if (inside && (!direction || direction === "right")) {
+    if (inside && (!direction || direction === OutModeDirection.right)) {
         inside = bounds.left < size.width + offset.y;
     }
-    if (inside && (!direction || direction === "top")) {
+    if (inside && (!direction || direction === OutModeDirection.top)) {
         inside = bounds.bottom > offset.y;
     }
     return inside;
@@ -134,17 +140,17 @@ export function deepExtend(destination, ...sources) {
             const sourceDict = source, value = sourceDict[key], destDict = destination;
             destDict[key] =
                 isObject(value) && Array.isArray(value)
-                    ? value.map((v) => deepExtend(destDict[key], v))
+                    ? value.map(v => deepExtend(destDict[key], v))
                     : deepExtend(destDict[key], value);
         }
     }
     return destination;
 }
 export function isDivModeEnabled(mode, divs) {
-    return !!findItemFromSingleOrMultiple(divs, (t) => t.enable && isInArray(mode, t.mode));
+    return !!findItemFromSingleOrMultiple(divs, t => t.enable && isInArray(mode, t.mode));
 }
 export function divModeExecute(mode, divs, callback) {
-    executeOnSingleOrMultiple(divs, (div) => {
+    executeOnSingleOrMultiple(divs, div => {
         const divMode = div.mode, divEnabled = div.enable;
         if (divEnabled && isInArray(mode, divMode)) {
             singleDivModeExecute(div, callback);
@@ -153,7 +159,7 @@ export function divModeExecute(mode, divs, callback) {
 }
 export function singleDivModeExecute(div, callback) {
     const selectors = div.selectors;
-    executeOnSingleOrMultiple(selectors, (selector) => {
+    executeOnSingleOrMultiple(selectors, selector => {
         callback(selector, div);
     });
 }
@@ -161,7 +167,7 @@ export function divMode(divs, element) {
     if (!element || !divs) {
         return;
     }
-    return findItemFromSingleOrMultiple(divs, (div) => {
+    return findItemFromSingleOrMultiple(divs, div => {
         return checkSelector(element, div.selectors);
     });
 }
@@ -271,35 +277,35 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
     if (animationOptions.enable) {
         res.decay = decayOffset - getRangeValue(animationOptions.decay);
         switch (animationOptions.mode) {
-            case "increase":
-                res.status = "increasing";
+            case AnimationMode.increase:
+                res.status = AnimationStatus.increasing;
                 break;
-            case "decrease":
-                res.status = "decreasing";
+            case AnimationMode.decrease:
+                res.status = AnimationStatus.decreasing;
                 break;
-            case "random":
-                res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
+            case AnimationMode.random:
+                res.status = getRandom() >= halfRandom ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 break;
         }
-        const autoStatus = animationOptions.mode === "auto";
+        const autoStatus = animationOptions.mode === AnimationMode.auto;
         switch (animationOptions.startValue) {
-            case "min":
+            case StartValueType.min:
                 res.value = res.min;
                 if (autoStatus) {
-                    res.status = "increasing";
+                    res.status = AnimationStatus.increasing;
                 }
                 break;
-            case "max":
+            case StartValueType.max:
                 res.value = res.max;
                 if (autoStatus) {
-                    res.status = "decreasing";
+                    res.status = AnimationStatus.decreasing;
                 }
                 break;
-            case "random":
+            case StartValueType.random:
             default:
                 res.value = randomInRange(res);
                 if (autoStatus) {
-                    res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
+                    res.status = getRandom() >= halfRandom ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 }
                 break;
         }
@@ -308,7 +314,7 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
     return res;
 }
 function getPositionOrSize(positionOrSize, canvasSize) {
-    const isPercent = positionOrSize.mode === "percent";
+    const isPercent = positionOrSize.mode === PixelMode.percent;
     if (!isPercent) {
         const { mode: _, ...rest } = positionOrSize;
         return rest;
@@ -335,12 +341,12 @@ export function getSize(size, canvasSize) {
 }
 function checkDestroy(particle, destroyType, value, minValue, maxValue) {
     switch (destroyType) {
-        case "max":
+        case DestroyType.max:
             if (value >= maxValue) {
                 particle.destroy();
             }
             break;
-        case "min":
+        case DestroyType.min:
             if (value <= minValue) {
                 particle.destroy();
             }
@@ -366,10 +372,10 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
         return;
     }
     switch (data.status) {
-        case "increasing":
+        case AnimationStatus.increasing:
             if (data.value >= maxValue) {
                 if (changeDirection) {
-                    data.status = "decreasing";
+                    data.status = AnimationStatus.decreasing;
                 }
                 else {
                     data.value -= maxValue;
@@ -383,10 +389,10 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
                 data.value += velocity;
             }
             break;
-        case "decreasing":
+        case AnimationStatus.decreasing:
             if (data.value <= minValue) {
                 if (changeDirection) {
-                    data.status = "increasing";
+                    data.status = AnimationStatus.increasing;
                 }
                 else {
                     data.value += maxValue;

package/cjs/Core/Canvas.js

@@ -34,7 +34,7 @@ function setStyle(canvas, style, important = false) {
 class Canvas {
     constructor(container) {
         this.container = container;
-        this._applyPostDrawUpdaters = (particle) => {
+        this._applyPostDrawUpdaters = particle => {
             for (const updater of this._postDrawUpdaters) {
                 updater.afterDraw?.(particle);
             }
@@ -64,7 +64,7 @@ class Canvas {
                 plugin.resize?.();
             }
         };
-        this._getPluginParticleColors = (particle) => {
+        this._getPluginParticleColors = particle => {
             let fColor, sColor;
             for (const plugin of this._colorPlugins) {
                 if (!fColor && plugin.particleFillColor) {
@@ -104,7 +104,7 @@ class Canvas {
                         };
                         resolve();
                     });
-                    img.addEventListener("error", (evt) => {
+                    img.addEventListener("error", evt => {
                         reject(evt.error);
                     });
                     img.src = cover.image;
@@ -165,28 +165,33 @@ class Canvas {
                         };
                         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;
@@ -195,7 +200,7 @@ class Canvas {
             }
             setStyle(element, originalStyle);
         };
-        this._safeMutationObserver = (callback) => {
+        this._safeMutationObserver = callback => {
             if (!this._mutationObserver) {
                 return;
             }
@@ -244,7 +249,7 @@ class Canvas {
             }
         }
         else if (options.clear) {
-            this.draw((ctx) => {
+            this.draw(ctx => {
                 (0, CanvasUtils_js_1.clear)(ctx, this.size);
             });
         }
@@ -319,14 +324,14 @@ class Canvas {
         });
     }
     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();
@@ -343,8 +348,8 @@ class Canvas {
             (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 });
@@ -411,8 +416,8 @@ class Canvas {
         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 });
@@ -422,7 +427,7 @@ class Canvas {
     }
     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) {
@@ -466,9 +471,9 @@ class Canvas {
         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/cjs/Core/Container.js

@@ -5,6 +5,7 @@ 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");
@@ -27,7 +28,7 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 class Container {
     constructor(engine, id, sourceOptions) {
-        this._intersectionManager = (entries) => {
+        this._intersectionManager = entries => {
             if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                 return;
             }
@@ -86,6 +87,7 @@ class Container {
         this._lastFrameTime = 0;
         this.zLayers = 100;
         this.pageHidden = false;
+        this._clickHandlers = new Map();
         this._sourceOptions = sourceOptions;
         this._initialSourceOptions = sourceOptions;
         this.retina = new Retina_js_1.Retina(this);
@@ -104,8 +106,8 @@ class Container {
         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);
@@ -133,8 +135,7 @@ class Container {
                 y: pos.y * pxRatio,
             }, particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
             callback(e, particles);
-        };
-        const clickHandler = (e) => {
+        }, clickHandler = (e) => {
             if (!guardCheck(this)) {
                 return;
             }
@@ -143,27 +144,23 @@ class Container {
                 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];
@@ -179,8 +176,7 @@ class Container {
             }
             touched = false;
             touchMoved = false;
-        };
-        const touchCancelHandler = () => {
+        }, touchCancelHandler = () => {
             if (!guardCheck(this)) {
                 return;
             }
@@ -188,11 +184,14 @@ class Container {
             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;
@@ -207,11 +206,21 @@ class Container {
     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) {
@@ -228,12 +237,14 @@ class Container {
         }
         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)) {
@@ -247,7 +258,7 @@ class Container {
             }
             this._nextFrame(timestamp);
         };
-        this._drawAnimationFrame = requestAnimationFrame((timestamp) => frame(timestamp));
+        this._drawAnimationFrame = requestAnimationFrame(timestamp => frame(timestamp));
     }
     async export(type, options = {}) {
         for (const [, plugin] of this.plugins) {
@@ -301,13 +312,14 @@ class Container {
         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);
         }
@@ -317,13 +329,13 @@ class Container {
         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)) {
@@ -349,7 +361,7 @@ class Container {
         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)) {
@@ -370,7 +382,7 @@ class Container {
                 }
             }
         }
-        this._engine.dispatchEvent("containerPlay", { container: this });
+        this._engine.dispatchEvent(EventType_js_1.EventType.containerPlay, { container: this });
         this.draw(needsUpdate ?? false);
     }
     async refresh() {
@@ -380,12 +392,13 @@ class Container {
         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();
     }
@@ -395,7 +408,7 @@ class Container {
         }
         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) {
@@ -404,7 +417,7 @@ class Container {
                 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();
             };
@@ -435,7 +448,7 @@ class Container {
             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 = [];