tsparticles 1.37.3 → 1.38.0

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);
@@ -1292,7 +1289,7 @@
       }
     }
     class Constants {}
-    Constants.canvasClass = "tsparticles-canvas-el";
+    Constants.generatedAttribute = "generated";
     Constants.randomColorValue = "random";
     Constants.midColorValue = "mid";
     Constants.touchEndEvent = "touchend";
@@ -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) {
@@ -2243,9 +2249,9 @@
           clearTimeout(this.resizeTimeout);
           delete this.resizeTimeout;
         }
-        this.resizeTimeout = setTimeout((() => {
+        this.resizeTimeout = setTimeout((async () => {
           var _a;
-          return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize();
+          return await ((_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize());
         }), 500);
       }
       handleVisibilityChange() {
@@ -2653,15 +2659,12 @@
         this.initBackground();
         this.paint();
       }
-      loadCanvas(canvas, generatedCanvas) {
+      loadCanvas(canvas) {
         var _a;
-        if (!canvas.className) {
-          canvas.className = Constants.canvasClass;
-        }
         if (this.generatedCanvas) {
           (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
-        this.generatedCanvas = generatedCanvas !== null && generatedCanvas !== void 0 ? generatedCanvas : this.generatedCanvas;
+        this.generatedCanvas = canvas.dataset && Constants.generatedAttribute in canvas.dataset ? canvas.dataset[Constants.generatedAttribute] === "true" : this.generatedCanvas;
         this.element = canvas;
         this.originalStyle = deepExtend({}, this.element.style);
         this.size.height = canvas.offsetHeight;
@@ -2703,7 +2706,7 @@
           }));
         }
       }
-      windowResize() {
+      async windowResize() {
         if (!this.element) {
           return;
         }
@@ -2717,7 +2720,7 @@
           }
         }
         if (needsRefresh) {
-          container.refresh();
+          await container.refresh();
         }
       }
       resize() {
@@ -2918,6 +2921,16 @@
           element.style.width = originalStyle.width;
           element.style.height = originalStyle.height;
         }
+        for (const key in options.style) {
+          if (!key || !options.style) {
+            continue;
+          }
+          const value = options.style[key];
+          if (!value) {
+            continue;
+          }
+          element.style[key] = value;
+        }
       }
       paintBase(baseColor) {
         this.draw((ctx => {
@@ -6455,6 +6468,7 @@
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.responsive = [];
+        this.style = {};
         this.themes = [];
         this.zLayers = 100;
       }
@@ -6531,6 +6545,7 @@
         }
         this.motion.load(data.motion);
         this.particles.load(data.particles);
+        this.style = deepExtend(this.style, data.style);
         Plugins.loadOptions(this, data);
         if (data.responsive !== undefined) {
           for (const responsive of data.responsive) {
@@ -6997,22 +7012,17 @@
           }
         }
         let canvasEl;
-        let generatedCanvas;
         if (domContainer.tagName.toLowerCase() === "canvas") {
           canvasEl = domContainer;
-          generatedCanvas = false;
+          canvasEl.dataset[Constants.generatedAttribute] = "false";
         } else {
           const existingCanvases = domContainer.getElementsByTagName("canvas");
           if (existingCanvases.length) {
             canvasEl = existingCanvases[0];
-            if (!canvasEl.className) {
-              canvasEl.className = Constants.canvasClass;
-            }
-            generatedCanvas = false;
+            canvasEl.dataset[Constants.generatedAttribute] = "false";
           } else {
-            generatedCanvas = true;
             canvasEl = document.createElement("canvas");
-            canvasEl.className = Constants.canvasClass;
+            canvasEl.dataset[Constants.generatedAttribute] = "true";
             canvasEl.style.width = "100%";
             canvasEl.style.height = "100%";
             domContainer.appendChild(canvasEl);
@@ -7024,7 +7034,7 @@
         } else {
           dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
       }