@tsparticles/engine 3.0.0-beta.2 → 3.0.0-beta.4

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

@@ -1,5 +1,6 @@
 import type { IAnimatableColor } from "../IAnimatableColor.js";
 import type { ICollisions } from "./Collisions/ICollisions.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";
@@ -18,6 +19,7 @@ export interface IParticlesOptions {
     bounce: IParticlesBounce;
     collisions: ICollisions;
     color: IAnimatableColor;
+    effect: IEffect;
     groups: ParticlesGroups;
     interactivity?: RecursivePartial<IInteractivity>;
     move: IMove;

package/types/Options/Interfaces/Particles/Number/IParticlesNumber.d.ts

@@ -1,6 +1,7 @@
 import type { IParticlesDensity } from "./IParticlesDensity.js";
+import type { IParticlesNumberLimit } from "./IParticlesNumberLimit.js";
 export interface IParticlesNumber {
     density: IParticlesDensity;
-    limit: number;
+    limit: IParticlesNumberLimit;
     value: number;
 }

package/types/Options/Interfaces/Particles/Number/IParticlesNumberLimit.d.ts

@@ -0,0 +1,5 @@
+import type { LimitMode } from "../../../../Enums/Modes/LimitMode.js";
+export interface IParticlesNumberLimit {
+    mode: LimitMode | keyof typeof LimitMode;
+    value: number;
+}

package/types/Types/CustomEventArgs.d.ts

@@ -1,5 +1,5 @@
 import type { Container } from "../Core/Container.js";
 export type CustomEventArgs = {
-    container: Container;
+    container?: Container;
     data?: unknown;
 };

package/types/Utils/CanvasUtils.d.ts

@@ -8,13 +8,22 @@ import type { IDrawParticleParams } from "../Core/Interfaces/IDrawParticleParams
 import type { IHsl } from "../Core/Interfaces/Colors.js";
 import type { Particle } from "../Core/Particle.js";
 export declare function drawLine(context: CanvasRenderingContext2D, begin: ICoordinates, end: ICoordinates): void;
-export declare function drawTriangle(context: CanvasRenderingContext2D, p1: ICoordinates, p2: ICoordinates, p3: ICoordinates): void;
 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): void;
-export declare function drawShape(container: Container, context: CanvasRenderingContext2D, particle: Particle, radius: number, opacity: number, delta: IDelta): void;
-export declare function drawShapeAfterEffect(container: Container, context: CanvasRenderingContext2D, particle: Particle, radius: number, opacity: number, delta: IDelta): void;
+type DrawShapeData = {
+    container: Container;
+    context: CanvasRenderingContext2D;
+    delta: IDelta;
+    opacity: number;
+    particle: Particle;
+    radius: number;
+};
+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/types/Utils/ColorUtils.d.ts

@@ -2,8 +2,8 @@ import type { IColor, IHsl, IHsla, IRangeColor, IRgb, IRgba } from "../Core/Inte
 import type { HslAnimation } from "../Options/Classes/HslAnimation.js";
 import type { IColorManager } from "../Core/Interfaces/IColorManager.js";
 import type { IOptionsColor } from "../Options/Interfaces/IOptionsColor.js";
-import type { IParticle } from "../Core/Interfaces/IParticle.js";
 import type { IParticleHslAnimation } from "../Core/Interfaces/IParticleHslAnimation.js";
+import type { Particle } from "../Core/Particle.js";
 export declare function addColorManager(manager: IColorManager): void;
 export declare function rangeColorToRgb(input?: string | IRangeColor, index?: number, useIndex?: boolean): IRgb | undefined;
 export declare function colorToRgb(input?: string | IColor, index?: number, useIndex?: boolean): IRgb | undefined;
@@ -18,7 +18,7 @@ export declare function getRandomRgbColor(min?: number): IRgb;
 export declare function getStyleFromRgb(color: IRgb, opacity?: number): string;
 export declare function getStyleFromHsl(color: IHsl, opacity?: number): string;
 export declare function colorMix(color1: IRgb | IHsl, color2: IRgb | IHsl, size1: number, size2: number): IRgb;
