@tsparticles/engine 3.0.2 → 3.1.0

package/types/Utils/ColorUtils.d.ts

@@ -1,8 +1,11 @@
 import type { IColor, IHsl, IHsla, IRangeColor, IRgb, IRgba } from "../Core/Interfaces/Colors.js";
 import type { HslAnimation } from "../Options/Classes/HslAnimation.js";
 import type { IColorManager } from "../Core/Interfaces/IColorManager.js";
+import type { IDelta } from "../Core/Interfaces/IDelta.js";
 import type { IOptionsColor } from "../Options/Interfaces/IOptionsColor.js";
+import type { IParticleColorAnimation } from "../Core/Interfaces/IParticleValueAnimation.js";
 import type { IParticleHslAnimation } from "../Core/Interfaces/IParticleHslAnimation.js";
+import type { IRangeValue } from "../Core/Interfaces/IRangeValue.js";
 import type { Particle } from "../Core/Particle.js";
 export declare function addColorManager(manager: IColorManager): void;
 export declare function rangeColorToRgb(input?: string | IRangeColor, index?: number, useIndex?: boolean): IRgb | undefined;
@@ -22,3 +25,5 @@ export declare function getLinkColor(p1: Particle, p2?: Particle, linkColor?: st
 export declare function getLinkRandomColor(optColor: string | IOptionsColor, blink: boolean, consent: boolean): IRgb | string | undefined;
 export declare function getHslFromAnimation(animation?: IParticleHslAnimation): IHsl | undefined;
 export declare function getHslAnimationFromHsl(hsl: IHsl, animationOptions: HslAnimation | undefined, reduceFactor: number): IParticleHslAnimation;
+export declare function updateColorValue(data: IParticleColorAnimation, range: IRangeValue, decrease: boolean, delta: IDelta): void;
+export declare function updateColor(color: IParticleHslAnimation | undefined, delta: IDelta): void;

package/types/Utils/NumberUtils.d.ts

@@ -1,8 +1,7 @@
 import type { EasingType, EasingTypeAlt } from "../Enums/Types/EasingType.js";
 import type { IPositionFromSizeParams, IRangedPositionFromSizeParams } from "../Core/Interfaces/IPositionFromSizeParams.js";
+import { MoveDirection, type MoveDirectionAlt } from "../Enums/Directions/MoveDirection.js";
 import type { ICoordinates } from "../Core/Interfaces/ICoordinates.js";
-import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
-import type { MoveDirectionAlt } from "../Enums/Directions/MoveDirection.js";
 import type { RangeValue } from "../Types/RangeValue.js";
 import { Vector } from "../Core/Utils/Vector.js";
 type EasingFunction = (value: number) => number;
@@ -23,6 +22,7 @@ export declare function getDistances(pointA: ICoordinates, pointB: ICoordinates)
     dy: number;
 };
 export declare function getDistance(pointA: ICoordinates, pointB: ICoordinates): number;
+export declare function degToRad(degrees: number): number;
 export declare function getParticleDirectionAngle(direction: MoveDirection | keyof typeof MoveDirection | MoveDirectionAlt | number, position: ICoordinates, center: ICoordinates): number;
 export declare function getParticleBaseVelocity(direction: number): Vector;
 export declare function collisionVelocity(v1: Vector, v2: Vector, m1: number, m2: number): Vector;

package/types/Utils/Utils.d.ts

@@ -1,8 +1,10 @@
 import type { ICoordinates, ICoordinatesWithMode } from "../Core/Interfaces/ICoordinates.js";
 import type { IDimension, IDimensionWithMode } from "../Core/Interfaces/IDimension.js";
+import { DestroyType } from "../Enums/Types/DestroyType.js";
 import type { DivEvent } from "../Options/Classes/Interactivity/Events/DivEvent.js";
 import type { IBounds } from "../Core/Interfaces/IBounds.js";
 import type { ICircleBouncer } from "../Core/Interfaces/ICircleBouncer.js";
