@tsparticles/engine 3.7.0 → 3.8.0

package/umd/Core/Canvas.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/CanvasUtils.js", "../Utils/Utils.js", "../Utils/ColorUtils.js", "./Utils/Constants.js"], factory);
+        define(["require", "exports", "../Utils/CanvasUtils.js", "../Utils/Utils.js", "./Utils/Constants.js", "../Utils/ColorUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,12 +12,12 @@
     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) {
@@ -32,9 +32,27 @@
         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 {
@@ -123,14 +141,13 @@
                     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];
@@ -145,7 +162,7 @@
                 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) {
@@ -201,10 +218,10 @@
             };
             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) {
@@ -217,16 +234,7 @@
                 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 = {
@@ -249,11 +257,11 @@
             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));
                 }
@@ -272,6 +280,7 @@
             if (this._generated) {
                 const element = this.element;
                 element?.remove();
+                this.element = undefined;
             }
             else {
                 this._resetOriginalStyle();
@@ -299,8 +308,8 @@
             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;
@@ -315,7 +324,7 @@
                 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;
@@ -425,23 +434,23 @@
                     : 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;
-            const pxRatio = this.container.retina.pixelRatio;
-            const retinaSize = this.size;
-            retinaSize.height = standardSize.height * pxRatio;
-            retinaSize.width = standardSize.width * pxRatio;
+            const pxRatio = this.container.retina.pixelRatio, retinaSize = this.size;
+            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;
@@ -470,16 +479,22 @@
             const container = this.container, currentSize = container.canvas._standardSize, newSize = {
                 width: this.element.offsetWidth,
                 height: this.element.offsetHeight,
+            }, pxRatio = container.retina.pixelRatio, retinaSize = {
+                width: newSize.width * pxRatio,
+                height: newSize.height * pxRatio,
             };
-            if (newSize.height === currentSize.height && newSize.width === currentSize.width) {
+            if (newSize.height === currentSize.height &&
+                newSize.width === currentSize.width &&
+                retinaSize.height === this.element.height &&
+                retinaSize.width === this.element.width) {
                 return false;
             }
-            const oldSize = { ...currentSize }, pxRatio = container.retina.pixelRatio;
+            const oldSize = { ...currentSize };
             currentSize.height = newSize.height;
             currentSize.width = newSize.width;
-            const retinaSize = this.size;
-            this.element.width = retinaSize.width = currentSize.width * pxRatio;
-            this.element.height = retinaSize.height = currentSize.height * pxRatio;
+            const canvasSize = this.size;
+            this.element.width = canvasSize.width = retinaSize.width;
+            this.element.height = canvasSize.height = retinaSize.height;
             if (this.container.started) {
                 container.particles.setResizeFactor({
                     width: currentSize.width / oldSize.width,

package/umd/Core/Container.js

@@ -23,11 +23,10 @@
     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) {
@@ -151,8 +150,8 @@
                 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;
@@ -169,17 +168,17 @@
                     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));
                 }
@@ -247,10 +246,9 @@
             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 });
@@ -326,8 +324,7 @@
             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/umd/Core/Engine.js

@@ -36,24 +36,23 @@
         (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);
             }
         }
@@ -72,7 +71,7 @@
         }
         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;
     };
@@ -109,7 +108,7 @@
             return this._domArray;
         }
         get version() {
-            return "3.7.0";
+            return "3.8.0";
         }
         async addColorManager(manager, refresh = true) {
             this.colorManagers.set(manager.key, manager);
@@ -177,6 +176,12 @@
             }
             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);
@@ -242,17 +247,16 @@
         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);
                 }

package/umd/Core/Particle.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Vectors.js", "../Utils/NumberUtils.js", "../Utils/Utils.js", "./Utils/Constants.js", "../Utils/ColorUtils.js", "../Enums/Types/EventType.js", "../Options/Classes/Interactivity/Interactivity.js", "../Enums/Directions/MoveDirection.js", "../Enums/Modes/OutMode.js", "../Enums/Types/ParticleOutType.js", "../Enums/Modes/PixelMode.js", "../Utils/CanvasUtils.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "./Utils/Vectors.js", "../Utils/NumberUtils.js", "./Utils/Constants.js", "../Utils/Utils.js", "../Utils/ColorUtils.js", "../Enums/Types/EventType.js", "../Options/Classes/Interactivity/Interactivity.js", "../Enums/Directions/MoveDirection.js", "../Enums/Modes/OutMode.js", "../Enums/Types/ParticleOutType.js", "../Enums/Modes/PixelMode.js", "../Utils/CanvasUtils.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,8 +12,8 @@
     exports.Particle = void 0;
     const Vectors_js_1 = require("./Utils/Vectors.js");
     const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