-export declare function getLinkColor(p1: IParticle, p2?: IParticle, linkColor?: string | IRgb): IRgb | undefined;
+export declare function getLinkColor(p1: Particle, p2?: Particle, linkColor?: string | IRgb): IRgb | undefined;
 export declare function getLinkRandomColor(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;

package/types/Utils/NumberUtils.d.ts

@@ -1,7 +1,6 @@
 import type { EasingType, EasingTypeAlt } from "../Enums/Types/EasingType.js";
 import type { IPositionFromSizeParams, IRangedPositionFromSizeParams } from "../Core/Interfaces/IPositionFromSizeParams.js";
 import type { ICoordinates } from "../Core/Interfaces/ICoordinates.js";
-import type { IValueWithRandom } from "../Options/Interfaces/IValueWithRandom.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import type { MoveDirectionAlt } from "../Enums/Directions/MoveDirection.js";
 import type { RangeValue } from "../Types/RangeValue.js";
@@ -18,7 +17,6 @@ export declare function getRangeValue(value: RangeValue): number;
 export declare function getRangeMin(value: RangeValue): number;
 export declare function getRangeMax(value: RangeValue): number;
 export declare function setRangeValue(source: RangeValue, value?: number): RangeValue;
-export declare function getValue(options: IValueWithRandom): number;
 export declare function getDistances(pointA: ICoordinates, pointB: ICoordinates): {
     distance: number;
     dx: number;

package/types/Utils/Utils.d.ts

@@ -1,13 +1,12 @@
 import type { ICoordinates, ICoordinatesWithMode } from "../Core/Interfaces/ICoordinates.js";
 import type { IDimension, IDimensionWithMode } from "../Core/Interfaces/IDimension.js";
 import type { DivEvent } from "../Options/Classes/Interactivity/Events/DivEvent.js";
-import type { DivMode } from "../Enums/Modes/DivMode.js";
 import type { IBounds } from "../Core/Interfaces/IBounds.js";
 import type { ICircleBouncer } from "../Core/Interfaces/ICircleBouncer.js";
 import type { IModeDiv } from "../Options/Interfaces/Interactivity/Modes/IModeDiv.js";
-import type { IParticle } from "../Core/Interfaces/IParticle.js";
 import type { IParticleNumericValueAnimation } from "../Core/Interfaces/IParticleValueAnimation.js";
 import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
+import type { Particle } from "../Core/Particle.js";
 import type { RangedAnimationValueWithRandom } from "../Options/Classes/ValueWithRandom.js";
 import type { SingleOrMultiple } from "../Types/SingleOrMultiple.js";
 interface ILogger {
@@ -23,6 +22,7 @@ export declare function getLogger(): ILogger;
 export declare function isSsr(): boolean;
 export declare function hasMatchMedia(): boolean;
 export declare function safeMatchMedia(query: string): MediaQueryList | undefined;
+export declare function safeIntersectionObserver(callback: (records: IntersectionObserverEntry[]) => void): IntersectionObserver | undefined;
 export declare function safeMutationObserver(callback: (records: MutationRecord[]) => void): MutationObserver | undefined;
 export declare function isInArray<T>(value: T, array: SingleOrMultiple<T>): boolean;
 export declare function loadFont(font?: string, weight?: string): Promise<void>;
@@ -32,13 +32,13 @@ 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: DivMode, divs: SingleOrMultiple<DivEvent>): boolean;
-export declare function divModeExecute(mode: DivMode, divs: SingleOrMultiple<DivEvent>, callback: (id: string, div: DivEvent) => void): void;
+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: IParticle): ICircleBouncer;
+export declare function circleBounceDataFromParticle(p: Particle): ICircleBouncer;
 export declare function circleBounce(p1: ICircleBouncer, p2: ICircleBouncer): void;
-export declare function rectBounce(particle: IParticle, divBounds: IBounds): void;
+export declare function rectBounce(particle: Particle, divBounds: IBounds): void;
 export declare function executeOnSingleOrMultiple<T, U = void>(obj: SingleOrMultiple<T>, callback: (obj: T, index: number) => U): SingleOrMultiple<U>;
 export declare function itemFromSingleOrMultiple<T>(obj: SingleOrMultiple<T>, index?: number, useIndex?: boolean): T;
 export declare function findItemFromSingleOrMultiple<T>(obj: SingleOrMultiple<T>, callback: (obj: T, index: number) => boolean): T | undefined;

package/types/export-types.d.ts

@@ -11,12 +11,12 @@ export * from "./Core/Interfaces/IDelta.js";
 export * from "./Core/Interfaces/IDimension.js";
 export * from "./Core/Interfaces/IDistance.js";
 export * from "./Core/Interfaces/IDrawParticleParams.js";
+export * from "./Core/Interfaces/IEffectDrawer.js";
 export * from "./Core/Interfaces/IExternalInteractor.js";
 export * from "./Core/Interfaces/IInteractor.js";
 export * from "./Core/Interfaces/ILoadParams.js";
 export * from "./Core/Interfaces/IMouseData.js";
 export * from "./Core/Interfaces/IMovePathGenerator.js";
-export * from "./Core/Interfaces/IParticle.js";
 export * from "./Core/Interfaces/IParticleColorStyle.js";
 export * from "./Core/Interfaces/IParticleHslAnimation.js";
 export * from "./Core/Interfaces/IParticleLife.js";
@@ -31,6 +31,7 @@ export * from "./Core/Interfaces/IPlugin.js";
 export * from "./Core/Interfaces/IPositionFromSizeParams.js";
 export * from "./Core/Interfaces/IRangeValue.js";
 export * from "./Core/Interfaces/IRectSideResult.js";
+export * from "./Core/Interfaces/IShapeDrawData.js";
 export * from "./Core/Interfaces/IShapeDrawer.js";
 export * from "./Core/Interfaces/IShapeValues.js";
 export * from "./Core/Interfaces/ISlowParticleData.js";
@@ -63,6 +64,7 @@ export * from "./Options/Interfaces/Particles/Bounce/IParticlesBounce.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisions.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisionsAbsorb.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisionsOverlap.js";
+export * from "./Options/Interfaces/Particles/Effect/IEffect.js";
 export * from "./Options/Interfaces/Particles/IParticlesOptions.js";
 export * from "./Options/Interfaces/Particles/IShadow.js";
 export * from "./Options/Interfaces/Particles/IStroke.js";
@@ -77,6 +79,7 @@ export * from "./Options/Interfaces/Particles/Move/ISpin.js";
 export * from "./Options/Interfaces/Particles/Move/IMoveTrail.js";
 export * from "./Options/Interfaces/Particles/Number/IParticlesDensity.js";
 export * from "./Options/Interfaces/Particles/Number/IParticlesNumber.js";
+export * from "./Options/Interfaces/Particles/Number/IParticlesNumberLimit.js";
 export * from "./Options/Interfaces/Particles/Opacity/IOpacity.js";
 export * from "./Options/Interfaces/Particles/Opacity/IOpacityAnimation.js";
 export * from "./Options/Interfaces/Particles/Shape/IShape.js";
@@ -94,7 +97,6 @@ export * from "./Types/PathOptions.js";
 export * from "./Types/RangeValue.js";
 export * from "./Types/RecursivePartial.js";
 export * from "./Types/ShapeData.js";
-export * from "./Types/ShapeDrawerFunctions.js";
 export * from "./Types/SingleOrMultiple.js";
 export type { EventListeners } from "./Core/Utils/EventListeners.js";
 export type { InteractionManager } from "./Core/Utils/InteractionManager.js";
@@ -105,3 +107,4 @@ export type { Particle } from "./Core/Particle.js";
 export type { Particles } from "./Core/Particles.js";
 export type { Retina } from "./Core/Retina.js";
 export type { Engine, Engine as Main };
+export type { IParticlesNumberLimit } from "./Options/Interfaces/Particles/Number/IParticlesNumberLimit.js";

package/types/exports.d.ts

@@ -11,10 +11,8 @@ export * from "./Enums/Directions/MoveDirection.js";
 export * from "./Enums/Directions/RotateDirection.js";
 export * from "./Enums/Directions/OutModeDirection.js";
 export * from "./Enums/Modes/AnimationMode.js";
-export * from "./Enums/Modes/ClickMode.js";
-export * from "./Enums/Modes/DivMode.js";
-export * from "./Enums/Modes/HoverMode.js";
 export * from "./Enums/Modes/CollisionMode.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";
@@ -69,6 +67,7 @@ export * from "./Options/Classes/Particles/Move/Path/MovePath.js";
 export * from "./Options/Classes/Particles/Move/Spin.js";
 export * from "./Options/Classes/Particles/Move/MoveTrail.js";
 export * from "./Options/Classes/Particles/Number/ParticlesNumber.js";
+export * from "./Options/Classes/Particles/Number/ParticlesNumberLimit.js";
 export * from "./Options/Classes/Particles/Number/ParticlesDensity.js";
 export * from "./Options/Classes/Particles/Opacity/Opacity.js";
 export * from "./Options/Classes/Particles/Opacity/OpacityAnimation.js";

package/umd/Core/Canvas.js

@@ -414,10 +414,10 @@
             this.element.width = size.width = this.element.offsetWidth * pxRatio;
             this.element.height = size.height = this.element.offsetHeight * pxRatio;
             if (this.container.started) {
-                this.resizeFactor = {
+                container.particles.setResizeFactor({
                     width: size.width / oldSize.width,
                     height: size.height / oldSize.height,
-                };
+                });
             }
             return true;
         }