+import type { IDelta } from "../Core/Interfaces/IDelta.js";
 import type { IModeDiv } from "../Options/Interfaces/Interactivity/Modes/IModeDiv.js";
 import type { IParticleNumericValueAnimation } from "../Core/Interfaces/IParticleValueAnimation.js";
 import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
@@ -10,12 +12,12 @@ import type { Particle } from "../Core/Particle.js";
 import type { RangedAnimationValueWithRandom } from "../Options/Classes/ValueWithRandom.js";
 import type { SingleOrMultiple } from "../Types/SingleOrMultiple.js";
 interface ILogger {
-    debug(message?: unknown, ...optionalParams: unknown[]): void;
-    error(message?: unknown, ...optionalParams: unknown[]): void;
-    info(message?: unknown, ...optionalParams: unknown[]): void;
-    log(message?: unknown, ...optionalParams: unknown[]): void;
-    verbose(message?: unknown, ...optionalParams: unknown[]): void;
-    warning(message?: unknown, ...optionalParams: unknown[]): void;
+    debug(this: void, message?: unknown, ...optionalParams: unknown[]): void;
+    error(this: void, message?: unknown, ...optionalParams: unknown[]): void;
+    info(this: void, message?: unknown, ...optionalParams: unknown[]): void;
+    log(this: void, message?: unknown, ...optionalParams: unknown[]): void;
+    verbose(this: void, message?: unknown, ...optionalParams: unknown[]): void;
+    warning(this: void, message?: unknown, ...optionalParams: unknown[]): void;
 }
 export declare function setLogger(logger: ILogger): void;
 export declare function getLogger(): ILogger;
@@ -51,4 +53,5 @@ export declare function isNumber(arg: unknown): arg is number;
 export declare function isFunction(arg: unknown): arg is Function;
 export declare function isObject<T extends object>(arg: unknown): arg is T;
 export declare function isArray<T>(arg: unknown): arg is T[];
+export declare function updateAnimation(particle: Particle, data: IParticleNumericValueAnimation, changeDirection: boolean, destroyType: DestroyType | keyof typeof DestroyType, delta: IDelta): void;
 export {};

package/umd/Core/Canvas.js

@@ -15,9 +15,9 @@
     const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
     const Constants_js_1 = require("./Utils/Constants.js");
     function setTransformValue(factor, newFactor, key) {
-        const newValue = newFactor[key];
+        const newValue = newFactor[key], defaultValue = 1;
         if (newValue !== undefined) {
-            factor[key] = (factor[key] ?? 1) * newValue;
+            factor[key] = (factor[key] ?? defaultValue) * newValue;
         }
     }
     class Canvas {
@@ -25,7 +25,7 @@
             this.container = container;
             this._applyPostDrawUpdaters = (particle) => {
                 for (const updater of this._postDrawUpdaters) {
-                    updater.afterDraw && updater.afterDraw(particle);
+                    updater.afterDraw?.(particle);
                 }
             };
             this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
@@ -45,12 +45,12 @@
                             setTransformValue(transform, updaterTransform, key);
                         }
                     }
-                    updater.beforeDraw && updater.beforeDraw(particle);
+                    updater.beforeDraw?.(particle);
                 }
             };
             this._applyResizePlugins = () => {
                 for (const plugin of this._resizePlugins) {
-                    plugin.resize && plugin.resize();
+                    plugin.resize?.();
                 }
             };
             this._getPluginParticleColors = (particle) => {
@@ -106,17 +106,17 @@
                 if (!trail.enable) {
                     return;
                 }
+                const factorNumerator = 1, opacity = factorNumerator / trail.length;
                 if (trailFill.color) {
                     const fillColor = (0, ColorUtils_js_1.rangeColorToRgb)(trailFill.color);
                     if (!fillColor) {
                         return;
                     }
-                    const trail = options.particles.move.trail;
                     this._trailFill = {
                         color: {
                             ...fillColor,
                         },
-                        opacity: 1 / trail.length,
+                        opacity,
                     };
                 }
                 else {
@@ -128,7 +128,7 @@
                         img.addEventListener("load", () => {
                             this._trailFill = {
                                 image: img,
-                                opacity: 1 / trail.length,
+                                opacity,
                             };
                             resolve();
                         });
@@ -179,9 +179,9 @@
                 if (!element) {
                     return;
                 }
-                const priority = "important", style = element.style;
+                const priority = "important", style = element.style, radix = 10;
                 style.setProperty("position", "fixed", priority);
-                style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(10), priority);
+                style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(radix), priority);
                 style.setProperty("top", "0", priority);
                 style.setProperty("left", "0", priority);
                 style.setProperty("width", "100%", priority);
