tsparticles 1.35.2 → 1.37.0

package/browser/index.slim.js

@@ -2,14 +2,15 @@ import { initPjs } from "./pjs";
 import { Circle, CircleWarp, Constants, Point, Rectangle } from "./Utils";
 import { Main } from "./main";
 import { loadSlim } from "./slim";
+/* ---------- tsParticles functions - start ------------ */
 const tsParticles = new Main();
 tsParticles.init();
-loadSlim(tsParticles);
 const { particlesJS, pJSDom } = initPjs(tsParticles);
+loadSlim(tsParticles);
 export * from "./Core/Particle/Vector";
 export * from "./Core/Container";
 export * from "./Enums";
-export { Circle, CircleWarp, Constants, Point, Rectangle, Main, loadSlim };
+export { Circle, CircleWarp, Constants, Point, Rectangle, Main };
 export * from "./Utils/CanvasUtils";
 export * from "./Utils/ColorUtils";
 export * from "./Utils/NumberUtils";

package/browser/main.d.ts

@@ -3,22 +3,115 @@ import type { Container } from "./Core/Container";
 import type { ShapeDrawerAfterEffectFunction, ShapeDrawerDestroyFunction, ShapeDrawerDrawFunction, ShapeDrawerInitFunction, RecursivePartial, SingleOrMultiple } from "./Types";
 import type { Particle } from "./Core/Particle";
 import type { IInteractor, IMovePathGenerator, IParticleUpdater, IPlugin, IShapeDrawer } from "./Core/Interfaces";
