@tsparticles/engine 3.9.1 → 4.0.0-alpha.0

package/esm/Utils/Utils.js

@@ -1,5 +1,5 @@
-import { clamp, collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRange, } from "./NumberUtils.js";
-import { half, millisecondsToSeconds, minVelocity, percentDenominator } from "../Core/Utils/Constants.js";
+import { clamp, collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRangeValue, } from "./MathUtils.js";
+import { half, millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
 import { isArray, isNull, isObject } from "./TypeUtils.js";
 import { AnimationMode } from "../Enums/Modes/AnimationMode.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
@@ -8,25 +8,7 @@ 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,
-    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;
-}
+const minRadius = 0;
 function memoize(fn) {
     const cache = new Map();
     return (...args) => {
@@ -39,32 +21,17 @@ function memoize(fn) {
         return result;
     };
 }
-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 ||
-        pOtherSide.max > rectOtherSide.max) {
-        return res;
-    }
-    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * half && velocity > minVelocity) ||
-        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * half && velocity < minVelocity)) {
-        res.velocity = velocity * -factor;
-        res.bounced = true;
-    }
-    return res;
-}
 function checkSelector(element, selectors) {
     const res = executeOnSingleOrMultiple(selectors, selector => {
         return element.matches(selector);
     });
     return isArray(res) ? res.some(t => t) : res;
 }
