@tsparticles/engine 3.0.0-alpha.1 → 3.0.0-beta.0

package/umd/Utils/EventDispatcher.js

@@ -15,16 +15,17 @@
             this._listeners = new Map();
         }
         addEventListener(type, listener) {
-            var _a;
             this.removeEventListener(type, listener);
-            if (!this._listeners.get(type)) {
-                this._listeners.set(type, []);
+            let arr = this._listeners.get(type);
+            if (!arr) {
+                arr = [];
+                this._listeners.set(type, arr);
             }
-            (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.push(listener);
+            arr.push(listener);
         }
         dispatchEvent(type, args) {
-            var _a;
-            (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => handler(args));
+            const listeners = this._listeners.get(type);
+            listeners && listeners.forEach((handler) => handler(args));
         }
         hasEventListener(type) {
             return !!this._listeners.get(type);

package/umd/Utils/HslColorManager.js

@@ -18,15 +18,13 @@
             this.stringPrefix = "hsl";
         }
         handleColor(color) {
-            var _a;
-            const colorValue = color.value, hslColor = (_a = colorValue.hsl) !== null && _a !== void 0 ? _a : color.value;
+            const colorValue = color.value, hslColor = colorValue.hsl ?? color.value;
             if (hslColor.h !== undefined && hslColor.s !== undefined && hslColor.l !== undefined) {
                 return (0, ColorUtils_1.hslToRgb)(hslColor);
             }
         }
         handleRangeColor(color) {
-            var _a;
-            const colorValue = color.value, hslColor = (_a = colorValue.hsl) !== null && _a !== void 0 ? _a : color.value;
+            const colorValue = color.value, hslColor = colorValue.hsl ?? color.value;
             if (hslColor.h !== undefined && hslColor.l !== undefined) {
                 return (0, ColorUtils_1.hslToRgb)({
                     h: (0, NumberUtils_1.getRangeValue)(hslColor.h),

package/umd/Utils/NumberUtils.js

@@ -4,19 +4,21 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Core/Utils/Vector"], factory);
+        define(["require", "exports", "./Utils", "../Core/Utils/Vector"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.parseAlpha = exports.calcExactPositionOrRandomFromSizeRanged = exports.calcExactPositionOrRandomFromSize = exports.calcPositionOrRandomFromSizeRanged = exports.calcPositionOrRandomFromSize = exports.calcPositionFromSize = exports.collisionVelocity = exports.getParticleBaseVelocity = exports.getParticleDirectionAngle = exports.getDistance = exports.getDistances = exports.getValue = exports.setRangeValue = exports.getRangeMax = exports.getRangeMin = exports.getRangeValue = exports.randomInRange = exports.mix = exports.clamp = exports.getRandom = exports.setRandom = exports.getEasing = exports.addEasing = void 0;
+    const Utils_1 = require("./Utils");
     const Vector_1 = require("../Core/Utils/Vector");
     let _random = Math.random;
     const easings = new Map();
     function addEasing(name, easing) {
-        if (!easings.get(name)) {
-            easings.set(name, easing);
+        if (easings.get(name)) {
+            return;
         }
+        easings.set(name, easing);
     }
     exports.addEasing = addEasing;
     function getEasing(name) {
@@ -49,19 +51,19 @@
     }
     exports.randomInRange = randomInRange;
     function getRangeValue(value) {
-        return typeof value === "number" ? value : randomInRange(value);
+        return (0, Utils_1.isNumber)(value) ? value : randomInRange(value);
     }
     exports.getRangeValue = getRangeValue;
     function getRangeMin(value) {
-        return typeof value === "number" ? value : value.min;
+        return (0, Utils_1.isNumber)(value) ? value : value.min;
     }
     exports.getRangeMin = getRangeMin;
     function getRangeMax(value) {
-        return typeof value === "number" ? value : value.max;
+        return (0, Utils_1.isNumber)(value) ? value : value.max;
     }
     exports.getRangeMax = getRangeMax;
     function setRangeValue(source, value) {
-        if (source === value || (value === undefined && typeof source === "number")) {
+        if (source === value || (value === undefined && (0, Utils_1.isNumber)(source))) {
             return source;
         }
         const min = getRangeMin(source), max = getRangeMax(source);
@@ -74,7 +76,7 @@
     }
     exports.setRangeValue = setRangeValue;
     function getValue(options) {
-        const random = options.random, { enable, minimumValue } = typeof random === "boolean"
+        const random = options.random, { enable, minimumValue } = (0, Utils_1.isBoolean)(random)
             ? {
                 enable: random,
                 minimumValue: 0,
@@ -93,34 +95,32 @@
     }
     exports.getDistance = getDistance;
     function getParticleDirectionAngle(direction, position, center) {
-        if (typeof direction === "number") {
+        if ((0, Utils_1.isNumber)(direction)) {
             return (direction * Math.PI) / 180;
         }
-        else {
-            switch (direction) {
-                case "top":
-                    return -Math.PI / 2;
-                case "top-right":
-                    return -Math.PI / 4;
-                case "right":
-                    return 0;
-                case "bottom-right":
-                    return Math.PI / 4;
-                case "bottom":
-                    return Math.PI / 2;
-                case "bottom-left":
-                    return (3 * Math.PI) / 4;
-                case "left":
-                    return Math.PI;
-                case "top-left":
-                    return (-3 * Math.PI) / 4;
-                case "inside":
-                    return Math.atan2(center.y - position.y, center.x - position.x);
-                case "outside":
-                    return Math.atan2(position.y - center.y, position.x - center.x);
-                default:
-                    return getRandom() * Math.PI * 2;
-            }
+        switch (direction) {
+            case "top":
+                return -Math.PI / 2;
+            case "top-right":
+                return -Math.PI / 4;
+            case "right":
+                return 0;
+            case "bottom-right":
+                return Math.PI / 4;
+            case "bottom":
+                return Math.PI / 2;
+            case "bottom-left":
+                return (3 * Math.PI) / 4;
+            case "left":
+                return Math.PI;
+            case "top-left":
+                return (-3 * Math.PI) / 4;
+            case "inside":
+                return Math.atan2(center.y - position.y, center.x - position.x);
+            case "outside":
+                return Math.atan2(position.y - center.y, position.x - center.x);
+            default:
+                return getRandom() * Math.PI * 2;
         }
     }
     exports.getParticleDirectionAngle = getParticleDirectionAngle;
@@ -145,35 +145,31 @@
     }
     exports.calcPositionFromSize = calcPositionFromSize;
     function calcPositionOrRandomFromSize(data) {
-        var _a, _b, _c, _d;
         return {
-            x: (((_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : getRandom() * 100) * data.size.width) / 100,
-            y: (((_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : getRandom() * 100) * data.size.height) / 100,
+            x: ((data.position?.x ?? getRandom() * 100) * data.size.width) / 100,
+            y: ((data.position?.y ?? getRandom() * 100) * data.size.height) / 100,
         };
     }
     exports.calcPositionOrRandomFromSize = calcPositionOrRandomFromSize;
     function calcPositionOrRandomFromSizeRanged(data) {
-        var _a, _b;
         const position = {
-            x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined,
-            y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined,
+            x: data.position?.x !== undefined ? getRangeValue(data.position.x) : undefined,
+            y: data.position?.y !== undefined ? getRangeValue(data.position.y) : undefined,
         };
         return calcPositionOrRandomFromSize({ size: data.size, position });
     }
     exports.calcPositionOrRandomFromSizeRanged = calcPositionOrRandomFromSizeRanged;
     function calcExactPositionOrRandomFromSize(data) {
-        var _a, _b, _c, _d;
         return {
-            x: (_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : getRandom() * data.size.width,
-            y: (_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : getRandom() * data.size.height,
+            x: data.position?.x ?? getRandom() * data.size.width,
+            y: data.position?.y ?? getRandom() * data.size.height,
         };
     }
     exports.calcExactPositionOrRandomFromSize = calcExactPositionOrRandomFromSize;
     function calcExactPositionOrRandomFromSizeRanged(data) {
-        var _a, _b;
         const position = {
-            x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined,
-            y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined,
+            x: data.position?.x !== undefined ? getRangeValue(data.position.x) : undefined,
+            y: data.position?.y !== undefined ? getRangeValue(data.position.y) : undefined,
         };
         return calcExactPositionOrRandomFromSize({ size: data.size, position });
     }

package/umd/Utils/RgbColorManager.js

@@ -17,15 +17,13 @@
             this.stringPrefix = "rgb";
         }
         handleColor(color) {
-            var _a;
-            const colorValue = color.value, rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
+            const colorValue = color.value, rgbColor = colorValue.rgb ?? color.value;
             if (rgbColor.r !== undefined) {
                 return rgbColor;
             }
         }
         handleRangeColor(color) {
-            var _a;
-            const colorValue = color.value, rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
+            const colorValue = color.value, rgbColor = colorValue.rgb ?? color.value;
             if (rgbColor.r !== undefined) {
                 return {
                     r: (0, NumberUtils_1.getRangeValue)(rgbColor.r),

package/umd/Utils/Utils.js

@@ -9,11 +9,32 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    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.cancelAnimation = exports.animate = exports.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = void 0;
+    exports.isArray = exports.isObject = exports.isFunction = exports.isNumber = exports.isString = exports.isBoolean = 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.safeMatchMedia = exports.hasMatchMedia = exports.isSsr = exports.getLogger = exports.setLogger = void 0;
     const NumberUtils_1 = require("./NumberUtils");
     const Vector_1 = require("../Core/Utils/Vector");
-    function rectSideBounce(pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor) {
-        const res = { bounced: false };
+    const _logger = {
+        debug: console.debug,
+        error: console.error,
+        info: console.info,
+        log: console.log,
+        verbose: console.log,
+        warning: console.warn,
+    };
+    function setLogger(logger) {
+        _logger.debug = logger.debug || _logger.debug;
+        _logger.error = logger.error || _logger.error;
+        _logger.info = logger.info || _logger.info;
+        _logger.log = logger.log || _logger.log;
+        _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;
         if (pOtherSide.min < rectOtherSide.min ||
             pOtherSide.min > rectOtherSide.max ||
             pOtherSide.max < rectOtherSide.min ||
@@ -31,7 +52,7 @@
         const res = executeOnSingleOrMultiple(selectors, (selector) => {
             return element.matches(selector);
         });
-        return res instanceof Array ? res.some((t) => t) : res;
+        return isArray(res) ? res.some((t) => t) : res;
     }
     function isSsr() {
         return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
@@ -48,27 +69,22 @@
         return matchMedia(query);
     }
     exports.safeMatchMedia = safeMatchMedia;
-    function animate() {
-        return isSsr()
-            ? (callback) => setTimeout(callback)
-            : (callback) => (requestAnimationFrame || setTimeout)(callback);
-    }
-    exports.animate = animate;
-    function cancelAnimation() {
-        return isSsr()
-            ? (handle) => clearTimeout(handle)
-            : (handle) => (cancelAnimationFrame || clearTimeout)(handle);
-    }
-    exports.cancelAnimation = cancelAnimation;
+    function safeMutationObserver(callback) {
+        if (isSsr() || typeof MutationObserver === "undefined") {
+            return;
+        }
+        return new MutationObserver(callback);
+    }
+    exports.safeMutationObserver = safeMutationObserver;
     function isInArray(value, array) {
-        return value === array || (array instanceof Array && array.indexOf(value) > -1);
+        return value === array || (isArray(array) && array.indexOf(value) > -1);
     }
     exports.isInArray = isInArray;
     async function loadFont(font, weight) {
         try {
-            await document.fonts.load(`${weight !== null && weight !== void 0 ? weight : "400"} 36px '${font !== null && font !== void 0 ? font : "Verdana"}'`);
+            await document.fonts.load(`${weight ?? "400"} 36px '${font ?? "Verdana"}'`);
         }
-        catch (_a) {
+        catch {
         }
     }
     exports.loadFont = loadFont;
@@ -81,7 +97,7 @@
     }
     exports.itemFromArray = itemFromArray;
     function isPointInside(point, size, offset, radius, direction) {
-        return areBoundsInside(calculateBounds(point, radius !== null && radius !== void 0 ? radius : 0), size, offset, direction);
+        return areBoundsInside(calculateBounds(point, radius ?? 0), size, offset, direction);
     }
     exports.isPointInside = isPointInside;
     function areBoundsInside(bounds, size, offset, direction) {
@@ -115,24 +131,24 @@
             if (source === undefined || source === null) {
                 continue;
             }
-            if (typeof source !== "object") {
+            if (!isObject(source)) {
                 destination = source;
                 continue;
             }
             const sourceIsArray = Array.isArray(source);
-            if (sourceIsArray && (typeof destination !== "object" || !destination || !Array.isArray(destination))) {
+            if (sourceIsArray && (isObject(destination) || !destination || !Array.isArray(destination))) {
                 destination = [];
             }
-            else if (!sourceIsArray && (typeof destination !== "object" || !destination || Array.isArray(destination))) {
+            else if (!sourceIsArray && (isObject(destination) || !destination || Array.isArray(destination))) {
                 destination = {};
             }
             for (const key in source) {
                 if (key === "__proto__") {
                     continue;
                 }
-                const sourceDict = source, value = sourceDict[key], isObject = typeof value === "object", destDict = destination;
+                const sourceDict = source, value = sourceDict[key], destDict = destination;
                 destDict[key] =
-                    isObject && Array.isArray(value)
+                    isObject(value) && Array.isArray(value)
                         ? value.map((v) => deepExtend(destDict[key], v))
                         : deepExtend(destDict[key], value);
             }
@@ -193,18 +209,25 @@
     exports.circleBounce = circleBounce;
     function rectBounce(particle, divBounds) {
         const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), resH = rectSideBounce({
-            min: bounds.left,
-            max: bounds.right,
-        }, {
-            min: bounds.top,
-            max: bounds.bottom,
-        }, {
-            min: divBounds.left,
-            max: divBounds.right,
-        }, {
-            min: divBounds.top,
-            max: divBounds.bottom,
-        }, particle.velocity.x, (0, NumberUtils_1.getValue)(particle.options.bounce.horizontal));
+            pSide: {
+                min: bounds.left,
+                max: bounds.right,
+            },
+            pOtherSide: {
+                min: bounds.top,
+                max: bounds.bottom,
+            },
+            rectSide: {
+                min: divBounds.left,
+                max: divBounds.right,
+            },
+            rectOtherSide: {
+                min: divBounds.top,
+                max: divBounds.bottom,
+            },
+            velocity: particle.velocity.x,
+            factor: (0, NumberUtils_1.getValue)(particle.options.bounce.horizontal),
+        });
         if (resH.bounced) {
             if (resH.velocity !== undefined) {
                 particle.velocity.x = resH.velocity;
@@ -214,18 +237,25 @@
             }
         }
         const resV = rectSideBounce({
-            min: bounds.top,
-            max: bounds.bottom,
-        }, {
-            min: bounds.left,
-            max: bounds.right,
-        }, {
-            min: divBounds.top,
-            max: divBounds.bottom,
-        }, {
-            min: divBounds.left,
-            max: divBounds.right,
-        }, particle.velocity.y, (0, NumberUtils_1.getValue)(particle.options.bounce.vertical));
+            pSide: {
+                min: bounds.top,
+                max: bounds.bottom,
+            },
+            pOtherSide: {
+                min: bounds.left,
+                max: bounds.right,
+            },
+            rectSide: {
+                min: divBounds.top,
+                max: divBounds.bottom,
+            },
+            rectOtherSide: {
+                min: divBounds.left,
+                max: divBounds.right,
+            },
+            velocity: particle.velocity.y,
+            factor: (0, NumberUtils_1.getValue)(particle.options.bounce.vertical),
+        });
         if (resV.bounced) {
             if (resV.velocity !== undefined) {
                 particle.velocity.y = resV.velocity;
@@ -237,30 +267,30 @@
     }
     exports.rectBounce = rectBounce;
     function executeOnSingleOrMultiple(obj, callback) {
-        return obj instanceof Array ? obj.map((item, index) => callback(item, index)) : callback(obj, 0);
+        return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, 0);
     }
     exports.executeOnSingleOrMultiple = executeOnSingleOrMultiple;
     function itemFromSingleOrMultiple(obj, index, useIndex) {
-        return obj instanceof Array ? itemFromArray(obj, index, useIndex) : obj;
+        return isArray(obj) ? itemFromArray(obj, index, useIndex) : obj;
     }
     exports.itemFromSingleOrMultiple = itemFromSingleOrMultiple;
     function findItemFromSingleOrMultiple(obj, callback) {
-        return obj instanceof Array ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
+        return isArray(obj) ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
     }
     exports.findItemFromSingleOrMultiple = findItemFromSingleOrMultiple;
     function initParticleNumericAnimationValue(options, pxRatio) {
-        const valueRange = options.value, animationOptions = options.animation;
-        const res = {
-            enable: options.animation.enable,
+        const valueRange = options.value, animationOptions = options.animation, res = {
+            delayTime: (0, NumberUtils_1.getRangeValue)(animationOptions.delay) * 1000,
+            enable: animationOptions.enable,
             value: (0, NumberUtils_1.getRangeValue)(options.value) * pxRatio,
             max: (0, NumberUtils_1.getRangeMax)(valueRange) * pxRatio,
             min: (0, NumberUtils_1.getRangeMin)(valueRange) * pxRatio,
             loops: 0,
-            maxLoops: (0, NumberUtils_1.getRangeValue)(options.animation.count),
+            maxLoops: (0, NumberUtils_1.getRangeValue)(animationOptions.count),
+            time: 0,
         };
         if (animationOptions.enable) {
             res.decay = 1 - (0, NumberUtils_1.getRangeValue)(animationOptions.decay);
-            let autoStatus = false;
             switch (animationOptions.mode) {
                 case "increase":
                     res.status = "increasing";
@@ -271,10 +301,8 @@
                 case "random":
                     res.status = (0, NumberUtils_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
                     break;
-                case "auto":
-                    autoStatus = true;
-                    break;
             }
+            const autoStatus = animationOptions.mode === "auto";
             switch (animationOptions.startValue) {
                 case "min":
                     res.value = res.min;
@@ -282,17 +310,17 @@
                         res.status = "increasing";
                     }
                     break;
-                case "random":
-                    res.value = (0, NumberUtils_1.randomInRange)(res);
+                case "max":
+                    res.value = res.max;
                     if (autoStatus) {
-                        res.status = (0, NumberUtils_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                        res.status = "decreasing";
                     }
                     break;
-                case "max":
+                case "random":
                 default:
-                    res.value = res.max;
+                    res.value = (0, NumberUtils_1.randomInRange)(res);
                     if (autoStatus) {
-                        res.status = "decreasing";
+                        res.status = (0, NumberUtils_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
                     }
                     break;
             }
@@ -301,4 +329,56 @@
         return res;
     }
     exports.initParticleNumericAnimationValue = initParticleNumericAnimationValue;
+    function getPositionOrSize(positionOrSize, canvasSize) {
+        const isPercent = positionOrSize.mode === "percent";
+        if (!isPercent) {
+            const { mode: _, ...rest } = positionOrSize;
+            return rest;
+        }
+        const isPosition = "x" in positionOrSize;
+        if (isPosition) {
+            return {
+                x: (positionOrSize.x / 100) * canvasSize.width,
+                y: (positionOrSize.y / 100) * canvasSize.height,
+            };
+        }
+        else {
+            return {
+                width: (positionOrSize.width / 100) * canvasSize.width,
+                height: (positionOrSize.height / 100) * canvasSize.height,
+            };
+        }
+    }
+    function getPosition(position, canvasSize) {
+        return getPositionOrSize(position, canvasSize);
+    }
+    exports.getPosition = getPosition;
+    function getSize(size, canvasSize) {
+        return getPositionOrSize(size, canvasSize);
+    }
+    exports.getSize = getSize;
+    function isBoolean(arg) {
+        return typeof arg === "boolean";
+    }
+    exports.isBoolean = isBoolean;
+    function isString(arg) {
+        return typeof arg === "string";
+    }
+    exports.isString = isString;
+    function isNumber(arg) {
+        return typeof arg === "number";
+    }
+    exports.isNumber = isNumber;
+    function isFunction(arg) {
+        return typeof arg === "function";
+    }
+    exports.isFunction = isFunction;
+    function isObject(arg) {
+        return typeof arg === "object" && arg !== null;
+    }
+    exports.isObject = isObject;
+    function isArray(arg) {
+        return Array.isArray(arg);
+    }
+    exports.isArray = isArray;
 });