tsparticles 1.37.6 → 1.38.0

package/Core/Canvas.d.ts

@@ -13,11 +13,11 @@ export declare class Canvas {
     private originalStyle?;
     constructor(container: Container);
     init(): void;
-    loadCanvas(canvas: HTMLCanvasElement, generatedCanvas?: boolean): void;
+    loadCanvas(canvas: HTMLCanvasElement): void;
     destroy(): void;
     paint(): void;
     clear(): void;
-    windowResize(): void;
+    windowResize(): Promise<void>;
     resize(): void;
     drawConnectLine(p1: IParticle, p2: IParticle): void;
     drawGrabLine(particle: IParticle, lineColor: IRgb, opacity: number, mousePos: ICoordinates): void;

package/Core/Canvas.js

@@ -21,15 +21,15 @@ class Canvas {
         this.initBackground();
         this.paint();
     }
-    loadCanvas(canvas, generatedCanvas) {
+    loadCanvas(canvas) {
         var _a;
-        if (!canvas.className) {
-            canvas.className = Utils_1.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 && Utils_1.Constants.generatedAttribute in canvas.dataset
+                ? canvas.dataset[Utils_1.Constants.generatedAttribute] === "true"
+                : this.generatedCanvas;
         this.element = canvas;
         this.originalStyle = (0, Utils_1.deepExtend)({}, this.element.style);
         this.size.height = canvas.offsetHeight;
@@ -74,7 +74,7 @@ class Canvas {
             });
         }
     }
-    windowResize() {
+    async windowResize() {
         if (!this.element) {
             return;
         }
@@ -88,7 +88,7 @@ class Canvas {
             }
         }
         if (needsRefresh) {
-            container.refresh();
+            await container.refresh();
         }
     }
     resize() {
@@ -291,6 +291,16 @@ class Canvas {
             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) => {

package/Core/Loader.js

@@ -41,24 +41,19 @@ class Loader {
             }
         }
         let canvasEl;
-        let generatedCanvas;
         if (domContainer.tagName.toLowerCase() === "canvas") {
             canvasEl = domContainer;
-            generatedCanvas = false;
+            canvasEl.dataset[Utils_1.Constants.generatedAttribute] = "false";
         }
         else {
             const existingCanvases = domContainer.getElementsByTagName("canvas");
             if (existingCanvases.length) {
                 canvasEl = existingCanvases[0];
-                if (!canvasEl.className) {
-                    canvasEl.className = Utils_1.Constants.canvasClass;
-                }
-                generatedCanvas = false;
+                canvasEl.dataset[Utils_1.Constants.generatedAttribute] = "false";
             }
             else {
-                generatedCanvas = true;
                 canvasEl = document.createElement("canvas");
-                canvasEl.className = Utils_1.Constants.canvasClass;
+                canvasEl.dataset[Utils_1.Constants.generatedAttribute] = "true";
                 canvasEl.style.width = "100%";
                 canvasEl.style.height = "100%";
                 domContainer.appendChild(canvasEl);
@@ -71,7 +66,7 @@ class Loader {
         else {
             dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
     }

package/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/Options/Classes/Options.js

@@ -35,6 +35,7 @@ class Options {
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.responsive = [];
+        this.style = {};
         this.themes = [];
         this.zLayers = 100;
     }
@@ -113,6 +114,7 @@ class Options {
         }
         this.motion.load(data.motion);
         this.particles.load(data.particles);
+        this.style = (0, Utils_1.deepExtend)(this.style, data.style);
         Utils_1.Plugins.loadOptions(this, data);
         if (data.responsive !== undefined) {
             for (const responsive of data.responsive) {

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

@@ -4,7 +4,7 @@ exports.Constants = void 0;
 class Constants {
 }
 exports.Constants = Constants;
-Constants.canvasClass = "tsparticles-canvas-el";
+Constants.generatedAttribute = "generated";
 Constants.randomColorValue = "random";
 Constants.midColorValue = "mid";
 Constants.touchEndEvent = "touchend";

package/Utils/EventListeners.js

@@ -131,7 +131,7 @@ 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/browser/Core/Canvas.d.ts

@@ -33,7 +33,7 @@ export declare class Canvas {
      * Initializes the canvas element
      */
     init(): void;
-    loadCanvas(canvas: HTMLCanvasElement, generatedCanvas?: boolean): void;
+    loadCanvas(canvas: HTMLCanvasElement): void;
     destroy(): void;
     /**
      * Paints the canvas background
@@ -43,7 +43,7 @@ export declare class Canvas {
      * Clears the canvas content
      */
     clear(): void;
-    windowResize(): void;
+    windowResize(): Promise<void>;
     /**
      * Calculates the size of the canvas
      */

package/browser/Core/Canvas.js

@@ -30,15 +30,15 @@ export class Canvas {
         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;
@@ -89,7 +89,7 @@ export class Canvas {
             });
         }
     }
-    windowResize() {
+    async windowResize() {
         if (!this.element) {
             return;
         }
@@ -104,7 +104,7 @@ export class Canvas {
             }
         }
         if (needsRefresh) {
-            container.refresh();
+            await container.refresh();
         }
     }
     /**
@@ -310,6 +310,16 @@ export class Canvas {
             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) => {

package/browser/Core/Loader.js

@@ -50,26 +50,21 @@ 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");
             /* get existing canvas if present, otherwise a new one will be created */
             if (existingCanvases.length) {
                 canvasEl = existingCanvases[0];
-                if (!canvasEl.className) {
-                    canvasEl.className = Constants.canvasClass;
-                }
-                generatedCanvas = false;
+                canvasEl.dataset[Constants.generatedAttribute] = "false";
             }
             else {
-                generatedCanvas = true;
                 /* create canvas element */
                 canvasEl = document.createElement("canvas");
-                canvasEl.className = Constants.canvasClass;
+                canvasEl.dataset[Constants.generatedAttribute] = "true";
                 /* set size canvas */
                 canvasEl.style.width = "100%";
                 canvasEl.style.height = "100%";
@@ -85,7 +80,7 @@ export class Loader {
         else {
             dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
     }

package/browser/Options/Classes/Options.d.ts

@@ -58,6 +58,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/browser/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";
@@ -36,6 +36,7 @@ export class Options {
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.responsive = [];
+        this.style = {};
         this.themes = [];
         this.zLayers = 100;
     }
@@ -140,6 +141,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/browser/Options/Interfaces/IOptions.d.ts

@@ -89,6 +89,7 @@ export interface IOptions {
      * @deprecated use the new detectRetina instead
      */
     retina_detect: boolean;
+    style: RecursivePartial<CSSStyleDeclaration>;
     /**
      * User-defined themes that can be retrieved by the particles [[Container]]
      */

package/browser/Utils/Constants.d.ts

@@ -3,10 +3,7 @@
  * @category Utils
  */
 export declare class Constants {
-    /**
-     * Particles canvas element class name
-     */
-    static readonly canvasClass: string;
+    static readonly generatedAttribute: string;
     static readonly randomColorValue: string;
     static readonly midColorValue: string;
     static readonly touchEndEvent: string;

package/browser/Utils/Constants.js

@@ -4,10 +4,7 @@
  */
 export class Constants {
 }
-/**
- * Particles canvas element class name
- */
-Constants.canvasClass = "tsparticles-canvas-el";
+Constants.generatedAttribute = "generated";
 Constants.randomColorValue = "random";
 Constants.midColorValue = "mid";
 Constants.touchEndEvent = "touchend";

package/browser/Utils/EventListeners.js

@@ -153,7 +153,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/Core/Canvas.d.ts

@@ -13,11 +13,11 @@ export declare class Canvas {
     private originalStyle?;
     constructor(container: Container);
     init(): void;
-    loadCanvas(canvas: HTMLCanvasElement, generatedCanvas?: boolean): void;
+    loadCanvas(canvas: HTMLCanvasElement): void;
     destroy(): void;
     paint(): void;
     clear(): void;
-    windowResize(): void;
+    windowResize(): Promise<void>;
     resize(): void;
     drawConnectLine(p1: IParticle, p2: IParticle): void;
     drawGrabLine(particle: IParticle, lineColor: IRgb, opacity: number, mousePos: ICoordinates): void;

package/esm/Core/Canvas.js

@@ -18,15 +18,15 @@ export class Canvas {
         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;
@@ -71,7 +71,7 @@ export class Canvas {
             });
         }
     }
-    windowResize() {
+    async windowResize() {
         if (!this.element) {
             return;
         }
@@ -85,7 +85,7 @@ export class Canvas {
             }
         }
         if (needsRefresh) {
-            container.refresh();
+            await container.refresh();
         }
     }
     resize() {
@@ -288,6 +288,16 @@ export class Canvas {
             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) => {

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.js

@@ -128,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsparticles",
-  "version": "1.37.6",
+  "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": {