tsparticles 1.39.2 → 1.40.2

package/Plugins/Emitters/index.js

@@ -9,6 +9,18 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _EmittersPlugin_engine;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadEmittersPlugin = void 0;
 const CircleShape_1 = require("./Shapes/Circle/CircleShape");
@@ -18,11 +30,13 @@ const ShapeManager_1 = require("./ShapeManager");
 const SquareShape_1 = require("./Shapes/Square/SquareShape");
 const Utils_1 = require("../../Utils");
 class EmittersPlugin {
-    constructor() {
+    constructor(engine) {
+        _EmittersPlugin_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _EmittersPlugin_engine, engine, "f");
         this.id = "emitters";
     }
     getPlugin(container) {
-        return new Emitters_1.Emitters(container);
+        return new Emitters_1.Emitters(__classPrivateFieldGet(this, _EmittersPlugin_engine, "f"), container);
     }
     needsPlugin(options) {
         var _a, _b, _c;
@@ -76,16 +90,21 @@ class EmittersPlugin {
         }
     }
 }
+_EmittersPlugin_engine = new WeakMap();
 async function loadEmittersPlugin(engine) {
-    const plugin = new EmittersPlugin();
-    await engine.addPlugin(plugin);
+    if (!engine.emitterShapeManager) {
+        engine.emitterShapeManager = new ShapeManager_1.ShapeManager(engine);
+    }
     if (!engine.addEmitterShape) {
         engine.addEmitterShape = (name, shape) => {
-            ShapeManager_1.ShapeManager.addShape(name, shape);
+            var _a;
+            (_a = engine.emitterShapeManager) === null || _a === void 0 ? void 0 : _a.addShape(name, shape);
         };
     }
+    const plugin = new EmittersPlugin(engine);
+    await engine.addPlugin(plugin);
     engine.addEmitterShape("circle", new CircleShape_1.CircleShape());
     engine.addEmitterShape("square", new SquareShape_1.SquareShape());
 }
 exports.loadEmittersPlugin = loadEmittersPlugin;
-__exportStar(require("./EmittersMain"), exports);
+__exportStar(require("./EmittersEngine"), exports);

package/README.md