+/**
+ * Main class for creating the singleton on window.
+ * It's a singleton proxy to the static [[Loader]] class for initializing [[Container]] instances
+ * @category Main
+ */
 export declare class Main {
     #private;
     constructor();
+    /**
+     * init method, used by imports
+     */
     init(): void;
+    /**
+     * Loads an options object from the provided array to create a [[Container]] object.
+     * @param tagId The particles container element id
+     * @param options The options array to get the item from
+     * @param index If provided gets the corresponding item from the array
+     * @returns A Promise with the [[Container]] object created
+     */
     loadFromArray(tagId: string, options: RecursivePartial<IOptions>[], index?: number): Promise<Container | undefined>;
-    load(tagId: string, options: SingleOrMultiple<RecursivePartial<IOptions>>): Promise<Container | undefined>;
-    set(id: string, element: HTMLElement, options: RecursivePartial<IOptions>): Promise<Container | undefined>;
-    loadJSON(tagId: string, pathConfigJson: SingleOrMultiple<string>, index?: number): Promise<Container | undefined>;
-    setJSON(id: string, element: HTMLElement, pathConfigJson: SingleOrMultiple<string>, index?: number): Promise<Container | undefined>;
+    /**
+     * Loads the provided options to create a [[Container]] object.
+     * @param tagId The particles container element id
+     * @param options The options object to initialize the [[Container]]
+     * @returns A Promise with the [[Container]] object created
+     */
+    load(tagId: string | SingleOrMultiple<RecursivePartial<IOptions>>, options?: SingleOrMultiple<RecursivePartial<IOptions>>): Promise<Container | undefined>;
+    /**
+     * Loads the provided option to create a [[Container]] object using the element parameter as a container
+     * @param id The particles container id
+     * @param element The dom element used to contain the particles
+     * @param options The options object to initialize the [[Container]]
+     */
+    set(id: string | HTMLElement, element: HTMLElement | RecursivePartial<IOptions>, options?: RecursivePartial<IOptions>): Promise<Container | undefined>;
+    /**
+     * Loads the provided json with a GET request. The content will be used to create a [[Container]] object.
+     * This method is async, so if you need a callback refer to JavaScript function `fetch`
+     * @param tagId the particles container element id
+     * @param pathConfigJson the json path (or paths array) to use in the GET request
+     * @param index the index of the paths array, if a single path is passed this value is ignored
+     * @returns A Promise with the [[Container]] object created
+     */
+    loadJSON(tagId: string | SingleOrMultiple<string>, pathConfigJson?: SingleOrMultiple<string> | number, index?: number): Promise<Container | undefined>;
+    /**
+     * Loads the provided option to create a [[Container]] object using the element parameter as a container
+     * @param id The particles container id
+     * @param element The dom element used to contain the particles
+     * @param pathConfigJson the json path (or paths array) to use in the GET request
+     * @param index the index of the paths array, if a single path is passed this value is ignored
+     * @returns A Promise with the [[Container]] object created
+     */
+    setJSON(id: string | HTMLElement, element: HTMLElement | SingleOrMultiple<string>, pathConfigJson?: SingleOrMultiple<string> | number, index?: number): Promise<Container | undefined>;
+    /**
+     * Adds an additional click handler to all the loaded [[Container]] objects.
+     * @param callback The function called after the click event is fired
+     */
     setOnClickHandler(callback: (e: Event, particles?: Particle[]) => void): void;
+    /**
+     * All the [[Container]] objects loaded
+     * @returns All the [[Container]] objects loaded
+     */
     dom(): Container[];
+    /**
+     * Retrieves a [[Container]] from all the objects loaded
+     * @param index The object index
+     * @returns The [[Container]] object at specified index, if present or not destroyed, otherwise undefined
+     */
     domItem(index: number): Container | undefined;
-    addShape(shape: string, drawer: IShapeDrawer | ShapeDrawerDrawFunction, init?: ShapeDrawerInitFunction, afterEffect?: ShapeDrawerAfterEffectFunction, destroy?: ShapeDrawerDestroyFunction): void;
-    addPreset(preset: string, options: RecursivePartial<IOptions>, override?: boolean): void;
-    addPlugin(plugin: IPlugin): void;
-    addPathGenerator(name: string, generator: IMovePathGenerator): void;
-    addInteractor(name: string, interactorInitializer: (container: Container) => IInteractor): void;
-    addParticleUpdater(name: string, updaterInitializer: (container: Container) => IParticleUpdater): void;
+    /**
+     * Reloads all existing tsParticles loaded instances
+     */
+    refresh(): Promise<void>;
+    /**
+     * addShape adds shape to tsParticles, it will be available to all future instances created
+     * @param shape the shape name
+     * @param drawer the shape drawer function or class instance that draws the shape in the canvas
+     * @param init Optional: the shape drawer init function, used only if the drawer parameter is a function
+     * @param afterEffect Optional: the shape drawer after effect function, used only if the drawer parameter is a function
+     * @param destroy Optional: the shape drawer destroy function, used only if the drawer parameter is a function
+     */
+    addShape(shape: string, drawer: IShapeDrawer | ShapeDrawerDrawFunction, init?: ShapeDrawerInitFunction, afterEffect?: ShapeDrawerAfterEffectFunction, destroy?: ShapeDrawerDestroyFunction): Promise<void>;
+    /**
+     * addPreset adds preset to tsParticles, it will be available to all future instances created
+     * @param preset the preset name
+     * @param options the options to add to the preset
+     * @param override if true, the preset will override any existing with the same name
+     */
+    addPreset(preset: string, options: RecursivePartial<IOptions>, override?: boolean): Promise<void>;
+    /**
+     * addPlugin adds plugin to tsParticles, if an instance needs it it will be loaded
+     * @param plugin the plugin implementation of [[IPlugin]]
+     */
+    addPlugin(plugin: IPlugin): Promise<void>;
+    /**
+     * addPathGenerator adds a named path generator to tsParticles, this can be called by options
+     * @param name the path generator name
+     * @param generator the path generator object
+     */
+    addPathGenerator(name: string, generator: IMovePathGenerator): Promise<void>;
+    /**
+     *
+     * @param name
+     * @param interactorInitializer
+     */
+    addInteractor(name: string, interactorInitializer: (container: Container) => IInteractor): Promise<void>;
+    /**
+     *
+     * @param name
+     * @param updaterInitializer
+     */
+    addParticleUpdater(name: string, updaterInitializer: (container: Container) => IParticleUpdater): Promise<void>;
 }

