tsparticles 1.42.2 → 1.43.0

package/types/index.slim.d.ts

@@ -0,0 +1,102 @@
+import { Engine } from "./engine";
+import type { IOptions } from "./Options/Interfaces/IOptions";
+import type { RecursivePartial } from "./Types/RecursivePartial";
+declare const tsParticles: Engine;
+declare const particlesJS: import("./pjs").IParticlesJS, pJSDom: import("./Core/Container").Container[];
+export * from "./Core/Interfaces/Colors";
+export * from "./Core/Interfaces/Gradients";
+export * from "./Core/Interfaces/IBounds";
+export * from "./Core/Interfaces/IBubbleParticleData";
+export * from "./Core/Interfaces/ICircleBouncer";
+export * from "./Core/Interfaces/IContainerInteractivity";
+export * from "./Core/Interfaces/IContainerPlugin";
+export * from "./Core/Interfaces/ICoordinates";
+export * from "./Core/Interfaces/IDelta";
+export * from "./Core/Interfaces/IDimension";
+export * from "./Core/Interfaces/IDistance";
+export * from "./Core/Interfaces/IExternalInteractor";
+export * from "./Core/Interfaces/IInteractor";
+export * from "./Core/Interfaces/IMouseData";
+export * from "./Core/Interfaces/IMovePathGenerator";
+export * from "./Core/Interfaces/IParticle";
+export * from "./Core/Interfaces/IParticleColorStyle";
+export * from "./Core/Interfaces/IParticleGravity";
+export * from "./Core/Interfaces/IParticleHslAnimation";
+export * from "./Core/Interfaces/IParticlesInteractor";
+export * from "./Core/Interfaces/IParticleLife";
+export * from "./Core/Interfaces/IParticleLoops";
+export * from "./Core/Interfaces/IParticleRetinaProps";
+export * from "./Core/Interfaces/IParticleRoll";
+export * from "./Core/Interfaces/IParticleSpin";
+export * from "./Core/Interfaces/IParticleUpdater";
+export * from "./Core/Interfaces/IParticleValueAnimation";
+export * from "./Core/Interfaces/IParticleWobble";
+export * from "./Core/Interfaces/IParticlesMover";
+export * from "./Core/Interfaces/IPlugin";
+export * from "./Core/Interfaces/IRangeValue";
+export * from "./Core/Interfaces/IRectSideResult";
+export * from "./Core/Interfaces/IShapeDrawer";
+export * from "./Core/Interfaces/IShapeValues";
+export * from "./Core/Utils/Circle";
+export * from "./Core/Utils/CircleWarp";
+export * from "./Core/Utils/Constants";
+export * from "./Core/Utils/EventListeners";
+export * from "./Core/Utils/ExternalInteractorBase";
+export * from "./Core/Utils/FrameManager";
+export * from "./Core/Utils/InteractionManager";
+export * from "./Core/Utils/ParticlesInteractorBase";
+export * from "./Core/Utils/Plugins";
+export * from "./Core/Utils/Point";
+export * from "./Core/Utils/QuadTree";
+export * from "./Core/Utils/Range";
+export * from "./Core/Utils/Rectangle";
+export * from "./Core/Utils/Vector";
+export * from "./Core/Utils/Vector3d";
+export * from "./Core/Canvas";
+export * from "./Core/Container";
+export * from "./Core/Loader";
+export * from "./Core/Particle";
+export * from "./Core/Particles";
+export * from "./Core/Retina";
+export * from "./Enums/Directions/MoveDirection";
+export * from "./Enums/Directions/RotateDirection";
+export * from "./Enums/Directions/OutModeDirection";
+export * from "./Enums/Directions/TiltDirection";
+export * from "./Enums/Modes/ClickMode";
+export * from "./Enums/Modes/DestroyMode";
+export * from "./Enums/Modes/DivMode";
+export * from "./Enums/Modes/HoverMode";
+export * from "./Enums/Modes/CollisionMode";
+export * from "./Enums/Modes/OutMode";
+export * from "./Enums/Modes/RollMode";
+export * from "./Enums/Modes/SizeMode";
+export * from "./Enums/Modes/ThemeMode";
+export * from "./Enums/Modes/ResponsiveMode";
+export * from "./Enums/Types/AlterType";
+export * from "./Enums/Types/DestroyType";
+export * from "./Enums/Types/GradientType";
+export * from "./Enums/Types/InteractorType";
+export * from "./Enums/Types/ShapeType";
+export * from "./Enums/Types/StartValueType";
+export * from "./Enums/Types/DivType";
+export * from "./Enums/Types/EasingType";
+export * from "./Enums/AnimationStatus";
+export * from "./Enums/InteractivityDetect";
+export { Engine, Engine as Main };
+export * from "./Options/Classes/Options";
+export * from "./Options/Classes/OptionsColor";
+export * from "./Options/Interfaces/IOptionLoader";
+export * from "./Types/RangeValue";
+export * from "./Types/RecursivePartial";
+export * from "./Types/ShapeData";
+export * from "./Types/ShapeDrawerFunctions";
+export * from "./Types/SingleOrMultiple";
+export * from "./Types/PathOptions";
+export * from "./Utils/CanvasUtils";
+export * from "./Utils/ColorUtils";
+export * from "./Utils/NumberUtils";
+export * from "./Utils/Utils";
+export { tsParticles, particlesJS, pJSDom };
+export { IOptions };
+export declare type ISourceOptions = RecursivePartial<IOptions>;
+export { IParticleColorStyle } from "./Core/Interfaces/IParticleColorStyle";

