@tsparticles/engine 3.0.3 → 3.2.0

package/browser/Utils/RgbColorManager.js

@@ -24,13 +24,13 @@ export class RgbColorManager {
         if (!input.startsWith(this.stringPrefix)) {
             return;
         }
-        const regex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input);
+        const regex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input), radix = 10, minLength = 4, defaultAlpha = 1;
         return result
             ? {
-                a: result.length > 4 ? parseAlpha(result[5]) : 1,
-                b: parseInt(result[3], 10),
-                g: parseInt(result[2], 10),
-                r: parseInt(result[1], 10),
+                a: result.length > minLength ? parseAlpha(result[5]) : defaultAlpha,
+                b: parseInt(result[3], radix),
+                g: parseInt(result[2], radix),
+                r: parseInt(result[1], radix),
             }
             : undefined;
     }

package/browser/Utils/Utils.js

@@ -1,4 +1,5 @@
-import { collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRange, } from "./NumberUtils.js";
+import { clamp, collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRange, } from "./NumberUtils.js";
+import { halfRandom, millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
 import { Vector } from "../Core/Utils/Vector.js";
 const _logger = {
     debug: console.debug,
@@ -20,15 +21,15 @@ export function getLogger() {
     return _logger;
 }
 function rectSideBounce(data) {
-    const res = { bounced: false }, { pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor } = data;
+    const res = { bounced: false }, { pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor } = data, half = 0.5, minVelocity = 0;
     if (pOtherSide.min < rectOtherSide.min ||
         pOtherSide.min > rectOtherSide.max ||
         pOtherSide.max < rectOtherSide.min ||
         pOtherSide.max > rectOtherSide.max) {
         return res;
     }
-    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * 0.5 && velocity > 0) ||
-        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * 0.5 && velocity < 0)) {
+    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * half && velocity > minVelocity) ||
+        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * half && velocity < minVelocity)) {
         res.velocity = velocity * -factor;
         res.bounced = true;
     }
