tsparticles 1.34.1 → 1.35.0

package/Core/Loader.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
 const Container_1 = require("./Container");
@@ -29,89 +20,81 @@ class Loader {
         }
         dom.splice(index, 1);
     }
-    static load(tagId, options, index) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let domContainer = document.getElementById(tagId);
-            if (!domContainer) {
-                domContainer = document.createElement("div");
-                domContainer.id = tagId;
-                document.append(domContainer);
-            }
-            return Loader.set(tagId, domContainer, options, index);
-        });
+    static async load(tagId, options, index) {
+        let domContainer = document.getElementById(tagId);
+        if (!domContainer) {
+            domContainer = document.createElement("div");
+            domContainer.id = tagId;
+            document.append(domContainer);
+        }
+        return Loader.set(tagId, domContainer, options, index);
     }
-    static set(id, domContainer, options, index) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const currentOptions = options instanceof Array ? Utils_1.itemFromArray(options, index) : options;
-            const dom = Loader.dom();
-            const oldIndex = dom.findIndex((v) => v.id === id);
-            if (oldIndex >= 0) {
-                const old = Loader.domItem(oldIndex);
-                if (old && !old.destroyed) {
-                    old.destroy();
-                    dom.splice(oldIndex, 1);
-                }
-            }
-            let canvasEl;
-            let generatedCanvas;
-            if (domContainer.tagName.toLowerCase() === "canvas") {
-                canvasEl = domContainer;
-                generatedCanvas = false;
+    static async set(id, domContainer, options, index) {
+        const currentOptions = options instanceof Array ? (0, Utils_1.itemFromArray)(options, index) : options;
+        const dom = Loader.dom();
+        const oldIndex = dom.findIndex((v) => v.id === id);
+        if (oldIndex >= 0) {
+            const old = Loader.domItem(oldIndex);
+            if (old && !old.destroyed) {
+                old.destroy();
+                dom.splice(oldIndex, 1);
             }
-            else {
-                const existingCanvases = domContainer.getElementsByTagName("canvas");
-                if (existingCanvases.length) {
-                    canvasEl = existingCanvases[0];
-                    if (!canvasEl.className) {
-                        canvasEl.className = Utils_1.Constants.canvasClass;
-                    }
-                    generatedCanvas = false;
-                }
-                else {
-                    generatedCanvas = true;
-                    canvasEl = document.createElement("canvas");
+        }
+        let canvasEl;
+        let generatedCanvas;
+        if (domContainer.tagName.toLowerCase() === "canvas") {
+            canvasEl = domContainer;
+            generatedCanvas = false;
+        }
+        else {
+            const existingCanvases = domContainer.getElementsByTagName("canvas");
+            if (existingCanvases.length) {
+                canvasEl = existingCanvases[0];
+                if (!canvasEl.className) {
                     canvasEl.className = Utils_1.Constants.canvasClass;
-                    canvasEl.style.width = "100%";
-                    canvasEl.style.height = "100%";
-                    domContainer.appendChild(canvasEl);
                 }
-            }
-            const newItem = new Container_1.Container(id, currentOptions);
-            if (oldIndex >= 0) {
-                dom.splice(oldIndex, 0, newItem);
+                generatedCanvas = false;
             }
             else {
-                dom.push(newItem);
+                generatedCanvas = true;
+                canvasEl = document.createElement("canvas");
+                canvasEl.className = Utils_1.Constants.canvasClass;
+                canvasEl.style.width = "100%";
+                canvasEl.style.height = "100%";
+                domContainer.appendChild(canvasEl);
             }
-            newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
-            yield newItem.start();
-            return newItem;
-        });
+        }
+        const newItem = new Container_1.Container(id, currentOptions);
+        if (oldIndex >= 0) {
+            dom.splice(oldIndex, 0, newItem);
+        }
+        else {
+            dom.push(newItem);
+        }
+        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        await newItem.start();
+        return newItem;
     }
-    static loadJSON(tagId, jsonUrl, index) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const url = jsonUrl instanceof Array ? Utils_1.itemFromArray(jsonUrl, index) : jsonUrl;
-            const response = yield fetch(url);
-            if (response.ok) {
-                return Loader.load(tagId, yield response.json());
-            }
-            else {
-                fetchError(response.status);
-            }
-        });
+    static async loadJSON(tagId, jsonUrl, index) {
+        const url = jsonUrl instanceof Array ? (0, Utils_1.itemFromArray)(jsonUrl, index) : jsonUrl;
+        const response = await fetch(url);
+        if (response.ok) {
+            return Loader.load(tagId, await response.json());
+        }
+        else {
+            fetchError(response.status);
+        }
     }
