@tsparticles/engine 3.7.1 → 3.8.1

package/browser/Options/Classes/ManualParticle.js

@@ -1,7 +1,7 @@
 import { PixelMode } from "../../Enums/Modes/PixelMode.js";
 import { deepExtend } from "../../Utils/Utils.js";
 import { isNull } from "../../Utils/TypeUtils.js";
-const defaultPosition = 50;
+import { manualDefaultPosition } from "../../Core/Utils/Constants.js";
 export class ManualParticle {
     load(data) {
         if (isNull(data)) {
@@ -9,8 +9,8 @@ export class ManualParticle {
         }
         if (data.position) {
             this.position = {
-                x: data.position.x ?? defaultPosition,
-                y: data.position.y ?? defaultPosition,
+                x: data.position.x ?? manualDefaultPosition,
+                y: data.position.y ?? manualDefaultPosition,
                 mode: data.position.mode ?? PixelMode.percent,
             };
         }

package/browser/Utils/CanvasUtils.js

@@ -1,11 +1,6 @@
+import { defaultAngle, defaultTransform, identity, lFactor, minStrokeWidth, originPoint, } from "../Core/Utils/Constants.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
 import { getStyleFromRgb } from "./ColorUtils.js";
-const origin = { x: 0, y: 0 }, defaultTransform = {
-    a: 1,
-    b: 0,
-    c: 0,
-    d: 1,
-};
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -14,24 +9,24 @@ export function drawLine(context, begin, end) {
 }
 export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
-    context.fillRect(origin.x, origin.y, dimension.width, dimension.height);
+    context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function paintImage(context, dimension, image, opacity) {
     if (!image) {
         return;
     }
     context.globalAlpha = opacity;
-    context.drawImage(image, origin.x, origin.y, dimension.width, dimension.height);
+    context.drawImage(image, originPoint.x, originPoint.y, dimension.width, dimension.height);
     context.globalAlpha = 1;
 }
 export function clear(context, dimension) {
-    context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
+    context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
+    const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
-    }, rotating = !!angle, identity = 1, transformData = {
+    }, rotating = !!angle, transformData = {
         a: rotateData.cos * (transform.a ?? defaultTransform.a),
         b: rotating ? rotateData.sin * (transform.b ?? identity) : (transform.b ?? defaultTransform.b),
         c: rotating ? -rotateData.sin * (transform.c ?? identity) : (transform.c ?? defaultTransform.c),
@@ -51,7 +46,7 @@ export function drawParticle(data) {
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const minStrokeWidth = 0, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
+    const strokeWidth = particle.strokeWidth ?? minStrokeWidth;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
@@ -92,7 +87,7 @@ export function drawEffect(data) {
     });
 }
 export function drawShape(data) {
-    const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
+    const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -152,7 +147,6 @@ export function drawParticlePlugin(context, plugin, particle, delta) {
     plugin.drawParticle(context, particle, delta);
 }
 export function alterHsl(color, type, value) {
-    const lFactor = 1;
     return {
         h: color.h,
         s: color.s,

package/browser/Utils/ColorUtils.js

@@ -1,9 +1,8 @@
 import { clamp, getRandom, getRangeMax, getRangeMin, getRangeValue, mix, randomInRange, setRangeValue, } from "./NumberUtils.js";
+import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbFactor, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
 import { isArray, isString } from "./TypeUtils.js";
-import { millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
-const randomColorValue = "random", midColorValue = "mid";
 function stringToRgba(engine, input) {
     if (!input) {
         return;
@@ -63,7 +62,7 @@ export function rangeColorToHsl(engine, color, index, useIndex = true) {
     return rgb ? rgbToHsl(rgb) : undefined;
 }
 export 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 = {
+    const 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,
@@ -93,13 +92,13 @@ export function stringToRgb(engine, input) {
     return stringToRgba(engine, input);
 }
 export 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;
+    const 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;
     if (s === sMin) {
         const grayscaleValue = Math.round(lNormalized * 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++;
         }
@@ -117,9 +116,9 @@ export function hslToRgb(hsl) {
             return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
         }
         return temp1;
-    }, sNormalizedOffset = 1, temp1 = lNormalized < half
+    }, 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));
+        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, 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));
     return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
 }
 export function hslaToRgba(hsla) {
@@ -132,19 +131,17 @@ export function hslaToRgba(hsla) {
     };
 }
 export function getRandomRgbColor(min) {
-    const defaultMin = 0, fixedMin = min ?? defaultMin, rgbMax = 256;
+    const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity;
     return {
-        b: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
-        g: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
-        r: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
+        b: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
+        g: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
+        r: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
     };
 }
 export function getStyleFromRgb(color, opacity) {
-    const defaultOpacity = 1;
     return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? defaultOpacity})`;
 }
 export function getStyleFromHsl(color, opacity) {
-    const defaultOpacity = 1;
     return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? defaultOpacity})`;
 }
 export function colorMix(color1, color2, size1, size2) {
@@ -236,7 +233,6 @@ export 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 = (getRangeValue(colorAnimation.speed) / percentDenominator) * reduceFactor;
         colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
@@ -308,8 +304,7 @@ export 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/browser/Utils/EventDispatcher.js

@@ -1,3 +1,4 @@
+import { deleteCount, minIndex } from "../Core/Utils/Constants.js";
 export class EventDispatcher {
     constructor() {
         this._listeners = new Map();
@@ -31,11 +32,10 @@ export class EventDispatcher {
         if (!arr) {
             return;
         }
-        const length = arr.length, idx = arr.indexOf(listener), minIndex = 0;
+        const length = arr.length, idx = arr.indexOf(listener);
         if (idx < minIndex) {
             return;
         }
-        const deleteCount = 1;
         if (length === deleteCount) {
             this._listeners.delete(type);
         }

package/browser/Utils/NumberUtils.js

@@ -1,12 +1,12 @@
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
+import { double, doublePI, empty, half, percentDenominator, quarter, threeQuarter } from "../Core/Utils/Constants.js";
 import { Vector } from "../Core/Utils/Vectors.js";
 import { isNumber } from "./TypeUtils.js";
-import { percentDenominator } from "../Core/Utils/Constants.js";
 let _random = Math.random;
 const _animationLoop = {
     nextFrame: (cb) => requestAnimationFrame(cb),
     cancel: (idx) => cancelAnimationFrame(idx),
-}, double = 2, doublePI = Math.PI * double;
+};
 export function setRandom(rnd = Math.random) {
     _random = rnd;
 }
@@ -74,7 +74,6 @@ export function getParticleDirectionAngle(direction, position, center) {
     if (isNumber(direction)) {
         return degToRad(direction);
     }
-    const empty = 0, half = 0.5, quarter = 0.25, threeQuarter = half + quarter;
     switch (direction) {
         case MoveDirection.top:
             return -Math.PI * half;
@@ -107,7 +106,6 @@ export function getParticleBaseVelocity(direction) {
     return baseVelocity;
 }
 export function collisionVelocity(v1, v2, m1, m2) {
-    const double = 2;
     return Vector.create((v1.x * (m1 - m2)) / (m1 + m2) + (v2.x * double * m2) / (m1 + m2), v1.y);
 }
 export function calcPositionFromSize(data) {

package/browser/Utils/Utils.js

@@ -1,6 +1,6 @@
 import { clamp, collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRange, } from "./NumberUtils.js";
-import { halfRandom, millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
-import { isArray, isObject } from "./TypeUtils.js";
+import { half, millisecondsToSeconds, minVelocity, percentDenominator } from "../Core/Utils/Constants.js";
+import { isArray, isNull, isObject } from "./TypeUtils.js";
 import { AnimationMode } from "../Enums/Modes/AnimationMode.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { DestroyType } from "../Enums/Types/DestroyType.js";
@@ -27,8 +27,20 @@ export function setLogger(logger) {
 export 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 ||
@@ -284,7 +296,7 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
                 res.status = AnimationStatus.decreasing;
                 break;
             case AnimationMode.random:
-                res.status = getRandom() >= halfRandom ? AnimationStatus.increasing : AnimationStatus.decreasing;
+                res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 break;
         }
         const autoStatus = animationOptions.mode === AnimationMode.auto;
@@ -305,7 +317,7 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
             default:
                 res.value = randomInRange(res);
                 if (autoStatus) {
-                    res.status = getRandom() >= halfRandom ? AnimationStatus.increasing : AnimationStatus.decreasing;
+                    res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 }
                 break;
         }
@@ -414,9 +426,47 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
         data.value = clamp(data.value, minValue, maxValue);
     }
 }
-export function assertValidVersion(engine, pluginVersion) {
-    if (engine.version === pluginVersion) {
-        return;
+export 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) || 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;
 }
+export const getFullScreenStyle = memoize(computeFullScreenStyle);

package/cjs/Core/Canvas.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
 const Utils_js_1 = require("../Utils/Utils.js");
-const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
 const Constants_js_1 = require("./Utils/Constants.js");
+const ColorUtils_js_1 = require("../Utils/ColorUtils.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] ?? Constants_js_1.defaultTransformValue) * newValue;
     }
 }
 function setStyle(canvas, style, important = false) {
@@ -23,9 +23,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" : "");
+        }
     }
 }
 class Canvas {
@@ -114,14 +132,13 @@ class Canvas {
                 return;
             }
             if (this._fullScreen) {
-                this._originalStyle = (0, Utils_js_1.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];
@@ -136,7 +153,7 @@ class Canvas {
             if (!trail.enable) {
                 return;
             }
-            const factorNumerator = 1, opacity = factorNumerator / trail.length;
+            const opacity = Constants_js_1.inverseFactorNumerator / trail.length;
             if (trailFill.color) {
                 const fillColor = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, trailFill.color);
                 if (!fillColor) {
@@ -192,10 +209,10 @@ 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) {
@@ -208,16 +225,7 @@ 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, (0, Utils_js_1.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);
         };
         this._engine = engine;
         this._standardSize = {
@@ -240,11 +248,11 @@ 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();
         }
-        else if (trail.enable && trail.length > minimumLength && trailFill) {
+        else if (trail.enable && trail.length > Constants_js_1.minimumLength && trailFill) {
             if (trailFill.color) {
                 this._paintBase((0, ColorUtils_js_1.getStyleFromRgb)(trailFill.color, trailFill.opacity));
             }
@@ -263,6 +271,7 @@ class Canvas {
         if (this._generated) {
             const element = this.element;
             element?.remove();
+            this.element = undefined;
         }
         else {
             this._resetOriginalStyle();
@@ -290,8 +299,8 @@ class Canvas {
         if (particle.spawning || particle.destroyed) {
             return;
         }
-        const radius = particle.getRadius(), minimumSize = 0;
-        if (radius <= minimumSize) {
+        const radius = particle.getRadius();
+        if (radius <= Constants_js_1.minimumSize) {
             return;
         }
         const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
@@ -306,7 +315,7 @@ 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 = Constants_js_1.zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? Constants_js_1.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;
@@ -416,7 +425,7 @@ class Canvas {
                 : this._generated;
         this.element = canvas;
         this.element.ariaHidden = "true";
-        this._originalStyle = (0, Utils_js_1.deepExtend)({}, this.element.style);
+        this._originalStyle = (0, Utils_js_1.cloneStyle)(this.element.style);
         const standardSize = this._standardSize;
         standardSize.height = canvas.offsetHeight;
         standardSize.width = canvas.offsetWidth;
@@ -424,14 +433,15 @@ 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/cjs/Core/Container.js

@@ -14,11 +14,10 @@ const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
 function guardCheck(container) {
     return container && !container.destroyed;
 }
-const defaultFps = 60;
-function initDelta(value, fpsLimit = defaultFps, smooth = false) {
+function initDelta(value, fpsLimit = Constants_js_1.defaultFps, smooth = false) {
     return {
         value,
-        factor: smooth ? defaultFps / fpsLimit : (defaultFps * value) / Constants_js_1.millisecondsToSeconds,
+        factor: smooth ? Constants_js_1.defaultFps / fpsLimit : (Constants_js_1.defaultFps * value) / Constants_js_1.millisecondsToSeconds,
     };
 }
 function loadContainerOptions(engine, container, ...sourceOptionsArr) {
@@ -142,8 +141,8 @@ 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, Constants_js_1.clickRadius);
         }, touchStartHandler = () => {
             if (!guardCheck(this)) {
                 return;
@@ -160,17 +159,17 @@ 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 - Constants_js_1.touchEndLengthOffset];
                 if (!lastTouch) {
-                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];
+                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - Constants_js_1.touchEndLengthOffset];
                     if (!lastTouch) {
                         return;
                     }
                 }
-                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),
+                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
+                    x: lastTouch.clientX - (canvasRect ? canvasRect.left : Constants_js_1.minCoordinate),
+                    y: lastTouch.clientY - (canvasRect ? canvasRect.top : Constants_js_1.minCoordinate),
                 };
                 clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
             }
@@ -238,10 +237,9 @@ 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 >= Constants_js_1.removeMinIndex) {
+                mainArr.splice(idx, Constants_js_1.removeDeleteCount);
             }
         }
         this._engine.dispatchEvent(EventType_js_1.EventType.containerDestroyed, { container: this });
@@ -317,8 +315,7 @@ class Container {
         this._duration = (0, NumberUtils_js_1.getRangeValue)(duration) * Constants_js_1.millisecondsToSeconds;
         this._delay = (0, NumberUtils_js_1.getRangeValue)(delay) * Constants_js_1.millisecondsToSeconds;
         this._lifeTime = 0;
-        const defaultFpsLimit = 120, minFpsLimit = 0;
-        this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
+        this.fpsLimit = fpsLimit > Constants_js_1.minFpsLimit ? fpsLimit : Constants_js_1.defaultFpsLimit;
         this._smooth = smooth;
         for (const drawer of this.effectDrawers.values()) {
             await drawer.init?.(this);

package/cjs/Core/Engine.js

@@ -27,24 +27,23 @@ async function getDataFromUrl(data) {
     (0, Utils_js_1.getLogger)().error(`${Constants_js_1.errorPrefix} ${response.status} while retrieving config file`);
     return data.fallback;
 }
-const generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", getCanvasFromContainer = (domContainer) => {
+const getCanvasFromContainer = (domContainer) => {
     let canvasEl;
-    if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
+    if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === Constants_js_1.canvasTag) {
         canvasEl = domContainer;
         if (!canvasEl.dataset[Constants_js_1.generatedAttribute]) {
-            canvasEl.dataset[Constants_js_1.generatedAttribute] = generatedFalse;
+            canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedFalse;
         }
     }
     else {
-        const existingCanvases = domContainer.getElementsByTagName(canvasTag);
+        const existingCanvases = domContainer.getElementsByTagName(Constants_js_1.canvasTag);
         if (existingCanvases.length) {
-            const firstIndex = 0;
-            canvasEl = existingCanvases[firstIndex];
-            canvasEl.dataset[Constants_js_1.generatedAttribute] = generatedFalse;
+            canvasEl = existingCanvases[Constants_js_1.canvasFirstIndex];
+            canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedFalse;
         }
         else {
-            canvasEl = document.createElement(canvasTag);
-            canvasEl.dataset[Constants_js_1.generatedAttribute] = generatedTrue;
+            canvasEl = document.createElement(Constants_js_1.canvasTag);
+            canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedTrue;
             domContainer.appendChild(canvasEl);
         }
     }
@@ -63,7 +62,7 @@ const generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", ge
     }
     domContainer = document.createElement("div");
     domContainer.id = id;
-    domContainer.dataset[Constants_js_1.generatedAttribute] = generatedTrue;
+    domContainer.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedTrue;
     document.body.append(domContainer);
     return domContainer;
 };
@@ -100,7 +99,7 @@ class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.7.1";
+        return "3.8.1";
     }
     async addColorManager(manager, refresh = true) {
         this.colorManagers.set(manager.key, manager);
@@ -168,6 +167,12 @@ class Engine {
         }
         await this.refresh(refresh);
     }
+    checkVersion(pluginVersion) {
+        if (this.version === pluginVersion) {
+            return;
+        }
+        throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${this.version}. Plugin version: ${pluginVersion}`);
+    }
     clearPlugins(container) {
         this.updaters.delete(container);
         this.movers.delete(container);
@@ -233,17 +238,16 @@ class Engine {
     item(index) {
         const { items } = this, item = items[index];
         if (!item || item.destroyed) {
-            const deleteCount = 1;
-            items.splice(index, deleteCount);
+            items.splice(index, Constants_js_1.removeDeleteCount);
             return;
         }
         return item;
     }
     async load(params) {
-        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;
-        const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), minIndex = 0, newItem = new Container_js_1.Container(this, id, currentOptions);
-        if (oldIndex >= minIndex) {
-            const old = this.item(oldIndex), one = 1, none = 0, deleteCount = old ? one : none;
+        const id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0, NumberUtils_js_1.getRandom)() * Constants_js_1.loadRandomFactor)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
+        const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container_js_1.Container(this, id, currentOptions);
+        if (oldIndex >= Constants_js_1.loadMinIndex) {
+            const old = this.item(oldIndex), deleteCount = old ? Constants_js_1.one : Constants_js_1.none;
             if (old && !old.destroyed) {
                 old.destroy(false);
             }