@tsparticles/engine 3.2.2 → 3.4.0

package/types/Core/Particles.d.ts

@@ -7,7 +7,7 @@ import type { IMouseData } from "./Interfaces/IMouseData.js";
 import type { IParticleMover } from "./Interfaces/IParticleMover.js";
 import type { IParticleUpdater } from "./Interfaces/IParticleUpdater.js";
 import type { IParticlesOptions } from "../Options/Interfaces/Particles/IParticlesOptions.js";
-import type { Particle } from "./Particle.js";
+import { Particle } from "./Particle.js";
 import { QuadTree } from "./Utils/QuadTree.js";
 import type { RecursivePartial } from "../Types/RecursivePartial.js";
 export declare class Particles {
@@ -29,26 +29,26 @@ export declare class Particles {
     private _zArray;
     constructor(engine: Engine, container: Container);
     get count(): number;
-    addManualParticles(): Promise<void>;
-    addParticle(position?: ICoordinates, overrideOptions?: RecursivePartial<IParticlesOptions>, group?: string, initializer?: (particle: Particle) => boolean): Promise<Particle | undefined>;
+    addManualParticles(): void;
+    addParticle(position?: ICoordinates, overrideOptions?: RecursivePartial<IParticlesOptions>, group?: string, initializer?: (particle: Particle) => boolean): Particle | undefined;
     clear(): void;
     destroy(): void;
-    draw(delta: IDelta): Promise<void>;
+    draw(delta: IDelta): void;
     filter(condition: (particle: Particle) => boolean): Particle[];
     find(condition: (particle: Particle) => boolean): Particle | undefined;
     get(index: number): Particle | undefined;
     handleClickMode(mode: string): void;
     init(): Promise<void>;
     initPlugins(): Promise<void>;
-    push(nb: number, mouse?: IMouseData, overrideOptions?: RecursivePartial<IParticlesOptions>, group?: string): Promise<void>;
+    push(nb: number, mouse?: IMouseData, overrideOptions?: RecursivePartial<IParticlesOptions>, group?: string): void;
     redraw(): Promise<void>;
     remove(particle: Particle, group?: string, override?: boolean): void;
     removeAt(index: number, quantity?: number, group?: string, override?: boolean): void;
     removeQuantity(quantity: number, group?: string): void;
-    setDensity(): Promise<void>;
+    setDensity(): void;
     setLastZIndex(zIndex: number): void;
     setResizeFactor(factor: IDimension): void;
-    update(delta: IDelta): Promise<void>;
+    update(delta: IDelta): void;
     private readonly _addToPool;
     private readonly _applyDensity;
     private readonly _initDensityFactor;

package/types/Core/Utils/ExternalInteractorBase.d.ts

@@ -9,7 +9,7 @@ export declare abstract class ExternalInteractorBase<TContainer extends Containe
     protected constructor(container: TContainer);
     abstract clear(particle: TParticle, delta: IDelta): void;
     abstract init(): void;
-    abstract interact(delta: IDelta): Promise<void>;
+    abstract interact(delta: IDelta): void;
     abstract isEnabled(particle?: TParticle): boolean;
     abstract reset(particle: TParticle): void;
 }

package/types/Core/Utils/InteractionManager.d.ts

@@ -9,9 +9,9 @@ export declare class InteractionManager {
     private _interactors;
     private _particleInteractors;
     constructor(engine: Engine, container: Container);
-    externalInteract(delta: IDelta): Promise<void>;
+    externalInteract(delta: IDelta): void;
     handleClickMode(mode: string): void;
     init(): Promise<void>;
-    particlesInteract(particle: Particle, delta: IDelta): Promise<void>;
+    particlesInteract(particle: Particle, delta: IDelta): void;
     reset(particle: Particle): void;
 }

package/types/Core/Utils/ParticlesInteractorBase.d.ts

@@ -9,7 +9,7 @@ export declare abstract class ParticlesInteractorBase<TContainer extends Contain
     protected constructor(container: TContainer);
     abstract clear(particle: TParticle, delta: IDelta): void;
     abstract init(): void;
-    abstract interact(particle: TParticle, delta: IDelta): Promise<void>;
+    abstract interact(particle: TParticle, delta: IDelta): void;
     abstract isEnabled(particle: TParticle): boolean;
     abstract reset(particle: TParticle): void;
 }

