@tsparticles/engine 4.0.0-alpha.2 → 4.0.0-alpha.4

package/browser/Utils/Utils.js

@@ -1,6 +1,6 @@
 import { clamp, collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRangeValue, } from "./MathUtils.js";
 import { half, millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
-import { isArray, isNull, isObject } from "./TypeUtils.js";
+import { isArray, isBoolean, isNull, isObject } from "./TypeUtils.js";
 import { AnimationMode } from "../Enums/Modes/AnimationMode.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { DestroyType } from "../Enums/Types/DestroyType.js";
@@ -21,12 +21,6 @@ function memoize(fn) {
         return result;
     };
 }
-function checkSelector(element, selectors) {
-    const res = executeOnSingleOrMultiple(selectors, selector => {
-        return element.matches(selector);
-    });
-    return isArray(res) ? res.some(t => t) : res;
-}
 export function hasMatchMedia() {
     return typeof matchMedia !== "undefined";
 }
@@ -123,31 +117,6 @@ export function deepExtend(destination, ...sources) {
     }
     return destination;
 }
-export function isDivModeEnabled(mode, divs) {
-    return !!findItemFromSingleOrMultiple(divs, t => t.enable && isInArray(mode, t.mode));
-}
-export function divModeExecute(mode, divs, callback) {
-    executeOnSingleOrMultiple(divs, div => {
-        const divMode = div.mode, divEnabled = div.enable;
-        if (divEnabled && isInArray(mode, divMode)) {
-            singleDivModeExecute(div, callback);
-        }
-    });
-}
-export function singleDivModeExecute(div, callback) {
-    const selectors = div.selectors;
-    executeOnSingleOrMultiple(selectors, selector => {
-        callback(selector, div);
-    });
-}
-export function divMode(divs, element) {
-    if (!element || !divs) {
-        return;
-    }
-    return findItemFromSingleOrMultiple(divs, div => {
-        return checkSelector(element, div.selectors);
-    });
-}
 export function circleBounceDataFromParticle(p) {
     return {
         position: p.getPosition(),
@@ -328,7 +297,7 @@ export function cloneStyle(style) {
     const clonedStyle = safeDocument().createElement("div").style;
     for (const key in style) {
         const styleKey = style[key];
-        if (!Object.prototype.hasOwnProperty.call(style, key) || isNull(styleKey)) {
+        if (!Object.hasOwn(style, key) || isNull(styleKey)) {
             continue;
         }
         const styleValue = style.getPropertyValue?.(styleKey);
@@ -368,3 +337,27 @@ function computeFullScreenStyle(zIndex) {
     return fullScreenStyle;
 }
 export const getFullScreenStyle = memoize(computeFullScreenStyle);
+export function manageListener(element, event, handler, add, options) {
+    if (add) {
+        let addOptions = { passive: true };
+        if (isBoolean(options)) {
+            addOptions.capture = options;
+        }
+        else if (options !== undefined) {
+            addOptions = options;
+        }
+        element.addEventListener(event, handler, addOptions);
+    }
+    else {
+        const removeOptions = options;
+        element.removeEventListener(event, handler, removeOptions);
+    }
+}
+export async function getItemsFromInitializer(container, map, initializers, force = false) {
+    let res = map.get(container);
+    if (!res || force) {
+        res = await Promise.all([...initializers.values()].map(t => t(container)));
+        map.set(container, res);
+    }
+    return res;
+}

package/browser/exports.js

@@ -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/cjs/Core/Canvas.js

@@ -1,7 +1,8 @@
 import { clear, clearDrawPlugin, drawParticle, drawParticlePlugin, drawPlugin, paintBase, paintImage, } from "../Utils/CanvasUtils.js";
 import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver } from "../Utils/Utils.js";
-import { defaultOpacity, defaultTransformValue, generatedAttribute, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.js";
+import { defaultTransformValue, generatedAttribute, minimumSize, zIndexFactorOffset } from "./Utils/Constants.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
+const fColorIndex = 0, sColorIndex = 1;
 function setTransformValue(factor, newFactor, key) {
     const newValue = newFactor[key];
     if (newValue !== undefined) {
@@ -40,6 +41,9 @@ function setStyle(canvas, style, important = false) {
 export class Canvas {
     constructor(container, engine) {
         this.container = container;
+        this._reusableColorStyles = {};
+        this._reusablePluginColors = [undefined, undefined];
+        this._reusableTransform = {};
         this._applyPostDrawUpdaters = particle => {
             for (const updater of this._postDrawUpdaters) {
                 updater.afterDraw?.(particle);
@@ -83,7 +87,9 @@ export class Canvas {
                     break;
                 }
             }
-            return [fColor, sColor];
+            this._reusablePluginColors[fColorIndex] = fColor;
+            this._reusablePluginColors[sColorIndex] = sColor;
+            return this._reusablePluginColors;
         };
         this._initStyle = () => {
             const element = this.element, options = this.container.actualOptions;
@@ -97,7 +103,7 @@ export class Canvas {
                 this._resetOriginalStyle();
             }
             for (const key in options.style) {
-                if (!key || !Object.prototype.hasOwnProperty.call(options.style, key)) {
+                if (!key || !Object.hasOwn(options.style, key)) {
                     continue;
                 }
                 const value = options.style[key];
@@ -178,7 +184,7 @@ export class Canvas {
     }
     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();
             }
@@ -230,22 +236,12 @@ export class Canvas {
         if (!fColor && !sColor) {
             return;
         }
-        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, getFillStyle = () => {
-            if (!fColor) {
-                return;
-            }
-            return getStyleFromHsl(fColor, container.hdr, zOpacity);
-        }, colorStyles = {
-            fill: getFillStyle(),
-        }, getStrokestyle = () => {
-            if (!sColor) {
-                return colorStyles.fill;
-            }
-            return getStyleFromHsl(sColor, container.hdr, zStrokeOpacity);
-        };
-        colorStyles.stroke = getStrokestyle();
+        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity) : fill;
+        transform.a = transform.b = transform.c = transform.d = undefined;
+        colorStyles.fill = fill;
+        colorStyles.stroke = stroke;
         this.draw((context) => {
-            this._applyPreDrawUpdaters(context, particle, radius, zOpacity, colorStyles, transform);
+            this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
             drawParticle({
                 container,
                 context,
@@ -253,7 +249,7 @@ export class Canvas {
                 delta,
                 colorStyles,
                 radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
-                opacity: zOpacity,
+                opacity: opacity,
                 transform,
             });
         });
@@ -326,7 +322,7 @@ export class Canvas {
     }
     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);
             }
@@ -384,7 +380,7 @@ export class Canvas {
     }
     paint() {
         let handled = false;
-        for (const plugin of this.container.plugins.values()) {
+        for (const plugin of this.container.plugins) {
             if (handled) {
                 break;
             }

package/cjs/Core/Container.js

@@ -1,5 +1,5 @@
 import { animate, cancelAnimation, getRangeValue } from "../Utils/MathUtils.js";
-import { clickRadius, defaultFps, defaultFpsLimit, millisecondsToSeconds, minCoordinate, minFpsLimit, removeDeleteCount, removeMinIndex, touchEndLengthOffset, } from "./Utils/Constants.js";
+import { defaultFps, defaultFpsLimit, millisecondsToSeconds, minFpsLimit, removeDeleteCount, removeMinIndex, } from "./Utils/Constants.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { EventType } from "../Enums/Types/EventType.js";
@@ -8,15 +8,12 @@ import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
-import { safeIntersectionObserver } from "../Utils/Utils.js";
 function guardCheck(container) {
     return !container.destroyed;
 }
-function initDelta(value, fpsLimit = defaultFps, smooth = false) {
-    return {
-        value,
-        factor: smooth ? defaultFps / fpsLimit : (defaultFps * value) / millisecondsToSeconds,
-    };
+function updateDelta(delta, value, fpsLimit = defaultFps, smooth = false) {
+    delta.value = value;
+    delta.factor = smooth ? defaultFps / fpsLimit : (defaultFps * value) / millisecondsToSeconds;
 }
 function loadContainerOptions(engine, container, ...sourceOptionsArr) {
     const options = new Options(engine, container);
@@ -25,22 +22,7 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 export class Container {
     constructor(engine, id, sourceOptions) {
-        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._delta = { value: 0, factor: 0 };
         this._nextFrame = (timestamp) => {
             try {
                 if (!this._smooth &&
@@ -50,14 +32,14 @@ export class Container {
                     return;
                 }
                 this._lastFrameTime ??= timestamp;
-                const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
-                this.addLifeTime(delta.value);
+                updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
+                this.addLifeTime(this._delta.value);
                 this._lastFrameTime = timestamp;
-                if (delta.value > millisecondsToSeconds) {
+                if (this._delta.value > millisecondsToSeconds) {
                     this.draw(false);
                     return;
                 }
-                this.canvas.drawParticles(delta);
+                this.canvas.drawParticles(this._delta);
                 if (!this.alive()) {
                     this.destroy();
                     return;
@@ -85,28 +67,18 @@ export class Container {
         this._lastFrameTime = 0;
         this.zLayers = 100;
         this.pageHidden = false;
-        this._clickHandlers = new Map();
         this._sourceOptions = sourceOptions;
         this._initialSourceOptions = sourceOptions;
         this.retina = new Retina(this);
         this.canvas = new Canvas(this, this._engine);
         this.particles = new 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(this);
-        this._intersectionObserver = safeIntersectionObserver(entries => {
-            this._intersectionManager(entries);
-        });
         this._engine.dispatchEvent(EventType.containerBuilt, { container: this });
     }
     get animationStatus() {
@@ -118,77 +90,6 @@ export class Container {
     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, 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 - touchEndLengthOffset];
-                if (!lastTouch) {
-                    return;
-                }
-                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
-                    x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
-                    y: lastTouch.clientY - (canvasRect ? canvasRect.top : 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;
     }
@@ -202,39 +103,29 @@ export class Container {
     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()) {
             effectDrawer.destroy?.(this);
         }
+        this.effectDrawers.clear();
         for (const shapeDrawer of this.shapeDrawers.values()) {
             shapeDrawer.destroy?.(this);
         }
-        for (const key of this.effectDrawers.keys()) {
-            this.effectDrawers.delete(key);
-        }
-        for (const key of this.shapeDrawers.keys()) {
-            this.shapeDrawers.delete(key);
+        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 >= removeMinIndex) {
                 mainArr.splice(idx, removeDeleteCount);
             }
@@ -258,7 +149,7 @@ export class Container {
         });
     }
     async export(type, options = {}) {
-        for (const plugin of this.plugins.values()) {
+        for (const plugin of this.plugins) {
             if (!plugin.export) {
                 continue;
             }
@@ -271,15 +162,6 @@ export class Container {
         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;
@@ -298,12 +180,21 @@ export class Container {
                 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();
@@ -318,30 +209,23 @@ export class Container {
         this._lifeTime = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : 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.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.particlesSetup, { container: this });
     }
-    async loadTheme(name) {
-        if (!guardCheck(this)) {
-            return;
-        }
-        this._currentTheme = name;
-        await this.refresh();
-    }
     pause() {
         if (!guardCheck(this)) {
             return;
@@ -353,7 +237,7 @@ export class Container {
         if (this._paused) {
             return;
         }
-        for (const plugin of this.plugins.values()) {
+        for (const plugin of this.plugins) {
             plugin.pause?.();
         }
         if (!this.pageHidden) {
@@ -374,7 +258,7 @@ export class Container {
             this._paused = false;
         }
         if (needsUpdate) {
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 if (plugin.play) {
                     plugin.play();
                 }
@@ -409,10 +293,7 @@ export class Container {
         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.containerStarted, { container: this });
@@ -436,26 +317,20 @@ export class Container {
         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.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;
     }
 }