-    static setJSON(id, domContainer, jsonUrl, index) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const url = jsonUrl instanceof Array ? Utils_1.itemFromArray(jsonUrl, index) : jsonUrl;
-            const response = yield fetch(url);
-            if (response.ok) {
-                const options = yield response.json();
-                return Loader.set(id, domContainer, options);
-            }
-            else {
-                fetchError(response.status);
-            }
-        });
+    static async setJSON(id, domContainer, jsonUrl, index) {
+        const url = jsonUrl instanceof Array ? (0, Utils_1.itemFromArray)(jsonUrl, index) : jsonUrl;
+        const response = await fetch(url);
+        if (response.ok) {
+            const options = await response.json();
+            return Loader.set(id, domContainer, options);
+        }
+        else {
+            fetchError(response.status);
+        }
     }
     static setOnClickHandler(callback) {
         const dom = Loader.dom();

package/Core/Particle/Mover.js

@@ -5,10 +5,10 @@ const Utils_1 = require("../../Utils");
 const Enums_1 = require("../../Enums");
 function applyDistance(particle) {
     const initialPosition = particle.initialPosition;
-    const { dx, dy } = Utils_1.getDistances(initialPosition, particle.position);
+    const { dx, dy } = (0, Utils_1.getDistances)(initialPosition, particle.position);
     const dxFixed = Math.abs(dx), dyFixed = Math.abs(dy);
-    const hDistance = particle.maxDistance.horizontal;
-    const vDistance = particle.maxDistance.vertical;
+    const hDistance = particle.retina.maxDistance.horizontal;
+    const vDistance = particle.retina.maxDistance.vertical;
     if (!hDistance && !vDistance) {
         return;
     }
@@ -47,13 +47,14 @@ class Mover {
     }
     moveParticle(particle, delta) {
         var _a, _b, _c;
+        var _d, _e;
         const particleOptions = particle.options;
         const moveOptions = particleOptions.move;
         if (!moveOptions.enable) {
             return;
         }
-        const container = this.container, slowFactor = this.getProximitySpeedFactor(particle), baseSpeed = ((_a = particle.moveSpeed) !== null && _a !== void 0 ? _a : (particle.moveSpeed = Utils_1.getRangeValue(moveOptions.speed) * container.retina.pixelRatio)) *
-            container.retina.reduceFactor, moveDrift = ((_b = particle.moveDrift) !== null && _b !== void 0 ? _b : (particle.moveDrift = Utils_1.getRangeValue(particle.options.move.drift) * container.retina.pixelRatio)), maxSize = Utils_1.getRangeMax(particleOptions.size.value) * container.retina.pixelRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1, diffFactor = 2, speedFactor = (sizeFactor * slowFactor * (delta.factor || 1)) / diffFactor, moveSpeed = baseSpeed * speedFactor;
+        const container = this.container, slowFactor = this.getProximitySpeedFactor(particle), baseSpeed = ((_a = (_d = particle.retina).moveSpeed) !== null && _a !== void 0 ? _a : (_d.moveSpeed = (0, Utils_1.getRangeValue)(moveOptions.speed) * container.retina.pixelRatio)) *
+            container.retina.reduceFactor, moveDrift = ((_b = (_e = particle.retina).moveDrift) !== null && _b !== void 0 ? _b : (_e.moveDrift = (0, Utils_1.getRangeValue)(particle.options.move.drift) * container.retina.pixelRatio)), maxSize = (0, Utils_1.getRangeMax)(particleOptions.size.value) * container.retina.pixelRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1, diffFactor = 2, speedFactor = (sizeFactor * slowFactor * (delta.factor || 1)) / diffFactor, moveSpeed = baseSpeed * speedFactor;
         this.applyPath(particle, delta);
         const gravityOptions = moveOptions.gravity;
         const gravityFactor = gravityOptions.enable && gravityOptions.inverse ? -1 : 1;
@@ -63,12 +64,12 @@ class Mover {
         if (moveDrift && moveSpeed) {
             particle.velocity.x += (moveDrift * delta.factor) / (60 * moveSpeed);
         }
-        const decay = 1 - particle.options.move.decay;
+        const decay = particle.moveDecay;
         if (decay != 1) {
             particle.velocity.multTo(decay);
         }
         const velocity = particle.velocity.mult(moveSpeed);
-        const maxSpeed = (_c = particle.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
+        const maxSpeed = (_c = particle.retina.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
         if (gravityOptions.enable &&
             gravityOptions.maxSpeed > 0 &&
             ((!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed) ||
@@ -78,7 +79,7 @@ class Mover {
                 particle.velocity.y = velocity.y / moveSpeed;
             }
         }
-        const zIndexOptions = particle.options.zIndex, zVelocityFactor = Math.pow((1 - particle.zIndexFactor), zIndexOptions.velocityRate);
+        const zIndexOptions = particle.options.zIndex, zVelocityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
         if (moveOptions.spin.enable) {
             this.spin(particle, moveSpeed);
         }
@@ -132,15 +133,15 @@ class Mover {
         const path = container.pathGenerator.generate(particle);
         particle.velocity.addTo(path);
         if (pathOptions.clamp) {
-            particle.velocity.x = Utils_1.clamp(particle.velocity.x, -1, 1);
-            particle.velocity.y = Utils_1.clamp(particle.velocity.y, -1, 1);
+            particle.velocity.x = (0, Utils_1.clamp)(particle.velocity.x, -1, 1);
+            particle.velocity.y = (0, Utils_1.clamp)(particle.velocity.y, -1, 1);
         }
         particle.lastPathTime -= particle.pathDelay;
     }
     moveParallax(particle) {
         const container = this.container;
         const options = container.actualOptions;
-        if (Utils_1.isSsr() || !options.interactivity.events.onHover.parallax.enable) {
+        if ((0, Utils_1.isSsr)() || !options.interactivity.events.onHover.parallax.enable) {
             return;
         }
         const parallaxForce = options.interactivity.events.onHover.parallax.force;
@@ -164,7 +165,7 @@ class Mover {
     getProximitySpeedFactor(particle) {
         const container = this.container;
         const options = container.actualOptions;
-        const active = Utils_1.isInArray(Enums_1.HoverMode.slow, options.interactivity.events.onHover.mode);
+        const active = (0, Utils_1.isInArray)(Enums_1.HoverMode.slow, options.interactivity.events.onHover.mode);
         if (!active) {
             return 1;
         }
@@ -173,7 +174,7 @@ class Mover {
             return 1;
         }
         const particlePos = particle.getPosition();
-        const dist = Utils_1.getDistance(mousePos, particlePos);
+        const dist = (0, Utils_1.getDistance)(mousePos, particlePos);
         const radius = container.retina.slowModeRadius;
         if (dist > radius) {
             return 1;

package/Core/Particle/Vector.js

@@ -33,7 +33,7 @@ class Vector {
         this.updateFromAngle(angle, this.length);
     }
     get length() {
-        return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
+        return Math.sqrt(this.x ** 2 + this.y ** 2);
     }
     set length(length) {
         this.updateFromAngle(this.angle, length);
@@ -70,7 +70,7 @@ class Vector {
         return this.sub(v).length;
     }
     getLengthSq() {
-        return Math.pow(this.x, 2) + Math.pow(this.y, 2);
+        return this.x ** 2 + this.y ** 2;
     }
     distanceToSq(v) {
         return this.sub(v).getLengthSq();

package/Core/Particle.d.ts

@@ -1,12 +1,14 @@
 import type { Container } from "./Container";
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
-import { AlterType, ShapeType } from "../Enums";
+import { ShapeType } from "../Enums";
 import type { RecursivePartial } from "../Types";
 import type { Stroke } from "../Options/Classes/Particles/Stroke";
 import { Vector } from "./Particle/Vector";
-import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IDistance, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IRgb, IShapeValues } from "./Interfaces";
+import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IRgb, IShapeValues, IParticleRetinaProps } from "./Interfaces";
 import { Vector3d } from "./Particle/Vector3d";
+import { IParticleRoll } from "./Interfaces/IParticleRoll";
+import { IParticleWobble } from "./Interfaces/IParticleWobble";
 export declare class Particle implements IParticle {
     readonly id: number;
     readonly container: Container;
@@ -14,48 +16,33 @@ export declare class Particle implements IParticle {
     destroyed: boolean;
     lastPathTime: number;
     misplaced: boolean;
-    rollAngle: number;
-    rollSpeed: number;
     spawning: boolean;
     splitCount: number;
     unbreakable: boolean;
-    wobbleAngle: number;
-    wobbleDistance: number;
-    wobbleSpeed: number;
     readonly pathDelay: number;
     readonly sides: number;
-    readonly strokeWidth: number;
     readonly options: ParticlesOptions;
     readonly life: IParticleLife;
-    readonly maxDistance: Partial<IDistance>;
-    alterValue?: number;
-    alterType?: AlterType;
-    attractDistance?: number;
+    roll?: IParticleRoll;
+    wobble?: IParticleWobble;
     backColor?: IHsl;
     close: boolean;
     fill: boolean;
     randomIndexData?: number;
-    linksDistance?: number;
-    linksWidth?: number;
-    moveDrift?: number;
-    moveSpeed?: number;
-    maxSpeed?: number;
-    orbitRadius?: number;
-    orbitRotation?: number;
-    sizeAnimationSpeed?: number;
+    gradient?: IParticleGradientAnimation;
+    rotate?: IParticleValueAnimation<number>;
+    tilt?: IParticleTiltValueAnimation;
+    color?: IParticleHslAnimation;
+    opacity?: IParticleNumericValueAnimation;
+    strokeWidth?: number;
+    stroke?: Stroke;
+    strokeColor?: IParticleHslAnimation;
+    readonly moveDecay: number;
     readonly direction: number;
-    readonly stroke: Stroke;
     readonly position: Vector3d;
     readonly offset: Vector;
     readonly shadowColor: IRgb | undefined;
-    readonly color?: IParticleHslAnimation;
-    readonly gradient?: IParticleGradientAnimation;
-    readonly opacity: IParticleNumericValueAnimation;
-    readonly rotate: IParticleValueAnimation<number>;
     readonly size: IParticleNumericValueAnimation;
-    readonly tilt: IParticleTiltValueAnimation;
-    readonly strokeColor?: IParticleHslAnimation;
-    readonly orbitColor?: IHsl;
     readonly velocity: Vector;
     readonly shape: ShapeType | string;
     readonly spin?: IParticleSpin;
@@ -64,6 +51,7 @@ export declare class Particle implements IParticle {
     readonly shapeData?: IShapeValues;
     readonly bubble: IBubbleParticleData;
     readonly zIndexFactor: number;
+    readonly retina: IParticleRetinaProps;
     constructor(id: number, container: Container, position?: ICoordinates, overrideOptions?: RecursivePartial<IParticles>, group?: string | undefined);
     isVisible(): boolean;
     isInsideCanvas(): boolean;