package/types/Enums/AnimationStatus.d.ts

@@ -1,4 +1,4 @@
-export declare const enum AnimationStatus {
+export declare enum AnimationStatus {
     increasing = "increasing",
     decreasing = "decreasing"
 }

package/types/Enums/Directions/MoveDirection.d.ts

@@ -1,4 +1,4 @@
-export declare const enum MoveDirection {
+export declare enum MoveDirection {
     bottom = "bottom",
     bottomLeft = "bottom-left",
     bottomRight = "bottom-right",

package/types/Enums/Directions/OutModeDirection.d.ts

@@ -1,4 +1,4 @@
-export declare const enum OutModeDirection {
+export declare enum OutModeDirection {
     bottom = "bottom",
     left = "left",
     right = "right",

package/types/Enums/Directions/RotateDirection.d.ts

@@ -1,4 +1,4 @@
-export declare const enum RotateDirection {
+export declare enum RotateDirection {
     clockwise = "clockwise",
     counterClockwise = "counter-clockwise",
     random = "random"

package/types/Enums/InteractivityDetect.d.ts

@@ -1,4 +1,4 @@
-export declare const enum InteractivityDetect {
+export declare enum InteractivityDetect {
     canvas = "canvas",
     parent = "parent",
     window = "window"

package/types/Enums/Modes/AnimationMode.d.ts

@@ -1,4 +1,4 @@
-export declare const enum AnimationMode {
+export declare enum AnimationMode {
     auto = "auto",
     increase = "increase",
     decrease = "decrease",

package/types/Enums/Modes/CollisionMode.d.ts

@@ -1,4 +1,4 @@
-export declare const enum CollisionMode {
+export declare enum CollisionMode {
     absorb = "absorb",
     bounce = "bounce",
     destroy = "destroy"

package/types/Enums/Modes/LimitMode.d.ts

@@ -1,4 +1,4 @@
-export declare const enum LimitMode {
+export declare enum LimitMode {
     delete = "delete",
     wait = "wait"
 }

package/types/Enums/Modes/OutMode.d.ts

@@ -1,4 +1,4 @@
-export declare const enum OutMode {
+export declare enum OutMode {
     bounce = "bounce",
     none = "none",
     out = "out",

package/types/Enums/Modes/PixelMode.d.ts

@@ -1,4 +1,4 @@
-export declare const enum PixelMode {
+export declare enum PixelMode {
     precise = "precise",
     percent = "percent"
 }

package/types/Enums/Modes/ResponsiveMode.d.ts

@@ -1,4 +1,4 @@
-export declare const enum ResponsiveMode {
+export declare enum ResponsiveMode {
     screen = "screen",
     canvas = "canvas"
 }

package/types/Enums/Modes/ThemeMode.d.ts

@@ -1,4 +1,4 @@
-export declare const enum ThemeMode {
+export declare enum ThemeMode {
     any = "any",
     dark = "dark",
     light = "light"

package/types/Enums/Types/AlterType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum AlterType {
+export declare enum AlterType {
     darken = "darken",
     enlighten = "enlighten"
 }

package/types/Enums/Types/DestroyType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum DestroyType {
+export declare enum DestroyType {
     none = "none",
     max = "max",
     min = "min"

package/types/Enums/Types/DivType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum DivType {
+export declare enum DivType {
     circle = "circle",
     rectangle = "rectangle"
 }

package/types/Enums/Types/EasingType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum EasingType {
+export declare enum EasingType {
     easeInBack = "ease-in-back",
     easeInCirc = "ease-in-circ",
     easeInCubic = "ease-in-cubic",

package/types/Enums/Types/EventType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum EventType {
+export declare enum EventType {
     configAdded = "configAdded",
     containerInit = "containerInit",
     particlesSetup = "particlesSetup",

package/types/Enums/Types/GradientType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum GradientType {
+export declare enum GradientType {
     linear = "linear",
     radial = "radial",
     random = "random"

package/types/Enums/Types/InteractorType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum InteractorType {
+export declare enum InteractorType {
     external = "external",
     particles = "particles"
 }

package/types/Enums/Types/ParticleOutType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum ParticleOutType {
+export declare enum ParticleOutType {
     normal = "normal",
     inside = "inside",
     outside = "outside"

package/types/Enums/Types/StartValueType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum StartValueType {
+export declare enum StartValueType {
     max = "max",
     min = "min",
     random = "random"

package/types/Options/Classes/Options.d.ts

@@ -5,6 +5,7 @@ import type { Engine } from "../../Core/Engine.js";
 import { FullScreen } from "./FullScreen/FullScreen.js";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader.js";
 import type { IOptions } from "../Interfaces/IOptions.js";
+import type { ISourceOptions } from "../../Types/ISourceOptions.js";
 import { Interactivity } from "./Interactivity/Interactivity.js";
 import { ManualParticle } from "./ManualParticle.js";
 import type { RangeValue } from "../../Types/RangeValue.js";
@@ -44,7 +45,7 @@ export declare class Options implements IOptions, IOptionLoader<IOptions> {
     private readonly _container;
     private readonly _engine;
     constructor(engine: Engine, container: Container);
-    load(data?: RecursivePartial<IOptions>): void;
+    load(data?: ISourceOptions): void;
     setResponsive(width: number, pxRatio: number, defaultOptions: IOptions): number | undefined;
     setTheme(name?: string): void;
     private readonly _findDefaultTheme;

package/types/Options/Classes/Responsive.d.ts

@@ -1,12 +1,12 @@
 import type { IOptionLoader } from "../Interfaces/IOptionLoader.js";
-import type { IOptions } from "../Interfaces/IOptions.js";
 import type { IResponsive } from "../Interfaces/IResponsive.js";
+import type { ISourceOptions } from "../../Types/ISourceOptions.js";
 import type { RecursivePartial } from "../../Types/RecursivePartial.js";
 import { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
 export declare class Responsive implements IResponsive, IOptionLoader<IResponsive> {
     maxWidth: number;
     mode: ResponsiveMode | keyof typeof ResponsiveMode;
-    options: RecursivePartial<IOptions>;
+    options: ISourceOptions;
     constructor();
     load(data?: RecursivePartial<IResponsive>): void;
 }

package/types/Options/Classes/Theme/Theme.d.ts

@@ -1,12 +1,12 @@
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader.js";
-import type { IOptions } from "../../Interfaces/IOptions.js";
+import type { ISourceOptions } from "../../../Types/ISourceOptions.js";
 import type { ITheme } from "../../Interfaces/Theme/ITheme.js";
 import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
 import { ThemeDefault } from "./ThemeDefault.js";
 export declare class Theme implements ITheme, IOptionLoader<ITheme> {
     readonly default: ThemeDefault;
     name: string;
-    options?: RecursivePartial<IOptions>;
+    options?: ISourceOptions;
     constructor();
     load(data?: RecursivePartial<ITheme>): void;
 }

package/types/Options/Interfaces/IResponsive.d.ts

@@ -1,8 +1,7 @@
-import type { IOptions } from "./IOptions.js";
-import type { RecursivePartial } from "../../Types/RecursivePartial.js";
+import type { ISourceOptions } from "../../Types/ISourceOptions.js";
 import type { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
 export interface IResponsive {
     maxWidth: number;
     mode: ResponsiveMode | keyof typeof ResponsiveMode;
-    options: RecursivePartial<IOptions>;
+    options: ISourceOptions;
 }

package/types/Options/Interfaces/Theme/ITheme.d.ts

@@ -1,8 +1,7 @@
-import type { IOptions } from "../IOptions.js";
+import type { ISourceOptions } from "../../../Types/ISourceOptions.js";
 import type { IThemeDefault } from "./IThemeDefault.js";
-import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
 export interface ITheme {
     default: IThemeDefault;
     name: string;
-    options?: RecursivePartial<IOptions>;
+    options?: ISourceOptions;
 }

package/types/Types/RangeType.d.ts

@@ -1,4 +1,4 @@
-export declare const enum RangeType {
+export declare enum RangeType {
     circle = "circle",
     rectangle = "rectangle"
 }

package/types/Utils/CanvasUtils.d.ts

@@ -11,7 +11,7 @@ export declare function drawLine(context: CanvasRenderingContext2D, begin: ICoor
 export declare function paintBase(context: CanvasRenderingContext2D, dimension: IDimension, baseColor?: string): void;
 export declare function paintImage(context: CanvasRenderingContext2D, dimension: IDimension, image: HTMLImageElement | undefined, opacity: number): void;
 export declare function clear(context: CanvasRenderingContext2D, dimension: IDimension): void;
-export declare function drawParticle(data: IDrawParticleParams): Promise<void>;
+export declare function drawParticle(data: IDrawParticleParams): void;
 interface DrawShapeData {
     container: Container;
     context: CanvasRenderingContext2D;
@@ -27,10 +27,10 @@ interface DrawShapeData {
         d: number;
     };
 }
-export declare function drawEffect(data: DrawShapeData): Promise<void>;
-export declare function drawShape(data: DrawShapeData): Promise<void>;
-export declare function drawShapeAfterDraw(data: DrawShapeData): Promise<void>;
-export declare function drawPlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, delta: IDelta): Promise<void>;
-export declare function drawParticlePlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, particle: Particle, delta: IDelta): Promise<void>;
+export declare function drawEffect(data: DrawShapeData): void;
+export declare function drawShape(data: DrawShapeData): void;
+export declare function drawShapeAfterDraw(data: DrawShapeData): void;
+export declare function drawPlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, delta: IDelta): void;
+export declare function drawParticlePlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;
 export declare function alterHsl(color: IHsl, type: AlterType, value: number): IHsl;
 export {};

package/umd/Core/Canvas.js

@@ -43,7 +43,7 @@
     class Canvas {
         constructor(container) {
             this.container = container;
-            this._applyPostDrawUpdaters = (particle) => {
+            this._applyPostDrawUpdaters = particle => {
                 for (const updater of this._postDrawUpdaters) {
                     updater.afterDraw?.(particle);
                 }
@@ -73,7 +73,7 @@
                     plugin.resize?.();
                 }
             };
-            this._getPluginParticleColors = (particle) => {
+            this._getPluginParticleColors = particle => {
                 let fColor, sColor;
                 for (const plugin of this._colorPlugins) {
                     if (!fColor && plugin.particleFillColor) {
@@ -113,7 +113,7 @@
                             };
                             resolve();
                         });
-                        img.addEventListener("error", (evt) => {
+                        img.addEventListener("error", evt => {
                             reject(evt.error);
                         });
                         img.src = cover.image;
@@ -174,28 +174,33 @@
                             };
                             resolve();
                         });
-                        img.addEventListener("error", (evt) => {
+                        img.addEventListener("error", evt => {
                             reject(evt.error);
                         });
                         img.src = trailFill.image;
                     });
                 }
             };
-            this._paintBase = (baseColor) => {
-                this.draw((ctx) => (0, CanvasUtils_js_1.paintBase)(ctx, this.size, baseColor));
+            this._paintBase = baseColor => {
+                this.draw(ctx => (0, CanvasUtils_js_1.paintBase)(ctx, this.size, baseColor));
             };
             this._paintImage = (image, opacity) => {
-                this.draw((ctx) => (0, CanvasUtils_js_1.paintImage)(ctx, this.size, image, opacity));
+                this.draw(ctx => (0, CanvasUtils_js_1.paintImage)(ctx, this.size, image, opacity));
             };
             this._repairStyle = () => {
                 const element = this.element;
                 if (!element) {
                     return;
                 }
-                this._safeMutationObserver((observer) => observer.disconnect());
+                this._safeMutationObserver(observer => observer.disconnect());
                 this._initStyle();
                 this.initBackground();
-                this._safeMutationObserver((observer) => observer.observe(element, { attributes: true }));
+                this._safeMutationObserver(observer => {
+                    if (!element || !(element instanceof Node)) {
+                        return;
+                    }
+                    observer.observe(element, { attributes: true });
+                });
             };
             this._resetOriginalStyle = () => {
                 const element = this.element, originalStyle = this._originalStyle;
@@ -204,7 +209,7 @@
                 }
                 setStyle(element, originalStyle);
             };
-            this._safeMutationObserver = (callback) => {
+            this._safeMutationObserver = callback => {
                 if (!this._mutationObserver) {
                     return;
                 }
@@ -253,7 +258,7 @@
                 }
             }
             else if (options.clear) {
-                this.draw((ctx) => {
+                this.draw(ctx => {
                     (0, CanvasUtils_js_1.clear)(ctx, this.size);
                 });
             }
@@ -282,11 +287,11 @@
         drawAsync(cb) {
             const ctx = this._context;
             if (!ctx) {
-                return Promise.resolve(undefined);
+                return undefined;
             }
             return cb(ctx);
         }
-        async drawParticle(particle, delta) {
+        drawParticle(particle, delta) {
             if (particle.spawning || particle.destroyed) {
                 return;
             }
@@ -305,13 +310,13 @@
             if (!fColor && !sColor) {
                 return;
             }
-            await this.drawAsync(async (ctx) => {
+            this.draw((ctx) => {
                 const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactorOffset = 1, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, defaultOpacity = 1, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
                     fill: fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
                 };
                 colorStyles.stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
                 this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
-                await (0, CanvasUtils_js_1.drawParticle)({
+                (0, CanvasUtils_js_1.drawParticle)({
                     container,
                     context: ctx,
                     particle,
@@ -327,15 +332,15 @@
                 this._applyPostDrawUpdaters(particle);
             });
         }
-        async drawParticlePlugin(plugin, particle, delta) {
-            await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
+        drawParticlePlugin(plugin, particle, delta) {
+            this.draw(ctx => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
         }
-        async drawPlugin(plugin, delta) {
-            await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
+        drawPlugin(plugin, delta) {
+            this.draw(ctx => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
         }
         async init() {
-            this._safeMutationObserver((obs) => obs.disconnect());
-            this._mutationObserver = (0, Utils_js_1.safeMutationObserver)((records) => {
+            this._safeMutationObserver(obs => obs.disconnect());
+            this._mutationObserver = (0, Utils_js_1.safeMutationObserver)(records => {
                 for (const record of records) {
                     if (record.type === "attributes" && record.attributeName === "style") {
                         this._repairStyle();
@@ -352,8 +357,8 @@
                 (0, Utils_js_1.getLogger)().error(e);
             }
             this.initBackground();
-            this._safeMutationObserver((obs) => {
-                if (!this.element) {
+            this._safeMutationObserver(obs => {
+                if (!this.element || !(this.element instanceof Node)) {
                     return;
                 }
                 obs.observe(this.element, { attributes: true });
@@ -420,8 +425,8 @@
             this.size.height = canvas.offsetHeight;
             this.size.width = canvas.offsetWidth;
             this._context = this.element.getContext("2d");
-            this._safeMutationObserver((obs) => {
-                if (!this.element) {
+            this._safeMutationObserver(obs => {
+                if (!this.element || !(this.element instanceof Node)) {
                     return;
                 }
                 obs.observe(this.element, { attributes: true });
@@ -431,7 +436,7 @@
         }
         paint() {
             const options = this.container.actualOptions;
-            this.draw((ctx) => {
+            this.draw(ctx => {
                 if (options.backgroundMask.enable && options.backgroundMask.cover) {
                     (0, CanvasUtils_js_1.clear)(ctx, this.size);
                     if (this._coverImage) {
@@ -475,16 +480,16 @@
             return true;
         }
         stop() {
-            this._safeMutationObserver((obs) => obs.disconnect());
+            this._safeMutationObserver(obs => obs.disconnect());
             this._mutationObserver = undefined;
-            this.draw((ctx) => (0, CanvasUtils_js_1.clear)(ctx, this.size));
+            this.draw(ctx => (0, CanvasUtils_js_1.clear)(ctx, this.size));
         }
         async windowResize() {
             if (!this.element || !this.resize()) {
                 return;
             }
             const container = this.container, needsRefresh = container.updateActualOptions();
-            await container.particles.setDensity();
+            container.particles.setDensity();
             this._applyResizePlugins();
             if (needsRefresh) {
                 await container.refresh();