-export function isSsr() {
-    return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
-}
 export function hasMatchMedia() {
-    return !isSsr() && typeof matchMedia !== "undefined";
+    return typeof matchMedia !== "undefined";
+}
+export function safeDocument() {
+    return globalThis.document;
 }
 export function safeMatchMedia(query) {
     if (!hasMatchMedia()) {
@@ -73,24 +40,23 @@ export function safeMatchMedia(query) {
     return matchMedia(query);
 }
 export function safeIntersectionObserver(callback) {
-    if (isSsr() || typeof IntersectionObserver === "undefined") {
+    if (typeof IntersectionObserver === "undefined") {
         return;
     }
     return new IntersectionObserver(callback);
 }
 export function safeMutationObserver(callback) {
-    if (isSsr() || typeof MutationObserver === "undefined") {
+    if (typeof MutationObserver === "undefined") {
         return;
     }
     return new MutationObserver(callback);
 }
 export function isInArray(value, array) {
-    const invalidIndex = -1;
-    return value === array || (isArray(array) && array.indexOf(value) > invalidIndex);
+    return value === array || (isArray(array) && array.includes(value));
 }
 export async function loadFont(font, weight) {
     try {
-        await document.fonts.load(`${weight ?? "400"} 36px '${font ?? "Verdana"}'`);
+        await safeDocument().fonts.load(`${weight ?? "400"} 36px '${font ?? "Verdana"}'`);
     }
     catch {
     }
@@ -102,7 +68,6 @@ 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) {
-    const minRadius = 0;
     return areBoundsInside(calculateBounds(point, radius ?? minRadius), size, offset, direction);
 }
 export function areBoundsInside(bounds, size, offset, direction) {
@@ -203,64 +168,6 @@ export function circleBounce(p1, p2) {
     p2.velocity.x = vFinal2.x * p2.factor.x;
     p2.velocity.y = vFinal2.y * p2.factor.y;
 }
-export function rectBounce(particle, divBounds) {
-    const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), bounceOptions = particle.options.bounce, resH = rectSideBounce({
-        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: getRangeValue(bounceOptions.horizontal.value),
-    });
-    if (resH.bounced) {
-        if (resH.velocity !== undefined) {
-            particle.velocity.x = resH.velocity;
-        }
-        if (resH.position !== undefined) {
-            particle.position.x = resH.position;
-        }
-    }
-    const resV = rectSideBounce({
-        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: getRangeValue(bounceOptions.vertical.value),
-    });
-    if (resV.bounced) {
-        if (resV.velocity !== undefined) {
-            particle.velocity.y = resV.velocity;
-        }
-        if (resV.position !== undefined) {
-            particle.position.y = resV.position;
-        }
-    }
-}
 export function executeOnSingleOrMultiple(obj, callback) {
     const defaultIndex = 0;
     return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, defaultIndex);
@@ -315,7 +222,7 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
                 break;
             case StartValueType.random:
             default:
-                res.value = randomInRange(res);
+                res.value = randomInRangeValue(res);
                 if (autoStatus) {
                     res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 }
@@ -368,15 +275,12 @@ function checkDestroy(particle, destroyType, value, minValue, maxValue) {
 export function updateAnimation(particle, data, changeDirection, destroyType, delta) {
     const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minDecay = 1;
     if (particle.destroyed ||
-        !data ||
         !data.enable ||
         ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
         return;
     }
     const velocity = (data.velocity ?? minVelocity) * delta.factor, minValue = data.min, maxValue = data.max, decay = data.decay ?? minDecay;
-    if (!data.time) {
-        data.time = 0;
-    }
+    data.time ??= 0;
     if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
         data.time += delta.value;
     }
@@ -392,9 +296,7 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
                 else {
                     data.value -= maxValue;
                 }
-                if (!data.loops) {
-                    data.loops = minLoops;
-                }
+                data.loops ??= minLoops;
                 data.loops++;
             }
             else {
@@ -409,9 +311,7 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
                 else {
                     data.value += maxValue;
                 }
-                if (!data.loops) {
-                    data.loops = minLoops;
-                }
+                data.loops ??= minLoops;
                 data.loops++;
             }
             else {
@@ -422,15 +322,10 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
         data.velocity *= decay;
     }
     checkDestroy(particle, destroyType, data.value, minValue, maxValue);
-    if (!particle.destroyed) {
-        data.value = clamp(data.value, minValue, maxValue);
-    }
+    data.value = clamp(data.value, minValue, maxValue);
 }
 export function cloneStyle(style) {
-    const clonedStyle = document.createElement("div").style;
-    if (!style) {
-        return clonedStyle;
-    }
+    const clonedStyle = safeDocument().createElement("div").style;
     for (const key in style) {
         const styleKey = style[key];
         if (!Object.prototype.hasOwnProperty.call(style, key) || isNull(styleKey)) {
@@ -442,16 +337,16 @@ export function cloneStyle(style) {
         }
         const stylePriority = style.getPropertyPriority?.(styleKey);
         if (!stylePriority) {
-            clonedStyle.setProperty?.(styleKey, styleValue);
+            clonedStyle.setProperty(styleKey, styleValue);
         }
         else {
-            clonedStyle.setProperty?.(styleKey, styleValue, stylePriority);
+            clonedStyle.setProperty(styleKey, styleValue, stylePriority);
         }
     }
     return clonedStyle;
 }
 function computeFullScreenStyle(zIndex) {
-    const fullScreenStyle = document.createElement("div").style, radix = 10, style = {
+    const fullScreenStyle = safeDocument().createElement("div").style, radix = 10, style = {
         width: "100%",
         height: "100%",
         margin: "0",
@@ -465,6 +360,9 @@ function computeFullScreenStyle(zIndex) {
     };
     for (const key in style) {
         const value = style[key];
+        if (value === undefined) {
+            continue;
+        }
         fullScreenStyle.setProperty(key, value);
     }
     return fullScreenStyle;

package/esm/bundle.js

@@ -1,5 +1,5 @@
-import { init } from "./init.js";
-const tsParticles = init();
-window.tsParticles = tsParticles;
+import { initEngine } from "./initEngine.js";
+const tsParticles = initEngine();
+globalThis.tsParticles = tsParticles;
 export * from "./exports.js";
 export { tsParticles };

package/esm/export-types.js

@@ -1,99 +1 @@
-export * from "./Core/Interfaces/Colors.js";
-export * from "./Core/Interfaces/IBounds.js";
-export * from "./Core/Interfaces/IBubbleParticleData.js";
-export * from "./Core/Interfaces/ICircleBouncer.js";
-export * from "./Core/Interfaces/IColorManager.js";
-export * from "./Core/Interfaces/IContainerInteractivity.js";
-export * from "./Core/Interfaces/IContainerPlugin.js";
-export * from "./Core/Interfaces/ICoordinates.js";
-export * from "./Core/Interfaces/IDelta.js";
-export * from "./Core/Interfaces/IDimension.js";
-export * from "./Core/Interfaces/IDistance.js";
-export * from "./Core/Interfaces/IDrawParticleParams.js";
-export * from "./Core/Interfaces/IEffectDrawer.js";
-export * from "./Core/Interfaces/IExternalInteractor.js";
-export * from "./Core/Interfaces/IInteractor.js";
-export * from "./Core/Interfaces/ILoadParams.js";
-export * from "./Core/Interfaces/IMouseData.js";
-export * from "./Core/Interfaces/IMovePathGenerator.js";
-export * from "./Core/Interfaces/IParticleColorStyle.js";
-export * from "./Core/Interfaces/IParticleHslAnimation.js";
-export * from "./Core/Interfaces/IParticleLife.js";
-export * from "./Core/Interfaces/IParticleMover.js";
-export * from "./Core/Interfaces/IParticleRetinaProps.js";
-export * from "./Core/Interfaces/IParticleRoll.js";
-export * from "./Core/Interfaces/IParticleTransformValues.js";
-export * from "./Core/Interfaces/IParticleUpdater.js";
-export * from "./Core/Interfaces/IParticleValueAnimation.js";
-export * from "./Core/Interfaces/IParticlesInteractor.js";
-export * from "./Core/Interfaces/IPlugin.js";
-export * from "./Core/Interfaces/IPositionFromSizeParams.js";
-export * from "./Core/Interfaces/IRangeValue.js";
-export * from "./Core/Interfaces/IRectSideResult.js";
-export * from "./Core/Interfaces/IShapeDrawData.js";
-export * from "./Core/Interfaces/IShapeDrawer.js";
-export * from "./Core/Interfaces/IShapeValues.js";
-export * from "./Core/Interfaces/ISlowParticleData.js";
-export * from "./Core/Interfaces/ITrailFillData.js";
-export * from "./Options/Interfaces/Background/IBackground.js";
-export * from "./Options/Interfaces/BackgroundMask/IBackgroundMask.js";
-export * from "./Options/Interfaces/BackgroundMask/IBackgroundMaskCover.js";
-export * from "./Options/Interfaces/FullScreen/IFullScreen.js";
-export * from "./Options/Interfaces/IAnimatable.js";
-export * from "./Options/Interfaces/IAnimatableColor.js";
-export * from "./Options/Interfaces/IAnimation.js";
-export * from "./Options/Interfaces/IColorAnimation.js";
-export * from "./Options/Interfaces/IHslAnimation.js";
-export * from "./Options/Interfaces/IManualParticle.js";
-export * from "./Options/Interfaces/IOptionLoader.js";
-export * from "./Options/Interfaces/IOptions.js";
-export * from "./Options/Interfaces/IOptionsColor.js";
-export * from "./Options/Interfaces/IResponsive.js";
-export * from "./Options/Interfaces/IValueWithRandom.js";
-export * from "./Options/Interfaces/Interactivity/Events/IClickEvent.js";
-export * from "./Options/Interfaces/Interactivity/Events/IDivEvent.js";
-export * from "./Options/Interfaces/Interactivity/Events/IEvents.js";
-export * from "./Options/Interfaces/Interactivity/Events/IHoverEvent.js";
-export * from "./Options/Interfaces/Interactivity/Events/IParallax.js";
-export * from "./Options/Interfaces/Interactivity/Events/IResizeEvent.js";
-export * from "./Options/Interfaces/Interactivity/Modes/IModeDiv.js";
-export * from "./Options/Interfaces/Interactivity/Modes/IModes.js";
-export * from "./Options/Interfaces/Interactivity/IInteractivity.js";
-export * from "./Options/Interfaces/Particles/Bounce/IParticlesBounce.js";
-export * from "./Options/Interfaces/Particles/Collisions/ICollisions.js";
-export * from "./Options/Interfaces/Particles/Collisions/ICollisionsAbsorb.js";
-export * from "./Options/Interfaces/Particles/Collisions/ICollisionsOverlap.js";
-export * from "./Options/Interfaces/Particles/Effect/IEffect.js";
-export * from "./Options/Interfaces/Particles/IParticlesOptions.js";
-export * from "./Options/Interfaces/Particles/IShadow.js";
-export * from "./Options/Interfaces/Particles/IStroke.js";
-export * from "./Options/Interfaces/Particles/Move/IMoveAttract.js";
-export * from "./Options/Interfaces/Particles/Move/IMove.js";
-export * from "./Options/Interfaces/Particles/Move/IMoveAngle.js";
-export * from "./Options/Interfaces/Particles/Move/IMoveCenter.js";
-export * from "./Options/Interfaces/Particles/Move/IMoveGravity.js";
-export * from "./Options/Interfaces/Particles/Move/Path/IMovePath.js";
-export * from "./Options/Interfaces/Particles/Move/IOutModes.js";
-export * from "./Options/Interfaces/Particles/Move/ISpin.js";
-export * from "./Options/Interfaces/Particles/Move/IMoveTrail.js";
-export * from "./Options/Interfaces/Particles/Number/IParticlesDensity.js";
-export * from "./Options/Interfaces/Particles/Number/IParticlesNumber.js";
-export * from "./Options/Interfaces/Particles/Number/IParticlesNumberLimit.js";
-export * from "./Options/Interfaces/Particles/Opacity/IOpacity.js";
-export * from "./Options/Interfaces/Particles/Opacity/IOpacityAnimation.js";
-export * from "./Options/Interfaces/Particles/Shape/IShape.js";
-export * from "./Options/Interfaces/Particles/Size/ISize.js";
-export * from "./Options/Interfaces/Particles/Size/ISizeAnimation.js";
-export * from "./Options/Interfaces/Particles/ZIndex/IZIndex.js";
-export * from "./Options/Interfaces/Theme/ITheme.js";
-export * from "./Options/Interfaces/Theme/IThemeDefault.js";
-export * from "./Types/CustomEventArgs.js";
-export * from "./Types/CustomEventListener.js";
-export * from "./Types/ExportResult.js";
-export * from "./Types/ISourceOptions.js";
-export * from "./Types/ParticlesGroups.js";
-export * from "./Types/PathOptions.js";
-export * from "./Types/RangeValue.js";
-export * from "./Types/RecursivePartial.js";
-export * from "./Types/ShapeData.js";
-export * from "./Types/SingleOrMultiple.js";
+export {};

package/esm/exports.js

@@ -8,7 +8,6 @@ export * from "./Enums/Directions/MoveDirection.js";
 export * from "./Enums/Directions/RotateDirection.js";
 export * from "./Enums/Directions/OutModeDirection.js";
 export * from "./Enums/Modes/AnimationMode.js";
-export * from "./Enums/Modes/CollisionMode.js";
 export * from "./Enums/Modes/LimitMode.js";
 export * from "./Enums/Modes/OutMode.js";
 export * from "./Enums/Modes/PixelMode.js";
@@ -28,8 +27,6 @@ export * from "./Enums/InteractivityDetect.js";
 export * from "./Options/Classes/AnimatableColor.js";
 export * from "./Options/Classes/AnimationOptions.js";
 export * from "./Options/Classes/Background/Background.js";
-export * from "./Options/Classes/BackgroundMask/BackgroundMask.js";
-export * from "./Options/Classes/BackgroundMask/BackgroundMaskCover.js";
 export * from "./Options/Classes/ColorAnimation.js";
 export * from "./Options/Classes/FullScreen/FullScreen.js";
 export * from "./Options/Classes/HslAnimation.js";
@@ -48,11 +45,7 @@ export * from "./Options/Classes/Options.js";
 export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor.js";
-export * from "./Options/Classes/Particles/Collisions/Collisions.js";
-export * from "./Options/Classes/Particles/Collisions/CollisionsAbsorb.js";
-export * from "./Options/Classes/Particles/Collisions/CollisionsOverlap.js";
 export * from "./Options/Classes/Particles/ParticlesOptions.js";
-export * from "./Options/Classes/Particles/Shadow.js";
 export * from "./Options/Classes/Particles/Stroke.js";
 export * from "./Options/Classes/Particles/Move/MoveAttract.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
@@ -62,7 +55,6 @@ export * from "./Options/Classes/Particles/Move/MoveGravity.js";
 export * from "./Options/Classes/Particles/Move/OutModes.js";
 export * from "./Options/Classes/Particles/Move/Path/MovePath.js";
 export * from "./Options/Classes/Particles/Move/Spin.js";
-export * from "./Options/Classes/Particles/Move/MoveTrail.js";
 export * from "./Options/Classes/Particles/Number/ParticlesNumber.js";
 export * from "./Options/Classes/Particles/Number/ParticlesNumberLimit.js";
 export * from "./Options/Classes/Particles/Number/ParticlesDensity.js";
@@ -78,7 +70,8 @@ export * from "./Options/Classes/Theme/ThemeDefault.js";
 export * from "./Options/Classes/ValueWithRandom.js";
 export * from "./Utils/CanvasUtils.js";
 export * from "./Utils/ColorUtils.js";
-export * from "./Utils/NumberUtils.js";
+export * from "./Utils/LogUtils.js";
+export * from "./Utils/MathUtils.js";
 export * from "./Utils/OptionsUtils.js";
 export * from "./Utils/Utils.js";
 export * from "./Utils/TypeUtils.js";

package/esm/index.js

@@ -1,9 +1,5 @@
-import { init } from "./init.js";
-import { isSsr } from "./Utils/Utils.js";
-const tsParticles = init();
-if (!isSsr()) {
-    window.tsParticles = tsParticles;
-}
+import { initEngine } from "./initEngine.js";
+const tsParticles = initEngine();
+globalThis.tsParticles = tsParticles;
 export * from "./exports.js";
-export * from "./export-types.js";
 export { tsParticles };

package/esm/initEngine.js

@@ -0,0 +1,4 @@
+import { Engine } from "./Core/Engine.js";
+export function initEngine() {
+    return new Engine();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "3.9.1",
+  "version": "4.0.0-alpha.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": {
@@ -103,5 +103,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "type": "module"
 }