package/types/pjs.d.ts

@@ -0,0 +1,14 @@
+import type { Container } from "./Core/Container";
+import type { Engine } from "./engine";
+import type { IOptions } from "./Options/Interfaces/IOptions";
+import type { RecursivePartial } from "./Types/RecursivePartial";
+export interface IParticlesJS {
+    (tagId: string, options: RecursivePartial<IOptions>): Promise<Container | undefined>;
+    load(tagId: string, pathConfigJson: string, callback: (container?: Container) => void): void;
+    setOnClickHandler(callback: EventListenerOrEventListenerObject): void;
+}
+declare const initPjs: (engine: Engine) => {
+    particlesJS: IParticlesJS;
+    pJSDom: Container[];
+};
+export { initPjs };

package/umd/Core/Canvas.js

@@ -4,14 +4,16 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils", "./Utils"], factory);
+        define(["require", "exports", "../Utils/CanvasUtils", "../Utils/ColorUtils", "./Utils/Constants", "../Utils/Utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Canvas = void 0;
-    const Utils_1 = require("../Utils");
-    const Utils_2 = require("./Utils");
+    const CanvasUtils_1 = require("../Utils/CanvasUtils");
+    const ColorUtils_1 = require("../Utils/ColorUtils");
+    const Constants_1 = require("./Utils/Constants");
+    const Utils_1 = require("../Utils/Utils");
     class Canvas {
         constructor(container) {
             this.container = container;
@@ -36,8 +38,8 @@
                 (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
             }
             this.generatedCanvas =
-                canvas.dataset && Utils_2.Constants.generatedAttribute in canvas.dataset
-                    ? canvas.dataset[Utils_2.Constants.generatedAttribute] === "true"
+                canvas.dataset && Constants_1.Constants.generatedAttribute in canvas.dataset
+                    ? canvas.dataset[Constants_1.Constants.generatedAttribute] === "true"
                     : this.generatedCanvas;
             this.element = canvas;
             this.originalStyle = (0, Utils_1.deepExtend)({}, this.element.style);
@@ -53,14 +55,14 @@
                 (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
             }
             this.draw((ctx) => {
-                (0, Utils_1.clear)(ctx, this.size);
+                (0, CanvasUtils_1.clear)(ctx, this.size);
             });
         }
         paint() {
             const options = this.container.actualOptions;
             this.draw((ctx) => {
                 if (options.backgroundMask.enable && options.backgroundMask.cover) {
-                    (0, Utils_1.clear)(ctx, this.size);
+                    (0, CanvasUtils_1.clear)(ctx, this.size);
                     this.paintBase(this.coverColorStyle);
                 }
                 else {
@@ -69,17 +71,16 @@
             });
         }
         clear() {
-            const options = this.container.actualOptions;
-            const trail = options.particles.move.trail;
+            const options = this.container.actualOptions, trail = options.particles.move.trail;
             if (options.backgroundMask.enable) {
                 this.paint();
             }
             else if (trail.enable && trail.length > 0 && this.trailFillColor) {
-                this.paintBase((0, Utils_1.getStyleFromRgb)(this.trailFillColor, 1 / trail.length));
+                this.paintBase((0, ColorUtils_1.getStyleFromRgb)(this.trailFillColor, 1 / trail.length));
             }
             else {
                 this.draw((ctx) => {
-                    (0, Utils_1.clear)(ctx, this.size);
+                    (0, CanvasUtils_1.clear)(ctx, this.size);
                 });
             }
         }
@@ -87,9 +88,8 @@
             if (!this.element) {
                 return;
             }
-            const container = this.container;
             this.resize();
-            const needsRefresh = container.updateActualOptions();
+            const container = this.container, needsRefresh = container.updateActualOptions();
             container.particles.setDensity();
             for (const [, plugin] of container.plugins) {
                 if (plugin.resize !== undefined) {
@@ -104,14 +104,19 @@
             if (!this.element) {
                 return;
             }
-            const container = this.container;
-            const pxRatio = container.retina.pixelRatio;
-            const size = container.canvas.size;
+            const container = this.container, pxRatio = container.retina.pixelRatio, size = container.canvas.size, newSize = {
+                width: this.element.offsetWidth * pxRatio,
+                height: this.element.offsetHeight * pxRatio,
+            };
+            if (newSize.height === size.height &&
+                newSize.width === size.width &&
+                newSize.height === this.element.height &&
+                newSize.width === this.element.width) {
+                return;
+            }
             const oldSize = Object.assign({}, size);
-            size.width = this.element.offsetWidth * pxRatio;
-            size.height = this.element.offsetHeight * pxRatio;
-            this.element.width = size.width;
-            this.element.height = size.height;
+            this.element.width = size.width = this.element.offsetWidth * pxRatio;
+            this.element.height = size.height = this.element.offsetHeight * pxRatio;
             if (this.container.started) {
                 this.resizeFactor = {
                     width: size.width / oldSize.width,
@@ -126,9 +131,8 @@
                 if (!lineStyle) {
                     return;
                 }
-                const pos1 = p1.getPosition();
-                const pos2 = p2.getPosition();
-                (0, Utils_1.drawConnectLine)(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
+                const pos1 = p1.getPosition(), pos2 = p2.getPosition();
+                (0, CanvasUtils_1.drawConnectLine)(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
             });
         }
         drawGrabLine(particle, lineColor, opacity, mousePos) {
@@ -136,7 +140,7 @@
             this.draw((ctx) => {
                 var _a;
                 const beginPos = particle.getPosition();
-                (0, Utils_1.drawGrabLine)(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
+                (0, CanvasUtils_1.drawGrabLine)(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
             });
         }
         drawParticle(particle, delta) {
@@ -144,51 +148,45 @@
             if (particle.spawning || particle.destroyed) {
                 return;
             }
-            const pfColor = particle.getFillColor();
-            const psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
+            const radius = particle.getRadius();
+            if (radius <= 0) {
+                return;
+            }
+            const pfColor = particle.getFillColor(), psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
             if (!pfColor && !psColor) {
                 return;
             }
             let [fColor, sColor] = this.getPluginParticleColors(particle);
-            const pOptions = particle.options;
-            const twinkle = pOptions.twinkle.particles;
-            const twinkling = twinkle.enable && Math.random() < twinkle.frequency;
             if (!fColor || !sColor) {
-                const twinkleRgb = (0, Utils_1.colorToHsl)(twinkle.color);
                 if (!fColor) {
-                    fColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : pfColor ? pfColor : undefined;
+                    fColor = pfColor ? pfColor : undefined;
                 }
                 if (!sColor) {
-                    sColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : psColor ? psColor : undefined;
+                    sColor = psColor ? psColor : undefined;
                 }
             }
-            const options = this.container.actualOptions;
-            const zIndexOptions = particle.options.zIndex;
-            const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
-            const radius = particle.getRadius();
-            const opacity = twinkling
-                ? (0, Utils_1.getRangeValue)(twinkle.opacity)
-                : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
-            const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
-            const zOpacity = opacity * zOpacityFactor;
-            const fillColorValue = fColor ? (0, Utils_1.getStyleFromHsl)(fColor, zOpacity) : undefined;
-            if (!fillColorValue && !sColor) {
-                return;
-            }
+            const options = this.container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1, strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor;
+            const colorStyles = {
+                fill: fColor ? (0, ColorUtils_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
+            };
+            colorStyles.stroke = sColor ? (0, ColorUtils_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
             this.draw((ctx) => {
-                const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
-                const zStrokeOpacity = strokeOpacity * zOpacityFactor;
-                const strokeColorValue = sColor ? (0, Utils_1.getStyleFromHsl)(sColor, zStrokeOpacity) : fillColorValue;
-                if (radius <= 0) {
-                    return;
-                }
-                const container = this.container;
+                const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate, container = this.container;
                 for (const updater of container.particles.updaters) {
                     if (updater.beforeDraw) {
                         updater.beforeDraw(particle);
                     }
+                    if (updater.getColorStyles) {
+                        const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
+                        if (fill) {
+                            colorStyles.fill = fill;
+                        }
+                        if (stroke) {
+                            colorStyles.stroke = stroke;
+                        }
+                    }
                 }
-                (0, Utils_1.drawParticle)(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
+                (0, CanvasUtils_1.drawParticle)(container, ctx, particle, delta, colorStyles, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow);
                 for (const updater of container.particles.updaters) {
                     if (updater.afterDraw) {
                         updater.afterDraw(particle);
@@ -198,25 +196,22 @@
         }
         drawPlugin(plugin, delta) {
             this.draw((ctx) => {
-                (0, Utils_1.drawPlugin)(ctx, plugin, delta);
+                (0, CanvasUtils_1.drawPlugin)(ctx, plugin, delta);
             });
         }
         drawParticlePlugin(plugin, particle, delta) {
             this.draw((ctx) => {
-                (0, Utils_1.drawParticlePlugin)(ctx, plugin, particle, delta);
+                (0, CanvasUtils_1.drawParticlePlugin)(ctx, plugin, particle, delta);
             });
         }
         initBackground() {
-            const options = this.container.actualOptions;
-            const background = options.background;
-            const element = this.element;
-            const elementStyle = element === null || element === void 0 ? void 0 : element.style;
+            const options = this.container.actualOptions, background = options.background, element = this.element, elementStyle = element === null || element === void 0 ? void 0 : element.style;
             if (!elementStyle) {
                 return;
             }
             if (background.color) {
-                const color = (0, Utils_1.colorToRgb)(background.color);
-                elementStyle.backgroundColor = color ? (0, Utils_1.getStyleFromRgb)(color, background.opacity) : "";
+                const color = (0, ColorUtils_1.colorToRgb)(background.color);
+                elementStyle.backgroundColor = color ? (0, ColorUtils_1.getStyleFromRgb)(color, background.opacity) : "";
             }
             else {
                 elementStyle.backgroundColor = "";
@@ -233,10 +228,7 @@
             return cb(this.context);
         }
         initCover() {
-            const options = this.container.actualOptions;
-            const cover = options.backgroundMask.cover;
-            const color = cover.color;
-            const coverRgb = (0, Utils_1.colorToRgb)(color);
+            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = (0, ColorUtils_1.colorToRgb)(color);
             if (coverRgb) {
                 const coverColor = {
                     r: coverRgb.r,
@@ -244,14 +236,11 @@
                     b: coverRgb.b,
                     a: cover.opacity,
                 };
-                this.coverColorStyle = (0, Utils_1.getStyleFromRgb)(coverColor, coverColor.a);
-                console.log(this.coverColorStyle);
+                this.coverColorStyle = (0, ColorUtils_1.getStyleFromRgb)(coverColor, coverColor.a);
             }
         }
         initTrail() {
-            const options = this.container.actualOptions;
-            const trail = options.particles.move.trail;
-            const fillColor = (0, Utils_1.colorToRgb)(trail.fillColor);
+            const options = this.container.actualOptions, trail = options.particles.move.trail, fillColor = (0, ColorUtils_1.colorToRgb)(trail.fillColor);
             if (fillColor) {
                 const trail = options.particles.move.trail;
                 this.trailFillColor = {
@@ -263,14 +252,13 @@
             }
         }
         getPluginParticleColors(particle) {
-            let fColor;
-            let sColor;
+            let fColor, sColor;
             for (const [, plugin] of this.container.plugins) {
                 if (!fColor && plugin.particleFillColor) {
-                    fColor = (0, Utils_1.colorToHsl)(plugin.particleFillColor(particle));
+                    fColor = (0, ColorUtils_1.colorToHsl)(plugin.particleFillColor(particle));
                 }
                 if (!sColor && plugin.particleStrokeColor) {
-                    sColor = (0, Utils_1.colorToHsl)(plugin.particleStrokeColor(particle));
+                    sColor = (0, ColorUtils_1.colorToHsl)(plugin.particleStrokeColor(particle));
                 }
                 if (fColor && sColor) {
                     break;
@@ -314,14 +302,13 @@
         }
         paintBase(baseColor) {
             this.draw((ctx) => {
-                (0, Utils_1.paintBase)(ctx, this.size, baseColor);
+                (0, CanvasUtils_1.paintBase)(ctx, this.size, baseColor);
             });
         }
         lineStyle(p1, p2) {
             return this.draw((ctx) => {
-                const options = this.container.actualOptions;
-                const connectOptions = options.interactivity.modes.connect;
-                return (0, Utils_1.gradient)(ctx, p1, p2, connectOptions.links.opacity);
+                const options = this.container.actualOptions, connectOptions = options.interactivity.modes.connect;
+                return (0, CanvasUtils_1.gradient)(ctx, p1, p2, connectOptions.links.opacity);
             });
         }
     }

package/umd/Core/Container.js

@@ -15,19 +15,22 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils", "../Utils", "./Canvas", "../Options/Classes/Options", "./Particles", "./Retina"], factory);
+        define(["require", "exports", "../Utils/Utils", "./Canvas", "./Utils/EventListeners", "./Utils/FrameManager", "../Options/Classes/Options", "./Particles", "./Retina", "./Utils/Vector", "../Utils/NumberUtils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     var _Container_engine;
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Container = void 0;
-    const Utils_1 = require("./Utils");
-    const Utils_2 = require("../Utils");
+    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 Vector_1 = require("./Utils/Vector");
+    const NumberUtils_1 = require("../Utils/NumberUtils");
     class Container {
         constructor(engine, id, sourceOptions, ...presets) {
             this.id = id;
@@ -48,11 +51,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
             this.retina = new Retina_1.Retina(this);
             this.canvas = new Canvas_1.Canvas(this);
             this.particles = new Particles_1.Particles(__classPrivateFieldGet(this, _Container_engine, "f"), this);
-            this.drawer = new Utils_1.FrameManager(this);
+            this.drawer = new FrameManager_1.FrameManager(this);
             this.presets = presets;
             this.pathGenerator = {
                 generate: () => {
-                    const v = Utils_1.Vector.create(0, 0);
+                    const v = Vector_1.Vector.create(0, 0);
                     v.length = Math.random();
                     v.angle = Math.random() * Math.PI * 2;
                     return v;
@@ -68,15 +71,12 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
                     inside: false,
                 },
             };
-            this.bubble = {};
-            this.repulse = { particles: [] };
-            this.attract = { particles: [] };
             this.plugins = new Map();
             this.drawers = new Map();
             this.density = 1;
             this._options = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
             this.actualOptions = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
-            this.eventListeners = new Utils_1.EventListeners(this);
+            this.eventListeners = new EventListeners_1.EventListeners(this);
             if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
                 this.intersectionObserver = new IntersectionObserver((entries) => this.intersectionManager(entries));
             }
@@ -107,7 +107,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         }
         pause() {
             if (this.drawAnimationFrame !== undefined) {
-                (0, Utils_2.cancelAnimation)()(this.drawAnimationFrame);
+                (0, Utils_1.cancelAnimation)()(this.drawAnimationFrame);
                 delete this.drawAnimationFrame;
             }
             if (this.paused) {
@@ -124,7 +124,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         }
         draw(force) {
             let refreshTime = force;
-            this.drawAnimationFrame = (0, Utils_2.animate)()(async (timestamp) => {
+            this.drawAnimationFrame = (0, Utils_1.animate)()(async (timestamp) => {
                 if (refreshTime) {
                     this.lastFrameTime = undefined;
                     refreshTime = false;
@@ -260,8 +260,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
                 if (this.destroyed) {
                     return;
                 }
-                const mouseEvent = e;
-                const pos = {
+                const mouseEvent = e, pos = {
                     x: mouseEvent.offsetX || mouseEvent.clientX,
                     y: mouseEvent.offsetY || mouseEvent.clientY,
                 };
@@ -294,8 +293,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
                             return;
                         }
                     }
-                    const canvasRect = (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-                    const pos = {
+                    const canvasRect = (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), pos = {
                         x: lastTouch.clientX - ((_b = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _b !== void 0 ? _b : 0),
                         y: lastTouch.clientY - ((_c = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _c !== void 0 ? _c : 0),
                     };
@@ -319,6 +317,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
             el.addEventListener("touchend", touchEndHandler);
             el.addEventListener("touchcancel", touchCancelHandler);
         }
+        handleClickMode(mode) {
+            this.particles.handleClickMode(mode);
+            for (const [, plugin] of this.plugins) {
+                if (plugin.handleClickMode) {
+                    plugin.handleClickMode(mode);
+                }
+            }
+        }
         updateActualOptions() {
             this.actualOptions.responsive = [];
             const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
@@ -351,7 +357,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
             this.canvas.initBackground();
             this.canvas.resize();
             this.zLayers = this.actualOptions.zLayers;
-            this.duration = (0, Utils_2.getRangeValue)(this.actualOptions.duration);
+            this.duration = (0, NumberUtils_1.getRangeValue)(this.actualOptions.duration);
             this.lifeTime = 0;
             this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
             const availablePlugins = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getAvailablePlugins(this);

package/umd/Core/Loader.js

@@ -15,16 +15,16 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils", "./Container", "../Utils"], factory);
+        define(["require", "exports", "./Utils/Constants", "./Container", "../Utils/Utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     var _Loader_engine;
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Loader = void 0;
-    const Utils_1 = require("./Utils");
+    const Constants_1 = require("./Utils/Constants");
     const Container_1 = require("./Container");
-    const Utils_2 = require("../Utils");
+    const Utils_1 = require("../Utils/Utils");
     function fetchError(statusCode) {
         console.error(`Error tsParticles - fetch status: ${statusCode}`);
         console.error("Error tsParticles - File config not found");
@@ -47,17 +47,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         }
         async loadOptions(params) {
             var _a, _b, _c;
-            const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 10000)}`;
-            const { options, index } = params;
+            const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 10000)}`, { options, index } = params;
             let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(tagId);
             if (!domContainer) {
                 domContainer = document.createElement("div");
                 domContainer.id = tagId;
                 (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
             }
-            const currentOptions = options instanceof Array ? (0, Utils_2.itemFromArray)(options, index) : options;
-            const dom = this.dom();
-            const oldIndex = dom.findIndex((v) => v.id === tagId);
+            const currentOptions = options instanceof Array ? (0, Utils_1.itemFromArray)(options, index) : options, dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === tagId);
             if (oldIndex >= 0) {
                 const old = this.domItem(oldIndex);
                 if (old && !old.destroyed) {
@@ -68,17 +65,17 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
             let canvasEl;
             if (domContainer.tagName.toLowerCase() === "canvas") {
                 canvasEl = domContainer;
-                canvasEl.dataset[Utils_1.Constants.generatedAttribute] = "false";
+                canvasEl.dataset[Constants_1.Constants.generatedAttribute] = "false";
             }
             else {
                 const existingCanvases = domContainer.getElementsByTagName("canvas");
                 if (existingCanvases.length) {
                     canvasEl = existingCanvases[0];
-                    canvasEl.dataset[Utils_1.Constants.generatedAttribute] = "false";
+                    canvasEl.dataset[Constants_1.Constants.generatedAttribute] = "false";
                 }
                 else {
                     canvasEl = document.createElement("canvas");
-                    canvasEl.dataset[Utils_1.Constants.generatedAttribute] = "true";
+                    canvasEl.dataset[Constants_1.Constants.generatedAttribute] = "true";
                     canvasEl.style.width = "100%";
                     canvasEl.style.height = "100%";
                     domContainer.appendChild(canvasEl);
@@ -96,8 +93,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
             return newItem;
         }
         async loadRemoteOptions(params) {
-            const { url: jsonUrl, index } = params;
-            const url = jsonUrl instanceof Array ? (0, Utils_2.itemFromArray)(jsonUrl, index) : jsonUrl;
+            const { url: jsonUrl, index } = params, url = jsonUrl instanceof Array ? (0, Utils_1.itemFromArray)(jsonUrl, index) : jsonUrl;
             if (!url) {
                 return;
             }
@@ -180,7 +176,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         }
         setOnClickHandler(callback) {
             const dom = this.dom();
-            if (dom.length === 0) {
+            if (!dom.length) {
                 throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
             }
             for (const domItem of dom) {