@tsparticles/engine 3.4.0 → 3.6.0-beta.0

package/README.md

@@ -18,8 +18,6 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
 [![Run on Repl.it](https://repl.it/badge/github/tsparticles/tsparticles)](https://repl.it/github/tsparticles/tsparticles)
 
 [![Discord](https://img.shields.io/discord/872061157379301416?label=discord&logo=discord&logoColor=white&style=for-the-badge)](https://discord.gg/hACwv45Hme)
-[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
-[![WhatsApp](https://particles.js.org/images/WhatsApp.png)](https://chat.whatsapp.com/KQyHc9UEbRc2qlqNQR2J5c)
 [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
 [![Reddit](https://img.shields.io/reddit/subreddit-subscribers/tsParticles?style=for-the-badge)](https://www.reddit.com/r/tsParticles/)
 

package/browser/Core/Canvas.js

@@ -22,9 +22,6 @@ function setStyle(canvas, style, important = false) {
     }
     for (const key in style) {
         const value = style[key];
-        if (!value) {
-            continue;
-        }
         elementStyle.setProperty(key, value, important ? "important" : "");
     }
 }
@@ -208,10 +205,11 @@ export class Canvas {
             if (!element) {
                 return;
             }
-            const radix = 10;
+            const radix = 10, zIndex = this.container.actualOptions.fullScreen.zIndex.toString(radix);
             setStyle(element, {
                 position: "fixed",
-                zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),
+                "z-index": zIndex,
+                zIndex: zIndex,
                 top: "0",
                 left: "0",
                 width: "100%",
@@ -378,7 +376,7 @@ export class Canvas {
     }
     initPlugins() {
         this._resizePlugins = [];
-        for (const [, plugin] of this.container.plugins) {
+        for (const plugin of this.container.plugins.values()) {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }

package/browser/Core/Container.js

@@ -1,3 +1,4 @@
+import { animate, cancelAnimation, getRangeValue } from "../Utils/NumberUtils.js";
 import { errorPrefix, millisecondsToSeconds } from "./Utils/Constants.js";
 import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
 import { Canvas } from "./Canvas.js";
@@ -6,7 +7,6 @@ import { EventType } from "../Enums/Types/EventType.js";
 import { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
-import { getRangeValue } from "../Utils/NumberUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
 function guardCheck(container) {
     return container && !container.destroyed;
@@ -220,10 +220,10 @@ export class Container {
         this.clearClickHandlers();
         this.particles.destroy();
         this.canvas.destroy();
-        for (const [, effectDrawer] of this.effectDrawers) {
+        for (const effectDrawer of this.effectDrawers.values()) {
             effectDrawer.destroy?.(this);
         }
-        for (const [, shapeDrawer] of this.shapeDrawers) {
+        for (const shapeDrawer of this.shapeDrawers.values()) {
             shapeDrawer.destroy?.(this);
         }
         for (const key of this.effectDrawers.keys()) {
@@ -255,10 +255,10 @@ export class Container {
             }
             this._nextFrame(timestamp);
         };
-        this._drawAnimationFrame = requestAnimationFrame(timestamp => frame(timestamp));
+        this._drawAnimationFrame = animate(timestamp => frame(timestamp));
     }
     async export(type, options = {}) {
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             if (!plugin.export) {
                 continue;
             }
@@ -275,7 +275,7 @@ export class Container {
             return;
         }
         this.particles.handleClickMode(mode);
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.handleClickMode?.(mode);
         }
     }
@@ -317,19 +317,19 @@ export class Container {
         const defaultFpsLimit = 120, minFpsLimit = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
         this._smooth = smooth;
-        for (const [, drawer] of this.effectDrawers) {
+        for (const drawer of this.effectDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, drawer] of this.shapeDrawers) {
+        for (const drawer of this.shapeDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             await plugin.init?.();
         }
         this._engine.dispatchEvent(EventType.containerInit, { container: this });
         await this.particles.init();
         this.particles.setDensity();
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.particlesSetup?.();
         }
         this._engine.dispatchEvent(EventType.particlesSetup, { container: this });
@@ -346,13 +346,13 @@ export class Container {
             return;
         }
         if (this._drawAnimationFrame !== undefined) {
-            cancelAnimationFrame(this._drawAnimationFrame);
+            cancelAnimation(this._drawAnimationFrame);
             delete this._drawAnimationFrame;
         }
         if (this._paused) {
             return;
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.pause?.();
         }
         if (!this.pageHidden) {
@@ -373,7 +373,7 @@ export class Container {
             this._paused = false;
         }
         if (needsUpdate) {
-            for (const [, plugin] of this.plugins) {
+            for (const plugin of this.plugins.values()) {
                 if (plugin.play) {
                     plugin.play();
                 }
@@ -411,7 +411,7 @@ export class Container {
                 if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
                     this._intersectionObserver.observe(this.interactivity.element);
                 }
-                for (const [, plugin] of this.plugins) {
+                for (const plugin of this.plugins.values()) {
                     await plugin.start?.();
                 }
                 this._engine.dispatchEvent(EventType.containerStarted, { container: this });
@@ -438,7 +438,7 @@ export class Container {
         if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this.interactivity.element);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.stop?.();
         }
         for (const key of this.plugins.keys()) {

package/browser/Core/Engine.js

@@ -95,7 +95,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.4.0";
+        return "3.6.0-beta.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";

package/browser/Core/Particle.js

@@ -48,7 +48,7 @@ export class Particle {
     constructor(engine, container) {
         this.container = container;
         this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
                 if (pluginPos) {
                     return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
@@ -166,7 +166,7 @@ export class Particle {
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
         shapeDrawer?.particleDestroy?.(this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleDestroyed?.(this, override);
         }
         for (const updater of container.particles.updaters) {
@@ -182,7 +182,7 @@ export class Particle {
     }
     draw(delta) {
         const container = this.container, canvas = container.canvas;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawParticlePlugin(plugin, this, delta);
         }
         canvas.drawParticle(this, delta);
@@ -334,7 +334,7 @@ export class Particle {
         }
         effectDrawer?.particleInit?.(container, this);
         shapeDrawer?.particleInit?.(container, this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleCreated?.(this);
         }
     }

package/browser/Core/Particles.js

@@ -122,7 +122,7 @@ export class Particles {
         options.manualParticles.forEach(p => this.addParticle(p.position ? getPosition(p.position, container.canvas.size) : undefined, p.options));
     }
     addParticle(position, overrideOptions, group, initializer) {
-        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
+        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count, minLimit = 0;
         if (limit > minLimit) {
             switch (limitMode) {
                 case LimitMode.delete: {
@@ -156,7 +156,7 @@ export class Particles {
         const container = this._container, canvas = container.canvas;
         canvas.clear();
         this.update(delta);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawPlugin(plugin, delta);
         }
         for (const p of this._zArray) {
@@ -181,7 +181,7 @@ export class Particles {
         this._needsSort = false;
         await this.initPlugins();
         let handled = false;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             handled = plugin.particlesInitialization?.() ?? handled;
             if (handled) {
                 break;
@@ -209,7 +209,7 @@ export class Particles {
         this.movers = await this._engine.getMovers(container, true);
         this.updaters = await this._engine.getUpdaters(container, true);
         await this._interactionManager.init();
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.init(container);
         }
     }
@@ -233,7 +233,8 @@ export class Particles {
         }
         let deleted = 0;
         for (let i = index; deleted < quantity && i < this.count; i++) {
-            if (this._removeParticle(i--, group, override)) {
+            if (this._removeParticle(i, group, override)) {
+                i--;
                 deleted++;
             }
         }
@@ -259,10 +260,10 @@ export class Particles {
     update(delta) {
         const container = this._container, particlesToDelete = new Set();
         this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.update();
         }
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
@@ -275,7 +276,7 @@ export class Particles {
             }
             particle.ignoresResizeRatio = false;
             this._interactionManager.reset(particle);
-            for (const [, plugin] of this._container.plugins) {
+            for (const plugin of this._container.plugins.values()) {
                 if (particle.destroyed) {
                     break;
                 }

package/browser/Core/Utils/EventListeners.js

@@ -187,7 +187,7 @@ export class EventListeners {
             if (!mousePosition || !options.interactivity.events.onClick.enable) {
                 return;
             }
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 if (!plugin.clickPositionValid) {
                     continue;
                 }

package/browser/Utils/CanvasUtils.js

@@ -33,8 +33,8 @@ export function drawParticle(data) {
         cos: Math.cos(angle),
     }, rotating = !!angle, identity = 1, transformData = {
         a: rotateData.cos * (transform.a ?? defaultTransform.a),
-        b: rotating ? rotateData.sin * (transform.b ?? identity) : transform.b ?? defaultTransform.b,
-        c: rotating ? -rotateData.sin * (transform.c ?? identity) : transform.c ?? defaultTransform.c,
+        b: rotating ? rotateData.sin * (transform.b ?? identity) : (transform.b ?? defaultTransform.b),
+        c: rotating ? -rotateData.sin * (transform.c ?? identity) : (transform.c ?? defaultTransform.c),
         d: rotateData.cos * (transform.d ?? defaultTransform.d),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);

package/browser/Utils/ColorUtils.js

@@ -15,7 +15,7 @@ export function addColorManager(manager) {
     colorManagers.set(manager.key, manager);
 }
 function stringToRgba(input) {
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         if (input.startsWith(manager.stringPrefix)) {
             return manager.parseString(input);
         }
@@ -47,7 +47,7 @@ export function rangeColorToRgb(input, index, useIndex = true) {
             value: itemFromArray(color.value, index, useIndex),
         });
     }
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         const res = manager.handleRangeColor(color);
         if (res) {
             return res;
@@ -67,7 +67,7 @@ export function colorToRgb(input, index, useIndex = true) {
             value: itemFromArray(color.value, index, useIndex),
         });
     }
-    for (const [, manager] of colorManagers) {
+    for (const manager of colorManagers.values()) {
         const res = manager.handleColor(color);
         if (res) {
             return res;

package/browser/Utils/NumberUtils.js

@@ -3,15 +3,18 @@ import { Vector } from "../Core/Utils/Vectors.js";
 import { isNumber } from "./TypeUtils.js";
 import { percentDenominator } from "../Core/Utils/Constants.js";
 let _random = Math.random;
-const easings = new Map(), double = 2, doublePI = Math.PI * double;
+const _animationLoop = {
+    nextFrame: (cb) => requestAnimationFrame(cb),
+    cancel: (idx) => cancelAnimationFrame(idx),
+}, easingFunctions = new Map(), double = 2, doublePI = Math.PI * double;
 export function addEasing(name, easing) {
-    if (easings.get(name)) {
+    if (easingFunctions.get(name)) {
         return;
     }
-    easings.set(name, easing);
+    easingFunctions.set(name, easing);
 }
 export function getEasing(name) {
-    return easings.get(name) ?? ((value) => value);
+    return easingFunctions.get(name) ?? ((value) => value);
 }
 export function setRandom(rnd = Math.random) {
     _random = rnd;
@@ -20,6 +23,16 @@ export function getRandom() {
     const min = 0, max = 1;
     return clamp(_random(), min, max - Number.EPSILON);
 }
+export function setAnimationFunctions(nextFrame, cancel) {
+    _animationLoop.nextFrame = (callback) => nextFrame(callback);
+    _animationLoop.cancel = (handle) => cancel(handle);
+}
+export function animate(fn) {
+    return _animationLoop.nextFrame(fn);
+}
+export function cancelAnimation(handle) {
+    _animationLoop.cancel(handle);
+}
 export function clamp(num, min, max) {
     return Math.min(Math.max(num, min), max);
 }

package/cjs/Core/Canvas.js

@@ -25,9 +25,6 @@ function setStyle(canvas, style, important = false) {
     }
     for (const key in style) {
         const value = style[key];
-        if (!value) {
-            continue;
-        }
         elementStyle.setProperty(key, value, important ? "important" : "");
     }
 }
@@ -211,10 +208,11 @@ class Canvas {
             if (!element) {
                 return;
             }
-            const radix = 10;
+            const radix = 10, zIndex = this.container.actualOptions.fullScreen.zIndex.toString(radix);
             setStyle(element, {
                 position: "fixed",
-                zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),
+                "z-index": zIndex,
+                zIndex: zIndex,
                 top: "0",
                 left: "0",
                 width: "100%",
@@ -381,7 +379,7 @@ class Canvas {
     }
     initPlugins() {
         this._resizePlugins = [];
-        for (const [, plugin] of this.container.plugins) {
+        for (const plugin of this.container.plugins.values()) {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }

package/cjs/Core/Container.js

@@ -1,6 +1,7 @@
 "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");
@@ -9,7 +10,6 @@ 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;
@@ -223,10 +223,10 @@ class Container {
         this.clearClickHandlers();
         this.particles.destroy();
         this.canvas.destroy();
-        for (const [, effectDrawer] of this.effectDrawers) {
+        for (const effectDrawer of this.effectDrawers.values()) {
             effectDrawer.destroy?.(this);
         }
-        for (const [, shapeDrawer] of this.shapeDrawers) {
+        for (const shapeDrawer of this.shapeDrawers.values()) {
             shapeDrawer.destroy?.(this);
         }
         for (const key of this.effectDrawers.keys()) {
@@ -258,10 +258,10 @@ class Container {
             }
             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) {
+        for (const plugin of this.plugins.values()) {
             if (!plugin.export) {
                 continue;
             }
@@ -278,7 +278,7 @@ class Container {
             return;
         }
         this.particles.handleClickMode(mode);
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.handleClickMode?.(mode);
         }
     }
@@ -320,19 +320,19 @@ class Container {
         const defaultFpsLimit = 120, minFpsLimit = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
         this._smooth = smooth;
-        for (const [, drawer] of this.effectDrawers) {
+        for (const drawer of this.effectDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, drawer] of this.shapeDrawers) {
+        for (const drawer of this.shapeDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             await plugin.init?.();
         }
         this._engine.dispatchEvent(EventType_js_1.EventType.containerInit, { container: this });
         await this.particles.init();
         this.particles.setDensity();
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.particlesSetup?.();
         }
         this._engine.dispatchEvent(EventType_js_1.EventType.particlesSetup, { container: this });
@@ -349,13 +349,13 @@ class Container {
             return;
         }
         if (this._drawAnimationFrame !== undefined) {
-            cancelAnimationFrame(this._drawAnimationFrame);
+            (0, NumberUtils_js_1.cancelAnimation)(this._drawAnimationFrame);
             delete this._drawAnimationFrame;
         }
         if (this._paused) {
             return;
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.pause?.();
         }
         if (!this.pageHidden) {
@@ -376,7 +376,7 @@ class Container {
             this._paused = false;
         }
         if (needsUpdate) {
-            for (const [, plugin] of this.plugins) {
+            for (const plugin of this.plugins.values()) {
                 if (plugin.play) {
                     plugin.play();
                 }
@@ -414,7 +414,7 @@ class Container {
                 if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
                     this._intersectionObserver.observe(this.interactivity.element);
                 }
-                for (const [, plugin] of this.plugins) {
+                for (const plugin of this.plugins.values()) {
                     await plugin.start?.();
                 }
                 this._engine.dispatchEvent(EventType_js_1.EventType.containerStarted, { container: this });
@@ -441,7 +441,7 @@ class Container {
         if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
             this._intersectionObserver.unobserve(this.interactivity.element);
         }
-        for (const [, plugin] of this.plugins) {
+        for (const plugin of this.plugins.values()) {
             plugin.stop?.();
         }
         for (const key of this.plugins.keys()) {

package/cjs/Core/Engine.js

@@ -98,7 +98,7 @@ class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.4.0";
+        return "3.6.0-beta.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";

package/cjs/Core/Particle.js

@@ -51,7 +51,7 @@ class Particle {
     constructor(engine, container) {
         this.container = container;
         this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
                 if (pluginPos) {
                     return Vectors_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
@@ -169,7 +169,7 @@ class Particle {
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
         shapeDrawer?.particleDestroy?.(this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleDestroyed?.(this, override);
         }
         for (const updater of container.particles.updaters) {
@@ -185,7 +185,7 @@ class Particle {
     }
     draw(delta) {
         const container = this.container, canvas = container.canvas;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawParticlePlugin(plugin, this, delta);
         }
         canvas.drawParticle(this, delta);
@@ -337,7 +337,7 @@ class Particle {
         }
         effectDrawer?.particleInit?.(container, this);
         shapeDrawer?.particleInit?.(container, this);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.particleCreated?.(this);
         }
     }

package/cjs/Core/Particles.js

@@ -125,7 +125,7 @@ class Particles {
         options.manualParticles.forEach(p => this.addParticle(p.position ? (0, Utils_js_1.getPosition)(p.position, container.canvas.size) : undefined, p.options));
     }
     addParticle(position, overrideOptions, group, initializer) {
-        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
+        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count, minLimit = 0;
         if (limit > minLimit) {
             switch (limitMode) {
                 case LimitMode_js_1.LimitMode.delete: {
@@ -159,7 +159,7 @@ class Particles {
         const container = this._container, canvas = container.canvas;
         canvas.clear();
         this.update(delta);
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             canvas.drawPlugin(plugin, delta);
         }
         for (const p of this._zArray) {
@@ -184,7 +184,7 @@ class Particles {
         this._needsSort = false;
         await this.initPlugins();
         let handled = false;
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             handled = plugin.particlesInitialization?.() ?? handled;
             if (handled) {
                 break;
@@ -212,7 +212,7 @@ class Particles {
         this.movers = await this._engine.getMovers(container, true);
         this.updaters = await this._engine.getUpdaters(container, true);
         await this._interactionManager.init();
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.init(container);
         }
     }
@@ -236,7 +236,8 @@ class Particles {
         }
         let deleted = 0;
         for (let i = index; deleted < quantity && i < this.count; i++) {
-            if (this._removeParticle(i--, group, override)) {
+            if (this._removeParticle(i, group, override)) {
+                i--;
                 deleted++;
             }
         }
@@ -262,10 +263,10 @@ class Particles {
     update(delta) {
         const container = this._container, particlesToDelete = new Set();
         this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
-        for (const [, pathGenerator] of container.pathGenerators) {
+        for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.update();
         }
-        for (const [, plugin] of container.plugins) {
+        for (const plugin of container.plugins.values()) {
             plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
@@ -278,7 +279,7 @@ class Particles {
             }
             particle.ignoresResizeRatio = false;
             this._interactionManager.reset(particle);
-            for (const [, plugin] of this._container.plugins) {
+            for (const plugin of this._container.plugins.values()) {
                 if (particle.destroyed) {
                     break;
                 }

package/cjs/Core/Utils/EventListeners.js

@@ -190,7 +190,7 @@ class EventListeners {
             if (!mousePosition || !options.interactivity.events.onClick.enable) {
                 return;
             }
-            for (const [, plugin] of container.plugins) {
+            for (const plugin of container.plugins.values()) {
                 if (!plugin.clickPositionValid) {
                     continue;
                 }