@tsparticles/engine 3.3.0 → 3.5.0

package/cjs/Utils/Utils.js

@@ -1,9 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateAnimation = exports.getSize = exports.getPosition = exports.initParticleNumericAnimationValue = exports.findItemFromSingleOrMultiple = exports.itemFromSingleOrMultiple = exports.executeOnSingleOrMultiple = exports.rectBounce = exports.circleBounce = exports.circleBounceDataFromParticle = exports.divMode = exports.singleDivModeExecute = exports.divModeExecute = exports.isDivModeEnabled = exports.deepExtend = exports.calculateBounds = exports.areBoundsInside = exports.isPointInside = exports.itemFromArray = exports.arrayRandomIndex = exports.loadFont = exports.isInArray = exports.safeMutationObserver = exports.safeIntersectionObserver = exports.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = exports.getLogger = exports.setLogger = void 0;
+exports.setLogger = setLogger;
+exports.getLogger = getLogger;
+exports.isSsr = isSsr;
+exports.hasMatchMedia = hasMatchMedia;
+exports.safeMatchMedia = safeMatchMedia;
+exports.safeIntersectionObserver = safeIntersectionObserver;
+exports.safeMutationObserver = safeMutationObserver;
+exports.isInArray = isInArray;
+exports.loadFont = loadFont;
+exports.arrayRandomIndex = arrayRandomIndex;
+exports.itemFromArray = itemFromArray;
+exports.isPointInside = isPointInside;
+exports.areBoundsInside = areBoundsInside;
+exports.calculateBounds = calculateBounds;
+exports.deepExtend = deepExtend;
+exports.isDivModeEnabled = isDivModeEnabled;
+exports.divModeExecute = divModeExecute;
+exports.singleDivModeExecute = singleDivModeExecute;
+exports.divMode = divMode;
+exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
+exports.circleBounce = circleBounce;
+exports.rectBounce = rectBounce;
+exports.executeOnSingleOrMultiple = executeOnSingleOrMultiple;
+exports.itemFromSingleOrMultiple = itemFromSingleOrMultiple;
+exports.findItemFromSingleOrMultiple = findItemFromSingleOrMultiple;
+exports.initParticleNumericAnimationValue = initParticleNumericAnimationValue;
+exports.getPosition = getPosition;
+exports.getSize = getSize;
+exports.updateAnimation = updateAnimation;
 const NumberUtils_js_1 = require("./NumberUtils.js");
 const Constants_js_1 = require("../Core/Utils/Constants.js");
 const TypeUtils_js_1 = require("./TypeUtils.js");