package/browser/main.js

@@ -12,41 +12,113 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var _Main_initialized;
 import { Plugins } from "./Utils";
 import { Loader } from "./Core/Loader";
+/**
+ * Main class for creating the singleton on window.
+ * It's a singleton proxy to the static [[Loader]] class for initializing [[Container]] instances
+ * @category Main
+ */
 export class Main {
     constructor() {
         _Main_initialized.set(this, void 0);
         __classPrivateFieldSet(this, _Main_initialized, false, "f");
     }
+    /**
+     * init method, used by imports
+     */
     init() {
         if (!__classPrivateFieldGet(this, _Main_initialized, "f")) {
             __classPrivateFieldSet(this, _Main_initialized, true, "f");
         }
     }
+    /**
+     * Loads an options object from the provided array to create a [[Container]] object.
+     * @param tagId The particles container element id
+     * @param options The options array to get the item from
+     * @param index If provided gets the corresponding item from the array
+     * @returns A Promise with the [[Container]] object created
+     */
     async loadFromArray(tagId, options, index) {
         return Loader.load(tagId, options, index);
     }
+    /**
+     * Loads the provided options to create a [[Container]] object.
+     * @param tagId The particles container element id
+     * @param options The options object to initialize the [[Container]]
+     * @returns A Promise with the [[Container]] object created
+     */
     async load(tagId, options) {
         return Loader.load(tagId, options);
     }
+    /**
+     * Loads the provided option to create a [[Container]] object using the element parameter as a container
+     * @param id The particles container id
+     * @param element The dom element used to contain the particles
+     * @param options The options object to initialize the [[Container]]
+     */
     async set(id, element, options) {
         return Loader.set(id, element, options);
     }
-    loadJSON(tagId, pathConfigJson, index) {
+    /**
+     * Loads the provided json with a GET request. The content will be used to create a [[Container]] object.
+     * This method is async, so if you need a callback refer to JavaScript function `fetch`
+     * @param tagId the particles container element id
+     * @param pathConfigJson the json path (or paths array) to use in the GET request
+     * @param index the index of the paths array, if a single path is passed this value is ignored
+     * @returns A Promise with the [[Container]] object created
+     */
+    async loadJSON(tagId, pathConfigJson, index) {
         return Loader.loadJSON(tagId, pathConfigJson, index);
     }
+    /**
+     * Loads the provided option to create a [[Container]] object using the element parameter as a container
+     * @param id The particles container id
+     * @param element The dom element used to contain the particles
+     * @param pathConfigJson the json path (or paths array) to use in the GET request
+     * @param index the index of the paths array, if a single path is passed this value is ignored
+     * @returns A Promise with the [[Container]] object created
+     */
     async setJSON(id, element, pathConfigJson, index) {
         return Loader.setJSON(id, element, pathConfigJson, index);
     }
+    /**
+     * Adds an additional click handler to all the loaded [[Container]] objects.
+     * @param callback The function called after the click event is fired
+     */
     setOnClickHandler(callback) {
         Loader.setOnClickHandler(callback);
     }
+    /**
+     * All the [[Container]] objects loaded
+     * @returns All the [[Container]] objects loaded
+     */
     dom() {
         return Loader.dom();
     }
+    /**
+     * Retrieves a [[Container]] from all the objects loaded
+     * @param index The object index
+     * @returns The [[Container]] object at specified index, if present or not destroyed, otherwise undefined
+     */
     domItem(index) {
         return Loader.domItem(index);
     }
-    addShape(shape, drawer, init, afterEffect, destroy) {
+    /**
+     * Reloads all existing tsParticles loaded instances
+     */
+    async refresh() {
+        for (const instance of this.dom()) {
+            await instance.refresh();
+        }
+    }
+    /**
+     * addShape adds shape to tsParticles, it will be available to all future instances created
+     * @param shape the shape name
+     * @param drawer the shape drawer function or class instance that draws the shape in the canvas
+     * @param init Optional: the shape drawer init function, used only if the drawer parameter is a function
+     * @param afterEffect Optional: the shape drawer after effect function, used only if the drawer parameter is a function
+     * @param destroy Optional: the shape drawer destroy function, used only if the drawer parameter is a function
+     */
+    async addShape(shape, drawer, init, afterEffect, destroy) {
         let customDrawer;
         if (typeof drawer === "function") {
             customDrawer = {
@@ -60,21 +132,52 @@ export class Main {
             customDrawer = drawer;
         }
         Plugins.addShapeDrawer(shape, customDrawer);
-    }
-    addPreset(preset, options, override = false) {
+        await this.refresh();
+    }
+    /**
+     * addPreset adds preset to tsParticles, it will be available to all future instances created
+     * @param preset the preset name
+     * @param options the options to add to the preset
+     * @param override if true, the preset will override any existing with the same name
+     */
+    async addPreset(preset, options, override = false) {
         Plugins.addPreset(preset, options, override);
+        await this.refresh();
     }
-    addPlugin(plugin) {
+    /**
+     * addPlugin adds plugin to tsParticles, if an instance needs it it will be loaded
+     * @param plugin the plugin implementation of [[IPlugin]]
+     */
+    async addPlugin(plugin) {
         Plugins.addPlugin(plugin);
-    }
-    addPathGenerator(name, generator) {
+        await this.refresh();
+    }
+    /**
+     * addPathGenerator adds a named path generator to tsParticles, this can be called by options
+     * @param name the path generator name
+     * @param generator the path generator object
+     */
+    async addPathGenerator(name, generator) {
         Plugins.addPathGenerator(name, generator);
-    }
-    addInteractor(name, interactorInitializer) {
+        await this.refresh();
+    }
+    /**
+     *
+     * @param name
+     * @param interactorInitializer
+     */
+    async addInteractor(name, interactorInitializer) {
         Plugins.addInteractor(name, interactorInitializer);
-    }
-    addParticleUpdater(name, updaterInitializer) {
+        await this.refresh();
+    }
+    /**
+     *
+     * @param name
+     * @param updaterInitializer
+     */
+    async addParticleUpdater(name, updaterInitializer) {
         Plugins.addParticleUpdater(name, updaterInitializer);
+        await this.refresh();
     }
 }
 _Main_initialized = new WeakMap();

package/browser/pjs.d.ts

@@ -1,10 +1,37 @@
+/**
+ * [[include:pjsMigration.md]]
+ * @packageDocumentation
+ */
 import type { IOptions } from "./Options/Interfaces/IOptions";
 import type { Container } from "./Core/Container";
 import type { Main } from "./main";
 import type { RecursivePartial } from "./Types";
+/**
+ * [[include:pjsMigration.md]]
+ * @category Particles.js
+ */
 export interface IParticlesJS {
+    /**
+     * Loads the provided options to create a [[Container]] object.
+     * @deprecated this method is obsolete, please use the new tsParticles.load
+     * @param tagId the particles container element id
+     * @param options the options object to initialize the [[Container]]
+     */
     (tagId: string, options: RecursivePartial<IOptions>): Promise<Container | undefined>;
+    /**
+     * Loads the provided json with a GET request.
+     * The content will be used to create a [[Container]] object.
+     * @deprecated this method is obsolete, please use the new tsParticles.loadJSON
+     * @param tagId the particles container element id
+     * @param pathConfigJson the json path to use in the GET request
+     * @param callback called after the [[Container]] is loaded and it will be passed as a parameter
+     */
     load(tagId: string, pathConfigJson: string, callback: (container?: Container) => void): void;
+    /**
+     * Adds an additional click handler to all the loaded [[Container]] objects.
+     * @deprecated this method is obsolete, please use the new tsParticles.setOnClickHandler
+     * @param callback the function called after the click event is fired
+     */
     setOnClickHandler(callback: EventListenerOrEventListenerObject): void;
 }
 declare const initPjs: (main: Main) => {

package/browser/pjs.js

@@ -1,7 +1,21 @@
 const initPjs = (main) => {
+    /**
+     * Loads the provided options to create a [[Container]] object.
+     * @deprecated this method is obsolete, please use the new tsParticles.load
+     * @param tagId the particles container element id
+     * @param options the options object to initialize the [[Container]]
+     */
     const particlesJS = (tagId, options) => {
         return main.load(tagId, options);
     };
+    /**
+     * Loads the provided json with a GET request.
+     * The content will be used to create a [[Container]] object.
+     * @deprecated this method is obsolete, please use the new tsParticles.loadJSON
+     * @param tagId the particles container element id
+     * @param pathConfigJson the json path to use in the GET request
+     * @param callback called after the [[Container]] is loaded and it will be passed as a parameter
+     */
     particlesJS.load = (tagId, pathConfigJson, callback) => {
         main.loadJSON(tagId, pathConfigJson)
             .then((container) => {
@@ -13,9 +27,18 @@ const initPjs = (main) => {
             callback(undefined);
         });
     };
+    /**
+     * Adds an additional click handler to all the loaded [[Container]] objects.
+     * @deprecated this method is obsolete, please use the new tsParticles.setOnClickHandler
+     * @param callback the function called after the click event is fired
+     */
     particlesJS.setOnClickHandler = (callback) => {
         main.setOnClickHandler(callback);
     };
+    /**
+     * All the [[Container]] objects loaded
+     * @deprecated this method is obsolete, please use the new tsParticles.dom
+     */
     const pJSDom = main.dom();
     return { particlesJS, pJSDom };
 };

package/browser/slim.d.ts

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

package/browser/slim.js

@@ -1,56 +1,48 @@
 import { loadCircleShape } from "./Shapes/Circle";
-import { loadImageShape } from "./Shapes/Image";
-import { loadLineShape } from "./Shapes/Line";
-import { loadPolygonShape } from "./Shapes/Polygon";
-import { loadSquareShape } from "./Shapes/Square";
-import { loadStarShape } from "./Shapes/Star";
-import { loadTextShape } from "./Shapes/Text";
-import { loadAngleUpdater } from "./Updaters/Angle";
-import { loadColorUpdater } from "./Updaters/Color";
 import { loadLifeUpdater } from "./Updaters/Life";
+import { loadExternalConnectInteraction } from "./Interactions/External/Connect";
 import { loadOpacityUpdater } from "./Updaters/Opacity";
-import { loadSizeUpdater } from "./Updaters/Size";
-import { loadStrokeColorUpdater } from "./Updaters/StrokeColor";
-import { loadOutModesUpdater } from "./Updaters/OutModes";
-import { loadRollUpdater } from "./Updaters/Roll";
-import { loadTiltUpdater } from "./Updaters/Tilt";
-import { loadWobbleUpdater } from "./Updaters/Wobble";
-import { loadExternalAttractInteraction } from "./Interactions/External/Attract";
-import { loadExternalBounceInteraction } from "./Interactions/External/Bounce";
+import { loadImageShape } from "./Shapes/Image";
+import { loadPolygonShape } from "./Shapes/Polygon";
 import { loadExternalBubbleInteraction } from "./Interactions/External/Bubble";
-import { loadExternalConnectInteraction } from "./Interactions/External/Connect";
+import { loadExternalAttractInteraction } from "./Interactions/External/Attract";
 import { loadExternalGrabInteraction } from "./Interactions/External/Grab";
-import { loadExternalRepulseInteraction } from "./Interactions/External/Repulse";
-import { loadExternalTrailInteraction } from "./Interactions/External/Trail";
+import { loadStarShape } from "./Shapes/Star";
 import { loadParticlesAttractInteraction } from "./Interactions/Particles/Attract";
+import { loadSquareShape } from "./Shapes/Square";
+import { loadStrokeColorUpdater } from "./Updaters/StrokeColor";
+import { loadColorUpdater } from "./Updaters/Color";
 import { loadParticlesCollisionsInteraction } from "./Interactions/Particles/Collisions";
+import { loadAngleUpdater } from "./Updaters/Angle";
+import { loadOutModesUpdater } from "./Updaters/OutModes";
+import { loadExternalRepulseInteraction } from "./Interactions/External/Repulse";
+import { loadLineShape } from "./Shapes/Line";
+import { loadExternalBounceInteraction } from "./Interactions/External/Bounce";
+import { loadTextShape } from "./Shapes/Text";
 import { loadParticlesLinksInteraction } from "./Interactions/Particles/Links";
-export function loadSlim(tsParticles) {
-    loadExternalAttractInteraction(tsParticles);
-    loadExternalBounceInteraction(tsParticles);
-    loadExternalBubbleInteraction(tsParticles);
-    loadExternalConnectInteraction(tsParticles);
-    loadExternalGrabInteraction(tsParticles);
-    loadExternalRepulseInteraction(tsParticles);
-    loadExternalTrailInteraction(tsParticles);
-    loadParticlesAttractInteraction(tsParticles);
-    loadParticlesCollisionsInteraction(tsParticles);
-    loadParticlesLinksInteraction(tsParticles);
-    loadCircleShape(tsParticles);
-    loadImageShape(tsParticles);
-    loadLineShape(tsParticles);
-    loadPolygonShape(tsParticles);
-    loadSquareShape(tsParticles);
-    loadStarShape(tsParticles);
-    loadTextShape(tsParticles);
-    loadLifeUpdater(tsParticles);
-    loadOpacityUpdater(tsParticles);
-    loadSizeUpdater(tsParticles);
-    loadAngleUpdater(tsParticles);
-    loadTiltUpdater(tsParticles);
-    loadRollUpdater(tsParticles);
-    loadWobbleUpdater(tsParticles);
-    loadColorUpdater(tsParticles);
-    loadStrokeColorUpdater(tsParticles);
-    loadOutModesUpdater(tsParticles);
+import { loadSizeUpdater } from "./Updaters/Size";
+export async function loadSlim(tsParticles) {
+    await loadExternalAttractInteraction(tsParticles);
+    await loadExternalBounceInteraction(tsParticles);
+    await loadExternalBubbleInteraction(tsParticles);
+    await loadExternalConnectInteraction(tsParticles);
+    await loadExternalGrabInteraction(tsParticles);
+    await loadExternalRepulseInteraction(tsParticles);
+    await loadParticlesAttractInteraction(tsParticles);
+    await loadParticlesCollisionsInteraction(tsParticles);
+    await loadParticlesLinksInteraction(tsParticles);
+    await loadCircleShape(tsParticles);
+    await loadImageShape(tsParticles);
+    await loadLineShape(tsParticles);
+    await loadPolygonShape(tsParticles);
+    await loadSquareShape(tsParticles);
+    await loadStarShape(tsParticles);
+    await loadTextShape(tsParticles);
+    await loadLifeUpdater(tsParticles);
+    await loadOpacityUpdater(tsParticles);
+    await loadSizeUpdater(tsParticles);
+    await loadAngleUpdater(tsParticles);
+    await loadColorUpdater(tsParticles);
+    await loadStrokeColorUpdater(tsParticles);
+    await loadOutModesUpdater(tsParticles);
 }

package/esm/Core/Canvas.js

@@ -72,23 +72,21 @@ export 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/esm/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/esm/Core/Container.js

@@ -23,6 +23,7 @@ export class Container {
         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);
@@ -49,17 +50,6 @@ export class Container {
         this.density = 1;
         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);
-            }
-        }
-        this._options.load(this._sourceOptions);
         this.eventListeners = new EventListeners(this);
         if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
             this.intersectionObserver = new IntersectionObserver((entries) => this.intersectionManager(entries));
@@ -202,6 +192,7 @@ export 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;
@@ -306,10 +297,28 @@ export 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();
+        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);
+            }
+        }
+        this._options.load(this._sourceOptions);
         this.actualOptions = new Options();
         this.actualOptions.load(this._options);
         this.retina.init();

package/esm/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 {};