@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.1

package/types/Core/Interfaces/IShapeDrawer.d.ts

@@ -11,5 +11,4 @@ export interface IShapeDrawer<TParticle extends Particle = Particle> {
     loadShape?: (particle: TParticle) => void;
     particleDestroy?: (particle: TParticle) => void;
     particleInit?: (container: Container, particle: TParticle) => void;
-    readonly validTypes: readonly string[];
 }

package/types/Core/Interfaces/IShapeValues.d.ts

@@ -3,6 +3,5 @@ import type { RecursivePartial } from "../../Types/RecursivePartial.js";
 export interface IShapeValues {
     [key: string]: unknown;
     close?: boolean;
-    fill?: boolean;
     particles?: RecursivePartial<IParticlesOptions>;
 }

package/types/Core/Particle.d.ts

@@ -1,11 +1,9 @@
 import type { ICenterCoordinates, ICoordinates, ICoordinates3d } from "./Interfaces/ICoordinates.js";
 import { Vector, Vector3d } from "./Utils/Vectors.js";
 import type { Container } from "./Container.js";
-import type { Engine } from "./Engine.js";
 import type { IBubbleParticleData } from "./Interfaces/IBubbleParticleData.js";
 import type { IDelta } from "./Interfaces/IDelta.js";
 import type { IHsl } from "./Interfaces/Colors.js";
-import type { IMovePathGenerator } from "./Interfaces/IMovePathGenerator.js";
 import type { IParticleHslAnimation } from "./Interfaces/IParticleHslAnimation.js";
 import type { IParticleNumericValueAnimation } from "./Interfaces/IParticleValueAnimation.js";
 import type { IParticleOpacityData } from "./Interfaces/IParticleOpacityData.js";
