tsparticles 1.42.2 → 1.43.0

package/browser/Core/Particles.js

@@ -10,10 +10,13 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _Particles_engine;
-import { InteractionManager, ParticlesMover, Point, QuadTree, Rectangle } from "./Utils";
-import { getRangeMax, getRangeMin, getRangeValue, randomInRange, setRangeValue } from "../Utils";
+import { calcPositionFromSize, getRangeMax, getRangeMin, getRangeValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils";
+import { InteractionManager } from "./Utils/InteractionManager";
 import { Particle } from "./Particle";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
+import { Point } from "./Utils/Point";
+import { QuadTree } from "./Utils/QuadTree";
+import { Rectangle } from "./Utils/Rectangle";
 /**
  * Particles manager object
  * @category Core
@@ -26,7 +29,6 @@ export class Particles {
         this.nextId = 0;
         this.array = [];
         this.zArray = [];
-        this.mover = new ParticlesMover(container);
         this.limit = 0;
         this.needsSort = false;
         this.lastZIndex = 0;
@@ -38,6 +40,7 @@ export class Particles {
         const canvasSize = this.container.canvas.size;
         this.linksColors = new Map();
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
+        this.movers = __classPrivateFieldGet(this, _Particles_engine, "f").plugins.getMovers(container, true);
         this.updaters = __classPrivateFieldGet(this, _Particles_engine, "f").plugins.getUpdaters(container, true);
     }
     get count() {
@@ -46,8 +49,7 @@ export class Particles {
     /* --------- tsParticles functions - particles ----------- */
     init() {
         var _a;
-        const container = this.container;
-        const options = container.actualOptions;
+        const container = this.container, options = container.actualOptions;
         this.lastZIndex = 0;
         this.needsSort = false;
         this.freqs.links = new Map();
@@ -103,8 +105,7 @@ export class Particles {
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
     }
     async update(delta) {
-        const container = this.container;
-        const particlesToDelete = [];
+        const container = this.container, particlesToDelete = [];
         container.pathGenerator.update();
         for (const [, plugin] of container.plugins) {
             if (plugin.update !== undefined) {
@@ -135,7 +136,11 @@ export class Particles {
                     plugin.particleUpdate(particle, delta);
                 }
             }
-            this.mover.move(particle, delta);
+            for (const mover of this.movers) {
+                if (mover.isEnabled(particle)) {
+                    mover.move(particle, delta);
+                }
+            }
             if (particle.destroyed) {
                 particlesToDelete.push(particle);
                 continue;
@@ -158,11 +163,10 @@ export class Particles {
         delete container.canvas.resizeFactor;
     }
     async draw(delta) {
-        const container = this.container;
+        const container = this.container, canvasSize = this.container.canvas.size;
+        this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
         /* clear canvas */
         container.canvas.clear();
-        const canvasSize = this.container.canvas.size;
-        this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
         /* update each particles param */
         await this.update(delta);
         if (this.needsSort) {
@@ -189,7 +193,6 @@ export class Particles {
         this.array = [];
         this.zArray = [];
     }
-    /* ---------- tsParticles functions - modes events ------------ */
     push(nb, mouse, overrideOptions, group) {
         this.pushing = true;
         for (let i = 0; i < nb; i++) {
@@ -224,8 +227,7 @@ export class Particles {
             options.size.value.max /= factor;
         }
         options.load(splitOptions.particles);
-        const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0;
-        const position = {
+        const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0, position = {
             x: parent.position.x + randomInRange(offset),
             y: parent.position.y + randomInRange(offset),
         };
@@ -276,13 +278,10 @@ export class Particles {
     addManualParticles() {
         const container = this.container, options = container.actualOptions;
         for (const particle of options.manualParticles) {
-            const pos = particle.position
-                ? {
-                    x: (particle.position.x * container.canvas.size.width) / 100,
-                    y: (particle.position.y * container.canvas.size.height) / 100,
-                }
-                : undefined;
-            this.addParticle(pos, particle.options);
+            this.addParticle(calcPositionFromSize({
+                size: container.canvas.size,
+                position: particle.position,
+            }), particle.options);
         }
     }
     setDensity() {
@@ -292,17 +291,15 @@ export class Particles {
         }
         this.applyDensity(options.particles, options.manualParticles.length);
     }
+    handleClickMode(mode) {
+        this.interactionManager.handleClickMode(mode);
+    }
     applyDensity(options, manualCount, group) {
         var _a;
         if (!((_a = options.number.density) === null || _a === void 0 ? void 0 : _a.enable)) {
             return;
         }
-        const numberOptions = options.number;
-        const densityFactor = this.initDensityFactor(numberOptions.density);
-        const optParticlesNumber = numberOptions.value;
-        const optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber;
-        const particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount;
-        const particlesCount = Math.min(this.count, this.array.filter((t) => t.group === group).length);
+        const numberOptions = options.number, densityFactor = this.initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.array.filter((t) => t.group === group).length);
         this.limit = numberOptions.limit * densityFactor;
         if (particlesCount < particlesNumber) {
             this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);

package/browser/Core/Retina.js

@@ -1,4 +1,5 @@
-import { getRangeValue, isSsr } from "../Utils";
+import { getRangeValue } from "../Utils/NumberUtils";
+import { isSsr } from "../Utils/Utils";
 /**
  * @category Core
  */
@@ -10,8 +11,7 @@ export class Retina {
      * Initializes all the values needing a pixel ratio factor (sizes, widths, distances)
      */
     init() {
-        const container = this.container;
-        const options = container.actualOptions;
+        const container = this.container, options = container.actualOptions;
         this.pixelRatio = !options.detectRetina || isSsr() ? 1 : window.devicePixelRatio;
         const motionOptions = this.container.actualOptions.motion;
         if (motionOptions && (motionOptions.disable || motionOptions.reduce.value)) {
@@ -54,9 +54,6 @@ export class Retina {
         this.linksWidth = particles.links.width * ratio;
         this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
         this.maxSpeed = getRangeValue(particles.move.gravity.maxSpeed) * ratio;
-        if (particles.orbit.radius !== undefined) {
-            this.orbitRadius = getRangeValue(particles.orbit.radius) * this.container.retina.pixelRatio;
-        }
         const modes = options.interactivity.modes;
         this.connectModeDistance = modes.connect.distance * ratio;
         this.connectModeRadius = modes.connect.radius * ratio;
@@ -71,19 +68,13 @@ export class Retina {
         }
     }
     initParticle(particle) {
-        const options = particle.options;
-        const ratio = this.pixelRatio;
-        const moveDistance = options.move.distance;
-        const props = particle.retina;
+        const options = particle.options, ratio = this.pixelRatio, moveDistance = options.move.distance, props = particle.retina;
         props.attractDistance = getRangeValue(options.move.attract.distance) * ratio;
         props.linksDistance = options.links.distance * ratio;
         props.linksWidth = options.links.width * ratio;
         props.moveDrift = getRangeValue(options.move.drift) * ratio;
         props.moveSpeed = getRangeValue(options.move.speed) * ratio;
         props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;
-        if (particle.spin) {
-            props.spinAcceleration = getRangeValue(options.move.spin.acceleration) * ratio;
-        }
         const maxDistance = props.maxDistance;
         maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
         maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;

package/browser/Core/Utils/Circle.js

@@ -1,33 +1,40 @@
 import { Range } from "./Range";
-import { getDistance } from "../../Utils";
+import { getDistance } from "../../Utils/NumberUtils";
 /**
  * @category Utils
  */
 export class Circle extends Range {
+    /**
+     * Circle constructor, initialized position and radius
+     * @param x X coordinate of the position
+     * @param y Y coordinate of the position
+     * @param radius Circle's radius
+     */
     constructor(x, y, radius) {
         super(x, y);
         this.radius = radius;
     }
+    /**
+     * Check if the given point is inside the circle
+     * @param point the point to check
+     * @returns true or false, checking if the given point is inside the circle
+     */
     contains(point) {
         return getDistance(point, this.position) <= this.radius;
     }
+    /**
+     * Check if the given range intersects the circle
+     * @param range the range to check
+     * @returns true or false, checking if the range is intersecting with the circle
+     */
     intersects(range) {
-        const rect = range;
-        const circle = range;
-        const pos1 = this.position;
-        const pos2 = range.position;
-        const xDist = Math.abs(pos2.x - pos1.x);
-        const yDist = Math.abs(pos2.y - pos1.y);
-        const r = this.radius;
+        const rect = range, circle = range, pos1 = this.position, pos2 = range.position, xDist = Math.abs(pos2.x - pos1.x), yDist = Math.abs(pos2.y - pos1.y), r = this.radius;
         if (circle.radius !== undefined) {
-            const rSum = r + circle.radius;
-            const dist = Math.sqrt(xDist * xDist + yDist + yDist);
+            const rSum = r + circle.radius, dist = Math.sqrt(xDist * xDist + yDist + yDist);
             return rSum > dist;
         }
         else if (rect.size !== undefined) {
-            const w = rect.size.width;
-            const h = rect.size.height;
-            const edges = Math.pow(xDist - w, 2) + Math.pow(yDist - h, 2);
+            const w = rect.size.width, h = rect.size.height, edges = Math.pow(xDist - w, 2) + Math.pow(yDist - h, 2);
             if (xDist > r + w || yDist > r + h) {
                 return false;
             }

package/browser/Core/Utils/CircleWarp.js

@@ -4,14 +4,23 @@ import { Rectangle } from "./Rectangle";
  * @category Utils
  */
 export class CircleWarp extends Circle {
+    /**
+     * Circle constructor, initialized position and radius
+     * @param x X coordinate of the position
+     * @param y Y coordinate of the position
+     * @param radius Circle's radius
+     * @param canvasSize the canvas size, used for warp formulas
+     */
     constructor(x, y, radius, canvasSize) {
         super(x, y, radius);
         this.canvasSize = canvasSize;
-        this.canvasSize = {
-            height: canvasSize.height,
-            width: canvasSize.width,
-        };
+        this.canvasSize = Object.assign({}, canvasSize);
     }
+    /**
+     * Check if the given point is inside the circle
+     * @param point the point to check
+     * @returns true or false, checking if the given point is inside the circle
+     */
     contains(point) {
         if (super.contains(point)) {
             return true;
@@ -36,13 +45,16 @@ export class CircleWarp extends Circle {
         };
         return super.contains(posSW);
     }
+    /**
+     * Check if the given range intersects the circle
+     * @param range the range to check
+     * @returns true or false, checking if the range is intersecting with the circle
+     */
     intersects(range) {
         if (super.intersects(range)) {
             return true;
         }
-        const rect = range;
-        const circle = range;
-        const newPos = {
+        const rect = range, circle = range, newPos = {
             x: range.position.x - this.canvasSize.width,
             y: range.position.y - this.canvasSize.height,
         };

package/browser/Core/Utils/EventListeners.js

@@ -1,5 +1,13 @@
-import { isSsr, itemFromArray } from "../../Utils";
 import { Constants } from "./Constants";
+import { isSsr } from "../../Utils/Utils";
+/**
+ * Manage the given event listeners
+ * @param element the event listener receiver
+ * @param event the event to listen
+ * @param handler the handler called once the event is triggered
+ * @param add flag for adding or removing the event listener
+ * @param options event listener options object
+ */
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };
@@ -59,9 +67,7 @@ export class EventListeners {
      */
     manageListeners(add) {
         var _a;
-        const container = this.container;
-        const options = container.actualOptions;
-        const detectType = options.interactivity.detectsOn;
+        const container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn;
         let mouseLeaveEvent = Constants.mouseLeaveEvent;
         /* events target element */
         if (detectType === "window" /* window */) {
@@ -147,6 +153,10 @@ export class EventListeners {
             manageListener(document, Constants.visibilityChangeEvent, this.visibilityChangeHandler, add, false);
         }
     }
+    /**
+     * Handles window resize event
+     * @private
+     */
     handleWindowResize() {
         if (this.resizeTimeout) {
             clearTimeout(this.resizeTimeout);
@@ -154,9 +164,12 @@ export class EventListeners {
         }
         this.resizeTimeout = setTimeout(async () => { var _a; return await ((_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize()); }, 500);
     }
+    /**
+     * Handles blur event
+     * @private
+     */
     handleVisibilityChange() {
-        const container = this.container;
-        const options = container.actualOptions;
+        const container = this.container, options = container.actualOptions;
         this.mouseTouchFinish();
         if (!options.pauseOnBlur) {
             return;
@@ -175,6 +188,10 @@ export class EventListeners {
             }
         }
     }
+    /**
+     * Handle mouse down event
+     * @private
+     */
     mouseDown() {
         const interactivity = this.container.interactivity;
         if (interactivity) {
@@ -189,9 +206,8 @@ export class EventListeners {
      */
     mouseTouchMove(e) {
         var _a, _b, _c, _d, _e, _f, _g;
-        const container = this.container;
-        const options = container.actualOptions;
-        if (((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element) === undefined) {
+        const container = this.container, options = container.actualOptions;
+        if (!((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element)) {
             return;
         }
         container.interactivity.mouse.inside = true;
@@ -261,7 +277,7 @@ export class EventListeners {
      */
     mouseTouchFinish() {
         const interactivity = this.container.interactivity;
-        if (interactivity === undefined) {
+        if (!interactivity) {
             return;
         }
         const mouse = interactivity.mouse;
@@ -277,21 +293,20 @@ export class EventListeners {
      * @param e the click event arguments
      */
     mouseTouchClick(e) {
-        const container = this.container;
-        const options = container.actualOptions;
-        const mouse = container.interactivity.mouse;
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse;
         mouse.inside = true;
         let handled = false;
         const mousePosition = mouse.position;
-        if (mousePosition === undefined || !options.interactivity.events.onClick.enable) {
+        if (!mousePosition || !options.interactivity.events.onClick.enable) {
             return;
         }
         for (const [, plugin] of container.plugins) {
-            if (plugin.clickPositionValid !== undefined) {
-                handled = plugin.clickPositionValid(mousePosition);
-                if (handled) {
-                    break;
-                }
+            if (!plugin.clickPositionValid) {
+                continue;
+            }
+            handled = plugin.clickPositionValid(mousePosition);
+            if (handled) {
+                break;
             }
         }
         if (!handled) {
@@ -304,19 +319,16 @@ export class EventListeners {
      * @param e the click event arguments
      */
     doMouseTouchClick(e) {
-        const container = this.container;
-        const options = container.actualOptions;
+        const container = this.container, options = container.actualOptions;
         if (this.canPush) {
             const mousePos = container.interactivity.mouse.position;
-            if (mousePos) {
-                container.interactivity.mouse.clickPosition = {
-                    x: mousePos.x,
-                    y: mousePos.y,
-                };
-            }
-            else {
+            if (!mousePos) {
                 return;
             }
+            container.interactivity.mouse.clickPosition = {
+                x: mousePos.x,
+                y: mousePos.y,
+            };
             container.interactivity.mouse.clickTime = new Date().getTime();
             const onClick = options.interactivity.events.onClick;
             if (onClick.mode instanceof Array) {
@@ -332,78 +344,25 @@ export class EventListeners {
             setTimeout(() => this.mouseTouchFinish(), 500);
         }
     }
+    /**
+     * Handle browser theme change
+     * @param e the media query event
+     * @private
+     */
     handleThemeChange(e) {
-        const mediaEvent = e;
-        const themeName = mediaEvent.matches
+        const mediaEvent = e, themeName = mediaEvent.matches
             ? this.container.options.defaultDarkTheme
-            : this.container.options.defaultLightTheme;
-        const theme = this.container.options.themes.find((theme) => theme.name === themeName);
+            : this.container.options.defaultLightTheme, theme = this.container.options.themes.find((theme) => theme.name === themeName);
         if (theme && theme.default.auto) {
             this.container.loadTheme(themeName);
         }
     }
+    /**
+     * Handles click mode event
+     * @param mode Click mode type
+     * @private
+     */
     handleClickMode(mode) {
-        const container = this.container;
-        const options = container.actualOptions;
-        const pushNb = options.interactivity.modes.push.quantity;
-        const removeNb = options.interactivity.modes.remove.quantity;
-        switch (mode) {
-            case "push" /* push */: {
-                if (pushNb > 0) {
-                    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);
-                }
-                break;
-            }
-            case "remove" /* remove */:
-                container.particles.removeQuantity(removeNb);
-                break;
-            case "bubble" /* bubble */:
-                container.bubble.clicking = true;
-                break;
-            case "repulse" /* repulse */:
-                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) {
-                        container.repulse.clicking = false;
-                    }
-                }, options.interactivity.modes.repulse.duration * 1000);
-                break;
-            case "attract" /* attract */:
-                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) {
-                        container.attract.clicking = false;
-                    }
-                }, options.interactivity.modes.attract.duration * 1000);
-                break;
-            case "pause" /* pause */:
-                if (container.getAnimationStatus()) {
-                    container.pause();
-                }
-                else {
-                    container.play();
-                }
-                break;
-        }
-        for (const [, plugin] of container.plugins) {
-            if (plugin.handleClickMode) {
-                plugin.handleClickMode(mode);
-            }
-        }
+        this.container.handleClickMode(mode);
     }
 }

package/browser/Core/Utils/ExternalInteractorBase.js

@@ -1,6 +1,17 @@
+/**
+ * External Interactivity manager, base abstract class
+ */
 export class ExternalInteractorBase {
+    /**
+     * Constructor of external interactivity manager
+     * @param container the parent container
+     * @protected
+     */
     constructor(container) {
         this.container = container;
+        /**
+         * External Interactivity type
+         */
         this.type = 0 /* External */;
     }
 }

package/browser/Core/Utils/FrameManager.js

@@ -8,7 +8,7 @@ export class FrameManager {
     /**
      * Handles the rAF method preparing the next animation frame to be drawn
      * limiting it if it's needed by the current configuration
-     * @param timestamp
+     * @param timestamp the new frame timestamp
      */
     async nextFrame(timestamp) {
         var _a;
@@ -21,8 +21,7 @@ export class FrameManager {
                 return;
             }
             (_a = container.lastFrameTime) !== null && _a !== void 0 ? _a : (container.lastFrameTime = timestamp);
-            const deltaValue = timestamp - container.lastFrameTime;
-            const delta = {
+            const deltaValue = timestamp - container.lastFrameTime, delta = {
                 value: deltaValue,
                 factor: (60 * deltaValue) / 1000,
             };

package/browser/Core/Utils/InteractionManager.js

@@ -14,14 +14,26 @@ var _InteractionManager_engine;
  * @category Core
  */
 export class InteractionManager {
+    /**
+     * The constructor of the interaction manager
+     * @param engine the parent engine
+     * @param container the parent container
+     */
     constructor(engine, container) {
         this.container = container;
+        /**
+         * The engine used for registering the interactions managers
+         * @private
+         */
         _InteractionManager_engine.set(this, void 0);
         __classPrivateFieldSet(this, _InteractionManager_engine, engine, "f");
         this.externalInteractors = [];
         this.particleInteractors = [];
         this.init();
     }
+    /**
+     * Initializes the interaction manager, loading all the engine registered managers into the container
+     */
     init() {
         const interactors = __classPrivateFieldGet(this, _InteractionManager_engine, "f").plugins.getInteractors(this.container, true);
         this.externalInteractors = [];
@@ -37,6 +49,10 @@ export class InteractionManager {
             }
         }
     }
+    /**
+     * Iterates through the external interactivity manager and call the interact method, if they are enabled
+     * @param delta this variable contains the delta between the current frame and the previous frame
+     */
     async externalInteract(delta) {
         for (const interactor of this.externalInteractors) {
             if (interactor.isEnabled()) {
@@ -44,6 +60,11 @@ export class InteractionManager {
             }
         }
     }
+    /**
+     * Iterates through the particles interactions manager and call the interact method, if they are enabled
+     * @param particle the particle responsible for the current interaction
+     * @param delta this variable contains the delta between the current frame and the previous frame
+     */
     async particlesInteract(particle, delta) {
         for (const interactor of this.externalInteractors) {
             interactor.reset(particle);
@@ -55,5 +76,12 @@ export class InteractionManager {
             }
         }
     }
+    handleClickMode(mode) {
+        for (const interactor of this.externalInteractors) {
+            if (interactor.handleClickMode) {
+                interactor.handleClickMode(mode);
+            }
+        }
+    }
 }
 _InteractionManager_engine = new WeakMap();

package/browser/Core/Utils/ParticlesInteractorBase.js

@@ -1,6 +1,17 @@
+/**
+ * Particles interactions manager, base abstract class
+ */
 export class ParticlesInteractorBase {
+    /**
+     * The particles interactions manager constructor
+     * @param container the parent container
+     * @protected
+     */
     constructor(container) {
         this.container = container;
+        /**
+         * Particles interactions type
+         */
         this.type = 1 /* Particles */;
     }
 }