@tsparticles/engine 3.2.2 → 3.4.0

package/browser/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/browser/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/browser/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/cjs/Core/Canvas.js

@@ -34,7 +34,7 @@ function setStyle(canvas, style, important = false) {
 class Canvas {
     constructor(container) {
         this.container = container;
-        this._applyPostDrawUpdaters = (particle) => {
+        this._applyPostDrawUpdaters = particle => {
             for (const updater of this._postDrawUpdaters) {
                 updater.afterDraw?.(particle);
             }
@@ -64,7 +64,7 @@ class Canvas {
                 plugin.resize?.();
             }
         };
-        this._getPluginParticleColors = (particle) => {
+        this._getPluginParticleColors = particle => {
             let fColor, sColor;
             for (const plugin of this._colorPlugins) {
                 if (!fColor && plugin.particleFillColor) {
@@ -104,7 +104,7 @@ class Canvas {
                         };
                         resolve();
                     });
-                    img.addEventListener("error", (evt) => {
+                    img.addEventListener("error", evt => {
                         reject(evt.error);
                     });
                     img.src = cover.image;
@@ -165,28 +165,33 @@ class Canvas {
                         };
                         resolve();
                     });
-                    img.addEventListener("error", (evt) => {
+                    img.addEventListener("error", evt => {
                         reject(evt.error);
                     });
                     img.src = trailFill.image;
                 });
             }
         };
-        this._paintBase = (baseColor) => {
-            this.draw((ctx) => (0, CanvasUtils_js_1.paintBase)(ctx, this.size, baseColor));
+        this._paintBase = baseColor => {
+            this.draw(ctx => (0, CanvasUtils_js_1.paintBase)(ctx, this.size, baseColor));
         };
         this._paintImage = (image, opacity) => {
-            this.draw((ctx) => (0, CanvasUtils_js_1.paintImage)(ctx, this.size, image, opacity));
+            this.draw(ctx => (0, CanvasUtils_js_1.paintImage)(ctx, this.size, image, opacity));
         };
         this._repairStyle = () => {
             const element = this.element;
             if (!element) {
                 return;
             }
-            this._safeMutationObserver((observer) => observer.disconnect());
+            this._safeMutationObserver(observer => observer.disconnect());
             this._initStyle();
             this.initBackground();
-            this._safeMutationObserver((observer) => observer.observe(element, { attributes: true }));
+            this._safeMutationObserver(observer => {
+                if (!element || !(element instanceof Node)) {
+                    return;
+                }
+                observer.observe(element, { attributes: true });
+            });
         };
         this._resetOriginalStyle = () => {
             const element = this.element, originalStyle = this._originalStyle;
@@ -195,7 +200,7 @@ class Canvas {
             }
             setStyle(element, originalStyle);
         };
-        this._safeMutationObserver = (callback) => {
+        this._safeMutationObserver = callback => {
             if (!this._mutationObserver) {
                 return;
             }
@@ -244,7 +249,7 @@ class Canvas {
             }
         }
         else if (options.clear) {
-            this.draw((ctx) => {
+            this.draw(ctx => {
                 (0, CanvasUtils_js_1.clear)(ctx, this.size);
             });
         }
@@ -273,11 +278,11 @@ class Canvas {
     drawAsync(cb) {
         const ctx = this._context;
         if (!ctx) {
-            return Promise.resolve(undefined);
+            return undefined;
         }
         return cb(ctx);
     }
-    async drawParticle(particle, delta) {
+    drawParticle(particle, delta) {
         if (particle.spawning || particle.destroyed) {
             return;
         }
@@ -296,13 +301,13 @@ class Canvas {
         if (!fColor && !sColor) {
             return;
         }
-        await this.drawAsync(async (ctx) => {
+        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 = {
                 fill: fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
             };
             colorStyles.stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
             this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
-            await (0, CanvasUtils_js_1.drawParticle)({
+            (0, CanvasUtils_js_1.drawParticle)({
                 container,
                 context: ctx,
                 particle,
@@ -318,15 +323,15 @@ class Canvas {
             this._applyPostDrawUpdaters(particle);
         });
     }
-    async drawParticlePlugin(plugin, particle, delta) {
-        await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
+    drawParticlePlugin(plugin, particle, delta) {
+        this.draw(ctx => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
     }
-    async drawPlugin(plugin, delta) {
-        await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
+    drawPlugin(plugin, delta) {
+        this.draw(ctx => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
     }
     async init() {
-        this._safeMutationObserver((obs) => obs.disconnect());
-        this._mutationObserver = (0, Utils_js_1.safeMutationObserver)((records) => {
+        this._safeMutationObserver(obs => obs.disconnect());
+        this._mutationObserver = (0, Utils_js_1.safeMutationObserver)(records => {
             for (const record of records) {
                 if (record.type === "attributes" && record.attributeName === "style") {
                     this._repairStyle();
@@ -343,8 +348,8 @@ class Canvas {
             (0, Utils_js_1.getLogger)().error(e);
         }
         this.initBackground();
-        this._safeMutationObserver((obs) => {
-            if (!this.element) {
+        this._safeMutationObserver(obs => {
+            if (!this.element || !(this.element instanceof Node)) {
                 return;
             }
             obs.observe(this.element, { attributes: true });
@@ -411,8 +416,8 @@ class Canvas {
         this.size.height = canvas.offsetHeight;
         this.size.width = canvas.offsetWidth;
         this._context = this.element.getContext("2d");
-        this._safeMutationObserver((obs) => {
-            if (!this.element) {
+        this._safeMutationObserver(obs => {
+            if (!this.element || !(this.element instanceof Node)) {
                 return;
             }
             obs.observe(this.element, { attributes: true });
@@ -422,7 +427,7 @@ class Canvas {
     }
     paint() {
         const options = this.container.actualOptions;
-        this.draw((ctx) => {
+        this.draw(ctx => {
             if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 (0, CanvasUtils_js_1.clear)(ctx, this.size);
                 if (this._coverImage) {
@@ -466,16 +471,16 @@ class Canvas {
         return true;
     }
     stop() {
-        this._safeMutationObserver((obs) => obs.disconnect());
+        this._safeMutationObserver(obs => obs.disconnect());
         this._mutationObserver = undefined;
-        this.draw((ctx) => (0, CanvasUtils_js_1.clear)(ctx, this.size));
+        this.draw(ctx => (0, CanvasUtils_js_1.clear)(ctx, this.size));
     }
     async windowResize() {
         if (!this.element || !this.resize()) {
             return;
         }
         const container = this.container, needsRefresh = container.updateActualOptions();
-        await container.particles.setDensity();
+        container.particles.setDensity();
         this._applyResizePlugins();
         if (needsRefresh) {
             await container.refresh();