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

package/esm/Utils/NumberUtils.js

@@ -1,10 +1,12 @@
+import { isBoolean, isNumber } from "./Utils";
 import { Vector } from "../Core/Utils/Vector";
 let _random = Math.random;
 const easings = new Map();
 export function addEasing(name, easing) {
-    if (!easings.get(name)) {
-        easings.set(name, easing);
+    if (easings.get(name)) {
+        return;
     }
+    easings.set(name, easing);
 }
 export function getEasing(name) {
     return easings.get(name) || ((value) => value);
@@ -30,16 +32,16 @@ export function randomInRange(r) {
     return getRandom() * (max - min) + min;
 }
 export function getRangeValue(value) {
-    return typeof value === "number" ? value : randomInRange(value);
+    return isNumber(value) ? value : randomInRange(value);
 }
 export function getRangeMin(value) {
-    return typeof value === "number" ? value : value.min;
+    return isNumber(value) ? value : value.min;
 }
 export function getRangeMax(value) {
-    return typeof value === "number" ? value : value.max;
+    return isNumber(value) ? value : value.max;
 }
 export function setRangeValue(source, value) {
-    if (source === value || (value === undefined && typeof source === "number")) {
+    if (source === value || (value === undefined && isNumber(source))) {
         return source;
     }
     const min = getRangeMin(source), max = getRangeMax(source);
@@ -51,7 +53,7 @@ export function setRangeValue(source, value) {
         : setRangeValue(min, max);
 }
 export function getValue(options) {
-    const random = options.random, { enable, minimumValue } = typeof random === "boolean"
+    const random = options.random, { enable, minimumValue } = isBoolean(random)
         ? {
             enable: random,
             minimumValue: 0,
@@ -67,34 +69,32 @@ export function getDistance(pointA, pointB) {
     return getDistances(pointA, pointB).distance;
 }
 export function getParticleDirectionAngle(direction, position, center) {
-    if (typeof direction === "number") {
+    if (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;
     }
 }
 export function getParticleBaseVelocity(direction) {
@@ -115,32 +115,28 @@ export function calcPositionFromSize(data) {
         : undefined;
 }
 export 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,
     };
 }
 export 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 });
 }
 export 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,
     };
 }
 export 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/esm/Utils/RgbColorManager.js

@@ -5,15 +5,13 @@ export class RgbColorManager {
         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: getRangeValue(rgbColor.r),

package/esm/Utils/Utils.js

@@ -1,7 +1,26 @@
 import { collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, getValue, randomInRange, } from "./NumberUtils";
 import { Vector } from "../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,
+};
+export 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;
+}
+export function getLogger() {
+    return _logger;
+}
+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 ||
@@ -19,7 +38,7 @@ function checkSelector(element, selectors) {
     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;
 }
 export function isSsr() {
     return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
@@ -33,24 +52,20 @@ export function safeMatchMedia(query) {
     }
     return matchMedia(query);
 }
-export function animate() {
-    return isSsr()
-        ? (callback) => setTimeout(callback)
-        : (callback) => (requestAnimationFrame || setTimeout)(callback);
-}
-export function cancelAnimation() {
-    return isSsr()
-        ? (handle) => clearTimeout(handle)
-        : (handle) => (cancelAnimationFrame || clearTimeout)(handle);
+export function safeMutationObserver(callback) {
+    if (isSsr() || typeof MutationObserver === "undefined") {
+        return;
+    }
+    return new MutationObserver(callback);
 }
 export function isInArray(value, array) {
-    return value === array || (array instanceof Array && array.indexOf(value) > -1);
+    return value === array || (isArray(array) && array.indexOf(value) > -1);
 }
 export 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 {
     }
 }
 export function arrayRandomIndex(array) {
@@ -60,7 +75,7 @@ export function itemFromArray(array, index, useIndex = true) {
     return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
 }
 export 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);
 }
 export function areBoundsInside(bounds, size, offset, direction) {
     let inside = true;
@@ -91,24 +106,24 @@ export function deepExtend(destination, ...sources) {
         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);
         }
@@ -162,18 +177,25 @@ export function circleBounce(p1, p2) {
 }
 export 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, 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: getValue(particle.options.bounce.horizontal),
