tsparticles 1.35.2 → 1.37.0

package/Core/Canvas.js

@@ -75,23 +75,21 @@ class Canvas {
         }
     }
     windowResize() {
-        var _a;
         if (!this.element) {
             return;
         }
         const container = this.container;
         this.resize();
-        if (((_a = this.resizeFactor) === null || _a === void 0 ? void 0 : _a.width) === 1 && this.resizeFactor.height === 1) {
-            delete this.resizeFactor;
-            return;
-        }
-        container.updateActualOptions();
+        const needsRefresh = container.updateActualOptions();
         container.particles.setDensity();
         for (const [, plugin] of container.plugins) {
             if (plugin.resize !== undefined) {
                 plugin.resize();
             }
         }
+        if (needsRefresh) {
+            container.refresh();
+        }
     }
     resize() {
         if (!this.element) {

package/Core/Container.d.ts

@@ -23,6 +23,7 @@ export declare class Container {
     repulse: IRepulse;
     attract: IAttract;
     zLayers: number;
+    responsiveMaxWidth?: number;
     get options(): Options;
     get sourceOptions(): RecursivePartial<IOptions> | undefined;
     actualOptions: Options;
@@ -39,6 +40,7 @@ export declare class Container {
     private firstStart;
     private currentTheme?;
     private drawAnimationFrame?;
+    private readonly presets;
     private readonly eventListeners;
     private readonly intersectionObserver?;
     constructor(id: string, sourceOptions?: RecursivePartial<IOptions>, ...presets: string[]);
@@ -58,7 +60,7 @@ export declare class Container {
     loadTheme(name?: string): Promise<void>;
     start(): Promise<void>;
     addClickHandler(callback: (evt: Event, particles?: Particle[]) => void): void;
-    updateActualOptions(): void;
-    private init;
+    updateActualOptions(): boolean;
+    init(): Promise<void>;
     private intersectionManager;
 }

package/Core/Container.js

@@ -26,6 +26,7 @@ class Container {
         this.canvas = new Canvas_1.Canvas(this);
         this.particles = new Particles_1.Particles(this);
         this.drawer = new FrameManager_1.FrameManager(this);
+        this.presets = presets;
         this.pathGenerator = {
             generate: () => {
                 const v = Vector_1.Vector.create(0, 0);
@@ -52,17 +53,6 @@ class Container {
         this.density = 1;
         this._options = new Options_1.Options();
         this.actualOptions = new Options_1.Options();
-        for (const preset of presets) {
-            this._options.load(Utils_1.Plugins.getPreset(preset));
-        }
-        const shapes = Utils_1.Plugins.getSupportedShapes();
-        for (const type of shapes) {
-            const drawer = Utils_1.Plugins.getShapeDrawer(type);
-            if (drawer) {
-                this.drawers.set(type, drawer);
-            }
-        }
-        this._options.load(this._sourceOptions);
         this.eventListeners = new Utils_1.EventListeners(this);
         if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
             this.intersectionObserver = new IntersectionObserver((entries) => this.intersectionManager(entries));
@@ -205,6 +195,7 @@ class Container {
         this.particles.linksColors = new Map();
         delete this.particles.grabLineColor;
         delete this.particles.linksColor;
+        this._sourceOptions = this._options;
     }
     async loadTheme(name) {
         this.currentTheme = name;
@@ -309,10 +300,28 @@ class Container {
         el.addEventListener("touchcancel", touchCancelHandler);
     }
     updateActualOptions() {
-        this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
+        this.actualOptions.responsive = [];
+        const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
         this.actualOptions.setTheme(this.currentTheme);
+        if (this.responsiveMaxWidth != newMaxWidth) {
+            this.responsiveMaxWidth = newMaxWidth;
+            return true;
+        }
+        return false;
     }
     async init() {
+        this._options = new Options_1.Options();
+        for (const preset of this.presets) {
+            this._options.load(Utils_1.Plugins.getPreset(preset));
+        }
+        const shapes = Utils_1.Plugins.getSupportedShapes();
+        for (const type of shapes) {
+            const drawer = Utils_1.Plugins.getShapeDrawer(type);
+            if (drawer) {
+                this.drawers.set(type, drawer);
+            }
+        }
+        this._options.load(this._sourceOptions);
         this.actualOptions = new Options_1.Options();
         this.actualOptions.load(this._options);
         this.retina.init();

package/Core/Loader.d.ts

@@ -3,12 +3,27 @@ import type { IOptions } from "../Options/Interfaces/IOptions";
 import type { RecursivePartial } from "../Types";
 import type { Particle } from "./Particle";
 import type { SingleOrMultiple } from "../Types";
+interface LoaderParams {
+    element?: HTMLElement;
+    index?: number;
+    options?: SingleOrMultiple<RecursivePartial<IOptions>>;
+    tagId?: string;
+}
+interface RemoteLoaderParams {
+    element?: HTMLElement;
+    index?: number;
+    tagId?: string;
+    url?: SingleOrMultiple<string>;
+}
 export declare class Loader {
     static dom(): Container[];
     static domItem(index: number): Container | undefined;
-    static load(tagId: string, options?: SingleOrMultiple<RecursivePartial<IOptions>>, index?: number): Promise<Container | undefined>;
-    static set(id: string, domContainer: HTMLElement, options?: SingleOrMultiple<RecursivePartial<IOptions>>, index?: number): Promise<Container | undefined>;
-    static loadJSON(tagId: string, jsonUrl: SingleOrMultiple<string>, index?: number): Promise<Container | undefined>;
-    static setJSON(id: string, domContainer: HTMLElement, jsonUrl: SingleOrMultiple<string>, index?: number): Promise<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;
 }
+export {};

package/Core/Loader.js

@@ -20,19 +20,19 @@ class Loader {
         }
         dom.splice(index, 1);
     }
-    static async load(tagId, options, index) {
-        let domContainer = document.getElementById(tagId);
+    static 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;
+        let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(tagId);
         if (!domContainer) {
             domContainer = document.createElement("div");
             domContainer.id = tagId;
-            document.append(domContainer);
+            (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
         }
-        return Loader.set(tagId, domContainer, options, index);
-    }
-    static async set(id, domContainer, options, index) {
         const currentOptions = options instanceof Array ? (0, Utils_1.itemFromArray)(options, index) : options;
         const dom = Loader.dom();
-        const oldIndex = dom.findIndex((v) => v.id === id);
+        const oldIndex = dom.findIndex((v) => v.id === tagId);
         if (oldIndex >= 0) {
             const old = Loader.domItem(oldIndex);
             if (old && !old.destroyed) {
@@ -64,7 +64,7 @@ class Loader {
                 domContainer.appendChild(canvasEl);
             }
         }
-        const newItem = new Container_1.Container(id, currentOptions);
+        const newItem = new Container_1.Container(tagId, currentOptions);
         if (oldIndex >= 0) {
             dom.splice(oldIndex, 0, newItem);
         }
@@ -75,26 +75,88 @@ class Loader {
         await newItem.start();
         return newItem;
     }
-    static async loadJSON(tagId, jsonUrl, index) {
+    static async loadRemoteOptions(params) {
+        const { url: jsonUrl, index } = params;
         const url = jsonUrl instanceof Array ? (0, Utils_1.itemFromArray)(jsonUrl, index) : jsonUrl;
+        if (!url) {
+            return;
+        }
         const response = await fetch(url);
-        if (response.ok) {
-            return Loader.load(tagId, await response.json());
+        if (!response.ok) {
+            fetchError(response.status);
+            return;
+        }
+        const data = await response.json();
+        return await Loader.loadOptions({
+            tagId: params.tagId,
+            element: params.element,
+            index,
+            options: data,
+        });
+    }
+    static load(tagId, options, index) {
+        const params = { index };
+        if (typeof tagId === "string") {
+            params.tagId = tagId;
         }
         else {
-            fetchError(response.status);
+            params.options = tagId;
+        }
+        if (typeof options === "number") {
+            params.index = options !== null && options !== void 0 ? options : params.index;
+        }
+        else {
+            params.options = options !== null && options !== void 0 ? options : params.options;
+        }
+        return this.loadOptions(params);
+    }
+    static async set(id, domContainer, options, index) {
+        const params = { index };
+        if (typeof id === "string") {
+            params.tagId = id;
+        }
+        else {
+            params.element = id;
+        }
+        if (domContainer instanceof HTMLElement) {
+            params.element = domContainer;
+        }
+        else {
+            params.options = domContainer;
         }
+        if (typeof options === "number") {
+            params.index = options;
+        }
+        else {
+            params.options = options !== null && options !== void 0 ? options : params.options;
+        }
+        return this.loadOptions(params);
+    }
+    static async loadJSON(tagId, jsonUrl, index) {
+        let url, id;
+        if (typeof jsonUrl === "number" || jsonUrl === undefined) {
+            url = tagId;
+        }
+        else {
+            id = tagId;
+            url = jsonUrl;
+        }
+        return await Loader.loadRemoteOptions({ tagId: id, url, index });
     }
     static async setJSON(id, domContainer, jsonUrl, index) {
-        const url = jsonUrl instanceof Array ? (0, Utils_1.itemFromArray)(jsonUrl, index) : jsonUrl;
-        const response = await fetch(url);
-        if (response.ok) {
-            const options = await response.json();
-            return Loader.set(id, domContainer, options);
+        let url, newId, newIndex, element;
+        if (id instanceof HTMLElement) {
+            element = id;
+            url = domContainer;
+            newIndex = jsonUrl;
         }
         else {
-            fetchError(response.status);
+            newId = id;
+            element = domContainer;
+            url = jsonUrl;
+            newIndex = index;
         }
+        return await Loader.loadRemoteOptions({ tagId: newId, url, index: newIndex, element });
     }
     static setOnClickHandler(callback) {
         const dom = Loader.dom();

package/Enums/Modes/ResponsiveMode.d.ts

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

package/Enums/Modes/ResponsiveMode.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveMode = void 0;
+var ResponsiveMode;
+(function (ResponsiveMode) {
+    ResponsiveMode["screen"] = "screen";
+    ResponsiveMode["canvas"] = "canvas";
+})(ResponsiveMode = exports.ResponsiveMode || (exports.ResponsiveMode = {}));

package/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/Enums/Modes/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./OutMode"), exports);
 __exportStar(require("./RollMode"), exports);
 __exportStar(require("./SizeMode"), exports);
 __exportStar(require("./ThemeMode"), exports);
+__exportStar(require("./ResponsiveMode"), exports);

package/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/Interactions/External/Attract/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadExternalAttractInteraction = void 0;
 const Attractor_1 = require("./Attractor");
-function loadExternalAttractInteraction(tsParticles) {
-    tsParticles.addInteractor("externalAttract", (container) => new Attractor_1.Attractor(container));
+async function loadExternalAttractInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalAttract", (container) => new Attractor_1.Attractor(container));
 }
 exports.loadExternalAttractInteraction = loadExternalAttractInteraction;

package/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/Interactions/External/Bounce/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadExternalBounceInteraction = void 0;
 const Bouncer_1 = require("./Bouncer");
-function loadExternalBounceInteraction(tsParticles) {
-    tsParticles.addInteractor("externalBounce", (container) => new Bouncer_1.Bouncer(container));
+async function loadExternalBounceInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalBounce", (container) => new Bouncer_1.Bouncer(container));
 }
 exports.loadExternalBounceInteraction = loadExternalBounceInteraction;

package/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/Interactions/External/Bubble/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadExternalBubbleInteraction = void 0;
 const Bubbler_1 = require("./Bubbler");
-function loadExternalBubbleInteraction(tsParticles) {
-    tsParticles.addInteractor("externalBubble", (container) => new Bubbler_1.Bubbler(container));
+async function loadExternalBubbleInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalBubble", (container) => new Bubbler_1.Bubbler(container));
 }
 exports.loadExternalBubbleInteraction = loadExternalBubbleInteraction;

package/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/Interactions/External/Connect/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadExternalConnectInteraction = void 0;
 const Connector_1 = require("./Connector");
-function loadExternalConnectInteraction(tsParticles) {
-    tsParticles.addInteractor("externalConnect", (container) => new Connector_1.Connector(container));
+async function loadExternalConnectInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalConnect", (container) => new Connector_1.Connector(container));
 }
 exports.loadExternalConnectInteraction = loadExternalConnectInteraction;

package/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>;

package/Interactions/External/Grab/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadExternalGrabInteraction = void 0;
 const Grabber_1 = require("./Grabber");
-function loadExternalGrabInteraction(tsParticles) {
-    tsParticles.addInteractor("externalGrab", (container) => new Grabber_1.Grabber(container));
+async function loadExternalGrabInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalGrab", (container) => new Grabber_1.Grabber(container));
 }
 exports.loadExternalGrabInteraction = loadExternalGrabInteraction;

package/Interactions/External/Repulse/index.d.ts

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

package/Interactions/External/Repulse/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadExternalRepulseInteraction = void 0;
 const Repulser_1 = require("./Repulser");
-function loadExternalRepulseInteraction(tsParticles) {
-    tsParticles.addInteractor("externalRepulse", (container) => new Repulser_1.Repulser(container));
+async function loadExternalRepulseInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalRepulse", (container) => new Repulser_1.Repulser(container));
 }
 exports.loadExternalRepulseInteraction = loadExternalRepulseInteraction;

package/Interactions/External/Trail/index.d.ts

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

package/Interactions/External/Trail/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadExternalTrailInteraction = void 0;
 const TrailMaker_1 = require("./TrailMaker");
-function loadExternalTrailInteraction(tsParticles) {
-    tsParticles.addInteractor("externalTrail", (container) => new TrailMaker_1.TrailMaker(container));
+async function loadExternalTrailInteraction(tsParticles) {
+    await tsParticles.addInteractor("externalTrail", (container) => new TrailMaker_1.TrailMaker(container));
 }
 exports.loadExternalTrailInteraction = loadExternalTrailInteraction;

package/Interactions/Particles/Attract/index.d.ts

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

package/Interactions/Particles/Attract/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadParticlesAttractInteraction = void 0;
 const Attractor_1 = require("./Attractor");
-function loadParticlesAttractInteraction(tsParticles) {
-    tsParticles.addInteractor("particlesAttract", (container) => new Attractor_1.Attractor(container));
+async function loadParticlesAttractInteraction(tsParticles) {
+    await tsParticles.addInteractor("particlesAttract", (container) => new Attractor_1.Attractor(container));
 }
 exports.loadParticlesAttractInteraction = loadParticlesAttractInteraction;

package/Interactions/Particles/Collisions/index.d.ts

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

package/Interactions/Particles/Collisions/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadParticlesCollisionsInteraction = void 0;
 const Collider_1 = require("./Collider");
-function loadParticlesCollisionsInteraction(tsParticles) {
-    tsParticles.addInteractor("particlesCollisions", (container) => new Collider_1.Collider(container));
+async function loadParticlesCollisionsInteraction(tsParticles) {
+    await tsParticles.addInteractor("particlesCollisions", (container) => new Collider_1.Collider(container));
 }
 exports.loadParticlesCollisionsInteraction = loadParticlesCollisionsInteraction;

package/Interactions/Particles/Links/index.d.ts

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

package/Interactions/Particles/Links/index.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadParticlesLinksInteraction = exports.loadInteraction = void 0;
 const Linker_1 = require("./Linker");
 const plugin_1 = require("./plugin");
-function loadInteraction(tsParticles) {
-    tsParticles.addInteractor("particlesLinks", (container) => new Linker_1.Linker(container));
+async function loadInteraction(tsParticles) {
+    await tsParticles.addInteractor("particlesLinks", (container) => new Linker_1.Linker(container));
 }
 exports.loadInteraction = loadInteraction;
-function loadParticlesLinksInteraction(tsParticles) {
-    loadInteraction(tsParticles);
-    (0, plugin_1.loadPlugin)(tsParticles);
+async function loadParticlesLinksInteraction(tsParticles) {
+    await loadInteraction(tsParticles);
+    await (0, plugin_1.loadPlugin)(tsParticles);
 }
 exports.loadParticlesLinksInteraction = loadParticlesLinksInteraction;

package/Interactions/Particles/Links/plugin.d.ts

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

package/Interactions/Particles/Links/plugin.js

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

package/Options/Classes/FullScreen/FullScreen.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FullScreen = void 0;
 class FullScreen {
     constructor() {
-        this.enable = false;
-        this.zIndex = -1;
+        this.enable = true;
+        this.zIndex = 0;
     }
     load(data) {
         if (!data) {

package/Options/Classes/Interactivity/Interactivity.js

@@ -6,7 +6,7 @@ const Events_1 = require("./Events/Events");
 const Modes_1 = require("./Modes/Modes");
 class Interactivity {
     constructor() {
-        this.detectsOn = Enums_1.InteractivityDetect.canvas;
+        this.detectsOn = Enums_1.InteractivityDetect.window;
         this.events = new Events_1.Events();
         this.modes = new Modes_1.Modes();
     }

package/Options/Classes/Options.d.ts

@@ -41,6 +41,6 @@ export declare class Options implements IOptions, IOptionLoader<IOptions> {
     constructor();
     load(data?: RecursivePartial<IOptions>): void;
     setTheme(name?: string): void;
-    setResponsive(width: number, pxRatio: number, defaultOptions: IOptions): void;
+    setResponsive(width: number, pxRatio: number, defaultOptions: IOptions): number | undefined;
     private importPreset;
 }

package/Options/Classes/Options.js

@@ -147,9 +147,12 @@ class Options {
         }
     }
     setResponsive(width, pxRatio, defaultOptions) {
-        var _a;
         this.load(defaultOptions);
-        this.load((_a = this.responsive.find((t) => t.maxWidth * pxRatio > width)) === null || _a === void 0 ? void 0 : _a.options);
+        const responsiveOptions = this.responsive.find((t) => t.mode === Enums_1.ResponsiveMode.screen && screen
+            ? t.maxWidth * pxRatio > screen.availWidth
+            : t.maxWidth * pxRatio > width);
+        this.load(responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.options);
+        return responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.maxWidth;
     }
     importPreset(preset) {
         this.load(Utils_1.Plugins.getPreset(preset));

package/Options/Classes/Responsive.d.ts

@@ -2,9 +2,11 @@ import type { IResponsive } from "../Interfaces/IResponsive";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader";
 import type { RecursivePartial } from "../../Types";
 import type { IOptions } from "../Interfaces/IOptions";
+import { ResponsiveMode } from "../../Enums";
 export declare class Responsive implements IResponsive, IOptionLoader<IResponsive> {
     maxWidth: number;
     options: RecursivePartial<IOptions>;
+    mode: ResponsiveMode;
     constructor();
     load(data?: RecursivePartial<IResponsive>): void;
 }

package/Options/Classes/Responsive.js

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Responsive = void 0;
 const Utils_1 = require("../../Utils");
+const Enums_1 = require("../../Enums");
 class Responsive {
     constructor() {
         this.maxWidth = Infinity;
         this.options = {};
+        this.mode = Enums_1.ResponsiveMode.canvas;
     }
     load(data) {
         if (!data) {
@@ -14,6 +16,14 @@ class Responsive {
         if (data.maxWidth !== undefined) {
             this.maxWidth = data.maxWidth;
         }
+        if (data.mode !== undefined) {
+            if (data.mode === Enums_1.ResponsiveMode.screen) {
+                this.mode = Enums_1.ResponsiveMode.screen;
+            }
+            else {
+                this.mode = Enums_1.ResponsiveMode.canvas;
+            }
+        }
         if (data.options !== undefined) {
             this.options = (0, Utils_1.deepExtend)({}, data.options);
         }

package/Options/Interfaces/IResponsive.d.ts

@@ -1,6 +1,8 @@
+import { ResponsiveMode } from "../../Enums";
 import type { RecursivePartial } from "../../Types";
 import type { IOptions } from "./IOptions";
 export interface IResponsive {
     maxWidth: number;
     options: RecursivePartial<IOptions>;
+    mode: ResponsiveMode;
 }

package/Plugins/Absorbers/plugin.d.ts

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

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";