@@ -202,11 +202,11 @@
             return this.container.actualOptions.fullScreen.enable;
         }
         clear() {
-            const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill;
+            const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill, minimumLength = 0;
             if (options.backgroundMask.enable) {
                 this.paint();
             }
-            else if (trail.enable && trail.length > 0 && trailFill) {
+            else if (trail.enable && trail.length > minimumLength && trailFill) {
                 if (trailFill.color) {
                     this._paintBase((0, ColorUtils_js_1.getStyleFromRgb)(trailFill.color, trailFill.opacity));
                 }
@@ -224,7 +224,7 @@
             this.stop();
             if (this._generated) {
                 const element = this.element;
-                element && element.remove();
+                element?.remove();
             }
             else {
                 this._resetOriginalStyle();
@@ -245,8 +245,8 @@
             if (particle.spawning || particle.destroyed) {
                 return;
             }
-            const radius = particle.getRadius();
-            if (radius <= 0) {
+            const radius = particle.getRadius(), minimumSize = 0;
+            if (radius <= minimumSize) {
                 return;
             }
             const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
@@ -261,7 +261,7 @@
                 return;
             }
             this.draw((ctx) => {
-                const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? 1, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
+                const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactorOffset = 1, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, defaultOpacity = 1, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
                     fill: fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
                 };
                 colorStyles.stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
@@ -274,7 +274,7 @@
                     colorStyles,
                     backgroundMask: options.backgroundMask.enable,
                     composite: options.backgroundMask.composite,
-                    radius: radius * (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate,
+                    radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
                     opacity: zOpacity,
                     shadow: particle.options.shadow,
                     transform,
@@ -344,7 +344,7 @@
                 if (plugin.resize) {
                     this._resizePlugins.push(plugin);
                 }
-                if (plugin.particleFillColor || plugin.particleStrokeColor) {
+                if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
                     this._colorPlugins.push(plugin);
                 }
             }
@@ -356,7 +356,7 @@
                 if (updater.afterDraw) {
                     this._postDrawUpdaters.push(updater);
                 }
-                if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
+                if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
                     this._preDrawUpdaters.push(updater);
                 }
             }

package/umd/Core/Container.js

@@ -4,28 +4,29 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/Utils.js", "./Canvas.js", "./Utils/EventListeners.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "./Utils/Constants.js", "../Utils/NumberUtils.js", "../Utils/OptionsUtils.js"], factory);
+        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);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Container = void 0;
+    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 Options_js_1 = require("../Options/Classes/Options.js");
     const Particles_js_1 = require("./Particles.js");
     const Retina_js_1 = require("./Retina.js");
-    const Constants_js_1 = require("./Utils/Constants.js");
     const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
     function guardCheck(container) {
         return container && !container.destroyed;
     }
