@tsparticles/engine 4.0.0-alpha.3 → 4.0.0-alpha.5

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

@@ -5,13 +5,10 @@ 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";
 import type { RecursivePartial } from "../../Types/RecursivePartial.js";
-import { Responsive } from "./Responsive.js";
+import { ResizeEvent } from "./ResizeEvent.js";
 import type { SingleOrMultiple } from "../../Types/SingleOrMultiple.js";
-import { Theme } from "./Theme/Theme.js";
 interface DefaultThemes {
     dark?: string;
     light?: string;
@@ -28,26 +25,20 @@ export declare class Options implements IOptions, IOptionLoader<IOptions> {
     fpsLimit: number;
     readonly fullScreen: FullScreen;
     hdr: boolean;
-    readonly interactivity: Interactivity;
     key?: string;
-    manualParticles: ManualParticle[];
     name?: string;
     readonly particles: import("./Particles/ParticlesOptions.js").ParticlesOptions;
     pauseOnBlur: boolean;
     pauseOnOutsideViewport: boolean;
     preset?: SingleOrMultiple<string>;
-    responsive: Responsive[];
+    readonly resize: ResizeEvent;
     smooth: boolean;
     style: RecursivePartial<CSSStyleDeclaration>;
-    readonly themes: Theme[];
     zLayers: number;
     private readonly _container;
     private readonly _engine;
     constructor(engine: Engine, container: Container);
     load(data?: ISourceOptions): void;
-    setResponsive(width: number, pxRatio: number, defaultOptions: IOptions): number | undefined;
-    setTheme(name?: string): void;
-    private readonly _findDefaultTheme;
     private readonly _importPreset;
 }
 export {};

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

@@ -2,7 +2,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 type { IInteractivity } from "../../Interfaces/Interactivity/IInteractivity.js";
 import type { IOptionLoader } from "../../Interfaces/IOptionLoader.js";
 import type { IParticlesOptions } from "../../Interfaces/Particles/IParticlesOptions.js";
 import { Move } from "./Move/Move.js";
@@ -22,7 +21,6 @@ export declare class ParticlesOptions implements IParticlesOptions, IOptionLoade
     color: AnimatableColor;
     readonly effect: Effect;
     readonly groups: ParticlesGroups;
-    interactivity?: RecursivePartial<IInteractivity>;
     readonly move: Move;
     readonly number: ParticlesNumber;
     readonly opacity: Opacity;

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

@@ -0,0 +1,9 @@
+import type { IOptionLoader } from "../Interfaces/IOptionLoader.js";
+import type { IResizeEvent } from "../Interfaces/IResizeEvent.js";
+import type { RecursivePartial } from "../../Types/RecursivePartial.js";
+export declare class ResizeEvent implements IResizeEvent, IOptionLoader<IResizeEvent> {
+    delay: number;
+    enable: boolean;
+    constructor();
+    load(data?: RecursivePartial<IResizeEvent>): void;
+}

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

@@ -1,10 +1,7 @@
 import type { IBackground } from "./Background/IBackground.js";
 import type { IFullScreen } from "./FullScreen/IFullScreen.js";
-import type { IInteractivity } from "./Interactivity/IInteractivity.js";
-import type { IManualParticle } from "./IManualParticle.js";
 import type { IParticlesOptions } from "./Particles/IParticlesOptions.js";
-import type { IResponsive } from "./IResponsive.js";
-import type { ITheme } from "./Theme/ITheme.js";
+import type { IResizeEvent } from "./IResizeEvent.js";
 import type { RangeValue } from "../../Types/RangeValue.js";
 import type { RecursivePartial } from "../../Types/RecursivePartial.js";
 import type { SingleOrMultiple } from "../../Types/SingleOrMultiple.js";
@@ -19,17 +16,14 @@ export interface IOptions {
     fpsLimit: number;
     fullScreen: RecursivePartial<IFullScreen> | boolean;
     hdr: boolean;
-    interactivity: IInteractivity;
     key?: string;
-    manualParticles: IManualParticle[];
     name?: string;
     particles: IParticlesOptions;
     pauseOnBlur: boolean;
     pauseOnOutsideViewport: boolean;
     preset?: SingleOrMultiple<string>;
-    responsive: IResponsive[];
+    resize: IResizeEvent;
     smooth: boolean;
     style: RecursivePartial<CSSStyleDeclaration>;
-    themes: ITheme[];
     zLayers: number;
 }

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

@@ -1,6 +1,5 @@
 import type { IAnimatableColor } from "../IAnimatableColor.js";
 import type { IEffect } from "./Effect/IEffect.js";
-import type { IInteractivity } from "../Interactivity/IInteractivity.js";
 import type { IMove } from "./Move/IMove.js";
 import type { IOpacity } from "./Opacity/IOpacity.js";
 import type { IParticlesBounce } from "./Bounce/IParticlesBounce.js";
@@ -10,7 +9,6 @@ import type { ISize } from "./Size/ISize.js";
 import type { IStroke } from "./IStroke.js";
 import type { IZIndex } from "./ZIndex/IZIndex.js";
 import type { ParticlesGroups } from "../../../Types/ParticlesGroups.js";
-import type { RecursivePartial } from "../../../Types/RecursivePartial.js";
 import type { SingleOrMultiple } from "../../../Types/SingleOrMultiple.js";
 export interface IParticlesOptions {
     [name: string]: unknown;
@@ -18,7 +16,6 @@ export interface IParticlesOptions {
     color: IAnimatableColor;
     effect: IEffect;
     groups: ParticlesGroups;
-    interactivity?: RecursivePartial<IInteractivity>;
     move: IMove;
     number: IParticlesNumber;
     opacity: IOpacity;

package/types/Types/EngineInitializers.d.ts

@@ -0,0 +1,10 @@
+import type { Container } from "../Core/Container.js";
+import type { IParticleMover } from "../Core/Interfaces/IParticleMover.js";
+import type { IParticleUpdater } from "../Core/Interfaces/IParticleUpdater.js";
+export type GenericInitializer<T> = (container: Container) => Promise<T>;
+export type MoverInitializer = GenericInitializer<IParticleMover>;
+export type UpdaterInitializer = GenericInitializer<IParticleUpdater>;
+export interface Initializers {
+    movers: Map<string, MoverInitializer>;
+    updaters: Map<string, UpdaterInitializer>;
+}

package/types/Utils/Utils.d.ts

@@ -1,11 +1,11 @@
 import type { ICoordinates, ICoordinatesWithMode } from "../Core/Interfaces/ICoordinates.js";
 import type { IDimension, IDimensionWithMode } from "../Core/Interfaces/IDimension.js";
+import type { Container } from "../Core/Container.js";
 import { DestroyType } from "../Enums/Types/DestroyType.js";
-import type { DivEvent } from "../Options/Classes/Interactivity/Events/DivEvent.js";
+import type { GenericInitializer } from "../Types/EngineInitializers.js";
 import type { IBounds } from "../Core/Interfaces/IBounds.js";
 import type { ICircleBouncer } from "../Core/Interfaces/ICircleBouncer.js";
 import type { IDelta } from "../Core/Interfaces/IDelta.js";
-import type { IModeDiv } from "../Options/Interfaces/Interactivity/Modes/IModeDiv.js";
 import type { IParticleNumericValueAnimation } from "../Core/Interfaces/IParticleValueAnimation.js";
 import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
 import type { Particle } from "../Core/Particle.js";
@@ -24,10 +24,6 @@ export declare function isPointInside(point: ICoordinates, size: IDimension, off
 export declare function areBoundsInside(bounds: IBounds, size: IDimension, offset: ICoordinates, direction?: OutModeDirection): boolean;
 export declare function calculateBounds(point: ICoordinates, radius: number): IBounds;
 export declare function deepExtend(destination: unknown, ...sources: unknown[]): unknown;
-export declare function isDivModeEnabled(mode: string, divs: SingleOrMultiple<DivEvent>): boolean;
-export declare function divModeExecute(mode: string, divs: SingleOrMultiple<DivEvent>, callback: (id: string, div: DivEvent) => void): void;
-export declare function singleDivModeExecute(div: DivEvent, callback: (selector: string, div: DivEvent) => void): void;
-export declare function divMode<T extends IModeDiv>(divs?: SingleOrMultiple<T>, element?: HTMLElement): T | undefined;
 export declare function circleBounceDataFromParticle(p: Particle): ICircleBouncer;
 export declare function circleBounce(p1: ICircleBouncer, p2: ICircleBouncer): void;
 export declare function executeOnSingleOrMultiple<T, U = void>(obj: SingleOrMultiple<T>, callback: (obj: T, index: number) => U): SingleOrMultiple<U>;
@@ -39,3 +35,5 @@ export declare function getSize(size: IDimensionWithMode, canvasSize: IDimension
 export declare function updateAnimation(particle: Particle, data: IParticleNumericValueAnimation, changeDirection: boolean, destroyType: DestroyType | keyof typeof DestroyType, delta: IDelta): void;
 export declare function cloneStyle(style: Partial<CSSStyleDeclaration>): CSSStyleDeclaration;
 export declare const getFullScreenStyle: (zIndex: number) => CSSStyleDeclaration;
+export declare function manageListener(element: HTMLElement | Node | Window | MediaQueryList | typeof globalThis, event: string, handler: EventListenerOrEventListenerObject, add: boolean, options?: boolean | AddEventListenerOptions | EventListenerObject): void;
+export declare function getItemsFromInitializer<TItem, TInitializer extends GenericInitializer<TItem>>(container: Container, map: Map<Container, TItem[]>, initializers: Map<string, TInitializer>, force?: boolean): Promise<TItem[]>;

package/types/export-types.d.ts

@@ -3,7 +3,6 @@ export type * from "./Core/Interfaces/IBounds.js";
 export type * from "./Core/Interfaces/IBubbleParticleData.js";
 export type * from "./Core/Interfaces/ICircleBouncer.js";
 export type * from "./Core/Interfaces/IColorManager.js";
-export type * from "./Core/Interfaces/IContainerInteractivity.js";
 export type * from "./Core/Interfaces/IContainerPlugin.js";
 export type * from "./Core/Interfaces/ICoordinates.js";
 export type * from "./Core/Interfaces/IDelta.js";
@@ -11,10 +10,7 @@ export type * from "./Core/Interfaces/IDimension.js";
 export type * from "./Core/Interfaces/IDistance.js";
 export type * from "./Core/Interfaces/IDrawParticleParams.js";
 export type * from "./Core/Interfaces/IEffectDrawer.js";
-export type * from "./Core/Interfaces/IExternalInteractor.js";
-export type * from "./Core/Interfaces/IInteractor.js";
 export type * from "./Core/Interfaces/ILoadParams.js";
-export type * from "./Core/Interfaces/IMouseData.js";
 export type * from "./Core/Interfaces/IMovePathGenerator.js";
 export type * from "./Core/Interfaces/IParticleColorStyle.js";
 export type * from "./Core/Interfaces/IParticleHslAnimation.js";
@@ -25,7 +21,6 @@ export type * from "./Core/Interfaces/IParticleRoll.js";
 export type * from "./Core/Interfaces/IParticleTransformValues.js";
 export type * from "./Core/Interfaces/IParticleUpdater.js";
 export type * from "./Core/Interfaces/IParticleValueAnimation.js";
-export type * from "./Core/Interfaces/IParticlesInteractor.js";
 export type * from "./Core/Interfaces/IPlugin.js";
 export type * from "./Core/Interfaces/IPositionFromSizeParams.js";
 export type * from "./Core/Interfaces/IRangeValue.js";
@@ -40,21 +35,11 @@ export type * from "./Options/Interfaces/IAnimatableColor.js";
 export type * from "./Options/Interfaces/IAnimation.js";
 export type * from "./Options/Interfaces/IColorAnimation.js";
 export type * from "./Options/Interfaces/IHslAnimation.js";
-export type * from "./Options/Interfaces/IManualParticle.js";
 export type * from "./Options/Interfaces/IOptionLoader.js";
 export type * from "./Options/Interfaces/IOptions.js";
 export type * from "./Options/Interfaces/IOptionsColor.js";
-export type * from "./Options/Interfaces/IResponsive.js";
+export type * from "./Options/Interfaces/IResizeEvent.js";
 export type * from "./Options/Interfaces/IValueWithRandom.js";
-export type * from "./Options/Interfaces/Interactivity/Events/IClickEvent.js";
-export type * from "./Options/Interfaces/Interactivity/Events/IDivEvent.js";
-export type * from "./Options/Interfaces/Interactivity/Events/IEvents.js";
-export type * from "./Options/Interfaces/Interactivity/Events/IHoverEvent.js";
-export type * from "./Options/Interfaces/Interactivity/Events/IParallax.js";
-export type * from "./Options/Interfaces/Interactivity/Events/IResizeEvent.js";
-export type * from "./Options/Interfaces/Interactivity/Modes/IModeDiv.js";
-export type * from "./Options/Interfaces/Interactivity/Modes/IModes.js";
-export type * from "./Options/Interfaces/Interactivity/IInteractivity.js";
 export type * from "./Options/Interfaces/Particles/Bounce/IParticlesBounce.js";
 export type * from "./Options/Interfaces/Particles/Effect/IEffect.js";
 export type * from "./Options/Interfaces/Particles/IParticlesOptions.js";
@@ -76,10 +61,10 @@ 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 "./Options/Interfaces/Theme/ITheme.js";
-export type * from "./Options/Interfaces/Theme/IThemeDefault.js";
 export type * from "./Types/CustomEventArgs.js";
 export type * from "./Types/CustomEventListener.js";
+export type * from "./Types/EasingFunction.js";
+export type * from "./Types/EngineInitializers.js";
 export type * from "./Types/ExportResult.js";
 export type * from "./Types/ISourceOptions.js";
 export type * from "./Types/ParticlesGroups.js";
@@ -89,7 +74,6 @@ export type * from "./Types/RecursivePartial.js";
 export type * from "./Types/ShapeData.js";
 export type * from "./Types/SingleOrMultiple.js";
 export type { EventListeners } from "./Core/Utils/EventListeners.js";
-export type { InteractionManager } from "./Core/Utils/InteractionManager.js";
 export type { QuadTree } from "./Core/Utils/QuadTree.js";
 export type { Canvas } from "./Core/Canvas.js";
 export type { Container } from "./Core/Container.js";

package/types/exports.d.ts

@@ -1,6 +1,4 @@
 export * from "./Core/Utils/Constants.js";
-export * from "./Core/Utils/ExternalInteractorBase.js";
-export * from "./Core/Utils/ParticlesInteractorBase.js";
 export * from "./Core/Utils/Point.js";
 export * from "./Core/Utils/Ranges.js";
 export * from "./Core/Utils/Vectors.js";
@@ -11,36 +9,20 @@ export * from "./Enums/Modes/AnimationMode.js";
 export * from "./Enums/Modes/LimitMode.js";
 export * from "./Enums/Modes/OutMode.js";
 export * from "./Enums/Modes/PixelMode.js";
-export * from "./Enums/Modes/ThemeMode.js";
-export * from "./Enums/Modes/ResponsiveMode.js";
 export * from "./Enums/Types/AlterType.js";
 export * from "./Enums/Types/DestroyType.js";
 export * from "./Enums/Types/GradientType.js";
-export * from "./Enums/Types/InteractorType.js";
 export * from "./Enums/Types/ParticleOutType.js";
 export * from "./Enums/Types/StartValueType.js";
-export * from "./Enums/Types/DivType.js";
 export * from "./Enums/Types/EasingType.js";
 export * from "./Enums/Types/EventType.js";
 export * from "./Enums/AnimationStatus.js";
-export * from "./Enums/InteractivityDetect.js";
 export * from "./Options/Classes/AnimatableColor.js";
 export * from "./Options/Classes/AnimationOptions.js";
 export * from "./Options/Classes/Background/Background.js";
 export * from "./Options/Classes/ColorAnimation.js";
 export * from "./Options/Classes/FullScreen/FullScreen.js";
 export * from "./Options/Classes/HslAnimation.js";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent.js";
-export * from "./Options/Classes/Interactivity/Events/DivEvent.js";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent.js";
-export * from "./Options/Classes/Interactivity/Events/DivEvent.js";
-export * from "./Options/Classes/Interactivity/Events/Events.js";
-export * from "./Options/Classes/Interactivity/Events/HoverEvent.js";
-export * from "./Options/Classes/Interactivity/Events/Parallax.js";
-export * from "./Options/Classes/Interactivity/Events/ResizeEvent.js";
-export * from "./Options/Classes/Interactivity/Interactivity.js";
-export * from "./Options/Classes/Interactivity/Modes/Modes.js";
-export * from "./Options/Classes/ManualParticle.js";
 export * from "./Options/Classes/Options.js";
 export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
@@ -64,9 +46,7 @@ export * from "./Options/Classes/Particles/Shape/Shape.js";
 export * from "./Options/Classes/Particles/Size/Size.js";
 export * from "./Options/Classes/Particles/Size/SizeAnimation.js";
 export * from "./Options/Classes/Particles/ZIndex/ZIndex.js";
-export * from "./Options/Classes/Responsive.js";
-export * from "./Options/Classes/Theme/Theme.js";
-export * from "./Options/Classes/Theme/ThemeDefault.js";
+export * from "./Options/Classes/ResizeEvent.js";
 export * from "./Options/Classes/ValueWithRandom.js";
 export * from "./Utils/CanvasUtils.js";
 export * from "./Utils/ColorUtils.js";

package/umd/Core/Canvas.js

@@ -196,7 +196,7 @@
         }
         clear() {
             let pluginHandled = false;
-            for (const plugin of this.container.plugins.values()) {
+            for (const plugin of this.container.plugins) {
                 if (!pluginHandled && plugin.canvasClear) {
                     pluginHandled = plugin.canvasClear();
                 }
@@ -334,7 +334,7 @@
         }
         initPlugins() {
             this._resizePlugins = [];
-            for (const plugin of this.container.plugins.values()) {
+            for (const plugin of this.container.plugins) {
                 if (plugin.resize) {
                     this._resizePlugins.push(plugin);
                 }
@@ -392,7 +392,7 @@
         }
         paint() {
             let handled = false;
-            for (const plugin of this.container.plugins.values()) {
+            for (const plugin of this.container.plugins) {
                 if (handled) {
                     break;
                 }

package/umd/Core/Container.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/MathUtils.js", "./Utils/Constants.js", "./Canvas.js", "./Utils/EventListeners.js", "../Enums/Types/EventType.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js", "../Utils/Utils.js"], factory);
+        define(["require", "exports", "../Utils/MathUtils.js", "./Utils/Constants.js", "./Canvas.js", "./Utils/EventListeners.js", "../Enums/Types/EventType.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -20,7 +20,6 @@
     const Retina_js_1 = require("./Retina.js");
     const LogUtils_js_1 = require("../Utils/LogUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-    const Utils_js_1 = require("../Utils/Utils.js");
     function guardCheck(container) {
         return !container.destroyed;
     }
@@ -36,22 +35,6 @@
     class Container {
         constructor(engine, id, sourceOptions) {
             this._delta = { value: 0, factor: 0 };
-            this._intersectionManager = entries => {
-                if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
-                    return;
-                }
-                for (const entry of entries) {
-                    if (entry.target !== this.interactivity.element) {
-                        continue;
-                    }
-                    if (entry.isIntersecting) {
-                        this.play();
-                    }
-                    else {
-                        this.pause();
-                    }
-                }
-            };
             this._nextFrame = (timestamp) => {
                 try {
                     if (!this._smooth &&
@@ -96,28 +79,18 @@
             this._lastFrameTime = 0;
             this.zLayers = 100;
             this.pageHidden = false;
-            this._clickHandlers = new Map();
             this._sourceOptions = sourceOptions;
             this._initialSourceOptions = sourceOptions;
             this.retina = new Retina_js_1.Retina(this);
             this.canvas = new Canvas_js_1.Canvas(this, this._engine);
             this.particles = new Particles_js_1.Particles(this._engine, this);
             this.pathGenerators = new Map();
-            this.interactivity = {
-                mouse: {
-                    clicking: false,
-                    inside: false,
-                },
-            };
-            this.plugins = new Map();
+            this.plugins = [];
             this.effectDrawers = new Map();
             this.shapeDrawers = new Map();
             this._options = loadContainerOptions(this._engine, this);
             this.actualOptions = loadContainerOptions(this._engine, this);
             this._eventListeners = new EventListeners_js_1.EventListeners(this);
-            this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)(entries => {
-                this._intersectionManager(entries);
-            });
             this._engine.dispatchEvent(EventType_js_1.EventType.containerBuilt, { container: this });
         }
         get animationStatus() {
@@ -129,77 +102,6 @@
         get sourceOptions() {
             return this._sourceOptions;
         }
-        addClickHandler(callback) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            const el = this.interactivity.element;
-            if (!el) {
-                return;
-            }
-            const clickOrTouchHandler = (e, pos, radius) => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                const pxRatio = this.retina.pixelRatio, posRetina = {
-                    x: pos.x * pxRatio,
-                    y: pos.y * pxRatio,
-                }, particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
-                callback(e, particles);
-            }, clickHandler = (e) => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                const mouseEvent = e, pos = {
-                    x: mouseEvent.offsetX || mouseEvent.clientX,
-                    y: mouseEvent.offsetY || mouseEvent.clientY,
-                };
-                clickOrTouchHandler(e, pos, Constants_js_1.clickRadius);
-            }, touchStartHandler = () => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                touched = true;
-                touchMoved = false;
-            }, touchMoveHandler = () => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                touchMoved = true;
-            }, touchEndHandler = (e) => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                if (touched && !touchMoved) {
-                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - Constants_js_1.touchEndLengthOffset];
-                    if (!lastTouch) {
-                        return;
-                    }
-                    const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
-                        x: lastTouch.clientX - (canvasRect ? canvasRect.left : Constants_js_1.minCoordinate),
-                        y: lastTouch.clientY - (canvasRect ? canvasRect.top : Constants_js_1.minCoordinate),
-                    };
-                    clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
-                }
-                touched = false;
-                touchMoved = false;
-            }, touchCancelHandler = () => {
-                if (!guardCheck(this)) {
-                    return;
-                }
-                touched = false;
-                touchMoved = false;
-            };
-            let touched = false, touchMoved = false;
-            this._clickHandlers.set("click", clickHandler);
-            this._clickHandlers.set("touchstart", touchStartHandler);
-            this._clickHandlers.set("touchmove", touchMoveHandler);
-            this._clickHandlers.set("touchend", touchEndHandler);
-            this._clickHandlers.set("touchcancel", touchCancelHandler);
-            for (const [key, handler] of this._clickHandlers) {
-                el.addEventListener(key, handler);
-            }
-        }
         addLifeTime(value) {
             this._lifeTime += value;
         }
@@ -213,21 +115,11 @@
         alive() {
             return !this._duration || this._lifeTime <= this._duration;
         }
-        clearClickHandlers() {
-            if (!guardCheck(this)) {
-                return;
-            }
-            for (const [key, handler] of this._clickHandlers) {
-                this.interactivity.element?.removeEventListener(key, handler);
-            }
-            this._clickHandlers.clear();
-        }
         destroy(remove = true) {
             if (!guardCheck(this)) {
                 return;
             }
             this.stop();
-            this.clearClickHandlers();
             this.particles.destroy();
             this.canvas.destroy();
             for (const effectDrawer of this.effectDrawers.values()) {
@@ -238,10 +130,14 @@
                 shapeDrawer.destroy?.(this);
             }
             this.shapeDrawers.clear();
+            for (const plugin of this.plugins) {
+                plugin.destroy?.();
+            }
+            this.plugins.length = 0;
             this._engine.clearPlugins(this);
             this.destroyed = true;
             if (remove) {
-                const mainArr = this._engine.items, idx = mainArr.findIndex(t => t === this);
+                const mainArr = this._engine.items, idx = mainArr.indexOf(this);
                 if (idx >= Constants_js_1.removeMinIndex) {
                     mainArr.splice(idx, Constants_js_1.removeDeleteCount);
                 }
@@ -265,7 +161,7 @@
             });
         }
         async export(type, options = {}) {
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 if (!plugin.export) {
                     continue;
                 }
@@ -278,15 +174,6 @@
             (0, LogUtils_js_1.getLogger)().error(`Export plugin with type ${type} not found`);
             return undefined;
         }
-        handleClickMode(mode) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            this.particles.handleClickMode(mode);
-            for (const plugin of this.plugins.values()) {
-                plugin.handleClickMode?.(mode);
-            }
-        }
         async init() {
             if (!guardCheck(this)) {
                 return;
@@ -305,12 +192,21 @@
                     this.shapeDrawers.set(type, drawer);
                 }
             }
+            const allContainerPlugins = new Map();
+            for (const plugin of this._engine.plugins) {
+                const containerPlugin = await plugin.getPlugin(this);
+                if (containerPlugin.preInit) {
+                    await containerPlugin.preInit();
+                }
+                allContainerPlugins.set(plugin, containerPlugin);
+            }
             await this.particles.initPlugins();
             this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
             this.actualOptions = loadContainerOptions(this._engine, this, this._options);
-            const availablePlugins = await this._engine.getAvailablePlugins(this);
-            for (const [id, plugin] of availablePlugins) {
-                this.plugins.set(id, plugin);
+            for (const [plugin, containerPlugin] of allContainerPlugins) {
+                if (plugin.needsPlugin(this.actualOptions)) {
+                    this.plugins.push(containerPlugin);
+                }
             }
             this.retina.init();
             this.canvas.init();
@@ -325,30 +221,23 @@
             this._lifeTime = 0;
             this.fpsLimit = fpsLimit > Constants_js_1.minFpsLimit ? fpsLimit : Constants_js_1.defaultFpsLimit;
             this._smooth = smooth;
+            for (const plugin of this.plugins) {
+                await plugin.init?.();
+            }
             for (const drawer of this.effectDrawers.values()) {
                 await drawer.init?.(this);
             }
             for (const drawer of this.shapeDrawers.values()) {
                 await drawer.init?.(this);
             }
-            for (const plugin of this.plugins.values()) {
-                await plugin.init?.();
-            }
             this._engine.dispatchEvent(EventType_js_1.EventType.containerInit, { container: this });
             await this.particles.init();
             this.particles.setDensity();
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 plugin.particlesSetup?.();
             }
             this._engine.dispatchEvent(EventType_js_1.EventType.particlesSetup, { container: this });
         }
-        async loadTheme(name) {
-            if (!guardCheck(this)) {
-                return;
-            }
-            this._currentTheme = name;
-            await this.refresh();
-        }
         pause() {
             if (!guardCheck(this)) {
                 return;
@@ -360,7 +249,7 @@
             if (this._paused) {
                 return;
             }
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 plugin.pause?.();
             }
             if (!this.pageHidden) {
@@ -381,7 +270,7 @@
                 this._paused = false;
             }
             if (needsUpdate) {
-                for (const plugin of this.plugins.values()) {
+                for (const plugin of this.plugins) {
                     if (plugin.play) {
                         plugin.play();
                     }
@@ -416,10 +305,7 @@
             await new Promise(resolve => {
                 const start = async () => {
                     this._eventListeners.addListeners();
-                    if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
-                        this._intersectionObserver.observe(this.interactivity.element);
-                    }
-                    for (const plugin of this.plugins.values()) {
+                    for (const plugin of this.plugins) {
                         await plugin.start?.();
                     }
                     this._engine.dispatchEvent(EventType_js_1.EventType.containerStarted, { container: this });
@@ -443,27 +329,21 @@
             this.pause();
             this.particles.clear();
             this.canvas.stop();
-            if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
-                this._intersectionObserver.unobserve(this.interactivity.element);
-            }
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 plugin.stop?.();
             }
-            for (const key of this.plugins.keys()) {
-                this.plugins.delete(key);
-            }
+            this.plugins.length = 0;
             this._sourceOptions = this._options;
             this._engine.dispatchEvent(EventType_js_1.EventType.containerStopped, { container: this });
         }
         updateActualOptions() {
-            this.actualOptions.responsive = [];
-            const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
-            this.actualOptions.setTheme(this._currentTheme);
-            if (this._responsiveMaxWidth === newMaxWidth) {
-                return false;
+            let refresh = false;
+            for (const plugin of this.plugins) {
+                if (plugin.updateActualOptions) {
+                    refresh = plugin.updateActualOptions() || refresh;
+                }
             }
-            this._responsiveMaxWidth = newMaxWidth;
-            return true;
+            return refresh;
         }
     }
     exports.Container = Container;