@@ -18,18 +16,19 @@ import type { IShapeValues } from "./Interfaces/IShapeValues.js";
 import type { ISlowParticleData } from "./Interfaces/ISlowParticleData.js";
 import { ParticleOutType } from "../Enums/Types/ParticleOutType.js";
 import type { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions.js";
+import type { PluginManager } from "./Utils/PluginManager.js";
 import type { RecursivePartial } from "../Types/RecursivePartial.js";
 export declare class Particle {
-    readonly container: Container;
     backColor?: IHsl;
     bubble: IBubbleParticleData;
-    color?: IParticleHslAnimation;
     destroyed: boolean;
     direction: number;
     effect?: string;
     effectClose: boolean;
     effectData?: IShapeValues;
-    effectFill: boolean;
+    fillColor?: IParticleHslAnimation;
+    fillEnabled?: boolean;
+    fillOpacity?: number;
     group?: string;
     id: number;
     ignoresResizeRatio: boolean;
@@ -39,13 +38,10 @@ export declare class Particle {
     lastPathTime: number;
     misplaced: boolean;
     moveCenter: ICenterCoordinates;
-    moveDecay: number;
     offset: Vector;
     opacity?: IParticleNumericValueAnimation;
     options: ParticlesOptions;
     outType: ParticleOutType;
-    pathDelay: number;
-    pathGenerator?: IMovePathGenerator;
     pathRotation: boolean;
     position: Vector3d;
     randomIndexData?: number;
@@ -55,7 +51,6 @@ export declare class Particle {
     shape?: string;
     shapeClose: boolean;
     shapeData?: IShapeValues;
-    shapeFill: boolean;
     sides: number;
     size: IParticleNumericValueAnimation;
     slow: ISlowParticleData;
@@ -70,8 +65,9 @@ export declare class Particle {
     private readonly _cachedPosition;
     private readonly _cachedRotateData;
     private readonly _cachedTransform;
-    private readonly _engine;
-    constructor(engine: Engine, container: Container);
+    private readonly _container;
+    private readonly _pluginManager;
+    constructor(pluginManager: PluginManager, container: Container);
     destroy(override?: boolean): void;
     draw(delta: IDelta): void;
     getAngle(): number;

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

@@ -1,31 +1,34 @@
 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 { IParticleMover } from "./Interfaces/IParticleMover.js";
-import type { IParticleUpdater } from "./Interfaces/IParticleUpdater.js";
 import type { IParticlesOptions } from "../Options/Interfaces/Particles/IParticlesOptions.js";
 import { Particle } from "./Particle.js";
-import { QuadTree } from "./Utils/QuadTree.js";
+import type { PluginManager } from "./Utils/PluginManager.js";
 import type { RecursivePartial } from "../Types/RecursivePartial.js";
-export declare class Particles {
-    movers: IParticleMover[];
-    quadTree: QuadTree;
-    updaters: IParticleUpdater[];
+import { SpatialHashGrid } from "./Utils/SpatialHashGrid.js";
+export declare class ParticlesManager {
+    checkParticlePositionPlugins: IContainerPlugin[];
+    grid: SpatialHashGrid;
     private _array;
     private readonly _container;
-    private readonly _engine;
     private readonly _groupLimits;
-    private _lastZIndex;
     private _limit;
+    private _maxZIndex;
+    private _minZIndex;
     private _needsSort;
     private _nextId;
-    private _pluginsInitialized;
+    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;
@@ -35,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;
@@ -48,6 +50,5 @@ export declare class Particles {
     private readonly _addToPool;
     private readonly _applyDensity;
     private readonly _initDensityFactor;
-    private readonly _pushParticle;
     private readonly _removeParticle;
 }

package/types/Core/RenderManager.d.ts

@@ -0,0 +1,49 @@
+import type { CanvasContextType } from "../Types/CanvasContextType.js";
+import type { CanvasManager } from "./CanvasManager.js";
+import type { Container } from "./Container.js";
+import type { IDelta } from "./Interfaces/IDelta.js";
+import type { Particle } from "./Particle.js";
+import type { PluginManager } from "./Utils/PluginManager.js";
+export declare class RenderManager {
+    private _canvasClearPlugins;
+    private readonly _canvasManager;
+    private _canvasPaintPlugins;
+    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 _pluginManager;
+    private _postDrawUpdaters;
+    private _preDrawUpdaters;
+    private readonly _reusableColorStyles;
+    private readonly _reusablePluginColors;
+    private readonly _reusableTransform;
+    constructor(pluginManager: PluginManager, container: Container, canvasManager: CanvasManager);
+    get settings(): CanvasRenderingContext2DSettings | undefined;
+    canvasClear(): void;
+    clear(): void;
+    destroy(): void;
+    draw<T>(cb: (context: CanvasContextType) => T): T | undefined;
+    drawParticle(particle: Particle, delta: IDelta): void;
+    drawParticlePlugins(particle: Particle, delta: IDelta): void;
+    drawParticles(delta: IDelta): void;
+    init(): void;
+    initPlugins(): void;
+    initUpdaters(): void;
+    paint(): void;
+    paintBase(baseColor?: string): void;
+    paintImage(image: HTMLImageElement, opacity: number): void;
+    setContext(context: CanvasContextType | null): void;
+    setContextSettings(settings: CanvasRenderingContext2DSettings): void;
+    stop(): void;
+    private readonly _applyPostDrawUpdaters;
+    private readonly _applyPreDrawUpdaters;
+    private readonly _getPluginParticleColors;
+}

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/Constants.d.ts

@@ -1,7 +1,7 @@
 import type { ICoordinates3d } from "../Interfaces/ICoordinates.js";
-export declare const generatedAttribute = "generated", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint: ICoordinates3d, defaultTransform: {
+export declare const generatedAttribute = "generated", defaultCompositeValue: GlobalCompositeOperation, resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint: ICoordinates3d, defaultTransform: {
     a: number;
     b: number;
     c: number;
     d: number;
-}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI: number, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter: number, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, minZ = 0, defaultRadius = 0, posOffset: number, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;
+}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI: number, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter: number, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0, defaultZoom = 1;

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/Core/Utils/Ranges.d.ts

@@ -4,18 +4,21 @@ export declare abstract class BaseRange {
     readonly position: ICoordinates;
     readonly type: string;
     protected constructor(x: number, y: number, type: string);
+    protected _resetPosition(x: number, y: number): void;
     abstract contains(point: ICoordinates): boolean;
     abstract intersects(range: BaseRange): boolean;
 }
 export declare class Circle extends BaseRange {
-    readonly radius: number;
+    radius: number;
     constructor(x: number, y: number, radius: number);
     contains(point: ICoordinates): boolean;
     intersects(range: BaseRange): boolean;
+    reset(x: number, y: number, radius: number): this;
 }
 export declare class Rectangle extends BaseRange {
     readonly size: IDimension;
     constructor(x: number, y: number, width: number, height: number);
     contains(point: ICoordinates): boolean;
     intersects(range: BaseRange): boolean;
+    reset(x: number, y: number, width: number, height: number): this;
 }

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

@@ -0,0 +1,25 @@
+import { type BaseRange } from "./Ranges.js";
+import type { ICoordinates } from "../Interfaces/ICoordinates.js";
+import type { IDimension } from "../Interfaces/IDimension.js";
+import type { Particle } from "../Particle.js";
+export declare class SpatialHashGrid {
+    private _cellSize;
+    private readonly _cells;
+    private readonly _circlePool;
+    private _circlePoolIdx;
+    private _pendingCellSize?;
+    private readonly _rectanglePool;
+    private _rectanglePoolIdx;
+    constructor(cellSize: number);
+    clear(): void;
+    insert(particle: Particle): void;
+    query(range: BaseRange, check?: (particle: Particle) => boolean, out?: Particle[]): Particle[];
+    queryCircle(position: ICoordinates, radius: number, check?: (particle: Particle) => boolean, out?: Particle[]): Particle[];
+    queryRectangle(position: ICoordinates, size: IDimension, check?: (particle: Particle) => boolean, out?: Particle[]): Particle[];
+    setCellSize(cellSize: number): void;
+    private _acquireCircle;
+    private _acquireRectangle;
+    private _cellKeyFromCoords;
+    private _getRangeBounds;
+    private _releaseShapes;
+}

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

@@ -9,13 +9,11 @@ export declare class Vector3d implements ICoordinates3d {
     set angle(angle: number);
     get length(): number;
     set length(length: number);
-    static clone(source: Vector3d): Vector3d;
+    static clone(source: ICoordinates | ICoordinates3d): Vector3d;
     static create(x: number | ICoordinates | ICoordinates3d, y?: number, z?: number): Vector3d;
-    add(v: Vector3d): Vector3d;
-    addTo(v: Vector3d): void;
+    add(v: ICoordinates | ICoordinates3d): Vector3d;
+    addTo(v: ICoordinates | ICoordinates3d): void;
     copy(): Vector3d;
-    distanceTo(v: Vector3d): number;
-    distanceToSq(v: Vector3d): number;
     div(n: number): Vector3d;
     divTo(n: number): void;
     getLengthSq(): number;
@@ -23,14 +21,14 @@ export declare class Vector3d implements ICoordinates3d {
     multTo(n: number): void;
     normalize(): void;
     rotate(angle: number): Vector3d;
-    setTo(c: ICoordinates): void;
-    sub(v: Vector3d): Vector3d;
-    subFrom(v: Vector3d): void;
-    private readonly _updateFromAngle;
+    setTo(c: ICoordinates | ICoordinates3d): void;
+    sub(v: ICoordinates | ICoordinates3d): Vector3d;
+    subFrom(v: ICoordinates | ICoordinates3d): void;
+    private _updateFromAngle;
 }
 export declare class Vector extends Vector3d {
     protected constructor(x?: number, y?: number);
     static get origin(): Vector;
-    static clone(source: Vector): Vector;
+    static clone(source: ICoordinates): Vector;
     static create(x: number | ICoordinates, y?: number): Vector;
 }

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

@@ -4,7 +4,9 @@ import type { IOptionLoader } from "../Interfaces/IOptionLoader.js";
 import type { RangeValue } from "../../Types/RangeValue.js";
 import type { RecursivePartial } from "../../Types/RecursivePartial.js";
 export declare class ColorAnimation extends AnimationOptions implements IColorAnimation, IOptionLoader<IColorAnimation> {
+    max: number;
+    min: number;
     offset: RangeValue;
-    constructor();
+    constructor(min: number, max: number);
     load(data?: RecursivePartial<IColorAnimation>): void;
 }

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

@@ -3,9 +3,8 @@ import type { IHslAnimation } from "../Interfaces/IHslAnimation.js";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader.js";
 import type { RecursivePartial } from "../../Types/RecursivePartial.js";
 export declare class HslAnimation implements IHslAnimation, IOptionLoader<IHslAnimation> {
-    h: ColorAnimation;
-    l: ColorAnimation;
-    s: ColorAnimation;
-    constructor();
+    readonly h: ColorAnimation;
+    readonly l: ColorAnimation;
+    readonly s: ColorAnimation;
     load(data?: RecursivePartial<IHslAnimation>): void;
 }

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";
@@ -27,6 +27,7 @@ export declare class Options implements IOptions, IOptionLoader<IOptions> {
     hdr: boolean;
     key?: string;
     name?: string;
+    palette?: string;
     readonly particles: import("./Particles/ParticlesOptions.js").ParticlesOptions;
     pauseOnBlur: boolean;
     pauseOnOutsideViewport: boolean;
@@ -36,9 +37,10 @@ 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;
 }
 export {};

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

@@ -5,7 +5,6 @@ import type { ShapeData } from "../../../../Types/ShapeData.js";
 import type { SingleOrMultiple } from "../../../../Types/SingleOrMultiple.js";
 export declare class Effect implements IEffect, IOptionLoader<IEffect> {
     close: boolean;
-    fill: boolean;
     options: ShapeData;
     type: SingleOrMultiple<string>;
     constructor();

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

@@ -0,0 +1,12 @@
+import { AnimatableColor } from "../AnimatableColor.js";
+import type { IFill } from "../../Interfaces/Particles/IFill.js";
+import type { IOptionLoader } from "../../Interfaces/IOptionLoader.js";
+import type { RangeValue } from "../../../Types/RangeValue.js";
+import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
+export declare class Fill implements IFill, IOptionLoader<IFill> {
+    color: AnimatableColor;
+    enable: boolean;
+    opacity: RangeValue;
+    constructor();
+    load(data?: RecursivePartial<IFill>): void;
+}

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

@@ -3,7 +3,6 @@ import type { IDistance } from "../../../../Core/Interfaces/IDistance.js";
 import type { IMove } from "../../../Interfaces/Particles/Move/IMove.js";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader.js";
 import { MoveAngle } from "./MoveAngle.js";
-import { MoveAttract } from "./MoveAttract.js";
 import { MoveCenter } from "./MoveCenter.js";
 import { MoveGravity } from "./MoveGravity.js";
 import { MovePath } from "./Path/MovePath.js";
@@ -13,7 +12,6 @@ import type { RecursivePartial } from "../../../../Types/RecursivePartial.js";
 import { Spin } from "./Spin.js";
 export declare class Move implements IMove, IOptionLoader<IMove> {
     readonly angle: MoveAngle;
-    readonly attract: MoveAttract;
     readonly center: MoveCenter;
     decay: RangeValue;
     direction: MoveDirection | keyof typeof MoveDirection | MoveDirectionAlt | number;

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

@@ -1,7 +1,6 @@
-import { AnimatableColor } from "../AnimatableColor.js";
 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";
 import { Move } from "./Move/Move.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";
@@ -18,8 +18,8 @@ import { ZIndex } from "./ZIndex/ZIndex.js";
 export declare class ParticlesOptions implements IParticlesOptions, IOptionLoader<IParticlesOptions> {
     [name: string]: unknown;
     readonly bounce: ParticlesBounce;
-    color: AnimatableColor;
     readonly effect: Effect;
+    fill: SingleOrMultiple<Fill>;
     readonly groups: ParticlesGroups;
     readonly move: Move;
     readonly number: ParticlesNumber;
@@ -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/Options/Classes/Particles/Shape/Shape.d.ts

@@ -5,7 +5,6 @@ import type { ShapeData } from "../../../../Types/ShapeData.js";
 import type { SingleOrMultiple } from "../../../../Types/SingleOrMultiple.js";
 export declare class Shape implements IShape, IOptionLoader<IShape> {
     close: boolean;
-    fill: boolean;
     options: ShapeData;
     type: SingleOrMultiple<string>;
     constructor();

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

@@ -10,7 +10,6 @@ export declare class ValueWithRandom implements IValueWithRandom, IOptionLoader<
 }
 export declare class AnimationValueWithRandom extends ValueWithRandom implements IOptionLoader<IAnimationValueWithRandom> {
     readonly animation: AnimationOptions;
-    constructor();
     load(data?: RecursivePartial<IAnimationValueWithRandom>): void;
 }
 export declare class RangedAnimationValueWithRandom extends AnimationValueWithRandom implements IOptionLoader<IRangedAnimationValueWithRandom> {

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

@@ -1,5 +1,7 @@
 import type { IAnimation } from "./IAnimation.js";
 import type { RangeValue } from "../../Types/RangeValue.js";
 export interface IColorAnimation extends IAnimation {
+    max: number;
+    min: number;
     offset: RangeValue;
 }

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

@@ -18,6 +18,7 @@ export interface IOptions {
     hdr: boolean;
     key?: string;
     name?: string;
+    palette?: string;
     particles: IParticlesOptions;
     pauseOnBlur: boolean;
     pauseOnOutsideViewport: boolean;

package/types/Options/Interfaces/Particles/Effect/IEffect.d.ts

@@ -2,7 +2,6 @@ import type { ShapeData } from "../../../../Types/ShapeData.js";
 import type { SingleOrMultiple } from "../../../../Types/SingleOrMultiple.js";
 export interface IEffect {
     close: boolean;
-    fill: boolean;
     options: ShapeData;
     type: SingleOrMultiple<string>;
 }

package/types/Options/Interfaces/Particles/IFill.d.ts

@@ -0,0 +1,9 @@
+import type { IAnimatableColor } from "../IAnimatableColor.js";
+import type { IRangeColor } from "../../../Core/Interfaces/Colors.js";
+import type { RangeValue } from "../../../Types/RangeValue.js";
+import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
+export interface IFill {
+    color?: RecursivePartial<IAnimatableColor> | RecursivePartial<IRangeColor>;
+    enable: boolean;
+    opacity?: RangeValue;
+}

package/types/Options/Interfaces/Particles/IParticlesOptions.d.ts

@@ -1,5 +1,5 @@
-import type { IAnimatableColor } from "../IAnimatableColor.js";
 import type { IEffect } from "./Effect/IEffect.js";
+import type { IFill } from "./IFill.js";
 import type { IMove } from "./Move/IMove.js";
 import type { IOpacity } from "./Opacity/IOpacity.js";
 import type { IParticlesBounce } from "./Bounce/IParticlesBounce.js";
@@ -13,8 +13,8 @@ import type { SingleOrMultiple } from "../../../Types/SingleOrMultiple.js";
 export interface IParticlesOptions {
     [name: string]: unknown;
     bounce: IParticlesBounce;
-    color: IAnimatableColor;
     effect: IEffect;
+    fill: SingleOrMultiple<IFill>;
     groups: ParticlesGroups;
     move: IMove;
     number: IParticlesNumber;

package/types/Options/Interfaces/Particles/IStroke.d.ts

@@ -1,9 +1,9 @@
 import type { IAnimatableColor } from "../IAnimatableColor.js";
-import type { IColor } from "../../../Core/Interfaces/Colors.js";
+import type { IRangeColor } from "../../../Core/Interfaces/Colors.js";
 import type { RangeValue } from "../../../Types/RangeValue.js";
 import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
 export interface IStroke {
-    color?: string | RecursivePartial<IAnimatableColor> | RecursivePartial<IColor>;
+    color?: RecursivePartial<IAnimatableColor> | RecursivePartial<IRangeColor>;
     opacity?: RangeValue;
     width: RangeValue;
 }

package/types/Options/Interfaces/Particles/Move/IMove.d.ts

@@ -1,7 +1,6 @@
 import type { MoveDirection, MoveDirectionAlt } from "../../../../Enums/Directions/MoveDirection.js";
 import type { IDistance } from "../../../../Core/Interfaces/IDistance.js";
 import type { IMoveAngle } from "./IMoveAngle.js";
-import type { IMoveAttract } from "./IMoveAttract.js";
 import type { IMoveCenter } from "./IMoveCenter.js";
 import type { IMoveGravity } from "./IMoveGravity.js";
 import type { IMovePath } from "./Path/IMovePath.js";
@@ -11,7 +10,6 @@ import type { OutMode } from "../../../../Enums/Modes/OutMode.js";
 import type { RangeValue } from "../../../../Types/RangeValue.js";
 export interface IMove {
     angle: number | IMoveAngle;
-    attract: IMoveAttract;
     center: IMoveCenter;
     decay: RangeValue;
     direction: MoveDirection | keyof typeof MoveDirection | MoveDirectionAlt | number;

package/types/Options/Interfaces/Particles/Shape/IShape.d.ts

@@ -2,7 +2,6 @@ import type { ShapeData } from "../../../../Types/ShapeData.js";
 import type { SingleOrMultiple } from "../../../../Types/SingleOrMultiple.js";
 export interface IShape {
     close: boolean;
-    fill: boolean;
     options: ShapeData;
     type: SingleOrMultiple<string>;
 }

package/types/Types/CanvasContextType.d.ts

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