@@ -65,7 +66,8 @@ export function safeMutationObserver(callback) {
     return new MutationObserver(callback);
 }
 export function isInArray(value, array) {
-    return value === array || (isArray(array) && array.indexOf(value) > -1);
+    const invalidIndex = -1;
+    return value === array || (isArray(array) && array.indexOf(value) > invalidIndex);
 }
 export async function loadFont(font, weight) {
     try {
@@ -81,7 +83,8 @@ export function itemFromArray(array, index, useIndex = true) {
     return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
 }
 export function isPointInside(point, size, offset, radius, direction) {
-    return areBoundsInside(calculateBounds(point, radius ?? 0), size, offset, direction);
+    const minRadius = 0;
+    return areBoundsInside(calculateBounds(point, radius ?? minRadius), size, offset, direction);
 }
 export function areBoundsInside(bounds, size, offset, direction) {
     let inside = true;
@@ -171,8 +174,8 @@ export function circleBounceDataFromParticle(p) {
     };
 }
 export function circleBounce(p1, p2) {
-    const { x: xVelocityDiff, y: yVelocityDiff } = p1.velocity.sub(p2.velocity), [pos1, pos2] = [p1.position, p2.position], { dx: xDist, dy: yDist } = getDistances(pos2, pos1);
-    if (xVelocityDiff * xDist + yVelocityDiff * yDist < 0) {
+    const { x: xVelocityDiff, y: yVelocityDiff } = p1.velocity.sub(p2.velocity), [pos1, pos2] = [p1.position, p2.position], { dx: xDist, dy: yDist } = getDistances(pos2, pos1), minimumDistance = 0;
+    if (xVelocityDiff * xDist + yVelocityDiff * yDist < minimumDistance) {
         return;
     }
     const angle = -Math.atan2(yDist, xDist), m1 = p1.mass, m2 = p2.mass, u1 = p1.velocity.rotate(angle), u2 = p2.velocity.rotate(angle), v1 = collisionVelocity(u1, u2, m1, m2), v2 = collisionVelocity(u2, u1, m1, m2), vFinal1 = v1.rotate(-angle), vFinal2 = v2.rotate(-angle);
@@ -240,17 +243,22 @@ export function rectBounce(particle, divBounds) {
     }
 }
 export function executeOnSingleOrMultiple(obj, callback) {
-    return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, 0);
+    const defaultIndex = 0;
+    return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, defaultIndex);
 }
 export function itemFromSingleOrMultiple(obj, index, useIndex) {
     return isArray(obj) ? itemFromArray(obj, index, useIndex) : obj;
 }
 export function findItemFromSingleOrMultiple(obj, callback) {
-    return isArray(obj) ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
+    if (isArray(obj)) {
+        return obj.find((t, index) => callback(t, index));
+    }
+    const defaultIndex = 0;
+    return callback(obj, defaultIndex) ? obj : undefined;
 }
 export function initParticleNumericAnimationValue(options, pxRatio) {
     const valueRange = options.value, animationOptions = options.animation, res = {
-        delayTime: getRangeValue(animationOptions.delay) * 1000,
+        delayTime: getRangeValue(animationOptions.delay) * millisecondsToSeconds,
         enable: animationOptions.enable,
         value: getRangeValue(options.value) * pxRatio,
         max: getRangeMax(valueRange) * pxRatio,
@@ -258,9 +266,9 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
         loops: 0,
         maxLoops: getRangeValue(animationOptions.count),
         time: 0,
-    };
+    }, decayOffset = 1;
     if (animationOptions.enable) {
-        res.decay = 1 - getRangeValue(animationOptions.decay);
+        res.decay = decayOffset - getRangeValue(animationOptions.decay);
         switch (animationOptions.mode) {
             case "increase":
                 res.status = "increasing";
@@ -269,7 +277,7 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
                 res.status = "decreasing";
                 break;
             case "random":
-                res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+                res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
                 break;
         }
         const autoStatus = animationOptions.mode === "auto";
@@ -290,7 +298,7 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
             default:
                 res.value = randomInRange(res);
                 if (autoStatus) {
-                    res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+                    res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
                 }
                 break;
         }
@@ -307,14 +315,14 @@ function getPositionOrSize(positionOrSize, canvasSize) {
     const isPosition = "x" in positionOrSize;
     if (isPosition) {
         return {
-            x: (positionOrSize.x / 100) * canvasSize.width,
-            y: (positionOrSize.y / 100) * canvasSize.height,
+            x: (positionOrSize.x / percentDenominator) * canvasSize.width,
+            y: (positionOrSize.y / percentDenominator) * canvasSize.height,
         };
     }
     else {
         return {
-            width: (positionOrSize.width / 100) * canvasSize.width,
-            height: (positionOrSize.height / 100) * canvasSize.height,
+            width: (positionOrSize.width / percentDenominator) * canvasSize.width,
+            height: (positionOrSize.height / percentDenominator) * canvasSize.height,
         };
     }
 }
@@ -342,3 +350,78 @@ export function isObject(arg) {
 export function isArray(arg) {
     return Array.isArray(arg);
 }
+function checkDestroy(particle, destroyType, value, minValue, maxValue) {
+    switch (destroyType) {
+        case "max":
+            if (value >= maxValue) {
+                particle.destroy();
+            }
+            break;
+        case "min":
+            if (value <= minValue) {
+                particle.destroy();
+            }
+            break;
+    }
+}
+export function updateAnimation(particle, data, changeDirection, destroyType, delta) {
+    const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minDecay = 1;
+    if (particle.destroyed ||
+        !data ||
+        !data.enable ||
+        ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
+        return;
+    }
+    const velocity = (data.velocity ?? minVelocity) * delta.factor, minValue = data.min, maxValue = data.max, decay = data.decay ?? minDecay;
+    if (!data.time) {
+        data.time = 0;
+    }
+    if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+        data.time += delta.value;
+    }
+    if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+        return;
+    }
+    switch (data.status) {
+        case "increasing":
+            if (data.value >= maxValue) {
+                if (changeDirection) {
+                    data.status = "decreasing";
+                }
+                else {
+                    data.value -= maxValue;
+                }
+                if (!data.loops) {
+                    data.loops = minLoops;
+                }
+                data.loops++;
+            }
+            else {
+                data.value += velocity;
+            }
+            break;
+        case "decreasing":
+            if (data.value <= minValue) {
+                if (changeDirection) {
+                    data.status = "increasing";
+                }
+                else {
+                    data.value += maxValue;
+                }
+                if (!data.loops) {
+                    data.loops = minLoops;
+                }
+                data.loops++;
+            }
+            else {
+                data.value -= velocity;
+            }
+    }
+    if (data.velocity && decay !== identity) {
+        data.velocity *= decay;
+    }
+    checkDestroy(particle, destroyType, data.value, minValue, maxValue);
+    if (!particle.destroyed) {
+        data.value = clamp(data.value, minValue, maxValue);
+    }
+}

