tsparticles 1.35.4 → 1.37.2

package/browser/Utils/Constants.js

@@ -1,5 +1,12 @@
+/**
+ * Project's constants
+ * @category Utils
+ */
 export class Constants {
 }
+/**
+ * Particles canvas element class name
+ */
 Constants.canvasClass = "tsparticles-canvas-el";
 Constants.randomColorValue = "random";
 Constants.midColorValue = "mid";

package/browser/Utils/EventListeners.d.ts

@@ -1,4 +1,8 @@
 import type { Container } from "../Core/Container";
+/**
+ * Particles container event listeners manager
+ * @category Utils
+ */
 export declare class EventListeners {
     private readonly container;
     private readonly mouseMoveHandler;
@@ -16,16 +20,44 @@ export declare class EventListeners {
     private canPush;
     private resizeTimeout?;
     private resizeObserver?;
+    /**
+     * Events listener constructor
+     * @param container the calling container
+     */
     constructor(container: Container);
+    /**
+     * Adding all listeners
+     */
     addListeners(): void;
+    /**
+     * Removing all listeners
+     */
     removeListeners(): void;
+    /**
+     * Initializing event listeners
+     */
     private manageListeners;
     private handleWindowResize;
     private handleVisibilityChange;
     private mouseDown;
+    /**
+     * Mouse/Touch move event
+     * @param e the event arguments
+     */
     private mouseTouchMove;
+    /**
+     * Mouse/Touch event finish
+     */
     private mouseTouchFinish;
+    /**
+     * Mouse/Touch click/tap event
+     * @param e the click event arguments
+     */
     private mouseTouchClick;
+    /**
+     * Mouse/Touch click/tap event implementation
+     * @param e the click event arguments
+     */
     private doMouseTouchClick;
     private handleThemeChange;
     private handleClickMode;

package/browser/Utils/EventListeners.js

@@ -17,7 +17,15 @@ function manageListener(element, event, handler, add, options) {
         element.removeEventListener(event, handler, removeOptions);
     }
 }
+/**
+ * Particles container event listeners manager
+ * @category Utils
+ */
 export class EventListeners {
+    /**
+     * Events listener constructor
+     * @param container the calling container
+     */
     constructor(container) {
         this.container = container;
         this.canPush = true;
@@ -34,18 +42,28 @@ export class EventListeners {
         this.themeChangeHandler = (e) => this.handleThemeChange(e);
         this.resizeHandler = () => this.handleWindowResize();
     }
+    /**
+     * Adding all listeners
+     */
     addListeners() {
         this.manageListeners(true);
     }
+    /**
+     * Removing all listeners
+     */
     removeListeners() {
         this.manageListeners(false);
     }
+    /**
+     * Initializing event listeners
+     */
     manageListeners(add) {
         var _a;
         const container = this.container;
         const options = container.actualOptions;
         const detectType = options.interactivity.detectsOn;
         let mouseLeaveEvent = Constants.mouseLeaveEvent;
+        /* events target element */
         if (detectType === InteractivityDetect.window) {
             container.interactivity.element = window;
             mouseLeaveEvent = Constants.mouseOutEvent;
@@ -62,15 +80,20 @@ export class EventListeners {
             manageListener(mediaMatch, "change", this.themeChangeHandler, add);
         }
         const interactivityEl = container.interactivity.element;
+        /* detect mouse pos - on hover / click event */
         if (!interactivityEl) {
             return;
         }
         const html = interactivityEl;
         if (options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable) {
+            /* el on mousemove */
             manageListener(interactivityEl, Constants.mouseMoveEvent, this.mouseMoveHandler, add);
+            /* el on touchstart */
             manageListener(interactivityEl, Constants.touchStartEvent, this.touchStartHandler, add);
+            /* el on touchmove */
             manageListener(interactivityEl, Constants.touchMoveEvent, this.touchMoveHandler, add);
             if (!options.interactivity.events.onClick.enable) {
+                /* el on touchend */
                 manageListener(interactivityEl, Constants.touchEndEvent, this.touchEndHandler, add);
             }
             else {
@@ -78,7 +101,9 @@ export class EventListeners {
                 manageListener(interactivityEl, Constants.mouseUpEvent, this.mouseUpHandler, add);
                 manageListener(interactivityEl, Constants.mouseDownEvent, this.mouseDownHandler, add);
             }
+            /* el on onmouseleave */
             manageListener(interactivityEl, mouseLeaveEvent, this.mouseLeaveHandler, add);
+            /* el on touchcancel */
             manageListener(interactivityEl, Constants.touchCancelEvent, this.touchCancelHandler, add);
         }
         if (container.canvas.element) {
@@ -148,6 +173,10 @@ export class EventListeners {
             mouse.downPosition = mouse.position;
         }
     }
+    /**
+     * Mouse/Touch move event
+     * @param e the event arguments
+     */
     mouseTouchMove(e) {
         var _a, _b, _c, _d, _e, _f, _g;
         const container = this.container;
@@ -217,6 +246,9 @@ export class EventListeners {
         container.interactivity.mouse.position = pos;
         container.interactivity.status = Constants.mouseMoveEvent;
     }
+    /**
+     * Mouse/Touch event finish
+     */
     mouseTouchFinish() {
         const interactivity = this.container.interactivity;
         if (interactivity === undefined) {
@@ -230,6 +262,10 @@ export class EventListeners {
         mouse.inside = false;
         mouse.clicking = false;
     }
+    /**
+     * Mouse/Touch click/tap event
+     * @param e the click event arguments
+     */
     mouseTouchClick(e) {
         const container = this.container;
         const options = container.actualOptions;
@@ -253,6 +289,10 @@ export class EventListeners {
         }
         mouse.clicking = false;
     }
+    /**
+     * Mouse/Touch click/tap event implementation
+     * @param e the click event arguments
+     */
     doMouseTouchClick(e) {
         const container = this.container;
         const options = container.actualOptions;

package/browser/Utils/NumberUtils.d.ts

@@ -3,7 +3,20 @@ import type { ICoordinates } from "../Core/Interfaces";
 import { EasingType, MoveDirection, MoveDirectionAlt } from "../Enums";
 import { RangeValue } from "../Types";
 import { Vector } from "../Core/Particle/Vector";
+/**
+ * Clamps a number between a minimum and maximum value
+ * @param num the source number
+ * @param min the minimum value
+ * @param max the maximum value
+ */
 export declare function clamp(num: number, min: number, max: number): number;
+/**
+ *
+ * @param comp1
+ * @param comp2
+ * @param weight1
+ * @param weight2
+ */
 export declare function mix(comp1: number, comp2: number, weight1: number, weight2: number): number;
 export declare function randomInRange(r: RangeValue): number;
 export declare function getRangeValue(value: RangeValue): number;
@@ -11,13 +24,27 @@ export declare function getRangeMin(value: RangeValue): number;
 export declare function getRangeMax(value: RangeValue): number;
 export declare function setRangeValue(source: RangeValue, value?: number): RangeValue;
 export declare function getValue(options: IValueWithRandom): number;
+/**
+ * Gets the distance between two coordinates
+ * @param pointA the first coordinate
+ * @param pointB the second coordinate
+ */
 export declare function getDistances(pointA: ICoordinates, pointB: ICoordinates): {
     dx: number;
     dy: number;
     distance: number;
 };
+/**
+ * Gets the distance between two coordinates
+ * @param pointA the first coordinate
+ * @param pointB the second coordinate
+ */
 export declare function getDistance(pointA: ICoordinates, pointB: ICoordinates): number;
 export declare function getParticleDirectionAngle(direction: MoveDirection | keyof typeof MoveDirection | MoveDirectionAlt | number): number;
+/**
+ * Get Particle base velocity
+ * @param direction the direction to use for calculating the velocity
+ */
 export declare function getParticleBaseVelocity(direction: number): Vector;
 export declare function collisionVelocity(v1: Vector, v2: Vector, m1: number, m2: number): Vector;
 export declare function calcEasing(value: number, type: EasingType): number;

package/browser/Utils/NumberUtils.js

@@ -1,8 +1,21 @@
 import { EasingType, MoveDirection } from "../Enums";
 import { Vector } from "../Core/Particle/Vector";
+/**
+ * Clamps a number between a minimum and maximum value
+ * @param num the source number
+ * @param min the minimum value
+ * @param max the maximum value
+ */
 export function clamp(num, min, max) {
     return Math.min(Math.max(num, min), max);
 }
+/**
+ *
+ * @param comp1
+ * @param comp2
+ * @param weight1
+ * @param weight2
+ */
 export function mix(comp1, comp2, weight1, weight2) {
     return Math.floor((comp1 * weight1 + comp2 * weight2) / (weight1 + weight2));
 }
@@ -40,11 +53,21 @@ export function getValue(options) {
     const { enable, minimumValue } = typeof random === "boolean" ? { enable: random, minimumValue: 0 } : random;
     return enable ? getRangeValue(setRangeValue(options.value, minimumValue)) : getRangeValue(options.value);
 }
+/**
+ * Gets the distance between two coordinates
+ * @param pointA the first coordinate
+ * @param pointB the second coordinate
+ */
 export function getDistances(pointA, pointB) {
     const dx = pointA.x - pointB.x;
     const dy = pointA.y - pointB.y;
     return { dx: dx, dy: dy, distance: Math.sqrt(dx * dx + dy * dy) };
 }
+/**
+ * Gets the distance between two coordinates
+ * @param pointA the first coordinate
+ * @param pointB the second coordinate
+ */
 export function getDistance(pointA, pointB) {
     return getDistances(pointA, pointB).distance;
 }
@@ -76,6 +99,10 @@ export function getParticleDirectionAngle(direction) {
         }
     }
 }
+/**
+ * Get Particle base velocity
+ * @param direction the direction to use for calculating the velocity
+ */
 export function getParticleBaseVelocity(direction) {
     const baseVelocity = Vector.origin;
     baseVelocity.length = 1;

package/browser/Utils/Plugins.d.ts

@@ -3,6 +3,9 @@ import type { RecursivePartial } from "../Types";
 import type { IOptions } from "../Options/Interfaces/IOptions";
 import type { Options } from "../Options/Classes/Options";
 import type { IContainerPlugin, IInteractor, IMovePathGenerator, IParticleUpdater, IPlugin, IShapeDrawer } from "../Core/Interfaces";
+/**
+ * @category Utils
+ */
 export declare class Plugins {
     static getPlugin(plugin: string): IPlugin | undefined;
     static addPlugin(plugin: IPlugin): void;
@@ -15,8 +18,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/browser/Utils/Plugins.js

@@ -6,6 +6,9 @@ const updaters = new Map();
 const presets = new Map();
 const drawers = new Map();
 const pathGenerators = new Map();
+/**
+ * @category Utils
+ */
 export class Plugins {
     static getPlugin(plugin) {
         return plugins.find((t) => t.id === plugin);
@@ -57,9 +60,9 @@ export 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);
         }
@@ -68,9 +71,9 @@ export 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/browser/Utils/Point.d.ts

@@ -1,5 +1,8 @@
 import type { ICoordinates } from "../Core/Interfaces";
 import type { Particle } from "../Core/Particle";
+/**
+ * @category Utils
+ */
 export declare class Point {
     readonly position: ICoordinates;
     readonly particle: Particle;

package/browser/Utils/Point.js

@@ -1,3 +1,6 @@
+/**
+ * @category Utils
+ */
 export class Point {
     constructor(position, particle) {
         this.position = position;

package/browser/Utils/QuadTree.d.ts

@@ -4,6 +4,9 @@ import type { Point } from "./Point";
 import { Rectangle } from "./Rectangle";
 import type { ICoordinates, IDimension } from "../Core/Interfaces";
 import type { Container } from "../Core/Container";
+/**
+ * @category Utils
+ */
 export declare class QuadTree {
     readonly rectangle: Rectangle;
     readonly capacity: number;

package/browser/Utils/QuadTree.js

@@ -2,6 +2,9 @@ import { Rectangle } from "./Rectangle";
 import { Circle } from "./Circle";
 import { CircleWarp } from "./CircleWarp";
 import { getDistance } from "./NumberUtils";
+/**
+ * @category Utils
+ */
 export class QuadTree {
     constructor(rectangle, capacity) {
         this.rectangle = rectangle;

package/browser/Utils/Range.d.ts

@@ -1,4 +1,7 @@
 import type { ICoordinates } from "../Core/Interfaces";
+/**
+ * @category Utils
+ */
 export declare abstract class Range {
     readonly position: ICoordinates;
     protected constructor(x: number, y: number);

package/browser/Utils/Range.js

@@ -1,3 +1,6 @@
+/**
+ * @category Utils
+ */
 export class Range {
     constructor(x, y) {
         this.position = {

package/browser/Utils/Rectangle.d.ts

@@ -1,6 +1,9 @@
 import { Range } from "./Range";
 import type { IDimension } from "../Core/Interfaces/IDimension";
 import type { ICoordinates } from "../Core/Interfaces/ICoordinates";
+/**
+ * @category Utils
+ */
 export declare class Rectangle extends Range {
     readonly size: IDimension;
     constructor(x: number, y: number, width: number, height: number);

package/browser/Utils/Rectangle.js

@@ -1,4 +1,7 @@
 import { Range } from "./Range";
+/**
+ * @category Utils
+ */
 export class Rectangle extends Range {
     constructor(x, y, width, height) {
         super(x, y);

package/browser/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;
@@ -22,6 +21,11 @@ declare global {
 export declare function isSsr(): boolean;
 export declare function animate(): (callback: FrameRequestCallback) => number;
 export declare function cancelAnimation(): (handle: number) => void;
+/**
+ * Check if a value is equal to the destination, if same type, or is in the provided array
+ * @param value the value to check
+ * @param array the data array or single value
+ */
 export declare function isInArray<T>(value: T, array: SingleOrMultiple<T>): boolean;
 export declare function loadFont(character: ICharacterShape): Promise<void>;
 export declare function arrayRandomIndex<T>(array: T[]): number;

package/browser/Utils/Utils.js

@@ -28,6 +28,7 @@ function checkSelector(element, selectors) {
         return element.matches(selectors);
     }
 }
+/* ---------- global functions - vendors ------------ */
 export function isSsr() {
     return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
 }
@@ -51,6 +52,11 @@ export function cancelAnimation() {
             window.msCancelRequestAnimationFrame ||
             window.clearTimeout)(handle);
 }
+/**
+ * Check if a value is equal to the destination, if same type, or is in the provided array
+ * @param value the value to check
+ * @param array the data array or single value
+ */
 export function isInArray(value, array) {
     return value === array || (array instanceof Array && array.indexOf(value) > -1);
 }
@@ -60,6 +66,7 @@ export async function loadFont(character) {
         await document.fonts.load(`${(_a = character.weight) !== null && _a !== void 0 ? _a : "400"} 36px '${(_b = character.font) !== null && _b !== void 0 ? _b : "Verdana"}'`);
     }
     catch (_c) {
+        // ignores any error
     }
 }
 export function arrayRandomIndex(array) {
@@ -187,16 +194,23 @@ export function circleBounce(p1, p2) {
     const pos2 = p2.position;
     const xDist = pos2.x - pos1.x;
     const yDist = pos2.y - pos1.y;
+    // Prevent accidental overlap of particles
     if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) {
+        // Grab angle between the two colliding particles
         const angle = -Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x);
+        // Store mass in var for better readability in collision equation
         const m1 = p1.mass;
         const m2 = p2.mass;
+        // Velocity before equation
         const u1 = p1.velocity.rotate(angle);
         const u2 = p2.velocity.rotate(angle);
+        // Velocity after 1d collision equation
         const v1 = collisionVelocity(u1, u2, m1, m2);
         const v2 = collisionVelocity(u2, u1, m1, m2);
+        // Final velocity after rotating axis back to original location
         const vFinal1 = v1.rotate(-angle);
         const vFinal2 = v2.rotate(-angle);
+        // Swap particle velocities for realistic bounce effect
         p1.velocity.x = vFinal1.x * p1.factor.x;
         p1.velocity.y = vFinal1.y * p1.factor.y;
         p2.velocity.x = vFinal2.x * p2.factor.x;

package/browser/full.d.ts

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

package/browser/full.js

@@ -1,10 +1,18 @@
+import { loadSlim } from "./slim";
+import { loadExternalTrailInteraction } from "./Interactions/External/Trail";
+import { loadTiltUpdater } from "./Updaters/Tilt";
+import { loadWobbleUpdater } from "./Updaters/Wobble";
 import { loadAbsorbersPlugin } from "./Plugins/Absorbers/plugin";
 import { loadEmittersPlugin } from "./Plugins/Emitters/plugin";
 import { loadPolygonMaskPlugin } from "./Plugins/PolygonMask/plugin";
-import { loadSlim } from "./slim";
-export function loadFull(tsParticles) {
-    loadSlim(tsParticles);
-    loadAbsorbersPlugin(tsParticles);
-    loadEmittersPlugin(tsParticles);
-    loadPolygonMaskPlugin(tsParticles);
+import { loadRollUpdater } from "./Updaters/Roll";
+export async function loadFull(tsParticles) {
+    await loadSlim(tsParticles);
+    await loadExternalTrailInteraction(tsParticles);
+    await loadRollUpdater(tsParticles);
+    await loadTiltUpdater(tsParticles);
+    await loadWobbleUpdater(tsParticles);
+    await loadAbsorbersPlugin(tsParticles);
+    await loadEmittersPlugin(tsParticles);
+    await loadPolygonMaskPlugin(tsParticles);
 }

package/browser/index.d.ts

@@ -6,7 +6,6 @@ import type { IEmitterOptions } from "./Plugins/Emitters/Options/Interfaces/IEmi
 import type { IPolygonMaskOptions } from "./Plugins/PolygonMask/Options/Interfaces/IPolygonMaskOptions";
 import type { RecursivePartial } from "./Types";
 import type { IParticle } from "./Core/Interfaces";
-import { loadFull } from "./full";
 declare const tsParticles: Main;
 declare const particlesJS: import("./pjs").IParticlesJS, pJSDom: import("./Core/Container").Container[];
 export * from "./Core/Particle/Vector";
@@ -15,7 +14,7 @@ export * from "./Enums";
 export * from "./Plugins/Absorbers/Enums";
 export * from "./Plugins/Emitters/Enums";
 export * from "./Plugins/PolygonMask/Enums";
-export { Circle, CircleWarp, Constants, Point, Rectangle, Main, loadFull };
+export { Circle, CircleWarp, Constants, Point, Rectangle, Main };
 export * from "./Utils/CanvasUtils";
 export * from "./Utils/ColorUtils";
 export * from "./Utils/NumberUtils";

package/browser/index.js

@@ -4,15 +4,15 @@ import { Circle, CircleWarp, Constants, Point, Rectangle } from "./Utils";
 import { loadFull } from "./full";
 const tsParticles = new Main();
 tsParticles.init();
-loadFull(tsParticles);
 const { particlesJS, pJSDom } = initPjs(tsParticles);
+loadFull(tsParticles);
 export * from "./Core/Particle/Vector";
 export * from "./Core/Container";
 export * from "./Enums";
 export * from "./Plugins/Absorbers/Enums";
 export * from "./Plugins/Emitters/Enums";
 export * from "./Plugins/PolygonMask/Enums";
-export { Circle, CircleWarp, Constants, Point, Rectangle, Main, loadFull };
+export { Circle, CircleWarp, Constants, Point, Rectangle, Main };
 export * from "./Utils/CanvasUtils";
 export * from "./Utils/ColorUtils";
 export * from "./Utils/NumberUtils";

package/browser/index.slim.d.ts

@@ -3,13 +3,12 @@ import type { IOptions } from "./Options/Interfaces/IOptions";
 import type { RecursivePartial } from "./Types";
 import type { IParticle } from "./Core/Interfaces";
 import { Main } from "./main";
-import { loadSlim } from "./slim";
 declare const tsParticles: Main;
 declare const particlesJS: import("./pjs").IParticlesJS, pJSDom: import("./Core/Container").Container[];
 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/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";