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

package/cjs/Core/Particles.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Particles = void 0;
-const Utils_1 = require("../Utils/Utils");
-const InteractionManager_1 = require("./Utils/InteractionManager");
-const Particle_1 = require("./Particle");
-const Point_1 = require("./Utils/Point");
-const QuadTree_1 = require("./Utils/QuadTree");
-const Rectangle_1 = require("./Utils/Rectangle");
-const Constants_1 = require("./Utils/Constants");
+const Utils_js_1 = require("../Utils/Utils.js");
+const InteractionManager_js_1 = require("./Utils/InteractionManager.js");
+const Particle_js_1 = require("./Particle.js");
+const Point_js_1 = require("./Utils/Point.js");
+const QuadTree_js_1 = require("./Utils/QuadTree.js");
+const Rectangle_js_1 = require("./Utils/Rectangle.js");
+const Constants_js_1 = require("./Utils/Constants.js");
 const qTreeCapacity = 4;
 const qTreeRectangle = (canvasSize) => {
-    return new Rectangle_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2);
+    return new Rectangle_js_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2);
 };
 class Particles {
     constructor(engine, container) {
@@ -42,7 +42,7 @@ class Particles {
                     particle.init(this._nextId, position, overrideOptions, group);
                 }
                 else {
-                    particle = new Particle_1.Particle(this._engine, this._nextId, this._container, position, overrideOptions, group);
+                    particle = new Particle_js_1.Particle(this._engine, this._nextId, this._container, position, overrideOptions, group);
                 }
                 let canAdd = true;
                 if (initializer) {
@@ -63,7 +63,7 @@ class Particles {
                 return particle;
             }
             catch (e) {
-                (0, Utils_1.getLogger)().warning(`${Constants_1.errorPrefix} adding particle: ${e}`);
+                (0, Utils_js_1.getLogger)().warning(`${Constants_js_1.errorPrefix} adding particle: ${e}`);
                 return;
             }
         };
@@ -73,8 +73,9 @@ 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,
@@ -93,9 +94,9 @@ class Particles {
         this.limit = 0;
         this.needsSort = false;
         this.lastZIndex = 0;
-        this._interactionManager = new InteractionManager_1.InteractionManager(engine, container);
+        this._interactionManager = new InteractionManager_js_1.InteractionManager(engine, container);
         const canvasSize = container.canvas.size;
-        this.quadTree = new QuadTree_1.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
+        this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
         this.movers = this._engine.getMovers(container, true);
         this.updaters = this._engine.getUpdaters(container, true);
     }
@@ -105,7 +106,7 @@ class Particles {
     addManualParticles() {
         const container = this._container, options = container.actualOptions;
         for (const particle of options.manualParticles) {
-            this.addParticle(particle.position ? (0, Utils_1.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);
+            this.addParticle(particle.position ? (0, Utils_js_1.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);
         }
     }
     addParticle(position, overrideOptions, group, initializer) {
@@ -175,7 +176,7 @@ 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++) {
@@ -221,7 +222,7 @@ class Particles {
     }
     async update(delta) {
         const container = this._container, particlesToDelete = new Set();
-        this.quadTree = new QuadTree_1.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
+        this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
         for (const [, pathGenerator] of container.pathGenerators) {
             pathGenerator.update();
         }
@@ -251,7 +252,7 @@ class Particles {
                 particlesToDelete.add(particle);
                 continue;
             }
-            this.quadTree.insert(new Point_1.Point(particle.getPosition(), particle));
+            this.quadTree.insert(new Point_js_1.Point(particle.getPosition(), particle));
         }
         if (particlesToDelete.size) {
             const checkDelete = (p) => !particlesToDelete.has(p);

package/cjs/Core/Retina.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Retina = void 0;
-const NumberUtils_1 = require("../Utils/NumberUtils");
-const Utils_1 = require("../Utils/Utils");
+const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
+const Utils_js_1 = require("../Utils/Utils.js");
 class Retina {
     constructor(container) {
         this.container = container;
@@ -11,7 +11,7 @@ class Retina {
     }
     init() {
         const container = this.container, options = container.actualOptions;
-        this.pixelRatio = !options.detectRetina || (0, Utils_1.isSsr)() ? 1 : window.devicePixelRatio;
+        this.pixelRatio = !options.detectRetina || (0, Utils_js_1.isSsr)() ? 1 : window.devicePixelRatio;
         this.reduceFactor = 1;
         const ratio = this.pixelRatio, canvas = container.canvas;
         if (canvas.element) {
@@ -20,20 +20,20 @@ class Retina {
             canvas.size.height = element.offsetHeight * ratio;
         }
         const particles = options.particles, moveOptions = particles.move;
-        this.attractDistance = (0, NumberUtils_1.getRangeValue)(moveOptions.attract.distance) * ratio;
-        this.maxSpeed = (0, NumberUtils_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
-        this.sizeAnimationSpeed = (0, NumberUtils_1.getRangeValue)(particles.size.animation.speed) * ratio;
+        this.attractDistance = (0, NumberUtils_js_1.getRangeValue)(moveOptions.attract.distance) * ratio;
+        this.maxSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
+        this.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(particles.size.animation.speed) * ratio;
     }
     initParticle(particle) {
         const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
-        props.attractDistance = (0, NumberUtils_1.getRangeValue)(moveOptions.attract.distance) * ratio;
-        props.moveDrift = (0, NumberUtils_1.getRangeValue)(moveOptions.drift) * ratio;
-        props.moveSpeed = (0, NumberUtils_1.getRangeValue)(moveOptions.speed) * ratio;
-        props.sizeAnimationSpeed = (0, NumberUtils_1.getRangeValue)(options.size.animation.speed) * ratio;
+        props.attractDistance = (0, NumberUtils_js_1.getRangeValue)(moveOptions.attract.distance) * ratio;
+        props.moveDrift = (0, NumberUtils_js_1.getRangeValue)(moveOptions.drift) * ratio;
+        props.moveSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.speed) * ratio;
+        props.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(options.size.animation.speed) * ratio;
         const maxDistance = props.maxDistance;
         maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
         maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-        props.maxSpeed = (0, NumberUtils_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
+        props.maxSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
     }
 }
 exports.Retina = Retina;

package/cjs/Core/Utils/Circle.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Circle = void 0;
-const Range_1 = require("./Range");
-const Rectangle_1 = require("./Rectangle");
-const NumberUtils_1 = require("../../Utils/NumberUtils");
-class Circle extends Range_1.Range {
+const Range_js_1 = require("./Range.js");
+const Rectangle_js_1 = require("./Rectangle.js");
+const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
+class Circle extends Range_js_1.Range {
     constructor(x, y, radius) {
         super(x, y);
         this.radius = radius;
     }
     contains(point) {
-        return (0, NumberUtils_1.getDistance)(point, this.position) <= this.radius;
+        return (0, NumberUtils_js_1.getDistance)(point, this.position) <= this.radius;
     }
     intersects(range) {
         const pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;
@@ -18,7 +18,7 @@ class Circle extends Range_1.Range {
             const rSum = r + range.radius, dist = Math.sqrt(distPos.x ** 2 + distPos.y ** 2);
             return rSum > dist;
         }
-        else if (range instanceof Rectangle_1.Rectangle) {
+        else if (range instanceof Rectangle_js_1.Rectangle) {
             const { width, height } = range.size, edges = Math.pow(distPos.x - width, 2) + Math.pow(distPos.y - height, 2);
             return (edges <= r ** 2 ||
                 (distPos.x <= r + width && distPos.y <= r + height) ||

package/cjs/Core/Utils/EventListeners.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EventListeners = void 0;
-const Utils_1 = require("../../Utils/Utils");
-const Constants_1 = require("./Constants");
+const Utils_js_1 = require("../../Utils/Utils.js");
+const Constants_js_1 = require("./Constants.js");
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };
-        if ((0, Utils_1.isBoolean)(options)) {
+        if ((0, Utils_js_1.isBoolean)(options)) {
             addOptions.capture = options;
         }
         else if (options !== undefined) {
@@ -32,7 +32,7 @@ class EventListeners {
                 mouseInteractivity.clickPosition = { ...mousePos };
                 mouseInteractivity.clickTime = new Date().getTime();
                 const onClick = options.interactivity.events.onClick;
-                (0, Utils_1.executeOnSingleOrMultiple)(onClick.mode, (mode) => this.container.handleClickMode(mode));
+                (0, Utils_js_1.executeOnSingleOrMultiple)(onClick.mode, (mode) => this.container.handleClickMode(mode));
             }
             if (e.type === "touchend") {
                 setTimeout(() => this._mouseTouchFinish(), 500);
@@ -87,26 +87,26 @@ class EventListeners {
             if (!(options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable)) {
                 return;
             }
-            manageListener(interactivityEl, Constants_1.mouseMoveEvent, handlers.mouseMove, add);
-            manageListener(interactivityEl, Constants_1.touchStartEvent, handlers.touchStart, add);
-            manageListener(interactivityEl, Constants_1.touchMoveEvent, handlers.touchMove, add);
+            manageListener(interactivityEl, Constants_js_1.mouseMoveEvent, handlers.mouseMove, add);
+            manageListener(interactivityEl, Constants_js_1.touchStartEvent, handlers.touchStart, add);
+            manageListener(interactivityEl, Constants_js_1.touchMoveEvent, handlers.touchMove, add);
             if (!options.interactivity.events.onClick.enable) {
-                manageListener(interactivityEl, Constants_1.touchEndEvent, handlers.touchEnd, add);
+                manageListener(interactivityEl, Constants_js_1.touchEndEvent, handlers.touchEnd, add);
             }
             else {
-                manageListener(interactivityEl, Constants_1.touchEndEvent, handlers.touchEndClick, add);
-                manageListener(interactivityEl, Constants_1.mouseUpEvent, handlers.mouseUp, add);
-                manageListener(interactivityEl, Constants_1.mouseDownEvent, handlers.mouseDown, add);
+                manageListener(interactivityEl, Constants_js_1.touchEndEvent, handlers.touchEndClick, add);
+                manageListener(interactivityEl, Constants_js_1.mouseUpEvent, handlers.mouseUp, add);
+                manageListener(interactivityEl, Constants_js_1.mouseDownEvent, handlers.mouseDown, add);
             }
             manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
-            manageListener(interactivityEl, Constants_1.touchCancelEvent, handlers.touchCancel, add);
+            manageListener(interactivityEl, Constants_js_1.touchCancelEvent, handlers.touchCancel, add);
         };
         this._manageListeners = (add) => {
             const handlers = this._handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn, canvasEl = container.canvas.element;
-            let mouseLeaveTmpEvent = Constants_1.mouseLeaveEvent;
+            let mouseLeaveTmpEvent = Constants_js_1.mouseLeaveEvent;
             if (detectType === "window") {
                 container.interactivity.element = window;
-                mouseLeaveTmpEvent = Constants_1.mouseOutEvent;
+                mouseLeaveTmpEvent = Constants_js_1.mouseOutEvent;
             }
             else if (detectType === "parent" && canvasEl) {
                 container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;
@@ -118,11 +118,11 @@ class EventListeners {
             this._manageResize(add);
             this._manageInteractivityListeners(mouseLeaveTmpEvent, add);
             if (document) {
-                manageListener(document, Constants_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
+                manageListener(document, Constants_js_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
             }
         };
         this._manageMediaMatch = (add) => {
-            const handlers = this._handlers, mediaMatch = (0, Utils_1.safeMatchMedia)("(prefers-color-scheme: dark)");
+            const handlers = this._handlers, mediaMatch = (0, Utils_js_1.safeMatchMedia)("(prefers-color-scheme: dark)");
             if (!mediaMatch) {
                 return;
             }
@@ -146,7 +146,7 @@ class EventListeners {
                 return;
             }
             if (typeof ResizeObserver === "undefined") {
-                manageListener(window, Constants_1.resizeEvent, handlers.resize, add);
+                manageListener(window, Constants_js_1.resizeEvent, handlers.resize, add);
                 return;
             }
             const canvasEl = container.canvas.element;
@@ -208,7 +208,7 @@ class EventListeners {
             delete mouse.position;
             delete mouse.clickPosition;
             delete mouse.downPosition;
-            interactivity.status = Constants_1.mouseLeaveEvent;
+            interactivity.status = Constants_js_1.mouseLeaveEvent;
             mouse.inside = false;
             mouse.clicking = false;
         };
@@ -270,7 +270,7 @@ class EventListeners {
                 pos.y *= pxRatio;
             }
             interactivity.mouse.position = pos;
-            interactivity.status = Constants_1.mouseMoveEvent;
+            interactivity.status = Constants_js_1.mouseMoveEvent;
         };
         this._touchEnd = (e) => {
             const evt = e, touches = Array.from(evt.changedTouches);

package/cjs/Core/Utils/QuadTree.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuadTree = void 0;
-const Circle_1 = require("./Circle");
-const Rectangle_1 = require("./Rectangle");
-const NumberUtils_1 = require("../../Utils/NumberUtils");
+const Circle_js_1 = require("./Circle.js");
+const Rectangle_js_1 = require("./Rectangle.js");
+const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
 class QuadTree {
     constructor(rectangle, capacity) {
         this.rectangle = rectangle;
@@ -11,7 +11,7 @@ class QuadTree {
         this._subdivide = () => {
             const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
             for (let i = 0; i < 4; i++) {
-                this._subs.push(new QuadTree(new Rectangle_1.Rectangle(x + (width / 2) * (i % 2), y + (height / 2) * (Math.round(i / 2) - (i % 2)), width / 2, height / 2), capacity));
+                this._subs.push(new QuadTree(new Rectangle_js_1.Rectangle(x + (width / 2) * (i % 2), y + (height / 2) * (Math.round(i / 2) - (i % 2)), width / 2, height / 2), capacity));
             }
             this._divided = true;
         };
@@ -39,7 +39,7 @@ class QuadTree {
         }
         for (const p of this._points) {
             if (!range.contains(p.position) &&
-                (0, NumberUtils_1.getDistance)(range.position, p.position) > p.particle.getRadius() &&
+                (0, NumberUtils_js_1.getDistance)(range.position, p.position) > p.particle.getRadius() &&
                 (!check || check(p.particle))) {
                 continue;
             }
@@ -53,10 +53,10 @@ class QuadTree {
         return res;
     }
     queryCircle(position, radius, check) {
-        return this.query(new Circle_1.Circle(position.x, position.y, radius), check);
+        return this.query(new Circle_js_1.Circle(position.x, position.y, radius), check);
     }
     queryRectangle(position, size, check) {
-        return this.query(new Rectangle_1.Rectangle(position.x, position.y, size.width, size.height), check);
+        return this.query(new Rectangle_js_1.Rectangle(position.x, position.y, size.width, size.height), check);
     }
 }
 exports.QuadTree = QuadTree;

package/cjs/Core/Utils/Rectangle.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Rectangle = void 0;
-const Circle_1 = require("./Circle");
-const Range_1 = require("./Range");
-class Rectangle extends Range_1.Range {
+const Circle_js_1 = require("./Circle.js");
+const Range_js_1 = require("./Range.js");
+class Rectangle extends Range_js_1.Range {
     constructor(x, y, width, height) {
         super(x, y);
         this.size = {
@@ -16,7 +16,7 @@ class Rectangle extends Range_1.Range {
         return point.x >= pos.x && point.x <= pos.x + w && point.y >= pos.y && point.y <= pos.y + h;
     }
     intersects(range) {
-        if (range instanceof Circle_1.Circle) {
+        if (range instanceof Circle_js_1.Circle) {
             range.intersects(this);
         }
         const w = this.size.width, h = this.size.height, pos1 = this.position, pos2 = range.position, size2 = range instanceof Rectangle ? range.size : { width: 0, height: 0 }, w2 = size2.width, h2 = size2.height;

package/cjs/Core/Utils/Vector.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Vector = void 0;
-const Vector3d_1 = require("./Vector3d");
-class Vector extends Vector3d_1.Vector3d {
+const Vector3d_js_1 = require("./Vector3d.js");
+class Vector extends Vector3d_js_1.Vector3d {
     constructor(xOrCoords, y) {
         super(xOrCoords, y, 0);
     }

package/cjs/Core/Utils/Vector3d.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Vector3d = void 0;
-const Constants_1 = require("./Constants");
-const Utils_1 = require("../../Utils/Utils");
+const Constants_js_1 = require("./Constants.js");
+const Utils_js_1 = require("../../Utils/Utils.js");
 class Vector3d {
     constructor(xOrCoords, y, z) {
         this._updateFromAngle = (angle, length) => {
             this.x = Math.cos(angle) * length;
             this.y = Math.sin(angle) * length;
         };
-        if (!(0, Utils_1.isNumber)(xOrCoords) && xOrCoords) {
+        if (!(0, Utils_js_1.isNumber)(xOrCoords) && xOrCoords) {
             this.x = xOrCoords.x;
             this.y = xOrCoords.y;
             const coords3d = xOrCoords;
@@ -21,7 +21,7 @@ class Vector3d {
             this.z = z ?? 0;
         }
         else {
-            throw new Error(`${Constants_1.errorPrefix} Vector3d not initialized correctly`);
+            throw new Error(`${Constants_js_1.errorPrefix} Vector3d not initialized correctly`);
         }
     }
     static get origin() {

package/cjs/Options/Classes/AnimatableColor.js

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnimatableColor = void 0;
-const Utils_1 = require("../../Utils/Utils");
-const HslAnimation_1 = require("./HslAnimation");
-const OptionsColor_1 = require("./OptionsColor");
-class AnimatableColor extends OptionsColor_1.OptionsColor {
+const Utils_js_1 = require("../../Utils/Utils.js");
+const HslAnimation_js_1 = require("./HslAnimation.js");
+const OptionsColor_js_1 = require("./OptionsColor.js");
+class AnimatableColor extends OptionsColor_js_1.OptionsColor {
     constructor() {
         super();
-        this.animation = new HslAnimation_1.HslAnimation();
+        this.animation = new HslAnimation_js_1.HslAnimation();
     }
     static create(source, data) {
         const color = new AnimatableColor();
         color.load(source);
         if (data !== undefined) {
-            if ((0, Utils_1.isString)(data) || (0, Utils_1.isArray)(data)) {
+            if ((0, Utils_js_1.isString)(data) || (0, Utils_js_1.isArray)(data)) {
                 color.load({ value: data });
             }
             else {

package/cjs/Options/Classes/AnimationOptions.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangedAnimationOptions = exports.AnimationOptions = void 0;
-const NumberUtils_1 = require("../../Utils/NumberUtils");
+const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
 class AnimationOptions {
     constructor() {
         this.count = 0;
@@ -16,19 +16,19 @@ class AnimationOptions {
             return;
         }
         if (data.count !== undefined) {
-            this.count = (0, NumberUtils_1.setRangeValue)(data.count);
+            this.count = (0, NumberUtils_js_1.setRangeValue)(data.count);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-            this.speed = (0, NumberUtils_1.setRangeValue)(data.speed);
+            this.speed = (0, NumberUtils_js_1.setRangeValue)(data.speed);
         }
         if (data.decay !== undefined) {
-            this.decay = (0, NumberUtils_1.setRangeValue)(data.decay);
+            this.decay = (0, NumberUtils_js_1.setRangeValue)(data.decay);
         }
         if (data.delay !== undefined) {
-            this.delay = (0, NumberUtils_1.setRangeValue)(data.delay);
+            this.delay = (0, NumberUtils_js_1.setRangeValue)(data.delay);
         }
         if (data.sync !== undefined) {
             this.sync = data.sync;

package/cjs/Options/Classes/Background/Background.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Background = void 0;
-const OptionsColor_1 = require("../OptionsColor");
+const OptionsColor_js_1 = require("../OptionsColor.js");
 class Background {
     constructor() {
-        this.color = new OptionsColor_1.OptionsColor();
+        this.color = new OptionsColor_js_1.OptionsColor();
         this.color.value = "";
         this.image = "";
         this.position = "";
@@ -17,7 +17,7 @@ class Background {
             return;
         }
         if (data.color !== undefined) {
-            this.color = OptionsColor_1.OptionsColor.create(this.color, data.color);
+            this.color = OptionsColor_js_1.OptionsColor.create(this.color, data.color);
         }
         if (data.image !== undefined) {
             this.image = data.image;

package/cjs/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackgroundMask = void 0;
-const BackgroundMaskCover_1 = require("./BackgroundMaskCover");
-const Utils_1 = require("../../../Utils/Utils");
+const BackgroundMaskCover_js_1 = require("./BackgroundMaskCover.js");
+const Utils_js_1 = require("../../../Utils/Utils.js");
 class BackgroundMask {
     constructor() {
         this.composite = "destination-out";
-        this.cover = new BackgroundMaskCover_1.BackgroundMaskCover();
+        this.cover = new BackgroundMaskCover_js_1.BackgroundMaskCover();
         this.enable = false;
     }
     load(data) {
@@ -18,7 +18,7 @@ class BackgroundMask {
         }
         if (data.cover !== undefined) {
             const cover = data.cover;
-            const color = ((0, Utils_1.isString)(data.cover) ? { color: data.cover } : data.cover);
+            const color = ((0, Utils_js_1.isString)(data.cover) ? { color: data.cover } : data.cover);
             this.cover.load(cover.color !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackgroundMaskCover = void 0;
-const OptionsColor_1 = require("../OptionsColor");
+const OptionsColor_js_1 = require("../OptionsColor.js");
 class BackgroundMaskCover {
     constructor() {
-        this.color = new OptionsColor_1.OptionsColor();
+        this.color = new OptionsColor_js_1.OptionsColor();
         this.color.value = "#fff";
         this.opacity = 1;
     }
@@ -13,7 +13,7 @@ class BackgroundMaskCover {
             return;
         }
         if (data.color !== undefined) {
-            this.color = OptionsColor_1.OptionsColor.create(this.color, data.color);
+            this.color = OptionsColor_js_1.OptionsColor.create(this.color, data.color);
         }
         if (data.opacity !== undefined) {
             this.opacity = data.opacity;

package/cjs/Options/Classes/ColorAnimation.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorAnimation = void 0;
-const NumberUtils_1 = require("../../Utils/NumberUtils");
+const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
 class ColorAnimation {
     constructor() {
         this.count = 0;
@@ -17,22 +17,22 @@ class ColorAnimation {
             return;
         }
         if (data.count !== undefined) {
-            this.count = (0, NumberUtils_1.setRangeValue)(data.count);
+            this.count = (0, NumberUtils_js_1.setRangeValue)(data.count);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
         if (data.offset !== undefined) {
-            this.offset = (0, NumberUtils_1.setRangeValue)(data.offset);
+            this.offset = (0, NumberUtils_js_1.setRangeValue)(data.offset);
         }
         if (data.speed !== undefined) {
-            this.speed = (0, NumberUtils_1.setRangeValue)(data.speed);
+            this.speed = (0, NumberUtils_js_1.setRangeValue)(data.speed);
         }
         if (data.decay !== undefined) {
-            this.decay = (0, NumberUtils_1.setRangeValue)(data.decay);
+            this.decay = (0, NumberUtils_js_1.setRangeValue)(data.decay);
         }
         if (data.delay !== undefined) {
-            this.delay = (0, NumberUtils_1.setRangeValue)(data.delay);
+            this.delay = (0, NumberUtils_js_1.setRangeValue)(data.delay);
         }
         if (data.sync !== undefined) {
             this.sync = data.sync;

package/cjs/Options/Classes/HslAnimation.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HslAnimation = void 0;
-const ColorAnimation_1 = require("./ColorAnimation");
+const ColorAnimation_js_1 = require("./ColorAnimation.js");
 class HslAnimation {
     constructor() {
-        this.h = new ColorAnimation_1.ColorAnimation();
-        this.s = new ColorAnimation_1.ColorAnimation();
-        this.l = new ColorAnimation_1.ColorAnimation();
+        this.h = new ColorAnimation_js_1.ColorAnimation();
+        this.s = new ColorAnimation_js_1.ColorAnimation();
+        this.l = new ColorAnimation_js_1.ColorAnimation();
     }
     load(data) {
         if (!data) {

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

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Events = void 0;
-const Utils_1 = require("../../../../Utils/Utils");
-const ClickEvent_1 = require("./ClickEvent");
-const DivEvent_1 = require("./DivEvent");
-const HoverEvent_1 = require("./HoverEvent");
-const ResizeEvent_1 = require("./ResizeEvent");
+const Utils_js_1 = require("../../../../Utils/Utils.js");
+const ClickEvent_js_1 = require("./ClickEvent.js");
+const DivEvent_js_1 = require("./DivEvent.js");
+const HoverEvent_js_1 = require("./HoverEvent.js");
+const ResizeEvent_js_1 = require("./ResizeEvent.js");
 class Events {
     constructor() {
-        this.onClick = new ClickEvent_1.ClickEvent();
-        this.onDiv = new DivEvent_1.DivEvent();
-        this.onHover = new HoverEvent_1.HoverEvent();
-        this.resize = new ResizeEvent_1.ResizeEvent();
+        this.onClick = new ClickEvent_js_1.ClickEvent();
+        this.onDiv = new DivEvent_js_1.DivEvent();
+        this.onHover = new HoverEvent_js_1.HoverEvent();
+        this.resize = new ResizeEvent_js_1.ResizeEvent();
     }
     load(data) {
         if (!data) {
@@ -20,14 +20,14 @@ class Events {
         this.onClick.load(data.onClick);
         const onDiv = data.onDiv;
         if (onDiv !== undefined) {
-            this.onDiv = (0, Utils_1.executeOnSingleOrMultiple)(onDiv, (t) => {
-                const tmp = new DivEvent_1.DivEvent();
+            this.onDiv = (0, Utils_js_1.executeOnSingleOrMultiple)(onDiv, (t) => {
+                const tmp = new DivEvent_js_1.DivEvent();
                 tmp.load(t);
                 return tmp;
             });
         }
         this.onHover.load(data.onHover);
-        if ((0, Utils_1.isBoolean)(data.resize)) {
+        if ((0, Utils_js_1.isBoolean)(data.resize)) {
             this.resize.enable = data.resize;
         }
         else {

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

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HoverEvent = void 0;
-const Parallax_1 = require("./Parallax");
+const Parallax_js_1 = require("./Parallax.js");
 class HoverEvent {
     constructor() {
         this.enable = false;
         this.mode = [];
-        this.parallax = new Parallax_1.Parallax();
+        this.parallax = new Parallax_js_1.Parallax();
     }
     load(data) {
         if (!data) {