@tsparticles/engine 3.0.0-beta.0 → 3.0.0-beta.2

package/README.md

@@ -11,11 +11,11 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
 [![npm](https://img.shields.io/npm/v/@tsparticles/engine?style=for-the-badge)](https://www.npmjs.com/package/tsparticles)
 [![npm](https://img.shields.io/npm/dm/tsparticles?style=for-the-badge)](https://www.npmjs.com/package/tsparticles)
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff?style=for-the-badge)](https://lerna.js.org/)
-[![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles)
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade)
+[![CodeFactor](https://www.codefactor.io/repository/github/tsparticles/tsparticles/badge)](https://www.codefactor.io/repository/github/tsparticles/tsparticles)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=tsparticles/tsparticles&utm_campaign=Badge_Grade)
 [![Rate this package](https://badges.openbase.com/js/rating/tsparticles.svg?style=openbase&token=A9jHQ1nkb6fnCndKM7O2w4hx3OD8PVCuqHtSpw8mMOg=)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js/tsparticles)
-[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles)
-[![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/tsparticles/tsparticles)
+[![Run on Repl.it](https://repl.it/badge/github/tsparticles/tsparticles)](https://repl.it/github/tsparticles/tsparticles)
 
 [![Discord](https://img.shields.io/discord/872061157379301416?label=discord&logo=discord&logoColor=white&style=for-the-badge)](https://discord.gg/hACwv45Hme)
 [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
@@ -114,7 +114,7 @@ particles.js
 it's even easier**.
 
 You'll find the
-instructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the
+instructions [below](https://github.com/tsparticles/tsparticles/blob/main/README.md#library-installation), with all the
 links you need, and _don't be scared by **TypeScript**, it's just the source language_.
 
 **The output files are just JavaScript**. 🤩
@@ -124,7 +124,7 @@ all
 files splitted for `import` syntax.
 
 **If you are interested** there are some _simple instructions_
-just [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to
+just [below](https://github.com/tsparticles/tsparticles/blob/main/README.md#library-installation) to guide you to
 migrate from the old particles.js library.
 
 ## **_Library installation_**
@@ -839,10 +839,10 @@ e --> u
 
 <p>  
     <a href="https://www.jetbrains.com/?from=tsParticles">  
-        <img src="https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png" height="150" alt="JetBrains" />  
+        <img src="https://raw.githubusercontent.com/tsparticles/tsparticles/gh-pages/images/jetbrains-logos/jetbrains-variant-4.png" height="150" alt="JetBrains" />  
     </a>  
     <a href="https://www.jetbrains.com/webstorm/?from=tsParticles">  
-        <img src="https://raw.githubusercontent.com/matteobruni/tsparticles/gh-pages/images/jetbrains-logos/logo.png" height="150" alt="JetBrains" />  
+        <img src="https://raw.githubusercontent.com/tsparticles/tsparticles/gh-pages/images/jetbrains-logos/logo.png" height="150" alt="JetBrains" />  
     </a>  
 </p>
 

package/browser/Core/Canvas.js

@@ -1,7 +1,7 @@
-import { clear, drawParticle, drawParticlePlugin, drawPlugin, paintBase, paintImage } from "../Utils/CanvasUtils";
-import { deepExtend, getLogger, safeMutationObserver } from "../Utils/Utils";
-import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils";
-import { generatedAttribute } from "./Utils/Constants";
+import { clear, drawParticle, drawParticlePlugin, drawPlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
+import { deepExtend, getLogger, safeMutationObserver } from "../Utils/Utils.js";
+import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
+import { generatedAttribute } from "./Utils/Constants.js";
 function setTransformValue(factor, newFactor, key) {
     const newValue = newFactor[key];
     if (newValue !== undefined) {

package/browser/Core/Container.js

@@ -1,12 +1,12 @@
-import { Canvas } from "./Canvas";
-import { EventListeners } from "./Utils/EventListeners";
-import { Options } from "../Options/Classes/Options";
-import { Particles } from "./Particles";
-import { Retina } from "./Retina";
-import { errorPrefix } from "./Utils/Constants";
-import { getLogger } from "../Utils/Utils";
-import { getRangeValue } from "../Utils/NumberUtils";
-import { loadOptions } from "../Utils/OptionsUtils";
+import { Canvas } from "./Canvas.js";
+import { EventListeners } from "./Utils/EventListeners.js";
+import { Options } from "../Options/Classes/Options.js";
+import { Particles } from "./Particles.js";
+import { Retina } from "./Retina.js";
+import { errorPrefix } from "./Utils/Constants.js";
+import { getLogger } from "../Utils/Utils.js";
+import { getRangeValue } from "../Utils/NumberUtils.js";
+import { loadOptions } from "../Utils/OptionsUtils.js";
 function guardCheck(container) {
     return container && !container.destroyed;
 }

package/browser/Core/Engine.js

@@ -1,8 +1,8 @@
-import { errorPrefix, generatedAttribute } from "./Utils/Constants";
-import { executeOnSingleOrMultiple, getLogger, isBoolean, isFunction, isString, itemFromSingleOrMultiple, } from "../Utils/Utils";
-import { Container } from "./Container";
-import { EventDispatcher } from "../Utils/EventDispatcher";
-import { getRandom } from "../Utils/NumberUtils";
+import { errorPrefix, generatedAttribute } from "./Utils/Constants.js";
+import { executeOnSingleOrMultiple, getLogger, isBoolean, isFunction, isString, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
+import { Container } from "./Container.js";
+import { EventDispatcher } from "../Utils/EventDispatcher.js";
+import { getRandom } from "../Utils/NumberUtils.js";
 function getItemsFromInitializer(container, map, initializers, force = false) {
     let res = map.get(container);
     if (!res || force) {
@@ -50,7 +50,7 @@ export class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.0";
+        return "3.0.0-beta.2";
     }
     addConfig(nameOrConfig, config) {
         if (isString(nameOrConfig)) {

package/browser/Core/Particle.js

@@ -1,12 +1,12 @@
-import { calcExactPositionOrRandomFromSize, clamp, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, getValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils";
-import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils";
-import { getHslFromAnimation, rangeColorToRgb } from "../Utils/ColorUtils";
-import { Interactivity } from "../Options/Classes/Interactivity/Interactivity";
-import { Vector } from "./Utils/Vector";
-import { Vector3d } from "./Utils/Vector3d";
-import { alterHsl } from "../Utils/CanvasUtils";
-import { errorPrefix } from "./Utils/Constants";
-import { loadParticlesOptions } from "../Utils/OptionsUtils";
+import { calcExactPositionOrRandomFromSize, clamp, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, getValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils.js";
+import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
+import { getHslFromAnimation, rangeColorToRgb } from "../Utils/ColorUtils.js";
+import { Interactivity } from "../Options/Classes/Interactivity/Interactivity.js";
+import { Vector } from "./Utils/Vector.js";
+import { Vector3d } from "./Utils/Vector3d.js";
+import { alterHsl } from "../Utils/CanvasUtils.js";
+import { errorPrefix } from "./Utils/Constants.js";
+import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 const fixOutMode = (data) => {
     if (!isInArray(data.outMode, data.checkModes)) {
         return;

package/browser/Core/Particles.js

@@ -1,10 +1,10 @@
-import { getLogger, getPosition } from "../Utils/Utils";
-import { InteractionManager } from "./Utils/InteractionManager";
-import { Particle } from "./Particle";
-import { Point } from "./Utils/Point";
-import { QuadTree } from "./Utils/QuadTree";
-import { Rectangle } from "./Utils/Rectangle";
-import { errorPrefix } from "./Utils/Constants";
+import { getLogger, getPosition } from "../Utils/Utils.js";
+import { InteractionManager } from "./Utils/InteractionManager.js";
+import { Particle } from "./Particle.js";
+import { Point } from "./Utils/Point.js";
+import { QuadTree } from "./Utils/QuadTree.js";
+import { Rectangle } from "./Utils/Rectangle.js";
+import { errorPrefix } from "./Utils/Constants.js";
 const qTreeCapacity = 4;
 const qTreeRectangle = (canvasSize) => {
     return new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2);
@@ -70,8 +70,9 @@ export class Particles {
                 return false;
             }
             particle.destroy(override);
+            const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, 1);
-            this._zArray = this._zArray.splice(this._zArray.indexOf(particle), 1);
+            this._zArray.splice(zIdx, 1);
             this.pool.push(particle);
             this._engine.dispatchEvent("particleRemoved", {
                 container: this._container,
@@ -172,7 +173,7 @@ export class Particles {
         }
         this.addManualParticles();
         if (!handled) {
-            const particlesOptions = options.particles, groups = options.particles.groups;
+            const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
                 const groupOptions = groups[group];
                 for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {

package/browser/Core/Retina.js

@@ -1,5 +1,5 @@
-import { getRangeValue } from "../Utils/NumberUtils";
-import { isSsr } from "../Utils/Utils";
+import { getRangeValue } from "../Utils/NumberUtils.js";
+import { isSsr } from "../Utils/Utils.js";
 export class Retina {
     constructor(container) {
         this.container = container;

package/browser/Core/Utils/Circle.js

@@ -1,6 +1,6 @@
-import { Range } from "./Range";
-import { Rectangle } from "./Rectangle";
-import { getDistance } from "../../Utils/NumberUtils";
+import { Range } from "./Range.js";
+import { Rectangle } from "./Rectangle.js";
+import { getDistance } from "../../Utils/NumberUtils.js";
 export class Circle extends Range {
     constructor(x, y, radius) {
         super(x, y);

package/browser/Core/Utils/EventListeners.js

@@ -1,5 +1,5 @@
-import { executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils";
-import { mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants";
+import { executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils.js";
+import { mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };

package/browser/Core/Utils/QuadTree.js

@@ -1,6 +1,6 @@
-import { Circle } from "./Circle";
-import { Rectangle } from "./Rectangle";
-import { getDistance } from "../../Utils/NumberUtils";
+import { Circle } from "./Circle.js";
+import { Rectangle } from "./Rectangle.js";
+import { getDistance } from "../../Utils/NumberUtils.js";
 export class QuadTree {
     constructor(rectangle, capacity) {
         this.rectangle = rectangle;

package/browser/Core/Utils/Rectangle.js

@@ -1,5 +1,5 @@
-import { Circle } from "./Circle";
-import { Range } from "./Range";
+import { Circle } from "./Circle.js";
+import { Range } from "./Range.js";
 export class Rectangle extends Range {
     constructor(x, y, width, height) {
         super(x, y);

package/browser/Core/Utils/Vector.js

@@ -1,4 +1,4 @@
-import { Vector3d } from "./Vector3d";
+import { Vector3d } from "./Vector3d.js";
 export class Vector extends Vector3d {
     constructor(xOrCoords, y) {
         super(xOrCoords, y, 0);

package/browser/Core/Utils/Vector3d.js

@@ -1,5 +1,5 @@
-import { errorPrefix } from "./Constants";
-import { isNumber } from "../../Utils/Utils";
+import { errorPrefix } from "./Constants.js";
+import { isNumber } from "../../Utils/Utils.js";
 export class Vector3d {
     constructor(xOrCoords, y, z) {
         this._updateFromAngle = (angle, length) => {

package/browser/Options/Classes/AnimatableColor.js

@@ -1,6 +1,6 @@
-import { isArray, isString } from "../../Utils/Utils";
-import { HslAnimation } from "./HslAnimation";
-import { OptionsColor } from "./OptionsColor";
+import { isArray, isString } from "../../Utils/Utils.js";
+import { HslAnimation } from "./HslAnimation.js";
+import { OptionsColor } from "./OptionsColor.js";
 export class AnimatableColor extends OptionsColor {
     constructor() {
         super();

package/browser/Options/Classes/AnimationOptions.js

@@ -1,4 +1,4 @@
-import { setRangeValue } from "../../Utils/NumberUtils";
+import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class AnimationOptions {
     constructor() {
         this.count = 0;

package/browser/Options/Classes/Background/Background.js

@@ -1,4 +1,4 @@
-import { OptionsColor } from "../OptionsColor";
+import { OptionsColor } from "../OptionsColor.js";
 export class Background {
     constructor() {
         this.color = new OptionsColor();

package/browser/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -1,5 +1,5 @@
-import { BackgroundMaskCover } from "./BackgroundMaskCover";
-import { isString } from "../../../Utils/Utils";
+import { BackgroundMaskCover } from "./BackgroundMaskCover.js";
+import { isString } from "../../../Utils/Utils.js";
 export class BackgroundMask {
     constructor() {
         this.composite = "destination-out";

package/browser/Options/Classes/BackgroundMask/BackgroundMaskCover.js

@@ -1,4 +1,4 @@
-import { OptionsColor } from "../OptionsColor";
+import { OptionsColor } from "../OptionsColor.js";
 export class BackgroundMaskCover {
     constructor() {
         this.color = new OptionsColor();

package/browser/Options/Classes/ColorAnimation.js

@@ -1,4 +1,4 @@
-import { setRangeValue } from "../../Utils/NumberUtils";
+import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class ColorAnimation {
     constructor() {
         this.count = 0;

package/browser/Options/Classes/HslAnimation.js

@@ -1,4 +1,4 @@
-import { ColorAnimation } from "./ColorAnimation";
+import { ColorAnimation } from "./ColorAnimation.js";
 export class HslAnimation {
     constructor() {
         this.h = new ColorAnimation();

package/browser/Options/Classes/Interactivity/Events/Events.js

@@ -1,8 +1,8 @@
-import { executeOnSingleOrMultiple, isBoolean } from "../../../../Utils/Utils";
-import { ClickEvent } from "./ClickEvent";
-import { DivEvent } from "./DivEvent";
-import { HoverEvent } from "./HoverEvent";
-import { ResizeEvent } from "./ResizeEvent";
+import { executeOnSingleOrMultiple, isBoolean } from "../../../../Utils/Utils.js";
+import { ClickEvent } from "./ClickEvent.js";
+import { DivEvent } from "./DivEvent.js";
+import { HoverEvent } from "./HoverEvent.js";
+import { ResizeEvent } from "./ResizeEvent.js";
 export class Events {
     constructor() {
         this.onClick = new ClickEvent();

package/browser/Options/Classes/Interactivity/Events/HoverEvent.js

@@ -1,4 +1,4 @@
-import { Parallax } from "./Parallax";
+import { Parallax } from "./Parallax.js";
 export class HoverEvent {
     constructor() {
         this.enable = false;

package/browser/Options/Classes/Interactivity/Interactivity.js

@@ -1,5 +1,5 @@
-import { Events } from "./Events/Events";
-import { Modes } from "./Modes/Modes";
+import { Events } from "./Events/Events.js";
+import { Modes } from "./Modes/Modes.js";
 export class Interactivity {
     constructor(engine, container) {
         this.detectsOn = "window";

package/browser/Options/Classes/ManualParticle.js

@@ -1,4 +1,4 @@
-import { deepExtend } from "../../Utils/Utils";
+import { deepExtend } from "../../Utils/Utils.js";
 export class ManualParticle {
     load(data) {
         if (!data) {

package/browser/Options/Classes/Options.js

@@ -1,13 +1,13 @@
-import { deepExtend, executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils";
-import { Background } from "./Background/Background";
-import { BackgroundMask } from "./BackgroundMask/BackgroundMask";
-import { FullScreen } from "./FullScreen/FullScreen";
-import { Interactivity } from "./Interactivity/Interactivity";
-import { ManualParticle } from "./ManualParticle";
-import { Responsive } from "./Responsive";
-import { Theme } from "./Theme/Theme";
-import { loadParticlesOptions } from "../../Utils/OptionsUtils";
-import { setRangeValue } from "../../Utils/NumberUtils";
+import { deepExtend, executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils.js";
+import { Background } from "./Background/Background.js";
+import { BackgroundMask } from "./BackgroundMask/BackgroundMask.js";
+import { FullScreen } from "./FullScreen/FullScreen.js";
+import { Interactivity } from "./Interactivity/Interactivity.js";
+import { ManualParticle } from "./ManualParticle.js";
+import { Responsive } from "./Responsive.js";
+import { Theme } from "./Theme/Theme.js";
+import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
+import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class Options {
     constructor(engine, container) {
         this._findDefaultTheme = (mode) => {

package/browser/Options/Classes/OptionsColor.js

@@ -1,4 +1,4 @@
-import { isArray, isString } from "../../Utils/Utils";
+import { isArray, isString } from "../../Utils/Utils.js";
 export class OptionsColor {
     constructor() {
         this.value = "";

package/browser/Options/Classes/Particles/Bounce/ParticlesBounce.js

@@ -1,4 +1,4 @@
-import { ParticlesBounceFactor } from "./ParticlesBounceFactor";
+import { ParticlesBounceFactor } from "./ParticlesBounceFactor.js";
 export class ParticlesBounce {
     constructor() {
         this.horizontal = new ParticlesBounceFactor();

package/browser/Options/Classes/Particles/Bounce/ParticlesBounceFactor.js

@@ -1,4 +1,4 @@
-import { ValueWithRandom } from "../../ValueWithRandom";
+import { ValueWithRandom } from "../../ValueWithRandom.js";
 export class ParticlesBounceFactor extends ValueWithRandom {
     constructor() {
         super();

package/browser/Options/Classes/Particles/Collisions/Collisions.js

@@ -1,7 +1,7 @@
-import { CollisionsAbsorb } from "./CollisionsAbsorb";
-import { CollisionsOverlap } from "./CollisionsOverlap";
-import { ParticlesBounce } from "../Bounce/ParticlesBounce";
-import { setRangeValue } from "../../../../Utils/NumberUtils";
+import { CollisionsAbsorb } from "./CollisionsAbsorb.js";
+import { CollisionsOverlap } from "./CollisionsOverlap.js";
+import { ParticlesBounce } from "../Bounce/ParticlesBounce.js";
+import { setRangeValue } from "../../../../Utils/NumberUtils.js";
 export class Collisions {
     constructor() {
         this.absorb = new CollisionsAbsorb();

package/browser/Options/Classes/Particles/Move/Move.js

@@ -1,13 +1,13 @@
-import { isNumber, isObject } from "../../../../Utils/Utils";
-import { MoveAngle } from "./MoveAngle";
-import { MoveAttract } from "./MoveAttract";
-import { MoveCenter } from "./MoveCenter";
-import { MoveGravity } from "./MoveGravity";
-import { MovePath } from "./Path/MovePath";
-import { MoveTrail } from "./MoveTrail";
-import { OutModes } from "./OutModes";
-import { Spin } from "./Spin";
-import { setRangeValue } from "../../../../Utils/NumberUtils";
+import { isNumber, isObject } from "../../../../Utils/Utils.js";
+import { MoveAngle } from "./MoveAngle.js";
+import { MoveAttract } from "./MoveAttract.js";
+import { MoveCenter } from "./MoveCenter.js";
+import { MoveGravity } from "./MoveGravity.js";
+import { MovePath } from "./Path/MovePath.js";
+import { MoveTrail } from "./MoveTrail.js";
+import { OutModes } from "./OutModes.js";
+import { Spin } from "./Spin.js";
+import { setRangeValue } from "../../../../Utils/NumberUtils.js";
 export class Move {
     constructor() {
         this.angle = new MoveAngle();

package/browser/Options/Classes/Particles/Move/MoveAngle.js

@@ -1,4 +1,4 @@
-import { setRangeValue } from "../../../../Utils/NumberUtils";
+import { setRangeValue } from "../../../../Utils/NumberUtils.js";
 export class MoveAngle {
     constructor() {
         this.offset = 0;

package/browser/Options/Classes/Particles/Move/MoveAttract.js

@@ -1,4 +1,4 @@
-import { setRangeValue } from "../../../../Utils/NumberUtils";
+import { setRangeValue } from "../../../../Utils/NumberUtils.js";
 export class MoveAttract {
     constructor() {
         this.distance = 200;

package/browser/Options/Classes/Particles/Move/MoveGravity.js

@@ -1,4 +1,4 @@
-import { setRangeValue } from "../../../../Utils/NumberUtils";
+import { setRangeValue } from "../../../../Utils/NumberUtils.js";
 export class MoveGravity {
     constructor() {
         this.acceleration = 9.81;

package/browser/Options/Classes/Particles/Move/MoveTrail.js

@@ -1,4 +1,4 @@
-import { MoveTrailFill } from "./MoveTrailFill";
+import { MoveTrailFill } from "./MoveTrailFill.js";
 export class MoveTrail {
     constructor() {
         this.enable = false;

package/browser/Options/Classes/Particles/Move/MoveTrailFill.js

@@ -1,4 +1,4 @@
-import { OptionsColor } from "../../OptionsColor";
+import { OptionsColor } from "../../OptionsColor.js";
 export class MoveTrailFill {
     load(data) {
         if (!data) {

package/browser/Options/Classes/Particles/Move/Path/MovePath.js

@@ -1,5 +1,5 @@
-import { ValueWithRandom } from "../../../ValueWithRandom";
-import { deepExtend } from "../../../../../Utils/Utils";
+import { ValueWithRandom } from "../../../ValueWithRandom.js";
+import { deepExtend } from "../../../../../Utils/Utils.js";
 export class MovePath {
     constructor() {
         this.clamp = true;

package/browser/Options/Classes/Particles/Move/Spin.js

@@ -1,5 +1,5 @@
-import { deepExtend } from "../../../../Utils/Utils";
-import { setRangeValue } from "../../../../Utils/NumberUtils";
+import { deepExtend } from "../../../../Utils/Utils.js";
+import { setRangeValue } from "../../../../Utils/NumberUtils.js";
 export class Spin {
     constructor() {
         this.acceleration = 0;

package/browser/Options/Classes/Particles/Number/ParticlesNumber.js

@@ -1,4 +1,4 @@
-import { ParticlesDensity } from "./ParticlesDensity";
+import { ParticlesDensity } from "./ParticlesDensity.js";
 export class ParticlesNumber {
     constructor() {
         this.density = new ParticlesDensity();

package/browser/Options/Classes/Particles/Opacity/Opacity.js

@@ -1,5 +1,5 @@
-import { OpacityAnimation } from "./OpacityAnimation";
-import { ValueWithRandom } from "../../ValueWithRandom";
+import { OpacityAnimation } from "./OpacityAnimation.js";
+import { ValueWithRandom } from "../../ValueWithRandom.js";
 export class Opacity extends ValueWithRandom {
     constructor() {
         super();

package/browser/Options/Classes/Particles/Opacity/OpacityAnimation.js

@@ -1,4 +1,4 @@
-import { RangedAnimationOptions } from "../../AnimationOptions";
+import { RangedAnimationOptions } from "../../AnimationOptions.js";
 export class OpacityAnimation extends RangedAnimationOptions {
     constructor() {
         super();

package/browser/Options/Classes/Particles/ParticlesOptions.js

@@ -1,15 +1,15 @@
-import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils";
-import { AnimatableColor } from "../AnimatableColor";
-import { Collisions } from "./Collisions/Collisions";
-import { Move } from "./Move/Move";
-import { Opacity } from "./Opacity/Opacity";
-import { ParticlesBounce } from "./Bounce/ParticlesBounce";
-import { ParticlesNumber } from "./Number/ParticlesNumber";
-import { Shadow } from "./Shadow";
-import { Shape } from "./Shape/Shape";
-import { Size } from "./Size/Size";
-import { Stroke } from "./Stroke";
-import { ZIndex } from "./ZIndex/ZIndex";
+import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
+import { AnimatableColor } from "../AnimatableColor.js";
+import { Collisions } from "./Collisions/Collisions.js";
+import { Move } from "./Move/Move.js";
+import { Opacity } from "./Opacity/Opacity.js";
+import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
+import { ParticlesNumber } from "./Number/ParticlesNumber.js";
+import { Shadow } from "./Shadow.js";
+import { Shape } from "./Shape/Shape.js";
+import { Size } from "./Size/Size.js";
+import { Stroke } from "./Stroke.js";
+import { ZIndex } from "./ZIndex/ZIndex.js";
 export class ParticlesOptions {
     constructor(engine, container) {
         this._engine = engine;

package/browser/Options/Classes/Particles/Shadow.js

@@ -1,4 +1,4 @@
-import { OptionsColor } from "../OptionsColor";
+import { OptionsColor } from "../OptionsColor.js";
 export class Shadow {
     constructor() {
         this.blur = 0;

package/browser/Options/Classes/Particles/Shape/Shape.js

@@ -1,4 +1,4 @@
-import { deepExtend } from "../../../../Utils/Utils";
+import { deepExtend } from "../../../../Utils/Utils.js";
 export class Shape {
     constructor() {
         this.close = true;

package/browser/Options/Classes/Particles/Size/Size.js

@@ -1,5 +1,5 @@
-import { SizeAnimation } from "./SizeAnimation";
-import { ValueWithRandom } from "../../ValueWithRandom";
+import { SizeAnimation } from "./SizeAnimation.js";
+import { ValueWithRandom } from "../../ValueWithRandom.js";
 export class Size extends ValueWithRandom {
     constructor() {
         super();

package/browser/Options/Classes/Particles/Size/SizeAnimation.js

@@ -1,4 +1,4 @@
-import { RangedAnimationOptions } from "../../AnimationOptions";
+import { RangedAnimationOptions } from "../../AnimationOptions.js";
 export class SizeAnimation extends RangedAnimationOptions {
     constructor() {
         super();

package/browser/Options/Classes/Particles/Stroke.js

@@ -1,5 +1,5 @@
-import { AnimatableColor } from "../AnimatableColor";
-import { setRangeValue } from "../../../Utils/NumberUtils";
+import { AnimatableColor } from "../AnimatableColor.js";
+import { setRangeValue } from "../../../Utils/NumberUtils.js";
 export class Stroke {
     constructor() {
         this.width = 0;

package/browser/Options/Classes/Particles/ZIndex/ZIndex.js

@@ -1,4 +1,4 @@
-import { ValueWithRandom } from "../../ValueWithRandom";
+import { ValueWithRandom } from "../../ValueWithRandom.js";
 export class ZIndex extends ValueWithRandom {
     constructor() {
         super();

package/browser/Options/Classes/Responsive.js

@@ -1,4 +1,4 @@
-import { deepExtend } from "../../Utils/Utils";
+import { deepExtend } from "../../Utils/Utils.js";
 export class Responsive {
     constructor() {
         this.maxWidth = Infinity;

package/browser/Options/Classes/Theme/Theme.js

@@ -1,5 +1,5 @@
-import { ThemeDefault } from "./ThemeDefault";
-import { deepExtend } from "../../../Utils/Utils";
+import { ThemeDefault } from "./ThemeDefault.js";
+import { deepExtend } from "../../../Utils/Utils.js";
 export class Theme {
     constructor() {
         this.name = "";

package/browser/Options/Classes/ValueWithRandom.js

@@ -1,7 +1,7 @@
-import { AnimationOptions, RangedAnimationOptions } from "./AnimationOptions";
-import { Random } from "./Random";
-import { isBoolean } from "../../Utils/Utils";
-import { setRangeValue } from "../../Utils/NumberUtils";
+import { AnimationOptions, RangedAnimationOptions } from "./AnimationOptions.js";
+import { Random } from "./Random.js";
+import { isBoolean } from "../../Utils/Utils.js";
+import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class ValueWithRandom {
     constructor() {
         this.random = new Random();