@tsparticles/engine 3.0.3 → 3.2.0

package/browser/Core/Canvas.js

@@ -3,9 +3,29 @@ import { deepExtend, getLogger, safeMutationObserver } from "../Utils/Utils.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
 import { generatedAttribute } from "./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;
+    }
+}
+function setStyle(canvas, style, important = false) {
+    if (!style) {
+        return;
+    }
+    const element = canvas;
+    if (!element) {
+        return;
+    }
+    const elementStyle = element.style;
+    if (!elementStyle) {
+        return;
+    }
+    for (const key in style) {
+        const value = style[key];
+        if (!value) {
+            continue;
+        }
+        elementStyle.setProperty(key, value, important ? "important" : "");
     }
 }
 export class Canvas {
@@ -13,7 +33,7 @@ export 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) => {
@@ -33,12 +53,12 @@ export 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) => {
@@ -56,14 +76,36 @@ export class Canvas {
             }
             return [fColor, sColor];
         };
-        this._initCover = () => {
-            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = rangeColorToRgb(color);
-            if (coverRgb) {
-                const coverColor = {
-                    ...coverRgb,
-                    a: cover.opacity,
-                };
-                this._coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
+        this._initCover = async () => {
+            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color;
+            if (color) {
+                const coverRgb = rangeColorToRgb(color);
+                if (coverRgb) {
+                    const coverColor = {
+                        ...coverRgb,
+                        a: cover.opacity,
+                    };
+                    this._coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
+                }
+            }
+            else {
+                await new Promise((resolve, reject) => {
+                    if (!cover.image) {
+                        return;
+                    }
+                    const img = document.createElement("img");
+                    img.addEventListener("load", () => {
+                        this._coverImage = {
+                            image: img,
+                            opacity: cover.opacity,
+                        };
+                        resolve();
+                    });
+                    img.addEventListener("error", (evt) => {
+                        reject(evt.error);
+                    });
+                    img.src = cover.image;
+                });
             }
         };
         this._initStyle = () => {
@@ -94,17 +136,17 @@ export class Canvas {
             if (!trail.enable) {
                 return;
             }
+            const factorNumerator = 1, opacity = factorNumerator / trail.length;
             if (trailFill.color) {
                 const fillColor = rangeColorToRgb(trailFill.color);
                 if (!fillColor) {
                     return;
                 }
-                const trail = options.particles.move.trail;
                 this._trailFill = {
                     color: {
                         ...fillColor,
                     },
-                    opacity: 1 / trail.length,
+                    opacity,
                 };
             }
             else {
@@ -116,7 +158,7 @@ export class Canvas {
                     img.addEventListener("load", () => {
                         this._trailFill = {
                             image: img,
-                            opacity: 1 / trail.length,
+                            opacity,
                         };
                         resolve();
                     });
@@ -148,13 +190,7 @@ export class Canvas {
             if (!(element && originalStyle)) {
                 return;
             }
-            const style = element.style;
-            style.position = originalStyle.position;
-            style.zIndex = originalStyle.zIndex;
-            style.top = originalStyle.top;
-            style.left = originalStyle.left;
-            style.width = originalStyle.width;
-            style.height = originalStyle.height;
+            setStyle(element, originalStyle);
         };
         this._safeMutationObserver = (callback) => {
             if (!this._mutationObserver) {
@@ -167,13 +203,15 @@ export class Canvas {
             if (!element) {
                 return;
             }
-            const priority = "important", style = element.style;
-            style.setProperty("position", "fixed", priority);
-            style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(10), priority);
-            style.setProperty("top", "0", priority);
-            style.setProperty("left", "0", priority);
-            style.setProperty("width", "100%", priority);
-            style.setProperty("height", "100%", priority);
+            const radix = 10;
+            setStyle(element, {
+                position: "fixed",
+                zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),
+                top: "0",
+                left: "0",
+                width: "100%",
+                height: "100%",
+            }, true);
         };
         this.size = {
             height: 0,
@@ -190,11 +228,11 @@ export 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(getStyleFromRgb(trailFill.color, trailFill.opacity));
             }
@@ -212,7 +250,7 @@ export class Canvas {
         this.stop();
         if (this._generated) {
             const element = this.element;
-            element && element.remove();
+            element?.remove();
         }
         else {
             this._resetOriginalStyle();
@@ -229,12 +267,19 @@ export class Canvas {
         }
         return cb(ctx);
     }
-    drawParticle(particle, delta) {
+    drawAsync(cb) {
+        const ctx = this._context;
+        if (!ctx) {
+            return Promise.resolve(undefined);
+        }
+        return cb(ctx);
+    }
+    async drawParticle(particle, delta) {
         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;
@@ -248,13 +293,13 @@ export class Canvas {
         if (!fColor && !sColor) {
             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 = {
+        await this.drawAsync(async (ctx) => {
+            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 ? getStyleFromHsl(fColor, zOpacity) : undefined,
             };
             colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill;
             this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
-            drawParticle({
+            await drawParticle({
                 container,
                 context: ctx,
                 particle,
@@ -262,7 +307,7 @@ export 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,
@@ -270,11 +315,11 @@ export class Canvas {
             this._applyPostDrawUpdaters(particle);
         });
     }
-    drawParticlePlugin(plugin, particle, delta) {
-        this.draw((ctx) => drawParticlePlugin(ctx, plugin, particle, delta));
+    async drawParticlePlugin(plugin, particle, delta) {
+        await this.drawAsync((ctx) => drawParticlePlugin(ctx, plugin, particle, delta));
     }
-    drawPlugin(plugin, delta) {
-        this.draw((ctx) => drawPlugin(ctx, plugin, delta));
+    async drawPlugin(plugin, delta) {
+        await this.drawAsync((ctx) => drawPlugin(ctx, plugin, delta));
     }
     async init() {
         this._safeMutationObserver((obs) => obs.disconnect());
@@ -287,7 +332,7 @@ export class Canvas {
         });
         this.resize();
         this._initStyle();
-        this._initCover();
+        await this._initCover();
         try {
             await this._initTrail();
         }
@@ -332,7 +377,7 @@ export class Canvas {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }
-            if (plugin.particleFillColor || plugin.particleStrokeColor) {
+            if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
                 this._colorPlugins.push(plugin);
             }
         }
@@ -344,7 +389,7 @@ export 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);
             }
         }
@@ -377,7 +422,15 @@ export class Canvas {
         this.draw((ctx) => {
             if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 clear(ctx, this.size);
-                this._paintBase(this._coverColorStyle);
+                if (this._coverImage) {
+                    this._paintImage(this._coverImage.image, this._coverImage.opacity);
+                }
+                else if (this._coverColorStyle) {
+                    this._paintBase(this._coverColorStyle);
+                }
+                else {
+                    this._paintBase();
+                }
             }
             else {
                 this._paintBase();
@@ -419,7 +472,7 @@ export class Canvas {
             return;
         }
         const container = this.container, needsRefresh = container.updateActualOptions();
-        container.particles.setDensity();
+        await container.particles.setDensity();
         this._applyResizePlugins();
         if (needsRefresh) {
             await container.refresh();

package/browser/Core/Container.js

@@ -1,19 +1,20 @@
+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 { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
-import { errorPrefix } from "./Utils/Constants.js";
 import { getRangeValue } from "../Utils/NumberUtils.js";
 import { loadOptions } from "../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) / millisecondsToSeconds,
     };
 }
 function loadContainerOptions(engine, container, ...sourceOptionsArr) {
@@ -31,14 +32,19 @@ export 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 + millisecondsToSeconds / this.fpsLimit) {
                     this.draw(false);
                     return;
                 }
@@ -46,7 +52,7 @@ export 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 > millisecondsToSeconds) {
                     this.draw(false);
                     return;
                 }
@@ -55,7 +61,7 @@ export class Container {
                     this.destroy();
                     return;
                 }
-                if (this.getAnimationStatus()) {
+                if (this.animationStatus) {
                     this.draw(false);
                 }
             }
@@ -98,6 +104,9 @@ export class Container {
         this._intersectionObserver = safeIntersectionObserver((entries) => this._intersectionManager(entries));
         this._engine.dispatchEvent("containerBuilt", { container: this });
     }
+    get animationStatus() {
+        return !this._paused && !this.pageHidden && guardCheck(this);
+    }
     get options() {
         return this._options;
     }
@@ -129,8 +138,8 @@ export 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)) {
@@ -151,16 +160,17 @@ export 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));
             }
@@ -202,10 +212,10 @@ export 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);
@@ -215,9 +225,10 @@ export 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 });
     }
@@ -226,13 +237,14 @@ export 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) {
@@ -247,16 +259,13 @@ export class Container {
         }
         getLogger().error(`${errorPrefix} - Export plugin with type ${type} not found`);
     }
-    getAnimationStatus() {
-        return !this._paused && !this.pageHidden && guardCheck(this);
-    }
     handleClickMode(mode) {
         if (!guardCheck(this)) {
             return;
         }
         this.particles.handleClickMode(mode);
         for (const [, plugin] of this.plugins) {
-            plugin.handleClickMode && plugin.handleClickMode(mode);
+            plugin.handleClickMode?.(mode);
         }
     }
     async init() {
@@ -277,9 +286,10 @@ export class Container {
                 this.shapeDrawers.set(type, drawer);
             }
         }
+        await this.particles.initPlugins();
         this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
         this.actualOptions = loadContainerOptions(this._engine, this, this._options);
-        const availablePlugins = this._engine.getAvailablePlugins(this);
+        const availablePlugins = await this._engine.getAvailablePlugins(this);
         for (const [id, plugin] of availablePlugins) {
             this.plugins.set(id, plugin);
         }
@@ -289,25 +299,26 @@ export class Container {
         this.canvas.initBackground();
         this.canvas.resize();
         this.zLayers = this.actualOptions.zLayers;
-        this._duration = getRangeValue(this.actualOptions.duration) * 1000;
-        this._delay = getRangeValue(this.actualOptions.delay) * 1000;
+        this._duration = getRangeValue(this.actualOptions.duration) * millisecondsToSeconds;
+        this._delay = getRangeValue(this.actualOptions.delay) * 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();
+        await this.particles.init();
+        await this.particles.setDensity();
         for (const [, plugin] of this.plugins) {
-            plugin.particlesSetup && plugin.particlesSetup();
+            plugin.particlesSetup?.();
         }
         this._engine.dispatchEvent("particlesSetup", { container: this });
     }
@@ -330,7 +341,7 @@ export class Container {
             return;
         }
         for (const [, plugin] of this.plugins) {
-            plugin.pause && plugin.pause();
+            plugin.pause?.();
         }
         if (!this.pageHidden) {
             this._paused = true;
@@ -357,7 +368,7 @@ export class Container {
             }
         }
         this._engine.dispatchEvent("containerPlay", { container: this });
-        this.draw(needsUpdate || false);
+        this.draw(needsUpdate ?? false);
     }
     async refresh() {
         if (!guardCheck(this)) {
@@ -382,18 +393,19 @@ export 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() {
@@ -414,7 +426,7 @@ export 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);