tsparticles 1.37.3 → 1.38.0

package/tsparticles.slim.js

@@ -939,14 +939,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);
@@ -1009,7 +1006,7 @@
       }
     }
     class Constants {}
-    Constants.canvasClass = "tsparticles-canvas-el";
+    Constants.generatedAttribute = "generated";
     Constants.randomColorValue = "random";
     Constants.midColorValue = "mid";
     Constants.touchEndEvent = "touchend";
@@ -1880,6 +1877,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() {
@@ -1903,9 +1901,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) {
@@ -1960,9 +1966,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() {
@@ -2370,15 +2376,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;
@@ -2420,7 +2423,7 @@
           }));
         }
       }
-      windowResize() {
+      async windowResize() {
         if (!this.element) {
           return;
         }
@@ -2434,7 +2437,7 @@
           }
         }
         if (needsRefresh) {
-          container.refresh();
+          await container.refresh();
         }
       }
       resize() {
@@ -2635,6 +2638,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 => {
@@ -6172,6 +6185,7 @@
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.responsive = [];
+        this.style = {};
         this.themes = [];
         this.zLayers = 100;
       }
@@ -6248,6 +6262,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) {
@@ -6714,22 +6729,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);
@@ -6741,7 +6751,7 @@
         } else {
           dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
       }