@tsparticles/engine 3.3.0 → 3.5.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,16 +1,20 @@
+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";
 let _random = Math.random;
-const easings = new Map(), double = 2, doublePI = Math.PI * double;
+const _animationLoop = {
+    nextFrame: (cb) => requestAnimationFrame(cb),
+    cancel: (idx) => cancelAnimationFrame(idx),
+}, easingFunctions = new Map(), double = 2, doublePI = Math.PI * double;
 export function addEasing(name, easing) {
-    if (easings.get(name)) {
+    if (easingFunctions.get(name)) {
         return;
     }
-    easings.set(name, easing);
+    easingFunctions.set(name, easing);
 }
 export function getEasing(name) {
-    return easings.get(name) ?? ((value) => value);
+    return easingFunctions.get(name) ?? ((value) => value);
 }
 export function setRandom(rnd = Math.random) {
     _random = rnd;
@@ -19,6 +23,16 @@ export function getRandom() {
     const min = 0, max = 1;
     return clamp(_random(), min, max - Number.EPSILON);
 }
+export function setAnimationFunctions(nextFrame, cancel) {
+    _animationLoop.nextFrame = (callback) => nextFrame(callback);
+    _animationLoop.cancel = (handle) => cancel(handle);
+}
+export function animate(fn) {
+    return _animationLoop.nextFrame(fn);
+}
+export function cancelAnimation(handle) {
+    _animationLoop.cancel(handle);
+}
 export function clamp(num, min, max) {
     return Math.min(Math.max(num, min), max);
 }
@@ -71,25 +85,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;
     }