@@ -9,7 +9,7 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
 
 [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
 
-[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles")
+[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
 
 ---
 

package/browser/Core/Container.d.ts

@@ -5,6 +5,7 @@
 import { FrameManager, Vector } from "./Utils";
 import type { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
 import { Canvas } from "./Canvas";
+import type { Engine } from "../engine";
 import type { IOptions } from "../Options/Interfaces/IOptions";
 import { Options } from "../Options/Classes/Options";
 import { Particle } from "./Particle";
@@ -17,6 +18,7 @@ import { Retina } from "./Retina";
  * @category Core
  */
 export declare class Container {
+    #private;
     readonly id: string;
     /**
      * Check if the particles container is started
@@ -76,11 +78,12 @@ export declare class Container {
     /**
      * This is the core class, create an instance to have a new working particles manager
      * @constructor
+     * @param engine the engine used by container
      * @param id the id to identify this instance
      * @param sourceOptions the options to load
      * @param presets all the presets to load with options
      */
-    constructor(id: string, sourceOptions?: RecursivePartial<IOptions>, ...presets: string[]);
+    constructor(engine: Engine, id: string, sourceOptions?: RecursivePartial<IOptions>, ...presets: string[]);
     /**
      * Starts animations and resume from pause
      * @param force

package/browser/Core/Container.js

@@ -1,8 +1,20 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Container_engine;
 /**
  * [[include:Container.md]]
  * @packageDocumentation
  */
-import { EventListeners, FrameManager, Plugins, Vector } from "./Utils";
+import { EventListeners, FrameManager, Vector } from "./Utils";
 import { animate, cancelAnimation, getRangeValue } from "../Utils";
 import { Canvas } from "./Canvas";
 import { Options } from "../Options/Classes/Options";
@@ -17,13 +29,16 @@ export class Container {
     /**
      * This is the core class, create an instance to have a new working particles manager
      * @constructor
+     * @param engine the engine used by container
      * @param id the id to identify this instance
      * @param sourceOptions the options to load
      * @param presets all the presets to load with options
      */
-    constructor(id, sourceOptions, ...presets) {
+    constructor(engine, id, sourceOptions, ...presets) {
         this.id = id;
-        this.fpsLimit = 60;
+        _Container_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Container_engine, engine, "f");
+        this.fpsLimit = 120;
         this.duration = 0;
         this.lifeTime = 0;
         this.firstStart = true;
@@ -37,7 +52,7 @@ export class Container {
         this._initialSourceOptions = sourceOptions;
         this.retina = new Retina(this);
         this.canvas = new Canvas(this);
-        this.particles = new Particles(this);
+        this.particles = new Particles(__classPrivateFieldGet(this, _Container_engine, "f"), this);
         this.drawer = new FrameManager(this);
         this.presets = presets;
         this.pathGenerator = {
@@ -67,8 +82,8 @@ export class Container {
         this.drawers = new Map();
         this.density = 1;
         /* tsParticles variables with default values */
-        this._options = new Options();
-        this.actualOptions = new Options();
+        this._options = new Options(__classPrivateFieldGet(this, _Container_engine, "f"));
+        this.actualOptions = new Options(__classPrivateFieldGet(this, _Container_engine, "f"));
         /* ---------- tsParticles - start ------------ */
         this.eventListeners = new EventListeners(this);
         if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
@@ -236,7 +251,7 @@ export class Container {
         return this.start();
     }
     reset() {
-        this._options = new Options();
+        this._options = new Options(__classPrivateFieldGet(this, _Container_engine, "f"));
         return this.refresh();
     }
     /**
@@ -253,7 +268,7 @@ export class Container {
         this.particles.clear();
         this.canvas.clear();
         if (this.interactivity.element instanceof HTMLElement && this.intersectionObserver) {
-            this.intersectionObserver.observe(this.interactivity.element);
+            this.intersectionObserver.unobserve(this.interactivity.element);
         }
         for (const [, plugin] of this.plugins) {
             if (plugin.stop) {
@@ -388,13 +403,13 @@ export class Container {
         return false;
     }
     async init() {
-        this._options = new Options();
+        this._options = new Options(__classPrivateFieldGet(this, _Container_engine, "f"));
         for (const preset of this.presets) {
-            this._options.load(Plugins.getPreset(preset));
+            this._options.load(__classPrivateFieldGet(this, _Container_engine, "f").plugins.getPreset(preset));
         }
-        const shapes = Plugins.getSupportedShapes();
+        const shapes = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getSupportedShapes();
         for (const type of shapes) {
-            const drawer = Plugins.getShapeDrawer(type);
+            const drawer = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getShapeDrawer(type);
             if (drawer) {
                 this.drawers.set(type, drawer);
             }
@@ -402,7 +417,7 @@ export class Container {
         /* options settings */
         this._options.load(this._initialSourceOptions);
         this._options.load(this._sourceOptions);
-        this.actualOptions = new Options();
+        this.actualOptions = new Options(__classPrivateFieldGet(this, _Container_engine, "f"));
         this.actualOptions.load(this._options);
         /* init canvas + particles */
         this.retina.init();
@@ -413,8 +428,8 @@ export class Container {
         this.zLayers = this.actualOptions.zLayers;
         this.duration = getRangeValue(this.actualOptions.duration);
         this.lifeTime = 0;
-        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 60;
-        const availablePlugins = Plugins.getAvailablePlugins(this);
+        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
+        const availablePlugins = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getAvailablePlugins(this);
         for (const [id, plugin] of availablePlugins) {
             this.plugins.set(id, plugin);
         }
@@ -433,7 +448,7 @@ export class Container {
         }
         const pathOptions = this.actualOptions.particles.move.path;
         if (pathOptions.generator) {
-            const customGenerator = Plugins.getPathGenerator(pathOptions.generator);
+            const customGenerator = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getPathGenerator(pathOptions.generator);
             if (customGenerator) {
                 if (customGenerator.init) {
                     this.pathGenerator.init = customGenerator.init;
@@ -471,3 +486,4 @@ export class Container {
         }
     }
 }
+_Container_engine = new WeakMap();

package/browser/Core/Loader.d.ts

@@ -1,4 +1,5 @@
 import { Container } from "./Container";
+import type { Engine } from "../engine";
 import type { IOptions } from "../Options/Interfaces/IOptions";
 import type { Particle } from "./Particle";
 import type { RecursivePartial } from "../Types";
@@ -20,24 +21,26 @@ interface RemoteLoaderParams {
  * @category Core
  */
 export declare class Loader {
+    #private;
+    constructor(engine: Engine);
     /**
      * All the [[Container]] objects loaded
      */
-    static dom(): Container[];
+    dom(): Container[];
     /**
      * Retrieves a [[Container]] from all the objects loaded
      * @param index the object index
      */
-    static domItem(index: number): Container | undefined;
-    static loadOptions(params: LoaderParams): Promise<Container | undefined>;
-    static loadRemoteOptions(params: RemoteLoaderParams): Promise<Container | undefined>;
+    domItem(index: number): Container | undefined;
+    loadOptions(params: LoaderParams): Promise<Container | undefined>;
+    loadRemoteOptions(params: RemoteLoaderParams): Promise<Container | undefined>;
     /**
      * Loads the provided options to create a [[Container]] object.
      * @param tagId the particles container element id
      * @param options the options object to initialize the [[Container]]
      * @param index if an options array is provided, this will retrieve the exact index of that array
      */
-    static load(tagId: string | SingleOrMultiple<RecursivePartial<IOptions>>, options?: SingleOrMultiple<RecursivePartial<IOptions>> | number, index?: number): Promise<Container | undefined>;
+    load(tagId: string | SingleOrMultiple<RecursivePartial<IOptions>>, options?: SingleOrMultiple<RecursivePartial<IOptions>> | number, index?: number): Promise<Container | undefined>;
     /**
      * Loads the provided options to create a [[Container]] object.
      * @param id the particles container element id
@@ -45,7 +48,7 @@ export declare class Loader {
      * @param options the options object to initialize the [[Container]]
      * @param index if an options array is provided, this will retrieve the exact index of that array
      */
-    static set(id: string | HTMLElement, domContainer: HTMLElement | SingleOrMultiple<RecursivePartial<IOptions>>, options?: SingleOrMultiple<RecursivePartial<IOptions>> | number, index?: number): Promise<Container | undefined>;
+    set(id: string | HTMLElement, domContainer: HTMLElement | SingleOrMultiple<RecursivePartial<IOptions>>, options?: SingleOrMultiple<RecursivePartial<IOptions>> | number, index?: number): Promise<Container | undefined>;
     /**
      * Loads the provided json with a GET request. The content will be used to create a [[Container]] object.
      * This method is async, so if you need a callback refer to JavaScript function `fetch`
@@ -54,7 +57,7 @@ export declare class Loader {
      * @param index the index of the paths array, if a single path is passed this value is ignored
      * @returns A Promise with the [[Container]] object created
      */
-    static loadJSON(tagId: string | SingleOrMultiple<string>, jsonUrl?: SingleOrMultiple<string> | number, index?: number): Promise<Container | undefined>;
+    loadJSON(tagId: string | SingleOrMultiple<string>, jsonUrl?: SingleOrMultiple<string> | number, index?: number): Promise<Container | undefined>;
     /**
      * Loads the provided json with a GET request. The content will be used to create a [[Container]] object.
      * This method is async, so if you need a callback refer to JavaScript function `fetch`
@@ -64,11 +67,11 @@ export declare class Loader {
      * @param index the index of the paths array, if a single path is passed this value is ignored
      * @returns A Promise with the [[Container]] object created
      */
-    static setJSON(id: string | HTMLElement, domContainer: HTMLElement | SingleOrMultiple<string>, jsonUrl: SingleOrMultiple<string> | (number | undefined), index?: number): Promise<Container | undefined>;
+    setJSON(id: string | HTMLElement, domContainer: HTMLElement | SingleOrMultiple<string>, jsonUrl: SingleOrMultiple<string> | (number | undefined), index?: number): Promise<Container | undefined>;
     /**
      * Adds an additional click handler to all the loaded [[Container]] objects.
      * @param callback the function called after the click event is fired
      */
-    static setOnClickHandler(callback: (evt: Event, particles?: Particle[]) => void): void;
+    setOnClickHandler(callback: (evt: Event, particles?: Particle[]) => void): void;
 }
 export {};

package/browser/Core/Loader.js

@@ -1,7 +1,18 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Loader_engine;
 import { Constants } from "./Utils";
 import { Container } from "./Container";
 import { itemFromArray } from "../Utils";
-const tsParticlesDom = [];
 function fetchError(statusCode) {
     console.error(`Error tsParticles - fetch status: ${statusCode}`);
     console.error("Error tsParticles - File config not found");
@@ -11,25 +22,29 @@ function fetchError(statusCode) {
  * @category Core
  */
 export class Loader {
+    constructor(engine) {
+        _Loader_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Loader_engine, engine, "f");
+    }
     /**
      * All the [[Container]] objects loaded
      */
-    static dom() {
-        return tsParticlesDom;
+    dom() {
+        return __classPrivateFieldGet(this, _Loader_engine, "f").domArray;
     }
     /**
      * Retrieves a [[Container]] from all the objects loaded
      * @param index the object index
      */
-    static domItem(index) {
-        const dom = Loader.dom();
+    domItem(index) {
+        const dom = this.dom();
         const item = dom[index];
         if (item && !item.destroyed) {
             return item;
         }
         dom.splice(index, 1);
     }
-    static async loadOptions(params) {
+    async loadOptions(params) {
         var _a, _b, _c;
         const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 10000)}`;
         const { options, index } = params;
@@ -41,10 +56,10 @@ export class Loader {
             (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
         }
         const currentOptions = options instanceof Array ? itemFromArray(options, index) : options;
-        const dom = Loader.dom();
+        const dom = this.dom();
         const oldIndex = dom.findIndex((v) => v.id === tagId);
         if (oldIndex >= 0) {
-            const old = Loader.domItem(oldIndex);
+            const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {
                 old.destroy();
                 dom.splice(oldIndex, 1);
@@ -74,7 +89,7 @@ export class Loader {
             }
         }
         /* launch tsParticles */
-        const newItem = new Container(tagId, currentOptions);
+        const newItem = new Container(__classPrivateFieldGet(this, _Loader_engine, "f"), tagId, currentOptions);
         if (oldIndex >= 0) {
             dom.splice(oldIndex, 0, newItem);
         }
@@ -85,7 +100,7 @@ export class Loader {
         await newItem.start();
         return newItem;
     }
-    static async loadRemoteOptions(params) {
+    async loadRemoteOptions(params) {
         const { url: jsonUrl, index } = params;
         const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
         if (!url) {
@@ -97,7 +112,7 @@ export class Loader {
             return;
         }
         const data = await response.json();
-        return await Loader.loadOptions({
+        return this.loadOptions({
             tagId: params.tagId,
             element: params.element,
             index,
@@ -110,7 +125,7 @@ export class Loader {
      * @param options the options object to initialize the [[Container]]
      * @param index if an options array is provided, this will retrieve the exact index of that array
      */
-    static load(tagId, options, index) {
+    load(tagId, options, index) {
         const params = { index };
         if (typeof tagId === "string") {
             params.tagId = tagId;
@@ -133,7 +148,7 @@ export class Loader {
      * @param options the options object to initialize the [[Container]]
      * @param index if an options array is provided, this will retrieve the exact index of that array
      */
-    static async set(id, domContainer, options, index) {
+    async set(id, domContainer, options, index) {
         const params = { index };
         if (typeof id === "string") {
             params.tagId = id;
@@ -163,7 +178,7 @@ export class Loader {
      * @param index the index of the paths array, if a single path is passed this value is ignored
      * @returns A Promise with the [[Container]] object created
      */
-    static async loadJSON(tagId, jsonUrl, index) {
+    async loadJSON(tagId, jsonUrl, index) {
         let url, id;
         if (typeof jsonUrl === "number" || jsonUrl === undefined) {
             url = tagId;
@@ -172,7 +187,7 @@ export class Loader {
             id = tagId;
             url = jsonUrl;
         }
-        return await Loader.loadRemoteOptions({ tagId: id, url, index });
+        return this.loadRemoteOptions({ tagId: id, url, index });
     }
     /**
      * Loads the provided json with a GET request. The content will be used to create a [[Container]] object.
@@ -183,7 +198,7 @@ export class Loader {
      * @param index the index of the paths array, if a single path is passed this value is ignored
      * @returns A Promise with the [[Container]] object created
      */
-    static async setJSON(id, domContainer, jsonUrl, index) {
+    async setJSON(id, domContainer, jsonUrl, index) {
         let url, newId, newIndex, element;
         if (id instanceof HTMLElement) {
             element = id;
@@ -196,14 +211,14 @@ export class Loader {
             url = jsonUrl;
             newIndex = index;
         }
-        return await Loader.loadRemoteOptions({ tagId: newId, url, index: newIndex, element });
+        return this.loadRemoteOptions({ tagId: newId, url, index: newIndex, element });
     }
     /**
      * Adds an additional click handler to all the loaded [[Container]] objects.
      * @param callback the function called after the click event is fired
      */
-    static setOnClickHandler(callback) {
-        const dom = Loader.dom();
+    setOnClickHandler(callback) {
+        const dom = this.dom();
         if (dom.length === 0) {
             throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
         }
@@ -212,3 +227,4 @@ export class Loader {
         }
     }
 }
+_Loader_engine = new WeakMap();

package/browser/Core/Particle.d.ts

@@ -2,6 +2,7 @@ import { ShapeType } from "../Enums";
 import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleRetinaProps, IParticleRoll, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IParticleWobble, IRgb, IShapeValues } from "./Interfaces";
 import { Vector, Vector3d } from "./Utils";
 import type { Container } from "./Container";
+import type { Engine } from "../engine";
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
 import type { RecursivePartial } from "../Types";
@@ -11,6 +12,7 @@ import type { Stroke } from "../Options/Classes/Particles/Stroke";
  * @category Core
  */
 export declare class Particle implements IParticle {
+    #private;
     readonly id: number;
     readonly container: Container;
     readonly group?: string | undefined;
@@ -53,7 +55,7 @@ export declare class Particle implements IParticle {
     readonly bubble: IBubbleParticleData;
     readonly zIndexFactor: number;
     readonly retina: IParticleRetinaProps;
-    constructor(id: number, container: Container, position?: ICoordinates, overrideOptions?: RecursivePartial<IParticles>, group?: string | undefined);
+    constructor(engine: Engine, id: number, container: Container, position?: ICoordinates, overrideOptions?: RecursivePartial<IParticles>, group?: string | undefined);
     isVisible(): boolean;
     isInsideCanvas(): boolean;
     draw(delta: IDelta): void;

package/browser/Core/Particle.js

@@ -1,4 +1,16 @@
-import { Plugins, Vector, Vector3d } from "./Utils";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Particle_engine;
+import { Vector, Vector3d } from "./Utils";
 import { alterHsl, clamp, colorToRgb, deepExtend, getDistance, getHslFromAnimation, getParticleBaseVelocity, getParticleDirectionAngle, getRangeMax, getRangeMin, getRangeValue, getValue, isInArray, itemFromArray, randomInRange, setRangeValue, } from "../Utils";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
 import { Shape } from "../Options/Classes/Particles/Shape/Shape";
@@ -17,11 +29,13 @@ const fixOutMode = (data) => {
  * @category Core
  */
 export class Particle {
-    constructor(id, container, position, overrideOptions, group) {
+    constructor(engine, id, container, position, overrideOptions, group) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         this.id = id;
         this.container = container;
         this.group = group;
+        _Particle_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Particle_engine, engine, "f");
         this.fill = true;
         this.close = true;
         this.lastPathTime = 0;
@@ -124,7 +138,7 @@ export class Particle {
         this.sides = 24;
         let drawer = container.drawers.get(this.shape);
         if (!drawer) {
-            drawer = Plugins.getShapeDrawer(this.shape);
+            drawer = __classPrivateFieldGet(this, _Particle_engine, "f").plugins.getShapeDrawer(this.shape);
             if (drawer) {
                 container.drawers.set(this.shape, drawer);
             }
@@ -376,3 +390,4 @@ export class Particle {
         return life;
     }
 }
+_Particle_engine = new WeakMap();

package/browser/Core/Particles.d.ts

@@ -1,6 +1,7 @@
 import type { ICoordinates, IDelta, IMouseData, IParticle, IRgb } from "./Interfaces";
 import { QuadTree } from "./Utils";
 import type { Container } from "./Container";
+import type { Engine } from "../engine";
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
 import { Particle } from "./Particle";
 import type { RecursivePartial } from "../Types";
@@ -9,6 +10,7 @@ import type { RecursivePartial } from "../Types";
  * @category Core
  */
 export declare class Particles {
+    #private;
     private readonly container;
     get count(): number;
     /**
@@ -32,7 +34,7 @@ export declare class Particles {
     private nextId;
     private readonly freqs;
     private readonly mover;
-    constructor(container: Container);
+    constructor(engine: Engine, container: Container);
     init(): void;
     redraw(): void;
     removeAt(index: number, quantity?: number, group?: string, override?: boolean): void;

package/browser/Core/Particles.js

@@ -1,4 +1,16 @@
-import { InteractionManager, ParticlesMover, Plugins, Point, QuadTree, Rectangle } from "./Utils";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Particles_engine;
+import { InteractionManager, ParticlesMover, Point, QuadTree, Rectangle } from "./Utils";
 import { getRangeMax, getRangeMin, getRangeValue, randomInRange, setRangeValue } from "../Utils";
 import { Particle } from "./Particle";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
@@ -7,8 +19,10 @@ import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions"
  * @category Core
  */
 export class Particles {
-    constructor(container) {
+    constructor(engine, container) {
         this.container = container;
+        _Particles_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Particles_engine, engine, "f");
         this.nextId = 0;
         this.array = [];
         this.zArray = [];
@@ -20,11 +34,11 @@ export class Particles {
             links: new Map(),
             triangles: new Map(),
         };
-        this.interactionManager = new InteractionManager(container);
+        this.interactionManager = new InteractionManager(__classPrivateFieldGet(this, _Particles_engine, "f"), container);
         const canvasSize = this.container.canvas.size;
         this.linksColors = new Map();
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
-        this.updaters = Plugins.getUpdaters(container, true);
+        this.updaters = __classPrivateFieldGet(this, _Particles_engine, "f").plugins.getUpdaters(container, true);
     }
     get count() {
         return this.array.length;
@@ -39,7 +53,7 @@ export class Particles {
         this.freqs.links = new Map();
         this.freqs.triangles = new Map();
         let handled = false;
-        this.updaters = Plugins.getUpdaters(container, true);
+        this.updaters = __classPrivateFieldGet(this, _Particles_engine, "f").plugins.getUpdaters(container, true);
         this.interactionManager.init();
         for (const [, plugin] of container.plugins) {
             if (plugin.particlesInitialization !== undefined) {
@@ -306,7 +320,7 @@ export class Particles {
     }
     pushParticle(position, overrideOptions, group, initializer) {
         try {
-            const particle = new Particle(this.nextId, this.container, position, overrideOptions, group);
+            const particle = new Particle(__classPrivateFieldGet(this, _Particles_engine, "f"), this.nextId, this.container, position, overrideOptions, group);
             let canAdd = true;
             if (initializer) {
                 canAdd = initializer(particle);
@@ -325,3 +339,4 @@ export class Particles {
         }
     }
 }
+_Particles_engine = new WeakMap();

package/browser/Core/Utils/InteractionManager.d.ts

@@ -1,14 +1,16 @@
 import type { IDelta } from "../Interfaces";
 import type { Container } from "../Container";
+import type { Engine } from "../../engine";
 import type { Particle } from "../Particle";
 /**
  * @category Core
  */
 export declare class InteractionManager {
+    #private;
     private readonly container;
-    private readonly externalInteractors;
-    private readonly particleInteractors;
-    constructor(container: Container);
+    private externalInteractors;
+    private particleInteractors;
+    constructor(engine: Engine, container: Container);
     init(): void;
     externalInteract(delta: IDelta): void;
     particlesInteract(particle: Particle, delta: IDelta): void;