@tsparticles/engine 3.7.1 → 3.8.1

package/cjs/Utils/ColorUtils.js

@@ -20,11 +20,10 @@ exports.getHslAnimationFromHsl = getHslAnimationFromHsl;
 exports.updateColorValue = updateColorValue;
 exports.updateColor = updateColor;
 const NumberUtils_js_1 = require("./NumberUtils.js");
-const TypeUtils_js_1 = require("./TypeUtils.js");
 const Constants_js_1 = require("../Core/Utils/Constants.js");
+const TypeUtils_js_1 = require("./TypeUtils.js");
 const AnimationStatus_js_1 = require("../Enums/AnimationStatus.js");
 const Utils_js_1 = require("./Utils.js");
-const randomColorValue = "random", midColorValue = "mid";
 function stringToRgba(engine, input) {
     if (!input) {
         return;
@@ -61,7 +60,7 @@ function colorToRgb(engine, input, index, useIndex = true) {
     }
     const color = (0, TypeUtils_js_1.isString)(input) ? { value: input } : input;
     if ((0, TypeUtils_js_1.isString)(color.value)) {
-        return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(engine, color.value);
+        return color.value === Constants_js_1.randomColorValue ? getRandomRgbColor() : stringToRgb(engine, color.value);
     }
     if ((0, TypeUtils_js_1.isArray)(color.value)) {
         return colorToRgb(engine, {
@@ -84,26 +83,26 @@ function rangeColorToHsl(engine, color, index, useIndex = true) {
     return rgb ? rgbToHsl(rgb) : undefined;
 }
 function rgbToHsl(color) {
-    const rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, half = 0.5, double = 2, r1 = color.r / rgbMax, g1 = color.g / rgbMax, b1 = color.b / rgbMax, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
-        h: hMin,
-        l: (max + min) * half,
-        s: sMin,
+    const r1 = color.r / Constants_js_1.rgbMax, g1 = color.g / Constants_js_1.rgbMax, b1 = color.b / Constants_js_1.rgbMax, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
+        h: Constants_js_1.hMin,
+        l: (max + min) * Constants_js_1.half,
+        s: Constants_js_1.sMin,
     };
     if (max !== min) {
-        res.s = res.l < half ? (max - min) / (max + min) : (max - min) / (double - max - min);
+        res.s = res.l < Constants_js_1.half ? (max - min) / (max + min) : (max - min) / (Constants_js_1.double - max - min);
         res.h =
             r1 === max
                 ? (g1 - b1) / (max - min)
-                : (res.h = g1 === max ? double + (b1 - r1) / (max - min) : double * double + (r1 - g1) / (max - min));
+                : (res.h = g1 === max ? Constants_js_1.double + (b1 - r1) / (max - min) : Constants_js_1.double * Constants_js_1.double + (r1 - g1) / (max - min));
     }
-    res.l *= lMax;
-    res.s *= sMax;
-    res.h *= hPhase;
-    if (res.h < hMin) {
-        res.h += hMax;
+    res.l *= Constants_js_1.lMax;
+    res.s *= Constants_js_1.sMax;
+    res.h *= Constants_js_1.hPhase;
+    if (res.h < Constants_js_1.hMin) {
+        res.h += Constants_js_1.hMax;
     }
-    if (res.h >= hMax) {
-        res.h -= hMax;
+    if (res.h >= Constants_js_1.hMax) {
+        res.h -= Constants_js_1.hMax;
     }
     return res;
 }
@@ -114,33 +113,33 @@ function stringToRgb(engine, input) {
     return stringToRgba(engine, input);
 }
 function hslToRgb(hsl) {
-    const hMax = 360, sMax = 100, lMax = 100, sMin = 0, lMin = 0, h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax, rgbFactor = 255, triple = 3;
-    if (s === sMin) {
-        const grayscaleValue = Math.round(lNormalized * rgbFactor);
+    const h = ((hsl.h % Constants_js_1.hMax) + Constants_js_1.hMax) % Constants_js_1.hMax, s = Math.max(Constants_js_1.sMin, Math.min(Constants_js_1.sMax, hsl.s)), l = Math.max(Constants_js_1.lMin, Math.min(Constants_js_1.lMax, hsl.l)), hNormalized = h / Constants_js_1.hMax, sNormalized = s / Constants_js_1.sMax, lNormalized = l / Constants_js_1.lMax;
+    if (s === Constants_js_1.sMin) {
+        const grayscaleValue = Math.round(lNormalized * Constants_js_1.rgbFactor);
         return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
-    const half = 0.5, double = 2, channel = (temp1, temp2, temp3) => {
-        const temp3Min = 0, temp3Max = 1, sextuple = 6;
+    const channel = (temp1, temp2, temp3) => {
+        const temp3Min = 0, temp3Max = 1;
         if (temp3 < temp3Min) {
             temp3++;
         }
         if (temp3 > temp3Max) {
             temp3--;
         }
-        if (temp3 * sextuple < temp3Max) {
-            return temp1 + (temp2 - temp1) * sextuple * temp3;
+        if (temp3 * Constants_js_1.sextuple < temp3Max) {
+            return temp1 + (temp2 - temp1) * Constants_js_1.sextuple * temp3;
         }
-        if (temp3 * double < temp3Max) {
+        if (temp3 * Constants_js_1.double < temp3Max) {
             return temp2;
         }
-        if (temp3 * triple < temp3Max * double) {
-            const temp3Offset = double / triple;
-            return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
+        if (temp3 * Constants_js_1.triple < temp3Max * Constants_js_1.double) {
+            const temp3Offset = Constants_js_1.double / Constants_js_1.triple;
+            return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * Constants_js_1.sextuple;
         }
         return temp1;
-    }, sNormalizedOffset = 1, temp1 = lNormalized < half
-        ? lNormalized * (sNormalizedOffset + sNormalized)
-        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseNumerator = 1, phaseThird = phaseNumerator / triple, red = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized)), blue = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized - phaseThird));
+    }, temp1 = lNormalized < Constants_js_1.half
+        ? lNormalized * (Constants_js_1.sNormalizedOffset + sNormalized)
+        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = Constants_js_1.double * lNormalized - temp1, phaseThird = Constants_js_1.phaseNumerator / Constants_js_1.triple, red = Math.min(Constants_js_1.rgbFactor, Constants_js_1.rgbFactor * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(Constants_js_1.rgbFactor, Constants_js_1.rgbFactor * channel(temp2, temp1, hNormalized)), blue = Math.min(Constants_js_1.rgbFactor, Constants_js_1.rgbFactor * channel(temp2, temp1, hNormalized - phaseThird));
     return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
 }
 function hslaToRgba(hsla) {
@@ -153,20 +152,18 @@ function hslaToRgba(hsla) {
     };
 }
 function getRandomRgbColor(min) {
-    const defaultMin = 0, fixedMin = min ?? defaultMin, rgbMax = 256;
+    const fixedMin = min ?? Constants_js_1.defaultRgbMin, fixedMax = Constants_js_1.rgbMax + Constants_js_1.identity;
     return {
-        b: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, rgbMax))),
-        g: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, rgbMax))),
-        r: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, rgbMax))),
+        b: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, fixedMax))),
+        g: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, fixedMax))),
+        r: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, fixedMax))),
     };
 }
 function getStyleFromRgb(color, opacity) {
-    const defaultOpacity = 1;
-    return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? defaultOpacity})`;
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? Constants_js_1.defaultOpacity})`;
 }
 function getStyleFromHsl(color, opacity) {
-    const defaultOpacity = 1;
-    return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? defaultOpacity})`;
+    return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? Constants_js_1.defaultOpacity})`;
 }
 function colorMix(color1, color2, size1, size2) {
     let rgb1 = color1, rgb2 = color2;
@@ -183,10 +180,10 @@ function colorMix(color1, color2, size1, size2) {
     };
 }
 function getLinkColor(p1, p2, linkColor) {
-    if (linkColor === randomColorValue) {
+    if (linkColor === Constants_js_1.randomColorValue) {
         return getRandomRgbColor();
     }
-    else if (linkColor === midColorValue) {
+    else if (linkColor === Constants_js_1.midColorValue) {
         const sourceColor = p1.getFillColor() ?? p1.getStrokeColor(), destColor = p2?.getFillColor() ?? p2?.getStrokeColor();
         if (sourceColor && destColor && p2) {
             return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
@@ -204,19 +201,19 @@ function getLinkColor(p1, p2, linkColor) {
 }
 function getLinkRandomColor(engine, optColor, blink, consent) {
     const color = (0, TypeUtils_js_1.isString)(optColor) ? optColor : optColor.value;
-    if (color === randomColorValue) {
+    if (color === Constants_js_1.randomColorValue) {
         if (consent) {
             return rangeColorToRgb(engine, {
                 value: color,
             });
         }
         if (blink) {
-            return randomColorValue;
+            return Constants_js_1.randomColorValue;
         }
-        return midColorValue;
+        return Constants_js_1.midColorValue;
     }
-    else if (color === midColorValue) {
-        return midColorValue;
+    else if (color === Constants_js_1.midColorValue) {
+        return Constants_js_1.midColorValue;
     }
     else {
         return rangeColorToRgb(engine, {
@@ -257,14 +254,13 @@ function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 }
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.enable = colorAnimation.enable;
-    const defaultVelocity = 0, decayOffset = 1, defaultLoops = 0, defaultTime = 0;
     if (colorValue.enable) {
         colorValue.velocity = ((0, NumberUtils_js_1.getRangeValue)(colorAnimation.speed) / Constants_js_1.percentDenominator) * reduceFactor;
-        colorValue.decay = decayOffset - (0, NumberUtils_js_1.getRangeValue)(colorAnimation.decay);
+        colorValue.decay = Constants_js_1.decayOffset - (0, NumberUtils_js_1.getRangeValue)(colorAnimation.decay);
         colorValue.status = AnimationStatus_js_1.AnimationStatus.increasing;
-        colorValue.loops = defaultLoops;
+        colorValue.loops = Constants_js_1.defaultLoops;
         colorValue.maxLoops = (0, NumberUtils_js_1.getRangeValue)(colorAnimation.count);
-        colorValue.time = defaultTime;
+        colorValue.time = Constants_js_1.defaultTime;
         colorValue.delayTime = (0, NumberUtils_js_1.getRangeValue)(colorAnimation.delay) * Constants_js_1.millisecondsToSeconds;
         if (!colorAnimation.sync) {
             colorValue.velocity *= (0, NumberUtils_js_1.getRandom)();
@@ -274,7 +270,7 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
         colorValue.offset = (0, NumberUtils_js_1.setRangeValue)(colorAnimation.offset);
     }
     else {
-        colorValue.velocity = defaultVelocity;
+        colorValue.velocity = Constants_js_1.defaultVelocity;
     }
 }
 function updateColorValue(data, range, decrease, delta) {
@@ -329,8 +325,7 @@ function updateColor(color, delta) {
     if (!color) {
         return;
     }
-    const { h, s, l } = color;
-    const ranges = {
+    const { h, s, l } = color, ranges = {
         h: { min: 0, max: 360 },
         s: { min: 0, max: 100 },
         l: { min: 0, max: 100 },

package/cjs/Utils/EventDispatcher.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EventDispatcher = void 0;
+const Constants_js_1 = require("../Core/Utils/Constants.js");
 class EventDispatcher {
     constructor() {
         this._listeners = new Map();
@@ -34,16 +35,15 @@ class EventDispatcher {
         if (!arr) {
             return;
         }
-        const length = arr.length, idx = arr.indexOf(listener), minIndex = 0;
-        if (idx < minIndex) {
+        const length = arr.length, idx = arr.indexOf(listener);
+        if (idx < Constants_js_1.minIndex) {
             return;
         }
-        const deleteCount = 1;
-        if (length === deleteCount) {
+        if (length === Constants_js_1.deleteCount) {
             this._listeners.delete(type);
         }
         else {
-            arr.splice(idx, deleteCount);
+            arr.splice(idx, Constants_js_1.deleteCount);
         }
     }
 }

package/cjs/Utils/NumberUtils.js

@@ -25,14 +25,14 @@ exports.calcExactPositionOrRandomFromSize = calcExactPositionOrRandomFromSize;
 exports.calcExactPositionOrRandomFromSizeRanged = calcExactPositionOrRandomFromSizeRanged;
 exports.parseAlpha = parseAlpha;
 const MoveDirection_js_1 = require("../Enums/Directions/MoveDirection.js");
+const Constants_js_1 = require("../Core/Utils/Constants.js");
 const Vectors_js_1 = require("../Core/Utils/Vectors.js");
 const TypeUtils_js_1 = require("./TypeUtils.js");
-const Constants_js_1 = require("../Core/Utils/Constants.js");
 let _random = Math.random;
 const _animationLoop = {
     nextFrame: (cb) => requestAnimationFrame(cb),
     cancel: (idx) => cancelAnimationFrame(idx),
-}, double = 2, doublePI = Math.PI * double;
+};
 function setRandom(rnd = Math.random) {
     _random = rnd;
 }
@@ -100,30 +100,29 @@ function getParticleDirectionAngle(direction, position, center) {
     if ((0, TypeUtils_js_1.isNumber)(direction)) {
         return degToRad(direction);
     }
-    const empty = 0, half = 0.5, quarter = 0.25, threeQuarter = half + quarter;
     switch (direction) {
         case MoveDirection_js_1.MoveDirection.top:
-            return -Math.PI * half;
+            return -Math.PI * Constants_js_1.half;
         case MoveDirection_js_1.MoveDirection.topRight:
-            return -Math.PI * quarter;
+            return -Math.PI * Constants_js_1.quarter;
         case MoveDirection_js_1.MoveDirection.right:
-            return empty;
+            return Constants_js_1.empty;
         case MoveDirection_js_1.MoveDirection.bottomRight:
-            return Math.PI * quarter;
+            return Math.PI * Constants_js_1.quarter;
         case MoveDirection_js_1.MoveDirection.bottom:
-            return Math.PI * half;
+            return Math.PI * Constants_js_1.half;
         case MoveDirection_js_1.MoveDirection.bottomLeft:
-            return Math.PI * threeQuarter;
+            return Math.PI * Constants_js_1.threeQuarter;
         case MoveDirection_js_1.MoveDirection.left:
             return Math.PI;
         case MoveDirection_js_1.MoveDirection.topLeft:
-            return -Math.PI * threeQuarter;
+            return -Math.PI * Constants_js_1.threeQuarter;
         case MoveDirection_js_1.MoveDirection.inside:
             return Math.atan2(center.y - position.y, center.x - position.x);
         case MoveDirection_js_1.MoveDirection.outside:
             return Math.atan2(position.y - center.y, position.x - center.x);
         default:
-            return getRandom() * doublePI;
+            return getRandom() * Constants_js_1.doublePI;
     }
 }
 function getParticleBaseVelocity(direction) {
@@ -133,8 +132,7 @@ function getParticleBaseVelocity(direction) {
     return baseVelocity;
 }
 function collisionVelocity(v1, v2, m1, m2) {
-    const double = 2;
-    return Vectors_js_1.Vector.create((v1.x * (m1 - m2)) / (m1 + m2) + (v2.x * double * m2) / (m1 + m2), v1.y);
+    return Vectors_js_1.Vector.create((v1.x * (m1 - m2)) / (m1 + m2) + (v2.x * Constants_js_1.double * m2) / (m1 + m2), v1.y);
 }
 function calcPositionFromSize(data) {
     return data.position?.x !== undefined && data.position.y !== undefined

package/cjs/Utils/Utils.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFullScreenStyle = void 0;
 exports.setLogger = setLogger;
 exports.getLogger = getLogger;
 exports.isSsr = isSsr;
@@ -29,7 +30,7 @@ exports.initParticleNumericAnimationValue = initParticleNumericAnimationValue;
 exports.getPosition = getPosition;
 exports.getSize = getSize;
 exports.updateAnimation = updateAnimation;
-exports.assertValidVersion = assertValidVersion;
+exports.cloneStyle = cloneStyle;
 const NumberUtils_js_1 = require("./NumberUtils.js");
 const Constants_js_1 = require("../Core/Utils/Constants.js");
 const TypeUtils_js_1 = require("./TypeUtils.js");
@@ -59,16 +60,28 @@ function setLogger(logger) {
 function getLogger() {
     return _logger;
 }
+function memoize(fn) {
+    const cache = new Map();
+    return (...args) => {
+        const key = JSON.stringify(args);
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        const result = fn(...args);
+        cache.set(key, result);
+        return result;
+    };
+}
 function rectSideBounce(data) {
-    const res = { bounced: false }, { pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor } = data, half = 0.5, minVelocity = 0;
+    const res = { bounced: false }, { pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor } = data;
     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) * half && velocity > minVelocity) ||
-        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * half && velocity < minVelocity)) {
+    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * Constants_js_1.half && velocity > Constants_js_1.minVelocity) ||
+        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * Constants_js_1.half && velocity < Constants_js_1.minVelocity)) {
         res.velocity = velocity * -factor;
         res.bounced = true;
     }
@@ -316,7 +329,7 @@ function initParticleNumericAnimationValue(options, pxRatio) {
                 res.status = AnimationStatus_js_1.AnimationStatus.decreasing;
                 break;
             case AnimationMode_js_1.AnimationMode.random:
-                res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.halfRandom ? AnimationStatus_js_1.AnimationStatus.increasing : AnimationStatus_js_1.AnimationStatus.decreasing;
+                res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.half ? AnimationStatus_js_1.AnimationStatus.increasing : AnimationStatus_js_1.AnimationStatus.decreasing;
                 break;
         }
         const autoStatus = animationOptions.mode === AnimationMode_js_1.AnimationMode.auto;
@@ -337,7 +350,7 @@ function initParticleNumericAnimationValue(options, pxRatio) {
             default:
                 res.value = (0, NumberUtils_js_1.randomInRange)(res);
                 if (autoStatus) {
-                    res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.halfRandom ? AnimationStatus_js_1.AnimationStatus.increasing : AnimationStatus_js_1.AnimationStatus.decreasing;
+                    res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.half ? AnimationStatus_js_1.AnimationStatus.increasing : AnimationStatus_js_1.AnimationStatus.decreasing;
                 }
                 break;
         }
@@ -446,9 +459,47 @@ function updateAnimation(particle, data, changeDirection, destroyType, delta) {
         data.value = (0, NumberUtils_js_1.clamp)(data.value, minValue, maxValue);
     }
 }
-function assertValidVersion(engine, pluginVersion) {
-    if (engine.version === pluginVersion) {
-        return;
+function cloneStyle(style) {
+    const clonedStyle = document.createElement("div").style;
+    if (!style) {
+        return clonedStyle;
+    }
+    for (const key in style) {
+        const styleKey = style[key];
+        if (!Object.prototype.hasOwnProperty.call(style, key) || (0, TypeUtils_js_1.isNull)(styleKey)) {
+            continue;
+        }
+        const styleValue = style.getPropertyValue?.(styleKey);
+        if (!styleValue) {
+            continue;
+        }
+        const stylePriority = style.getPropertyPriority?.(styleKey);
+        if (!stylePriority) {
+            clonedStyle.setProperty?.(styleKey, styleValue);
+        }
+        else {
+            clonedStyle.setProperty?.(styleKey, styleValue, stylePriority);
+        }
+    }
+    return clonedStyle;
+}
+function computeFullScreenStyle(zIndex) {
+    const fullScreenStyle = document.createElement("div").style, radix = 10, style = {
+        width: "100%",
+        height: "100%",
+        margin: "0",
+        padding: "0",
+        borderWidth: "0",
+        position: "fixed",
+        zIndex: zIndex.toString(radix),
+        "z-index": zIndex.toString(radix),
+        top: "0",
+        left: "0",
+    };
+    for (const key in style) {
+        const value = style[key];
+        fullScreenStyle.setProperty(key, value);
     }
-    throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${engine.version}. Plugins version: ${pluginVersion}`);
+    return fullScreenStyle;
 }
+exports.getFullScreenStyle = memoize(computeFullScreenStyle);

package/esm/Core/Canvas.js

@@ -1,11 +1,11 @@
 import { clear, drawParticle, drawParticlePlugin, drawPlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
-import { deepExtend, getLogger, safeMutationObserver } from "../Utils/Utils.js";
+import { cloneStyle, getFullScreenStyle, getLogger, safeMutationObserver } from "../Utils/Utils.js";
+import { defaultOpacity, defaultTransformValue, generatedAttribute, inverseFactorNumerator, minimumLength, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.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], defaultValue = 1;
+    const newValue = newFactor[key];
     if (newValue !== undefined) {
-        factor[key] = (factor[key] ?? defaultValue) * newValue;
+        factor[key] = (factor[key] ?? defaultTransformValue) * newValue;
     }
 }
 function setStyle(canvas, style, important = false) {
@@ -20,9 +20,27 @@ function setStyle(canvas, style, important = false) {
     if (!elementStyle) {
         return;
     }
+    const keys = new Set();
+    for (const key in elementStyle) {
+        if (!Object.prototype.hasOwnProperty.call(elementStyle, key)) {
+            continue;
+        }
+        keys.add(elementStyle[key]);
+    }
     for (const key in style) {
-        const value = style[key];
-        elementStyle.setProperty(key, value, important ? "important" : "");
+        if (!Object.prototype.hasOwnProperty.call(style, key)) {
+            continue;
+        }
+        keys.add(style[key]);
+    }
+    for (const key of keys) {
+        const value = style.getPropertyValue(key);
+        if (!value) {
+            elementStyle.removeProperty(key);
+        }
+        else {
+            elementStyle.setProperty(key, value, important ? "important" : "");
+        }
     }
 }
 export class Canvas {
@@ -111,14 +129,13 @@ export class Canvas {
                 return;
             }
             if (this._fullScreen) {
-                this._originalStyle = deepExtend({}, element.style);
                 this._setFullScreenStyle();
             }
             else {
                 this._resetOriginalStyle();
             }
             for (const key in options.style) {
-                if (!key || !options.style) {
+                if (!key || !options.style || !Object.prototype.hasOwnProperty.call(options.style, key)) {
                     continue;
                 }
                 const value = options.style[key];
@@ -133,7 +150,7 @@ export class Canvas {
             if (!trail.enable) {
                 return;
             }
-            const factorNumerator = 1, opacity = factorNumerator / trail.length;
+            const opacity = inverseFactorNumerator / trail.length;
             if (trailFill.color) {
                 const fillColor = rangeColorToRgb(this._engine, trailFill.color);
                 if (!fillColor) {
@@ -189,10 +206,10 @@ export class Canvas {
         };
         this._resetOriginalStyle = () => {
             const element = this.element, originalStyle = this._originalStyle;
-            if (!(element && originalStyle)) {
+            if (!element || !originalStyle) {
                 return;
             }
-            setStyle(element, originalStyle);
+            setStyle(element, originalStyle, true);
         };
         this._safeMutationObserver = callback => {
             if (!this._mutationObserver) {
@@ -205,16 +222,7 @@ export class Canvas {
             if (!element) {
                 return;
             }
-            const radix = 10, zIndex = this.container.actualOptions.fullScreen.zIndex.toString(radix);
-            setStyle(element, {
-                position: "fixed",
-                "z-index": zIndex,
-                zIndex: zIndex,
-                top: "0",
-                left: "0",
-                width: "100%",
-                height: "100%",
-            }, true);
+            setStyle(element, getFullScreenStyle(this.container.actualOptions.fullScreen.zIndex), true);
         };
         this._engine = engine;
         this._standardSize = {
@@ -237,7 +245,7 @@ export class Canvas {
         return this.container.actualOptions.fullScreen.enable;
     }
     clear() {
-        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill, minimumLength = 0;
+        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill;
         if (options.backgroundMask.enable) {
             this.paint();
         }
@@ -260,6 +268,7 @@ export class Canvas {
         if (this._generated) {
             const element = this.element;
             element?.remove();
+            this.element = undefined;
         }
         else {
             this._resetOriginalStyle();
@@ -287,7 +296,7 @@ export class Canvas {
         if (particle.spawning || particle.destroyed) {
             return;
         }
-        const radius = particle.getRadius(), minimumSize = 0;
+        const radius = particle.getRadius();
         if (radius <= minimumSize) {
             return;
         }
@@ -303,7 +312,7 @@ export class Canvas {
             return;
         }
         this.draw((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 = {
+            const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
                 fill: fColor ? getStyleFromHsl(fColor, zOpacity) : undefined,
             };
             colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill;
@@ -413,7 +422,7 @@ export class Canvas {
                 : this._generated;
         this.element = canvas;
         this.element.ariaHidden = "true";
-        this._originalStyle = deepExtend({}, this.element.style);
+        this._originalStyle = cloneStyle(this.element.style);
         const standardSize = this._standardSize;
         standardSize.height = canvas.offsetHeight;
         standardSize.width = canvas.offsetWidth;
@@ -421,14 +430,15 @@ export class Canvas {
         canvas.height = retinaSize.height = standardSize.height * pxRatio;
         canvas.width = retinaSize.width = standardSize.width * pxRatio;
         this._context = this.element.getContext("2d");
+        this._safeMutationObserver(obs => obs.disconnect());
+        this.container.retina.init();
+        this.initBackground();
         this._safeMutationObserver(obs => {
             if (!this.element || !(this.element instanceof Node)) {
                 return;
             }
             obs.observe(this.element, { attributes: true });
         });
-        this.container.retina.init();
-        this.initBackground();
     }
     paint() {
         const options = this.container.actualOptions;

package/esm/Core/Container.js

@@ -1,5 +1,5 @@
 import { animate, cancelAnimation, getRangeValue } from "../Utils/NumberUtils.js";
-import { errorPrefix, millisecondsToSeconds } from "./Utils/Constants.js";
+import { clickRadius, defaultFps, defaultFpsLimit, errorPrefix, millisecondsToSeconds, minCoordinate, minFpsLimit, removeDeleteCount, removeMinIndex, touchEndLengthOffset, } from "./Utils/Constants.js";
 import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
@@ -11,7 +11,6 @@ import { loadOptions } from "../Utils/OptionsUtils.js";
 function guardCheck(container) {
     return container && !container.destroyed;
 }
-const defaultFps = 60;
 function initDelta(value, fpsLimit = defaultFps, smooth = false) {
     return {
         value,
@@ -139,8 +138,8 @@ export class Container {
             const mouseEvent = e, pos = {
                 x: mouseEvent.offsetX || mouseEvent.clientX,
                 y: mouseEvent.offsetY || mouseEvent.clientY,
-            }, radius = 1;
-            clickOrTouchHandler(e, pos, radius);
+            };
+            clickOrTouchHandler(e, pos, clickRadius);
         }, touchStartHandler = () => {
             if (!guardCheck(this)) {
                 return;
@@ -157,15 +156,15 @@ export class Container {
                 return;
             }
             if (touched && !touchMoved) {
-                const touchEvent = e, lengthOffset = 1;
-                let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];
+                const touchEvent = e;
+                let lastTouch = touchEvent.touches[touchEvent.touches.length - touchEndLengthOffset];
                 if (!lastTouch) {
-                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];
+                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - touchEndLengthOffset];
                     if (!lastTouch) {
                         return;
                     }
                 }
-                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, minCoordinate = 0, pos = {
+                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
                     x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
                     y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate),
                 };
@@ -235,10 +234,9 @@ export class Container {
         this._engine.clearPlugins(this);
         this.destroyed = true;
         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);
+            const mainArr = this._engine.items, idx = mainArr.findIndex(t => t === this);
+            if (idx >= removeMinIndex) {
+                mainArr.splice(idx, removeDeleteCount);
             }
         }
         this._engine.dispatchEvent(EventType.containerDestroyed, { container: this });
@@ -314,7 +312,6 @@ export class Container {
         this._duration = getRangeValue(duration) * millisecondsToSeconds;
         this._delay = getRangeValue(delay) * millisecondsToSeconds;
         this._lifeTime = 0;
-        const defaultFpsLimit = 120, minFpsLimit = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
         this._smooth = smooth;
         for (const drawer of this.effectDrawers.values()) {