tsparticles 1.37.2 → 1.37.6

package/esm/Plugins/Absorbers/AbsorberInstance.js

@@ -3,7 +3,7 @@ import { Vector } from "../../Core/Particle/Vector";
 import { RotateDirection } from "../../Enums";
 export class AbsorberInstance {
     constructor(absorbers, container, options, position) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         this.absorbers = absorbers;
         this.container = container;
         this.initialPosition = position ? Vector.create(position.x, position.y) : undefined;
@@ -14,14 +14,23 @@ export class AbsorberInstance {
         this.size = getRangeValue(options.size.value) * container.retina.pixelRatio;
         this.mass = this.size * options.size.density * container.retina.reduceFactor;
         const limit = options.size.limit;
-        this.limit = limit !== undefined ? limit * container.retina.pixelRatio * container.retina.reduceFactor : limit;
+        this.limit =
+            typeof limit === "number"
+                ? {
+                    radius: limit * container.retina.pixelRatio * container.retina.reduceFactor,
+                    mass: 0,
+                }
+                : {
+                    radius: ((_a = limit === null || limit === void 0 ? void 0 : limit.radius) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio * container.retina.reduceFactor,
+                    mass: (_b = limit === null || limit === void 0 ? void 0 : limit.mass) !== null && _b !== void 0 ? _b : 0,
+                };
         const color = typeof options.color === "string" ? { value: options.color } : options.color;
-        this.color = (_a = colorToRgb(color)) !== null && _a !== void 0 ? _a : {
+        this.color = (_c = colorToRgb(color)) !== null && _c !== void 0 ? _c : {
             b: 0,
             g: 0,
             r: 0,
         };
-        this.position = (_c = (_b = this.initialPosition) === null || _b === void 0 ? void 0 : _b.copy()) !== null && _c !== void 0 ? _c : this.calcPosition();
+        this.position = (_e = (_d = this.initialPosition) === null || _d === void 0 ? void 0 : _d.copy()) !== null && _e !== void 0 ? _e : this.calcPosition();
     }
     attract(particle) {
         const container = this.container;
@@ -64,10 +73,12 @@ export class AbsorberInstance {
                 }
                 this.updateParticlePosition(particle, v);
             }
-            if (this.limit === undefined || this.size < this.limit) {
+            if (this.limit.radius <= 0 || this.size < this.limit.radius) {
                 this.size += sizeFactor;
             }
-            this.mass += sizeFactor * this.options.size.density * container.retina.reduceFactor;
+            if (this.limit.mass <= 0 || this.mass < this.limit.mass) {
+                this.mass += sizeFactor * this.options.size.density * container.retina.reduceFactor;
+            }
         }
         else {
             this.updateParticlePosition(particle, v);
@@ -102,9 +113,10 @@ export class AbsorberInstance {
         const container = this.container;
         const canvasSize = container.canvas.size;
         if (particle.needsNewPosition) {
-            const pSize = particle.getRadius();
-            particle.position.x = (canvasSize.width - pSize * 2) * (1 + (Math.random() * 0.2 - 0.1)) + pSize;
-            particle.position.y = (canvasSize.height - pSize * 2) * (1 + (Math.random() * 0.2 - 0.1)) + pSize;
+            particle.position.x = Math.floor(Math.random() * canvasSize.width);
+            particle.position.y = Math.floor(Math.random() * canvasSize.height);
+            particle.velocity.setTo(particle.initialVelocity);
+            particle.absorberOrbit = undefined;
             particle.needsNewPosition = false;
         }
         if (this.options.orbits) {

package/esm/Plugins/Absorbers/Options/Classes/AbsorberSize.d.ts

@@ -2,9 +2,10 @@ import type { IAbsorberSize } from "../Interfaces/IAbsorberSize";
 import type { RecursivePartial } from "../../../../Types";
 import type { IOptionLoader } from "../../../../Options/Interfaces/IOptionLoader";
 import { ValueWithRandom } from "../../../../Options/Classes/ValueWithRandom";
+import { AbsorberSizeLimit } from "./AbsorberSizeLimit";
 export declare class AbsorberSize extends ValueWithRandom implements IAbsorberSize, IOptionLoader<IAbsorberSize> {
     density: number;
-    limit?: number;
+    limit: AbsorberSizeLimit;
     constructor();
     load(data?: RecursivePartial<IAbsorberSize>): void;
 }

package/esm/Plugins/Absorbers/Options/Classes/AbsorberSize.js

@@ -1,10 +1,12 @@
 import { ValueWithRandom } from "../../../../Options/Classes/ValueWithRandom";
+import { AbsorberSizeLimit } from "./AbsorberSizeLimit";
 export class AbsorberSize extends ValueWithRandom {
     constructor() {
         super();
         this.density = 5;
         this.random.minimumValue = 1;
         this.value = 50;
+        this.limit = new AbsorberSizeLimit();
     }
     load(data) {
         if (!data) {
@@ -14,11 +16,11 @@ export class AbsorberSize extends ValueWithRandom {
         if (data.density !== undefined) {
             this.density = data.density;
         }
-        if (data.limit !== undefined) {
-            this.limit = data.limit;
+        if (typeof data.limit === "number") {
+            this.limit.radius = data.limit;
         }
-        if (data.limit !== undefined) {
-            this.limit = data.limit;
+        else {
+            this.limit.load(data.limit);
         }
     }
 }

package/esm/Plugins/Absorbers/Options/Classes/AbsorberSizeLimit.d.ts

@@ -0,0 +1,9 @@
+import type { RecursivePartial } from "../../../../Types";
+import type { IOptionLoader } from "../../../../Options/Interfaces/IOptionLoader";
+import type { IAbsorberSizeLimit } from "../Interfaces/IAbsorberSizeLimit";
+export declare class AbsorberSizeLimit implements IAbsorberSizeLimit, IOptionLoader<IAbsorberSizeLimit> {
+    radius: number;
+    mass: number;
+    constructor();
+    load(data?: RecursivePartial<IAbsorberSizeLimit>): void;
+}

package/esm/Plugins/Absorbers/Options/Classes/AbsorberSizeLimit.js

@@ -0,0 +1,17 @@
+export class AbsorberSizeLimit {
+    constructor() {
+        this.radius = 0;
+        this.mass = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.mass !== undefined) {
+            this.mass = data.mass;
+        }
+        if (data.radius !== undefined) {
+            this.radius = data.radius;
+        }
+    }
+}

package/esm/Plugins/Absorbers/Options/Interfaces/IAbsorberSize.d.ts

@@ -1,5 +1,6 @@
-import { IValueWithRandom } from "../../../../Options/Interfaces/IValueWithRandom";
+import type { IValueWithRandom } from "../../../../Options/Interfaces/IValueWithRandom";
+import type { IAbsorberSizeLimit } from "./IAbsorberSizeLimit";
 export interface IAbsorberSize extends IValueWithRandom {
-    limit?: number;
+    limit?: number | IAbsorberSizeLimit;
     density: number;
 }

package/esm/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.d.ts

@@ -0,0 +1,4 @@
+export interface IAbsorberSizeLimit {
+    radius: number;
+    mass: number;
+}

package/esm/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.js

@@ -0,0 +1 @@
+export {};

package/esm/Utils/EventListeners.d.ts

@@ -12,6 +12,7 @@ export declare class EventListeners {
     private readonly mouseUpHandler;
     private readonly visibilityChangeHandler;
     private readonly themeChangeHandler;
+    private readonly oldThemeChangeHandler;
     private readonly resizeHandler;
     private canPush;
     private resizeTimeout?;

package/esm/Utils/EventListeners.js

@@ -1,6 +1,6 @@
 import { ClickMode, InteractivityDetect } from "../Enums";
 import { Constants } from "./Constants";
-import { itemFromArray } from "./Utils";
+import { isSsr, itemFromArray } from "./Utils";
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };
@@ -32,6 +32,7 @@ export class EventListeners {
         this.mouseDownHandler = () => this.mouseDown();
         this.visibilityChangeHandler = () => this.handleVisibilityChange();
         this.themeChangeHandler = (e) => this.handleThemeChange(e);
+        this.oldThemeChangeHandler = (e) => this.handleThemeChange(e);
         this.resizeHandler = () => this.handleWindowResize();
     }
     addListeners() {
@@ -57,9 +58,19 @@ export class EventListeners {
         else {
             container.interactivity.element = container.canvas.element;
         }
-        const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+        const mediaMatch = !isSsr() && typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
         if (mediaMatch) {
-            manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+            if (mediaMatch.addEventListener !== undefined) {
+                manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+            }
+            else if (mediaMatch.addListener !== undefined) {
+                if (add) {
+                    mediaMatch.addListener(this.oldThemeChangeHandler);
+                }
+                else {
+                    mediaMatch.removeListener(this.oldThemeChangeHandler);
+                }
+            }
         }
         const interactivityEl = container.interactivity.element;
         if (!interactivityEl) {

package/esm/Utils/Utils.js

@@ -1,5 +1,5 @@
 import { OutModeDirection } from "../Enums";
-import { collisionVelocity, getValue } from "./NumberUtils";
+import { collisionVelocity, getValue, getDistances } from "./NumberUtils";
 import { Vector } from "../Core/Particle/Vector";
 function rectSideBounce(pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor) {
     const res = { bounced: false };
@@ -181,14 +181,11 @@ export function circleBounceDataFromParticle(p) {
     };
 }
 export function circleBounce(p1, p2) {
-    const xVelocityDiff = p1.velocity.x;
-    const yVelocityDiff = p1.velocity.y;
-    const pos1 = p1.position;
-    const pos2 = p2.position;
-    const xDist = pos2.x - pos1.x;
-    const yDist = pos2.y - pos1.y;
+    const { x: xVelocityDiff, y: yVelocityDiff } = p1.velocity.sub(p2.velocity);
+    const [pos1, pos2] = [p1.position, p2.position];
+    const { dx: xDist, dy: yDist } = getDistances(pos2, pos1);
     if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) {
-        const angle = -Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x);
+        const angle = -Math.atan2(yDist, xDist);
         const m1 = p1.mass;
         const m2 = p2.mass;
         const u1 = p1.velocity.rotate(angle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsparticles",
-  "version": "1.37.2",
+  "version": "1.37.6",
   "description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org/",
   "scripts": {