tsparticles 1.35.2 → 1.37.0

package/browser/Interactions/Particles/Attract/Attractor.js

@@ -1,5 +1,8 @@
 import { getDistances } from "../../../Utils";
 import { ParticlesInteractorBase } from "../../../Core/ParticlesInteractorBase";
+/**
+ * @category Interactions
+ */
 export class Attractor extends ParticlesInteractorBase {
     constructor(container) {
         super(container);
@@ -22,5 +25,6 @@ export class Attractor extends ParticlesInteractorBase {
         return particle.options.move.attract.enable;
     }
     reset() {
+        // do nothing
     }
 }

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

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

package/browser/Interactions/Particles/Collisions/Collider.d.ts

@@ -1,6 +1,9 @@
 import type { Particle } from "../../../Core/Particle";
 import type { Container } from "../../../Core/Container";
 import { ParticlesInteractorBase } from "../../../Core/ParticlesInteractorBase";
+/**
+ * @category Interactions
+ */
 export declare class Collider extends ParticlesInteractorBase {
     constructor(container: Container);
     isEnabled(particle: Particle): boolean;

package/browser/Interactions/Particles/Collisions/Collider.js

@@ -23,6 +23,9 @@ function destroy(p1, p2) {
         }
     }
 }
+/**
+ * @category Interactions
+ */
 export class Collider extends ParticlesInteractorBase {
     constructor(container) {
         super(container);
@@ -31,6 +34,7 @@ export class Collider extends ParticlesInteractorBase {
         return particle.options.collisions.enable;
     }
     reset() {
+        // do nothing
     }
     interact(p1) {
         const container = this.container;

package/browser/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/browser/Interactions/Particles/Collisions/index.js

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

package/browser/Interactions/Particles/Links/ILink.d.ts

@@ -1,8 +1,14 @@
 import type { LinkParticle } from "./LinkParticle";
+/**
+ * @category Interfaces
+ */
 export interface ILink {
     destination: LinkParticle;
     opacity: number;
 }
+/**
+ * @category Interfaces
+ */
 export interface ILinkTriangle {
     vertices: LinkParticle[];
     opacity: number;

package/browser/Interactions/Particles/Links/LinkInstance.js

@@ -92,6 +92,14 @@ export class LinkInstance {
         container.canvas.draw((ctx) => {
             var _a, _b;
             let colorLine;
+            /*
+             * particles connecting line color:
+             *
+             *  random: in blink mode : in every frame refresh the color would change
+             *          hence resulting blinking of lines
+             *  mid: in consent mode: sample particles color and get a mid level color
+             *                        from those two for the connecting line color
+             */
             const twinkle = p1.options.twinkle.lines;
             if (twinkle.enable) {
                 const twinkleFreq = twinkle.frequency;

package/browser/Interactions/Particles/Links/Linker.js

@@ -36,6 +36,7 @@ export class Linker extends ParticlesInteractorBase {
         return particle.options.links.enable;
     }
     reset() {
+        // do nothing
     }
     interact(p1) {
         var _a;
@@ -73,6 +74,7 @@ export class Linker extends ParticlesInteractorBase {
             if (distance > optDistance) {
                 return;
             }
+            /* draw a line between p1 and p2 */
             const opacityLine = (1 - distance / optDistance) * optOpacity;
             this.setColor(p1);
             p1.links.push({

package/browser/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/browser/Interactions/Particles/Links/index.js

@@ -1,9 +1,9 @@
 import { Linker } from "./Linker";
 import { loadPlugin } from "./plugin";
-export function loadInteraction(tsParticles) {
-    tsParticles.addInteractor("particlesLinks", (container) => new Linker(container));
+export async function loadInteraction(tsParticles) {
+    await tsParticles.addInteractor("particlesLinks", (container) => new Linker(container));
 }
-export function loadParticlesLinksInteraction(tsParticles) {
-    loadInteraction(tsParticles);
-    loadPlugin(tsParticles);
+export async function loadParticlesLinksInteraction(tsParticles) {
+    await loadInteraction(tsParticles);
+    await loadPlugin(tsParticles);
 }

package/browser/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/browser/Interactions/Particles/Links/plugin.js

@@ -10,9 +10,10 @@ class Plugin {
         return true;
     }
     loadOptions() {
+        // do nothing
     }
 }
-export function loadPlugin(tsParticles) {
+export async function loadPlugin(tsParticles) {
     const plugin = new Plugin();
-    tsParticles.addPlugin(plugin);
+    await tsParticles.addPlugin(plugin);
 }

package/browser/Options/Classes/AnimatableColor.d.ts

@@ -3,6 +3,10 @@ import { OptionsColor } from "./OptionsColor";
 import type { RecursivePartial, SingleOrMultiple } from "../../Types";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader";
 import { HslAnimation } from "./HslAnimation";
+/**
+ * [[include:Options/Particles/Color.md]]
+ * @category Options
+ */
 export declare class AnimatableColor extends OptionsColor implements IAnimatableColor, IOptionLoader<IAnimatableColor> {
     animation: HslAnimation;
     constructor();

package/browser/Options/Classes/AnimatableColor.js

@@ -1,5 +1,9 @@
 import { OptionsColor } from "./OptionsColor";
 import { HslAnimation } from "./HslAnimation";
+/**
+ * [[include:Options/Particles/Color.md]]
+ * @category Options
+ */
 export class AnimatableColor extends OptionsColor {
     constructor() {
         super();

package/browser/Options/Classes/Background/Background.d.ts

@@ -2,6 +2,10 @@ import type { IBackground } from "../../Interfaces/Background/IBackground";
 import type { RecursivePartial } from "../../../Types";
 import { OptionsColor } from "../OptionsColor";
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader";
+/**
+ * [[include:Options/Background.md]]
+ * @category Options
+ */
 export declare class Background implements IBackground, IOptionLoader<IBackground> {
     color: OptionsColor;
     image: string;

package/browser/Options/Classes/Background/Background.js

@@ -1,4 +1,8 @@
 import { OptionsColor } from "../OptionsColor";
+/**
+ * [[include:Options/Background.md]]
+ * @category Options
+ */
 export class Background {
     constructor() {
         this.color = new OptionsColor();

package/browser/Options/Classes/BackgroundMask/BackgroundMask.d.ts

@@ -2,9 +2,23 @@ import type { IBackgroundMask } from "../../Interfaces/BackgroundMask/IBackgroun
 import type { RecursivePartial } from "../../../Types";
 import { BackgroundMaskCover } from "./BackgroundMaskCover";
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader";
+/**
+ * [[include:Options/BackgroundMask.md]]
+ * @category Options
+ */
 export declare class BackgroundMask implements IBackgroundMask, IOptionLoader<IBackgroundMask> {
+    /**
+     * Canvas composite operation
+     * values here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
+     */
     composite: string;
+    /**
+     * Background covering color
+     */
     cover: BackgroundMaskCover;
+    /**
+     * Background mask enabling options
+     */
     enable: boolean;
     constructor();
     load(data?: RecursivePartial<IBackgroundMask>): void;

package/browser/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -1,4 +1,8 @@
 import { BackgroundMaskCover } from "./BackgroundMaskCover";
+/**
+ * [[include:Options/BackgroundMask.md]]
+ * @category Options
+ */
 export class BackgroundMask {
     constructor() {
         this.composite = "destination-out";

package/browser/Options/Classes/BackgroundMask/BackgroundMaskCover.d.ts

@@ -2,6 +2,9 @@ import type { RecursivePartial } from "../../../Types";
 import { OptionsColor } from "../OptionsColor";
 import type { IBackgroundMaskCover } from "../../Interfaces/BackgroundMask/IBackgroundMaskCover";
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader";
+/**
+ * @category Options
+ */
 export declare class BackgroundMaskCover implements IBackgroundMaskCover, IOptionLoader<IBackgroundMaskCover> {
     color: OptionsColor;
     opacity: number;

package/browser/Options/Classes/BackgroundMask/BackgroundMaskCover.js

@@ -1,4 +1,7 @@
 import { OptionsColor } from "../OptionsColor";
+/**
+ * @category Options
+ */
 export class BackgroundMaskCover {
     constructor() {
         this.color = new OptionsColor();

package/browser/Options/Classes/ColorAnimation.d.ts

@@ -1,6 +1,9 @@
 import type { IColorAnimation } from "../Interfaces/IColorAnimation";
 import type { RangeValue, RecursivePartial } from "../../Types";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader";
+/**
+ * @category Options
+ */
 export declare class ColorAnimation implements IColorAnimation, IOptionLoader<IColorAnimation> {
     count: number;
     enable: boolean;

package/browser/Options/Classes/ColorAnimation.js

@@ -1,4 +1,7 @@
 import { setRangeValue } from "../../Utils";
+/**
+ * @category Options
+ */
 export class ColorAnimation {
     constructor() {
         this.count = 0;

package/browser/Options/Classes/FullScreen/FullScreen.d.ts

@@ -1,8 +1,24 @@
 import type { IFullScreen } from "../../Interfaces/FullScreen/IFullScreen";
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader";
 import type { RecursivePartial } from "../../../Types";
+/**
+ * The options to set the particles in the background using CSS `fixed` position
+ * The [[zIndex]] property sets the background CSS `z-index` property
+ * [[include:Options/FullScreen.md]]
+ * @category Options
+ */
 export declare class FullScreen implements IFullScreen, IOptionLoader<IFullScreen> {
+    /**
+     * This property sets the canvas to a full window size acting like a background, the most common configuration. The default value is `false` since many already have different configurations.
+     *
+     * This is really helpful since there's no need to write CSS code to have a full size tsParticles instance.
+     */
     enable: boolean;
+    /**
+     * This is the CSS `z-index` property set to the canvas.
+     *
+     * If the `z-index` is less than `0` the mouse interactions works only with the `interactivity.detectsOn` set to `window`.
+     */
     zIndex: number;
     constructor();
     load(data?: RecursivePartial<IFullScreen>): void;

package/browser/Options/Classes/FullScreen/FullScreen.js

@@ -1,7 +1,13 @@
+/**
+ * The options to set the particles in the background using CSS `fixed` position
+ * The [[zIndex]] property sets the background CSS `z-index` property
+ * [[include:Options/FullScreen.md]]
+ * @category Options
+ */
 export class FullScreen {
     constructor() {
-        this.enable = false;
-        this.zIndex = -1;
+        this.enable = true;
+        this.zIndex = 0;
     }
     load(data) {
         if (!data) {

package/browser/Options/Classes/Interactivity/Events/ClickEvent.d.ts

@@ -2,8 +2,18 @@ import type { IClickEvent } from "../../../Interfaces/Interactivity/Events/IClic
 import { ClickMode } from "../../../../Enums";
 import type { RecursivePartial, SingleOrMultiple } from "../../../../Types";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
+/**
+ * [[include:Options/Interactivity/Click.md]]
+ * @category Options
+ */
 export declare class ClickEvent implements IClickEvent, IOptionLoader<IClickEvent> {
+    /**
+     * The click event handler enabling setting
+     */
     enable: boolean;
+    /**
+     * Click mode values described in [[ClickMode]], an array of these values is also valid
+     */
     mode: SingleOrMultiple<ClickMode | keyof typeof ClickMode | string>;
     constructor();
     load(data?: RecursivePartial<IClickEvent>): void;

package/browser/Options/Classes/Interactivity/Events/ClickEvent.js

@@ -1,3 +1,7 @@
+/**
+ * [[include:Options/Interactivity/Click.md]]
+ * @category Options
+ */
 export class ClickEvent {
     constructor() {
         this.enable = false;

package/browser/Options/Classes/Interactivity/Events/DivEvent.d.ts

@@ -2,15 +2,52 @@ import type { IDivEvent } from "../../../Interfaces/Interactivity/Events/IDivEve
 import { DivMode, DivType } from "../../../../Enums";
 import type { RecursivePartial, SingleOrMultiple } from "../../../../Types";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
+/**
+ * [[include:Options/Interactivity/Div.md]]
+ * @category Options
+ */
 export declare class DivEvent implements IDivEvent, IOptionLoader<IDivEvent> {
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new selectors
+     */
     get elementId(): SingleOrMultiple<string>;
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new selectors
+     * @param value
+     */
     set elementId(value: SingleOrMultiple<string>);
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new selectors
+     */
     get el(): SingleOrMultiple<string>;
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new selectors
+     * @param value
+     */
     set el(value: SingleOrMultiple<string>);
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new ids
+     */
     get ids(): SingleOrMultiple<string>;
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new ids
+     * @param value
+     */
     set ids(value: SingleOrMultiple<string>);
     selectors: SingleOrMultiple<string>;
+    /**
+     * The div event handler enabling mode
+     */
     enable: boolean;
+    /**
+     * Div mode values described in [[DivMode]], an array of these values is also valid.
+     */
     mode: SingleOrMultiple<DivMode | keyof typeof DivMode | string>;
     type: DivType;
     constructor();

package/browser/Options/Classes/Interactivity/Events/DivEvent.js

@@ -1,4 +1,8 @@
 import { DivType } from "../../../../Enums";
+/**
+ * [[include:Options/Interactivity/Div.md]]
+ * @category Options
+ */
 export class DivEvent {
     constructor() {
         this.selectors = [];
@@ -6,23 +10,52 @@ export class DivEvent {
         this.mode = [];
         this.type = DivType.circle;
     }
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new selectors
+     */
     get elementId() {
         return this.ids;
     }
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new selectors
+     * @param value
+     */
     set elementId(value) {
         this.ids = value;
     }
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new selectors
+     */
     get el() {
         return this.elementId;
     }
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new selectors
+     * @param value
+     */
     set el(value) {
         this.elementId = value;
     }
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new ids
+     */
     get ids() {
         return this.selectors instanceof Array
             ? this.selectors.map((t) => t.replace("#", ""))
             : this.selectors.replace("#", "");
+        // this is the best we can do, if a non-id selector is used the old property won't work
+        // but ids is deprecated so who cares.
     }
+    /**
+     * The element id to detect the event
+     * @deprecated this property is obsolete, please use the new ids
+     * @param value
+     */
     set ids(value) {
         this.selectors = value instanceof Array ? value.map((t) => `#${t}`) : `#${value}`;
     }

package/browser/Options/Classes/Interactivity/Events/Events.d.ts

@@ -4,12 +4,43 @@ import { DivEvent } from "./DivEvent";
 import { HoverEvent } from "./HoverEvent";
 import type { RecursivePartial, SingleOrMultiple } from "../../../../Types";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
+/**
+ * [[include:Options/Interactivity/Events.md]]
+ * @category Options
+ */
 export declare class Events implements IEvents, IOptionLoader<IEvents> {
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onClick
+     */
     get onclick(): ClickEvent;
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onClick
+     * @param value
+     */
     set onclick(value: ClickEvent);
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onDiv
+     */
     get ondiv(): SingleOrMultiple<DivEvent>;
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onDiv
+     * @param value
+     */
     set ondiv(value: SingleOrMultiple<DivEvent>);
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onHover
+     */
     get onhover(): HoverEvent;
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onHover
+     * @param value
+     */
     set onhover(value: HoverEvent);
     onClick: ClickEvent;
     onDiv: SingleOrMultiple<DivEvent>;

package/browser/Options/Classes/Interactivity/Events/Events.js

@@ -1,6 +1,10 @@
 import { ClickEvent } from "./ClickEvent";
 import { DivEvent } from "./DivEvent";
 import { HoverEvent } from "./HoverEvent";
+/**
+ * [[include:Options/Interactivity/Events.md]]
+ * @category Options
+ */
 export class Events {
     constructor() {
         this.onClick = new ClickEvent();
@@ -8,21 +12,48 @@ export class Events {
         this.onHover = new HoverEvent();
         this.resize = true;
     }
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onClick
+     */
     get onclick() {
         return this.onClick;
     }
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onClick
+     * @param value
+     */
     set onclick(value) {
         this.onClick = value;
     }
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onDiv
+     */
     get ondiv() {
         return this.onDiv;
     }
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onDiv
+     * @param value
+     */
     set ondiv(value) {
         this.onDiv = value;
     }
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onHover
+     */
     get onhover() {
         return this.onHover;
     }
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new onHover
+     * @param value
+     */
     set onhover(value) {
         this.onHover = value;
     }

package/browser/Options/Classes/Interactivity/Events/HoverEvent.d.ts

@@ -3,6 +3,10 @@ import { HoverMode } from "../../../../Enums";
 import { Parallax } from "./Parallax";
 import type { RecursivePartial, SingleOrMultiple } from "../../../../Types";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
+/**
+ * [[include:Options/Interactivity/Hover.md]]
+ * @category Options
+ */
 export declare class HoverEvent implements IHoverEvent, IOptionLoader<IHoverEvent> {
     enable: boolean;
     mode: SingleOrMultiple<HoverMode | keyof typeof HoverMode | string>;

package/browser/Options/Classes/Interactivity/Events/HoverEvent.js

@@ -1,4 +1,8 @@
 import { Parallax } from "./Parallax";
+/**
+ * [[include:Options/Interactivity/Hover.md]]
+ * @category Options
+ */
 export class HoverEvent {
     constructor() {
         this.enable = false;

package/browser/Options/Classes/Interactivity/Events/Parallax.d.ts

@@ -1,6 +1,9 @@
 import type { IParallax } from "../../../Interfaces/Interactivity/Events/IParallax";
 import type { RecursivePartial } from "../../../../Types";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
+/**
+ * @category Options
+ */
 export declare class Parallax implements IParallax, IOptionLoader<IParallax> {
     enable: boolean;
     force: number;

package/browser/Options/Classes/Interactivity/Events/Parallax.js

@@ -1,3 +1,6 @@
+/**
+ * @category Options
+ */
 export class Parallax {
     constructor() {
         this.enable = false;

package/browser/Options/Classes/Interactivity/Interactivity.d.ts

@@ -4,8 +4,21 @@ import { Events } from "./Events/Events";
 import { Modes } from "./Modes/Modes";
 import type { RecursivePartial } from "../../../Types";
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader";
+/**
+ * [[include:Options/Interactivity.md]]
+ * @category Options
+ */
 export declare class Interactivity implements IInteractivity, IOptionLoader<IInteractivity> {
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new detectsOn
+     */
     get detect_on(): InteractivityDetect | keyof typeof InteractivityDetect;
+    /**
+     *
+     * @deprecated this property is obsolete, please use the new detectsOn
+     * @param value
+     */
     set detect_on(value: InteractivityDetect | keyof typeof InteractivityDetect);
     detectsOn: InteractivityDetect | keyof typeof InteractivityDetect;
     events: Events;