-    const Utils_js_1 = require("../Utils/Utils.js");
     const Constants_js_1 = require("./Utils/Constants.js");
+    const Utils_js_1 = require("../Utils/Utils.js");
     const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const Interactivity_js_1 = require("../Options/Classes/Interactivity/Interactivity.js");
@@ -23,7 +23,6 @@
     const PixelMode_js_1 = require("../Enums/Modes/PixelMode.js");
     const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-    const defaultRetryCount = 0, double = 2, half = 0.5, squareExp = 2, randomString = "random";
     function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
         const effectData = effectOptions.options[effect];
         if (!effectData) {
@@ -48,7 +47,7 @@
         if (!(0, Utils_js_1.isInArray)(data.outMode, data.checkModes)) {
             return;
         }
-        const diameter = data.radius * double;
+        const diameter = data.radius * Constants_js_1.double;
         if (data.coord > data.maxCoord - diameter) {
             data.setCb(-data.radius);
         }
@@ -59,7 +58,7 @@
     class Particle {
         constructor(engine, container) {
             this.container = container;
-            this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
+            this._calcPosition = (container, position, zIndex, tryCount = Constants_js_1.defaultRetryCount) => {
                 for (const plugin of container.plugins.values()) {
                     const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
                     if (pluginPos) {
@@ -93,8 +92,7 @@
                 fixVertical(outModes.top ?? outModes.default);
                 fixVertical(outModes.bottom ?? outModes.default);
                 if (this._checkOverlap(pos, tryCount)) {
-                    const increment = 1;
-                    return this._calcPosition(container, undefined, zIndex, tryCount + increment);
+                    return this._calcPosition(container, undefined, zIndex, tryCount + Constants_js_1.tryCountIncrement);
                 }
                 return pos;
             };
@@ -104,8 +102,8 @@
                     return res;
                 }
                 const rad = (0, NumberUtils_js_1.degToRad)((0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.value)), radOffset = (0, NumberUtils_js_1.degToRad)((0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.offset)), range = {
-                    left: radOffset - rad * half,
-                    right: radOffset + rad * half,
+                    left: radOffset - rad * Constants_js_1.half,
+                    right: radOffset + rad * Constants_js_1.half,
                 };
                 if (!moveOptions.straight) {
                     res.angle += (0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(range.left, range.right));
@@ -115,7 +113,7 @@
                 }
                 return res;
             };
-            this._checkOverlap = (pos, tryCount = defaultRetryCount) => {
+            this._checkOverlap = (pos, tryCount = Constants_js_1.defaultRetryCount) => {
                 const collisionsOptions = this.options.collisions, radius = this.getRadius();
                 if (!collisionsOptions.enable) {
                     return false;
@@ -124,8 +122,8 @@
                 if (overlapOptions.enable) {
                     return false;
                 }
-                const retries = overlapOptions.retries, minRetries = 0;
-                if (retries >= minRetries && tryCount > retries) {
+                const retries = overlapOptions.retries;
+                if (retries >= Constants_js_1.minRetries && tryCount > retries) {
                     throw new Error(`${Constants_js_1.errorPrefix} particle is overlapping and can't be placed`);
                 }
                 return !!this.container.particles.find(particle => (0, NumberUtils_js_1.getDistance)(pos, particle.position) < radius + particle.getRadius());
@@ -134,7 +132,7 @@
                 if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                     return color;
                 }
-                const rollFactor = 1, none = 0, backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor, backSum = this.roll.horizontal ? Math.PI * half : none, rolled = Math.floor(((this.roll.angle ?? none) + backSum) / (Math.PI / backFactor)) % double;
+                const backFactor = this.roll.horizontal && this.roll.vertical ? Constants_js_1.double * Constants_js_1.rollFactor : Constants_js_1.rollFactor, backSum = this.roll.horizontal ? Math.PI * Constants_js_1.half : Constants_js_1.none, rolled = Math.floor(((this.roll.angle ?? Constants_js_1.none) + backSum) / (Math.PI / backFactor)) % Constants_js_1.double;
                 if (!rolled) {
                     return color;
                 }
@@ -147,13 +145,13 @@
                 return color;
             };
             this._initPosition = position => {
-                const container = this.container, zIndexValue = (0, NumberUtils_js_1.getRangeValue)(this.options.zIndex.value), minZ = 0;
-                this.position = this._calcPosition(container, position, (0, NumberUtils_js_1.clamp)(zIndexValue, minZ, container.zLayers));
+                const container = this.container, zIndexValue = (0, NumberUtils_js_1.getRangeValue)(this.options.zIndex.value);
+                this.position = this._calcPosition(container, position, (0, NumberUtils_js_1.clamp)(zIndexValue, Constants_js_1.minZ, container.zLayers));
                 this.initialPosition = this.position.copy();
-                const canvasSize = container.canvas.size, defaultRadius = 0;
+                const canvasSize = container.canvas.size;
                 this.moveCenter = {
                     ...(0, Utils_js_1.getPosition)(this.options.move.center, canvasSize),
-                    radius: this.options.move.center.radius ?? defaultRadius,
+                    radius: this.options.move.center.radius ?? Constants_js_1.defaultRadius,
                     mode: this.options.move.center.mode ?? PixelMode_js_1.PixelMode.percent,
                 };
                 this.direction = (0, NumberUtils_js_1.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);
@@ -203,7 +201,7 @@
             return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
         }
         getMass() {
-            return this.getRadius() ** squareExp * Math.PI * half;
+            return this.getRadius() ** Constants_js_1.squareExp * Math.PI * Constants_js_1.half;
         }
         getPosition() {
             return {
@@ -258,11 +256,11 @@
                     }
                 }
             }
-            if (this.effect === randomString) {
+            if (this.effect === Constants_js_1.randomColorValue) {
                 const availableEffects = [...this.container.effectDrawers.keys()];
                 this.effect = availableEffects[Math.floor(Math.random() * availableEffects.length)];
             }
-            if (this.shape === randomString) {
+            if (this.shape === Constants_js_1.randomColorValue) {
                 const availableShapes = [...this.container.shapeDrawers.keys()];
                 this.shape = availableShapes[Math.floor(Math.random() * availableShapes.length)];
             }
@@ -306,8 +304,7 @@
             this._initPosition(position);
             this.initialVelocity = this._calculateVelocity();
             this.velocity = this.initialVelocity.copy();
-            const decayOffset = 1;
-            this.moveDecay = decayOffset - (0, NumberUtils_js_1.getRangeValue)(this.options.move.decay);
+            this.moveDecay = Constants_js_1.decayOffset - (0, NumberUtils_js_1.getRangeValue)(this.options.move.decay);
             const particles = container.particles;
             particles.setLastZIndex(this.position.z);
             this.zIndexFactor = this.position.z / container.zLayers;

package/umd/Core/Particles.js

@@ -4,12 +4,13 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/Utils.js", "../Enums/Types/EventType.js", "./Utils/InteractionManager.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/Point.js", "./Utils/QuadTree.js", "./Utils/Ranges.js", "./Utils/Constants.js"], factory);
+        define(["require", "exports", "./Utils/Constants.js", "../Utils/Utils.js", "../Enums/Types/EventType.js", "./Utils/InteractionManager.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/Point.js", "./Utils/QuadTree.js", "./Utils/Ranges.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Particles = void 0;
+    const Constants_js_1 = require("./Utils/Constants.js");
     const Utils_js_1 = require("../Utils/Utils.js");
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const InteractionManager_js_1 = require("./Utils/InteractionManager.js");
@@ -18,11 +19,9 @@
     const Point_js_1 = require("./Utils/Point.js");
     const QuadTree_js_1 = require("./Utils/QuadTree.js");
     const Ranges_js_1 = require("./Utils/Ranges.js");
-    const Constants_js_1 = require("./Utils/Constants.js");
-    const qTreeCapacity = 4, squareExp = 2, defaultRemoveQuantity = 1;
     const qTreeRectangle = (canvasSize) => {
-        const { height, width } = canvasSize, posOffset = -0.25, sizeFactor = 1.5;
-        return new Ranges_js_1.Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
+        const { height, width } = canvasSize;
+        return new Ranges_js_1.Rectangle(Constants_js_1.posOffset * width, Constants_js_1.posOffset * height, Constants_js_1.sizeFactor * width, Constants_js_1.sizeFactor * height);
     };
     class Particles {
         constructor(engine, container) {
@@ -40,7 +39,7 @@
                     }
                     return;
                 }
-                const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, minLimit = 0, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
+                const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > Constants_js_1.minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
                 if (group === undefined) {
                     this._limit = numberOptions.limit.value * densityFactor;
                 }
@@ -55,12 +54,12 @@
                 }
             };
             this._initDensityFactor = densityOptions => {
-                const container = this._container, defaultFactor = 1;
+                const container = this._container;
                 if (!container.canvas.element || !densityOptions.enable) {
-                    return defaultFactor;
+                    return Constants_js_1.defaultDensityFactor;
                 }
                 const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-                return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
+                return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** Constants_js_1.squareExp);
             };
             this._pushParticle = (position, overrideOptions, group, initializer) => {
                 try {
@@ -96,9 +95,9 @@
                 if (!particle || particle.group !== group) {
                     return false;
                 }
-                const zIdx = this._zArray.indexOf(particle), deleteCount = 1;
-                this._array.splice(index, deleteCount);
-                this._zArray.splice(zIdx, deleteCount);
+                const zIdx = this._zArray.indexOf(particle);
+                this._array.splice(index, Constants_js_1.deleteCount);
+                this._zArray.splice(zIdx, Constants_js_1.deleteCount);
                 particle.destroy(override);
                 this._engine.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
                     container: this._container,
@@ -122,7 +121,7 @@
             this._interactionManager = new InteractionManager_js_1.InteractionManager(engine, container);
             this._pluginsInitialized = false;
             const canvasSize = container.canvas.size;
-            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
+            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), Constants_js_1.qTreeCapacity);
             this.movers = [];
             this.updaters = [];
         }
@@ -134,12 +133,12 @@
             options.manualParticles.forEach(p => this.addParticle(p.position ? (0, Utils_js_1.getPosition)(p.position, container.canvas.size) : undefined, p.options));
         }
         addParticle(position, overrideOptions, group, initializer) {
-            const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count, minLimit = 0;
-            if (limit > minLimit) {
+            const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count;
+            if (limit > Constants_js_1.minLimit) {
                 switch (limitMode) {
                     case LimitMode_js_1.LimitMode.delete: {
-                        const countOffset = 1, minCount = 0, countToRemove = currentCount + countOffset - limit;
-                        if (countToRemove > minCount) {
+                        const countToRemove = currentCount + Constants_js_1.countOffset - limit;
+                        if (countToRemove > Constants_js_1.minCount) {
                             this.removeQuantity(countToRemove);
                         }
                         break;
@@ -238,9 +237,8 @@
         remove(particle, group, override) {
             this.removeAt(this._array.indexOf(particle), undefined, group, override);
         }
-        removeAt(index, quantity = defaultRemoveQuantity, group, override) {
-            const minIndex = 0;
-            if (index < minIndex || index > this.count) {
+        removeAt(index, quantity = Constants_js_1.defaultRemoveQuantity, group, override) {
+            if (index < Constants_js_1.minIndex || index > this.count) {
                 return;
             }
             let deleted = 0;
@@ -252,13 +250,12 @@
             }
         }
         removeQuantity(quantity, group) {
-            const defaultIndex = 0;
-            this.removeAt(defaultIndex, quantity, group);
+            this.removeAt(Constants_js_1.minIndex, quantity, group);
         }
         setDensity() {
-            const options = this._container.actualOptions, groups = options.particles.groups, manualCount = 0;
+            const options = this._container.actualOptions, groups = options.particles.groups;
             for (const group in groups) {
-                this._applyDensity(groups[group], manualCount, group);
+                this._applyDensity(groups[group], Constants_js_1.manualCount, group);
             }
             this._applyDensity(options.particles, options.manualParticles.length);
         }
@@ -271,7 +268,7 @@
         }
         update(delta) {
             const container = this._container, particlesToDelete = new Set();
-            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
+            this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), Constants_js_1.qTreeCapacity);
             for (const pathGenerator of container.pathGenerators.values()) {
                 pathGenerator.update();
             }
@@ -332,8 +329,7 @@
             if (this._needsSort) {
                 const zArray = this._zArray;
                 zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-                const lengthOffset = 1;
-                this._lastZIndex = zArray[zArray.length - lengthOffset].position.z;
+                this._lastZIndex = zArray[zArray.length - Constants_js_1.lengthOffset].position.z;
                 this._needsSort = false;
             }
         }