@tsparticles/engine 3.3.0 → 3.4.0

package/README.md

@@ -969,10 +969,6 @@ flowchart TD
 
 ## Sponsors
 
-### ScribbleMaps
-
-Huge thanks to [ScribbleMaps](https://www.scribblemaps.com/) for their support on this project.
-
 ### JetBrains
 
 Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles) for the 2020-2022 Open Source Licenses!

package/browser/Core/Canvas.js

@@ -31,7 +31,7 @@ function setStyle(canvas, style, important = false) {
 export class Canvas {
     constructor(container) {
         this.container = container;
-        this._applyPostDrawUpdaters = (particle) => {
+        this._applyPostDrawUpdaters = particle => {
             for (const updater of this._postDrawUpdaters) {
                 updater.afterDraw?.(particle);
             }
@@ -61,7 +61,7 @@ export class Canvas {
                 plugin.resize?.();
             }
         };
-        this._getPluginParticleColors = (particle) => {
+        this._getPluginParticleColors = particle => {
             let fColor, sColor;
             for (const plugin of this._colorPlugins) {
                 if (!fColor && plugin.particleFillColor) {
@@ -101,7 +101,7 @@ export class Canvas {
                         };
                         resolve();
                     });
-                    img.addEventListener("error", (evt) => {
+                    img.addEventListener("error", evt => {
                         reject(evt.error);
                     });
                     img.src = cover.image;
@@ -162,28 +162,33 @@ export class Canvas {
                         };
                         resolve();
                     });
-                    img.addEventListener("error", (evt) => {
+                    img.addEventListener("error", evt => {
                         reject(evt.error);
                     });
                     img.src = trailFill.image;
                 });
             }
         };
-        this._paintBase = (baseColor) => {
-            this.draw((ctx) => paintBase(ctx, this.size, baseColor));
+        this._paintBase = baseColor => {
+            this.draw(ctx => paintBase(ctx, this.size, baseColor));
         };
         this._paintImage = (image, opacity) => {
-            this.draw((ctx) => paintImage(ctx, this.size, image, opacity));
+            this.draw(ctx => paintImage(ctx, this.size, image, opacity));
         };
         this._repairStyle = () => {
             const element = this.element;
             if (!element) {
                 return;
             }
-            this._safeMutationObserver((observer) => observer.disconnect());
+            this._safeMutationObserver(observer => observer.disconnect());
             this._initStyle();
             this.initBackground();
-            this._safeMutationObserver((observer) => observer.observe(element, { attributes: true }));
+            this._safeMutationObserver(observer => {
+                if (!element || !(element instanceof Node)) {
+                    return;
+                }
+                observer.observe(element, { attributes: true });
+            });
         };
         this._resetOriginalStyle = () => {
             const element = this.element, originalStyle = this._originalStyle;
@@ -192,7 +197,7 @@ export class Canvas {
             }
             setStyle(element, originalStyle);
         };
-        this._safeMutationObserver = (callback) => {
+        this._safeMutationObserver = callback => {
             if (!this._mutationObserver) {
                 return;
             }
@@ -241,7 +246,7 @@ export class Canvas {
             }
         }
         else if (options.clear) {
-            this.draw((ctx) => {
+            this.draw(ctx => {
                 clear(ctx, this.size);
             });
         }
@@ -316,14 +321,14 @@ export class Canvas {
         });
     }
     drawParticlePlugin(plugin, particle, delta) {
-        this.draw((ctx) => drawParticlePlugin(ctx, plugin, particle, delta));
+        this.draw(ctx => drawParticlePlugin(ctx, plugin, particle, delta));
     }
     drawPlugin(plugin, delta) {
-        this.draw((ctx) => drawPlugin(ctx, plugin, delta));
+        this.draw(ctx => drawPlugin(ctx, plugin, delta));
     }
     async init() {
-        this._safeMutationObserver((obs) => obs.disconnect());
-        this._mutationObserver = safeMutationObserver((records) => {
+        this._safeMutationObserver(obs => obs.disconnect());
+        this._mutationObserver = safeMutationObserver(records => {
             for (const record of records) {
                 if (record.type === "attributes" && record.attributeName === "style") {
                     this._repairStyle();
@@ -340,8 +345,8 @@ export class Canvas {
             getLogger().error(e);
         }
         this.initBackground();
-        this._safeMutationObserver((obs) => {
-            if (!this.element) {
+        this._safeMutationObserver(obs => {
+            if (!this.element || !(this.element instanceof Node)) {
                 return;
             }
             obs.observe(this.element, { attributes: true });
@@ -408,8 +413,8 @@ export class Canvas {
         this.size.height = canvas.offsetHeight;
         this.size.width = canvas.offsetWidth;
         this._context = this.element.getContext("2d");
-        this._safeMutationObserver((obs) => {
-            if (!this.element) {
+        this._safeMutationObserver(obs => {
+            if (!this.element || !(this.element instanceof Node)) {
                 return;
             }
             obs.observe(this.element, { attributes: true });
@@ -419,7 +424,7 @@ export class Canvas {
     }
     paint() {
         const options = this.container.actualOptions;
-        this.draw((ctx) => {
+        this.draw(ctx => {
             if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 clear(ctx, this.size);
                 if (this._coverImage) {
@@ -463,9 +468,9 @@ export class Canvas {
         return true;
     }
     stop() {
-        this._safeMutationObserver((obs) => obs.disconnect());
+        this._safeMutationObserver(obs => obs.disconnect());
         this._mutationObserver = undefined;
-        this.draw((ctx) => clear(ctx, this.size));
+        this.draw(ctx => clear(ctx, this.size));
     }
     async windowResize() {
         if (!this.element || !this.resize()) {

package/browser/Core/Container.js

@@ -2,6 +2,7 @@ import { errorPrefix, millisecondsToSeconds } from "./Utils/Constants.js";
 import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
+import { EventType } from "../Enums/Types/EventType.js";
 import { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
@@ -24,7 +25,7 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 export class Container {
     constructor(engine, id, sourceOptions) {
-        this._intersectionManager = (entries) => {
+        this._intersectionManager = entries => {
             if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                 return;
             }
@@ -83,6 +84,7 @@ 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);
@@ -101,8 +103,8 @@ export class Container {
         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("containerBuilt", { container: this });
+        this._intersectionObserver = safeIntersectionObserver(entries => this._intersectionManager(entries));
+        this._engine.dispatchEvent(EventType.containerBuilt, { container: this });
     }
     get animationStatus() {
         return !this._paused && !this.pageHidden && guardCheck(this);
@@ -130,8 +132,7 @@ export class Container {
                 y: pos.y * pxRatio,
             }, particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
             callback(e, particles);
-        };
-        const clickHandler = (e) => {
+        }, clickHandler = (e) => {
             if (!guardCheck(this)) {
                 return;
             }
@@ -140,27 +141,23 @@ export class Container {
                 y: mouseEvent.offsetY || mouseEvent.clientY,
             }, radius = 1;
             clickOrTouchHandler(e, pos, radius);
-        };
-        const touchStartHandler = () => {
+        }, touchStartHandler = () => {
             if (!guardCheck(this)) {
                 return;
             }
             touched = true;
             touchMoved = false;
-        };
-        const touchMoveHandler = () => {
+        }, touchMoveHandler = () => {
             if (!guardCheck(this)) {
                 return;
             }
             touchMoved = true;
-        };
-        const touchEndHandler = (e) => {
+        }, touchEndHandler = (e) => {
             if (!guardCheck(this)) {
                 return;
             }
             if (touched && !touchMoved) {
-                const touchEvent = e;
-                const lengthOffset = 1;
+                const touchEvent = e, lengthOffset = 1;
                 let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];
                 if (!lastTouch) {
                     lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];
@@ -176,8 +173,7 @@ export class Container {
             }
             touched = false;
             touchMoved = false;
-        };
-        const touchCancelHandler = () => {
+        }, touchCancelHandler = () => {
             if (!guardCheck(this)) {
                 return;
             }
@@ -185,11 +181,14 @@ export class Container {
             touchMoved = false;
         };
         let touched = false, touchMoved = false;
-        el.addEventListener("click", clickHandler);
-        el.addEventListener("touchstart", touchStartHandler);
-        el.addEventListener("touchmove", touchMoveHandler);
-        el.addEventListener("touchend", touchEndHandler);
-        el.addEventListener("touchcancel", touchCancelHandler);
+        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;
@@ -204,11 +203,21 @@ export class Container {
     alive() {
         return !this._duration || this._lifeTime <= this._duration;
     }
-    destroy() {
+    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) {
@@ -225,12 +234,14 @@ export class Container {
         }
         this._engine.clearPlugins(this);
         this.destroyed = true;
-        const mainArr = this._engine.dom(), idx = mainArr.findIndex((t) => t === this), minIndex = 0;
-        if (idx >= minIndex) {
-            const deleteCount = 1;
-            mainArr.splice(idx, deleteCount);
+        if (remove) {
+            const mainArr = this._engine.items, idx = mainArr.findIndex(t => t === this), minIndex = 0;
+            if (idx >= minIndex) {
+                const deleteCount = 1;
+                mainArr.splice(idx, deleteCount);
+            }
         }
-        this._engine.dispatchEvent("containerDestroyed", { container: this });
+        this._engine.dispatchEvent(EventType.containerDestroyed, { container: this });
     }
     draw(force) {
         if (!guardCheck(this)) {
@@ -244,7 +255,7 @@ export class Container {
             }
             this._nextFrame(timestamp);
         };
-        this._drawAnimationFrame = requestAnimationFrame((timestamp) => frame(timestamp));
+        this._drawAnimationFrame = requestAnimationFrame(timestamp => frame(timestamp));
     }
     async export(type, options = {}) {
         for (const [, plugin] of this.plugins) {
@@ -298,13 +309,14 @@ export class Container {
         this.updateActualOptions();
         this.canvas.initBackground();
         this.canvas.resize();
-        this.zLayers = this.actualOptions.zLayers;
-        this._duration = getRangeValue(this.actualOptions.duration) * millisecondsToSeconds;
-        this._delay = getRangeValue(this.actualOptions.delay) * millisecondsToSeconds;
+        const { zLayers, duration, delay, fpsLimit, smooth } = this.actualOptions;
+        this.zLayers = zLayers;
+        this._duration = getRangeValue(duration) * millisecondsToSeconds;
+        this._delay = getRangeValue(delay) * millisecondsToSeconds;
         this._lifeTime = 0;
         const defaultFpsLimit = 120, minFpsLimit = 0;
-        this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;
-        this._smooth = this.actualOptions.smooth;
+        this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
+        this._smooth = smooth;
         for (const [, drawer] of this.effectDrawers) {
             await drawer.init?.(this);
         }
@@ -314,13 +326,13 @@ export class Container {
         for (const [, plugin] of this.plugins) {
             await plugin.init?.();
         }
-        this._engine.dispatchEvent("containerInit", { container: this });
+        this._engine.dispatchEvent(EventType.containerInit, { container: this });
         await this.particles.init();
         this.particles.setDensity();
         for (const [, plugin] of this.plugins) {
             plugin.particlesSetup?.();
         }
-        this._engine.dispatchEvent("particlesSetup", { container: this });
+        this._engine.dispatchEvent(EventType.particlesSetup, { container: this });
     }
     async loadTheme(name) {
         if (!guardCheck(this)) {
@@ -346,7 +358,7 @@ export class Container {
         if (!this.pageHidden) {
             this._paused = true;
         }
-        this._engine.dispatchEvent("containerPaused", { container: this });
+        this._engine.dispatchEvent(EventType.containerPaused, { container: this });
     }
     play(force) {
         if (!guardCheck(this)) {
@@ -367,7 +379,7 @@ export class Container {
                 }
             }
         }
-        this._engine.dispatchEvent("containerPlay", { container: this });
+        this._engine.dispatchEvent(EventType.containerPlay, { container: this });
         this.draw(needsUpdate ?? false);
     }
     async refresh() {
@@ -377,12 +389,13 @@ export class Container {
         this.stop();
         return this.start();
     }
-    async reset() {
+    async reset(sourceOptions) {
         if (!guardCheck(this)) {
             return;
         }
-        this._initialSourceOptions = undefined;
-        this._options = loadContainerOptions(this._engine, this);
+        this._initialSourceOptions = sourceOptions;
+        this._sourceOptions = sourceOptions;
+        this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
         this.actualOptions = loadContainerOptions(this._engine, this, this._options);
         return this.refresh();
     }
@@ -392,7 +405,7 @@ export class Container {
         }
         await this.init();
         this.started = true;
-        await new Promise((resolve) => {
+        await new Promise(resolve => {
             const start = async () => {
                 this._eventListeners.addListeners();
                 if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
@@ -401,7 +414,7 @@ export class Container {
                 for (const [, plugin] of this.plugins) {
                     await plugin.start?.();
                 }
-                this._engine.dispatchEvent("containerStarted", { container: this });
+                this._engine.dispatchEvent(EventType.containerStarted, { container: this });
                 this.play();
                 resolve();
             };
@@ -432,7 +445,7 @@ export class Container {
             this.plugins.delete(key);
         }
         this._sourceOptions = this._options;
-        this._engine.dispatchEvent("containerStopped", { container: this });
+        this._engine.dispatchEvent(EventType.containerStopped, { container: this });
     }
     updateActualOptions() {
         this.actualOptions.responsive = [];

package/browser/Core/Engine.js

@@ -1,11 +1,13 @@
 import { errorPrefix, generatedAttribute } from "./Utils/Constants.js";
 import { executeOnSingleOrMultiple, getLogger, itemFromSingleOrMultiple } from "../Utils/Utils.js";
+import { Container } from "./Container.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
+import { EventType } from "../Enums/Types/EventType.js";
 import { getRandom } from "../Utils/NumberUtils.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)));
+        res = await Promise.all([...initializers.values()].map(t => t(container)));
         map.set(container, res);
     }
     return res;
@@ -22,6 +24,46 @@ async function getDataFromUrl(data) {
     getLogger().error(`${errorPrefix} ${response.status} while retrieving config file`);
     return data.fallback;
 }
+const generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", getCanvasFromContainer = (domContainer) => {
+    let canvasEl;
+    if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
+        canvasEl = domContainer;
+        if (!canvasEl.dataset[generatedAttribute]) {
+            canvasEl.dataset[generatedAttribute] = generatedFalse;
+        }
+    }
+    else {
+        const existingCanvases = domContainer.getElementsByTagName(canvasTag);
+        if (existingCanvases.length) {
+            const firstIndex = 0;
+            canvasEl = existingCanvases[firstIndex];
+            canvasEl.dataset[generatedAttribute] = generatedFalse;
+        }
+        else {
+            canvasEl = document.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;
+    }
+    return canvasEl;
+}, getDomContainer = (id, source) => {
+    let domContainer = source ?? document.getElementById(id);
+    if (domContainer) {
+        return domContainer;
+    }
+    domContainer = document.createElement("div");
+    domContainer.id = id;
+    domContainer.dataset[generatedAttribute] = generatedTrue;
+    document.body.append(domContainer);
+    return domContainer;
+};
 export class Engine {
     constructor() {
         this._configs = new Map();
@@ -49,16 +91,19 @@ export class Engine {
         }
         return res;
     }
+    get items() {
+        return this._domArray;
+    }
     get version() {
-        return "3.3.0";
+        return "3.4.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";
         this._configs.set(key, config);
-        this._eventDispatcher.dispatchEvent("configAdded", { data: { name: key, config } });
+        this._eventDispatcher.dispatchEvent(EventType.configAdded, { data: { name: key, config } });
     }
     async addEffect(effect, drawer, refresh = true) {
-        executeOnSingleOrMultiple(effect, (type) => {
+        executeOnSingleOrMultiple(effect, type => {
             if (!this.getEffectDrawer(type)) {
                 this.effectDrawers.set(type, drawer);
             }
@@ -98,12 +143,13 @@ export class Engine {
         }
         await this.refresh(refresh);
     }
-    async addShape(shape, drawer, refresh = true) {
-        executeOnSingleOrMultiple(shape, (type) => {
-            if (!this.getShapeDrawer(type)) {
-                this.shapeDrawers.set(type, drawer);
+    async addShape(drawer, refresh = true) {
+        for (const validType of drawer.validTypes) {
+            if (this.getShapeDrawer(validType)) {
+                continue;
             }
-        });
+            this.shapeDrawers.set(validType, drawer);
+        }
         await this.refresh(refresh);
     }
     clearPlugins(container) {
@@ -115,16 +161,10 @@ export class Engine {
         this._eventDispatcher.dispatchEvent(type, args);
     }
     dom() {
-        return this._domArray;
+        return this.items;
     }
     domItem(index) {
-        const dom = this.dom(), item = dom[index];
-        if (!item || item.destroyed) {
-            const deleteCount = 1;
-            dom.splice(index, deleteCount);
-            return;
-        }
-        return item;
+        return this.item(index);
     }
     async getAvailablePlugins(container) {
         const res = new Map();
@@ -139,16 +179,16 @@ export class Engine {
         return this.effectDrawers.get(type);
     }
     async getInteractors(container, force = false) {
-        return await getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
+        return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
     }
     async getMovers(container, force = false) {
-        return await getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
+        return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
     }
     getPathGenerator(type) {
         return this.pathGenerators.get(type);
     }
     getPlugin(plugin) {
-        return this.plugins.find((t) => t.id === plugin);
+        return this.plugins.find(t => t.id === plugin);
     }
     getPreset(preset) {
         return this.presets.get(preset);
@@ -163,7 +203,7 @@ export class Engine {
         return this.shapeDrawers.keys();
     }
     async getUpdaters(container, force = false) {
-        return await getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
+        return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
     }
     init() {
         if (this._initialized) {
@@ -171,89 +211,57 @@ export class Engine {
         }
         this._initialized = true;
     }
+    item(index) {
+        const { items } = this, item = items[index];
+        if (!item || item.destroyed) {
+            const deleteCount = 1;
+            items.splice(index, deleteCount);
+            return;
+        }
+        return item;
+    }
     async load(params) {
         const randomFactor = 10000, id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * randomFactor)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
-        let domContainer = params.element ?? document.getElementById(id);
-        if (!domContainer) {
-            domContainer = document.createElement("div");
-            domContainer.id = id;
-            document.body.append(domContainer);
-        }
-        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id), minIndex = 0;
+        const currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), minIndex = 0, newItem = new Container(this, id, currentOptions);
         if (oldIndex >= minIndex) {
-            const old = this.domItem(oldIndex);
+            const old = this.item(oldIndex), one = 1, none = 0, deleteCount = old ? one : none;
             if (old && !old.destroyed) {
-                old.destroy();
-                const deleteCount = 1;
-                dom.splice(oldIndex, deleteCount);
-            }
-        }
-        let canvasEl;
-        if (domContainer.tagName.toLowerCase() === "canvas") {
-            canvasEl = domContainer;
-            canvasEl.dataset[generatedAttribute] = "false";
-        }
-        else {
-            const existingCanvases = domContainer.getElementsByTagName("canvas");
-            if (existingCanvases.length) {
-                const firstIndex = 0;
-                canvasEl = existingCanvases[firstIndex];
-                canvasEl.dataset[generatedAttribute] = "false";
+                old.destroy(false);
             }
-            else {
-                canvasEl = document.createElement("canvas");
-                canvasEl.dataset[generatedAttribute] = "true";
-                domContainer.appendChild(canvasEl);
-            }
-        }
-        if (!canvasEl.style.width) {
-            canvasEl.style.width = "100%";
-        }
-        if (!canvasEl.style.height) {
-            canvasEl.style.height = "100%";
-        }
-        const { Container } = await import("./Container.js"), newItem = new Container(this, id, currentOptions);
-        if (oldIndex >= minIndex) {
-            const deleteCount = 0;
-            dom.splice(oldIndex, deleteCount, newItem);
+            items.splice(oldIndex, deleteCount, newItem);
         }
         else {
-            dom.push(newItem);
+            items.push(newItem);
         }
+        const domContainer = getDomContainer(id, params.element), canvasEl = getCanvasFromContainer(domContainer);
         newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
     }
     loadOptions(options, sourceOptions) {
-        for (const plugin of this.plugins) {
-            plugin.loadOptions(options, sourceOptions);
-        }
+        this.plugins.forEach(plugin => plugin.loadOptions?.(options, sourceOptions));
     }
     loadParticlesOptions(container, options, ...sourceOptions) {
         const updaters = this.updaters.get(container);
         if (!updaters) {
             return;
         }
-        for (const updater of updaters) {
-            updater.loadOptions?.(options, ...sourceOptions);
-        }
+        updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
     }
     async refresh(refresh = true) {
         if (!refresh) {
             return;
         }
-        await Promise.all(this.dom().map((t) => t.refresh()));
+        await Promise.all(this.items.map(t => t.refresh()));
     }
     removeEventListener(type, listener) {
         this._eventDispatcher.removeEventListener(type, listener);
     }
     setOnClickHandler(callback) {
-        const dom = this.dom();
-        if (!dom.length) {
+        const { items } = this;
+        if (!items.length) {
             throw new Error(`${errorPrefix} can only set click handlers after calling tsParticles.load()`);
         }
-        for (const domItem of dom) {
-            domItem.addClickHandler(callback);
-        }
+        items.forEach(item => item.addClickHandler(callback));
     }
 }