+    });
     if (resH.bounced) {
         if (resH.velocity !== undefined) {
             particle.velocity.x = resH.velocity;
@@ -183,18 +205,25 @@ export function rectBounce(particle, divBounds) {
         }
     }
     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, 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: getValue(particle.options.bounce.vertical),
+    });
     if (resV.bounced) {
         if (resV.velocity !== undefined) {
             particle.velocity.y = resV.velocity;
@@ -205,27 +234,27 @@ export function rectBounce(particle, divBounds) {
     }
 }
 export 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);
 }
 export function itemFromSingleOrMultiple(obj, index, useIndex) {
-    return obj instanceof Array ? itemFromArray(obj, index, useIndex) : obj;
+    return isArray(obj) ? itemFromArray(obj, index, useIndex) : obj;
 }
 export 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;
 }
 export 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: getRangeValue(animationOptions.delay) * 1000,
+        enable: animationOptions.enable,
         value: getRangeValue(options.value) * pxRatio,
         max: getRangeMax(valueRange) * pxRatio,
         min: getRangeMin(valueRange) * pxRatio,
         loops: 0,
-        maxLoops: getRangeValue(options.animation.count),
+        maxLoops: getRangeValue(animationOptions.count),
+        time: 0,
     };
     if (animationOptions.enable) {
         res.decay = 1 - getRangeValue(animationOptions.decay);
-        let autoStatus = false;
         switch (animationOptions.mode) {
             case "increase":
                 res.status = "increasing";
@@ -236,10 +265,8 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
             case "random":
                 res.status = 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;
@@ -247,17 +274,17 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
                     res.status = "increasing";
                 }
                 break;
-            case "random":
-                res.value = randomInRange(res);
+            case "max":
+                res.value = res.max;
                 if (autoStatus) {
-                    res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+                    res.status = "decreasing";
                 }
                 break;
-            case "max":
+            case "random":
             default:
-                res.value = res.max;
+                res.value = randomInRange(res);
                 if (autoStatus) {
-                    res.status = "decreasing";
+                    res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
                 }
                 break;
         }
@@ -265,3 +292,47 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
     res.initialValue = res.value;
     return res;
 }
+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,
+        };
+    }
+}
+export function getPosition(position, canvasSize) {
+    return getPositionOrSize(position, canvasSize);
+}
+export function getSize(size, canvasSize) {
+    return getPositionOrSize(size, canvasSize);
+}
+export function isBoolean(arg) {
+    return typeof arg === "boolean";
+}
+export function isString(arg) {
+    return typeof arg === "string";
+}
+export function isNumber(arg) {
+    return typeof arg === "number";
+}
+export function isFunction(arg) {
+    return typeof arg === "function";
+}
+export function isObject(arg) {
+    return typeof arg === "object" && arg !== null;
+}
+export function isArray(arg) {
+    return Array.isArray(arg);
+}

package/esm/bundle.js

