tsparticles 1.37.4 → 1.39.0

package/Core/Canvas.d.ts

@@ -13,11 +13,11 @@ export declare class Canvas {
     private originalStyle?;
     constructor(container: Container);
     init(): void;
-    loadCanvas(canvas: HTMLCanvasElement, generatedCanvas?: boolean): void;
+    loadCanvas(canvas: HTMLCanvasElement): void;
     destroy(): void;
     paint(): void;
     clear(): void;
-    windowResize(): void;
+    windowResize(): Promise<void>;
     resize(): void;
     drawConnectLine(p1: IParticle, p2: IParticle): void;
     drawGrabLine(particle: IParticle, lineColor: IRgb, opacity: number, mousePos: ICoordinates): void;

package/Core/Canvas.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
-const Utils_1 = require("../Utils");
+const Utils_1 = require("./Utils");
 const Utils_2 = require("../Utils");
 class Canvas {
     constructor(container) {
@@ -21,17 +21,17 @@ class Canvas {
         this.initBackground();
         this.paint();
     }
-    loadCanvas(canvas, generatedCanvas) {
+    loadCanvas(canvas) {
         var _a;
-        if (!canvas.className) {
-            canvas.className = Utils_1.Constants.canvasClass;
-        }
         if (this.generatedCanvas) {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
-        this.generatedCanvas = generatedCanvas !== null && generatedCanvas !== void 0 ? generatedCanvas : this.generatedCanvas;
+        this.generatedCanvas =
+            canvas.dataset && Utils_1.Constants.generatedAttribute in canvas.dataset
+                ? canvas.dataset[Utils_1.Constants.generatedAttribute] === "true"
+                : this.generatedCanvas;
         this.element = canvas;
-        this.originalStyle = (0, Utils_1.deepExtend)({}, this.element.style);
+        this.originalStyle = (0, Utils_2.deepExtend)({}, this.element.style);
         this.size.height = canvas.offsetHeight;
         this.size.width = canvas.offsetWidth;
         this.context = this.element.getContext("2d");
@@ -52,7 +52,7 @@ class Canvas {
         this.draw((ctx) => {
             if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
                 (0, Utils_2.clear)(ctx, this.size);
-                this.paintBase((0, Utils_1.getStyleFromRgb)(this.coverColor, this.coverColor.a));
+                this.paintBase((0, Utils_2.getStyleFromRgb)(this.coverColor, this.coverColor.a));
             }
             else {
                 this.paintBase();
@@ -66,7 +66,7 @@ class Canvas {
             this.paint();
         }
         else if (trail.enable && trail.length > 0 && this.trailFillColor) {
-            this.paintBase((0, Utils_1.getStyleFromRgb)(this.trailFillColor, 1 / trail.length));
+            this.paintBase((0, Utils_2.getStyleFromRgb)(this.trailFillColor, 1 / trail.length));
         }
         else {
             this.draw((ctx) => {
@@ -74,7 +74,7 @@ class Canvas {
             });
         }
     }
-    windowResize() {
+    async windowResize() {
         if (!this.element) {
             return;
         }
@@ -88,7 +88,7 @@ class Canvas {
             }
         }
         if (needsRefresh) {
-            container.refresh();
+            await container.refresh();
         }
     }
     resize() {
@@ -122,7 +122,7 @@ class Canvas {
             }
             const pos1 = p1.getPosition();
             const pos2 = p2.getPosition();
-            (0, Utils_1.drawConnectLine)(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
+            (0, Utils_2.drawConnectLine)(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
         });
     }
     drawGrabLine(particle, lineColor, opacity, mousePos) {
@@ -130,7 +130,7 @@ class Canvas {
         this.draw((ctx) => {
             var _a;
             const beginPos = particle.getPosition();
-            (0, Utils_1.drawGrabLine)(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
+            (0, Utils_2.drawGrabLine)(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
         });
     }
     drawParticle(particle, delta) {
@@ -148,7 +148,7 @@ class Canvas {
         const twinkle = pOptions.twinkle.particles;
         const twinkling = twinkle.enable && Math.random() < twinkle.frequency;
         if (!fColor || !sColor) {
-            const twinkleRgb = (0, Utils_1.colorToHsl)(twinkle.color);
+            const twinkleRgb = (0, Utils_2.colorToHsl)(twinkle.color);
             if (!fColor) {
                 fColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : pfColor ? pfColor : undefined;
             }
@@ -163,14 +163,14 @@ class Canvas {
         const opacity = twinkling ? twinkle.opacity : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
         const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
         const zOpacity = opacity * zOpacityFactor;
-        const fillColorValue = fColor ? (0, Utils_1.getStyleFromHsl)(fColor, zOpacity) : undefined;
+        const fillColorValue = fColor ? (0, Utils_2.getStyleFromHsl)(fColor, zOpacity) : undefined;
         if (!fillColorValue && !sColor) {
             return;
         }
         this.draw((ctx) => {
             const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
             const zStrokeOpacity = strokeOpacity * zOpacityFactor;
-            const strokeColorValue = sColor ? (0, Utils_1.getStyleFromHsl)(sColor, zStrokeOpacity) : fillColorValue;
+            const strokeColorValue = sColor ? (0, Utils_2.getStyleFromHsl)(sColor, zStrokeOpacity) : fillColorValue;
             if (radius <= 0) {
                 return;
             }
@@ -180,7 +180,7 @@ class Canvas {
                     updater.beforeDraw(particle);
                 }
             }
-            (0, Utils_1.drawParticle)(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
+            (0, Utils_2.drawParticle)(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
             for (const updater of container.particles.updaters) {
                 if (updater.afterDraw) {
                     updater.afterDraw(particle);
@@ -190,12 +190,12 @@ class Canvas {
     }
     drawPlugin(plugin, delta) {
         this.draw((ctx) => {
-            (0, Utils_1.drawPlugin)(ctx, plugin, delta);
+            (0, Utils_2.drawPlugin)(ctx, plugin, delta);
         });
     }
     drawParticlePlugin(plugin, particle, delta) {
         this.draw((ctx) => {
-            (0, Utils_1.drawParticlePlugin)(ctx, plugin, particle, delta);
+            (0, Utils_2.drawParticlePlugin)(ctx, plugin, particle, delta);
         });
     }
     initBackground() {
@@ -207,8 +207,8 @@ class Canvas {
             return;
         }
         if (background.color) {
-            const color = (0, Utils_1.colorToRgb)(background.color);
-            elementStyle.backgroundColor = color ? (0, Utils_1.getStyleFromRgb)(color, background.opacity) : "";
+            const color = (0, Utils_2.colorToRgb)(background.color);
+            elementStyle.backgroundColor = color ? (0, Utils_2.getStyleFromRgb)(color, background.opacity) : "";
         }
         else {
             elementStyle.backgroundColor = "";
@@ -228,7 +228,7 @@ class Canvas {
         const options = this.container.actualOptions;
         const cover = options.backgroundMask.cover;
         const color = cover.color;
-        const coverRgb = (0, Utils_1.colorToRgb)(color);
+        const coverRgb = (0, Utils_2.colorToRgb)(color);
         if (coverRgb) {
             this.coverColor = {
                 r: coverRgb.r,
@@ -241,7 +241,7 @@ class Canvas {
     initTrail() {
         const options = this.container.actualOptions;
         const trail = options.particles.move.trail;
-        const fillColor = (0, Utils_1.colorToRgb)(trail.fillColor);
+        const fillColor = (0, Utils_2.colorToRgb)(trail.fillColor);
         if (fillColor) {
             const trail = options.particles.move.trail;
             this.trailFillColor = {
@@ -257,10 +257,10 @@ class Canvas {
         let sColor;
         for (const [, plugin] of this.container.plugins) {
             if (!fColor && plugin.particleFillColor) {
-                fColor = (0, Utils_1.colorToHsl)(plugin.particleFillColor(particle));
+                fColor = (0, Utils_2.colorToHsl)(plugin.particleFillColor(particle));
             }
             if (!sColor && plugin.particleStrokeColor) {
-                sColor = (0, Utils_1.colorToHsl)(plugin.particleStrokeColor(particle));
+                sColor = (0, Utils_2.colorToHsl)(plugin.particleStrokeColor(particle));
             }
             if (fColor && sColor) {
                 break;
@@ -275,13 +275,13 @@ class Canvas {
         }
         const originalStyle = this.originalStyle;
         if (options.fullScreen.enable) {
-            this.originalStyle = (0, Utils_1.deepExtend)({}, element.style);
-            element.style.position = "fixed";
-            element.style.zIndex = options.fullScreen.zIndex.toString(10);
-            element.style.top = "0";
-            element.style.left = "0";
-            element.style.width = "100%";
-            element.style.height = "100%";
+            this.originalStyle = (0, Utils_2.deepExtend)({}, element.style);
+            element.style.setProperty("position", "fixed", "important");
+            element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
+            element.style.setProperty("top", "0", "important");
+            element.style.setProperty("left", "0", "important");
+            element.style.setProperty("width", "100%", "important");
+            element.style.setProperty("height", "100%", "important");
         }
         else if (originalStyle) {
             element.style.position = originalStyle.position;
@@ -291,17 +291,27 @@ class Canvas {
             element.style.width = originalStyle.width;
             element.style.height = originalStyle.height;
         }
+        for (const key in options.style) {
+            if (!key || !options.style) {
+                continue;
+            }
+            const value = options.style[key];
+            if (!value) {
+                continue;
+            }
+            element.style.setProperty(key, value, "important");
+        }
     }
     paintBase(baseColor) {
         this.draw((ctx) => {
-            (0, Utils_1.paintBase)(ctx, this.size, baseColor);
+            (0, Utils_2.paintBase)(ctx, this.size, baseColor);
         });
     }
     lineStyle(p1, p2) {
         return this.draw((ctx) => {
             const options = this.container.actualOptions;
             const connectOptions = options.interactivity.modes.connect;
-            return (0, Utils_1.gradient)(ctx, p1, p2, connectOptions.links.opacity);
+            return (0, Utils_2.gradient)(ctx, p1, p2, connectOptions.links.opacity);
         });
     }
 }

package/Core/Container.d.ts

@@ -2,12 +2,11 @@ import { Canvas } from "./Canvas";
 import { Particles } from "./Particles";
 import { Retina } from "./Retina";
 import type { IOptions } from "../Options/Interfaces/IOptions";
-import { FrameManager } from "./FrameManager";
+import { FrameManager, Vector } from "./Utils";
 import type { RecursivePartial } from "../Types";
 import { Options } from "../Options/Classes/Options";
 import { Particle } from "./Particle";
-import { Vector } from "./Particle/Vector";
-import { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
+import type { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
 export declare class Container {
     readonly id: string;
     started: boolean;

package/Core/Container.js

@@ -4,10 +4,9 @@ exports.Container = void 0;
 const Canvas_1 = require("./Canvas");
 const Particles_1 = require("./Particles");
 const Retina_1 = require("./Retina");
-const FrameManager_1 = require("./FrameManager");
+const Utils_1 = require("./Utils");
 const Options_1 = require("../Options/Classes/Options");
-const Utils_1 = require("../Utils");
-const Vector_1 = require("./Particle/Vector");
+const Utils_2 = require("../Utils");
 class Container {
     constructor(id, sourceOptions, ...presets) {
         this.id = id;
@@ -26,11 +25,11 @@ class Container {
         this.retina = new Retina_1.Retina(this);
         this.canvas = new Canvas_1.Canvas(this);
         this.particles = new Particles_1.Particles(this);
-        this.drawer = new FrameManager_1.FrameManager(this);
+        this.drawer = new Utils_1.FrameManager(this);
         this.presets = presets;
         this.pathGenerator = {
             generate: () => {
-                const v = Vector_1.Vector.create(0, 0);
+                const v = Utils_1.Vector.create(0, 0);
                 v.length = Math.random();
                 v.angle = Math.random() * Math.PI * 2;
                 return v;
@@ -85,7 +84,7 @@ class Container {
     }
     pause() {
         if (this.drawAnimationFrame !== undefined) {
-            (0, Utils_1.cancelAnimation)()(this.drawAnimationFrame);
+            (0, Utils_2.cancelAnimation)()(this.drawAnimationFrame);
             delete this.drawAnimationFrame;
         }
         if (this.paused) {
@@ -102,7 +101,7 @@ class Container {
     }
     draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = (0, Utils_1.animate)()((timestamp) => {
+        this.drawAnimationFrame = (0, Utils_2.animate)()((timestamp) => {
             if (refreshTime) {
                 this.lastFrameTime = undefined;
                 refreshTime = false;
@@ -332,7 +331,7 @@ class Container {
         this.canvas.initBackground();
         this.canvas.resize();
         this.zLayers = this.actualOptions.zLayers;
-        this.duration = (0, Utils_1.getRangeValue)(this.actualOptions.duration);
+        this.duration = (0, Utils_2.getRangeValue)(this.actualOptions.duration);
         this.lifeTime = 0;
         this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 60;
         const availablePlugins = Utils_1.Plugins.getAvailablePlugins(this);

package/Core/Interfaces/ICircleBouncer.d.ts

@@ -1,4 +1,4 @@
-import type { Vector } from "../Particle/Vector";
+import type { Vector } from "../Utils";
 import type { ICoordinates } from "./ICoordinates";
 export interface ICircleBouncer {
     position: ICoordinates;

package/Core/Interfaces/IMovePathGenerator.d.ts

@@ -1,6 +1,6 @@
 import type { Container } from "../Container";
 import type { Particle } from "../Particle";
-import { Vector } from "../Particle/Vector";
+import { Vector } from "../Utils";
 export interface IMovePathGenerator {
     generate: (particle: Particle) => Vector;
     init: (container: Container) => void;

package/Core/Interfaces/IParticle.d.ts

@@ -7,7 +7,7 @@ import type { IBubbleParticleData } from "./IBubbleParticleData";
 import type { IParticles } from "../../Options/Interfaces/Particles/IParticles";
 import type { IHsl, IRgb } from "./Colors";
 import type { IParticleHslAnimation } from "./IParticleHslAnimation";
-import type { Vector } from "../Particle/Vector";
+import type { Vector } from "../Utils";
 import type { IParticleGradientAnimation } from "./IParticleGradientAnimation";
 import type { IParticleRetinaProps } from "./IParticleRetinaProps";
 import type { IParticleRoll } from "./IParticleRoll";

package/Core/Interfaces/index.d.ts

@@ -19,13 +19,15 @@ export * from "./IParticle";
 export * from "./IParticleGradientAnimation";
 export * from "./IParticleGradientColorAnimation";
 export * from "./IParticleHslAnimation";
+export * from "./IParticlesInteractor";
 export * from "./IParticleLife";
 export * from "./IParticleLoops";
 export * from "./IParticleRetinaProps";
+export * from "./IParticleRoll";
 export * from "./IParticleSpin";
 export * from "./IParticleUpdater";
 export * from "./IParticleValueAnimation";
-export * from "./IParticlesInteractor";
+export * from "./IParticleWobble";
 export * from "./IPlugin";
 export * from "./IRangeValue";
 export * from "./IRectSideResult";

package/Core/Interfaces/index.js

@@ -31,13 +31,15 @@ __exportStar(require("./IParticle"), exports);
 __exportStar(require("./IParticleGradientAnimation"), exports);
 __exportStar(require("./IParticleGradientColorAnimation"), exports);
 __exportStar(require("./IParticleHslAnimation"), exports);
+__exportStar(require("./IParticlesInteractor"), exports);
 __exportStar(require("./IParticleLife"), exports);
 __exportStar(require("./IParticleLoops"), exports);
 __exportStar(require("./IParticleRetinaProps"), exports);
+__exportStar(require("./IParticleRoll"), exports);
 __exportStar(require("./IParticleSpin"), exports);
 __exportStar(require("./IParticleUpdater"), exports);
 __exportStar(require("./IParticleValueAnimation"), exports);
-__exportStar(require("./IParticlesInteractor"), exports);
+__exportStar(require("./IParticleWobble"), exports);
 __exportStar(require("./IPlugin"), exports);
 __exportStar(require("./IRangeValue"), exports);
 __exportStar(require("./IRectSideResult"), exports);

package/Core/Loader.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
 const Container_1 = require("./Container");
 const Utils_1 = require("../Utils");
+const Utils_2 = require("./Utils");
 const tsParticlesDom = [];
 function fetchError(statusCode) {
     console.error(`Error tsParticles - fetch status: ${statusCode}`);
@@ -41,24 +42,19 @@ class Loader {
             }
         }
         let canvasEl;
-        let generatedCanvas;
         if (domContainer.tagName.toLowerCase() === "canvas") {
             canvasEl = domContainer;
-            generatedCanvas = false;
+            canvasEl.dataset[Utils_2.Constants.generatedAttribute] = "false";
         }
         else {
             const existingCanvases = domContainer.getElementsByTagName("canvas");
             if (existingCanvases.length) {
                 canvasEl = existingCanvases[0];
-                if (!canvasEl.className) {
-                    canvasEl.className = Utils_1.Constants.canvasClass;
-                }
-                generatedCanvas = false;
+                canvasEl.dataset[Utils_2.Constants.generatedAttribute] = "false";
             }
             else {
-                generatedCanvas = true;
                 canvasEl = document.createElement("canvas");
-                canvasEl.className = Utils_1.Constants.canvasClass;
+                canvasEl.dataset[Utils_2.Constants.generatedAttribute] = "true";
                 canvasEl.style.width = "100%";
                 canvasEl.style.height = "100%";
                 domContainer.appendChild(canvasEl);
@@ -71,7 +67,7 @@ class Loader {
         else {
             dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
     }

package/Core/Particle.d.ts

@@ -4,11 +4,8 @@ import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions"
 import { ShapeType } from "../Enums";
 import type { RecursivePartial } from "../Types";
 import type { Stroke } from "../Options/Classes/Particles/Stroke";
-import { Vector } from "./Particle/Vector";
-import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IRgb, IShapeValues, IParticleRetinaProps } from "./Interfaces";
-import { Vector3d } from "./Particle/Vector3d";
-import { IParticleRoll } from "./Interfaces/IParticleRoll";
-import { IParticleWobble } from "./Interfaces/IParticleWobble";
+import { Vector, Vector3d } from "./Utils";
+import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IRgb, IShapeValues, IParticleRetinaProps, IParticleRoll, IParticleWobble } from "./Interfaces";
 export declare class Particle implements IParticle {
     readonly id: number;
     readonly container: Container;

package/Core/Particle.js

@@ -3,10 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Particle = void 0;
 const ParticlesOptions_1 = require("../Options/Classes/Particles/ParticlesOptions");
 const Shape_1 = require("../Options/Classes/Particles/Shape/Shape");
-const Enums_1 = require("../Enums");
 const Utils_1 = require("../Utils");
-const Vector_1 = require("./Particle/Vector");
-const Vector3d_1 = require("./Particle/Vector3d");
+const Utils_2 = require("./Utils");
 const fixOutMode = (data) => {
     if ((0, Utils_1.isInArray)(data.outMode, data.checkModes) || (0, Utils_1.isInArray)(data.outMode, data.checkModes)) {
         if (data.coord > data.maxCoord - data.radius * 2) {
@@ -80,20 +78,20 @@ class Particle {
         };
         const sizeAnimation = sizeOptions.animation;
         if (sizeAnimation.enable) {
-            this.size.status = Enums_1.AnimationStatus.increasing;
+            this.size.status = 0;
             switch (sizeAnimation.startValue) {
-                case Enums_1.StartValueType.min:
+                case "min":
                     this.size.value = this.size.min;
-                    this.size.status = Enums_1.AnimationStatus.increasing;
+                    this.size.status = 0;
                     break;
-                case Enums_1.StartValueType.random:
+                case "random":
                     this.size.value = (0, Utils_1.randomInRange)(this.size) * pxRatio;
-                    this.size.status = Math.random() >= 0.5 ? Enums_1.AnimationStatus.increasing : Enums_1.AnimationStatus.decreasing;
+                    this.size.status = Math.random() >= 0.5 ? 0 : 1;
                     break;
-                case Enums_1.StartValueType.max:
+                case "max":
                 default:
                     this.size.value = this.size.max;
-                    this.size.status = Enums_1.AnimationStatus.decreasing;
+                    this.size.status = 1;
                     break;
             }
             this.size.velocity =
@@ -112,7 +110,7 @@ class Particle {
         this.moveDecay = 1 - (0, Utils_1.getRangeValue)(this.options.move.decay);
         this.position = this.calcPosition(container, position, (0, Utils_1.clamp)(zIndexValue, 0, container.zLayers));
         this.initialPosition = this.position.copy();
-        this.offset = Vector_1.Vector.origin;
+        this.offset = Utils_2.Vector.origin;
         const particles = container.particles;
         particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
         particles.lastZIndex = this.position.z;
@@ -120,7 +118,7 @@ class Particle {
         this.sides = 24;
         let drawer = container.drawers.get(this.shape);
         if (!drawer) {
-            drawer = Utils_1.Plugins.getShapeDrawer(this.shape);
+            drawer = Utils_2.Plugins.getShapeDrawer(this.shape);
             if (drawer) {
                 container.drawers.set(this.shape, drawer);
             }
@@ -144,7 +142,7 @@ class Particle {
             const distance = (0, Utils_1.getDistance)(pos, spinCenter);
             this.spin = {
                 center: spinCenter,
-                direction: this.velocity.x >= 0 ? Enums_1.RotateDirection.clockwise : Enums_1.RotateDirection.counterClockwise,
+                direction: this.velocity.x >= 0 ? "clockwise" : "counter-clockwise",
                 angle: this.velocity.angle,
                 radius: distance,
                 acceleration: (_j = this.retina.spinAcceleration) !== null && _j !== void 0 ? _j : (0, Utils_1.getRangeValue)(this.options.move.spin.acceleration),
@@ -234,7 +232,7 @@ class Particle {
             return;
         }
         const destroyOptions = this.options.destroy;
-        if (destroyOptions.mode === Enums_1.DestroyMode.split) {
+        if (destroyOptions.mode === "split") {
             this.split();
         }
     }
@@ -259,16 +257,16 @@ class Particle {
         for (const [, plugin] of container.plugins) {
             const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
             if (pluginPos !== undefined) {
-                return Vector3d_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+                return Utils_2.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
             }
         }
         const canvasSize = container.canvas.size;
-        const pos = Vector3d_1.Vector3d.create((_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height, zIndex);
+        const pos = Utils_2.Vector3d.create((_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height, zIndex);
         const radius = this.getRadius();
         const outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
             fixOutMode({
                 outMode,
-                checkModes: [Enums_1.OutMode.bounce, Enums_1.OutMode.bounceHorizontal],
+                checkModes: ["bounce", "bounce-horizontal"],
                 coord: pos.x,
                 maxCoord: container.canvas.size.width,
                 setCb: (value) => (pos.x += value),
@@ -277,7 +275,7 @@ class Particle {
         }, fixVertical = (outMode) => {
             fixOutMode({
                 outMode,
-                checkModes: [Enums_1.OutMode.bounce, Enums_1.OutMode.bounceVertical],
+                checkModes: ["bounce", "bounce-vertical"],
                 coord: pos.y,
                 maxCoord: container.canvas.size.height,
                 setCb: (value) => (pos.y += value),

package/Core/Particles.d.ts

@@ -1,9 +1,9 @@
 import type { Container } from "./Container";
 import { Particle } from "./Particle";
-import { QuadTree } from "../Utils";
 import type { RecursivePartial } from "../Types";
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
 import type { ICoordinates, IDelta, IMouseData, IParticle, IRgb } from "./Interfaces";
+import { QuadTree } from "./Utils";
 export declare class Particles {
     private readonly container;
     get count(): number;