tsparticles 1.42.2 → 1.43.0

package/browser/Core/Utils/Vector3d.js

@@ -1,54 +1,134 @@
 import { Vector } from "./Vector";
+/**
+ * @category Utils
+ */
 export class Vector3d extends Vector {
-    constructor(x, y, z) {
-        super(x, y);
-        this.z = z === undefined ? x.z : z;
+    /**
+     * Vector constructor, creating an instance with the given coordinates
+     * @param xOrCoords X coordinate or the whole [[ICoordinates]] object
+     * @param y Y coordinate
+     * @param z Z coordinate
+     * @protected
+     */
+    constructor(xOrCoords, y, z) {
+        super(xOrCoords, y);
+        if (typeof xOrCoords !== "number" && xOrCoords) {
+            this.z = xOrCoords.z;
+        }
+        else if (z !== undefined) {
+            this.z = z;
+        }
+        else {
+            throw new Error("tsParticles - Vector not initialized correctly");
+        }
     }
+    /**
+     * Clones the given vector
+     * @param source the vector to clone
+     * @returns a new vector instance, created from the given one
+     */
     static clone(source) {
         return Vector3d.create(source.x, source.y, source.z);
     }
+    /**
+     * Creates a new vector instance
+     * @param x X coordinate
+     * @param y Y coordinate
+     * @param z Z coordinate
+     * @returns the new vector created
+     */
     static create(x, y, z) {
         return new Vector3d(x, y, z);
     }
+    /**
+     * A new vector, with coordinates in the origin point
+     */
+    static get origin() {
+        return Vector3d.create(0, 0, 0);
+    }
+    /**
+     * Adds the current and the given vector together, without modifying them
+     * @param v the vector used for the sum operation
+     * @returns the sum vector
+     */
     add(v) {
         return v instanceof Vector3d ? Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z) : super.add(v);
     }
+    /**
+     * Adds the given vector to the current one, modifying it
+     * @param v the vector to add to the current one
+     */
     addTo(v) {
         super.addTo(v);
         if (v instanceof Vector3d) {
             this.z += v.z;
         }
     }
+    /**
+     * Subtracts the current and the given vector together, without modifying them
+     * @param v the vector used for the subtract operation
+     * @returns the subtracted vector
+     */
     sub(v) {
         return v instanceof Vector3d ? Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z) : super.sub(v);
     }
+    /**
+     * Subtracts the given vector from the current one, modifying it
+     * @param v the vector to subtract from the current one
+     */
     subFrom(v) {
         super.subFrom(v);
         if (v instanceof Vector3d) {
             this.z -= v.z;
         }
     }
+    /**
+     * Multiplies the given scalar and the current vector together, without modifying it
+     * @param n the scalar value to multiply to the vector
+     * @returns the multiplied vector
+     */
     mult(n) {
         return Vector3d.create(this.x * n, this.y * n, this.z * n);
     }
+    /**
+     * Multiplies the given scalar to the current vector, modifying it
+     * @param n the scalar value to multiply to the vector
+     */
     multTo(n) {
         super.multTo(n);
         this.z *= n;
     }
+    /**
+     * Divides the given scalar and the current vector together, without modifying it
+     * @param n the scalar value to divide from the current vector
+     */
     div(n) {
         return Vector3d.create(this.x / n, this.y / n, this.z / n);
     }
+    /**
+     * Divides the given scalar from the current vector, modifying it
+     * @param n the scalar value to divide from the current vector
+     */
     divTo(n) {
         super.divTo(n);
         this.z /= n;
     }
+    /**
+     * Copies the current vector, cloning it
+     * @returns the cloned current vector
+     */
     copy() {
         return Vector3d.clone(this);
     }
+    /**
+     * Set the vector to the specified velocity
+     * @param v the Vector used to set the current vector
+     */
     setTo(v) {
         super.setTo(v);
-        if (v instanceof Vector3d) {
-            this.z = v.z;
+        const v3d = v;
+        if (v3d.z !== undefined) {
+            this.z = v3d.z;
         }
     }
 }

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

