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

package/cjs/Utils/NumberUtils.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseAlpha = exports.calcExactPositionOrRandomFromSizeRanged = exports.calcExactPositionOrRandomFromSize = exports.calcPositionOrRandomFromSizeRanged = exports.calcPositionOrRandomFromSize = exports.calcPositionFromSize = exports.collisionVelocity = exports.getParticleBaseVelocity = exports.getParticleDirectionAngle = exports.getDistance = exports.getDistances = exports.getValue = exports.setRangeValue = exports.getRangeMax = exports.getRangeMin = exports.getRangeValue = exports.randomInRange = exports.mix = exports.clamp = exports.getRandom = exports.setRandom = exports.getEasing = exports.addEasing = void 0;
-const Utils_js_1 = require("./Utils.js");
+exports.parseAlpha = exports.calcExactPositionOrRandomFromSizeRanged = exports.calcExactPositionOrRandomFromSize = exports.calcPositionOrRandomFromSizeRanged = exports.calcPositionOrRandomFromSize = exports.calcPositionFromSize = exports.collisionVelocity = exports.getParticleBaseVelocity = exports.getParticleDirectionAngle = exports.getDistance = exports.getDistances = exports.setRangeValue = exports.getRangeMax = exports.getRangeMin = exports.getRangeValue = exports.randomInRange = exports.mix = exports.clamp = exports.getRandom = exports.setRandom = exports.getEasing = exports.addEasing = void 0;
 const Vector_js_1 = require("../Core/Utils/Vector.js");
+const Utils_js_1 = require("./Utils.js");
 let _random = Math.random;
 const easings = new Map();
 function addEasing(name, easing) {
@@ -66,16 +66,6 @@ function setRangeValue(source, value) {
         : setRangeValue(min, max);
 }
 exports.setRangeValue = setRangeValue;
-function getValue(options) {
-    const random = options.random, { enable, minimumValue } = (0, Utils_js_1.isBoolean)(random)
-        ? {
-            enable: random,
-            minimumValue: 0,
-        }
-        : random;
-    return enable ? getRangeValue(setRangeValue(options.value, minimumValue)) : getRangeValue(options.value);
-}
-exports.getValue = getValue;
 function getDistances(pointA, pointB) {
     const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
     return { dx: dx, dy: dy, distance: Math.sqrt(dx ** 2 + dy ** 2) };
@@ -91,21 +81,21 @@ function getParticleDirectionAngle(direction, position, center) {
     }
     switch (direction) {
         case "top":
-            return -Math.PI / 2;
+            return -Math.PI * 0.5;
         case "top-right":
-            return -Math.PI / 4;
+            return -Math.PI * 0.25;
         case "right":
             return 0;
         case "bottom-right":
-            return Math.PI / 4;
+            return Math.PI * 0.25;
         case "bottom":
-            return Math.PI / 2;
+            return Math.PI * 0.5;
         case "bottom-left":
-            return (3 * Math.PI) / 4;
+            return Math.PI * 0.75;
         case "left":
             return Math.PI;
         case "top-left":
-            return (-3 * Math.PI) / 4;
+            return -Math.PI * 0.75;
         case "inside":
             return Math.atan2(center.y - position.y, center.x - position.x);
         case "outside":

package/cjs/Utils/Utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isArray = exports.isObject = exports.isFunction = exports.isNumber = exports.isString = exports.isBoolean = exports.getSize = exports.getPosition = exports.initParticleNumericAnimationValue = exports.findItemFromSingleOrMultiple = exports.itemFromSingleOrMultiple = exports.executeOnSingleOrMultiple = exports.rectBounce = exports.circleBounce = exports.circleBounceDataFromParticle = exports.divMode = exports.singleDivModeExecute = exports.divModeExecute = exports.isDivModeEnabled = exports.deepExtend = exports.calculateBounds = exports.areBoundsInside = exports.isPointInside = exports.itemFromArray = exports.arrayRandomIndex = exports.loadFont = exports.isInArray = exports.safeMutationObserver = exports.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = exports.getLogger = exports.setLogger = void 0;
+exports.isArray = exports.isObject = exports.isFunction = exports.isNumber = exports.isString = exports.isBoolean = exports.getSize = exports.getPosition = exports.initParticleNumericAnimationValue = exports.findItemFromSingleOrMultiple = exports.itemFromSingleOrMultiple = exports.executeOnSingleOrMultiple = exports.rectBounce = exports.circleBounce = exports.circleBounceDataFromParticle = exports.divMode = exports.singleDivModeExecute = exports.divModeExecute = exports.isDivModeEnabled = exports.deepExtend = exports.calculateBounds = exports.areBoundsInside = exports.isPointInside = exports.itemFromArray = exports.arrayRandomIndex = exports.loadFont = exports.isInArray = exports.safeMutationObserver = exports.safeIntersectionObserver = exports.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = exports.getLogger = exports.setLogger = void 0;
 const NumberUtils_js_1 = require("./NumberUtils.js");
 const Vector_js_1 = require("../Core/Utils/Vector.js");
 const _logger = {
@@ -32,8 +32,8 @@ function rectSideBounce(data) {
         pOtherSide.max > rectOtherSide.max) {
         return res;
     }
-    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) / 2 && velocity > 0) ||
-        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) / 2 && velocity < 0)) {
+    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * 0.5 && velocity > 0) ||
+        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * 0.5 && velocity < 0)) {
         res.velocity = velocity * -factor;
         res.bounced = true;
     }
