@tsparticles/engine 4.0.0-beta.0 → 4.0.0-beta.1

package/types/Core/{Particles.d.ts → ParticlesManager.d.ts}

@@ -1,25 +1,18 @@
 import type { Container } from "./Container.js";
-import type { Engine } from "./Engine.js";
 import type { IContainerPlugin } from "./Interfaces/IContainerPlugin.js";
 import type { ICoordinates } from "./Interfaces/ICoordinates.js";
 import type { IDelta } from "./Interfaces/IDelta.js";
 import type { IDimension } from "./Interfaces/IDimension.js";
-import type { IEffectDrawer } from "./Interfaces/IEffectDrawer.js";
-import type { IParticleUpdater } from "./Interfaces/IParticleUpdater.js";
 import type { IParticlesOptions } from "../Options/Interfaces/Particles/IParticlesOptions.js";
-import type { IShapeDrawer } from "./Interfaces/IShapeDrawer.js";
 import { Particle } from "./Particle.js";
+import type { PluginManager } from "./Utils/PluginManager.js";
 import type { RecursivePartial } from "../Types/RecursivePartial.js";
 import { SpatialHashGrid } from "./Utils/SpatialHashGrid.js";
-export declare class Particles {
+export declare class ParticlesManager {
     checkParticlePositionPlugins: IContainerPlugin[];
-    effectDrawers: Map<string, IEffectDrawer>;
     grid: SpatialHashGrid;
-    shapeDrawers: Map<string, IShapeDrawer>;
-    updaters: IParticleUpdater[];
     private _array;
     private readonly _container;
-    private readonly _engine;
     private readonly _groupLimits;
     private _limit;
     private _maxZIndex;
@@ -28,13 +21,14 @@ export declare class Particles {
     private _nextId;
     private _particleResetPlugins;
     private _particleUpdatePlugins;
+    private readonly _pluginManager;
     private readonly _pool;
     private _postParticleUpdatePlugins;
     private _postUpdatePlugins;
     private _resizeFactor?;
     private _updatePlugins;
     private _zArray;
-    constructor(engine: Engine, container: Container);
+    constructor(pluginManager: PluginManager, container: Container);
     get count(): number;
     addParticle(position?: ICoordinates, overrideOptions?: RecursivePartial<IParticlesOptions>, group?: string, initializer?: (particle: Particle) => boolean): Particle | undefined;
     clear(): void;
@@ -44,7 +38,6 @@ export declare class Particles {
     find(condition: (particle: Particle) => boolean): Particle | undefined;
     get(index: number): Particle | undefined;
     init(): Promise<void>;
-    initPlugins(): Promise<void>;
     push(nb: number, position?: ICoordinates, overrideOptions?: RecursivePartial<IParticlesOptions>, group?: string): void;
     redraw(): Promise<void>;
     remove(particle: Particle, group?: string, override?: boolean): void;

package/types/Core/{Canvas.d.ts → RenderManager.d.ts}

@@ -1,70 +1,49 @@
+import type { CanvasContextType } from "../Types/CanvasContextType.js";
+import type { CanvasManager } from "./CanvasManager.js";
 import type { Container } from "./Container.js";
-import type { Engine } from "./Engine.js";
-import type { ICoordinates } from "./Interfaces/ICoordinates.js";
 import type { IDelta } from "./Interfaces/IDelta.js";
-import type { IDimension } from "./Interfaces/IDimension.js";
 import type { Particle } from "./Particle.js";
-export declare class Canvas {
-    private readonly container;
-    element?: HTMLCanvasElement;
-    readonly size: IDimension;
-    zoom: number;
+import type { PluginManager } from "./Utils/PluginManager.js";
+export declare class RenderManager {
     private _canvasClearPlugins;
+    private readonly _canvasManager;
     private _canvasPaintPlugins;
-    private _canvasSettings?;
     private _clearDrawPlugins;
     private _colorPlugins;
+    private readonly _container;
     private _context;
+    private _contextSettings?;
     private _drawParticlePlugins;
     private _drawParticlesCleanupPlugins;
     private _drawParticlesSetupPlugins;
     private _drawPlugins;
     private _drawSettingsCleanupPlugins;
     private _drawSettingsSetupPlugins;
-    private readonly _engine;
-    private _generated;
-    private _mutationObserver?;
-    private _originalStyle?;
-    private _pointerEvents;
+    private readonly _pluginManager;
     private _postDrawUpdaters;
     private _preDrawUpdaters;
-    private _resizePlugins;
     private readonly _reusableColorStyles;
     private readonly _reusablePluginColors;
     private readonly _reusableTransform;
-    private readonly _standardSize;
-    private _zoomCenter?;
-    constructor(container: Container, engine: Engine);
+    constructor(pluginManager: PluginManager, container: Container, canvasManager: CanvasManager);
     get settings(): CanvasRenderingContext2DSettings | undefined;
-    private get _fullScreen();
     canvasClear(): void;
     clear(): void;
     destroy(): void;
-    draw<T>(cb: (context: CanvasRenderingContext2D) => T): T | undefined;
+    draw<T>(cb: (context: CanvasContextType) => T): T | undefined;
     drawParticle(particle: Particle, delta: IDelta): void;
     drawParticlePlugins(particle: Particle, delta: IDelta): void;
     drawParticles(delta: IDelta): void;
-    getZoomCenter(): ICoordinates;
     init(): void;
-    initBackground(): void;
     initPlugins(): void;
     initUpdaters(): void;
-    loadCanvas(canvas: HTMLCanvasElement): void;
     paint(): void;
     paintBase(baseColor?: string): void;
     paintImage(image: HTMLImageElement, opacity: number): void;
-    resize(): boolean;
-    setPointerEvents(type: string): void;
-    setZoom(zoomLevel: number, center?: ICoordinates): void;
+    setContext(context: CanvasContextType | null): void;
+    setContextSettings(settings: CanvasRenderingContext2DSettings): void;
     stop(): void;
-    windowResize(): Promise<void>;
     private readonly _applyPostDrawUpdaters;
     private readonly _applyPreDrawUpdaters;
-    private readonly _applyResizePlugins;
     private readonly _getPluginParticleColors;
-    private readonly _initStyle;
-    private readonly _repairStyle;
-    private readonly _resetOriginalStyle;
-    private readonly _safeMutationObserver;
-    private readonly _setFullScreenStyle;
 }

package/types/Core/Retina.d.ts

@@ -2,10 +2,8 @@ import type { Container } from "./Container.js";
 import type { Particle } from "./Particle.js";
 export declare class Retina {
     private readonly container;
-    maxSpeed: number;
     pixelRatio: number;
     reduceFactor: number;
-    sizeAnimationSpeed: number;
     constructor(container: Container);
     init(): void;
     initParticle(particle: Particle): void;

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

@@ -0,0 +1,62 @@
+import type { EasingType, EasingTypeAlt } from "../../Enums/Types/EasingType.js";
+import type { EffectInitializer, Initializers, ShapeInitializer, UpdaterInitializer } from "../../Types/EngineInitializers.js";
+import type { Container } from "../Container.js";
+import type { EasingFunction } from "../../Types/EasingFunction.js";
+import type { Engine } from "../Engine.js";
+import type { IColorManager } from "../Interfaces/IColorManager.js";
+import type { IEffectDrawer } from "../Interfaces/IEffectDrawer.js";
+import type { IPalette } from "../Interfaces/IPalette.js";
+import type { IParticleUpdater } from "../Interfaces/IParticleUpdater.js";
+import type { IParticlesOptions } from "../../Options/Interfaces/Particles/IParticlesOptions.js";
+import type { IPlugin } from "../Interfaces/IPlugin.js";
+import type { IShapeDrawer } from "../Interfaces/IShapeDrawer.js";
+import type { ISourceOptions } from "../../Types/ISourceOptions.js";
+import type { ParticlesOptions } from "../../Options/Classes/Particles/ParticlesOptions.js";
+import type { RecursivePartial } from "../../Types/RecursivePartial.js";
+type AsyncLoadPluginFunction = (engine: Engine) => Promise<void>;
+type SyncLoadPluginFunction = (engine: Engine) => void;
+type AsyncLoadPluginNoEngine = () => Promise<void>;
+type SyncLoadPluginNoEngine = () => void;
+type LoadPluginFunction = AsyncLoadPluginFunction | SyncLoadPluginFunction | AsyncLoadPluginNoEngine | SyncLoadPluginNoEngine;
+export declare class PluginManager {
+    readonly colorManagers: Map<string, IColorManager>;
+    readonly easingFunctions: Map<EasingTypeAlt | EasingType, EasingFunction>;
+    readonly effectDrawers: Map<Container, Map<string, IEffectDrawer<import("../Particle.js").Particle>>>;
+    readonly initializers: Initializers;
+    readonly palettes: Map<string, IPalette>;
+    readonly plugins: IPlugin[];
+    readonly presets: Map<string, RecursivePartial<import("../../export-types.js").IOptions>>;
+    readonly shapeDrawers: Map<Container, Map<string, IShapeDrawer<import("../Particle.js").Particle>>>;
+    readonly updaters: Map<Container, IParticleUpdater[]>;
+    private _allLoadersSet;
+    private readonly _configs;
+    private readonly _engine;
+    private _executedSet;
+    private _initialized;
+    private _isRunningLoaders;
+    private readonly _loadPromises;
+    constructor(engine: Engine);
+    get configs(): Record<string, ISourceOptions>;
+    addColorManager(name: string, manager: IColorManager): void;
+    addConfig(config: ISourceOptions): void;
+    addEasing(name: EasingType | EasingTypeAlt, easing: EasingFunction): void;
+    addEffect(effect: string, drawer: EffectInitializer): void;
+    addPalette(name: string, palette: IPalette): void;
+    addParticleUpdater(name: string, updaterInitializer: UpdaterInitializer): void;
+    addPlugin(plugin: IPlugin): void;
+    addPreset(preset: string, options: Readonly<ISourceOptions>, override?: boolean): void;
+    addShape(shapes: string[], drawer: ShapeInitializer): void;
+    clearPlugins(container: Container): void;
+    getEasing(name: EasingType | EasingTypeAlt): EasingFunction;
+    getEffectDrawers(container: Container, force?: boolean): Promise<Map<string, IEffectDrawer>>;
+    getPalette(name: string): IPalette | undefined;
+    getPlugin(plugin: string): IPlugin | undefined;
+    getPreset(preset: string): ISourceOptions | undefined;
+    getShapeDrawers(container: Container, force?: boolean): Promise<Map<string, IShapeDrawer>>;
+    getUpdaters(container: Container, force?: boolean): Promise<IParticleUpdater[]>;
+    init(): Promise<void>;
+    loadParticlesOptions(container: Container, options: ParticlesOptions, ...sourceOptions: (RecursivePartial<IParticlesOptions> | undefined)[]): void;
+    register(...loaders: LoadPluginFunction[]): Promise<void>;
+    private _runLoader;
+}
+export {};

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

@@ -1,10 +1,10 @@
 import { Background } from "./Background/Background.js";
 import type { Container } from "../../Core/Container.js";
-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 type { PluginManager } from "../../Core/Utils/PluginManager.js";
 import type { RangeValue } from "../../Types/RangeValue.js";
 import type { RecursivePartial } from "../../Types/RecursivePartial.js";
 import { ResizeEvent } from "./ResizeEvent.js";
@@ -37,8 +37,8 @@ export declare class Options implements IOptions, IOptionLoader<IOptions> {
     style: RecursivePartial<CSSStyleDeclaration>;
     zLayers: number;
     private readonly _container;
-    private readonly _engine;
-    constructor(engine: Engine, container: Container);
+    private readonly _pluginManager;
+    constructor(pluginManager: PluginManager, container: Container);
     load(data?: ISourceOptions): void;
     private readonly _importPalette;
     private readonly _importPreset;

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

@@ -1,6 +1,5 @@
 import type { Container } from "../../../Core/Container.js";
 import { Effect } from "./Effect/Effect.js";
-import type { Engine } from "../../../Core/Engine.js";
 import { Fill } from "./Fill.js";
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader.js";
 import type { IParticlesOptions } from "../../Interfaces/Particles/IParticlesOptions.js";
@@ -9,6 +8,7 @@ import { Opacity } from "./Opacity/Opacity.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
 import type { ParticlesGroups } from "../../../Types/ParticlesGroups.js";
 import { ParticlesNumber } from "./Number/ParticlesNumber.js";
+import type { PluginManager } from "../../../Core/Utils/PluginManager.js";
 import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
 import { Shape } from "./Shape/Shape.js";
 import type { SingleOrMultiple } from "../../../Types/SingleOrMultiple.js";
@@ -30,7 +30,7 @@ export declare class ParticlesOptions implements IParticlesOptions, IOptionLoade
     stroke: SingleOrMultiple<Stroke>;
     readonly zIndex: ZIndex;
     private readonly _container;
-    private readonly _engine;
-    constructor(engine: Engine, container?: Container);
+    private readonly _pluginManager;
+    constructor(pluginManager: PluginManager, container?: Container);
     load(data?: RecursivePartial<IParticlesOptions>): void;
 }

package/types/Types/CanvasContextType.d.ts

@@ -0,0 +1 @@
+export type CanvasContextType = CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;

package/types/Utils/CanvasUtils.d.ts

@@ -1,16 +1,19 @@
-import type { IEffectDrawer, IShapeDrawData, IShapeDrawer } from "../export-types.js";
+import type { CanvasContextType } from "../Types/CanvasContextType.js";
 import type { IContainerPlugin } from "../Core/Interfaces/IContainerPlugin.js";
 import type { IDelta } from "../Core/Interfaces/IDelta.js";
 import type { IDimension } from "../Core/Interfaces/IDimension.js";
 import type { IDrawParticleParams } from "../Core/Interfaces/IDrawParticleParams.js";
+import type { IEffectDrawer } from "../Core/Interfaces/IEffectDrawer.js";
+import type { IShapeDrawData } from "../Core/Interfaces/IShapeDrawData.js";
+import type { IShapeDrawer } from "../Core/Interfaces/IShapeDrawer.js";
 import type { Particle } from "../Core/Particle.js";
-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 paintBase(context: CanvasContextType, dimension: IDimension, baseColor?: string): void;
+export declare function paintImage(context: CanvasContextType, dimension: IDimension, image: HTMLImageElement | undefined, opacity: number): void;
+export declare function clear(context: CanvasContextType, dimension: IDimension): void;
 export declare function drawParticle(data: IDrawParticleParams): void;
 export declare function drawAfterEffect(drawer: IEffectDrawer | undefined, data: IShapeDrawData): void;
 export declare function drawBeforeEffect(drawer: IEffectDrawer | undefined, data: IShapeDrawData): void;
 export declare function drawShape(drawer: IShapeDrawer | undefined, data: IShapeDrawData): void;
 export declare function drawShapeAfterDraw(drawer: IShapeDrawer | undefined, data: IShapeDrawData): void;
 export declare function drawShapeBeforeDraw(drawer: IShapeDrawer | undefined, data: IShapeDrawData): void;
-export declare function drawParticlePlugin(context: CanvasRenderingContext2D, plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;
+export declare function drawParticlePlugin(context: CanvasContextType, plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;

package/types/Utils/ColorUtils.d.ts

@@ -1,19 +1,19 @@
 import type { IColor, IHsl, IHsla, IRangeColor, IRgb, IRgba } from "../Core/Interfaces/Colors.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
-import type { Engine } from "../Core/Engine.js";
 import type { HslAnimation } from "../Options/Classes/HslAnimation.js";
 import type { IDelta } from "../Core/Interfaces/IDelta.js";
 import type { IOptionsColor } from "../Options/Interfaces/IOptionsColor.js";
 import type { IParticleColorAnimation } from "../Core/Interfaces/IParticleValueAnimation.js";
 import type { IParticleHslAnimation } from "../Core/Interfaces/IParticleHslAnimation.js";
 import type { Particle } from "../Core/Particle.js";
-export declare function rangeColorToRgb(engine: Engine, input?: string | IRangeColor, index?: number, useIndex?: boolean): IRgb | undefined;
-export declare function colorToRgb(engine: Engine, input?: string | IColor, index?: number, useIndex?: boolean): IRgb | undefined;
-export declare function colorToHsl(engine: Engine, color: string | IColor | undefined, index?: number, useIndex?: boolean): IHsl | undefined;
-export declare function rangeColorToHsl(engine: Engine, color: string | IRangeColor | undefined, index?: number, useIndex?: boolean): IHsl | undefined;
+import type { PluginManager } from "../Core/Utils/PluginManager.js";
+export declare function rangeColorToRgb(pluginManager: PluginManager, input?: string | IRangeColor, index?: number, useIndex?: boolean): IRgb | undefined;
+export declare function colorToRgb(pluginManager: PluginManager, input?: string | IColor, index?: number, useIndex?: boolean): IRgb | undefined;
+export declare function colorToHsl(pluginManager: PluginManager, color: string | IColor | undefined, index?: number, useIndex?: boolean): IHsl | undefined;
+export declare function rangeColorToHsl(pluginManager: PluginManager, color: string | IRangeColor | undefined, index?: number, useIndex?: boolean): IHsl | undefined;
 export declare function rgbToHsl(color: IRgb): IHsl;
-export declare function stringToAlpha(engine: Engine, input: string): number | undefined;
-export declare function stringToRgb(engine: Engine, input: string): IRgb | undefined;
+export declare function stringToAlpha(pluginManager: PluginManager, input: string): number | undefined;
+export declare function stringToRgb(pluginManager: PluginManager, input: string): IRgb | undefined;
 export declare function hslToRgb(hsl: IHsl): IRgb;
 export declare function hslaToRgba(hsla: IHsla): IRgba;
 export declare function getRandomRgbColor(min?: number): IRgb;
@@ -21,7 +21,7 @@ export declare function getStyleFromRgb(color: IRgb, hdr: boolean, opacity?: num
 export declare function getStyleFromHsl(color: IHsl, hdr: boolean, opacity?: number): string;
 export declare function colorMix(color1: IRgb | IHsl, color2: IRgb | IHsl, size1: number, size2: number): IRgb;
 export declare function getLinkColor(p1: Particle, p2?: Particle, linkColor?: string | IRgb): IRgb | undefined;
-export declare function getLinkRandomColor(engine: Engine, optColor: string | IOptionsColor, blink: boolean, consent: boolean): IRgb | string | undefined;
+export declare function getLinkRandomColor(pluginManager: PluginManager, optColor: string | IOptionsColor, blink: boolean, consent: boolean): IRgb | string | undefined;
 export declare function getHslFromAnimation(animation?: IParticleHslAnimation): IHsl | undefined;
 export declare function getHslAnimationFromHsl(hsl: IHsl, animationOptions: HslAnimation | undefined, reduceFactor: number): IParticleHslAnimation;
 export declare function updateColorValue(data: IParticleColorAnimation, decrease: boolean, delta: IDelta): void;

package/types/Utils/LogUtils.d.ts

@@ -3,6 +3,7 @@ interface ILogger {
     error(this: void, message?: unknown, ...optionalParams: unknown[]): void;
     info(this: void, message?: unknown, ...optionalParams: unknown[]): void;
     log(this: void, message?: unknown, ...optionalParams: unknown[]): void;
+    trace(this: void, ...data: unknown[]): void;
     verbose(this: void, message?: unknown, ...optionalParams: unknown[]): void;
     warning(this: void, message?: unknown, ...optionalParams: unknown[]): void;
 }

package/types/Utils/OptionsUtils.d.ts

@@ -1,8 +1,8 @@
 import type { Container } from "../Core/Container.js";
-import type { Engine } from "../Core/Engine.js";
 import type { IOptionLoader } from "../Options/Interfaces/IOptionLoader.js";
 import type { IParticlesOptions } from "../Options/Interfaces/Particles/IParticlesOptions.js";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions.js";
+import type { PluginManager } from "../Core/Utils/PluginManager.js";
 import type { RecursivePartial } from "../Types/RecursivePartial.js";
 export declare function loadOptions<T>(options: IOptionLoader<T>, ...sourceOptionsArr: RecursivePartial<T | undefined>[]): void;
-export declare function loadParticlesOptions(engine: Engine, container: Container, ...sourceOptionsArr: RecursivePartial<IParticlesOptions | undefined>[]): ParticlesOptions;
+export declare function loadParticlesOptions(pluginManager: PluginManager, container: Container, ...sourceOptionsArr: RecursivePartial<IParticlesOptions | undefined>[]): ParticlesOptions;

package/types/export-types.d.ts

@@ -60,6 +60,7 @@ export type * from "./Options/Interfaces/Particles/Shape/IShape.js";
 export type * from "./Options/Interfaces/Particles/Size/ISize.js";
 export type * from "./Options/Interfaces/Particles/Size/ISizeAnimation.js";
 export type * from "./Options/Interfaces/Particles/ZIndex/IZIndex.js";
+export type * from "./Types/CanvasContextType.js";
 export type * from "./Types/CustomEventArgs.js";
 export type * from "./Types/CustomEventListener.js";
 export type * from "./Types/EasingFunction.js";
@@ -74,9 +75,10 @@ export type * from "./Types/ShapeData.js";
 export type * from "./Types/SingleOrMultiple.js";
 export type { EventListeners } from "./Core/Utils/EventListeners.js";
 export type { SpatialHashGrid } from "./Core/Utils/SpatialHashGrid.js";
-export type { Canvas } from "./Core/Canvas.js";
+export type { CanvasManager } from "./Core/CanvasManager.js";
 export type { Container } from "./Core/Container.js";
 export type { Particle } from "./Core/Particle.js";
-export type { Particles } from "./Core/Particles.js";
+export type { ParticlesManager } from "./Core/ParticlesManager.js";
 export type { Retina } from "./Core/Retina.js";
 export type { Engine } from "./Core/Engine.js";
+export type { PluginManager } from "./Core/Utils/PluginManager.js";