@tsparticles/engine 3.3.0 → 3.4.0

package/esm/Options/Classes/Options.js

@@ -5,17 +5,19 @@ import { FullScreen } from "./FullScreen/FullScreen.js";
 import { Interactivity } from "./Interactivity/Interactivity.js";
 import { ManualParticle } from "./ManualParticle.js";
 import { Responsive } from "./Responsive.js";
+import { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
 import { Theme } from "./Theme/Theme.js";
+import { ThemeMode } from "../../Enums/Modes/ThemeMode.js";
 import { isBoolean } from "../../Utils/TypeUtils.js";
 import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class Options {
     constructor(engine, container) {
-        this._findDefaultTheme = (mode) => {
-            return (this.themes.find((theme) => theme.default.value && theme.default.mode === mode) ??
-                this.themes.find((theme) => theme.default.value && theme.default.mode === "any"));
+        this._findDefaultTheme = mode => {
+            return (this.themes.find(theme => theme.default.value && theme.default.mode === mode) ??
+                this.themes.find(theme => theme.default.value && theme.default.mode === ThemeMode.any));
         };
-        this._importPreset = (preset) => {
+        this._importPreset = preset => {
             this.load(this._engine.getPreset(preset));
         };
         this._engine = engine;
@@ -46,7 +48,7 @@ export class Options {
             return;
         }
         if (data.preset !== undefined) {
-            executeOnSingleOrMultiple(data.preset, (preset) => this._importPreset(preset));
+            executeOnSingleOrMultiple(data.preset, preset => this._importPreset(preset));
         }
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
@@ -94,7 +96,7 @@ export class Options {
         this.backgroundMask.load(data.backgroundMask);
         this.interactivity.load(data.interactivity);
         if (data.manualParticles) {
-            this.manualParticles = data.manualParticles.map((t) => {
+            this.manualParticles = data.manualParticles.map(t => {
                 const tmp = new ManualParticle();
                 tmp.load(t);
                 return tmp;
@@ -124,7 +126,7 @@ export class Options {
         this.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
         if (data.themes !== undefined) {
             for (const theme of data.themes) {
-                const existingTheme = this.themes.find((t) => t.name === theme.name);
+                const existingTheme = this.themes.find(t => t.name === theme.name);
                 if (!existingTheme) {
                     const optTheme = new Theme();
                     optTheme.load(theme);
@@ -135,24 +137,24 @@ export class Options {
                 }
             }
         }
-        this.defaultThemes.dark = this._findDefaultTheme("dark")?.name;
-        this.defaultThemes.light = this._findDefaultTheme("light")?.name;
+        this.defaultThemes.dark = this._findDefaultTheme(ThemeMode.dark)?.name;
+        this.defaultThemes.light = this._findDefaultTheme(ThemeMode.light)?.name;
     }
     setResponsive(width, pxRatio, defaultOptions) {
         this.load(defaultOptions);
-        const responsiveOptions = this.responsive.find((t) => t.mode === "screen" && screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
+        const responsiveOptions = this.responsive.find(t => t.mode === ResponsiveMode.screen && screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
         this.load(responsiveOptions?.options);
         return responsiveOptions?.maxWidth;
     }
     setTheme(name) {
         if (name) {
-            const chosenTheme = this.themes.find((theme) => theme.name === name);
+            const chosenTheme = this.themes.find(theme => theme.name === name);
             if (chosenTheme) {
                 this.load(chosenTheme.options);
             }
         }
         else {
-            const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch && mediaMatch.matches, defaultTheme = this._findDefaultTheme(clientDarkMode ? "dark" : "light");
+            const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch?.matches, defaultTheme = this._findDefaultTheme(clientDarkMode ? ThemeMode.dark : ThemeMode.light);
             if (defaultTheme) {
                 this.load(defaultTheme.options);
             }

package/esm/Options/Classes/Particles/Collisions/Collisions.js

@@ -1,3 +1,4 @@
+import { CollisionMode } from "../../../../Enums/Modes/CollisionMode.js";
 import { CollisionsAbsorb } from "./CollisionsAbsorb.js";
 import { CollisionsOverlap } from "./CollisionsOverlap.js";
 import { ParticlesBounce } from "../Bounce/ParticlesBounce.js";
@@ -8,7 +9,7 @@ export class Collisions {
         this.bounce = new ParticlesBounce();
         this.enable = false;
         this.maxSpeed = 50;
-        this.mode = "bounce";
+        this.mode = CollisionMode.bounce;
         this.overlap = new CollisionsOverlap();
     }
     load(data) {

package/esm/Options/Classes/Particles/Move/Move.js

@@ -1,3 +1,4 @@
+import { MoveDirection } from "../../../../Enums/Directions/MoveDirection.js";
 import { isNumber, isObject } from "../../../../Utils/TypeUtils.js";
 import { MoveAngle } from "./MoveAngle.js";
 import { MoveAttract } from "./MoveAttract.js";
@@ -15,7 +16,7 @@ export class Move {
         this.center = new MoveCenter();
         this.decay = 0;
         this.distance = {};
-        this.direction = "none";
+        this.direction = MoveDirection.none;
         this.drift = 0;
         this.enable = false;
         this.gravity = new MoveGravity();

package/esm/Options/Classes/Particles/Move/MoveCenter.js

@@ -1,8 +1,9 @@
+import { PixelMode } from "../../../../Enums/Modes/PixelMode.js";
 export class MoveCenter {
     constructor() {
         this.x = 50;
         this.y = 50;
-        this.mode = "percent";
+        this.mode = PixelMode.percent;
         this.radius = 0;
     }
     load(data) {

package/esm/Options/Classes/Particles/Move/OutModes.js

@@ -1,6 +1,7 @@
+import { OutMode } from "../../../../Enums/Modes/OutMode.js";
 export class OutModes {
     constructor() {
-        this.default = "out";
+        this.default = OutMode.out;
     }
     load(data) {
         if (!data) {

package/esm/Options/Classes/Particles/Number/ParticlesNumberLimit.js

@@ -1,6 +1,7 @@
+import { LimitMode } from "../../../../Enums/Modes/LimitMode.js";
 export class ParticlesNumberLimit {
     constructor() {
-        this.mode = "delete";
+        this.mode = LimitMode.delete;
         this.value = 0;
     }
     load(data) {

package/esm/Options/Classes/Particles/Opacity/OpacityAnimation.js

@@ -1,8 +1,9 @@
+import { DestroyType } from "../../../../Enums/Types/DestroyType.js";
 import { RangedAnimationOptions } from "../../AnimationOptions.js";
 export class OpacityAnimation extends RangedAnimationOptions {
     constructor() {
         super();
-        this.destroy = "none";
+        this.destroy = DestroyType.none;
         this.speed = 2;
     }
     load(data) {

package/esm/Options/Classes/Particles/ParticlesOptions.js

@@ -65,7 +65,7 @@ export class ParticlesOptions {
         }
         const strokeToLoad = data.stroke;
         if (strokeToLoad) {
-            this.stroke = executeOnSingleOrMultiple(strokeToLoad, (t) => {
+            this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {
                 const tmp = new Stroke();
                 tmp.load(t);
                 return tmp;

package/esm/Options/Classes/Particles/Size/SizeAnimation.js

@@ -1,8 +1,9 @@
+import { DestroyType } from "../../../../Enums/Types/DestroyType.js";
 import { RangedAnimationOptions } from "../../AnimationOptions.js";
 export class SizeAnimation extends RangedAnimationOptions {
     constructor() {
         super();
-        this.destroy = "none";
+        this.destroy = DestroyType.none;
         this.speed = 5;
     }
     load(data) {

package/esm/Options/Classes/Responsive.js

@@ -1,9 +1,10 @@
+import { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
 import { deepExtend } from "../../Utils/Utils.js";
 export class Responsive {
     constructor() {
         this.maxWidth = Infinity;
         this.options = {};
-        this.mode = "canvas";
+        this.mode = ResponsiveMode.canvas;
     }
     load(data) {
         if (!data) {
@@ -13,11 +14,11 @@ export class Responsive {
             this.maxWidth = data.maxWidth;
         }
         if (data.mode !== undefined) {
-            if (data.mode === "screen") {
-                this.mode = "screen";
+            if (data.mode === ResponsiveMode.screen) {
+                this.mode = ResponsiveMode.screen;
             }
             else {
-                this.mode = "canvas";
+                this.mode = ResponsiveMode.canvas;
             }
         }
         if (data.options !== undefined) {

package/esm/Options/Classes/Theme/ThemeDefault.js

@@ -1,7 +1,8 @@
+import { ThemeMode } from "../../../Enums/Modes/ThemeMode.js";
 export class ThemeDefault {
     constructor() {
         this.auto = false;
-        this.mode = "any";
+        this.mode = ThemeMode.any;
         this.value = false;
     }
     load(data) {

package/esm/Types/RangeType.js

@@ -1 +1,5 @@
-export {};
+export var RangeType;
+(function (RangeType) {
+    RangeType["circle"] = "circle";
+    RangeType["rectangle"] = "rectangle";
+})(RangeType || (RangeType = {}));

package/esm/Utils/CanvasUtils.js

@@ -1,5 +1,11 @@
+import { AlterType } from "../Enums/Types/AlterType.js";
 import { getStyleFromRgb } from "./ColorUtils.js";
-const origin = { x: 0, y: 0 };
+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);
@@ -25,11 +31,11 @@ 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 = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
-    }, defaultTransformFactor = 1, transformData = {
-        a: rotateData.cos * (transform.a ?? defaultTransformFactor),
-        b: rotateData.sin * (transform.b ?? defaultTransformFactor),
-        c: -rotateData.sin * (transform.c ?? defaultTransformFactor),
-        d: rotateData.cos * (transform.d ?? defaultTransformFactor),
+    }, rotating = !!angle, identity = 1, 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,
+        d: rotateData.cos * (transform.d ?? defaultTransform.d),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
     if (backgroundMask) {
@@ -150,6 +156,6 @@ export function alterHsl(color, type, value) {
     return {
         h: color.h,
         s: color.s,
-        l: color.l + (type === "darken" ? -lFactor : lFactor) * value,
+        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
     };
 }

package/esm/Utils/ColorUtils.js

@@ -1,7 +1,15 @@
 import { clamp, getRandom, getRangeMax, getRangeMin, getRangeValue, mix, randomInRange, setRangeValue, } from "./NumberUtils.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";
+var RgbIndexes;
+(function (RgbIndexes) {
+    RgbIndexes[RgbIndexes["r"] = 1] = "r";
+    RgbIndexes[RgbIndexes["g"] = 2] = "g";
+    RgbIndexes[RgbIndexes["b"] = 3] = "b";
+    RgbIndexes[RgbIndexes["a"] = 4] = "a";
+})(RgbIndexes || (RgbIndexes = {}));
 const randomColorValue = "random", midColorValue = "mid", colorManagers = new Map();
 export function addColorManager(manager) {
     colorManagers.set(manager.key, manager);
@@ -17,12 +25,12 @@ function stringToRgba(input) {
     }), regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, result = regex.exec(hexFixed), radix = 16, defaultAlpha = 1, alphaFactor = 0xff;
     return result
         ? {
-            a: result[4] !== undefined
-                ? parseInt(result[4], radix) / alphaFactor
+            a: result[RgbIndexes.a] !== undefined
+                ? parseInt(result[RgbIndexes.a], radix) / alphaFactor
                 : defaultAlpha,
-            b: parseInt(result[3], radix),
-            g: parseInt(result[2], radix),
-            r: parseInt(result[1], radix),
+            b: parseInt(result[RgbIndexes.b], radix),
+            g: parseInt(result[RgbIndexes.g], radix),
+            r: parseInt(result[RgbIndexes.r], radix),
         }
         : undefined;
 }
@@ -252,7 +260,7 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     if (colorValue.enable) {
         colorValue.velocity = (getRangeValue(colorAnimation.speed) / percentDenominator) * reduceFactor;
         colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
-        colorValue.status = "increasing";
+        colorValue.status = AnimationStatus.increasing;
         colorValue.loops = defaultLoops;
         colorValue.maxLoops = getRangeValue(colorAnimation.count);
         colorValue.time = defaultTime;
@@ -285,7 +293,7 @@ export function updateColorValue(data, range, decrease, delta) {
         return;
     }
     const offset = data.offset ? randomInRange(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = getRangeMax(range), min = getRangeMin(range);
-    if (!decrease || data.status === "increasing") {
+    if (!decrease || data.status === AnimationStatus.increasing) {
         data.value += velocity;
         if (data.value > max) {
             if (!data.loops) {
@@ -293,7 +301,7 @@ export function updateColorValue(data, range, decrease, delta) {
             }
             data.loops++;
             if (decrease) {
-                data.status = "decreasing";
+                data.status = AnimationStatus.decreasing;
             }
             else {
                 data.value -= max;
@@ -308,7 +316,7 @@ export function updateColorValue(data, range, decrease, delta) {
                 data.loops = 0;
             }
             data.loops++;
-            data.status = "increasing";
+            data.status = AnimationStatus.increasing;
         }
     }
     if (data.velocity && decay !== identity) {

package/esm/Utils/EventDispatcher.js

@@ -13,7 +13,7 @@ export class EventDispatcher {
     }
     dispatchEvent(type, args) {
         const listeners = this._listeners.get(type);
-        listeners?.forEach((handler) => handler(args));
+        listeners?.forEach(handler => handler(args));
     }
     hasEventListener(type) {
         return !!this._listeners.get(type);

package/esm/Utils/HslColorManager.js

@@ -1,5 +1,12 @@
 import { getRangeValue, parseAlpha } from "./NumberUtils.js";
 import { hslToRgb, hslaToRgba } from "./ColorUtils.js";
+var HslIndexes;
+(function (HslIndexes) {
+    HslIndexes[HslIndexes["h"] = 1] = "h";
+    HslIndexes[HslIndexes["s"] = 2] = "s";
+    HslIndexes[HslIndexes["l"] = 3] = "l";
+    HslIndexes[HslIndexes["a"] = 5] = "a";
+})(HslIndexes || (HslIndexes = {}));
 export class HslColorManager {
     constructor() {
         this.key = "hsl";
@@ -28,10 +35,10 @@ export class HslColorManager {
         const regex = /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input), minLength = 4, defaultAlpha = 1, radix = 10;
         return result
             ? hslaToRgba({
-                a: result.length > minLength ? parseAlpha(result[5]) : defaultAlpha,
-                h: parseInt(result[1], radix),
-                l: parseInt(result[3], radix),
-                s: parseInt(result[2], radix),
+                a: result.length > minLength ? parseAlpha(result[HslIndexes.a]) : defaultAlpha,
+                h: parseInt(result[HslIndexes.h], radix),
+                l: parseInt(result[HslIndexes.l], radix),
+                s: parseInt(result[HslIndexes.s], radix),
             })
             : undefined;
     }

package/esm/Utils/NumberUtils.js

@@ -1,3 +1,4 @@
+import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import { Vector } from "../Core/Utils/Vectors.js";
 import { isNumber } from "./TypeUtils.js";
 import { percentDenominator } from "../Core/Utils/Constants.js";
@@ -71,25 +72,25 @@ export function getParticleDirectionAngle(direction, position, center) {
     }
     const empty = 0, half = 0.5, quarter = 0.25, threeQuarter = half + quarter;
     switch (direction) {
-        case "top":
+        case MoveDirection.top:
             return -Math.PI * half;
-        case "top-right":
+        case MoveDirection.topRight:
             return -Math.PI * quarter;
-        case "right":
+        case MoveDirection.right:
             return empty;
-        case "bottom-right":
+        case MoveDirection.bottomRight:
             return Math.PI * quarter;
-        case "bottom":
+        case MoveDirection.bottom:
             return Math.PI * half;
-        case "bottom-left":
+        case MoveDirection.bottomLeft:
             return Math.PI * threeQuarter;
-        case "left":
+        case MoveDirection.left:
             return Math.PI;
-        case "top-left":
+        case MoveDirection.topLeft:
             return -Math.PI * threeQuarter;
-        case "inside":
+        case MoveDirection.inside:
             return Math.atan2(center.y - position.y, center.x - position.x);
-        case "outside":
+        case MoveDirection.outside:
             return Math.atan2(position.y - center.y, position.x - center.x);
         default:
             return getRandom() * doublePI;

package/esm/Utils/RgbColorManager.js

@@ -1,4 +1,11 @@
 import { getRangeValue, parseAlpha } from "./NumberUtils.js";
+var RgbIndexes;
+(function (RgbIndexes) {
+    RgbIndexes[RgbIndexes["r"] = 1] = "r";
+    RgbIndexes[RgbIndexes["g"] = 2] = "g";
+    RgbIndexes[RgbIndexes["b"] = 3] = "b";
+    RgbIndexes[RgbIndexes["a"] = 5] = "a";
+})(RgbIndexes || (RgbIndexes = {}));
 export class RgbColorManager {
     constructor() {
         this.key = "rgb";
@@ -27,10 +34,10 @@ export class RgbColorManager {
         const regex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input), radix = 10, minLength = 4, defaultAlpha = 1;
         return result
             ? {
-                a: result.length > minLength ? parseAlpha(result[5]) : defaultAlpha,
-                b: parseInt(result[3], radix),
-                g: parseInt(result[2], radix),
-                r: parseInt(result[1], radix),
+                a: result.length > minLength ? parseAlpha(result[RgbIndexes.a]) : defaultAlpha,
+                b: parseInt(result[RgbIndexes.b], radix),
+                g: parseInt(result[RgbIndexes.g], radix),
+                r: parseInt(result[RgbIndexes.r], radix),
             }
             : undefined;
     }

package/esm/Utils/Utils.js

@@ -1,6 +1,12 @@
 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 { AnimationMode } from "../Enums/Modes/AnimationMode.js";
+import { AnimationStatus } from "../Enums/AnimationStatus.js";
+import { DestroyType } from "../Enums/Types/DestroyType.js";
+import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
+import { PixelMode } from "../Enums/Modes/PixelMode.js";
+import { StartValueType } from "../Enums/Types/StartValueType.js";
 import { Vector } from "../Core/Utils/Vectors.js";
 const _logger = {
     debug: console.debug,
@@ -37,10 +43,10 @@ function rectSideBounce(data) {
     return res;
 }
 function checkSelector(element, selectors) {
-    const res = executeOnSingleOrMultiple(selectors, (selector) => {
+    const res = executeOnSingleOrMultiple(selectors, selector => {
         return element.matches(selector);
     });
-    return isArray(res) ? res.some((t) => t) : res;
+    return isArray(res) ? res.some(t => t) : res;
 }
 export function isSsr() {
     return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
@@ -89,16 +95,16 @@ export function isPointInside(point, size, offset, radius, direction) {
 }
 export function areBoundsInside(bounds, size, offset, direction) {
     let inside = true;
-    if (!direction || direction === "bottom") {
+    if (!direction || direction === OutModeDirection.bottom) {
         inside = bounds.top < size.height + offset.x;
     }
-    if (inside && (!direction || direction === "left")) {
+    if (inside && (!direction || direction === OutModeDirection.left)) {
         inside = bounds.right > offset.x;
     }
-    if (inside && (!direction || direction === "right")) {
+    if (inside && (!direction || direction === OutModeDirection.right)) {
         inside = bounds.left < size.width + offset.y;
     }
-    if (inside && (!direction || direction === "top")) {
+    if (inside && (!direction || direction === OutModeDirection.top)) {
         inside = bounds.bottom > offset.y;
     }
     return inside;
@@ -134,17 +140,17 @@ export function deepExtend(destination, ...sources) {
             const sourceDict = source, value = sourceDict[key], destDict = destination;
             destDict[key] =
                 isObject(value) && Array.isArray(value)
-                    ? value.map((v) => deepExtend(destDict[key], v))
+                    ? value.map(v => deepExtend(destDict[key], v))
                     : deepExtend(destDict[key], value);
         }
     }
     return destination;
 }
 export function isDivModeEnabled(mode, divs) {
-    return !!findItemFromSingleOrMultiple(divs, (t) => t.enable && isInArray(mode, t.mode));
+    return !!findItemFromSingleOrMultiple(divs, t => t.enable && isInArray(mode, t.mode));
 }
 export function divModeExecute(mode, divs, callback) {
-    executeOnSingleOrMultiple(divs, (div) => {
+    executeOnSingleOrMultiple(divs, div => {
         const divMode = div.mode, divEnabled = div.enable;
         if (divEnabled && isInArray(mode, divMode)) {
             singleDivModeExecute(div, callback);
@@ -153,7 +159,7 @@ export function divModeExecute(mode, divs, callback) {
 }
 export function singleDivModeExecute(div, callback) {
     const selectors = div.selectors;
-    executeOnSingleOrMultiple(selectors, (selector) => {
+    executeOnSingleOrMultiple(selectors, selector => {
         callback(selector, div);
     });
 }
@@ -161,7 +167,7 @@ export function divMode(divs, element) {
     if (!element || !divs) {
         return;
     }
-    return findItemFromSingleOrMultiple(divs, (div) => {
+    return findItemFromSingleOrMultiple(divs, div => {
         return checkSelector(element, div.selectors);
     });
 }
@@ -271,35 +277,35 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
     if (animationOptions.enable) {
         res.decay = decayOffset - getRangeValue(animationOptions.decay);
         switch (animationOptions.mode) {
-            case "increase":
-                res.status = "increasing";
+            case AnimationMode.increase:
+                res.status = AnimationStatus.increasing;
                 break;
-            case "decrease":
-                res.status = "decreasing";
+            case AnimationMode.decrease:
+                res.status = AnimationStatus.decreasing;
                 break;
-            case "random":
-                res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
+            case AnimationMode.random:
+                res.status = getRandom() >= halfRandom ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 break;
         }
-        const autoStatus = animationOptions.mode === "auto";
+        const autoStatus = animationOptions.mode === AnimationMode.auto;
         switch (animationOptions.startValue) {
-            case "min":
+            case StartValueType.min:
                 res.value = res.min;
                 if (autoStatus) {
-                    res.status = "increasing";
+                    res.status = AnimationStatus.increasing;
                 }
                 break;
-            case "max":
+            case StartValueType.max:
                 res.value = res.max;
                 if (autoStatus) {
-                    res.status = "decreasing";
+                    res.status = AnimationStatus.decreasing;
                 }
                 break;
-            case "random":
+            case StartValueType.random:
             default:
                 res.value = randomInRange(res);
                 if (autoStatus) {
-                    res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
+                    res.status = getRandom() >= halfRandom ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 }
                 break;
         }
@@ -308,7 +314,7 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
     return res;
 }
 function getPositionOrSize(positionOrSize, canvasSize) {
-    const isPercent = positionOrSize.mode === "percent";
+    const isPercent = positionOrSize.mode === PixelMode.percent;
     if (!isPercent) {
         const { mode: _, ...rest } = positionOrSize;
         return rest;
@@ -335,12 +341,12 @@ export function getSize(size, canvasSize) {
 }
 function checkDestroy(particle, destroyType, value, minValue, maxValue) {
     switch (destroyType) {
-        case "max":
+        case DestroyType.max:
             if (value >= maxValue) {
                 particle.destroy();
             }
             break;
-        case "min":
+        case DestroyType.min:
             if (value <= minValue) {
                 particle.destroy();
             }
@@ -366,10 +372,10 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
         return;
     }
     switch (data.status) {
-        case "increasing":
+        case AnimationStatus.increasing:
             if (data.value >= maxValue) {
                 if (changeDirection) {
-                    data.status = "decreasing";
+                    data.status = AnimationStatus.decreasing;
                 }
                 else {
                     data.value -= maxValue;
@@ -383,10 +389,10 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
                 data.value += velocity;
             }
             break;
-        case "decreasing":
+        case AnimationStatus.decreasing:
             if (data.value <= minValue) {
                 if (changeDirection) {
-                    data.status = "increasing";
+                    data.status = AnimationStatus.increasing;
                 }
                 else {
                     data.value += maxValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/engine [27 Feb 2024 at 12:13]</title>
+    <title>@tsparticles/engine [13 May 2024 at 00:05]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>