tsparticles 1.35.4 → 1.37.2

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/Canvas.d.ts

@@ -1,23 +1,52 @@
 import type { Container } from "./Container";
 import type { Particle } from "./Particle";
 import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
+/**
+ * Canvas manager
+ * @category Core
+ */
 export declare class Canvas {
     private readonly container;
+    /**
+     * The particles canvas
+     */
     element?: HTMLCanvasElement;
+    /**
+     * The particles canvas dimension
+     */
     readonly size: IDimension;
     resizeFactor?: IDimension;
+    /**
+     * The particles canvas context
+     */
     private context;
     private generatedCanvas;
     private coverColor?;
     private trailFillColor?;
     private originalStyle?;
+    /**
+     * Constructor of canvas manager
+     * @param container the parent container
+     */
     constructor(container: Container);
+    /**
+     * Initializes the canvas element
+     */
     init(): void;
     loadCanvas(canvas: HTMLCanvasElement, generatedCanvas?: boolean): void;
     destroy(): void;
+    /**
+     * Paints the canvas background
+     */
     paint(): void;
+    /**
+     * Clears the canvas content
+     */
     clear(): void;
     windowResize(): void;
+    /**
+     * Calculates the size of the canvas
+     */
     resize(): void;
     drawConnectLine(p1: IParticle, p2: IParticle): void;
     drawGrabLine(particle: IParticle, lineColor: IRgb, opacity: number, mousePos: ICoordinates): void;

package/browser/Core/Canvas.js

@@ -1,6 +1,14 @@
 import { colorToHsl, colorToRgb, Constants, deepExtend, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, getStyleFromHsl, getStyleFromRgb, gradient, paintBase, } from "../Utils";
 import { clear } from "../Utils";
+/**
+ * Canvas manager
+ * @category Core
+ */
 export class Canvas {
+    /**
+     * Constructor of canvas manager
+     * @param container the parent container
+     */
     constructor(container) {
         this.container = container;
         this.size = {
@@ -10,6 +18,10 @@ export class Canvas {
         this.context = null;
         this.generatedCanvas = false;
     }
+    /* ---------- tsParticles functions - canvas ------------ */
+    /**
+     * Initializes the canvas element
+     */
     init() {
         this.resize();
         this.initStyle();
@@ -44,6 +56,9 @@ export class Canvas {
             clear(ctx, this.size);
         });
     }
+    /**
+     * Paints the canvas background
+     */
     paint() {
         const options = this.container.actualOptions;
         this.draw((ctx) => {
@@ -56,6 +71,9 @@ export class Canvas {
             }
         });
     }
+    /**
+     * Clears the canvas content
+     */
     clear() {
         const options = this.container.actualOptions;
         const trail = options.particles.move.trail;
@@ -72,24 +90,26 @@ 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();
+        /* density particles enabled */
         container.particles.setDensity();
         for (const [, plugin] of container.plugins) {
             if (plugin.resize !== undefined) {
                 plugin.resize();
             }
         }
+        if (needsRefresh) {
+            container.refresh();
+        }
     }
+    /**
+     * Calculates the size of the canvas
+     */
     resize() {
         if (!this.element) {
             return;

package/browser/Core/Container.d.ts

@@ -1,3 +1,7 @@
+/**
+ * [[include:Container.md]]
+ * @packageDocumentation
+ */
 import { Canvas } from "./Canvas";
 import { Particles } from "./Particles";
 import { Retina } from "./Retina";
@@ -8,9 +12,20 @@ import { Options } from "../Options/Classes/Options";
 import { Particle } from "./Particle";
 import { Vector } from "./Particle/Vector";
 import { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
+/**
+ * The object loaded into an HTML element, it'll contain options loaded and all data to let everything working
+ * [[include:Container.md]]
+ * @category Core
+ */
 export declare class Container {
     readonly id: string;
+    /**
+     * Check if the particles container is started
+     */
     started: boolean;
+    /**
+     * Check if the particles container is destroyed, if so it's not recommended using it
+     */
     destroyed: boolean;
     density: number;
     duration: number;
@@ -23,42 +38,124 @@ export declare class Container {
     repulse: IRepulse;
     attract: IAttract;
     zLayers: number;
+    responsiveMaxWidth?: number;
+    /**
+     * The options used by the container, it's a full [[Options]] object
+     */
     get options(): Options;
     get sourceOptions(): RecursivePartial<IOptions> | undefined;
+    /**
+     * The options loaded by the container, it's a full [[Options]] object
+     */
     actualOptions: Options;
     readonly retina: Retina;
     readonly canvas: Canvas;
+    /**
+     * The particles manager
+     */
     readonly particles: Particles;
     readonly drawer: FrameManager;
+    /**
+     * All the shape drawers used by the container
+     */
     readonly drawers: Map<string, IShapeDrawer>;
+    /**
+     * All the plugins used by the container
+     */
     readonly plugins: Map<string, IContainerPlugin>;
     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?;
+    /**
+     * This is the core class, create an instance to have a new working particles manager
+     * @constructor
+     * @param id the id to identify this instance
+     * @param sourceOptions the options to load
+     * @param presets all the presets to load with options
+     */
     constructor(id: string, sourceOptions?: RecursivePartial<IOptions>, ...presets: string[]);
+    /**
+     * Starts animations and resume from pause
+     * @param force
+     */
     play(force?: boolean): void;
+    /**
+     * Pauses animations
+     */
     pause(): void;
+    /**
+     * Draws a frame
+     */
     draw(force: boolean): void;
+    /**
+     * Gets the animation status
+     * @returns `true` is playing, `false` is paused
+     */
     getAnimationStatus(): boolean;
+    /**
+     * Customise path generation
+     * @deprecated Use the new setPath
+     * @param noiseOrGenerator the [[IMovePathGenerator]] object or a function that generates a [[Vector]] object from [[Particle]]
+     * @param init the [[IMovePathGenerator]] init function, if the first parameter is a generator function
+     * @param update the [[IMovePathGenerator]] update function, if the first parameter is a generator function
+     */
     setNoise(noiseOrGenerator?: IMovePathGenerator | ((particle: Particle) => Vector), init?: () => void, update?: () => void): void;
+    /**
+     * Customise path generation
+     * @param pathOrGenerator the [[IMovePathGenerator]] object or a function that generates a [[Vector]] object from [[Particle]]
+     * @param init the [[IMovePathGenerator]] init function, if the first parameter is a generator function
+     * @param update the [[IMovePathGenerator]] update function, if the first parameter is a generator function
+     */
     setPath(pathOrGenerator?: IMovePathGenerator | ((particle: Particle) => Vector), init?: () => void, update?: () => void): void;
+    /**
+     * Destroys the current container, invalidating it
+     */
     destroy(): void;
+    /**
+     * @deprecated this method is deprecated, please use the exportImage method
+     * @param callback The callback to handle the image
+     */
     exportImg(callback: BlobCallback): void;
+    /**
+     * Exports the current canvas image, `background` property of `options` won't be rendered because it's css related
+     * @param callback The callback to handle the image
+     * @param type The exported image type
+     * @param quality The exported image quality
+     */
     exportImage(callback: BlobCallback, type?: string, quality?: number): void;
+    /**
+     * Exports the current configuration using `options` property
+     * @returns a JSON string created from `options` property
+     */
     exportConfiguration(): string;
+    /**
+     * Restarts the container, just a [[stop]]/[[start]] alias
+     */
     refresh(): Promise<void>;
     reset(): Promise<void>;
+    /**
+     * Stops the container, opposite to `start`. Clears some resources and stops events.
+     */
     stop(): void;
+    /**
+     * Loads the given theme, overriding the options
+     * @param name the theme name, if `undefined` resets the default options or the default theme
+     */
     loadTheme(name?: string): Promise<void>;
+    /**
+     * Starts the container, initializes what are needed to create animations and event handling
+     */
     start(): Promise<void>;
     addClickHandler(callback: (evt: Event, particles?: Particle[]) => void): void;
-    updateActualOptions(): void;
-    private init;
+    updateActualOptions(): boolean;
+    init(): Promise<void>;
     private intersectionManager;
 }