@tsparticles/engine 3.4.0 → 3.5.0

package/cjs/Utils/Utils.js

@@ -1,6 +1,34 @@
 "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");
@@ -27,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 ||
@@ -56,37 +82,31 @@ function checkSelector(element, selectors) {
 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"}'`);
@@ -94,20 +114,16 @@ 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 === OutModeDirection_js_1.OutModeDirection.bottom) {
@@ -124,7 +140,6 @@ function areBoundsInside(bounds, size, offset, direction) {
     }
     return inside;
 }
-exports.areBoundsInside = areBoundsInside;
 function calculateBounds(point, radius) {
     return {
         bottom: point.y + radius,
@@ -133,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) {
@@ -163,11 +177,9 @@ function deepExtend(destination, ...sources) {
     }
     return destination;
 }
-exports.deepExtend = deepExtend;
 function isDivModeEnabled(mode, divs) {
     return !!findItemFromSingleOrMultiple(divs, t => t.enable && isInArray(mode, t.mode));
 }
-exports.isDivModeEnabled = isDivModeEnabled;
 function divModeExecute(mode, divs, callback) {
     executeOnSingleOrMultiple(divs, div => {
         const divMode = div.mode, divEnabled = div.enable;
@@ -176,14 +188,12 @@ function divModeExecute(mode, divs, callback) {
         }
     });
 }
-exports.divModeExecute = divModeExecute;
 function singleDivModeExecute(div, callback) {
     const selectors = div.selectors;
     executeOnSingleOrMultiple(selectors, selector => {
         callback(selector, div);
     });
 }
-exports.singleDivModeExecute = singleDivModeExecute;
 function divMode(divs, element) {
     if (!element || !divs) {
         return;
@@ -192,7 +202,6 @@ function divMode(divs, element) {
         return checkSelector(element, div.selectors);
     });
 }
-exports.divMode = divMode;
 function circleBounceDataFromParticle(p) {
     return {
         position: p.getPosition(),
@@ -202,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) {
@@ -214,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: {
@@ -273,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));
@@ -290,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,
@@ -341,7 +344,6 @@ function initParticleNumericAnimationValue(options, pxRatio) {
     res.initialValue = res.value;
     return res;
 }
-exports.initParticleNumericAnimationValue = initParticleNumericAnimationValue;
 function getPositionOrSize(positionOrSize, canvasSize) {
     const isPercent = positionOrSize.mode === PixelMode_js_1.PixelMode.percent;
     if (!isPercent) {
@@ -365,11 +367,9 @@ 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 DestroyType_js_1.DestroyType.max:
@@ -445,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/Container.js

@@ -1,3 +1,4 @@
+import { animate, cancelAnimation, getRangeValue } from "../Utils/NumberUtils.js";
 import { errorPrefix, millisecondsToSeconds } from "./Utils/Constants.js";
 import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
 import { Canvas } from "./Canvas.js";
@@ -6,7 +7,6 @@ import { EventType } from "../Enums/Types/EventType.js";
 import { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
-import { getRangeValue } from "../Utils/NumberUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
 function guardCheck(container) {
     return container && !container.destroyed;
@@ -255,7 +255,7 @@ export class Container {
             }
             this._nextFrame(timestamp);
         };
-        this._drawAnimationFrame = requestAnimationFrame(timestamp => frame(timestamp));
+        this._drawAnimationFrame = animate(timestamp => frame(timestamp));
     }
     async export(type, options = {}) {
         for (const [, plugin] of this.plugins) {
@@ -346,7 +346,7 @@ export class Container {
             return;
         }
         if (this._drawAnimationFrame !== undefined) {
-            cancelAnimationFrame(this._drawAnimationFrame);
+            cancelAnimation(this._drawAnimationFrame);
             delete this._drawAnimationFrame;
         }
         if (this._paused) {

package/esm/Core/Engine.js

@@ -95,7 +95,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.4.0";
+        return "3.5.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";

package/esm/Utils/NumberUtils.js

@@ -3,15 +3,18 @@ import { Vector } from "../Core/Utils/Vectors.js";
 import { isNumber } from "./TypeUtils.js";
 import { percentDenominator } from "../Core/Utils/Constants.js";
 let _random = Math.random;
-const easings = new Map(), double = 2, doublePI = Math.PI * double;
+const _animationLoop = {
+    nextFrame: (cb) => requestAnimationFrame(cb),
+    cancel: (idx) => cancelAnimationFrame(idx),
+}, easingFunctions = new Map(), double = 2, doublePI = Math.PI * double;
 export function addEasing(name, easing) {
-    if (easings.get(name)) {
+    if (easingFunctions.get(name)) {
         return;
     }
-    easings.set(name, easing);
+    easingFunctions.set(name, easing);
 }
 export function getEasing(name) {
-    return easings.get(name) ?? ((value) => value);
+    return easingFunctions.get(name) ?? ((value) => value);
 }
 export function setRandom(rnd = Math.random) {
     _random = rnd;
@@ -20,6 +23,16 @@ export function getRandom() {
     const min = 0, max = 1;
     return clamp(_random(), min, max - Number.EPSILON);
 }
+export function setAnimationFunctions(nextFrame, cancel) {
+    _animationLoop.nextFrame = (callback) => nextFrame(callback);
+    _animationLoop.cancel = (handle) => cancel(handle);
+}
+export function animate(fn) {
+    return _animationLoop.nextFrame(fn);
+}
+export function cancelAnimation(handle) {
+    _animationLoop.cancel(handle);
+}
 export function clamp(num, min, max) {
     return Math.min(Math.max(num, min), max);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/engine [13 May 2024 at 00:05]</title>
+    <title>@tsparticles/engine [1 Jul 2024 at 09:14]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>