tsparticles 1.39.2 → 1.40.2

package/browser/Core/Utils/InteractionManager.js

@@ -1,16 +1,31 @@
-import { Plugins } 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 _InteractionManager_engine;
 /**
  * @category Core
  */
 export class InteractionManager {
-    constructor(container) {
+    constructor(engine, container) {
         this.container = container;
+        _InteractionManager_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _InteractionManager_engine, engine, "f");
         this.externalInteractors = [];
         this.particleInteractors = [];
         this.init();
     }
     init() {
-        const interactors = Plugins.getInteractors(this.container, true);
+        const interactors = __classPrivateFieldGet(this, _InteractionManager_engine, "f").plugins.getInteractors(this.container, true);
+        this.externalInteractors = [];
+        this.particleInteractors = [];
         for (const interactor of interactors) {
             switch (interactor.type) {
                 case 0 /* External */:
@@ -41,3 +56,4 @@ export class InteractionManager {
         }
     }
 }
+_InteractionManager_engine = new WeakMap();

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

@@ -1,25 +1,39 @@
 import type { IContainerPlugin, IInteractor, IMovePathGenerator, IParticleUpdater, IPlugin, IShapeDrawer } from "../Interfaces";
 import type { Container } from "../Container";
+import type { Engine } from "../../engine";
 import type { IOptions } from "../../Options/Interfaces/IOptions";
 import type { Options } from "../../Options/Classes/Options";
 import type { RecursivePartial } from "../../Types";
+declare type InteractorInitializer = (container: Container) => IInteractor;
+declare type UpdaterInitializer = (container: Container) => IParticleUpdater;
 /**
  * @category Utils
  */
 export declare class Plugins {
-    static getPlugin(plugin: string): IPlugin | undefined;
-    static addPlugin(plugin: IPlugin): void;
-    static getAvailablePlugins(container: Container): Map<string, IContainerPlugin>;
-    static loadOptions(options: Options, sourceOptions: RecursivePartial<IOptions>): void;
-    static getPreset(preset: string): RecursivePartial<IOptions> | undefined;
-    static addPreset(presetKey: string, options: RecursivePartial<IOptions>, override?: boolean): void;
-    static addShapeDrawer(type: string, drawer: IShapeDrawer): void;
-    static getShapeDrawer(type: string): IShapeDrawer | undefined;
-    static getSupportedShapes(): IterableIterator<string>;
-    static getPathGenerator(type: string): IMovePathGenerator | undefined;
-    static addPathGenerator(type: string, pathGenerator: IMovePathGenerator): void;
-    static getInteractors(container: Container, force?: boolean): IInteractor[];
-    static addInteractor(name: string, initInteractor: (container: Container) => IInteractor): void;
-    static getUpdaters(container: Container, force?: boolean): IParticleUpdater[];
-    static addParticleUpdater(name: string, initUpdater: (container: Container) => IParticleUpdater): void;
+    #private;
+    readonly plugins: IPlugin[];
+    readonly interactorsInitializers: Map<string, InteractorInitializer>;
+    readonly updatersInitializers: Map<string, UpdaterInitializer>;
+    readonly interactors: Map<Container, IInteractor[]>;
+    readonly updaters: Map<Container, IParticleUpdater[]>;
+    readonly presets: Map<string, RecursivePartial<IOptions>>;
+    readonly drawers: Map<string, IShapeDrawer>;
+    readonly pathGenerators: Map<string, IMovePathGenerator>;
+    constructor(engine: Engine);
+    getPlugin(plugin: string): IPlugin | undefined;
+    addPlugin(plugin: IPlugin): void;
+    getAvailablePlugins(container: Container): Map<string, IContainerPlugin>;
+    loadOptions(options: Options, sourceOptions: RecursivePartial<IOptions>): void;
+    getPreset(preset: string): RecursivePartial<IOptions> | undefined;
+    addPreset(presetKey: string, options: RecursivePartial<IOptions>, override?: boolean): void;
+    addShapeDrawer(type: string, drawer: IShapeDrawer): void;
+    getShapeDrawer(type: string): IShapeDrawer | undefined;
+    getSupportedShapes(): IterableIterator<string>;
+    getPathGenerator(type: string): IMovePathGenerator | undefined;
+    addPathGenerator(type: string, pathGenerator: IMovePathGenerator): void;
+    getInteractors(container: Container, force?: boolean): IInteractor[];
+    addInteractor(name: string, initInteractor: (container: Container) => IInteractor): void;
+    getUpdaters(container: Container, force?: boolean): IParticleUpdater[];
+    addParticleUpdater(name: string, initUpdater: (container: Container) => IParticleUpdater): void;
 }
+export {};

package/browser/Core/Utils/Plugins.js

@@ -1,26 +1,37 @@
-const plugins = [];
-const interactorsInitializers = new Map();
-const updatersInitializers = new Map();
-const interactors = new Map();
-const updaters = new Map();
-const presets = new Map();
-const drawers = new Map();
-const pathGenerators = new Map();
+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 _Plugins_engine;
 /**
  * @category Utils
  */
 export class Plugins {
-    static getPlugin(plugin) {
-        return plugins.find((t) => t.id === plugin);
+    constructor(engine) {
+        _Plugins_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Plugins_engine, engine, "f");
+        this.plugins = [];
+        this.interactorsInitializers = new Map();
+        this.updatersInitializers = new Map();
+        this.interactors = new Map();
+        this.updaters = new Map();
+        this.presets = new Map();
+        this.drawers = new Map();
+        this.pathGenerators = new Map();
     }
-    static addPlugin(plugin) {
-        if (!Plugins.getPlugin(plugin.id)) {
-            plugins.push(plugin);
+    getPlugin(plugin) {
+        return this.plugins.find((t) => t.id === plugin);
+    }
+    addPlugin(plugin) {
+        if (!this.getPlugin(plugin.id)) {
+            this.plugins.push(plugin);
         }
     }
-    static getAvailablePlugins(container) {
+    getAvailablePlugins(container) {
         const res = new Map();
-        for (const plugin of plugins) {
+        for (const plugin of this.plugins) {
             if (!plugin.needsPlugin(container.actualOptions)) {
                 continue;
             }
@@ -28,58 +39,59 @@ export class Plugins {
         }
         return res;
     }
-    static loadOptions(options, sourceOptions) {
-        for (const plugin of plugins) {
+    loadOptions(options, sourceOptions) {
+        for (const plugin of this.plugins) {
             plugin.loadOptions(options, sourceOptions);
         }
     }
-    static getPreset(preset) {
-        return presets.get(preset);
+    getPreset(preset) {
+        return this.presets.get(preset);
     }
-    static addPreset(presetKey, options, override = false) {
-        if (override || !Plugins.getPreset(presetKey)) {
-            presets.set(presetKey, options);
+    addPreset(presetKey, options, override = false) {
+        if (override || !this.getPreset(presetKey)) {
+            this.presets.set(presetKey, options);
         }
     }
-    static addShapeDrawer(type, drawer) {
-        if (!Plugins.getShapeDrawer(type)) {
-            drawers.set(type, drawer);
+    addShapeDrawer(type, drawer) {
+        if (!this.getShapeDrawer(type)) {
+            this.drawers.set(type, drawer);
         }
     }
-    static getShapeDrawer(type) {
-        return drawers.get(type);
+    getShapeDrawer(type) {
+        return this.drawers.get(type);
     }
-    static getSupportedShapes() {
-        return drawers.keys();
+    getSupportedShapes() {
+        return this.drawers.keys();
     }
-    static getPathGenerator(type) {
-        return pathGenerators.get(type);
+    getPathGenerator(type) {
+        return this.pathGenerators.get(type);
     }
-    static addPathGenerator(type, pathGenerator) {
-        if (!Plugins.getPathGenerator(type)) {
-            pathGenerators.set(type, pathGenerator);
+    addPathGenerator(type, pathGenerator) {
+        if (!this.getPathGenerator(type)) {
+            this.pathGenerators.set(type, pathGenerator);
         }
     }
-    static getInteractors(container, force = false) {
-        let res = interactors.get(container);
+    getInteractors(container, force = false) {
+        let res = this.interactors.get(container);
         if (!res || force) {
-            res = [...interactorsInitializers.values()].map((t) => t(container));
-            interactors.set(container, res);
+            res = [...this.interactorsInitializers.values()].map((t) => t(container));
+            this.interactors.set(container, res);
         }
         return res;
     }
-    static addInteractor(name, initInteractor) {
-        interactorsInitializers.set(name, initInteractor);
+    addInteractor(name, initInteractor) {
+        this.interactorsInitializers.set(name, initInteractor);
     }
-    static getUpdaters(container, force = false) {
-        let res = updaters.get(container);
+    getUpdaters(container, force = false) {
+        let res = this.updaters.get(container);
         if (!res || force) {
-            res = [...updatersInitializers.values()].map((t) => t(container));
-            updaters.set(container, res);
+            res = [...this.updatersInitializers.values()].map((t) => t(container));
+            this.updaters.set(container, res);
         }
         return res;
     }
-    static addParticleUpdater(name, initUpdater) {
-        updatersInitializers.set(name, initUpdater);
+    addParticleUpdater(name, initUpdater) {
+        this.updatersInitializers.set(name, initUpdater);
     }
 }
+_Plugins_engine = new WeakMap();

package/browser/Options/Classes/Options.d.ts

@@ -1,6 +1,7 @@
 import type { RangeValue, RecursivePartial } from "../../Types";
 import { Background } from "./Background/Background";
 import { BackgroundMask } from "./BackgroundMask/BackgroundMask";
+import type { Engine } from "../../engine";
 import { FullScreen } from "./FullScreen/FullScreen";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader";
 import type { IOptions } from "../Interfaces/IOptions";
@@ -65,7 +66,7 @@ export declare class Options implements IOptions, IOptionLoader<IOptions> {
     defaultDarkTheme?: string;
     defaultLightTheme?: string;
     [name: string]: unknown;
-    constructor();
+    constructor(engine: Engine);
     /**
      * This methods loads the source object in the current instance
      * @param data the source data to load into the instance

package/browser/Options/Classes/Options.js

@@ -1,9 +1,15 @@
+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 _Options_instances, _Options_findDefaultTheme;
+var _Options_instances, _Options_engine, _Options_findDefaultTheme;
 import { Background } from "./Background/Background";
 import { BackgroundMask } from "./BackgroundMask/BackgroundMask";
 import { FullScreen } from "./FullScreen/FullScreen";
@@ -11,7 +17,6 @@ import { Interactivity } from "./Interactivity/Interactivity";
 import { ManualParticle } from "./ManualParticle";
 import { Motion } from "./Motion/Motion";
 import { ParticlesOptions } from "./Particles/ParticlesOptions";
-import { Plugins } from "../../Core";
 import { Responsive } from "./Responsive";
 import { Theme } from "./Theme/Theme";
 import { deepExtend } from "../../Utils";
@@ -20,15 +25,17 @@ import { deepExtend } from "../../Utils";
  * @category Options
  */
 export class Options {
-    constructor() {
+    constructor(engine) {
         _Options_instances.add(this);
+        _Options_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Options_engine, engine, "f");
         this.autoPlay = true;
         this.background = new Background();
         this.backgroundMask = new BackgroundMask();
         this.fullScreen = new FullScreen();
         this.detectRetina = true;
         this.duration = 0;
-        this.fpsLimit = 60;
+        this.fpsLimit = 120;
         this.interactivity = new Interactivity();
         this.manualParticles = [];
         this.motion = new Motion();
@@ -142,7 +149,7 @@ export class Options {
         this.motion.load(data.motion);
         this.particles.load(data.particles);
         this.style = deepExtend(this.style, data.style);
-        Plugins.loadOptions(this, data);
+        __classPrivateFieldGet(this, _Options_engine, "f").plugins.loadOptions(this, data);
         if (data.responsive !== undefined) {
             for (const responsive of data.responsive) {
                 const optResponsive = new Responsive();
@@ -184,10 +191,10 @@ export class Options {
         return responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.maxWidth;
     }
     importPreset(preset) {
-        this.load(Plugins.getPreset(preset));
+        this.load(__classPrivateFieldGet(this, _Options_engine, "f").plugins.getPreset(preset));
     }
 }
-_Options_instances = new WeakSet(), _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
+_Options_engine = new WeakMap(), _Options_instances = new WeakSet(), _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
     var _a;
     return ((_a = this.themes.find((theme) => theme.default.value && theme.default.mode === mode)) !== null && _a !== void 0 ? _a : this.themes.find((theme) => theme.default.value && theme.default.mode === "any" /* any */));
 };

package/browser/Plugins/Emitters/EmitterInstance.d.ts

@@ -1,6 +1,7 @@
-import type { Container, ICoordinates, IDelta, IHsl } from "../../Core";
+import type { Container, ICoordinates, IDelta, IDimension, IHsl } from "../../Core";
 import { Emitter } from "./Options/Classes/Emitter";
 import type { Emitters } from "./Emitters";
+import type { EmittersEngine } from "./EmittersEngine";
 import type { IEmitter } from "./Options/Interfaces/IEmitter";
 import type { IEmitterSize } from "./Options/Interfaces/IEmitterSize";
 import type { RecursivePartial } from "../../Types";
@@ -11,7 +12,7 @@ export declare class EmitterInstance {
     #private;
     private readonly emitters;
     private readonly container;
-    position: ICoordinates;
+    position?: ICoordinates;
     size: IEmitterSize;
     options: Emitter;
     spawnColor?: IHsl;
@@ -29,13 +30,15 @@ export declare class EmitterInstance {
     private readonly shape?;
     private readonly initialPosition?;
     private readonly particlesOptions;
-    constructor(emitters: Emitters, container: Container, options: RecursivePartial<IEmitter>, position?: ICoordinates);
+    constructor(engine: EmittersEngine, emitters: Emitters, container: Container, options: RecursivePartial<IEmitter>, position?: ICoordinates);
     externalPlay(): void;
     externalPause(): void;
     play(): void;
     pause(): void;
     resize(): void;
     update(delta: IDelta): void;
+    getPosition(): ICoordinates | undefined;
+    getSize(): IDimension;
     private prepareToDie;
     private destroy;
     private calcPosition;

package/browser/Plugins/Emitters/EmitterInstance.js

@@ -9,22 +9,23 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _EmitterInstance_firstSpawn, _EmitterInstance_startParticlesAdded;
+var _EmitterInstance_firstSpawn, _EmitterInstance_startParticlesAdded, _EmitterInstance_engine;
 import { colorToHsl, deepExtend, getRangeValue, isPointInside, randomInRange } from "../../Utils";
 import { Emitter } from "./Options/Classes/Emitter";
 import { EmitterSize } from "./Options/Classes/EmitterSize";
-import { ShapeManager } from "./ShapeManager";
 /**
  * @category Emitters Plugin
  */
 export class EmitterInstance {
-    constructor(emitters, container, options, position) {
+    constructor(engine, emitters, container, options, position) {
         var _a, _b, _c, _d, _e, _f;
         var _g;
         this.emitters = emitters;
         this.container = container;
         _EmitterInstance_firstSpawn.set(this, void 0);
         _EmitterInstance_startParticlesAdded.set(this, void 0);
+        _EmitterInstance_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _EmitterInstance_engine, engine, "f");
         this.currentDuration = 0;
         this.currentEmitDelay = 0;
         this.currentSpawnDelay = 0;
@@ -37,9 +38,8 @@ export class EmitterInstance {
             this.options.load(options);
         }
         this.spawnDelay = (((_a = this.options.life.delay) !== null && _a !== void 0 ? _a : 0) * 1000) / this.container.retina.reduceFactor;
-        this.position = (_b = this.initialPosition) !== null && _b !== void 0 ? _b : this.calcPosition();
         this.name = this.options.name;
-        this.shape = ShapeManager.getShape(this.options.shape);
+        this.shape = (_b = __classPrivateFieldGet(this, _EmitterInstance_engine, "f").emitterShapeManager) === null || _b === void 0 ? void 0 : _b.getShape(this.options.shape);
         this.fill = this.options.fill;
         __classPrivateFieldSet(this, _EmitterInstance_firstSpawn, !this.options.life.wait, "f");
         __classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, false, "f");
@@ -155,6 +155,40 @@ export class EmitterInstance {
             }
         }
     }
+    getPosition() {
+        if (this.options.domId) {
+            const container = this.container, element = document.getElementById(this.options.domId);
+            if (element) {
+                const elRect = element.getBoundingClientRect();
+                return {
+                    x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
+                    y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio,
+                };
+            }
+        }
+        return this.position;
+    }
+    getSize() {
+        const container = this.container;
+        if (this.options.domId) {
+            const element = document.getElementById(this.options.domId);
+            if (element) {
+                const elRect = element.getBoundingClientRect();
+                return {
+                    width: elRect.width * container.retina.pixelRatio,
+                    height: elRect.height * container.retina.pixelRatio,
+                };
+            }
+        }
+        return {
+            width: this.size.mode === "percent" /* percent */
+                ? (container.canvas.size.width * this.size.width) / 100
+                : this.size.width,
+            height: this.size.mode === "percent" /* percent */
+                ? (container.canvas.size.height * this.size.height) / 100
+                : this.size.height,
+        };
+    }
     prepareToDie() {
         var _a;
         if (this.paused) {
@@ -190,15 +224,8 @@ export class EmitterInstance {
     emitParticles(quantity) {
         var _a, _b, _c;
         const container = this.container;
-        const position = this.position;
-        const offset = {
-            x: this.size.mode === "percent" /* percent */
-                ? (container.canvas.size.width * this.size.width) / 100
-                : this.size.width,
-            y: this.size.mode === "percent" /* percent */
-                ? (container.canvas.size.height * this.size.height) / 100
-                : this.size.height,
-        };
+        const position = this.getPosition();
+        const size = this.getSize();
         for (let i = 0; i < quantity; i++) {
             const particlesOptions = deepExtend({}, this.particlesOptions);
             if (this.spawnColor) {
@@ -217,7 +244,10 @@ export class EmitterInstance {
                     particlesOptions.color.value = this.spawnColor;
                 }
             }
-            const pPosition = (_c = (_b = this.shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, offset, this.fill)) !== null && _c !== void 0 ? _c : position;
+            if (!position) {
+                return;
+            }
+            const pPosition = (_c = (_b = this.shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, size, this.fill)) !== null && _c !== void 0 ? _c : position;
             container.particles.addParticle(pPosition, particlesOptions);
         }
     }
@@ -234,4 +264,4 @@ export class EmitterInstance {
         return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
     }
 }
-_EmitterInstance_firstSpawn = new WeakMap(), _EmitterInstance_startParticlesAdded = new WeakMap();
+_EmitterInstance_firstSpawn = new WeakMap(), _EmitterInstance_startParticlesAdded = new WeakMap(), _EmitterInstance_engine = new WeakMap();

package/browser/Plugins/Emitters/Emitters.d.ts

@@ -2,6 +2,7 @@ import type { Container, IContainerPlugin, ICoordinates, IDelta } from "../../Co
 import type { RecursivePartial, SingleOrMultiple } from "../../Types";
 import { Emitter } from "./Options/Classes/Emitter";
 import { EmitterInstance } from "./EmitterInstance";
+import type { EmittersEngine } from "./EmittersEngine";
 import type { IEmitter } from "./Options/Interfaces/IEmitter";
 import type { IEmitterOptions } from "./Options/Interfaces/IEmitterOptions";
 import type { IOptions } from "../../Options/Interfaces/IOptions";
@@ -9,11 +10,12 @@ import type { IOptions } from "../../Options/Interfaces/IOptions";
  * @category Emitters Plugin
  */
 export declare class Emitters implements IContainerPlugin {
+    #private;
     private readonly container;
     array: EmitterInstance[];
     emitters: SingleOrMultiple<Emitter>;
     interactivityEmitters: SingleOrMultiple<Emitter>;
-    constructor(container: Container);
+    constructor(engine: EmittersEngine, container: Container);
     init(options?: RecursivePartial<IOptions & IEmitterOptions>): void;
     play(): void;
     pause(): void;

package/browser/Plugins/Emitters/Emitters.js

@@ -1,3 +1,15 @@
+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 _Emitters_engine;
 import { deepExtend, itemFromArray } from "../../Utils";
 import { Emitter } from "./Options/Classes/Emitter";
 import { EmitterInstance } from "./EmitterInstance";
@@ -5,8 +17,10 @@ import { EmitterInstance } from "./EmitterInstance";
  * @category Emitters Plugin
  */
 export class Emitters {
-    constructor(container) {
+    constructor(engine, container) {
         this.container = container;
+        _Emitters_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Emitters_engine, engine, "f");
         this.array = [];
         this.emitters = [];
         this.interactivityEmitters = [];
@@ -124,7 +138,7 @@ export class Emitters {
     addEmitter(options, position) {
         const emitterOptions = new Emitter();
         emitterOptions.load(options);
-        const emitter = new EmitterInstance(this, this.container, emitterOptions, position);
+        const emitter = new EmitterInstance(__classPrivateFieldGet(this, _Emitters_engine, "f"), this, this.container, emitterOptions, position);
         this.array.push(emitter);
         return emitter;
     }
@@ -135,3 +149,4 @@ export class Emitters {
         }
     }
 }
+_Emitters_engine = new WeakMap();

package/{esm/Plugins/Emitters/EmittersMain.d.ts → browser/Plugins/Emitters/EmittersEngine.d.ts}

@@ -1,5 +1,7 @@
 import type { Engine } from "../../engine";
 import type { IEmitterShape } from "./IEmitterShape";
-export declare type EmittersMain = Engine & {
+import type { ShapeManager } from "./ShapeManager";
+export declare type EmittersEngine = Engine & {
+    emitterShapeManager?: ShapeManager;
     addEmitterShape?: (name: string, shape: IEmitterShape) => void;
 };

package/browser/Plugins/Emitters/IEmitterShape.d.ts

@@ -1,4 +1,4 @@
-import type { ICoordinates } from "../../Core";
+import type { ICoordinates, IDimension } from "../../Core";
 export interface IEmitterShape {
-    randomPosition(position: ICoordinates, offset: ICoordinates, fill: boolean): ICoordinates;
+    randomPosition(position: ICoordinates, size: IDimension, fill: boolean): ICoordinates;
 }

package/browser/Plugins/Emitters/Options/Classes/Emitter.d.ts

@@ -17,6 +17,7 @@ export declare class Emitter implements IEmitter, IOptionLoader<IEmitter> {
     autoPlay: boolean;
     size?: EmitterSize;
     direction?: MoveDirection | keyof typeof MoveDirection | MoveDirectionAlt | number;
+    domId?: string;
     fill: boolean;
     life: EmitterLife;
     name?: string;

package/browser/Plugins/Emitters/Options/Classes/Emitter.js

@@ -32,6 +32,7 @@ export class Emitter {
         if (data.direction !== undefined) {
             this.direction = data.direction;
         }
+        this.domId = data.domId;
         if (data.fill !== undefined) {
             this.fill = data.fill;
         }

package/browser/Plugins/Emitters/Options/Interfaces/IEmitter.d.ts

@@ -25,6 +25,10 @@ export interface IEmitter {
      * The direction of the emitted particles, [[MoveDirection]] is the enum used for values
      */
     direction?: MoveDirection | keyof typeof MoveDirection | MoveDirectionAlt | number;
+    /**
+     * Using this id to link the emitter to an HTML element
+     */
+    domId?: string;
     /**
      * Sets if the particles will spawn at the emitter perimeter or inside the area
      */

package/browser/Plugins/Emitters/ShapeManager.d.ts

@@ -1,6 +1,9 @@
+import type { Engine } from "../../engine";
 import type { IEmitterShape } from "./IEmitterShape";
 export declare class ShapeManager {
-    static addShape(name: string, drawer: IEmitterShape): void;
-    static getShape(name: string): IEmitterShape | undefined;
-    static getSupportedShapes(): IterableIterator<string>;
+    #private;
+    constructor(engine: Engine);
+    addShape(name: string, drawer: IEmitterShape): void;
+    getShape(name: string): IEmitterShape | undefined;
+    getSupportedShapes(): IterableIterator<string>;
 }

package/browser/Plugins/Emitters/ShapeManager.js

@@ -1,14 +1,26 @@
+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 _ShapeManager_engine;
 const shapes = new Map();
 export class ShapeManager {
-    static addShape(name, drawer) {
-        if (!ShapeManager.getShape(name)) {
+    constructor(engine) {
+        _ShapeManager_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _ShapeManager_engine, engine, "f");
+    }
+    addShape(name, drawer) {
+        if (!this.getShape(name)) {
             shapes.set(name, drawer);
         }
     }
-    static getShape(name) {
+    getShape(name) {
         return shapes.get(name);
     }
-    static getSupportedShapes() {
+    getSupportedShapes() {
         return shapes.keys();
     }
 }
+_ShapeManager_engine = new WeakMap();

package/browser/Plugins/Emitters/Shapes/Circle/CircleShape.d.ts

@@ -1,5 +1,5 @@
-import type { ICoordinates } from "../../../../Core";
+import type { ICoordinates, IDimension } from "../../../../Core";
 import type { IEmitterShape } from "../../IEmitterShape";
 export declare class CircleShape implements IEmitterShape {
-    randomPosition(position: ICoordinates, offset: ICoordinates, fill: boolean): ICoordinates;
+    randomPosition(position: ICoordinates, size: IDimension, fill: boolean): ICoordinates;
 }