tsparticles 1.37.5 → 1.39.1

package/Core/Canvas.d.ts

@@ -1,6 +1,6 @@
+import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
 import type { Container } from "./Container";
 import type { Particle } from "./Particle";
-import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
 export declare class Canvas {
     private readonly container;
     element?: HTMLCanvasElement;
@@ -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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const Utils_1 = require("../Utils");
-const Utils_2 = require("../Utils");
+const Utils_2 = require("./Utils");
 class Canvas {
     constructor(container) {
         this.container = container;
@@ -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_2.Constants.generatedAttribute in canvas.dataset
+                ? canvas.dataset[Utils_2.Constants.generatedAttribute] === "true"
+                : this.generatedCanvas;
         this.element = canvas;
         this.originalStyle = (0, Utils_1.deepExtend)({}, this.element.style);
         this.size.height = canvas.offsetHeight;
@@ -44,14 +44,14 @@ class Canvas {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
         this.draw((ctx) => {
-            (0, Utils_2.clear)(ctx, this.size);
+            (0, Utils_1.clear)(ctx, this.size);
         });
     }
     paint() {
         const options = this.container.actualOptions;
         this.draw((ctx) => {
             if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
-                (0, Utils_2.clear)(ctx, this.size);
+                (0, Utils_1.clear)(ctx, this.size);
                 this.paintBase((0, Utils_1.getStyleFromRgb)(this.coverColor, this.coverColor.a));
             }
             else {
@@ -70,11 +70,11 @@ class Canvas {
         }
         else {
             this.draw((ctx) => {
-                (0, Utils_2.clear)(ctx, this.size);
+                (0, Utils_1.clear)(ctx, this.size);
             });
         }
     }
-    windowResize() {
+    async windowResize() {
         if (!this.element) {
             return;
         }
@@ -88,7 +88,7 @@ class Canvas {
             }
         }
         if (needsRefresh) {
-            container.refresh();
+            await container.refresh();
         }
     }
     resize() {
@@ -276,12 +276,12 @@ class Canvas {
         const originalStyle = this.originalStyle;
         if (options.fullScreen.enable) {
             this.originalStyle = (0, Utils_1.deepExtend)({}, element.style);
-            element.style.position = "fixed";
-            element.style.zIndex = options.fullScreen.zIndex.toString(10);
-            element.style.top = "0";
-            element.style.left = "0";
-            element.style.width = "100%";
-            element.style.height = "100%";
+            element.style.setProperty("position", "fixed", "important");
+            element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
+            element.style.setProperty("top", "0", "important");
+            element.style.setProperty("left", "0", "important");
+            element.style.setProperty("width", "100%", "important");
+            element.style.setProperty("height", "100%", "important");
         }
         else if (originalStyle) {
             element.style.position = originalStyle.position;
@@ -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.setProperty(key, value, "important");
+        }
     }
     paintBase(baseColor) {
         this.draw((ctx) => {

package/Core/Container.d.ts

@@ -1,13 +1,12 @@
+import { FrameManager, Vector } from "./Utils";
+import type { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
 import { Canvas } from "./Canvas";
-import { Particles } from "./Particles";
-import { Retina } from "./Retina";
 import type { IOptions } from "../Options/Interfaces/IOptions";
-import { FrameManager } from "./FrameManager";
-import type { RecursivePartial } from "../Types";
 import { Options } from "../Options/Classes/Options";
 import { Particle } from "./Particle";
-import { Vector } from "./Particle/Vector";
-import { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
+import { Particles } from "./Particles";
+import type { RecursivePartial } from "../Types";
+import { Retina } from "./Retina";
 export declare class Container {
     readonly id: string;
     started: boolean;

package/Core/Container.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
+const Utils_1 = require("./Utils");
+const Utils_2 = require("../Utils");
 const Canvas_1 = require("./Canvas");
+const Options_1 = require("../Options/Classes/Options");
 const Particles_1 = require("./Particles");
 const Retina_1 = require("./Retina");
-const FrameManager_1 = require("./FrameManager");
-const Options_1 = require("../Options/Classes/Options");
-const Utils_1 = require("../Utils");
-const Vector_1 = require("./Particle/Vector");
 class Container {
     constructor(id, sourceOptions, ...presets) {
         this.id = id;
@@ -26,11 +25,11 @@ class Container {
         this.retina = new Retina_1.Retina(this);
         this.canvas = new Canvas_1.Canvas(this);
         this.particles = new Particles_1.Particles(this);
-        this.drawer = new FrameManager_1.FrameManager(this);
+        this.drawer = new Utils_1.FrameManager(this);
         this.presets = presets;
         this.pathGenerator = {
             generate: () => {
-                const v = Vector_1.Vector.create(0, 0);
+                const v = Utils_1.Vector.create(0, 0);
                 v.length = Math.random();
                 v.angle = Math.random() * Math.PI * 2;
                 return v;
@@ -85,7 +84,7 @@ class Container {
     }
     pause() {
         if (this.drawAnimationFrame !== undefined) {
-            (0, Utils_1.cancelAnimation)()(this.drawAnimationFrame);
+            (0, Utils_2.cancelAnimation)()(this.drawAnimationFrame);
             delete this.drawAnimationFrame;
         }
         if (this.paused) {
@@ -102,7 +101,7 @@ class Container {
     }
     draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = (0, Utils_1.animate)()((timestamp) => {
+        this.drawAnimationFrame = (0, Utils_2.animate)()((timestamp) => {
             if (refreshTime) {
                 this.lastFrameTime = undefined;
                 refreshTime = false;
@@ -332,7 +331,7 @@ class Container {
         this.canvas.initBackground();
         this.canvas.resize();
         this.zLayers = this.actualOptions.zLayers;
-        this.duration = (0, Utils_1.getRangeValue)(this.actualOptions.duration);
+        this.duration = (0, Utils_2.getRangeValue)(this.actualOptions.duration);
         this.lifeTime = 0;
         this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 60;
         const availablePlugins = Utils_1.Plugins.getAvailablePlugins(this);

package/Core/Interfaces/Gradients.d.ts

@@ -1,7 +1,7 @@
-import type { IColor } from "./Colors";
 import type { GradientType, RotateDirectionAlt } from "../../Enums";
-import type { RotateDirection } from "../../Enums";
+import type { IColor } from "./Colors";
 import type { RangeValue } from "../../Types";
+import type { RotateDirection } from "../../Enums";
 export interface IGradientColorOpacity {
     value: RangeValue;
 }

package/Core/Interfaces/ICircleBouncer.d.ts

@@ -1,5 +1,5 @@
-import type { Vector } from "../Particle/Vector";
 import type { ICoordinates } from "./ICoordinates";
+import type { Vector } from "../Utils";
 export interface ICircleBouncer {
     position: ICoordinates;
     velocity: Vector;

package/Core/Interfaces/IContainerPlugin.d.ts

@@ -1,10 +1,10 @@
+import type { ClickMode, OutModeDirection } from "../../Enums";
+import type { IColor } from "./Colors";
 import type { ICoordinates } from "./ICoordinates";
+import type { IDelta } from "./IDelta";
+import type { IOptions } from "../../Options/Interfaces/IOptions";
 import type { Particle } from "../Particle";
-import type { ClickMode, OutModeDirection } from "../../Enums";
 import type { RecursivePartial } from "../../Types";
-import type { IOptions } from "../../Options/Interfaces/IOptions";
-import type { IDelta } from "./IDelta";
-import type { IColor } from "./Colors";
 export interface IContainerPlugin {
     clickPositionValid?: (position: ICoordinates) => boolean;
     draw?: (context: CanvasRenderingContext2D, delta: IDelta) => void;

package/Core/Interfaces/IExternalInteractor.d.ts

@@ -1,5 +1,5 @@
-import type { IInteractor } from "./IInteractor";
 import type { IDelta } from "./IDelta";
+import type { IInteractor } from "./IInteractor";
 export interface IExternalInteractor extends IInteractor {
     isEnabled(): boolean;
     interact(delta: IDelta): void;

package/Core/Interfaces/IInteractor.d.ts

@@ -1,5 +1,5 @@
-import type { Particle } from "../Particle";
 import type { InteractorType } from "../../Enums";
+import type { Particle } from "../Particle";
 export interface IInteractor {
     type: InteractorType;
     reset(particle: Particle): void;

package/Core/Interfaces/IMovePathGenerator.d.ts

@@ -1,6 +1,6 @@
 import type { Container } from "../Container";
 import type { Particle } from "../Particle";
-import { Vector } from "../Particle/Vector";
+import { Vector } from "../Utils";
 export interface IMovePathGenerator {
     generate: (particle: Particle) => Vector;
     init: (container: Container) => void;

package/Core/Interfaces/IParticle.d.ts

@@ -1,17 +1,17 @@
-import type { IStroke } from "../../Options/Interfaces/Particles/IStroke";
-import type { ICoordinates3d } from "./ICoordinates";
-import type { ShapeType } from "../../Enums";
+import type { IHsl, IRgb } from "./Colors";
 import type { IParticleTiltValueAnimation, IParticleValueAnimation } from "./IParticleValueAnimation";
-import type { IShapeValues } from "./IShapeValues";
 import type { IBubbleParticleData } from "./IBubbleParticleData";
-import type { IParticles } from "../../Options/Interfaces/Particles/IParticles";
-import type { IHsl, IRgb } from "./Colors";
-import type { IParticleHslAnimation } from "./IParticleHslAnimation";
-import type { Vector } from "../Particle/Vector";
+import type { ICoordinates3d } from "./ICoordinates";
 import type { IParticleGradientAnimation } from "./IParticleGradientAnimation";
+import type { IParticleHslAnimation } from "./IParticleHslAnimation";
 import type { IParticleRetinaProps } from "./IParticleRetinaProps";
 import type { IParticleRoll } from "./IParticleRoll";
 import type { IParticleWobble } from "./IParticleWobble";
+import type { IParticles } from "../../Options/Interfaces/Particles/IParticles";
+import type { IShapeValues } from "./IShapeValues";
+import type { IStroke } from "../../Options/Interfaces/Particles/IStroke";
+import type { ShapeType } from "../../Enums";
+import type { Vector } from "../Utils";
 export interface IParticle {
     misplaced: boolean;
     randomIndexData?: number;

package/Core/Interfaces/IParticleGradientAnimation.d.ts

@@ -1,6 +1,6 @@
-import type { IParticleValueAnimation } from "./IParticleValueAnimation";
 import type { GradientType } from "../../Enums";
 import type { IParticleGradientColorAnimation } from "./IParticleGradientColorAnimation";
+import type { IParticleValueAnimation } from "./IParticleValueAnimation";
 export interface IParticleGradientAnimation {
     angle: IParticleValueAnimation<number>;
     type: GradientType;

package/Core/Interfaces/IParticleSpin.d.ts

@@ -1,5 +1,5 @@
-import type { RotateDirection } from "../../Enums";
 import type { ICoordinates } from "./ICoordinates";
+import type { RotateDirection } from "../../Enums";
 export interface IParticleSpin {
     acceleration: number;
     angle: number;

package/Core/Interfaces/IParticlesInteractor.d.ts

@@ -1,6 +1,6 @@
-import type { Particle } from "../Particle";
-import type { IInteractor } from "./IInteractor";
 import type { IDelta } from "./IDelta";
+import type { IInteractor } from "./IInteractor";
+import type { Particle } from "../Particle";
 export interface IParticlesInteractor extends IInteractor {
     isEnabled(particle: Particle): boolean;
     interact(particle: Particle, delta: IDelta): void;

package/Core/Interfaces/IPlugin.d.ts

@@ -1,8 +1,8 @@
 import type { Container } from "../Container";
 import type { IContainerPlugin } from "./IContainerPlugin";
 import type { IOptions } from "../../Options/Interfaces/IOptions";
-import type { RecursivePartial } from "../../Types";
 import type { Options } from "../../Options/Classes/Options";
+import type { RecursivePartial } from "../../Types";
 export interface IPlugin {
     readonly id: string;
     needsPlugin(options?: RecursivePartial<IOptions>): boolean;

package/Core/Interfaces/index.d.ts

@@ -19,13 +19,15 @@ export * from "./IParticle";
 export * from "./IParticleGradientAnimation";
 export * from "./IParticleGradientColorAnimation";
 export * from "./IParticleHslAnimation";
+export * from "./IParticlesInteractor";
 export * from "./IParticleLife";
 export * from "./IParticleLoops";
 export * from "./IParticleRetinaProps";
+export * from "./IParticleRoll";
 export * from "./IParticleSpin";
 export * from "./IParticleUpdater";
 export * from "./IParticleValueAnimation";
-export * from "./IParticlesInteractor";
+export * from "./IParticleWobble";
 export * from "./IPlugin";
 export * from "./IRangeValue";
 export * from "./IRectSideResult";

package/Core/Interfaces/index.js

@@ -31,13 +31,15 @@ __exportStar(require("./IParticle"), exports);
 __exportStar(require("./IParticleGradientAnimation"), exports);
 __exportStar(require("./IParticleGradientColorAnimation"), exports);
 __exportStar(require("./IParticleHslAnimation"), exports);
+__exportStar(require("./IParticlesInteractor"), exports);
 __exportStar(require("./IParticleLife"), exports);
 __exportStar(require("./IParticleLoops"), exports);
 __exportStar(require("./IParticleRetinaProps"), exports);
+__exportStar(require("./IParticleRoll"), exports);
 __exportStar(require("./IParticleSpin"), exports);
 __exportStar(require("./IParticleUpdater"), exports);
 __exportStar(require("./IParticleValueAnimation"), exports);
-__exportStar(require("./IParticlesInteractor"), exports);
+__exportStar(require("./IParticleWobble"), exports);
 __exportStar(require("./IPlugin"), exports);
 __exportStar(require("./IRangeValue"), exports);
 __exportStar(require("./IRectSideResult"), exports);

package/Core/Loader.d.ts

@@ -1,7 +1,7 @@
 import { Container } from "./Container";
 import type { IOptions } from "../Options/Interfaces/IOptions";
-import type { RecursivePartial } from "../Types";
 import type { Particle } from "./Particle";
+import type { RecursivePartial } from "../Types";
 import type { SingleOrMultiple } from "../Types";
 interface LoaderParams {
     element?: HTMLElement;

package/Core/Loader.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
+const Utils_1 = require("./Utils");
 const Container_1 = require("./Container");
-const Utils_1 = require("../Utils");
+const Utils_2 = require("../Utils");
 const tsParticlesDom = [];
 function fetchError(statusCode) {
     console.error(`Error tsParticles - fetch status: ${statusCode}`);
@@ -30,7 +31,7 @@ class Loader {
             domContainer.id = tagId;
             (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
         }
-        const currentOptions = options instanceof Array ? (0, Utils_1.itemFromArray)(options, index) : options;
+        const currentOptions = options instanceof Array ? (0, Utils_2.itemFromArray)(options, index) : options;
         const dom = Loader.dom();
         const oldIndex = dom.findIndex((v) => v.id === tagId);
         if (oldIndex >= 0) {
@@ -41,24 +42,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,13 +67,13 @@ class Loader {
         else {
             dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
     }
     static async loadRemoteOptions(params) {
         const { url: jsonUrl, index } = params;
-        const url = jsonUrl instanceof Array ? (0, Utils_1.itemFromArray)(jsonUrl, index) : jsonUrl;
+        const url = jsonUrl instanceof Array ? (0, Utils_2.itemFromArray)(jsonUrl, index) : jsonUrl;
         if (!url) {
             return;
         }

package/Core/Particle.d.ts

@@ -1,14 +1,11 @@
+import { ShapeType } from "../Enums";
+import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleRetinaProps, IParticleRoll, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IParticleWobble, IRgb, IShapeValues } from "./Interfaces";
+import { Vector, Vector3d } from "./Utils";
 import type { Container } from "./Container";
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
-import { ShapeType } from "../Enums";
 import type { RecursivePartial } from "../Types";
 import type { Stroke } from "../Options/Classes/Particles/Stroke";
-import { Vector } from "./Particle/Vector";
-import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IRgb, IShapeValues, IParticleRetinaProps } from "./Interfaces";
-import { Vector3d } from "./Particle/Vector3d";
-import { IParticleRoll } from "./Interfaces/IParticleRoll";
-import { IParticleWobble } from "./Interfaces/IParticleWobble";
 export declare class Particle implements IParticle {
     readonly id: number;
     readonly container: Container;