-    function initDelta(value, fpsLimit = 60, smooth = false) {
+    const defaultFps = 60;
+    function initDelta(value, fpsLimit = defaultFps, smooth = false) {
         return {
             value,
-            factor: smooth ? 60 / fpsLimit : (60 * value) / 1000,
+            factor: smooth ? defaultFps / fpsLimit : (defaultFps * value) / Constants_js_1.millisecondsToSeconds,
         };
     }
     function loadContainerOptions(engine, container, ...sourceOptionsArr) {
@@ -43,14 +44,19 @@
                     if (entry.target !== this.interactivity.element) {
                         continue;
                     }
-                    (entry.isIntersecting ? this.play : this.pause)();
+                    if (entry.isIntersecting) {
+                        this.play();
+                    }
+                    else {
+                        this.pause();
+                    }
                 }
             };
             this._nextFrame = async (timestamp) => {
                 try {
                     if (!this._smooth &&
                         this._lastFrameTime !== undefined &&
-                        timestamp < this._lastFrameTime + 1000 / this.fpsLimit) {
+                        timestamp < this._lastFrameTime + Constants_js_1.millisecondsToSeconds / this.fpsLimit) {
                         this.draw(false);
                         return;
                     }
@@ -58,7 +64,7 @@
                     const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
                     this.addLifeTime(delta.value);
                     this._lastFrameTime = timestamp;
-                    if (delta.value > 1000) {
+                    if (delta.value > Constants_js_1.millisecondsToSeconds) {
                         this.draw(false);
                         return;
                     }
@@ -141,8 +147,8 @@
                 const mouseEvent = e, pos = {
                     x: mouseEvent.offsetX || mouseEvent.clientX,
                     y: mouseEvent.offsetY || mouseEvent.clientY,
-                };
-                clickOrTouchHandler(e, pos, 1);
+                }, radius = 1;
+                clickOrTouchHandler(e, pos, radius);
             };
             const touchStartHandler = () => {
                 if (!guardCheck(this)) {
@@ -163,16 +169,17 @@
                 }
                 if (touched && !touchMoved) {
                     const touchEvent = e;
-                    let lastTouch = touchEvent.touches[touchEvent.touches.length - 1];
+                    const lengthOffset = 1;
+                    let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];
                     if (!lastTouch) {
-                        lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - 1];
+                        lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];
                         if (!lastTouch) {
                             return;
                         }
                     }
-                    const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
-                        x: lastTouch.clientX - (canvasRect ? canvasRect.left : 0),
-                        y: lastTouch.clientY - (canvasRect ? canvasRect.top : 0),
+                    const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, minCoordinate = 0, pos = {
+                        x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
+                        y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate),
                     };
                     clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
                 }
@@ -214,10 +221,10 @@
             this.particles.destroy();
             this.canvas.destroy();
             for (const [, effectDrawer] of this.effectDrawers) {
-                effectDrawer.destroy && effectDrawer.destroy(this);
+                effectDrawer.destroy?.(this);
             }
             for (const [, shapeDrawer] of this.shapeDrawers) {
-                shapeDrawer.destroy && shapeDrawer.destroy(this);
+                shapeDrawer.destroy?.(this);
             }
             for (const key of this.effectDrawers.keys()) {
                 this.effectDrawers.delete(key);
@@ -227,9 +234,10 @@
             }
             this._engine.clearPlugins(this);
             this.destroyed = true;
-            const mainArr = this._engine.dom(), idx = mainArr.findIndex((t) => t === this);
-            if (idx >= 0) {
-                mainArr.splice(idx, 1);
+            const mainArr = this._engine.dom(), idx = mainArr.findIndex((t) => t === this), minIndex = 0;
+            if (idx >= minIndex) {
+                const deleteCount = 1;
+                mainArr.splice(idx, deleteCount);
             }
             this._engine.dispatchEvent("containerDestroyed", { container: this });
         }
@@ -238,13 +246,14 @@
                 return;
             }
             let refreshTime = force;
