tsparticles 1.39.0 → 1.40.0

package/Core/Canvas.d.ts

@@ -1,6 +1,6 @@
+import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
 import type { Container } from "./Container";
 import type { Particle } from "./Particle";
-import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
 export declare class Canvas {
     private readonly container;
     element?: HTMLCanvasElement;

package/Core/Canvas.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
-const Utils_1 = require("./Utils");
-const Utils_2 = require("../Utils");
+const Utils_1 = require("../Utils");
+const Utils_2 = require("./Utils");
 class Canvas {
     constructor(container) {
         this.container = container;
@@ -27,11 +27,11 @@ class Canvas {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
         this.generatedCanvas =
-            canvas.dataset && Utils_1.Constants.generatedAttribute in canvas.dataset
-                ? canvas.dataset[Utils_1.Constants.generatedAttribute] === "true"
+            canvas.dataset && Utils_2.Constants.generatedAttribute in canvas.dataset
+                ? canvas.dataset[Utils_2.Constants.generatedAttribute] === "true"
                 : this.generatedCanvas;
         this.element = canvas;
-        this.originalStyle = (0, Utils_2.deepExtend)({}, this.element.style);
+        this.originalStyle = (0, Utils_1.deepExtend)({}, this.element.style);
         this.size.height = canvas.offsetHeight;
         this.size.width = canvas.offsetWidth;
         this.context = this.element.getContext("2d");
@@ -44,15 +44,15 @@ class Canvas {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
         this.draw((ctx) => {
-            (0, Utils_2.clear)(ctx, this.size);
+            (0, Utils_1.clear)(ctx, this.size);
         });
     }
     paint() {
         const options = this.container.actualOptions;
         this.draw((ctx) => {
             if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
-                (0, Utils_2.clear)(ctx, this.size);
-                this.paintBase((0, Utils_2.getStyleFromRgb)(this.coverColor, this.coverColor.a));
+                (0, Utils_1.clear)(ctx, this.size);
+                this.paintBase((0, Utils_1.getStyleFromRgb)(this.coverColor, this.coverColor.a));
             }
             else {
                 this.paintBase();
@@ -66,11 +66,11 @@ class Canvas {
             this.paint();
         }
         else if (trail.enable && trail.length > 0 && this.trailFillColor) {
-            this.paintBase((0, Utils_2.getStyleFromRgb)(this.trailFillColor, 1 / trail.length));
+            this.paintBase((0, Utils_1.getStyleFromRgb)(this.trailFillColor, 1 / trail.length));
         }
         else {
             this.draw((ctx) => {
-                (0, Utils_2.clear)(ctx, this.size);
+                (0, Utils_1.clear)(ctx, this.size);
             });
         }
     }
@@ -122,7 +122,7 @@ class Canvas {
             }
             const pos1 = p1.getPosition();
             const pos2 = p2.getPosition();
-            (0, Utils_2.drawConnectLine)(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
+            (0, Utils_1.drawConnectLine)(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
         });
     }
     drawGrabLine(particle, lineColor, opacity, mousePos) {
@@ -130,7 +130,7 @@ class Canvas {
         this.draw((ctx) => {
             var _a;
             const beginPos = particle.getPosition();
-            (0, Utils_2.drawGrabLine)(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
+            (0, Utils_1.drawGrabLine)(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
         });
     }
     drawParticle(particle, delta) {
@@ -148,7 +148,7 @@ class Canvas {
         const twinkle = pOptions.twinkle.particles;
         const twinkling = twinkle.enable && Math.random() < twinkle.frequency;
         if (!fColor || !sColor) {
-            const twinkleRgb = (0, Utils_2.colorToHsl)(twinkle.color);
+            const twinkleRgb = (0, Utils_1.colorToHsl)(twinkle.color);
             if (!fColor) {
                 fColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : pfColor ? pfColor : undefined;
             }
@@ -163,14 +163,14 @@ class Canvas {
         const opacity = twinkling ? twinkle.opacity : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
         const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
         const zOpacity = opacity * zOpacityFactor;
-        const fillColorValue = fColor ? (0, Utils_2.getStyleFromHsl)(fColor, zOpacity) : undefined;
+        const fillColorValue = fColor ? (0, Utils_1.getStyleFromHsl)(fColor, zOpacity) : undefined;
         if (!fillColorValue && !sColor) {
             return;
         }
         this.draw((ctx) => {
             const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
             const zStrokeOpacity = strokeOpacity * zOpacityFactor;
-            const strokeColorValue = sColor ? (0, Utils_2.getStyleFromHsl)(sColor, zStrokeOpacity) : fillColorValue;
+            const strokeColorValue = sColor ? (0, Utils_1.getStyleFromHsl)(sColor, zStrokeOpacity) : fillColorValue;
             if (radius <= 0) {
                 return;
             }
@@ -180,7 +180,7 @@ class Canvas {
                     updater.beforeDraw(particle);
                 }
             }
-            (0, Utils_2.drawParticle)(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
+            (0, Utils_1.drawParticle)(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
             for (const updater of container.particles.updaters) {
                 if (updater.afterDraw) {
                     updater.afterDraw(particle);
@@ -190,12 +190,12 @@ class Canvas {
     }
     drawPlugin(plugin, delta) {
         this.draw((ctx) => {
-            (0, Utils_2.drawPlugin)(ctx, plugin, delta);
+            (0, Utils_1.drawPlugin)(ctx, plugin, delta);
         });
     }
     drawParticlePlugin(plugin, particle, delta) {
         this.draw((ctx) => {
-            (0, Utils_2.drawParticlePlugin)(ctx, plugin, particle, delta);
+            (0, Utils_1.drawParticlePlugin)(ctx, plugin, particle, delta);
         });
     }
     initBackground() {
@@ -207,8 +207,8 @@ class Canvas {
             return;
         }
         if (background.color) {
-            const color = (0, Utils_2.colorToRgb)(background.color);
-            elementStyle.backgroundColor = color ? (0, Utils_2.getStyleFromRgb)(color, background.opacity) : "";
+            const color = (0, Utils_1.colorToRgb)(background.color);
+            elementStyle.backgroundColor = color ? (0, Utils_1.getStyleFromRgb)(color, background.opacity) : "";
         }
         else {
             elementStyle.backgroundColor = "";
@@ -228,7 +228,7 @@ class Canvas {
         const options = this.container.actualOptions;
         const cover = options.backgroundMask.cover;
         const color = cover.color;
-        const coverRgb = (0, Utils_2.colorToRgb)(color);
+        const coverRgb = (0, Utils_1.colorToRgb)(color);
         if (coverRgb) {
             this.coverColor = {
                 r: coverRgb.r,
@@ -241,7 +241,7 @@ class Canvas {
     initTrail() {
         const options = this.container.actualOptions;
         const trail = options.particles.move.trail;
-        const fillColor = (0, Utils_2.colorToRgb)(trail.fillColor);
+        const fillColor = (0, Utils_1.colorToRgb)(trail.fillColor);
         if (fillColor) {
             const trail = options.particles.move.trail;
             this.trailFillColor = {
@@ -257,10 +257,10 @@ class Canvas {
         let sColor;
         for (const [, plugin] of this.container.plugins) {
             if (!fColor && plugin.particleFillColor) {
-                fColor = (0, Utils_2.colorToHsl)(plugin.particleFillColor(particle));
+                fColor = (0, Utils_1.colorToHsl)(plugin.particleFillColor(particle));
             }
             if (!sColor && plugin.particleStrokeColor) {
-                sColor = (0, Utils_2.colorToHsl)(plugin.particleStrokeColor(particle));
+                sColor = (0, Utils_1.colorToHsl)(plugin.particleStrokeColor(particle));
             }
             if (fColor && sColor) {
                 break;
@@ -275,7 +275,7 @@ class Canvas {
         }
         const originalStyle = this.originalStyle;
         if (options.fullScreen.enable) {
-            this.originalStyle = (0, Utils_2.deepExtend)({}, element.style);
+            this.originalStyle = (0, Utils_1.deepExtend)({}, element.style);
             element.style.setProperty("position", "fixed", "important");
             element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
             element.style.setProperty("top", "0", "important");
@@ -304,14 +304,14 @@ class Canvas {
     }
     paintBase(baseColor) {
         this.draw((ctx) => {
-            (0, Utils_2.paintBase)(ctx, this.size, baseColor);
+            (0, Utils_1.paintBase)(ctx, this.size, baseColor);
         });
     }
     lineStyle(p1, p2) {
         return this.draw((ctx) => {
             const options = this.container.actualOptions;
             const connectOptions = options.interactivity.modes.connect;
-            return (0, Utils_2.gradient)(ctx, p1, p2, connectOptions.links.opacity);
+            return (0, Utils_1.gradient)(ctx, p1, p2, connectOptions.links.opacity);
         });
     }
 }

package/Core/Container.d.ts

@@ -1,13 +1,15 @@
+import { FrameManager, Vector } from "./Utils";
+import type { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
 import { Canvas } from "./Canvas";
-import { Particles } from "./Particles";
-import { Retina } from "./Retina";
+import type { Engine } from "../engine";
 import type { IOptions } from "../Options/Interfaces/IOptions";
-import { FrameManager, Vector } from "./Utils";
-import type { RecursivePartial } from "../Types";
 import { Options } from "../Options/Classes/Options";
 import { Particle } from "./Particle";
-import type { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
+import { Particles } from "./Particles";
+import type { RecursivePartial } from "../Types";
+import { Retina } from "./Retina";
 export declare class Container {
+    #private;
     readonly id: string;
     started: boolean;
     destroyed: boolean;
@@ -43,7 +45,7 @@ export declare class Container {
     private readonly presets;
     private readonly eventListeners;
     private readonly intersectionObserver?;
-    constructor(id: string, sourceOptions?: RecursivePartial<IOptions>, ...presets: string[]);
+    constructor(engine: Engine, id: string, sourceOptions?: RecursivePartial<IOptions>, ...presets: string[]);
     play(force?: boolean): void;
     pause(): void;
     draw(force: boolean): void;

package/Core/Container.js

@@ -1,16 +1,30 @@
 "use strict";
+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;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
+const Utils_1 = require("./Utils");
+const Utils_2 = require("../Utils");
 const Canvas_1 = require("./Canvas");
+const Options_1 = require("../Options/Classes/Options");
 const Particles_1 = require("./Particles");
 const Retina_1 = require("./Retina");
-const Utils_1 = require("./Utils");
-const Options_1 = require("../Options/Classes/Options");
-const Utils_2 = require("../Utils");
 class Container {
-    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;
@@ -24,7 +38,7 @@ class Container {
         this._initialSourceOptions = sourceOptions;
         this.retina = new Retina_1.Retina(this);
         this.canvas = new Canvas_1.Canvas(this);
-        this.particles = new Particles_1.Particles(this);
+        this.particles = new Particles_1.Particles(__classPrivateFieldGet(this, _Container_engine, "f"), this);
         this.drawer = new Utils_1.FrameManager(this);
         this.presets = presets;
         this.pathGenerator = {
@@ -51,8 +65,8 @@ class Container {
         this.plugins = new Map();
         this.drawers = new Map();
         this.density = 1;
-        this._options = new Options_1.Options();
-        this.actualOptions = new Options_1.Options();
+        this._options = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
+        this.actualOptions = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
         this.eventListeners = new Utils_1.EventListeners(this);
         if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
             this.intersectionObserver = new IntersectionObserver((entries) => this.intersectionManager(entries));
@@ -168,7 +182,7 @@ class Container {
         return this.start();
     }
     reset() {
-        this._options = new Options_1.Options();
+        this._options = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
         return this.refresh();
     }
     stop() {
@@ -182,7 +196,7 @@ 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) {
@@ -310,20 +324,20 @@ class Container {
         return false;
     }
     async init() {
-        this._options = new Options_1.Options();
+        this._options = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
         for (const preset of this.presets) {
-            this._options.load(Utils_1.Plugins.getPreset(preset));
+            this._options.load(__classPrivateFieldGet(this, _Container_engine, "f").plugins.getPreset(preset));
         }
-        const shapes = Utils_1.Plugins.getSupportedShapes();
+        const shapes = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getSupportedShapes();
         for (const type of shapes) {
-            const drawer = Utils_1.Plugins.getShapeDrawer(type);
+            const drawer = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getShapeDrawer(type);
             if (drawer) {
                 this.drawers.set(type, drawer);
             }
         }
         this._options.load(this._initialSourceOptions);
         this._options.load(this._sourceOptions);
-        this.actualOptions = new Options_1.Options();
+        this.actualOptions = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
         this.actualOptions.load(this._options);
         this.retina.init();
         this.canvas.init();
@@ -333,8 +347,8 @@ class Container {
         this.zLayers = this.actualOptions.zLayers;
         this.duration = (0, Utils_2.getRangeValue)(this.actualOptions.duration);
         this.lifeTime = 0;
-        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 60;
-        const availablePlugins = Utils_1.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);
         }
@@ -353,7 +367,7 @@ class Container {
         }
         const pathOptions = this.actualOptions.particles.move.path;
         if (pathOptions.generator) {
-            const customGenerator = Utils_1.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;
@@ -392,3 +406,4 @@ class Container {
     }
 }
 exports.Container = Container;
+_Container_engine = new WeakMap();

package/Core/Interfaces/Gradients.d.ts

@@ -1,7 +1,7 @@
-import type { IColor } from "./Colors";
 import type { GradientType, RotateDirectionAlt } from "../../Enums";
-import type { RotateDirection } from "../../Enums";
+import type { IColor } from "./Colors";
 import type { RangeValue } from "../../Types";
+import type { RotateDirection } from "../../Enums";
 export interface IGradientColorOpacity {
     value: RangeValue;
 }

package/Core/Interfaces/ICircleBouncer.d.ts

@@ -1,5 +1,5 @@
-import type { Vector } from "../Utils";
 import type { ICoordinates } from "./ICoordinates";
+import type { Vector } from "../Utils";
 export interface ICircleBouncer {
     position: ICoordinates;
     velocity: Vector;

package/Core/Interfaces/IContainerPlugin.d.ts

@@ -1,10 +1,10 @@
+import type { ClickMode, OutModeDirection } from "../../Enums";
+import type { IColor } from "./Colors";
 import type { ICoordinates } from "./ICoordinates";
+import type { IDelta } from "./IDelta";
+import type { IOptions } from "../../Options/Interfaces/IOptions";
 import type { Particle } from "../Particle";
-import type { ClickMode, OutModeDirection } from "../../Enums";
 import type { RecursivePartial } from "../../Types";
-import type { IOptions } from "../../Options/Interfaces/IOptions";
-import type { IDelta } from "./IDelta";
-import type { IColor } from "./Colors";
 export interface IContainerPlugin {
     clickPositionValid?: (position: ICoordinates) => boolean;
     draw?: (context: CanvasRenderingContext2D, delta: IDelta) => void;

package/Core/Interfaces/IExternalInteractor.d.ts

@@ -1,5 +1,5 @@
-import type { IInteractor } from "./IInteractor";
 import type { IDelta } from "./IDelta";
+import type { IInteractor } from "./IInteractor";
 export interface IExternalInteractor extends IInteractor {
     isEnabled(): boolean;
     interact(delta: IDelta): void;

package/Core/Interfaces/IInteractor.d.ts

@@ -1,5 +1,5 @@
-import type { Particle } from "../Particle";
 import type { InteractorType } from "../../Enums";
+import type { Particle } from "../Particle";
 export interface IInteractor {
     type: InteractorType;
     reset(particle: Particle): void;

package/Core/Interfaces/IParticle.d.ts

@@ -1,17 +1,17 @@
-import type { IStroke } from "../../Options/Interfaces/Particles/IStroke";
-import type { ICoordinates3d } from "./ICoordinates";
-import type { ShapeType } from "../../Enums";
+import type { IHsl, IRgb } from "./Colors";
 import type { IParticleTiltValueAnimation, IParticleValueAnimation } from "./IParticleValueAnimation";
-import type { IShapeValues } from "./IShapeValues";
 import type { IBubbleParticleData } from "./IBubbleParticleData";
-import type { IParticles } from "../../Options/Interfaces/Particles/IParticles";
-import type { IHsl, IRgb } from "./Colors";
-import type { IParticleHslAnimation } from "./IParticleHslAnimation";
-import type { Vector } from "../Utils";
+import type { ICoordinates3d } from "./ICoordinates";
 import type { IParticleGradientAnimation } from "./IParticleGradientAnimation";
+import type { IParticleHslAnimation } from "./IParticleHslAnimation";
 import type { IParticleRetinaProps } from "./IParticleRetinaProps";
 import type { IParticleRoll } from "./IParticleRoll";
 import type { IParticleWobble } from "./IParticleWobble";
+import type { IParticles } from "../../Options/Interfaces/Particles/IParticles";
+import type { IShapeValues } from "./IShapeValues";
+import type { IStroke } from "../../Options/Interfaces/Particles/IStroke";
+import type { ShapeType } from "../../Enums";
+import type { Vector } from "../Utils";
 export interface IParticle {
     misplaced: boolean;
     randomIndexData?: number;

package/Core/Interfaces/IParticleGradientAnimation.d.ts

@@ -1,6 +1,6 @@
-import type { IParticleValueAnimation } from "./IParticleValueAnimation";
 import type { GradientType } from "../../Enums";
 import type { IParticleGradientColorAnimation } from "./IParticleGradientColorAnimation";
+import type { IParticleValueAnimation } from "./IParticleValueAnimation";
 export interface IParticleGradientAnimation {
     angle: IParticleValueAnimation<number>;
     type: GradientType;

package/Core/Interfaces/IParticleSpin.d.ts

@@ -1,5 +1,5 @@
-import type { RotateDirection } from "../../Enums";
 import type { ICoordinates } from "./ICoordinates";
+import type { RotateDirection } from "../../Enums";
 export interface IParticleSpin {
     acceleration: number;
     angle: number;

package/Core/Interfaces/IParticlesInteractor.d.ts

@@ -1,6 +1,6 @@
-import type { Particle } from "../Particle";
-import type { IInteractor } from "./IInteractor";
 import type { IDelta } from "./IDelta";
+import type { IInteractor } from "./IInteractor";
+import type { Particle } from "../Particle";
 export interface IParticlesInteractor extends IInteractor {
     isEnabled(particle: Particle): boolean;
     interact(particle: Particle, delta: IDelta): void;

package/Core/Interfaces/IPlugin.d.ts

@@ -1,8 +1,8 @@
 import type { Container } from "../Container";
 import type { IContainerPlugin } from "./IContainerPlugin";
 import type { IOptions } from "../../Options/Interfaces/IOptions";
-import type { RecursivePartial } from "../../Types";
 import type { Options } from "../../Options/Classes/Options";
+import type { RecursivePartial } from "../../Types";
 export interface IPlugin {
     readonly id: string;
     needsPlugin(options?: RecursivePartial<IOptions>): boolean;

package/Core/Loader.d.ts

@@ -1,7 +1,8 @@
 import { Container } from "./Container";
+import type { Engine } from "../engine";
 import type { IOptions } from "../Options/Interfaces/IOptions";
-import type { RecursivePartial } from "../Types";
 import type { Particle } from "./Particle";
+import type { RecursivePartial } from "../Types";
 import type { SingleOrMultiple } from "../Types";
 interface LoaderParams {
     element?: HTMLElement;
@@ -16,14 +17,16 @@ interface RemoteLoaderParams {
     url?: SingleOrMultiple<string>;
 }
 export declare class Loader {
-    static dom(): Container[];
-    static domItem(index: number): Container | undefined;
-    static loadOptions(params: LoaderParams): Promise<Container | undefined>;
-    static loadRemoteOptions(params: RemoteLoaderParams): Promise<Container | undefined>;
-    static load(tagId: string | SingleOrMultiple<RecursivePartial<IOptions>>, options?: SingleOrMultiple<RecursivePartial<IOptions>> | number, index?: number): Promise<Container | undefined>;
-    static set(id: string | HTMLElement, domContainer: HTMLElement | SingleOrMultiple<RecursivePartial<IOptions>>, options?: SingleOrMultiple<RecursivePartial<IOptions>> | number, index?: number): Promise<Container | undefined>;
-    static loadJSON(tagId: string | SingleOrMultiple<string>, jsonUrl?: SingleOrMultiple<string> | number, index?: number): Promise<Container | undefined>;
-    static setJSON(id: string | HTMLElement, domContainer: HTMLElement | SingleOrMultiple<string>, jsonUrl: SingleOrMultiple<string> | (number | undefined), index?: number): Promise<Container | undefined>;
-    static setOnClickHandler(callback: (evt: Event, particles?: Particle[]) => void): void;
+    #private;
+    constructor(engine: Engine);
+    dom(): Container[];
+    domItem(index: number): Container | undefined;
+    loadOptions(params: LoaderParams): Promise<Container | undefined>;
+    loadRemoteOptions(params: RemoteLoaderParams): Promise<Container | undefined>;
+    load(tagId: string | 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>;
+    loadJSON(tagId: string | SingleOrMultiple<string>, jsonUrl?: SingleOrMultiple<string> | number, index?: number): Promise<Container | undefined>;
+    setJSON(id: string | HTMLElement, domContainer: HTMLElement | SingleOrMultiple<string>, jsonUrl: SingleOrMultiple<string> | (number | undefined), index?: number): Promise<Container | undefined>;
+    setOnClickHandler(callback: (evt: Event, particles?: Particle[]) => void): void;
 }
 export {};