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

package/esm/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/esm/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;
     }
 }

package/esm/Core/Engine.js

@@ -1,17 +1,10 @@
 import { canvasFirstIndex, canvasTag, generatedAttribute, generatedFalse, generatedTrue, loadMinIndex, loadRandomFactor, none, one, removeDeleteCount, } from "./Utils/Constants.js";
-import { itemFromSingleOrMultiple, safeDocument } from "../Utils/Utils.js";
+import { getItemsFromInitializer, itemFromSingleOrMultiple, safeDocument } from "../Utils/Utils.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { getRandom } from "../Utils/MathUtils.js";
-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;
-}
+const fullPercent = "100%";
 async function getDataFromUrl(data) {
     const url = itemFromSingleOrMultiple(data.url, data.index);
     if (!url) {
@@ -25,6 +18,7 @@ async function getDataFromUrl(data) {
     return data.fallback;
 }
 const getCanvasFromContainer = (domContainer) => {
+    const documentSafe = safeDocument();
     let canvasEl;
     if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
         canvasEl = domContainer;
@@ -37,28 +31,24 @@ const getCanvasFromContainer = (domContainer) => {
             canvasEl.dataset[generatedAttribute] = generatedFalse;
         }
         else {
-            canvasEl = safeDocument().createElement(canvasTag);
+            canvasEl = documentSafe.createElement(canvasTag);
             canvasEl.dataset[generatedAttribute] = generatedTrue;
             domContainer.appendChild(canvasEl);
         }
     }
-    const fullPercent = "100%";
-    if (!canvasEl.style.width) {
-        canvasEl.style.width = fullPercent;
-    }
-    if (!canvasEl.style.height) {
-        canvasEl.style.height = fullPercent;
-    }
+    canvasEl.style.width ||= fullPercent;
+    canvasEl.style.height ||= fullPercent;
     return canvasEl;
 }, getDomContainer = (id, source) => {
-    let domContainer = source ?? safeDocument().getElementById(id);
+    const documentSafe = safeDocument();
+    let domContainer = source ?? documentSafe.getElementById(id);
     if (domContainer) {
         return domContainer;
     }
-    domContainer = safeDocument().createElement("div");
+    domContainer = documentSafe.createElement("div");
     domContainer.id = id;
     domContainer.dataset[generatedAttribute] = generatedTrue;
-    safeDocument().body.append(domContainer);
+    documentSafe.body.append(domContainer);
     return domContainer;
 };
 export class Engine {
@@ -72,11 +62,9 @@ export class Engine {
         this.colorManagers = new Map();
         this.easingFunctions = new Map();
         this._initializers = {
-            interactors: new Map(),
             movers: new Map(),
             updaters: new Map(),
         };
-        this.interactors = new Map();
         this.movers = new Map();
         this.updaters = new Map();
         this.presets = new Map();
@@ -95,7 +83,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.2";
+        return "4.0.0-alpha.4";
     }
     addColorManager(manager) {
         this.colorManagers.set(manager.key, manager);
@@ -120,9 +108,6 @@ export class Engine {
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
     }
-    addInteractor(name, interactorInitializer) {
-        this._initializers.interactors.set(name, interactorInitializer);
-    }
     addMover(name, moverInitializer) {
         this._initializers.movers.set(name, moverInitializer);
     }
@@ -164,35 +149,16 @@ export class Engine {
     clearPlugins(container) {
         this.updaters.delete(container);
         this.movers.delete(container);
-        this.interactors.delete(container);
     }
     dispatchEvent(type, args) {
         this._eventDispatcher.dispatchEvent(type, args);
     }
-    dom() {
-        return this.items;
-    }
-    domItem(index) {
-        return this.item(index);
-    }
-    async getAvailablePlugins(container) {
-        const res = new Map();
-        for (const plugin of this.plugins) {
-            if (plugin.needsPlugin(container.actualOptions)) {
-                res.set(plugin.id, await plugin.getPlugin(container));
-            }
-        }
-        return res;
-    }
     getEasing(name) {
         return this.easingFunctions.get(name) ?? ((value) => value);
     }
     getEffectDrawer(type) {
         return this.effectDrawers.get(type);
     }
-    async getInteractors(container, force = false) {
-        return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
-    }
     async getMovers(container, force = false) {
         return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
     }
@@ -221,10 +187,36 @@ export class Engine {
         if (this._initialized) {
             return;
         }
-        for (const loadPromise of this._loadPromises) {
-            await loadPromise(this);
+        const executed = new Set(), allLoaders = new Set(this._loadPromises), stack = [...allLoaders];
+        while (stack.length) {
+            const loader = stack.shift();
+            if (!loader) {
+                continue;
+            }
+            if (executed.has(loader)) {
+                continue;
+            }
+            executed.add(loader);
+            const inner = [], origRegister = this.register.bind(this);
+            this.register = (...loaders) => {
+                inner.push(...loaders);
+                for (const loader of loaders) {
+                    allLoaders.add(loader);
+                }
+            };
+            try {
+                await loader(this);
+            }
+            finally {
+                this.register = origRegister;
+            }
+            stack.unshift(...inner);
+            this._loadPromises.delete(loader);
         }
         this._loadPromises.clear();
+        for (const loader of allLoaders) {
+            this._loadPromises.add(loader);
+        }
         this._initialized = true;
     }
     item(index) {
@@ -237,6 +229,7 @@ export class Engine {
     }
     async load(params) {
         await this.init();
+        this._loadPromises.clear();
         const { Container } = await import("./Container.js"), id = params.id ??
             params.element?.id ??
             `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
@@ -255,11 +248,6 @@ export class Engine {
         await newItem.start();
         return newItem;
     }
-    loadOptions(options, sourceOptions) {
-        this.plugins.forEach(plugin => {
-            plugin.loadOptions(options, sourceOptions);
-        });
-    }
     loadParticlesOptions(container, options, ...sourceOptions) {
         const updaters = this.updaters.get(container);
         if (!updaters) {
@@ -284,13 +272,4 @@ export class Engine {
     removeEventListener(type, listener) {
         this._eventDispatcher.removeEventListener(type, listener);
     }
-    setOnClickHandler(callback) {
-        const { items } = this;
-        if (!items.length) {
-            throw new Error("Click handlers can only be set after calling tsParticles.load()");
-        }
-        items.forEach(item => {
-            item.addClickHandler(callback);
-        });
-    }
 }