@@ -60,6 +60,13 @@ function safeMatchMedia(query) {
     return matchMedia(query);
 }
 exports.safeMatchMedia = safeMatchMedia;
+function safeIntersectionObserver(callback) {
+    if (isSsr() || typeof IntersectionObserver === "undefined") {
+        return;
+    }
+    return new IntersectionObserver(callback);
+}
+exports.safeIntersectionObserver = safeIntersectionObserver;
 function safeMutationObserver(callback) {
     if (isSsr() || typeof MutationObserver === "undefined") {
         return;
@@ -182,7 +189,7 @@ function circleBounceDataFromParticle(p) {
         radius: p.getRadius(),
         mass: p.getMass(),
         velocity: p.velocity,
-        factor: Vector_js_1.Vector.create((0, NumberUtils_js_1.getValue)(p.options.bounce.horizontal), (0, NumberUtils_js_1.getValue)(p.options.bounce.vertical)),
+        factor: Vector_js_1.Vector.create((0, NumberUtils_js_1.getRangeValue)(p.options.bounce.horizontal.value), (0, NumberUtils_js_1.getRangeValue)(p.options.bounce.vertical.value)),
     };
 }
 exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
@@ -199,7 +206,7 @@ function circleBounce(p1, p2) {
 }
 exports.circleBounce = circleBounce;
 function rectBounce(particle, divBounds) {
-    const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), resH = rectSideBounce({
+    const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), bounceOptions = particle.options.bounce, resH = rectSideBounce({
         pSide: {
             min: bounds.left,
             max: bounds.right,
@@ -217,7 +224,7 @@ function rectBounce(particle, divBounds) {
             max: divBounds.bottom,
         },
         velocity: particle.velocity.x,
-        factor: (0, NumberUtils_js_1.getValue)(particle.options.bounce.horizontal),
+        factor: (0, NumberUtils_js_1.getRangeValue)(bounceOptions.horizontal.value),
     });
     if (resH.bounced) {
         if (resH.velocity !== undefined) {
@@ -245,7 +252,7 @@ function rectBounce(particle, divBounds) {
             max: divBounds.right,
         },
         velocity: particle.velocity.y,
-        factor: (0, NumberUtils_js_1.getValue)(particle.options.bounce.vertical),
+        factor: (0, NumberUtils_js_1.getRangeValue)(bounceOptions.vertical.value),
     });
     if (resV.bounced) {
         if (resV.velocity !== undefined) {

package/cjs/export-types.js

@@ -26,12 +26,12 @@ __exportStar(require("./Core/Interfaces/IDelta.js"), exports);
 __exportStar(require("./Core/Interfaces/IDimension.js"), exports);
 __exportStar(require("./Core/Interfaces/IDistance.js"), exports);
 __exportStar(require("./Core/Interfaces/IDrawParticleParams.js"), exports);
+__exportStar(require("./Core/Interfaces/IEffectDrawer.js"), exports);
 __exportStar(require("./Core/Interfaces/IExternalInteractor.js"), exports);
 __exportStar(require("./Core/Interfaces/IInteractor.js"), exports);
 __exportStar(require("./Core/Interfaces/ILoadParams.js"), exports);
 __exportStar(require("./Core/Interfaces/IMouseData.js"), exports);
 __exportStar(require("./Core/Interfaces/IMovePathGenerator.js"), exports);
-__exportStar(require("./Core/Interfaces/IParticle.js"), exports);
 __exportStar(require("./Core/Interfaces/IParticleColorStyle.js"), exports);
 __exportStar(require("./Core/Interfaces/IParticleHslAnimation.js"), exports);
 __exportStar(require("./Core/Interfaces/IParticleLife.js"), exports);
@@ -46,6 +46,7 @@ __exportStar(require("./Core/Interfaces/IPlugin.js"), exports);
 __exportStar(require("./Core/Interfaces/IPositionFromSizeParams.js"), exports);
 __exportStar(require("./Core/Interfaces/IRangeValue.js"), exports);
 __exportStar(require("./Core/Interfaces/IRectSideResult.js"), exports);
+__exportStar(require("./Core/Interfaces/IShapeDrawData.js"), exports);
 __exportStar(require("./Core/Interfaces/IShapeDrawer.js"), exports);
 __exportStar(require("./Core/Interfaces/IShapeValues.js"), exports);
 __exportStar(require("./Core/Interfaces/ISlowParticleData.js"), exports);
@@ -78,6 +79,7 @@ __exportStar(require("./Options/Interfaces/Particles/Bounce/IParticlesBounce.js"
 __exportStar(require("./Options/Interfaces/Particles/Collisions/ICollisions.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/Collisions/ICollisionsAbsorb.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/Collisions/ICollisionsOverlap.js"), exports);
+__exportStar(require("./Options/Interfaces/Particles/Effect/IEffect.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/IParticlesOptions.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/IShadow.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/IStroke.js"), exports);
@@ -92,6 +94,7 @@ __exportStar(require("./Options/Interfaces/Particles/Move/ISpin.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/Move/IMoveTrail.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/Number/IParticlesDensity.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/Number/IParticlesNumber.js"), exports);
+__exportStar(require("./Options/Interfaces/Particles/Number/IParticlesNumberLimit.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/Opacity/IOpacity.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/Opacity/IOpacityAnimation.js"), exports);
 __exportStar(require("./Options/Interfaces/Particles/Shape/IShape.js"), exports);
@@ -109,5 +112,4 @@ __exportStar(require("./Types/PathOptions.js"), exports);
 __exportStar(require("./Types/RangeValue.js"), exports);
 __exportStar(require("./Types/RecursivePartial.js"), exports);
 __exportStar(require("./Types/ShapeData.js"), exports);
-__exportStar(require("./Types/ShapeDrawerFunctions.js"), exports);
 __exportStar(require("./Types/SingleOrMultiple.js"), exports);

package/cjs/exports.js

@@ -27,10 +27,8 @@ __exportStar(require("./Enums/Directions/MoveDirection.js"), exports);
 __exportStar(require("./Enums/Directions/RotateDirection.js"), exports);
 __exportStar(require("./Enums/Directions/OutModeDirection.js"), exports);
 __exportStar(require("./Enums/Modes/AnimationMode.js"), exports);
-__exportStar(require("./Enums/Modes/ClickMode.js"), exports);
-__exportStar(require("./Enums/Modes/DivMode.js"), exports);
-__exportStar(require("./Enums/Modes/HoverMode.js"), exports);
 __exportStar(require("./Enums/Modes/CollisionMode.js"), exports);
+__exportStar(require("./Enums/Modes/LimitMode.js"), exports);
 __exportStar(require("./Enums/Modes/OutMode.js"), exports);
 __exportStar(require("./Enums/Modes/PixelMode.js"), exports);
 __exportStar(require("./Enums/Modes/ThemeMode.js"), exports);
@@ -85,6 +83,7 @@ __exportStar(require("./Options/Classes/Particles/Move/Path/MovePath.js"), expor
 __exportStar(require("./Options/Classes/Particles/Move/Spin.js"), exports);
 __exportStar(require("./Options/Classes/Particles/Move/MoveTrail.js"), exports);
 __exportStar(require("./Options/Classes/Particles/Number/ParticlesNumber.js"), exports);
+__exportStar(require("./Options/Classes/Particles/Number/ParticlesNumberLimit.js"), exports);
 __exportStar(require("./Options/Classes/Particles/Number/ParticlesDensity.js"), exports);
 __exportStar(require("./Options/Classes/Particles/Opacity/Opacity.js"), exports);
 __exportStar(require("./Options/Classes/Particles/Opacity/OpacityAnimation.js"), exports);

package/esm/Core/Canvas.js

@@ -402,10 +402,10 @@ export class Canvas {
         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/esm/Core/Container.js

@@ -1,10 +1,10 @@
+import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
 import { errorPrefix } from "./Utils/Constants.js";
-import { getLogger } from "../Utils/Utils.js";
 import { getRangeValue } from "../Utils/NumberUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
 function guardCheck(container) {
@@ -23,7 +23,6 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 export class Container {
     constructor(engine, id, sourceOptions) {
-        this.id = id;
         this._intersectionManager = (entries) => {
             if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                 return;
@@ -37,16 +36,16 @@ export class Container {
         };
         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;
@@ -65,8 +64,9 @@ export class Container {
             }
         };
         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;
@@ -74,7 +74,7 @@ export class Container {
         this.started = false;
         this.destroyed = false;
         this._paused = true;
-        this.lastFrameTime = 0;
+        this._lastFrameTime = 0;
         this.zLayers = 100;
         this.pageHidden = false;
         this._sourceOptions = sourceOptions;
@@ -90,13 +90,12 @@ export class Container {
             },
         };
         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(this);
-        if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
-            this._intersectionObserver = new IntersectionObserver((entries) => this._intersectionManager(entries));
-        }
+        this._intersectionObserver = safeIntersectionObserver((entries) => this._intersectionManager(entries));
         this._engine.dispatchEvent("containerBuilt", { container: this });
     }
     get options() {
@@ -202,11 +201,17 @@ export class Container {
         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.drawers.keys()) {
-            this.drawers.delete(key);
+        for (const key of this.effectDrawers.keys()) {
+            this.effectDrawers.delete(key);
+        }
+        for (const key of this.shapeDrawers.keys()) {
+            this.shapeDrawers.delete(key);
         }
         this._engine.clearPlugins(this);
         this.destroyed = true;
@@ -223,7 +228,7 @@ export class Container {
         let refreshTime = force;
         this._drawAnimationFrame = requestAnimationFrame(async (timestamp) => {
             if (refreshTime) {
-                this.lastFrameTime = undefined;
+                this._lastFrameTime = undefined;
                 refreshTime = false;
             }
             await this._nextFrame(timestamp);
@@ -258,11 +263,18 @@ export class Container {
         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);
@@ -281,8 +293,11 @@ export class Container {
         this._delay = 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) {
@@ -411,10 +426,10 @@ export class Container {
         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/esm/Core/Engine.js

@@ -1,5 +1,5 @@
 import { errorPrefix, generatedAttribute } from "./Utils/Constants.js";
-import { executeOnSingleOrMultiple, getLogger, isBoolean, isFunction, isString, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
+import { executeOnSingleOrMultiple, getLogger, itemFromSingleOrMultiple } from "../Utils/Utils.js";
 import { Container } from "./Container.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
 import { getRandom } from "../Utils/NumberUtils.js";
@@ -39,7 +39,8 @@ export class Engine {
         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() {
@@ -50,18 +51,18 @@ export class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.2";
+        return "3.0.0-beta.4";
     }
-    addConfig(nameOrConfig, config) {
-        if (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) {
+        executeOnSingleOrMultiple(effect, (type) => {
+            !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+        });
+        await this.refresh(refresh);
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
@@ -90,45 +91,11 @@ export class Engine {
         (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 (isBoolean(initOrRefresh)) {
-            realRefresh = initOrRefresh;
-            realInit = undefined;
-        }
-        else {
-            realInit = initOrRefresh;
-        }
-        if (isBoolean(afterEffectOrRefresh)) {
-            realRefresh = afterEffectOrRefresh;
-            realAfterEffect = undefined;
-        }
-        else {
-            realAfterEffect = afterEffectOrRefresh;
-        }
-        if (isBoolean(destroyOrRefresh)) {
-            realRefresh = destroyOrRefresh;
-            realDestroy = undefined;
-        }
-        else {
-            realDestroy = destroyOrRefresh;
-        }
-        if (isFunction(drawer)) {
-            customDrawer = {
-                afterEffect: realAfterEffect,
-                destroy: realDestroy,
-                draw: drawer,
-                init: realInit,
-            };
-        }
-        else {
-            customDrawer = drawer;
-        }
+    async addShape(shape, drawer, refresh = true) {
         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);
@@ -156,6 +123,9 @@ export class Engine {
         }
         return res;
     }
+    getEffectDrawer(type) {
+        return this.effectDrawers.get(type);
+    }
     getInteractors(container, force = false) {
         return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
     }
@@ -172,10 +142,13 @@ export class Engine {
         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);
@@ -194,7 +167,7 @@ export class Engine {
             domContainer.id = id;
             document.body.append(domContainer);
         }
-        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === id);
+        const currentOptions = 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) {