+const AnimationMode_js_1 = require("../Enums/Modes/AnimationMode.js");
+const AnimationStatus_js_1 = require("../Enums/AnimationStatus.js");
+const DestroyType_js_1 = require("../Enums/Types/DestroyType.js");
+const OutModeDirection_js_1 = require("../Enums/Directions/OutModeDirection.js");
+const PixelMode_js_1 = require("../Enums/Modes/PixelMode.js");
+const StartValueType_js_1 = require("../Enums/Types/StartValueType.js");
 const Vectors_js_1 = require("../Core/Utils/Vectors.js");
 const _logger = {
     debug: console.debug,
@@ -21,11 +55,9 @@ function setLogger(logger) {
     _logger.verbose = logger.verbose || _logger.verbose;
     _logger.warning = logger.warning || _logger.warning;
 }
-exports.setLogger = setLogger;
 function getLogger() {
     return _logger;
 }
-exports.getLogger = getLogger;
 function rectSideBounce(data) {
     const res = { bounced: false }, { pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor } = data, half = 0.5, minVelocity = 0;
     if (pOtherSide.min < rectOtherSide.min ||
@@ -42,45 +74,39 @@ function rectSideBounce(data) {
     return res;
 }
 function checkSelector(element, selectors) {
-    const res = executeOnSingleOrMultiple(selectors, (selector) => {
+    const res = executeOnSingleOrMultiple(selectors, selector => {
         return element.matches(selector);
     });
-    return (0, TypeUtils_js_1.isArray)(res) ? res.some((t) => t) : res;
+    return (0, TypeUtils_js_1.isArray)(res) ? res.some(t => t) : res;
 }
 function isSsr() {
     return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
 }
-exports.isSsr = isSsr;
 function hasMatchMedia() {
     return !isSsr() && typeof matchMedia !== "undefined";
 }
-exports.hasMatchMedia = hasMatchMedia;
 function safeMatchMedia(query) {
     if (!hasMatchMedia()) {
         return;
     }
     return matchMedia(query);
 }
-exports.safeMatchMedia = safeMatchMedia;
 function safeIntersectionObserver(callback) {
     if (isSsr() || typeof IntersectionObserver === "undefined") {
         return;
     }
     return new IntersectionObserver(callback);
 }
-exports.safeIntersectionObserver = safeIntersectionObserver;
 function safeMutationObserver(callback) {
     if (isSsr() || typeof MutationObserver === "undefined") {
         return;
     }
     return new MutationObserver(callback);
 }
-exports.safeMutationObserver = safeMutationObserver;
 function isInArray(value, array) {
     const invalidIndex = -1;
     return value === array || ((0, TypeUtils_js_1.isArray)(array) && array.indexOf(value) > invalidIndex);
 }
-exports.isInArray = isInArray;
 async function loadFont(font, weight) {
     try {
         await document.fonts.load(`${weight ?? "400"} 36px '${font ?? "Verdana"}'`);
@@ -88,37 +114,32 @@ async function loadFont(font, weight) {
     catch {
     }
 }
-exports.loadFont = loadFont;
 function arrayRandomIndex(array) {
     return Math.floor((0, NumberUtils_js_1.getRandom)() * array.length);
 }
-exports.arrayRandomIndex = arrayRandomIndex;
 function itemFromArray(array, index, useIndex = true) {
     return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
 }
-exports.itemFromArray = itemFromArray;
 function isPointInside(point, size, offset, radius, direction) {
     const minRadius = 0;
     return areBoundsInside(calculateBounds(point, radius ?? minRadius), size, offset, direction);
 }
-exports.isPointInside = isPointInside;
 function areBoundsInside(bounds, size, offset, direction) {
     let inside = true;
-    if (!direction || direction === "bottom") {
+    if (!direction || direction === OutModeDirection_js_1.OutModeDirection.bottom) {
         inside = bounds.top < size.height + offset.x;
     }
-    if (inside && (!direction || direction === "left")) {
+    if (inside && (!direction || direction === OutModeDirection_js_1.OutModeDirection.left)) {
         inside = bounds.right > offset.x;
     }
-    if (inside && (!direction || direction === "right")) {
+    if (inside && (!direction || direction === OutModeDirection_js_1.OutModeDirection.right)) {
         inside = bounds.left < size.width + offset.y;
     }
-    if (inside && (!direction || direction === "top")) {
+    if (inside && (!direction || direction === OutModeDirection_js_1.OutModeDirection.top)) {
         inside = bounds.bottom > offset.y;
     }
     return inside;
 }
-exports.areBoundsInside = areBoundsInside;
 function calculateBounds(point, radius) {
     return {
         bottom: point.y + radius,
@@ -127,7 +148,6 @@ function calculateBounds(point, radius) {
         top: point.y - radius,
     };
 }
-exports.calculateBounds = calculateBounds;
 function deepExtend(destination, ...sources) {
     for (const source of sources) {
         if (source === undefined || source === null) {
@@ -151,42 +171,37 @@ function deepExtend(destination, ...sources) {
             const sourceDict = source, value = sourceDict[key], destDict = destination;
             destDict[key] =
                 (0, TypeUtils_js_1.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;
 }
-exports.deepExtend = deepExtend;
 function isDivModeEnabled(mode, divs) {
-    return !!findItemFromSingleOrMultiple(divs, (t) => t.enable && isInArray(mode, t.mode));
+    return !!findItemFromSingleOrMultiple(divs, t => t.enable && isInArray(mode, t.mode));
 }
-exports.isDivModeEnabled = isDivModeEnabled;
 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);
         }
     });
 }
-exports.divModeExecute = divModeExecute;
 function singleDivModeExecute(div, callback) {
     const selectors = div.selectors;
-    executeOnSingleOrMultiple(selectors, (selector) => {
+    executeOnSingleOrMultiple(selectors, selector => {
         callback(selector, div);
     });
 }
-exports.singleDivModeExecute = singleDivModeExecute;
 function divMode(divs, element) {
     if (!element || !divs) {
         return;
     }
-    return findItemFromSingleOrMultiple(divs, (div) => {
+    return findItemFromSingleOrMultiple(divs, div => {
         return checkSelector(element, div.selectors);
     });
 }
-exports.divMode = divMode;
 function circleBounceDataFromParticle(p) {
     return {
         position: p.getPosition(),
@@ -196,7 +211,6 @@ function circleBounceDataFromParticle(p) {
         factor: Vectors_js_1.Vector.create((0, NumberUtils_js_1.getRangeValue)(p.options.bounce.horizontal.value), (0, NumberUtils_js_1.getRangeValue)(p.options.bounce.vertical.value)),
     };
 }
-exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
 function circleBounce(p1, p2) {
     const { x: xVelocityDiff, y: yVelocityDiff } = p1.velocity.sub(p2.velocity), [pos1, pos2] = [p1.position, p2.position], { dx: xDist, dy: yDist } = (0, NumberUtils_js_1.getDistances)(pos2, pos1), minimumDistance = 0;
     if (xVelocityDiff * xDist + yVelocityDiff * yDist < minimumDistance) {
@@ -208,7 +222,6 @@ function circleBounce(p1, p2) {
     p2.velocity.x = vFinal2.x * p2.factor.x;
     p2.velocity.y = vFinal2.y * p2.factor.y;
 }
-exports.circleBounce = circleBounce;
 function rectBounce(particle, divBounds) {
     const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), bounceOptions = particle.options.bounce, resH = rectSideBounce({
         pSide: {
@@ -267,16 +280,13 @@ function rectBounce(particle, divBounds) {
         }
     }
 }
-exports.rectBounce = rectBounce;
 function executeOnSingleOrMultiple(obj, callback) {
     const defaultIndex = 0;
     return (0, TypeUtils_js_1.isArray)(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, defaultIndex);
 }
-exports.executeOnSingleOrMultiple = executeOnSingleOrMultiple;
 function itemFromSingleOrMultiple(obj, index, useIndex) {
     return (0, TypeUtils_js_1.isArray)(obj) ? itemFromArray(obj, index, useIndex) : obj;
 }
-exports.itemFromSingleOrMultiple = itemFromSingleOrMultiple;
 function findItemFromSingleOrMultiple(obj, callback) {
     if ((0, TypeUtils_js_1.isArray)(obj)) {
         return obj.find((t, index) => callback(t, index));
@@ -284,7 +294,6 @@ function findItemFromSingleOrMultiple(obj, callback) {
     const defaultIndex = 0;
     return callback(obj, defaultIndex) ? obj : undefined;
 }
-exports.findItemFromSingleOrMultiple = findItemFromSingleOrMultiple;
 function initParticleNumericAnimationValue(options, pxRatio) {
     const valueRange = options.value, animationOptions = options.animation, res = {
         delayTime: (0, NumberUtils_js_1.getRangeValue)(animationOptions.delay) * Constants_js_1.millisecondsToSeconds,
@@ -299,35 +308,35 @@ function initParticleNumericAnimationValue(options, pxRatio) {
     if (animationOptions.enable) {
         res.decay = decayOffset - (0, NumberUtils_js_1.getRangeValue)(animationOptions.decay);
         switch (animationOptions.mode) {
-            case "increase":
-                res.status = "increasing";
+            case AnimationMode_js_1.AnimationMode.increase:
+                res.status = AnimationStatus_js_1.AnimationStatus.increasing;
                 break;
-            case "decrease":
-                res.status = "decreasing";
+            case AnimationMode_js_1.AnimationMode.decrease:
+                res.status = AnimationStatus_js_1.AnimationStatus.decreasing;
                 break;
-            case "random":
-                res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.halfRandom ? "increasing" : "decreasing";
+            case AnimationMode_js_1.AnimationMode.random:
+                res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.halfRandom ? AnimationStatus_js_1.AnimationStatus.increasing : AnimationStatus_js_1.AnimationStatus.decreasing;
                 break;
         }
-        const autoStatus = animationOptions.mode === "auto";
+        const autoStatus = animationOptions.mode === AnimationMode_js_1.AnimationMode.auto;
         switch (animationOptions.startValue) {
-            case "min":
+            case StartValueType_js_1.StartValueType.min:
                 res.value = res.min;
                 if (autoStatus) {
-                    res.status = "increasing";
+                    res.status = AnimationStatus_js_1.AnimationStatus.increasing;
                 }
                 break;
-            case "max":
+            case StartValueType_js_1.StartValueType.max:
                 res.value = res.max;
                 if (autoStatus) {
-                    res.status = "decreasing";
+                    res.status = AnimationStatus_js_1.AnimationStatus.decreasing;
                 }
                 break;
-            case "random":
+            case StartValueType_js_1.StartValueType.random:
             default:
                 res.value = (0, NumberUtils_js_1.randomInRange)(res);
                 if (autoStatus) {
-                    res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.halfRandom ? "increasing" : "decreasing";
+                    res.status = (0, NumberUtils_js_1.getRandom)() >= Constants_js_1.halfRandom ? AnimationStatus_js_1.AnimationStatus.increasing : AnimationStatus_js_1.AnimationStatus.decreasing;
                 }
                 break;
         }
@@ -335,9 +344,8 @@ function initParticleNumericAnimationValue(options, pxRatio) {
     res.initialValue = res.value;
     return res;
 }
-exports.initParticleNumericAnimationValue = initParticleNumericAnimationValue;
 function getPositionOrSize(positionOrSize, canvasSize) {
-    const isPercent = positionOrSize.mode === "percent";
+    const isPercent = positionOrSize.mode === PixelMode_js_1.PixelMode.percent;
     if (!isPercent) {
         const { mode: _, ...rest } = positionOrSize;
         return rest;
@@ -359,19 +367,17 @@ function getPositionOrSize(positionOrSize, canvasSize) {
 function getPosition(position, canvasSize) {
     return getPositionOrSize(position, canvasSize);
 }
-exports.getPosition = getPosition;
 function getSize(size, canvasSize) {
     return getPositionOrSize(size, canvasSize);
 }
-exports.getSize = getSize;
 function checkDestroy(particle, destroyType, value, minValue, maxValue) {
     switch (destroyType) {
-        case "max":
+        case DestroyType_js_1.DestroyType.max:
             if (value >= maxValue) {
                 particle.destroy();
             }
             break;
-        case "min":
+        case DestroyType_js_1.DestroyType.min:
             if (value <= minValue) {
                 particle.destroy();
             }
@@ -397,10 +403,10 @@ function updateAnimation(particle, data, changeDirection, destroyType, delta) {
         return;
     }
     switch (data.status) {
-        case "increasing":
+        case AnimationStatus_js_1.AnimationStatus.increasing:
             if (data.value >= maxValue) {
                 if (changeDirection) {
-                    data.status = "decreasing";
+                    data.status = AnimationStatus_js_1.AnimationStatus.decreasing;
                 }
                 else {
                     data.value -= maxValue;
@@ -414,10 +420,10 @@ function updateAnimation(particle, data, changeDirection, destroyType, delta) {
                 data.value += velocity;
             }
             break;
-        case "decreasing":
+        case AnimationStatus_js_1.AnimationStatus.decreasing:
             if (data.value <= minValue) {
                 if (changeDirection) {
-                    data.status = "increasing";
+                    data.status = AnimationStatus_js_1.AnimationStatus.increasing;
                 }
                 else {
                     data.value += maxValue;
@@ -439,4 +445,3 @@ function updateAnimation(particle, data, changeDirection, destroyType, delta) {
         data.value = (0, NumberUtils_js_1.clamp)(data.value, minValue, maxValue);
     }
 }
-exports.updateAnimation = updateAnimation;

package/cjs/init.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.init = void 0;
+exports.init = init;
 const Engine_js_1 = require("./Core/Engine.js");
 const HslColorManager_js_1 = require("./Utils/HslColorManager.js");
 const RgbColorManager_js_1 = require("./Utils/RgbColorManager.js");
@@ -13,4 +13,3 @@ function init() {
     engine.init();
     return engine;
 }
-exports.init = init;

package/esm/Core/Canvas.js

@@ -31,7 +31,7 @@ function setStyle(canvas, style, important = false) {
 export class Canvas {
     constructor(container) {
         this.container = container;
-        this._applyPostDrawUpdaters = (particle) => {
+        this._applyPostDrawUpdaters = particle => {
             for (const updater of this._postDrawUpdaters) {
                 updater.afterDraw?.(particle);
             }
@@ -61,7 +61,7 @@ export class Canvas {
                 plugin.resize?.();
             }
         };
-        this._getPluginParticleColors = (particle) => {
+        this._getPluginParticleColors = particle => {
             let fColor, sColor;
             for (const plugin of this._colorPlugins) {
                 if (!fColor && plugin.particleFillColor) {
@@ -101,7 +101,7 @@ export class Canvas {
                         };
                         resolve();
                     });
-                    img.addEventListener("error", (evt) => {
+                    img.addEventListener("error", evt => {
                         reject(evt.error);
                     });
                     img.src = cover.image;
@@ -162,28 +162,33 @@ export class Canvas {
                         };
                         resolve();
                     });
-                    img.addEventListener("error", (evt) => {
+                    img.addEventListener("error", evt => {
                         reject(evt.error);
                     });
                     img.src = trailFill.image;
                 });
             }
         };
-        this._paintBase = (baseColor) => {
-            this.draw((ctx) => paintBase(ctx, this.size, baseColor));
+        this._paintBase = baseColor => {
+            this.draw(ctx => paintBase(ctx, this.size, baseColor));
         };
         this._paintImage = (image, opacity) => {
-            this.draw((ctx) => paintImage(ctx, this.size, image, opacity));
+            this.draw(ctx => 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;
@@ -192,7 +197,7 @@ export class Canvas {
             }
             setStyle(element, originalStyle);
         };
-        this._safeMutationObserver = (callback) => {
+        this._safeMutationObserver = callback => {
             if (!this._mutationObserver) {
                 return;
             }
@@ -241,7 +246,7 @@ export class Canvas {
             }
         }
         else if (options.clear) {
-            this.draw((ctx) => {
+            this.draw(ctx => {
                 clear(ctx, this.size);
             });
         }
@@ -316,14 +321,14 @@ export class Canvas {
         });
     }
     drawParticlePlugin(plugin, particle, delta) {
-        this.draw((ctx) => drawParticlePlugin(ctx, plugin, particle, delta));
+        this.draw(ctx => drawParticlePlugin(ctx, plugin, particle, delta));
     }
     drawPlugin(plugin, delta) {
-        this.draw((ctx) => drawPlugin(ctx, plugin, delta));
+        this.draw(ctx => drawPlugin(ctx, plugin, delta));
     }
     async init() {
-        this._safeMutationObserver((obs) => obs.disconnect());
-        this._mutationObserver = safeMutationObserver((records) => {
+        this._safeMutationObserver(obs => obs.disconnect());
+        this._mutationObserver = safeMutationObserver(records => {
             for (const record of records) {
                 if (record.type === "attributes" && record.attributeName === "style") {
                     this._repairStyle();
@@ -340,8 +345,8 @@ export class Canvas {
             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 });
@@ -408,8 +413,8 @@ export 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 });
@@ -419,7 +424,7 @@ export class Canvas {
     }
     paint() {
         const options = this.container.actualOptions;
-        this.draw((ctx) => {
+        this.draw(ctx => {
             if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 clear(ctx, this.size);
                 if (this._coverImage) {
@@ -463,9 +468,9 @@ export class Canvas {
         return true;
     }
     stop() {
-        this._safeMutationObserver((obs) => obs.disconnect());
+        this._safeMutationObserver(obs => obs.disconnect());
         this._mutationObserver = undefined;
-        this.draw((ctx) => clear(ctx, this.size));
+        this.draw(ctx => clear(ctx, this.size));
     }
     async windowResize() {
         if (!this.element || !this.resize()) {