-            this._drawAnimationFrame = requestAnimationFrame(async (timestamp) => {
+            const frame = async (timestamp) => {
                 if (refreshTime) {
                     this._lastFrameTime = undefined;
                     refreshTime = false;
                 }
                 await this._nextFrame(timestamp);
-            });
+            };
+            this._drawAnimationFrame = requestAnimationFrame((timestamp) => void frame(timestamp));
         }
         async export(type, options = {}) {
             for (const [, plugin] of this.plugins) {
@@ -268,7 +277,7 @@
             }
             this.particles.handleClickMode(mode);
             for (const [, plugin] of this.plugins) {
-                plugin.handleClickMode && plugin.handleClickMode(mode);
+                plugin.handleClickMode?.(mode);
             }
         }
         async init() {
@@ -301,25 +310,26 @@
             this.canvas.initBackground();
             this.canvas.resize();
             this.zLayers = this.actualOptions.zLayers;
-            this._duration = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.duration) * 1000;
-            this._delay = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.delay) * 1000;
+            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;
             this._lifeTime = 0;
-            this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
+            const defaultFpsLimit = 120, minFpsLimit = 0;
+            this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;
             this._smooth = this.actualOptions.smooth;
             for (const [, drawer] of this.effectDrawers) {
-                drawer.init && (await drawer.init(this));
+                await drawer.init?.(this);
             }
             for (const [, drawer] of this.shapeDrawers) {
-                drawer.init && (await drawer.init(this));
+                await drawer.init?.(this);
             }
             for (const [, plugin] of this.plugins) {
-                plugin.init && (await plugin.init());
+                await plugin.init?.();
             }
             this._engine.dispatchEvent("containerInit", { container: this });
             this.particles.init();
             this.particles.setDensity();
             for (const [, plugin] of this.plugins) {
-                plugin.particlesSetup && plugin.particlesSetup();
+                plugin.particlesSetup?.();
             }
             this._engine.dispatchEvent("particlesSetup", { container: this });
         }
@@ -342,7 +352,7 @@
                 return;
             }
             for (const [, plugin] of this.plugins) {
-                plugin.pause && plugin.pause();
+                plugin.pause?.();
             }
             if (!this.pageHidden) {
                 this._paused = true;
@@ -369,7 +379,7 @@
                 }
             }
             this._engine.dispatchEvent("containerPlay", { container: this });
-            this.draw(needsUpdate || false);
+            this.draw(needsUpdate ?? false);
         }
         async refresh() {
             if (!guardCheck(this)) {
@@ -394,18 +404,19 @@
             await this.init();
             this.started = true;
             await new Promise((resolve) => {
-                this._delayTimeout = setTimeout(async () => {
+                const start = async () => {
                     this._eventListeners.addListeners();
                     if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
                         this._intersectionObserver.observe(this.interactivity.element);
                     }
                     for (const [, plugin] of this.plugins) {
-                        plugin.start && (await plugin.start());
+                        await plugin.start?.();
                     }
                     this._engine.dispatchEvent("containerStarted", { container: this });
                     this.play();
                     resolve();
-                }, this._delay);
+                };
+                this._delayTimeout = setTimeout(() => void start(), this._delay);
             });
         }
         stop() {
@@ -426,7 +437,7 @@
                 this._intersectionObserver.unobserve(this.interactivity.element);
             }
             for (const [, plugin] of this.plugins) {
-                plugin.stop && plugin.stop();
+                plugin.stop?.();
             }
             for (const key of this.plugins.keys()) {
                 this.plugins.delete(key);

package/umd/Core/Engine.js

@@ -63,16 +63,18 @@
             return res;
         }
         get version() {
-            return "3.0.2";
+            return "3.1.0";
         }
         addConfig(config) {
-            const name = config.name ?? "default";
-            this._configs.set(name, config);
-            this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
+            const key = config.key ?? config.name ?? "default";
+            this._configs.set(key, config);
+            this._eventDispatcher.dispatchEvent("configAdded", { data: { name: key, config } });
         }
         async addEffect(effect, drawer, refresh = true) {
             (0, Utils_js_1.executeOnSingleOrMultiple)(effect, (type) => {
-                !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+                if (!this.getEffectDrawer(type)) {
+                    this.effectDrawers.set(type, drawer);
+                }
             });
             await this.refresh(refresh);
         }
