tsparticles 1.37.3 → 1.38.0

package/esm/Core/Loader.js

@@ -38,24 +38,19 @@ export class Loader {
             }
         }
         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);
@@ -68,7 +63,7 @@ export class Loader {
         else {
             dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
     }

package/esm/Options/Classes/Options.d.ts

@@ -32,6 +32,7 @@ export declare class Options implements IOptions, IOptionLoader<IOptions> {
     pauseOnBlur: boolean;
     pauseOnOutsideViewport: boolean;
     preset?: string | string[];
+    style: RecursivePartial<CSSStyleDeclaration>;
     responsive: Responsive[];
     themes: Theme[];
     zLayers: number;

package/esm/Options/Classes/Options.js

@@ -8,7 +8,7 @@ import { Interactivity } from "./Interactivity/Interactivity";
 import { ParticlesOptions } from "./Particles/ParticlesOptions";
 import { BackgroundMask } from "./BackgroundMask/BackgroundMask";
 import { Background } from "./Background/Background";
-import { Plugins } from "../../Utils";
+import { deepExtend, Plugins } from "../../Utils";
 import { Theme } from "./Theme/Theme";
 import { ResponsiveMode, ThemeMode } from "../../Enums";
 import { FullScreen } from "./FullScreen/FullScreen";
@@ -32,6 +32,7 @@ export class Options {
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.responsive = [];
+        this.style = {};
         this.themes = [];
         this.zLayers = 100;
     }
@@ -110,6 +111,7 @@ export class Options {
         }
         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) {

package/esm/Options/Interfaces/IOptions.d.ts

@@ -27,6 +27,7 @@ export interface IOptions {
     preset?: SingleOrMultiple<string>;
     responsive: IResponsive[];
     retina_detect: boolean;
+    style: RecursivePartial<CSSStyleDeclaration>;
     themes: ITheme[];
     zLayers: number;
     [name: string]: unknown;

package/esm/Utils/Constants.d.ts

@@ -1,5 +1,5 @@
 export declare class Constants {
-    static readonly canvasClass: string;
+    static readonly generatedAttribute: string;
     static readonly randomColorValue: string;
     static readonly midColorValue: string;
     static readonly touchEndEvent: string;

package/esm/Utils/Constants.js

@@ -1,6 +1,6 @@
 export class Constants {
 }
-Constants.canvasClass = "tsparticles-canvas-el";
+Constants.generatedAttribute = "generated";
 Constants.randomColorValue = "random";
 Constants.midColorValue = "mid";
 Constants.touchEndEvent = "touchend";

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) {
@@ -117,7 +128,7 @@ export class EventListeners {
             clearTimeout(this.resizeTimeout);
             delete this.resizeTimeout;
         }
-        this.resizeTimeout = setTimeout(() => { var _a; return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize(); }, 500);
+        this.resizeTimeout = setTimeout(async () => { var _a; return await ((_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize()); }, 500);
     }
     handleVisibilityChange() {
         const container = this.container;

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.3",
+  "version": "1.38.0",
   "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": {