@tsparticles/engine 3.0.0-beta.1 → 3.0.0-beta.3

package/README.md

@@ -11,11 +11,11 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
 [![npm](https://img.shields.io/npm/v/@tsparticles/engine?style=for-the-badge)](https://www.npmjs.com/package/tsparticles)
 [![npm](https://img.shields.io/npm/dm/tsparticles?style=for-the-badge)](https://www.npmjs.com/package/tsparticles)
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff?style=for-the-badge)](https://lerna.js.org/)
-[![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles)
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade)
+[![CodeFactor](https://www.codefactor.io/repository/github/tsparticles/tsparticles/badge)](https://www.codefactor.io/repository/github/tsparticles/tsparticles)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=tsparticles/tsparticles&utm_campaign=Badge_Grade)
 [![Rate this package](https://badges.openbase.com/js/rating/tsparticles.svg?style=openbase&token=A9jHQ1nkb6fnCndKM7O2w4hx3OD8PVCuqHtSpw8mMOg=)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js/tsparticles)
-[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles)
-[![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/tsparticles/tsparticles)
+[![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)
@@ -114,7 +114,7 @@ particles.js
 it's even easier**.
 
 You'll find the
-instructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the
+instructions [below](https://github.com/tsparticles/tsparticles/blob/main/README.md#library-installation), with all the
 links you need, and _don't be scared by **TypeScript**, it's just the source language_.
 
 **The output files are just JavaScript**. 🤩
@@ -124,7 +124,7 @@ all
 files splitted for `import` syntax.
 
 **If you are interested** there are some _simple instructions_
-just [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to
+just [below](https://github.com/tsparticles/tsparticles/blob/main/README.md#library-installation) to guide you to
 migrate from the old particles.js library.
 
 ## **_Library installation_**
@@ -839,10 +839,10 @@ e --> u
 
 <p>  
     <a href="https://www.jetbrains.com/?from=tsParticles">  
-        <img src="https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png" height="150" alt="JetBrains" />  
+        <img src="https://raw.githubusercontent.com/tsparticles/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png" height="150" alt="JetBrains" />  
     </a>  
     <a href="https://www.jetbrains.com/webstorm/?from=tsParticles">  
-        <img src="https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png" height="150" alt="JetBrains" />  
+        <img src="https://raw.githubusercontent.com/tsparticles/tsparticles/gh-pages/images/jetbrains-logos/logo.png" height="150" alt="JetBrains" />  
     </a>  
 </p>
 

package/browser/Core/Container.js

@@ -1,10 +1,10 @@
+import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
 import { errorPrefix } from "./Utils/Constants.js";
-import { getLogger } from "../Utils/Utils.js";
 import { getRangeValue } from "../Utils/NumberUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
 function guardCheck(container) {
@@ -23,7 +23,6 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 export class Container {
     constructor(engine, id, sourceOptions) {
-        this.id = id;
         this._intersectionManager = (entries) => {
             if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                 return;
@@ -65,6 +64,7 @@ export class Container {
             }
         };
         this._engine = engine;
+        this.id = Symbol(id);
         this.fpsLimit = 120;
         this.smooth = false;
         this._delay = 0;
@@ -94,9 +94,7 @@ export class Container {
         this._options = loadContainerOptions(this._engine, this);
         this.actualOptions = loadContainerOptions(this._engine, this);
         this._eventListeners = new EventListeners(this);
-        if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
-            this._intersectionObserver = new IntersectionObserver((entries) => this._intersectionManager(entries));
-        }
+        this._intersectionObserver = safeIntersectionObserver((entries) => this._intersectionManager(entries));
         this._engine.dispatchEvent("containerBuilt", { container: this });
     }
     get options() {

package/browser/Core/Engine.js

@@ -1,5 +1,5 @@
 import { errorPrefix, generatedAttribute } from "./Utils/Constants.js";
-import { executeOnSingleOrMultiple, getLogger, isBoolean, isFunction, isString, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
+import { executeOnSingleOrMultiple, getLogger, itemFromSingleOrMultiple } from "../Utils/Utils.js";
 import { Container } from "./Container.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
 import { getRandom } from "../Utils/NumberUtils.js";
@@ -50,18 +50,12 @@ export class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.1";
+        return "3.0.0-beta.3";
     }
-    addConfig(nameOrConfig, config) {
-        if (isString(nameOrConfig)) {
-            if (config) {
-                config.name = nameOrConfig;
-                this._configs.set(nameOrConfig, config);
-            }
-        }
-        else {
-            this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
-        }
+    addConfig(config) {
+        const name = config.name ?? "default";
+        this._configs.set(name, config);
+        this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
@@ -90,45 +84,11 @@ export class Engine {
         (override || !this.getPreset(preset)) && this.presets.set(preset, options);
         await this.refresh(refresh);
     }
-    async addShape(shape, drawer, initOrRefresh, afterEffectOrRefresh, destroyOrRefresh, refresh = true) {
-        let customDrawer;
-        let realRefresh = refresh, realInit, realAfterEffect, realDestroy;
-        if (isBoolean(initOrRefresh)) {
-            realRefresh = initOrRefresh;
-            realInit = undefined;
-        }
-        else {
-            realInit = initOrRefresh;
-        }
-        if (isBoolean(afterEffectOrRefresh)) {
-            realRefresh = afterEffectOrRefresh;
-            realAfterEffect = undefined;
-        }
-        else {
-            realAfterEffect = afterEffectOrRefresh;
-        }
-        if (isBoolean(destroyOrRefresh)) {
-            realRefresh = destroyOrRefresh;
-            realDestroy = undefined;
-        }
-        else {
-            realDestroy = destroyOrRefresh;
-        }
-        if (isFunction(drawer)) {
-            customDrawer = {
-                afterEffect: realAfterEffect,
-                destroy: realDestroy,
-                draw: drawer,
-                init: realInit,
-            };
-        }
-        else {
-            customDrawer = drawer;
-        }
+    async addShape(shape, drawer, refresh = true) {
         executeOnSingleOrMultiple(shape, (type) => {
-            !this.getShapeDrawer(type) && this.drawers.set(type, customDrawer);
+            !this.getShapeDrawer(type) && this.drawers.set(type, drawer);
         });
-        await this.refresh(realRefresh);
+        await this.refresh(refresh);
     }
     clearPlugins(container) {
         this.updaters.delete(container);
@@ -194,7 +154,7 @@ export class Engine {
             domContainer.id = id;
             document.body.append(domContainer);
         }
-        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === id);
+        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id);
         if (oldIndex >= 0) {
             const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {

package/browser/Core/Particle.js

@@ -7,7 +7,17 @@ import { Vector3d } from "./Utils/Vector3d.js";
 import { alterHsl } from "../Utils/CanvasUtils.js";
 import { errorPrefix } from "./Utils/Constants.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
-const fixOutMode = (data) => {
+function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
+    const shapeData = shapeOptions.options[shape];
+    if (!shapeData) {
+        return;
+    }
+    return deepExtend({
+        close: shapeOptions.close,
+        fill: shapeOptions.fill,
+    }, itemFromSingleOrMultiple(shapeData, id, reduceDuplicates));
+}
+function fixOutMode(data) {
     if (!isInArray(data.outMode, data.checkModes)) {
         return;
     }
@@ -18,7 +28,7 @@ const fixOutMode = (data) => {
     else if (data.coord < diameter) {
         data.setCb(data.radius);
     }
-};
+}
 export class Particle {
     constructor(engine, id, container, position, overrideOptions, group) {
         this.container = container;
@@ -129,16 +139,6 @@ export class Particle {
             }
             this.offset = Vector.origin;
         };
-        this._loadShapeData = (shapeOptions, reduceDuplicates) => {
-            const shapeData = shapeOptions.options[this.shape];
-            if (!shapeData) {
-                return;
-            }
-            return deepExtend({
-                close: shapeOptions.close,
-                fill: shapeOptions.fill,
-            }, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
-        };
         this._engine = engine;
         this.init(id, position, overrideOptions, group);
     }
@@ -217,7 +217,7 @@ export class Particle {
                 shapeOptions.load(overrideOptions.shape);
             }
         }
-        this.shapeData = this._loadShapeData(shapeOptions, reduceDuplicates);
+        this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
         particlesOptions.load(overrideOptions);
         const shapeData = this.shapeData;
         if (shapeData) {

package/browser/Core/Particles.js

@@ -70,8 +70,9 @@ export class Particles {
                 return false;
             }
             particle.destroy(override);
+            const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, 1);
-            this._zArray = this._zArray.splice(this._zArray.indexOf(particle), 1);
+            this._zArray.splice(zIdx, 1);
             this.pool.push(particle);
             this._engine.dispatchEvent("particleRemoved", {
                 container: this._container,
@@ -172,7 +173,7 @@ export class Particles {
         }
         this.addManualParticles();
         if (!handled) {
-            const particlesOptions = options.particles, groups = options.particles.groups;
+            const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
                 const groupOptions = groups[group];
                 for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {

package/browser/Utils/CanvasUtils.js

@@ -58,7 +58,8 @@ export function drawParticle(data) {
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    drawShape(container, context, particle, radius, opacity, delta);
+    const drawData = { container, context, particle, radius, opacity, delta };
+    drawShape(drawData);
     if (strokeWidth > 0) {
         context.stroke();
     }
@@ -68,11 +69,12 @@ export function drawParticle(data) {
     if (particle.fill) {
         context.fill();
     }
-    drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
+    drawShapeAfterEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.setTransform(1, 0, 0, 1, 0, 0);
 }
-export function drawShape(container, context, particle, radius, opacity, delta) {
+export function drawShape(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
@@ -80,9 +82,10 @@ export function drawShape(container, context, particle, radius, opacity, delta)
     if (!drawer) {
         return;
     }
-    drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
-export function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
+export function drawShapeAfterEffect(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
@@ -90,7 +93,7 @@ export function drawShapeAfterEffect(container, context, particle, radius, opaci
     if (!drawer || !drawer.afterEffect) {
         return;
     }
-    drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.afterEffect({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
 export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {

package/browser/Utils/Utils.js

@@ -52,6 +52,12 @@ export function safeMatchMedia(query) {
     }
     return matchMedia(query);
 }
+export function safeIntersectionObserver(callback) {
+    if (isSsr() || typeof IntersectionObserver === "undefined") {
+        return;
+    }
+    return new IntersectionObserver(callback);
+}
 export function safeMutationObserver(callback) {
     if (isSsr() || typeof MutationObserver === "undefined") {
         return;

package/browser/export-types.js

@@ -15,7 +15,6 @@ export * from "./Core/Interfaces/IInteractor.js";
 export * from "./Core/Interfaces/ILoadParams.js";
 export * from "./Core/Interfaces/IMouseData.js";
 export * from "./Core/Interfaces/IMovePathGenerator.js";
-export * from "./Core/Interfaces/IParticle.js";
 export * from "./Core/Interfaces/IParticleColorStyle.js";
 export * from "./Core/Interfaces/IParticleHslAnimation.js";
 export * from "./Core/Interfaces/IParticleLife.js";
@@ -93,5 +92,4 @@ export * from "./Types/PathOptions.js";
 export * from "./Types/RangeValue.js";
 export * from "./Types/RecursivePartial.js";
 export * from "./Types/ShapeData.js";
-export * from "./Types/ShapeDrawerFunctions.js";
 export * from "./Types/SingleOrMultiple.js";

package/cjs/Core/Container.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
+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 Utils_js_1 = require("../Utils/Utils.js");
 const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
 const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
 function guardCheck(container) {
@@ -26,7 +26,6 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 class Container {
     constructor(engine, id, sourceOptions) {
-        this.id = id;
         this._intersectionManager = (entries) => {
             if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                 return;
@@ -68,6 +67,7 @@ class Container {
             }
         };
         this._engine = engine;
+        this.id = Symbol(id);
         this.fpsLimit = 120;
         this.smooth = false;
         this._delay = 0;
@@ -97,9 +97,7 @@ class Container {
         this._options = loadContainerOptions(this._engine, this);
         this.actualOptions = loadContainerOptions(this._engine, this);
         this._eventListeners = new EventListeners_js_1.EventListeners(this);
-        if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
-            this._intersectionObserver = new IntersectionObserver((entries) => this._intersectionManager(entries));
-        }
+        this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)((entries) => this._intersectionManager(entries));
         this._engine.dispatchEvent("containerBuilt", { container: this });
     }
     get options() {

package/cjs/Core/Engine.js

@@ -53,18 +53,12 @@ class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.1";
+        return "3.0.0-beta.3";
     }
-    addConfig(nameOrConfig, config) {
-        if ((0, Utils_js_1.isString)(nameOrConfig)) {
-            if (config) {
-                config.name = nameOrConfig;
-                this._configs.set(nameOrConfig, config);
-            }
-        }
-        else {
-            this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
-        }
+    addConfig(config) {
+        const name = config.name ?? "default";
+        this._configs.set(name, config);
+        this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
@@ -93,45 +87,11 @@ class Engine {
         (override || !this.getPreset(preset)) && this.presets.set(preset, options);
         await this.refresh(refresh);
     }
-    async addShape(shape, drawer, initOrRefresh, afterEffectOrRefresh, destroyOrRefresh, refresh = true) {
-        let customDrawer;
-        let realRefresh = refresh, realInit, realAfterEffect, realDestroy;
-        if ((0, Utils_js_1.isBoolean)(initOrRefresh)) {
-            realRefresh = initOrRefresh;
-            realInit = undefined;
-        }
-        else {
-            realInit = initOrRefresh;
-        }
-        if ((0, Utils_js_1.isBoolean)(afterEffectOrRefresh)) {
-            realRefresh = afterEffectOrRefresh;
-            realAfterEffect = undefined;
-        }
-        else {
-            realAfterEffect = afterEffectOrRefresh;
-        }
-        if ((0, Utils_js_1.isBoolean)(destroyOrRefresh)) {
-            realRefresh = destroyOrRefresh;
-            realDestroy = undefined;
-        }
-        else {
-            realDestroy = destroyOrRefresh;
-        }
-        if ((0, Utils_js_1.isFunction)(drawer)) {
-            customDrawer = {
-                afterEffect: realAfterEffect,
-                destroy: realDestroy,
-                draw: drawer,
-                init: realInit,
-            };
-        }
-        else {
-            customDrawer = drawer;
-        }
+    async addShape(shape, drawer, refresh = true) {
         (0, Utils_js_1.executeOnSingleOrMultiple)(shape, (type) => {
-            !this.getShapeDrawer(type) && this.drawers.set(type, customDrawer);
+            !this.getShapeDrawer(type) && this.drawers.set(type, drawer);
         });
-        await this.refresh(realRefresh);
+        await this.refresh(refresh);
     }
     clearPlugins(container) {
         this.updaters.delete(container);
@@ -197,7 +157,7 @@ class Engine {
             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 === id);
+        const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id);
         if (oldIndex >= 0) {
             const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {

package/cjs/Core/Particle.js

@@ -10,7 +10,17 @@ const Vector3d_js_1 = require("./Utils/Vector3d.js");
 const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
 const Constants_js_1 = require("./Utils/Constants.js");
 const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-const fixOutMode = (data) => {
+function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
+    const shapeData = shapeOptions.options[shape];
+    if (!shapeData) {
+        return;
+    }
+    return (0, Utils_js_1.deepExtend)({
+        close: shapeOptions.close,
+        fill: shapeOptions.fill,
+    }, (0, Utils_js_1.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));
+}
+function fixOutMode(data) {
     if (!(0, Utils_js_1.isInArray)(data.outMode, data.checkModes)) {
         return;
     }
@@ -21,7 +31,7 @@ const fixOutMode = (data) => {
     else if (data.coord < diameter) {
         data.setCb(data.radius);
     }
-};
+}
 class Particle {
     constructor(engine, id, container, position, overrideOptions, group) {
         this.container = container;
@@ -132,16 +142,6 @@ class Particle {
             }
             this.offset = Vector_js_1.Vector.origin;
         };
-        this._loadShapeData = (shapeOptions, reduceDuplicates) => {
-            const shapeData = shapeOptions.options[this.shape];
-            if (!shapeData) {
-                return;
-            }
-            return (0, Utils_js_1.deepExtend)({
-                close: shapeOptions.close,
-                fill: shapeOptions.fill,
-            }, (0, Utils_js_1.itemFromSingleOrMultiple)(shapeData, this.id, reduceDuplicates));
-        };
         this._engine = engine;
         this.init(id, position, overrideOptions, group);
     }
@@ -220,7 +220,7 @@ class Particle {
                 shapeOptions.load(overrideOptions.shape);
             }
         }
-        this.shapeData = this._loadShapeData(shapeOptions, reduceDuplicates);
+        this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
         particlesOptions.load(overrideOptions);
         const shapeData = this.shapeData;
         if (shapeData) {

package/cjs/Core/Particles.js

@@ -73,8 +73,9 @@ class Particles {
                 return false;
             }
             particle.destroy(override);
+            const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, 1);
-            this._zArray = this._zArray.splice(this._zArray.indexOf(particle), 1);
+            this._zArray.splice(zIdx, 1);
             this.pool.push(particle);
             this._engine.dispatchEvent("particleRemoved", {
                 container: this._container,
@@ -175,7 +176,7 @@ class Particles {
         }
         this.addManualParticles();
         if (!handled) {
-            const particlesOptions = options.particles, groups = options.particles.groups;
+            const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
                 const groupOptions = groups[group];
                 for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {

package/cjs/Utils/CanvasUtils.js

@@ -66,7 +66,8 @@ function drawParticle(data) {
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    drawShape(container, context, particle, radius, opacity, delta);
+    const drawData = { container, context, particle, radius, opacity, delta };
+    drawShape(drawData);
     if (strokeWidth > 0) {
         context.stroke();
     }
@@ -76,12 +77,13 @@ function drawParticle(data) {
     if (particle.fill) {
         context.fill();
     }
-    drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
+    drawShapeAfterEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.setTransform(1, 0, 0, 1, 0, 0);
 }
 exports.drawParticle = drawParticle;
-function drawShape(container, context, particle, radius, opacity, delta) {
+function drawShape(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
@@ -89,10 +91,11 @@ function drawShape(container, context, particle, radius, opacity, delta) {
     if (!drawer) {
         return;
     }
-    drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
 exports.drawShape = drawShape;
-function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
+function drawShapeAfterEffect(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
@@ -100,7 +103,7 @@ function drawShapeAfterEffect(container, context, particle, radius, opacity, del
     if (!drawer || !drawer.afterEffect) {
         return;
     }
-    drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.afterEffect({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
 exports.drawShapeAfterEffect = drawShapeAfterEffect;
 function drawPlugin(context, plugin, delta) {

package/cjs/Utils/Utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isArray = exports.isObject = exports.isFunction = exports.isNumber = exports.isString = exports.isBoolean = exports.getSize = exports.getPosition = exports.initParticleNumericAnimationValue = exports.findItemFromSingleOrMultiple = exports.itemFromSingleOrMultiple = exports.executeOnSingleOrMultiple = exports.rectBounce = exports.circleBounce = exports.circleBounceDataFromParticle = exports.divMode = exports.singleDivModeExecute = exports.divModeExecute = exports.isDivModeEnabled = exports.deepExtend = exports.calculateBounds = exports.areBoundsInside = exports.isPointInside = exports.itemFromArray = exports.arrayRandomIndex = exports.loadFont = exports.isInArray = exports.safeMutationObserver = exports.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = exports.getLogger = exports.setLogger = void 0;
+exports.isArray = exports.isObject = exports.isFunction = exports.isNumber = exports.isString = exports.isBoolean = exports.getSize = exports.getPosition = exports.initParticleNumericAnimationValue = exports.findItemFromSingleOrMultiple = exports.itemFromSingleOrMultiple = exports.executeOnSingleOrMultiple = exports.rectBounce = exports.circleBounce = exports.circleBounceDataFromParticle = exports.divMode = exports.singleDivModeExecute = exports.divModeExecute = exports.isDivModeEnabled = exports.deepExtend = exports.calculateBounds = exports.areBoundsInside = exports.isPointInside = exports.itemFromArray = exports.arrayRandomIndex = exports.loadFont = exports.isInArray = exports.safeMutationObserver = exports.safeIntersectionObserver = exports.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = exports.getLogger = exports.setLogger = void 0;
 const NumberUtils_js_1 = require("./NumberUtils.js");
 const Vector_js_1 = require("../Core/Utils/Vector.js");
 const _logger = {
@@ -60,6 +60,13 @@ function safeMatchMedia(query) {
     return matchMedia(query);
 }
 exports.safeMatchMedia = safeMatchMedia;
+function safeIntersectionObserver(callback) {
+    if (isSsr() || typeof IntersectionObserver === "undefined") {
+        return;
+    }
+    return new IntersectionObserver(callback);
+}
+exports.safeIntersectionObserver = safeIntersectionObserver;
 function safeMutationObserver(callback) {
     if (isSsr() || typeof MutationObserver === "undefined") {
         return;

package/cjs/export-types.js

@@ -31,7 +31,6 @@ __exportStar(require("./Core/Interfaces/IInteractor.js"), exports);
 __exportStar(require("./Core/Interfaces/ILoadParams.js"), exports);
 __exportStar(require("./Core/Interfaces/IMouseData.js"), exports);
 __exportStar(require("./Core/Interfaces/IMovePathGenerator.js"), exports);
-__exportStar(require("./Core/Interfaces/IParticle.js"), exports);
 __exportStar(require("./Core/Interfaces/IParticleColorStyle.js"), exports);
 __exportStar(require("./Core/Interfaces/IParticleHslAnimation.js"), exports);
 __exportStar(require("./Core/Interfaces/IParticleLife.js"), exports);
@@ -109,5 +108,4 @@ __exportStar(require("./Types/PathOptions.js"), exports);
 __exportStar(require("./Types/RangeValue.js"), exports);
 __exportStar(require("./Types/RecursivePartial.js"), exports);
 __exportStar(require("./Types/ShapeData.js"), exports);
-__exportStar(require("./Types/ShapeDrawerFunctions.js"), exports);
 __exportStar(require("./Types/SingleOrMultiple.js"), exports);

package/esm/Core/Container.js

@@ -1,10 +1,10 @@
+import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
 import { errorPrefix } from "./Utils/Constants.js";
-import { getLogger } from "../Utils/Utils.js";
 import { getRangeValue } from "../Utils/NumberUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
 function guardCheck(container) {
@@ -23,7 +23,6 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 export class Container {
     constructor(engine, id, sourceOptions) {
-        this.id = id;
         this._intersectionManager = (entries) => {
             if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                 return;
@@ -65,6 +64,7 @@ export class Container {
             }
         };
         this._engine = engine;
+        this.id = Symbol(id);
         this.fpsLimit = 120;
         this.smooth = false;
         this._delay = 0;
@@ -94,9 +94,7 @@ export class Container {
         this._options = loadContainerOptions(this._engine, this);
         this.actualOptions = loadContainerOptions(this._engine, this);
         this._eventListeners = new EventListeners(this);
-        if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
-            this._intersectionObserver = new IntersectionObserver((entries) => this._intersectionManager(entries));
-        }
+        this._intersectionObserver = safeIntersectionObserver((entries) => this._intersectionManager(entries));
         this._engine.dispatchEvent("containerBuilt", { container: this });
     }
     get options() {