@@ -1,98 +1,5 @@
-import { Engine } from "./engine";
-import { HslColorManager } from "./Utils/HslColorManager";
-import { RgbColorManager } from "./Utils/RgbColorManager";
-import { addColorManager } from "./Utils/ColorUtils";
-const rgbColorManager = new RgbColorManager(), hslColorManager = new HslColorManager();
-addColorManager(rgbColorManager);
-addColorManager(hslColorManager);
-const tsParticles = new Engine();
-export * from "./Core/Utils/Circle";
-export * from "./Core/Utils/Constants";
-export * from "./Core/Utils/ExternalInteractorBase";
-export * from "./Core/Utils/ParticlesInteractorBase";
-export * from "./Core/Utils/Point";
-export * from "./Core/Utils/Range";
-export * from "./Core/Utils/Rectangle";
-export * from "./Core/Utils/Vector";
-export * from "./Core/Utils/Vector3d";
-export * from "./Enums/Directions/MoveDirection";
-export * from "./Enums/Directions/RotateDirection";
-export * from "./Enums/Directions/OutModeDirection";
-export * from "./Enums/Modes/AnimationMode";
-export * from "./Enums/Modes/ClickMode";
-export * from "./Enums/Modes/DivMode";
-export * from "./Enums/Modes/HoverMode";
-export * from "./Enums/Modes/CollisionMode";
-export * from "./Enums/Modes/OutMode";
-export * from "./Enums/Modes/SizeMode";
-export * from "./Enums/Modes/ThemeMode";
-export * from "./Enums/Modes/ResponsiveMode";
-export * from "./Enums/Types/AlterType";
-export * from "./Enums/Types/DestroyType";
-export * from "./Enums/Types/GradientType";
-export * from "./Enums/Types/InteractorType";
-export * from "./Enums/Types/ParticleOutType";
-export * from "./Enums/Types/StartValueType";
-export * from "./Enums/Types/DivType";
-export * from "./Enums/Types/EasingType";
-export * from "./Enums/AnimationStatus";
-export * from "./Enums/InteractivityDetect";
-export * from "./Options/Classes/AnimatableColor";
-export * from "./Options/Classes/AnimationOptions";
-export * from "./Options/Classes/Background/Background";
-export * from "./Options/Classes/BackgroundMask/BackgroundMask";
-export * from "./Options/Classes/BackgroundMask/BackgroundMaskCover";
-export * from "./Options/Classes/ColorAnimation";
-export * from "./Options/Classes/FullScreen/FullScreen";
-export * from "./Options/Classes/HslAnimation";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent";
-export * from "./Options/Classes/Interactivity/Events/DivEvent";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent";
-export * from "./Options/Classes/Interactivity/Events/DivEvent";
-export * from "./Options/Classes/Interactivity/Events/Events";
-export * from "./Options/Classes/Interactivity/Events/HoverEvent";
-export * from "./Options/Classes/Interactivity/Events/Parallax";
-export * from "./Options/Classes/Interactivity/Events/ResizeEvent";
-export * from "./Options/Classes/Interactivity/Interactivity";
-export * from "./Options/Classes/Interactivity/Modes/Modes";
-export * from "./Options/Classes/ManualParticle";
-export * from "./Options/Classes/Options";
-export * from "./Options/Classes/OptionsColor";
-export * from "./Options/Classes/Particles/Bounce/ParticlesBounce";
-export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor";
-export * from "./Options/Classes/Particles/Collisions/Collisions";
-export * from "./Options/Classes/Particles/Collisions/CollisionsAbsorb";
-export * from "./Options/Classes/Particles/Collisions/CollisionsOverlap";
-export * from "./Options/Classes/Particles/ParticlesOptions";
-export * from "./Options/Classes/Particles/Shadow";
-export * from "./Options/Classes/Particles/Stroke";
-export * from "./Options/Classes/Particles/Move/MoveAttract";
-export * from "./Options/Classes/Particles/Move/Move";
-export * from "./Options/Classes/Particles/Move/MoveAngle";
-export * from "./Options/Classes/Particles/Move/MoveCenter";
-export * from "./Options/Classes/Particles/Move/MoveGravity";
-export * from "./Options/Classes/Particles/Move/MoveTrail";
-export * from "./Options/Classes/Particles/Move/MoveTrailFill";
-export * from "./Options/Classes/Particles/Move/OutModes";
-export * from "./Options/Classes/Particles/Move/Path/MovePath";
-export * from "./Options/Classes/Particles/Move/Spin";
-export * from "./Options/Classes/Particles/Number/ParticlesNumber";
-export * from "./Options/Classes/Particles/Number/ParticlesDensity";
-export * from "./Options/Classes/Particles/Opacity/Opacity";
-export * from "./Options/Classes/Particles/Opacity/OpacityAnimation";
-export * from "./Options/Classes/Particles/Shape/Shape";
-export * from "./Options/Classes/Particles/Size/Size";
-export * from "./Options/Classes/Particles/Size/SizeAnimation";
-export * from "./Options/Classes/Particles/ZIndex/ZIndex";
-export * from "./Options/Classes/Responsive";
-export * from "./Options/Classes/Theme/Theme";
-export * from "./Options/Classes/Theme/ThemeDefault";
-export * from "./Options/Classes/ValueWithRandom";
-export * from "./Utils/CanvasUtils";
-export * from "./Utils/ColorUtils";
-export * from "./Utils/HslColorManager";
-export * from "./Utils/NumberUtils";
-export * from "./Utils/OptionsUtils";
-export * from "./Utils/RgbColorManager";
-export * from "./Utils/Utils";
+import { init } from "./init";
+const tsParticles = init();
+window.tsParticles = tsParticles;
+export * from "./exports";
 export { tsParticles };