package/umd/Core/Container.js

@@ -4,19 +4,19 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Canvas.js", "./Utils/EventListeners.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "./Utils/Constants.js", "../Utils/Utils.js", "../Utils/NumberUtils.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "../Utils/Utils.js", "./Canvas.js", "./Utils/EventListeners.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "./Utils/Constants.js", "../Utils/NumberUtils.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Container = void 0;
+    const Utils_js_1 = require("../Utils/Utils.js");
     const Canvas_js_1 = require("./Canvas.js");
     const EventListeners_js_1 = require("./Utils/EventListeners.js");
     const Options_js_1 = require("../Options/Classes/Options.js");
     const Particles_js_1 = require("./Particles.js");
     const Retina_js_1 = require("./Retina.js");
     const Constants_js_1 = require("./Utils/Constants.js");
-    const Utils_js_1 = require("../Utils/Utils.js");
     const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
     function guardCheck(container) {
@@ -35,7 +35,6 @@
     }
     class Container {
         constructor(engine, id, sourceOptions) {
-            this.id = id;
             this._intersectionManager = (entries) => {
                 if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                     return;
@@ -49,16 +48,16 @@
             };
             this._nextFrame = async (timestamp) => {
                 try {
-                    if (!this.smooth &&
-                        this.lastFrameTime !== undefined &&
-                        timestamp < this.lastFrameTime + 1000 / this.fpsLimit) {
+                    if (!this._smooth &&
+                        this._lastFrameTime !== undefined &&
+                        timestamp < this._lastFrameTime + 1000 / this.fpsLimit) {
                         this.draw(false);
                         return;
                     }
-                    this.lastFrameTime ??= timestamp;
-                    const delta = initDelta(timestamp - this.lastFrameTime, this.fpsLimit, this.smooth);
+                    this._lastFrameTime ??= timestamp;
+                    const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
                     this.addLifeTime(delta.value);
-                    this.lastFrameTime = timestamp;
+                    this._lastFrameTime = timestamp;
                     if (delta.value > 1000) {
                         this.draw(false);
                         return;
@@ -77,8 +76,9 @@
                 }
             };
             this._engine = engine;
+            this.id = Symbol(id);
             this.fpsLimit = 120;
-            this.smooth = false;
+            this._smooth = false;
             this._delay = 0;
             this._duration = 0;
             this._lifeTime = 0;
@@ -86,7 +86,7 @@
             this.started = false;
             this.destroyed = false;
             this._paused = true;
-            this.lastFrameTime = 0;
+            this._lastFrameTime = 0;
             this.zLayers = 100;
             this.pageHidden = false;
             this._sourceOptions = sourceOptions;
@@ -102,13 +102,12 @@
                 },
             };
             this.plugins = new Map();
-            this.drawers = new Map();
+            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);
-            if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
-                this._intersectionObserver = new IntersectionObserver((entries) => this._intersectionManager(entries));
-            }
+            this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)((entries) => this._intersectionManager(entries));
             this._engine.dispatchEvent("containerBuilt", { container: this });
         }
         get options() {
@@ -214,11 +213,17 @@
             this.stop();
             this.particles.destroy();
             this.canvas.destroy();
-            for (const [, drawer] of this.drawers) {
-                drawer.destroy && drawer.destroy(this);
+            for (const [, effectDrawer] of this.effectDrawers) {
+                effectDrawer.destroy && effectDrawer.destroy(this);
+            }
+            for (const [, shapeDrawer] of this.shapeDrawers) {
+                shapeDrawer.destroy && shapeDrawer.destroy(this);
+            }
+            for (const key of this.effectDrawers.keys()) {
+                this.effectDrawers.delete(key);
             }
-            for (const key of this.drawers.keys()) {
-                this.drawers.delete(key);
+            for (const key of this.shapeDrawers.keys()) {
+                this.shapeDrawers.delete(key);
             }
             this._engine.clearPlugins(this);
             this.destroyed = true;
@@ -235,7 +240,7 @@
             let refreshTime = force;
             this._drawAnimationFrame = requestAnimationFrame(async (timestamp) => {
                 if (refreshTime) {
-                    this.lastFrameTime = undefined;
+                    this._lastFrameTime = undefined;
                     refreshTime = false;
                 }
                 await this._nextFrame(timestamp);
@@ -270,11 +275,18 @@
             if (!guardCheck(this)) {
                 return;
             }
+            const effects = this._engine.getSupportedEffects();
+            for (const type of effects) {
+                const drawer = this._engine.getEffectDrawer(type);
+                if (drawer) {
+                    this.effectDrawers.set(type, drawer);
+                }
+            }
             const shapes = this._engine.getSupportedShapes();
             for (const type of shapes) {
                 const drawer = this._engine.getShapeDrawer(type);
                 if (drawer) {
-                    this.drawers.set(type, drawer);
+                    this.shapeDrawers.set(type, drawer);
                 }
             }
             this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
@@ -293,8 +305,11 @@
             this._delay = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.delay) * 1000;
             this._lifeTime = 0;
             this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
-            this.smooth = this.actualOptions.smooth;
-            for (const [, drawer] of this.drawers) {
+            this._smooth = this.actualOptions.smooth;
+            for (const [, drawer] of this.effectDrawers) {
+                drawer.init && (await drawer.init(this));
+            }
+            for (const [, drawer] of this.shapeDrawers) {
                 drawer.init && (await drawer.init(this));
             }
             for (const [, plugin] of this.plugins) {
@@ -423,10 +438,10 @@
             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) {
+            if (this._responsiveMaxWidth === newMaxWidth) {
                 return false;
             }
-            this.responsiveMaxWidth = newMaxWidth;
+            this._responsiveMaxWidth = newMaxWidth;
             return true;
         }
     }

package/umd/Core/Engine.js

@@ -51,7 +51,8 @@
             this.movers = new Map();
             this.updaters = new Map();
             this.presets = new Map();
-            this.drawers = new Map();
+            this.effectDrawers = new Map();
+            this.shapeDrawers = new Map();
             this.pathGenerators = new Map();
         }
         get configs() {
@@ -62,18 +63,18 @@
             return res;
         }
         get version() {
-            return "3.0.0-beta.2";
+            return "3.0.0-beta.4";
         }
-        addConfig(nameOrConfig, config) {
-            if ((0, Utils_js_1.isString)(nameOrConfig)) {
-                if (config) {
-                    config.name = nameOrConfig;
-                    this._configs.set(nameOrConfig, config);
-                }
-            }
-            else {
-                this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
-            }
+        addConfig(config) {
+            const name = config.name ?? "default";
+            this._configs.set(name, config);
+            this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
+        }
+        async addEffect(effect, drawer, refresh = true) {
+            (0, Utils_js_1.executeOnSingleOrMultiple)(effect, (type) => {
+                !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+            });
+            await this.refresh(refresh);
         }
         addEventListener(type, listener) {
             this._eventDispatcher.addEventListener(type, listener);
@@ -102,45 +103,11 @@
             (override || !this.getPreset(preset)) && this.presets.set(preset, options);
             await this.refresh(refresh);
         }
-        async addShape(shape, drawer, initOrRefresh, afterEffectOrRefresh, destroyOrRefresh, refresh = true) {
-            let customDrawer;
-            let realRefresh = refresh, realInit, realAfterEffect, realDestroy;
-            if ((0, Utils_js_1.isBoolean)(initOrRefresh)) {
-                realRefresh = initOrRefresh;
-                realInit = undefined;
-            }
-            else {
-                realInit = initOrRefresh;
-            }
-            if ((0, Utils_js_1.isBoolean)(afterEffectOrRefresh)) {
-                realRefresh = afterEffectOrRefresh;
-                realAfterEffect = undefined;
-            }
-            else {
-                realAfterEffect = afterEffectOrRefresh;
-            }
-            if ((0, Utils_js_1.isBoolean)(destroyOrRefresh)) {
-                realRefresh = destroyOrRefresh;
-                realDestroy = undefined;
-            }
-            else {
-                realDestroy = destroyOrRefresh;
-            }
-            if ((0, Utils_js_1.isFunction)(drawer)) {
-                customDrawer = {
-                    afterEffect: realAfterEffect,
-                    destroy: realDestroy,
-                    draw: drawer,
-                    init: realInit,
-                };
-            }
-            else {
-                customDrawer = drawer;
-            }
+        async addShape(shape, drawer, refresh = true) {
             (0, Utils_js_1.executeOnSingleOrMultiple)(shape, (type) => {
-                !this.getShapeDrawer(type) && this.drawers.set(type, customDrawer);
+                !this.getShapeDrawer(type) && this.shapeDrawers.set(type, drawer);
             });
-            await this.refresh(realRefresh);
+            await this.refresh(refresh);
         }
         clearPlugins(container) {
             this.updaters.delete(container);
@@ -168,6 +135,9 @@
             }
             return res;
         }
+        getEffectDrawer(type) {
+            return this.effectDrawers.get(type);
+        }
         getInteractors(container, force = false) {
             return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
         }
@@ -184,10 +154,13 @@
             return this.presets.get(preset);
         }
         getShapeDrawer(type) {
-            return this.drawers.get(type);
+            return this.shapeDrawers.get(type);
+        }
+        getSupportedEffects() {
+            return this.effectDrawers.keys();
         }
         getSupportedShapes() {
-            return this.drawers.keys();
+            return this.shapeDrawers.keys();
         }
         getUpdaters(container, force = false) {
             return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
@@ -206,7 +179,7 @@
                 domContainer.id = id;
                 document.body.append(domContainer);
             }
-            const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === id);
+            const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id);
             if (oldIndex >= 0) {
                 const old = this.domItem(oldIndex);
                 if (old && !old.destroyed) {