@@ -1,12 +1,43 @@
-import { Circle, Constants, ExternalInteractorBase, Vector } from "../../../Core";
-import { calcEasing, clamp, getDistances, isInArray } from "../../../Utils";
+import { calcEasing, clamp, getDistances } from "../../../Utils/NumberUtils";
+import { Circle } from "../../../Core/Utils/Circle";
+import { Constants } from "../../../Core/Utils/Constants";
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+import { Vector } from "../../../Core/Utils/Vector";
+import { isInArray } from "../../../Utils/Utils";
 /**
- * Particle attract manager
+ * Particle external attract manager
  * @category Interactions
  */
 export class Attractor extends ExternalInteractorBase {
     constructor(container) {
         super(container);
+        if (!container.attract) {
+            container.attract = { particles: [] };
+        }
+        this.handleClickMode = (mode) => {
+            const options = this.container.actualOptions;
+            if (mode !== "attract" /* attract */) {
+                return;
+            }
+            if (!container.attract) {
+                container.attract = { particles: [] };
+            }
+            container.attract.clicking = true;
+            container.attract.count = 0;
+            for (const particle of container.attract.particles) {
+                particle.velocity.setTo(particle.initialVelocity);
+            }
+            container.attract.particles = [];
+            container.attract.finish = false;
+            setTimeout(() => {
+                if (!container.destroyed) {
+                    if (!container.attract) {
+                        container.attract = { particles: [] };
+                    }
+                    container.attract.clicking = false;
+                }
+            }, options.interactivity.modes.attract.duration * 1000);
+        };
     }
     isEnabled() {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events;
@@ -51,6 +82,9 @@ export class Attractor extends ExternalInteractorBase {
     }
     clickAttract() {
         const container = this.container;
+        if (!container.attract) {
+            container.attract = { particles: [] };
+        }
         if (!container.attract.finish) {
             if (!container.attract.count) {
                 container.attract.count = 0;

package/browser/Interactions/External/Bounce/Bouncer.js

@@ -1,5 +1,9 @@
-import { Circle, Constants, ExternalInteractorBase, Rectangle, Vector } from "../../../Core";
-import { calculateBounds, circleBounce, circleBounceDataFromParticle, divModeExecute, isDivModeEnabled, isInArray, rectBounce, } from "../../../Utils";
+import { calculateBounds, circleBounce, circleBounceDataFromParticle, divModeExecute, isDivModeEnabled, isInArray, rectBounce, } from "../../../Utils/Utils";
+import { Circle } from "../../../Core/Utils/Circle";
+import { Constants } from "../../../Core/Utils/Constants";
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+import { Rectangle } from "../../../Core/Utils/Rectangle";
+import { Vector } from "../../../Core/Utils/Vector";
 export class Bouncer extends ExternalInteractorBase {
     constructor(container) {
         super(container);
@@ -28,8 +32,7 @@ export class Bouncer extends ExternalInteractorBase {
         }
     }
     singleSelectorBounce(selector, div) {
-        const container = this.container;
-        const query = document.querySelectorAll(selector);
+        const container = this.container, query = document.querySelectorAll(selector);
         if (!query.length) {
             return;
         }
@@ -37,8 +40,7 @@ export class Bouncer extends ExternalInteractorBase {
             const elem = item, pxRatio = container.retina.pixelRatio, pos = {
                 x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
                 y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
-            }, radius = (elem.offsetWidth / 2) * pxRatio, tolerance = 10 * pxRatio;
-            const area = div.type === "circle" /* circle */
+            }, radius = (elem.offsetWidth / 2) * pxRatio, tolerance = 10 * pxRatio, area = div.type === "circle" /* circle */
                 ? new Circle(pos.x, pos.y, radius + tolerance)
                 : new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
             this.processBounce(pos, radius, area);

package/browser/Interactions/External/Bubble/Bubbler.js

@@ -1,5 +1,10 @@
-import { Circle, Constants, ExternalInteractorBase, Rectangle } from "../../../Core";
-import { clamp, colorMix, colorToHsl, divMode, divModeExecute, getDistance, getRangeMax, isDivModeEnabled, isInArray, itemFromArray, rgbToHsl, } from "../../../Utils";
+import { clamp, getDistance, getRangeMax } from "../../../Utils/NumberUtils";
+import { colorMix, colorToHsl, rgbToHsl } from "../../../Utils/ColorUtils";
+import { divMode, divModeExecute, isDivModeEnabled, isInArray, itemFromArray } from "../../../Utils/Utils";
+import { Circle } from "../../../Core/Utils/Circle";
+import { Constants } from "../../../Core/Utils/Constants";
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+import { Rectangle } from "../../../Core/Utils/Rectangle";
 function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
     if (modeValue >= optionsValue) {
         const value = particleValue + (modeValue - optionsValue) * ratio;
@@ -17,6 +22,18 @@ function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
 export class Bubbler extends ExternalInteractorBase {
     constructor(container) {
         super(container);
+        if (!container.bubble) {
+            container.bubble = {};
+        }
+        this.handleClickMode = (mode) => {
+            if (mode !== "bubble" /* bubble */) {
+                return;
+            }
+            if (!container.bubble) {
+                container.bubble = {};
+            }
+            container.bubble.clicking = true;
+        };
     }
     isEnabled() {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble" /* bubble */, divs);
@@ -90,6 +107,9 @@ export class Bubbler extends ExternalInteractorBase {
         if (bubbleParam === particlesParam) {
             return;
         }
+        if (!container.bubble) {
+            container.bubble = {};
+        }
         if (!container.bubble.durationEnd) {
             if (distMouse <= bubbleDistance) {
                 const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
@@ -127,6 +147,9 @@ export class Bubbler extends ExternalInteractorBase {
         if (!mouseClickPos) {
             return;
         }
+        if (!container.bubble) {
+            container.bubble = {};
+        }
         const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mouseClickPos, distance);
         for (const particle of query) {
             if (!container.bubble.clicking) {

package/browser/Interactions/External/Connect/Connector.js

@@ -1,5 +1,5 @@
-import { ExternalInteractorBase } from "../../../Core";
-import { isInArray } from "../../../Utils";
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+import { isInArray } from "../../../Utils/Utils";
 /**
  * Particle connection manager
  * @category Interactions

package/browser/Interactions/External/Grab/Grabber.js

@@ -1,5 +1,8 @@
-import { Constants, ExternalInteractorBase } from "../../../Core";
-import { getDistance, getLinkColor, getLinkRandomColor, isInArray } from "../../../Utils";
+import { getLinkColor, getLinkRandomColor } from "../../../Utils/ColorUtils";
+import { Constants } from "../../../Core/Utils/Constants";
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+import { getDistance } from "../../../Utils/NumberUtils";
+import { isInArray } from "../../../Utils/Utils";
 /**
  * Particle grab manager
  * @category Interactions
@@ -18,35 +21,37 @@ export class Grabber extends ExternalInteractorBase {
     async interact() {
         var _a;
         const container = this.container, options = container.actualOptions, interactivity = options.interactivity;
-        if (interactivity.events.onHover.enable && container.interactivity.status === Constants.mouseMoveEvent) {
-            const mousePos = container.interactivity.mouse.position;
-            if (!mousePos) {
-                return;
+        if (!interactivity.events.onHover.enable || container.interactivity.status !== Constants.mouseMoveEvent) {
+            return;
+        }
+        const mousePos = container.interactivity.mouse.position;
+        if (!mousePos) {
+            return;
+        }
+        const distance = container.retina.grabModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance);
+        for (const particle of query) {
+            /*
+               draw a line between the cursor and the particle
+               if the distance between them is under the config distance
+            */
+            const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos);
+            if (pointDistance > distance) {
+                continue;
             }
-            const distance = container.retina.grabModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance);
-            for (const particle of query) {
-                /*
-                   draw a line between the cursor and the particle
-                   if the distance between them is under the config distance
-                */
-                const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos);
-                if (pointDistance <= distance) {
-                    const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
-                    if (opacityLine <= 0) {
-                        continue;
-                    }
-                    const optColor = (_a = grabLineOptions.color) !== null && _a !== void 0 ? _a : particle.options.links.color;
-                    if (!container.particles.grabLineColor) {
-                        const linksOptions = options.interactivity.modes.grab.links;
-                        container.particles.grabLineColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
-                    }
-                    const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor);
-                    if (!colorLine) {
-                        return;
-                    }
-                    container.canvas.drawGrabLine(particle, colorLine, opacityLine, mousePos);
-                }
+            const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
+            if (opacityLine <= 0) {
+                continue;
+            }
+            const optColor = (_a = grabLineOptions.color) !== null && _a !== void 0 ? _a : particle.options.links.color;
+            if (!container.particles.grabLineColor) {
+                const linksOptions = options.interactivity.modes.grab.links;
+                container.particles.grabLineColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
+            }
+            const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor);
+            if (!colorLine) {
+                return;
             }
+            container.canvas.drawGrabLine(particle, colorLine, opacityLine, mousePos);
         }
     }
 }

package/browser/Interactions/External/Pause/Pauser.js

@@ -0,0 +1,31 @@
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+/**
+ * Particle attract manager
+ * @category Interactions
+ */
+export class Pauser extends ExternalInteractorBase {
+    constructor(container) {
+        super(container);
+        this.handleClickMode = (mode) => {
+            if (mode !== "pause" /* pause */) {
+                return;
+            }
+            const container = this.container;
+            if (container.getAnimationStatus()) {
+                container.pause();
+            }
+            else {
+                container.play();
+            }
+        };
+    }
+    isEnabled() {
+        return true;
+    }
+    reset() {
+        // do nothing
+    }
+    async interact() {
+        // do nothing
+    }
+}

package/browser/Interactions/External/Pause/index.js

@@ -0,0 +1,4 @@
+import { Pauser } from "./Pauser";
+export async function loadExternalPauseInteraction(engine) {
+    await engine.addInteractor("externalPause", (container) => new Pauser(container));
+}

package/browser/Interactions/External/Push/Pusher.js

@@ -0,0 +1,35 @@
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+import { itemFromArray } from "../../../Utils/Utils";
+/**
+ * Particle attract manager
+ * @category Interactions
+ */
+export class Pusher extends ExternalInteractorBase {
+    constructor(container) {
+        super(container);
+        this.handleClickMode = (mode) => {
+            if (mode !== "push" /* push */) {
+                return;
+            }
+            const container = this.container;
+            const options = container.actualOptions;
+            const pushNb = options.interactivity.modes.push.quantity;
+            if (pushNb <= 0) {
+                return;
+            }
+            const pushOptions = options.interactivity.modes.push;
+            const group = itemFromArray([undefined, ...pushOptions.groups]);
+            const groupOptions = group !== undefined ? container.actualOptions.particles.groups[group] : undefined;
+            container.particles.push(pushNb, container.interactivity.mouse, groupOptions, group);
+        };
+    }
+    isEnabled() {
+        return true;
+    }
+    reset() {
+        // do nothing
+    }
+    async interact() {
+        // do nothing
+    }
+}

package/browser/Interactions/External/Push/index.js

@@ -0,0 +1,4 @@
+import { Pusher } from "./Pusher";
+export async function loadExternalPushInteraction(engine) {
+    await engine.addInteractor("externalPush", (container) => new Pusher(container));
+}

package/browser/Interactions/External/Remove/Remover.js

@@ -0,0 +1,28 @@
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+/**
+ * Particle attract manager
+ * @category Interactions
+ */
+export class Remover extends ExternalInteractorBase {
+    constructor(container) {
+        super(container);
+        this.handleClickMode = (mode) => {
+            if (mode !== "remove" /* remove */) {
+                return;
+            }
+            const container = this.container;
+            const options = container.actualOptions;
+            const removeNb = options.interactivity.modes.remove.quantity;
+            container.particles.removeQuantity(removeNb);
+        };
+    }
+    isEnabled() {
+        return true;
+    }
+    reset() {
+        // do nothing
+    }
+    async interact() {
+        // do nothing
+    }
+}

package/browser/Interactions/External/Remove/index.js

@@ -0,0 +1,4 @@
+import { Remover } from "./Remover";
+export async function loadExternalRemoveInteraction(engine) {
+    await engine.addInteractor("externalRemove", (container) => new Remover(container));
+}

package/browser/Interactions/External/Repulse/Repulser.js

@@ -1,5 +1,10 @@
-import { Circle, Constants, ExternalInteractorBase, Rectangle, Vector } from "../../../Core";
-import { calcEasing, clamp, divMode, divModeExecute, getDistances, isDivModeEnabled, isInArray } from "../../../Utils";
+import { calcEasing, clamp, getDistances } from "../../../Utils/NumberUtils";
+import { divMode, divModeExecute, isDivModeEnabled, isInArray } from "../../../Utils/Utils";
+import { Circle } from "../../../Core/Utils/Circle";
+import { Constants } from "../../../Core/Utils/Constants";
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+import { Rectangle } from "../../../Core/Utils/Rectangle";
+import { Vector } from "../../../Core/Utils/Vector";
 /**
  * Particle repulse manager
  * @category Interactions
@@ -7,6 +12,33 @@ import { calcEasing, clamp, divMode, divModeExecute, getDistances, isDivModeEnab
 export class Repulser extends ExternalInteractorBase {
     constructor(container) {
         super(container);
+        if (!container.repulse) {
+            container.repulse = { particles: [] };
+        }
+        this.handleClickMode = (mode) => {
+            const options = this.container.actualOptions;
+            if (mode !== "repulse" /* repulse */) {
+                return;
+            }
+            if (!container.repulse) {
+                container.repulse = { particles: [] };
+            }
+            container.repulse.clicking = true;
+            container.repulse.count = 0;
+            for (const particle of container.repulse.particles) {
+                particle.velocity.setTo(particle.initialVelocity);
+            }
+            container.repulse.particles = [];
+            container.repulse.finish = false;
+            setTimeout(() => {
+                if (!container.destroyed) {
+                    if (!container.repulse) {
+                        container.repulse = { particles: [] };
+                    }
+                    container.repulse.clicking = false;
+                }
+            }, options.interactivity.modes.repulse.duration * 1000);
+        };
     }
     isEnabled() {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv, divRepulse = isDivModeEnabled("repulse" /* repulse */, divs);
@@ -64,6 +96,9 @@ export class Repulser extends ExternalInteractorBase {
     }
     clickRepulse() {
         const container = this.container;
+        if (!container.repulse) {
+            container.repulse = { particles: [] };
+        }
         if (!container.repulse.finish) {
             if (!container.repulse.count) {
                 container.repulse.count = 0;

package/browser/Interactions/External/Trail/TrailMaker.js

@@ -1,5 +1,5 @@
-import { ExternalInteractorBase } from "../../../Core";
-import { isInArray } from "../../../Utils";
+import { ExternalInteractorBase } from "../../../Core/Utils/ExternalInteractorBase";
+import { isInArray } from "../../../Utils/Utils";
 /**
  * @category Interactions
  */

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

@@ -1,5 +1,5 @@
-import { ParticlesInteractorBase } from "../../../Core";
-import { getDistances } from "../../../Utils";
+import { ParticlesInteractorBase } from "../../../Core/Utils/ParticlesInteractorBase";
+import { getDistances } from "../../../Utils/NumberUtils";
 /**
  * @category Interactions
  */

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

@@ -1,5 +1,6 @@
-import { circleBounce, circleBounceDataFromParticle, clamp, getDistance } from "../../../Utils";
-import { ParticlesInteractorBase } from "../../../Core";
+import { circleBounce, circleBounceDataFromParticle } from "../../../Utils/Utils";
+import { clamp, getDistance } from "../../../Utils/NumberUtils";
+import { ParticlesInteractorBase } from "../../../Core/Utils/ParticlesInteractorBase";
 function bounce(p1, p2) {
     circleBounce(circleBounceDataFromParticle(p1), circleBounceDataFromParticle(p2));
 }
@@ -36,10 +37,7 @@ export class Collider extends ParticlesInteractorBase {
         // do nothing
     }
     async interact(p1) {
-        const container = this.container;
-        const pos1 = p1.getPosition();
-        const radius1 = p1.getRadius();
-        const query = container.particles.quadTree.queryCircle(pos1, radius1 * 2);
+        const container = this.container, pos1 = p1.getPosition(), radius1 = p1.getRadius(), query = container.particles.quadTree.queryCircle(pos1, radius1 * 2);
         for (const p2 of query) {
             if (p1 === p2 ||
                 !p2.options.collisions.enable ||
@@ -52,9 +50,7 @@ export class Collider extends ParticlesInteractorBase {
             if (Math.round(pos1.z) !== Math.round(pos2.z)) {
                 continue;
             }
-            const dist = getDistance(pos1, pos2);
-            const radius2 = p2.getRadius();
-            const distP = radius1 + radius2;
+            const dist = getDistance(pos1, pos2), radius2 = p2.getRadius(), distP = radius1 + radius2;
             if (dist <= distP) {
                 this.resolveCollision(p1, p2);
             }
@@ -62,23 +58,19 @@ export class Collider extends ParticlesInteractorBase {
     }
     resolveCollision(p1, p2) {
         switch (p1.options.collisions.mode) {
-            case "absorb" /* absorb */: {
+            case "absorb" /* absorb */:
                 this.absorb(p1, p2);
                 break;
-            }
-            case "bounce" /* bounce */: {
+            case "bounce" /* bounce */:
                 bounce(p1, p2);
                 break;
-            }
-            case "destroy" /* destroy */: {
+            case "destroy" /* destroy */:
                 destroy(p1, p2);
                 break;
-            }
         }
     }
     absorb(p1, p2) {
-        const container = this.container;
-        const fps = container.fpsLimit / 1000;
+        const container = this.container, fps = container.fpsLimit / 1000;
         if (p1.getRadius() === undefined && p2.getRadius() !== undefined) {
             p1.destroy();
         }