tsparticles 1.36.0 → 1.37.3

package/Plugins/Absorbers/plugin.js

@@ -74,8 +74,8 @@ class Plugin {
         }
     }
 }
-function loadAbsorbersPlugin(tsParticles) {
+async function loadAbsorbersPlugin(tsParticles) {
     const plugin = new Plugin();
-    tsParticles.addPlugin(plugin);
+    await tsParticles.addPlugin(plugin);
 }
 exports.loadAbsorbersPlugin = loadAbsorbersPlugin;

package/Plugins/Emitters/plugin.d.ts

@@ -1,3 +1,3 @@
 import { EmittersMain } from "./EmittersMain";
-export declare function loadEmittersPlugin(tsParticles: EmittersMain): void;
+export declare function loadEmittersPlugin(tsParticles: EmittersMain): Promise<void>;
 export * from "./EmittersMain";

package/Plugins/Emitters/plugin.js

@@ -77,9 +77,9 @@ class EmittersPlugin {
         }
     }
 }
-function loadEmittersPlugin(tsParticles) {
+async function loadEmittersPlugin(tsParticles) {
     const plugin = new EmittersPlugin();
-    tsParticles.addPlugin(plugin);
+    await tsParticles.addPlugin(plugin);
     if (!tsParticles.addEmitterShape) {
         tsParticles.addEmitterShape = (name, shape) => {
             ShapeManager_1.ShapeManager.addShape(name, shape);

package/Plugins/PolygonMask/plugin.js

@@ -52,6 +52,6 @@ async function loadPolygonMaskPlugin(tsParticles) {
         await Promise.resolve().then(() => __importStar(require("./pathseg")));
     }
     const plugin = new Plugin();
-    tsParticles.addPlugin(plugin);
+    await tsParticles.addPlugin(plugin);
 }
 exports.loadPolygonMaskPlugin = loadPolygonMaskPlugin;

package/Shapes/Circle/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadCircleShape(tsParticles: Main): void;
+export declare function loadCircleShape(tsParticles: Main): Promise<void>;

package/Shapes/Circle/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadCircleShape = void 0;
 const CircleDrawer_1 = require("./CircleDrawer");
-function loadCircleShape(tsParticles) {
-    tsParticles.addShape("circle", new CircleDrawer_1.CircleDrawer());
+async function loadCircleShape(tsParticles) {
+    await tsParticles.addShape("circle", new CircleDrawer_1.CircleDrawer());
 }
 exports.loadCircleShape = loadCircleShape;

package/Shapes/Image/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadImageShape(tsParticles: Main): void;
+export declare function loadImageShape(tsParticles: Main): Promise<void>;

package/Shapes/Image/index.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadImageShape = void 0;
 const ImageDrawer_1 = require("./ImageDrawer");
-function loadImageShape(tsParticles) {
+async function loadImageShape(tsParticles) {
     const imageDrawer = new ImageDrawer_1.ImageDrawer();
-    tsParticles.addShape("image", imageDrawer);
-    tsParticles.addShape("images", imageDrawer);
+    await tsParticles.addShape("image", imageDrawer);
+    await tsParticles.addShape("images", imageDrawer);
 }
 exports.loadImageShape = loadImageShape;

package/Shapes/Line/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadLineShape(tsParticles: Main): void;
+export declare function loadLineShape(tsParticles: Main): Promise<void>;

package/Shapes/Line/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadLineShape = void 0;
 const LineDrawer_1 = require("./LineDrawer");
-function loadLineShape(tsParticles) {
-    tsParticles.addShape("line", new LineDrawer_1.LineDrawer());
+async function loadLineShape(tsParticles) {
+    await tsParticles.addShape("line", new LineDrawer_1.LineDrawer());
 }
 exports.loadLineShape = loadLineShape;

package/Shapes/Polygon/index.d.ts

@@ -1,4 +1,4 @@
 import type { Main } from "../../main";
-export declare function loadGenericPolygonShape(tsParticles: Main): void;
-export declare function loadTriangleShape(tsParticles: Main): void;
-export declare function loadPolygonShape(tsParticles: Main): void;
+export declare function loadGenericPolygonShape(tsParticles: Main): Promise<void>;
+export declare function loadTriangleShape(tsParticles: Main): Promise<void>;
+export declare function loadPolygonShape(tsParticles: Main): Promise<void>;

package/Shapes/Polygon/index.js

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadPolygonShape = exports.loadTriangleShape = exports.loadGenericPolygonShape = void 0;
 const PolygonDrawer_1 = require("./PolygonDrawer");
 const TriangleDrawer_1 = require("./TriangleDrawer");
-function loadGenericPolygonShape(tsParticles) {
-    tsParticles.addShape("polygon", new PolygonDrawer_1.PolygonDrawer());
+async function loadGenericPolygonShape(tsParticles) {
+    await tsParticles.addShape("polygon", new PolygonDrawer_1.PolygonDrawer());
 }
 exports.loadGenericPolygonShape = loadGenericPolygonShape;
-function loadTriangleShape(tsParticles) {
-    tsParticles.addShape("triangle", new TriangleDrawer_1.TriangleDrawer());
+async function loadTriangleShape(tsParticles) {
+    await tsParticles.addShape("triangle", new TriangleDrawer_1.TriangleDrawer());
 }
 exports.loadTriangleShape = loadTriangleShape;
-function loadPolygonShape(tsParticles) {
-    loadGenericPolygonShape(tsParticles);
-    loadTriangleShape(tsParticles);
+async function loadPolygonShape(tsParticles) {
+    await loadGenericPolygonShape(tsParticles);
+    await loadTriangleShape(tsParticles);
 }
 exports.loadPolygonShape = loadPolygonShape;

package/Shapes/Square/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadSquareShape(tsParticles: Main): void;
+export declare function loadSquareShape(tsParticles: Main): Promise<void>;

package/Shapes/Square/index.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadSquareShape = void 0;
 const SquareDrawer_1 = require("./SquareDrawer");
-function loadSquareShape(tsParticles) {
+async function loadSquareShape(tsParticles) {
     const drawer = new SquareDrawer_1.SquareDrawer();
-    tsParticles.addShape("edge", drawer);
-    tsParticles.addShape("square", drawer);
+    await tsParticles.addShape("edge", drawer);
+    await tsParticles.addShape("square", drawer);
 }
 exports.loadSquareShape = loadSquareShape;

package/Shapes/Star/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadStarShape(tsParticles: Main): void;
+export declare function loadStarShape(tsParticles: Main): Promise<void>;

package/Shapes/Star/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadStarShape = void 0;
 const StarDrawer_1 = require("./StarDrawer");
-function loadStarShape(tsParticles) {
-    tsParticles.addShape("star", new StarDrawer_1.StarDrawer());
+async function loadStarShape(tsParticles) {
+    await tsParticles.addShape("star", new StarDrawer_1.StarDrawer());
 }
 exports.loadStarShape = loadStarShape;

package/Shapes/Text/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadTextShape(tsParticles: Main): void;
+export declare function loadTextShape(tsParticles: Main): Promise<void>;

package/Shapes/Text/index.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTextShape = void 0;
 const TextDrawer_1 = require("./TextDrawer");
-function loadTextShape(tsParticles) {
+async function loadTextShape(tsParticles) {
     const drawer = new TextDrawer_1.TextDrawer();
     for (const type of TextDrawer_1.validTypes) {
-        tsParticles.addShape(type, drawer);
+        await tsParticles.addShape(type, drawer);
     }
 }
 exports.loadTextShape = loadTextShape;

package/Updaters/Angle/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadAngleUpdater(tsParticles: Main): void;
+export declare function loadAngleUpdater(tsParticles: Main): Promise<void>;

package/Updaters/Angle/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadAngleUpdater = void 0;
 const AngleUpdater_1 = require("./AngleUpdater");
-function loadAngleUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("angle", (container) => new AngleUpdater_1.AngleUpdater(container));
+async function loadAngleUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("angle", (container) => new AngleUpdater_1.AngleUpdater(container));
 }
 exports.loadAngleUpdater = loadAngleUpdater;

package/Updaters/Color/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadColorUpdater(tsParticles: Main): void;
+export declare function loadColorUpdater(tsParticles: Main): Promise<void>;

package/Updaters/Color/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadColorUpdater = void 0;
 const ColorUpdater_1 = require("./ColorUpdater");
-function loadColorUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("color", (container) => new ColorUpdater_1.ColorUpdater(container));
+async function loadColorUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("color", (container) => new ColorUpdater_1.ColorUpdater(container));
 }
 exports.loadColorUpdater = loadColorUpdater;

package/Updaters/Life/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadLifeUpdater(tsParticles: Main): void;
+export declare function loadLifeUpdater(tsParticles: Main): Promise<void>;

package/Updaters/Life/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadLifeUpdater = void 0;
 const LifeUpdater_1 = require("./LifeUpdater");
-function loadLifeUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("life", (container) => new LifeUpdater_1.LifeUpdater(container));
+async function loadLifeUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("life", (container) => new LifeUpdater_1.LifeUpdater(container));
 }
 exports.loadLifeUpdater = loadLifeUpdater;

package/Updaters/Opacity/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadOpacityUpdater(tsParticles: Main): void;
+export declare function loadOpacityUpdater(tsParticles: Main): Promise<void>;

package/Updaters/Opacity/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadOpacityUpdater = void 0;
 const OpacityUpdater_1 = require("./OpacityUpdater");
-function loadOpacityUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("opacity", (container) => new OpacityUpdater_1.OpacityUpdater(container));
+async function loadOpacityUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("opacity", (container) => new OpacityUpdater_1.OpacityUpdater(container));
 }
 exports.loadOpacityUpdater = loadOpacityUpdater;

package/Updaters/OutModes/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadOutModesUpdater(tsParticles: Main): void;
+export declare function loadOutModesUpdater(tsParticles: Main): Promise<void>;

package/Updaters/OutModes/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadOutModesUpdater = void 0;
 const OutOfCanvasUpdater_1 = require("./OutOfCanvasUpdater");
-function loadOutModesUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("outModes", (container) => new OutOfCanvasUpdater_1.OutOfCanvasUpdater(container));
+async function loadOutModesUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("outModes", (container) => new OutOfCanvasUpdater_1.OutOfCanvasUpdater(container));
 }
 exports.loadOutModesUpdater = loadOutModesUpdater;

package/Updaters/Roll/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadRollUpdater(tsParticles: Main): void;
+export declare function loadRollUpdater(tsParticles: Main): Promise<void>;

package/Updaters/Roll/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadRollUpdater = void 0;
 const RollUpdater_1 = require("./RollUpdater");
-function loadRollUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("roll", () => new RollUpdater_1.RollUpdater());
+async function loadRollUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("roll", () => new RollUpdater_1.RollUpdater());
 }
 exports.loadRollUpdater = loadRollUpdater;

package/Updaters/Size/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadSizeUpdater(tsParticles: Main): void;
+export declare function loadSizeUpdater(tsParticles: Main): Promise<void>;

package/Updaters/Size/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadSizeUpdater = void 0;
 const SizeUpdater_1 = require("./SizeUpdater");
-function loadSizeUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("size", () => new SizeUpdater_1.SizeUpdater());
+async function loadSizeUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("size", () => new SizeUpdater_1.SizeUpdater());
 }
 exports.loadSizeUpdater = loadSizeUpdater;

package/Updaters/StrokeColor/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadStrokeColorUpdater(tsParticles: Main): void;
+export declare function loadStrokeColorUpdater(tsParticles: Main): Promise<void>;

package/Updaters/StrokeColor/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadStrokeColorUpdater = void 0;
 const StrokeColorUpdater_1 = require("./StrokeColorUpdater");
-function loadStrokeColorUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater_1.StrokeColorUpdater(container));
+async function loadStrokeColorUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater_1.StrokeColorUpdater(container));
 }
 exports.loadStrokeColorUpdater = loadStrokeColorUpdater;

package/Updaters/Tilt/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadTiltUpdater(tsParticles: Main): void;
+export declare function loadTiltUpdater(tsParticles: Main): Promise<void>;

package/Updaters/Tilt/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTiltUpdater = void 0;
 const TiltUpdater_1 = require("./TiltUpdater");
-function loadTiltUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("tilt", (container) => new TiltUpdater_1.TiltUpdater(container));
+async function loadTiltUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("tilt", (container) => new TiltUpdater_1.TiltUpdater(container));
 }
 exports.loadTiltUpdater = loadTiltUpdater;

package/Updaters/Wobble/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../main";
-export declare function loadWobbleUpdater(tsParticles: Main): void;
+export declare function loadWobbleUpdater(tsParticles: Main): Promise<void>;

package/Updaters/Wobble/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadWobbleUpdater = void 0;
 const WobbleUpdater_1 = require("./WobbleUpdater");
-function loadWobbleUpdater(tsParticles) {
-    tsParticles.addParticleUpdater("wobble", (container) => new WobbleUpdater_1.WobbleUpdater(container));
+async function loadWobbleUpdater(tsParticles) {
+    await tsParticles.addParticleUpdater("wobble", (container) => new WobbleUpdater_1.WobbleUpdater(container));
 }
 exports.loadWobbleUpdater = loadWobbleUpdater;

package/Utils/Plugins.d.ts

@@ -15,8 +15,8 @@ export declare class Plugins {
     static getSupportedShapes(): IterableIterator<string>;
     static getPathGenerator(type: string): IMovePathGenerator | undefined;
     static addPathGenerator(type: string, pathGenerator: IMovePathGenerator): void;
-    static getInteractors(container: Container): IInteractor[];
+    static getInteractors(container: Container, force?: boolean): IInteractor[];
     static addInteractor(name: string, initInteractor: (container: Container) => IInteractor): void;
-    static getUpdaters(container: Container): IParticleUpdater[];
+    static getUpdaters(container: Container, force?: boolean): IParticleUpdater[];
     static addParticleUpdater(name: string, initUpdater: (container: Container) => IParticleUpdater): void;
 }

package/Utils/Plugins.js

@@ -60,9 +60,9 @@ class Plugins {
             pathGenerators.set(type, pathGenerator);
         }
     }
-    static getInteractors(container) {
+    static getInteractors(container, force = false) {
         let res = interactors.get(container);
-        if (!res) {
+        if (!res || force) {
             res = [...interactorsInitializers.values()].map((t) => t(container));
             interactors.set(container, res);
         }
@@ -71,9 +71,9 @@ class Plugins {
     static addInteractor(name, initInteractor) {
         interactorsInitializers.set(name, initInteractor);
     }
-    static getUpdaters(container) {
+    static getUpdaters(container, force = false) {
         let res = updaters.get(container);
-        if (!res) {
+        if (!res || force) {
             res = [...updatersInitializers.values()].map((t) => t(container));
             updaters.set(container, res);
         }

package/Utils/Utils.d.ts

@@ -1,10 +1,9 @@
 import type { IBounds, ICircleBouncer, ICoordinates, IDimension, IParticle } from "../Core/Interfaces";
-import { DivMode } from "../Enums";
+import { DivMode, OutModeDirection } from "../Enums";
 import type { ICharacterShape } from "../Options/Interfaces/Particles/Shape/ICharacterShape";
 import type { SingleOrMultiple } from "../Types";
 import { DivEvent } from "../Options/Classes/Interactivity/Events/DivEvent";
 import type { IModeDiv } from "../Options/Interfaces/Interactivity/Modes/IModeDiv";
-import { OutModeDirection } from "../Enums";
 declare global {
     interface Window {
         customRequestAnimationFrame: (callback: FrameRequestCallback) => number;

package/browser/Core/Container.d.ts

@@ -66,10 +66,12 @@ export declare class Container {
     readonly pathGenerator: IMovePathGenerator;
     private _options;
     private _sourceOptions;
+    private readonly _initialSourceOptions;
     private paused;
     private firstStart;
     private currentTheme?;
     private drawAnimationFrame?;
+    private readonly presets;
     private readonly eventListeners;
     private readonly intersectionObserver?;
     /**
@@ -154,6 +156,6 @@ export declare class Container {
     start(): Promise<void>;
     addClickHandler(callback: (evt: Event, particles?: Particle[]) => void): void;
     updateActualOptions(): boolean;
-    private init;
+    init(): Promise<void>;
     private intersectionManager;
 }

package/browser/Core/Container.js

@@ -35,10 +35,12 @@ export class Container {
         this.zLayers = 100;
         this.pageHidden = false;
         this._sourceOptions = sourceOptions;
+        this._initialSourceOptions = sourceOptions;
         this.retina = new Retina(this);
         this.canvas = new Canvas(this);
         this.particles = new Particles(this);
         this.drawer = new FrameManager(this);
+        this.presets = presets;
         this.pathGenerator = {
             generate: () => {
                 const v = Vector.create(0, 0);
@@ -68,18 +70,6 @@ export class Container {
         /* tsParticles variables with default values */
         this._options = new Options();
         this.actualOptions = new Options();
-        for (const preset of presets) {
-            this._options.load(Plugins.getPreset(preset));
-        }
-        const shapes = Plugins.getSupportedShapes();
-        for (const type of shapes) {
-            const drawer = Plugins.getShapeDrawer(type);
-            if (drawer) {
-                this.drawers.set(type, drawer);
-            }
-        }
-        /* options settings */
-        this._options.load(this._sourceOptions);
         /* ---------- tsParticles - start ------------ */
         this.eventListeners = new EventListeners(this);
         if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
@@ -277,6 +267,7 @@ export class Container {
         this.particles.linksColors = new Map();
         delete this.particles.grabLineColor;
         delete this.particles.linksColor;
+        this._sourceOptions = this._options;
     }
     /**
      * Loads the given theme, overriding the options
@@ -398,6 +389,20 @@ export class Container {
         return false;
     }
     async init() {
+        this._options = new Options();
+        for (const preset of this.presets) {
+            this._options.load(Plugins.getPreset(preset));
+        }
+        const shapes = Plugins.getSupportedShapes();
+        for (const type of shapes) {
+            const drawer = Plugins.getShapeDrawer(type);
+            if (drawer) {
+                this.drawers.set(type, drawer);
+            }
+        }
+        /* options settings */
+        this._options.load(this._initialSourceOptions);
+        this._options.load(this._sourceOptions);
         this.actualOptions = new Options();
         this.actualOptions.load(this._options);
         /* init canvas + particles */

package/browser/Core/InteractionManager.d.ts

@@ -9,6 +9,7 @@ export declare class InteractionManager {
     private readonly externalInteractors;
     private readonly particleInteractors;
     constructor(container: Container);
+    init(): void;
     externalInteract(delta: IDelta): void;
     particlesInteract(particle: Particle, delta: IDelta): void;
 }

package/browser/Core/InteractionManager.js

@@ -6,9 +6,12 @@ import { InteractorType } from "../Enums";
 export class InteractionManager {
     constructor(container) {
         this.container = container;
-        const interactors = Plugins.getInteractors(container);
         this.externalInteractors = [];
         this.particleInteractors = [];
+        this.init();
+    }
+    init() {
+        const interactors = Plugins.getInteractors(this.container, true);
         for (const interactor of interactors) {
             switch (interactor.type) {
                 case InteractorType.External:

package/browser/Core/Particles.d.ts

@@ -27,7 +27,7 @@ export declare class Particles {
     pushing?: boolean;
     linksColor?: IRgb | string;
     grabLineColor?: IRgb | string;
-    readonly updaters: import("./Interfaces").IParticleUpdater[];
+    updaters: import("./Interfaces").IParticleUpdater[];
     private interactionManager;
     private nextId;
     private readonly freqs;

package/browser/Core/Particles.js

@@ -25,7 +25,7 @@ export class Particles {
         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);
+        this.updaters = Plugins.getUpdaters(container, true);
     }
     get count() {
         return this.array.length;
@@ -40,6 +40,8 @@ export class Particles {
         this.freqs.links = new Map();
         this.freqs.triangles = new Map();
         let handled = false;
+        this.updaters = Plugins.getUpdaters(container, true);
+        this.interactionManager.init();
         for (const [, plugin] of container.plugins) {
             if (plugin.particlesInitialization !== undefined) {
                 handled = plugin.particlesInitialization();

package/browser/Enums/Modes/ResponsiveMode.d.ts

@@ -0,0 +1,4 @@
+export declare enum ResponsiveMode {
+    screen = "screen",
+    canvas = "canvas"
+}

package/browser/Enums/Modes/ResponsiveMode.js

@@ -0,0 +1,5 @@
+export var ResponsiveMode;
+(function (ResponsiveMode) {
+    ResponsiveMode["screen"] = "screen";
+    ResponsiveMode["canvas"] = "canvas";
+})(ResponsiveMode || (ResponsiveMode = {}));

package/browser/Enums/Modes/index.d.ts

@@ -7,3 +7,4 @@ export * from "./OutMode";
 export * from "./RollMode";
 export * from "./SizeMode";
 export * from "./ThemeMode";
+export * from "./ResponsiveMode";

package/browser/Enums/Modes/index.js

@@ -7,3 +7,4 @@ export * from "./OutMode";
 export * from "./RollMode";
 export * from "./SizeMode";
 export * from "./ThemeMode";
+export * from "./ResponsiveMode";

package/browser/Interactions/External/Attract/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../../main";
-export declare function loadExternalAttractInteraction(tsParticles: Main): void;
+export declare function loadExternalAttractInteraction(tsParticles: Main): Promise<void>;

package/browser/Interactions/External/Attract/index.js

@@ -1,4 +1,4 @@
 import { Attractor } from "./Attractor";
-export function loadExternalAttractInteraction(tsParticles) {
-    tsParticles.addInteractor("externalAttract", (container) => new Attractor(container));
+export async function loadExternalAttractInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalAttract", (container) => new Attractor(container));
 }

package/browser/Interactions/External/Bounce/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../../main";
-export declare function loadExternalBounceInteraction(tsParticles: Main): void;
+export declare function loadExternalBounceInteraction(tsParticles: Main): Promise<void>;

package/browser/Interactions/External/Bounce/index.js

@@ -1,4 +1,4 @@
 import { Bouncer } from "./Bouncer";
-export function loadExternalBounceInteraction(tsParticles) {
-    tsParticles.addInteractor("externalBounce", (container) => new Bouncer(container));
+export async function loadExternalBounceInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalBounce", (container) => new Bouncer(container));
 }

package/browser/Interactions/External/Bubble/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../../main";
-export declare function loadExternalBubbleInteraction(tsParticles: Main): void;
+export declare function loadExternalBubbleInteraction(tsParticles: Main): Promise<void>;

package/browser/Interactions/External/Bubble/index.js

@@ -1,4 +1,4 @@
 import { Bubbler } from "./Bubbler";
-export function loadExternalBubbleInteraction(tsParticles) {
-    tsParticles.addInteractor("externalBubble", (container) => new Bubbler(container));
+export async function loadExternalBubbleInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalBubble", (container) => new Bubbler(container));
 }

package/browser/Interactions/External/Connect/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../../main";
-export declare function loadExternalConnectInteraction(tsParticles: Main): void;
+export declare function loadExternalConnectInteraction(tsParticles: Main): Promise<void>;

package/browser/Interactions/External/Connect/index.js

@@ -1,4 +1,4 @@
 import { Connector } from "./Connector";
-export function loadExternalConnectInteraction(tsParticles) {
-    tsParticles.addInteractor("externalConnect", (container) => new Connector(container));
+export async function loadExternalConnectInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalConnect", (container) => new Connector(container));
 }

package/browser/Interactions/External/Grab/index.d.ts

@@ -1,2 +1,2 @@
 import type { Main } from "../../../main";
-export declare function loadExternalGrabInteraction(tsParticles: Main): void;
+export declare function loadExternalGrabInteraction(tsParticles: Main): Promise<void>;