tsparticles 1.37.3 → 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/README.md

@@ -13,6 +13,36 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
 
 ---
 
+## Table of Contents
+
+- [Use for your website](#Do-you-want-to-use-it-on-your-website)
+  - [Library installation](#Library-installation)
+- [Official components for some of the most used frameworks](#Official-components-for-some-of-the-most-used-frameworks)
+  - [Angular](#Angular)
+  - [Inferno](#Inferno)
+  - [jQuery](#jQuery)
+  - [Preact](#Preact)
+  - [ReactJS](#ReactJS)
+  - [RiotJS](#RiotJS)
+  - [SolidJS](#SolidJS)
+  - [Svelte](#Svelte)
+  - [VueJS 2.x](#VueJS-2x)
+  - [VueJS 3.x](#VueJS-3x)
+  - [Web Components](#Web-Components)
+  - [WordPress](#WordPress)
+- [Templates and Resources](#Templates-and-Resources)
+- [Demo / Generator](#Demo--Generator)
+  - [Characters as particles](#Characters-as-particles)
+  - [Mouse hover connections](#Mouse-hover-connections)
+  - [Polygon mask](#Polygon-mask)
+  - [Animated stars](#Animated-stars)
+  - [Nyan cat flying on scrolling stars](#Nyan-cat-flying-on-scrolling-stars)
+  - [Background Mask particles](#Background-Mask-particles)
+- [Migrating from Particles.js](#Migrating-from-Particlesjs)
+- [Plugins/Customizations](#PluginsCustomizations)
+
+---
+
 ## Do you want to use it on your website?
 
 _Documentation and Development references [here](https://particles.js.org/docs/) 📖_
@@ -221,6 +251,22 @@ You can find the instructions [here](https://github.com/matteobruni/tsparticles/
 
 You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/react/README.md)
 
+### RiotJS
+
+#### `riot-particles`
+
+[![npm](https://img.shields.io/npm/v/riot-particles)](https://www.npmjs.com/package/riot-particles) [![npm](https://img.shields.io/npm/dm/riot-particles)](https://www.npmjs.com/package/riot-particles)
+
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/riot/README.md)
+
+### SolidJS
+
+#### `solid-particles`
+
+[![npm](https://img.shields.io/npm/v/solid-particles)](https://www.npmjs.com/package/solid-particles) [![npm](https://img.shields.io/npm/dm/solid-particles)](https://www.npmjs.com/package/solid-particles)
+
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/solid/README.md)
+
 ### Svelte
 
 #### `svelte-particles`
@@ -245,6 +291,28 @@ You can find the instructions [here](https://github.com/matteobruni/tsparticles/
 
 You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/vue3/README.md)
 
+### Web Components
+
+#### `web-particles`
+
+[![npm](https://img.shields.io/npm/v/web-particles)](https://www.npmjs.com/package/web-particles) [![npm](https://img.shields.io/npm/dm/web-particles)](https://www.npmjs.com/package/web-particles)
+
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/components/web/README.md)
+
+### WordPress
+
+Actually an official tsParticles plugin isn't existing, but I have a collaboration with
+the `Premium Addons for Elementor` plugin collection.
+
+<div style="float: left; margin-right: 10px;">
+    <img width="64" alt="Premium Addons for Elementor" src="https://particles.js.org/images/premium-addons-wordpress-plugin.png" />
+</div>
+<div>
+    Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. <a href="https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/" target="_blank">Check It Now</a>.<br />
+    Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. <a href="https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/" target="_blank">See a Live Example</a>.
+</div>
+<div style="clear: both;"></div>
+
 ---
 
 ## **_Demo / Generator_**

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

@@ -35,6 +35,7 @@ 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() {
@@ -60,9 +61,19 @@ class EventListeners {
         else {
             container.interactivity.element = container.canvas.element;
         }
-        const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+        const mediaMatch = !(0, Utils_1.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) {
@@ -120,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/Utils/Utils.js

@@ -200,14 +200,11 @@ function circleBounceDataFromParticle(p) {
 }
 exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
 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 } = (0, NumberUtils_1.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/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.d.ts

@@ -16,6 +16,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/browser/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 };
@@ -40,6 +40,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();
     }
     /**
@@ -75,9 +76,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;
         /* detect mouse pos - on hover / click event */
@@ -142,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/browser/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 };
@@ -188,16 +188,13 @@ 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);
     // Prevent accidental overlap of particles
     if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) {
         // Grab angle between the two colliding particles
-        const angle = -Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x);
+        const angle = -Math.atan2(yDist, xDist);
         // Store mass in var for better readability in collision equation
         const m1 = p1.mass;
         const m2 = p2.mass;

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) => {