tsparticles 1.37.2 → 1.37.6

package/Plugins/Absorbers/AbsorberInstance.d.ts

@@ -5,6 +5,7 @@ import type { IAbsorber } from "./Options/Interfaces/IAbsorber";
 import type { Absorbers } from "./Absorbers";
 import { Vector } from "../../Core/Particle/Vector";
 import { RotateDirection } from "../../Enums";
+import { IAbsorberSizeLimit } from "./Options/Interfaces/IAbsorberSizeLimit";
 declare type OrbitingParticle = Particle & {
     absorberOrbit?: Vector;
     absorberOrbitDirection?: RotateDirection;
@@ -17,7 +18,7 @@ export declare class AbsorberInstance {
     opacity: number;
     size: number;
     color: IRgb;
-    limit?: number;
+    limit: IAbsorberSizeLimit;
     readonly name?: string;
     position: Vector;
     private dragging;

package/Plugins/Absorbers/AbsorberInstance.js

@@ -6,7 +6,7 @@ const Vector_1 = require("../../Core/Particle/Vector");
 const Enums_1 = require("../../Enums");
 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_1.Vector.create(position.x, position.y) : undefined;
@@ -17,14 +17,23 @@ class AbsorberInstance {
         this.size = (0, Utils_1.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 = (0, Utils_1.colorToRgb)(color)) !== null && _a !== void 0 ? _a : {
+        this.color = (_c = (0, Utils_1.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;
@@ -67,10 +76,12 @@ 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);
@@ -105,9 +116,10 @@ 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/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/Plugins/Absorbers/Options/Classes/AbsorberSize.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbsorberSize = void 0;
 const ValueWithRandom_1 = require("../../../../Options/Classes/ValueWithRandom");
+const AbsorberSizeLimit_1 = require("./AbsorberSizeLimit");
 class AbsorberSize extends ValueWithRandom_1.ValueWithRandom {
     constructor() {
         super();
         this.density = 5;
         this.random.minimumValue = 1;
         this.value = 50;
+        this.limit = new AbsorberSizeLimit_1.AbsorberSizeLimit();
     }
     load(data) {
         if (!data) {
@@ -17,11 +19,11 @@ class AbsorberSize extends ValueWithRandom_1.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/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/Plugins/Absorbers/Options/Classes/AbsorberSizeLimit.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbsorberSizeLimit = void 0;
+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;
+        }
+    }
+}
+exports.AbsorberSizeLimit = AbsorberSizeLimit;

package/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/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.d.ts

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

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/README.md

@@ -13,6 +13,36 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
 
 ---
 
+## Table of Contents
+
+- [Use for your website](#Do-you-want-to-use-it-on-your-website)
+  - [Library installation](#Library-installation)
+- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)
+  - [Angular](#Angular)
+  - [Inferno](#Inferno)
+  - [jQuery](#jQuery)
+  - [Preact](#Preact)
+  - [ReactJS](#ReactJS)
+  - [RiotJS](#RiotJS)
+  - [SolidJS](#SolidJS)
+  - [Svelte](#Svelte)
+  - [VueJS 2.x](#VueJS-2x)
+  - [VueJS 3.x](#VueJS-3x)
+  - [Web Components](#Web-Components)
+  - [WordPress](#WordPress)
+- [Templates and Resources](#Templates-and-Resources)
+- [Demo / Generator](#Demo--Generator)
+  - [Characters as particles](#Characters-as-particles)
+  - [Mouse hover connections](#Mouse-hover-connections)
+  - [Polygon mask](#Polygon-mask)
+  - [Animated stars](#Animated-stars)
+  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)
+  - [Background Mask particles](#Background-Mask-particles)
+- [Migrating from Particles.js](#Migrating-from-Particlesjs)
+- [Plugins/Customizations](#PluginsCustomizations)
+
+---
+
 ## Do you want to use it on your website?
 
 _Documentation and Development references [here](https://particles.js.org/docs/) 📖_
@@ -221,6 +251,22 @@ You can find the instructions [here](https://github.com/matteobruni/tsparticles/
 
 You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)
 
+### RiotJS
+
+#### `riot-particles`
+
+[![npm](https://img.shields.io/npm/v/riot-particles)](https://www.npmjs.com/package/riot-particles) [![npm](https://img.shields.io/npm/dm/riot-particles)](https://www.npmjs.com/package/riot-particles)
+
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/riot/README.md)
+
+### SolidJS
+
+#### `solid-particles`
+
+[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles)
+
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/solid/README.md)
+
 ### Svelte
 
 #### `svelte-particles`
@@ -245,6 +291,28 @@ You can find the instructions [here](https://github.com/matteobruni/tsparticles/
 
 You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)
 
+### Web Components
+
+#### `web-particles`
+
+[![npm](https://img.shields.io/npm/v/web-particles)](https://www.npmjs.com/package/web-particles) [![npm](https://img.shields.io/npm/dm/web-particles)](https://www.npmjs.com/package/web-particles)
+
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/web/README.md)
+
+### WordPress
+
+Actually an official tsParticles plugin isn't existing, but I have a collaboration with
+the `Premium Addons for Elementor` plugin collection.
+
+<div style="float: left; margin-right: 10px;">
+    <img width="64" alt="Premium Addons for Elementor" src="https://particles.js.org/images/premium-addons-wordpress-plugin.png" />
+</div>
+<div>
+    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href="https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/" target="_blank">Check It Now</a>.<br />
+    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href="https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/" target="_blank">See a Live Example</a>.
+</div>
+<div style="clear: both;"></div>
+
 ---
 
 ## **_Demo / Generator_**

package/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/Utils/EventListeners.js

@@ -35,6 +35,7 @@ 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() {
@@ -60,9 +61,19 @@ class EventListeners {
         else {
             container.interactivity.element = container.canvas.element;
         }
-        const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+        const mediaMatch = !(0, Utils_1.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/Utils/Utils.js

@@ -200,14 +200,11 @@ function circleBounceDataFromParticle(p) {
 }
 exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
 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 } = (0, NumberUtils_1.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/browser/Plugins/Absorbers/AbsorberInstance.d.ts

@@ -5,6 +5,7 @@ import type { IAbsorber } from "./Options/Interfaces/IAbsorber";
 import type { Absorbers } from "./Absorbers";
 import { Vector } from "../../Core/Particle/Vector";
 import { RotateDirection } from "../../Enums";
+import { IAbsorberSizeLimit } from "./Options/Interfaces/IAbsorberSizeLimit";
 declare type OrbitingParticle = Particle & {
     absorberOrbit?: Vector;
     absorberOrbitDirection?: RotateDirection;
@@ -20,7 +21,7 @@ export declare class AbsorberInstance {
     opacity: number;
     size: number;
     color: IRgb;
-    limit?: number;
+    limit: IAbsorberSizeLimit;
     readonly name?: string;
     position: Vector;
     private dragging;

package/browser/Plugins/Absorbers/AbsorberInstance.js

@@ -6,7 +6,7 @@ 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;
@@ -17,14 +17,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;
@@ -67,10 +76,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);
@@ -105,9 +116,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/browser/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/browser/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/browser/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/browser/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/browser/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/browser/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.d.ts

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

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

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

package/browser/Utils/EventListeners.d.ts

@@ -16,6 +16,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/browser/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 };
@@ -40,6 +40,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();
     }
     /**
@@ -75,9 +76,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;
         /* detect mouse pos - on hover / click event */

package/browser/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 };
@@ -188,16 +188,13 @@ 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);
     // Prevent accidental overlap of particles
     if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) {
         // Grab angle between the two colliding particles
-        const angle = -Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x);
+        const angle = -Math.atan2(yDist, xDist);
         // Store mass in var for better readability in collision equation
         const m1 = p1.mass;
         const m2 = p2.mass;

package/esm/Plugins/Absorbers/AbsorberInstance.d.ts

@@ -5,6 +5,7 @@ import type { IAbsorber } from "./Options/Interfaces/IAbsorber";
 import type { Absorbers } from "./Absorbers";
 import { Vector } from "../../Core/Particle/Vector";
 import { RotateDirection } from "../../Enums";
+import { IAbsorberSizeLimit } from "./Options/Interfaces/IAbsorberSizeLimit";
 declare type OrbitingParticle = Particle & {
     absorberOrbit?: Vector;
     absorberOrbitDirection?: RotateDirection;
@@ -17,7 +18,7 @@ export declare class AbsorberInstance {
     opacity: number;
     size: number;
     color: IRgb;
-    limit?: number;
+    limit: IAbsorberSizeLimit;
     readonly name?: string;
     position: Vector;
     private dragging;