package/cjs/Core/Canvas.js

@@ -6,9 +6,29 @@ 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;
+    }
+}
+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" : "");
     }
 }
 class Canvas {
@@ -16,7 +36,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 +56,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) => {
@@ -59,14 +79,36 @@ class Canvas {
             }
             return [fColor, sColor];
         };
-        this._initCover = () => {
-            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = (0, ColorUtils_js_1.rangeColorToRgb)(color);
-            if (coverRgb) {
-                const coverColor = {
-                    ...coverRgb,
-                    a: cover.opacity,
-                };
-                this._coverColorStyle = (0, ColorUtils_js_1.getStyleFromRgb)(coverColor, coverColor.a);
+        this._initCover = async () => {
+            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color;
+            if (color) {
+                const coverRgb = (0, ColorUtils_js_1.rangeColorToRgb)(color);
+                if (coverRgb) {
+                    const coverColor = {
+                        ...coverRgb,
+                        a: cover.opacity,
+                    };
+                    this._coverColorStyle = (0, ColorUtils_js_1.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 = () => {
@@ -97,17 +139,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 +161,7 @@ class Canvas {
                     img.addEventListener("load", () => {
                         this._trailFill = {
                             image: img,
-                            opacity: 1 / trail.length,
+                            opacity,
                         };
                         resolve();
                     });
@@ -151,13 +193,7 @@ 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) {
@@ -170,13 +206,15 @@ 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,
@@ -193,11 +231,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 +253,7 @@ class Canvas {
         this.stop();
         if (this._generated) {
             const element = this.element;
-            element && element.remove();
+            element?.remove();
         }
         else {
             this._resetOriginalStyle();
@@ -232,12 +270,19 @@ 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;
@@ -251,13 +296,13 @@ 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 ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
             };
             colorStyles.stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
             this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
-            (0, CanvasUtils_js_1.drawParticle)({
+            await (0, CanvasUtils_js_1.drawParticle)({
                 container,
                 context: ctx,
                 particle,
@@ -265,7 +310,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,
@@ -273,11 +318,11 @@ class Canvas {
             this._applyPostDrawUpdaters(particle);
         });
     }
-    drawParticlePlugin(plugin, particle, delta) {
-        this.draw((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
+    async drawParticlePlugin(plugin, particle, delta) {
+        await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
     }
-    drawPlugin(plugin, delta) {
-        this.draw((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
+    async drawPlugin(plugin, delta) {
+        await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
     }
     async init() {
         this._safeMutationObserver((obs) => obs.disconnect());
@@ -290,7 +335,7 @@ class Canvas {
         });
         this.resize();
         this._initStyle();
-        this._initCover();
+        await this._initCover();
         try {
             await this._initTrail();
         }
@@ -335,7 +380,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 +392,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);
             }
         }
@@ -380,7 +425,15 @@ class Canvas {
         this.draw((ctx) => {
             if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 (0, CanvasUtils_js_1.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();
@@ -422,7 +475,7 @@ class Canvas {
             return;
         }
         const container = this.container, needsRefresh = container.updateActualOptions();
-        container.particles.setDensity();
+        await container.particles.setDensity();
         this._applyResizePlugins();
         if (needsRefresh) {
             await container.refresh();