@@ -92,20 +94,28 @@
             await this.refresh(refresh);
         }
         async addPathGenerator(name, generator, refresh = true) {
-            !this.getPathGenerator(name) && this.pathGenerators.set(name, generator);
+            if (!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);
+            if (!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);
+            if (override || !this.getPreset(preset)) {
+                this.presets.set(preset, options);
+            }
             await this.refresh(refresh);
         }
         async addShape(shape, drawer, refresh = true) {
             (0, Utils_js_1.executeOnSingleOrMultiple)(shape, (type) => {
-                !this.getShapeDrawer(type) && this.shapeDrawers.set(type, drawer);
+                if (!this.getShapeDrawer(type)) {
+                    this.shapeDrawers.set(type, drawer);
+                }
             });
             await this.refresh(refresh);
         }
@@ -123,7 +133,8 @@
         domItem(index) {
             const dom = this.dom(), item = dom[index];
             if (!item || item.destroyed) {
-                dom.splice(index, 1);
+                const deleteCount = 1;
+                dom.splice(index, deleteCount);
                 return;
             }
             return item;
@@ -131,7 +142,9 @@
         getAvailablePlugins(container) {
             const res = new Map();
             for (const plugin of this.plugins) {
-                plugin.needsPlugin(container.actualOptions) && res.set(plugin.id, plugin.getPlugin(container));
+                if (plugin.needsPlugin(container.actualOptions)) {
+                    res.set(plugin.id, plugin.getPlugin(container));
+                }
             }
             return res;
         }
@@ -172,19 +185,20 @@
             this._initialized = true;
         }
         async load(params) {
-            const id = params.id ?? `tsparticles${Math.floor((0, NumberUtils_js_1.getRandom)() * 10000)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
+            const randomFactor = 10000, id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0, NumberUtils_js_1.getRandom)() * randomFactor)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
             let domContainer = params.element ?? document.getElementById(id);
             if (!domContainer) {
                 domContainer = document.createElement("div");
                 domContainer.id = id;
                 document.body.append(domContainer);
             }
-            const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id);
-            if (oldIndex >= 0) {
+            const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id), minIndex = 0;
+            if (oldIndex >= minIndex) {
                 const old = this.domItem(oldIndex);
                 if (old && !old.destroyed) {
                     old.destroy();
-                    dom.splice(oldIndex, 1);
+                    const deleteCount = 1;
+                    dom.splice(oldIndex, deleteCount);
                 }
             }
             let canvasEl;
@@ -195,7 +209,8 @@
             else {
                 const existingCanvases = domContainer.getElementsByTagName("canvas");
                 if (existingCanvases.length) {
-                    canvasEl = existingCanvases[0];
+                    const firstIndex = 0;
+                    canvasEl = existingCanvases[firstIndex];
                     canvasEl.dataset[Constants_js_1.generatedAttribute] = "false";
                 }
                 else {
@@ -211,8 +226,9 @@
                 canvasEl.style.height = "100%";
             }
             const newItem = new Container_js_1.Container(this, id, currentOptions);
-            if (oldIndex >= 0) {
-                dom.splice(oldIndex, 0, newItem);
+            if (oldIndex >= minIndex) {
+                const deleteCount = 0;
+                dom.splice(oldIndex, deleteCount, newItem);
             }
             else {
                 dom.push(newItem);
@@ -232,14 +248,14 @@
                 return;
             }
             for (const updater of updaters) {
-                updater.loadOptions && updater.loadOptions(options, ...sourceOptions);
+                updater.loadOptions?.(options, ...sourceOptions);
             }
         }
         async refresh(refresh = true) {
             if (!refresh) {
                 return;
             }
-            this.dom().forEach((t) => t.refresh());
+            await Promise.allSettled(this.dom().map((t) => t.refresh()));
         }
         removeEventListener(type, listener) {
             this._eventDispatcher.removeEventListener(type, listener);