@tsparticles/engine 3.0.3 → 3.1.0

package/cjs/Core/Canvas.js

@@ -6,9 +6,9 @@ const Utils_js_1 = require("../Utils/Utils.js");
 const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
 const Constants_js_1 = require("./Utils/Constants.js");
 function setTransformValue(factor, newFactor, key) {
-    const newValue = newFactor[key];
+    const newValue = newFactor[key], defaultValue = 1;
     if (newValue !== undefined) {
-        factor[key] = (factor[key] ?? 1) * newValue;
+        factor[key] = (factor[key] ?? defaultValue) * newValue;
     }
 }
 class Canvas {
@@ -16,7 +16,7 @@ class Canvas {
         this.container = container;
         this._applyPostDrawUpdaters = (particle) => {
             for (const updater of this._postDrawUpdaters) {
-                updater.afterDraw && updater.afterDraw(particle);
+                updater.afterDraw?.(particle);
             }
         };
         this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
@@ -36,12 +36,12 @@ class Canvas {
                         setTransformValue(transform, updaterTransform, key);
                     }
                 }
-                updater.beforeDraw && updater.beforeDraw(particle);
+                updater.beforeDraw?.(particle);
             }
         };
         this._applyResizePlugins = () => {
             for (const plugin of this._resizePlugins) {
-                plugin.resize && plugin.resize();
+                plugin.resize?.();
             }
         };
         this._getPluginParticleColors = (particle) => {
@@ -97,17 +97,17 @@ class Canvas {
             if (!trail.enable) {
                 return;
             }
+            const factorNumerator = 1, opacity = factorNumerator / trail.length;
             if (trailFill.color) {
                 const fillColor = (0, ColorUtils_js_1.rangeColorToRgb)(trailFill.color);
                 if (!fillColor) {
                     return;
                 }
-                const trail = options.particles.move.trail;
                 this._trailFill = {
                     color: {
                         ...fillColor,
                     },
-                    opacity: 1 / trail.length,
+                    opacity,
                 };
             }
             else {
@@ -119,7 +119,7 @@ class Canvas {
                     img.addEventListener("load", () => {
                         this._trailFill = {
                             image: img,
-                            opacity: 1 / trail.length,
+                            opacity,
                         };
                         resolve();
                     });
@@ -170,9 +170,9 @@ class Canvas {
             if (!element) {
                 return;
             }
-            const priority = "important", style = element.style;
+            const priority = "important", style = element.style, radix = 10;
             style.setProperty("position", "fixed", priority);
-            style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(10), priority);
+            style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(radix), priority);
             style.setProperty("top", "0", priority);
             style.setProperty("left", "0", priority);
             style.setProperty("width", "100%", priority);
@@ -193,11 +193,11 @@ class Canvas {
         return this.container.actualOptions.fullScreen.enable;
     }
     clear() {
-        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill;
+        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill, minimumLength = 0;
         if (options.backgroundMask.enable) {
             this.paint();
         }
-        else if (trail.enable && trail.length > 0 && trailFill) {
+        else if (trail.enable && trail.length > minimumLength && trailFill) {
             if (trailFill.color) {
                 this._paintBase((0, ColorUtils_js_1.getStyleFromRgb)(trailFill.color, trailFill.opacity));
             }
@@ -215,7 +215,7 @@ class Canvas {
         this.stop();
         if (this._generated) {
             const element = this.element;
-            element && element.remove();
+            element?.remove();
         }
         else {
             this._resetOriginalStyle();
@@ -236,8 +236,8 @@ class Canvas {
         if (particle.spawning || particle.destroyed) {
             return;
         }
-        const radius = particle.getRadius();
-        if (radius <= 0) {
+        const radius = particle.getRadius(), minimumSize = 0;
+        if (radius <= minimumSize) {
             return;
         }
         const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
@@ -252,7 +252,7 @@ class Canvas {
             return;
         }
         this.draw((ctx) => {
-            const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? 1, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
+            const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactorOffset = 1, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, defaultOpacity = 1, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
                 fill: fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
             };
             colorStyles.stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
@@ -265,7 +265,7 @@ class Canvas {
                 colorStyles,
                 backgroundMask: options.backgroundMask.enable,
                 composite: options.backgroundMask.composite,
-                radius: radius * (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate,
+                radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
                 opacity: zOpacity,
                 shadow: particle.options.shadow,
                 transform,
@@ -335,7 +335,7 @@ class Canvas {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }
-            if (plugin.particleFillColor || plugin.particleStrokeColor) {
+            if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
                 this._colorPlugins.push(plugin);
             }
         }
@@ -347,7 +347,7 @@ class Canvas {
             if (updater.afterDraw) {
                 this._postDrawUpdaters.push(updater);
             }
-            if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
+            if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
                 this._preDrawUpdaters.push(updater);
             }
         }

package/cjs/Core/Container.js

@@ -1,22 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
+const Constants_js_1 = require("./Utils/Constants.js");
 const Utils_js_1 = require("../Utils/Utils.js");
 const Canvas_js_1 = require("./Canvas.js");
 const EventListeners_js_1 = require("./Utils/EventListeners.js");
 const Options_js_1 = require("../Options/Classes/Options.js");
 const Particles_js_1 = require("./Particles.js");
 const Retina_js_1 = require("./Retina.js");
-const Constants_js_1 = require("./Utils/Constants.js");
 const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
 const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
 function guardCheck(container) {
     return container && !container.destroyed;
 }
-function initDelta(value, fpsLimit = 60, smooth = false) {
+const defaultFps = 60;
+function initDelta(value, fpsLimit = defaultFps, smooth = false) {
     return {
         value,
-        factor: smooth ? 60 / fpsLimit : (60 * value) / 1000,
+        factor: smooth ? defaultFps / fpsLimit : (defaultFps * value) / Constants_js_1.millisecondsToSeconds,
     };
 }
 function loadContainerOptions(engine, container, ...sourceOptionsArr) {
@@ -34,14 +35,19 @@ class Container {
                 if (entry.target !== this.interactivity.element) {
                     continue;
                 }
-                (entry.isIntersecting ? this.play : this.pause)();
+                if (entry.isIntersecting) {
+                    this.play();
+                }
+                else {
+                    this.pause();
+                }
             }
         };
         this._nextFrame = async (timestamp) => {
             try {
                 if (!this._smooth &&
                     this._lastFrameTime !== undefined &&
-                    timestamp < this._lastFrameTime + 1000 / this.fpsLimit) {
+                    timestamp < this._lastFrameTime + Constants_js_1.millisecondsToSeconds / this.fpsLimit) {
                     this.draw(false);
                     return;
                 }
@@ -49,7 +55,7 @@ class Container {
                 const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
                 this.addLifeTime(delta.value);
                 this._lastFrameTime = timestamp;
-                if (delta.value > 1000) {
+                if (delta.value > Constants_js_1.millisecondsToSeconds) {
                     this.draw(false);
                     return;
                 }
@@ -132,8 +138,8 @@ class Container {
             const mouseEvent = e, pos = {
                 x: mouseEvent.offsetX || mouseEvent.clientX,
                 y: mouseEvent.offsetY || mouseEvent.clientY,
-            };
-            clickOrTouchHandler(e, pos, 1);
+            }, radius = 1;
+            clickOrTouchHandler(e, pos, radius);
         };
         const touchStartHandler = () => {
             if (!guardCheck(this)) {
@@ -154,16 +160,17 @@ class Container {
             }
             if (touched && !touchMoved) {
                 const touchEvent = e;
-                let lastTouch = touchEvent.touches[touchEvent.touches.length - 1];
+                const lengthOffset = 1;
+                let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];
                 if (!lastTouch) {
-                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - 1];
+                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];
                     if (!lastTouch) {
                         return;
                     }
                 }
-                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
-                    x: lastTouch.clientX - (canvasRect ? canvasRect.left : 0),
-                    y: lastTouch.clientY - (canvasRect ? canvasRect.top : 0),
+                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, minCoordinate = 0, pos = {
+                    x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
+                    y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate),
                 };
                 clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
             }
@@ -205,10 +212,10 @@ class Container {
         this.particles.destroy();
         this.canvas.destroy();
         for (const [, effectDrawer] of this.effectDrawers) {
-            effectDrawer.destroy && effectDrawer.destroy(this);
+            effectDrawer.destroy?.(this);
         }
         for (const [, shapeDrawer] of this.shapeDrawers) {
-            shapeDrawer.destroy && shapeDrawer.destroy(this);
+            shapeDrawer.destroy?.(this);
         }
         for (const key of this.effectDrawers.keys()) {
             this.effectDrawers.delete(key);
@@ -218,9 +225,10 @@ class Container {
         }
         this._engine.clearPlugins(this);
         this.destroyed = true;
-        const mainArr = this._engine.dom(), idx = mainArr.findIndex((t) => t === this);
-        if (idx >= 0) {
-            mainArr.splice(idx, 1);
+        const mainArr = this._engine.dom(), idx = mainArr.findIndex((t) => t === this), minIndex = 0;
+        if (idx >= minIndex) {
+            const deleteCount = 1;
+            mainArr.splice(idx, deleteCount);
         }
         this._engine.dispatchEvent("containerDestroyed", { container: this });
     }
@@ -229,13 +237,14 @@ class Container {
             return;
         }
         let refreshTime = force;
-        this._drawAnimationFrame = requestAnimationFrame(async (timestamp) => {
+        const frame = async (timestamp) => {
             if (refreshTime) {
                 this._lastFrameTime = undefined;
                 refreshTime = false;
             }
             await this._nextFrame(timestamp);
-        });
+        };
+        this._drawAnimationFrame = requestAnimationFrame((timestamp) => void frame(timestamp));
     }
     async export(type, options = {}) {
         for (const [, plugin] of this.plugins) {
@@ -259,7 +268,7 @@ class Container {
         }
         this.particles.handleClickMode(mode);
         for (const [, plugin] of this.plugins) {
-            plugin.handleClickMode && plugin.handleClickMode(mode);
+            plugin.handleClickMode?.(mode);
         }
     }
     async init() {
@@ -292,25 +301,26 @@ class Container {
         this.canvas.initBackground();
         this.canvas.resize();
         this.zLayers = this.actualOptions.zLayers;
-        this._duration = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.duration) * 1000;
-        this._delay = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.delay) * 1000;
+        this._duration = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.duration) * Constants_js_1.millisecondsToSeconds;
+        this._delay = (0, NumberUtils_js_1.getRangeValue)(this.actualOptions.delay) * Constants_js_1.millisecondsToSeconds;
         this._lifeTime = 0;
-        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
+        const defaultFpsLimit = 120, minFpsLimit = 0;
+        this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;
         this._smooth = this.actualOptions.smooth;
         for (const [, drawer] of this.effectDrawers) {
-            drawer.init && (await drawer.init(this));
+            await drawer.init?.(this);
         }
         for (const [, drawer] of this.shapeDrawers) {
-            drawer.init && (await drawer.init(this));
+            await drawer.init?.(this);
         }
         for (const [, plugin] of this.plugins) {
-            plugin.init && (await plugin.init());
+            await plugin.init?.();
         }
         this._engine.dispatchEvent("containerInit", { container: this });
         this.particles.init();
         this.particles.setDensity();
         for (const [, plugin] of this.plugins) {
-            plugin.particlesSetup && plugin.particlesSetup();
+            plugin.particlesSetup?.();
         }
         this._engine.dispatchEvent("particlesSetup", { container: this });
     }
@@ -333,7 +343,7 @@ class Container {
             return;
         }
         for (const [, plugin] of this.plugins) {
-            plugin.pause && plugin.pause();
+            plugin.pause?.();
         }
         if (!this.pageHidden) {
             this._paused = true;
@@ -360,7 +370,7 @@ class Container {
             }
         }
         this._engine.dispatchEvent("containerPlay", { container: this });
-        this.draw(needsUpdate || false);
+        this.draw(needsUpdate ?? false);
     }
     async refresh() {
         if (!guardCheck(this)) {
@@ -385,18 +395,19 @@ class Container {
         await this.init();
         this.started = true;
         await new Promise((resolve) => {
-            this._delayTimeout = setTimeout(async () => {
+            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) {
-                    plugin.start && (await plugin.start());
+                    await plugin.start?.();
                 }
                 this._engine.dispatchEvent("containerStarted", { container: this });
                 this.play();
                 resolve();
-            }, this._delay);
+            };
+            this._delayTimeout = setTimeout(() => void start(), this._delay);
         });
     }
     stop() {
@@ -417,7 +428,7 @@ class Container {
             this._intersectionObserver.unobserve(this.interactivity.element);
         }
         for (const [, plugin] of this.plugins) {
-            plugin.stop && plugin.stop();
+            plugin.stop?.();
         }
         for (const key of this.plugins.keys()) {
             this.plugins.delete(key);

package/cjs/Core/Engine.js

@@ -54,16 +54,18 @@ class Engine {
         return res;
     }
     get version() {
-        return "3.0.3";
+        return "3.1.0";
     }
     addConfig(config) {
-        const name = config.name ?? "default";
-        this._configs.set(name, config);
-        this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
+        const key = config.key ?? config.name ?? "default";
+        this._configs.set(key, config);
+        this._eventDispatcher.dispatchEvent("configAdded", { data: { name: key, config } });
     }
     async addEffect(effect, drawer, refresh = true) {
         (0, Utils_js_1.executeOnSingleOrMultiple)(effect, (type) => {
-            !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+            if (!this.getEffectDrawer(type)) {
+                this.effectDrawers.set(type, drawer);
+            }
         });
         await this.refresh(refresh);
     }
@@ -83,20 +85,28 @@ class Engine {
         await this.refresh(refresh);
     }
     async addPathGenerator(name, generator, refresh = true) {
-        !this.getPathGenerator(name) && this.pathGenerators.set(name, generator);
+        if (!this.getPathGenerator(name)) {
+            this.pathGenerators.set(name, generator);
+        }
         await this.refresh(refresh);
     }
     async addPlugin(plugin, refresh = true) {
-        !this.getPlugin(plugin.id) && this.plugins.push(plugin);
+        if (!this.getPlugin(plugin.id)) {
+            this.plugins.push(plugin);
+        }
         await this.refresh(refresh);
     }
     async addPreset(preset, options, override = false, refresh = true) {
-        (override || !this.getPreset(preset)) && this.presets.set(preset, options);
+        if (override || !this.getPreset(preset)) {
+            this.presets.set(preset, options);
+        }
         await this.refresh(refresh);
     }
     async addShape(shape, drawer, refresh = true) {
         (0, Utils_js_1.executeOnSingleOrMultiple)(shape, (type) => {
-            !this.getShapeDrawer(type) && this.shapeDrawers.set(type, drawer);
+            if (!this.getShapeDrawer(type)) {
+                this.shapeDrawers.set(type, drawer);
+            }
         });
         await this.refresh(refresh);
     }
@@ -114,7 +124,8 @@ class Engine {
     domItem(index) {
         const dom = this.dom(), item = dom[index];
         if (!item || item.destroyed) {
-            dom.splice(index, 1);
+            const deleteCount = 1;
+            dom.splice(index, deleteCount);
             return;
         }
         return item;
@@ -122,7 +133,9 @@ class Engine {
     getAvailablePlugins(container) {
         const res = new Map();
         for (const plugin of this.plugins) {
-            plugin.needsPlugin(container.actualOptions) && res.set(plugin.id, plugin.getPlugin(container));
+            if (plugin.needsPlugin(container.actualOptions)) {
+                res.set(plugin.id, plugin.getPlugin(container));
+            }
         }
         return res;
     }
@@ -163,19 +176,20 @@ class Engine {
         this._initialized = true;
     }
     async load(params) {
-        const id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0, NumberUtils_js_1.getRandom)() * 10000)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
+        const randomFactor = 10000, id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0, NumberUtils_js_1.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 = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id);
-        if (oldIndex >= 0) {
+        const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id), minIndex = 0;
+        if (oldIndex >= minIndex) {
             const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {
                 old.destroy();
-                dom.splice(oldIndex, 1);
+                const deleteCount = 1;
+                dom.splice(oldIndex, deleteCount);
             }
         }
         let canvasEl;
@@ -186,7 +200,8 @@ class Engine {
         else {
             const existingCanvases = domContainer.getElementsByTagName("canvas");
             if (existingCanvases.length) {
-                canvasEl = existingCanvases[0];
+                const firstIndex = 0;
+                canvasEl = existingCanvases[firstIndex];
                 canvasEl.dataset[Constants_js_1.generatedAttribute] = "false";
             }
             else {
@@ -202,8 +217,9 @@ class Engine {
             canvasEl.style.height = "100%";
         }
         const newItem = new Container_js_1.Container(this, id, currentOptions);
-        if (oldIndex >= 0) {
-            dom.splice(oldIndex, 0, newItem);
+        if (oldIndex >= minIndex) {
+            const deleteCount = 0;
+            dom.splice(oldIndex, deleteCount, newItem);
         }
         else {
             dom.push(newItem);
@@ -223,14 +239,14 @@ class Engine {
             return;
         }
         for (const updater of updaters) {
-            updater.loadOptions && updater.loadOptions(options, ...sourceOptions);
+            updater.loadOptions?.(options, ...sourceOptions);
         }
     }
     async refresh(refresh = true) {
         if (!refresh) {
             return;
         }
-        this.dom().forEach((t) => t.refresh());
+        await Promise.allSettled(this.dom().map((t) => t.refresh()));
     }
     removeEventListener(type, listener) {
         this._eventDispatcher.removeEventListener(type, listener);