tsparticles 1.37.2 → 1.37.6

package/scripts/install.js

@@ -1,3 +1,6 @@
+const path = require('path');
+const reactParticlesJsFoundError = "react-particles-js-found";
+
 try {
     console.log("Thank you for installing tsParticles.");
     console.log("Remember to checkout the official website https://particles.js.org to explore some samples.");
@@ -5,8 +8,6 @@ try {
     console.log("If you need documentation you can find it here: https://particles.js.org");
     console.log("Remember to leave a star on the tsParticles repository if you like the project and want to support it: https://github.com/matteobruni/tsparticles");
 
-    const path = require('path');
-
     const pkgSettings = require(path.join(process.env.INIT_CWD, "package.json"));
 
     if (!pkgSettings) {
@@ -19,6 +20,12 @@ try {
         return;
     }
 
+    if (dependencies["react-particles-js"]) {
+        console.error("\x1b[31m%s\x1b[0m", "The package react-particles-js has been deprecated and is not supported anymore. Please consider switching to react-tsparticles package.");
+
+        throw new Error(reactParticlesJsFoundError);
+    }
+
     if (dependencies["react"] || dependencies["next"]) {
         if (!dependencies["react-tsparticles"]) {
             console.warn("\x1b[43m\x1b[30m%s\x1b[0m", "Found React installed. Please download react-tsparticles to use tsParticles with a component ready to use and easier to configure.");
@@ -81,5 +88,9 @@ try {
         }
     }
 } catch (error) {
-    // ignore errors
+    if (error.message === reactParticlesJsFoundError) {
+        throw error;
+    }
+
+    console.log(error);
 }

package/tsparticles.js

@@ -1222,14 +1222,11 @@
       };
     }
     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);
@@ -2163,6 +2160,7 @@
         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() {
@@ -2186,9 +2184,17 @@
         } 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) {
@@ -9420,7 +9426,7 @@
     }
     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;
@@ -9431,16 +9437,22 @@
         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;
@@ -9479,10 +9491,12 @@
             }
             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);
         }
@@ -9513,9 +9527,10 @@
         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() * .2 - .1)) + pSize;
-          particle.position.y = (canvasSize.height - pSize * 2) * (1 + (Math.random() * .2 - .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) {
@@ -9552,12 +9567,30 @@
         }
       }
     }
+    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;
+        }
+      }
+    }
     class AbsorberSize extends ValueWithRandom {
       constructor() {
         super();
         this.density = 5;
         this.random.minimumValue = 1;
         this.value = 50;
+        this.limit = new AbsorberSizeLimit;
       }
       load(data) {
         if (!data) {
@@ -9567,11 +9600,10 @@
         if (data.density !== undefined) {
           this.density = data.density;
         }
-        if (data.limit !== undefined) {
-          this.limit = data.limit;
-        }
-        if (data.limit !== undefined) {
-          this.limit = data.limit;
+        if (typeof data.limit === "number") {
+          this.limit.radius = data.limit;
+        } else {
+          this.limit.load(data.limit);
         }
       }
     }