tsparticles 1.42.2 → 1.43.0

package/cjs/index.slim.js

@@ -0,0 +1,121 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pJSDom = exports.particlesJS = exports.tsParticles = exports.Main = exports.Engine = void 0;
+const engine_1 = require("./engine");
+Object.defineProperty(exports, "Engine", { enumerable: true, get: function () { return engine_1.Engine; } });
+Object.defineProperty(exports, "Main", { enumerable: true, get: function () { return engine_1.Engine; } });
+const pjs_1 = require("./pjs");
+const slim_1 = require("./slim");
+const tsParticles = new engine_1.Engine();
+exports.tsParticles = tsParticles;
+tsParticles.init();
+const { particlesJS, pJSDom, } = (0, pjs_1.initPjs)(tsParticles);
+exports.particlesJS = particlesJS;
+exports.pJSDom = pJSDom;
+(0, slim_1.loadSlim)(tsParticles);
+__exportStar(require("./Core/Interfaces/Colors"), exports);
+__exportStar(require("./Core/Interfaces/Gradients"), exports);
+__exportStar(require("./Core/Interfaces/IBounds"), exports);
+__exportStar(require("./Core/Interfaces/IBubbleParticleData"), exports);
+__exportStar(require("./Core/Interfaces/ICircleBouncer"), exports);
+__exportStar(require("./Core/Interfaces/IContainerInteractivity"), exports);
+__exportStar(require("./Core/Interfaces/IContainerPlugin"), exports);
+__exportStar(require("./Core/Interfaces/ICoordinates"), exports);
+__exportStar(require("./Core/Interfaces/IDelta"), exports);
+__exportStar(require("./Core/Interfaces/IDimension"), exports);
+__exportStar(require("./Core/Interfaces/IDistance"), exports);
+__exportStar(require("./Core/Interfaces/IExternalInteractor"), exports);
+__exportStar(require("./Core/Interfaces/IInteractor"), exports);
+__exportStar(require("./Core/Interfaces/IMouseData"), exports);
+__exportStar(require("./Core/Interfaces/IMovePathGenerator"), exports);
+__exportStar(require("./Core/Interfaces/IParticle"), exports);
+__exportStar(require("./Core/Interfaces/IParticleColorStyle"), exports);
+__exportStar(require("./Core/Interfaces/IParticleGravity"), exports);
+__exportStar(require("./Core/Interfaces/IParticleHslAnimation"), exports);
+__exportStar(require("./Core/Interfaces/IParticlesInteractor"), exports);
+__exportStar(require("./Core/Interfaces/IParticleLife"), exports);
+__exportStar(require("./Core/Interfaces/IParticleLoops"), exports);
+__exportStar(require("./Core/Interfaces/IParticleRetinaProps"), exports);
+__exportStar(require("./Core/Interfaces/IParticleRoll"), exports);
+__exportStar(require("./Core/Interfaces/IParticleSpin"), exports);
+__exportStar(require("./Core/Interfaces/IParticleUpdater"), exports);
+__exportStar(require("./Core/Interfaces/IParticleValueAnimation"), exports);
+__exportStar(require("./Core/Interfaces/IParticleWobble"), exports);
+__exportStar(require("./Core/Interfaces/IParticlesMover"), exports);
+__exportStar(require("./Core/Interfaces/IPlugin"), exports);
+__exportStar(require("./Core/Interfaces/IRangeValue"), exports);
+__exportStar(require("./Core/Interfaces/IRectSideResult"), exports);
+__exportStar(require("./Core/Interfaces/IShapeDrawer"), exports);
+__exportStar(require("./Core/Interfaces/IShapeValues"), exports);
+__exportStar(require("./Core/Utils/Circle"), exports);
+__exportStar(require("./Core/Utils/CircleWarp"), exports);
+__exportStar(require("./Core/Utils/Constants"), exports);
+__exportStar(require("./Core/Utils/EventListeners"), exports);
+__exportStar(require("./Core/Utils/ExternalInteractorBase"), exports);
+__exportStar(require("./Core/Utils/FrameManager"), exports);
+__exportStar(require("./Core/Utils/InteractionManager"), exports);
+__exportStar(require("./Core/Utils/ParticlesInteractorBase"), exports);
+__exportStar(require("./Core/Utils/Plugins"), exports);
+__exportStar(require("./Core/Utils/Point"), exports);
+__exportStar(require("./Core/Utils/QuadTree"), exports);
+__exportStar(require("./Core/Utils/Range"), exports);
+__exportStar(require("./Core/Utils/Rectangle"), exports);
+__exportStar(require("./Core/Utils/Vector"), exports);
+__exportStar(require("./Core/Utils/Vector3d"), exports);
+__exportStar(require("./Core/Canvas"), exports);
+__exportStar(require("./Core/Container"), exports);
+__exportStar(require("./Core/Loader"), exports);
+__exportStar(require("./Core/Particle"), exports);
+__exportStar(require("./Core/Particles"), exports);
+__exportStar(require("./Core/Retina"), exports);
+__exportStar(require("./Enums/Directions/MoveDirection"), exports);
+__exportStar(require("./Enums/Directions/RotateDirection"), exports);
+__exportStar(require("./Enums/Directions/OutModeDirection"), exports);
+__exportStar(require("./Enums/Directions/TiltDirection"), exports);
+__exportStar(require("./Enums/Modes/ClickMode"), exports);
+__exportStar(require("./Enums/Modes/DestroyMode"), exports);
+__exportStar(require("./Enums/Modes/DivMode"), exports);
+__exportStar(require("./Enums/Modes/HoverMode"), exports);
+__exportStar(require("./Enums/Modes/CollisionMode"), exports);
+__exportStar(require("./Enums/Modes/OutMode"), exports);
+__exportStar(require("./Enums/Modes/RollMode"), exports);
+__exportStar(require("./Enums/Modes/SizeMode"), exports);
+__exportStar(require("./Enums/Modes/ThemeMode"), exports);
+__exportStar(require("./Enums/Modes/ResponsiveMode"), exports);
+__exportStar(require("./Enums/Types/AlterType"), exports);
+__exportStar(require("./Enums/Types/DestroyType"), exports);
+__exportStar(require("./Enums/Types/GradientType"), exports);
+__exportStar(require("./Enums/Types/InteractorType"), exports);
+__exportStar(require("./Enums/Types/ShapeType"), exports);
+__exportStar(require("./Enums/Types/StartValueType"), exports);
+__exportStar(require("./Enums/Types/DivType"), exports);
+__exportStar(require("./Enums/Types/EasingType"), exports);
+__exportStar(require("./Enums/AnimationStatus"), exports);
+__exportStar(require("./Enums/InteractivityDetect"), exports);
+__exportStar(require("./Options/Classes/Options"), exports);
+__exportStar(require("./Options/Classes/OptionsColor"), exports);
+__exportStar(require("./Options/Interfaces/IOptionLoader"), exports);
+__exportStar(require("./Types/RangeValue"), exports);
+__exportStar(require("./Types/RecursivePartial"), exports);
+__exportStar(require("./Types/ShapeData"), exports);
+__exportStar(require("./Types/ShapeDrawerFunctions"), exports);
+__exportStar(require("./Types/SingleOrMultiple"), exports);
+__exportStar(require("./Types/PathOptions"), exports);
+__exportStar(require("./Utils/CanvasUtils"), exports);
+__exportStar(require("./Utils/ColorUtils"), exports);
+__exportStar(require("./Utils/NumberUtils"), exports);
+__exportStar(require("./Utils/Utils"), exports);

package/cjs/slim.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadSlim = void 0;
+const Angle_1 = require("./Updaters/Angle");
+const Base_1 = require("./Movers/Base");
+const Circle_1 = require("./Shapes/Circle");
+const Color_1 = require("./Updaters/Color");
+const Attract_1 = require("./Interactions/External/Attract");
+const Bounce_1 = require("./Interactions/External/Bounce");
+const Bubble_1 = require("./Interactions/External/Bubble");
+const Connect_1 = require("./Interactions/External/Connect");
+const Grab_1 = require("./Interactions/External/Grab");
+const Pause_1 = require("./Interactions/External/Pause");
+const Push_1 = require("./Interactions/External/Push");
+const Remove_1 = require("./Interactions/External/Remove");
+const Repulse_1 = require("./Interactions/External/Repulse");
+const Image_1 = require("./Shapes/Image");
+const Life_1 = require("./Updaters/Life");
+const Line_1 = require("./Shapes/Line");
+const Opacity_1 = require("./Updaters/Opacity");
+const OutModes_1 = require("./Updaters/OutModes");
+const Parallax_1 = require("./Movers/Parallax");
+const Attract_2 = require("./Interactions/Particles/Attract");
+const Collisions_1 = require("./Interactions/Particles/Collisions");
+const Links_1 = require("./Interactions/Particles/Links");
+const Polygon_1 = require("./Shapes/Polygon");
+const Size_1 = require("./Updaters/Size");
+const Square_1 = require("./Shapes/Square");
+const Star_1 = require("./Shapes/Star");
+const StrokeColor_1 = require("./Updaters/StrokeColor");
+const Text_1 = require("./Shapes/Text");
+async function loadSlim(engine) {
+    await (0, Base_1.loadBaseMover)(engine);
+    await (0, Parallax_1.loadParallaxMover)(engine);
+    await (0, Attract_1.loadExternalAttractInteraction)(engine);
+    await (0, Bounce_1.loadExternalBounceInteraction)(engine);
+    await (0, Bubble_1.loadExternalBubbleInteraction)(engine);
+    await (0, Connect_1.loadExternalConnectInteraction)(engine);
+    await (0, Grab_1.loadExternalGrabInteraction)(engine);
+    await (0, Pause_1.loadExternalPauseInteraction)(engine);
+    await (0, Push_1.loadExternalPushInteraction)(engine);
+    await (0, Remove_1.loadExternalRemoveInteraction)(engine);
+    await (0, Repulse_1.loadExternalRepulseInteraction)(engine);
+    await (0, Attract_2.loadParticlesAttractInteraction)(engine);
+    await (0, Collisions_1.loadParticlesCollisionsInteraction)(engine);
+    await (0, Links_1.loadParticlesLinksInteraction)(engine);
+    await (0, Circle_1.loadCircleShape)(engine);
+    await (0, Image_1.loadImageShape)(engine);
+    await (0, Line_1.loadLineShape)(engine);
+    await (0, Polygon_1.loadPolygonShape)(engine);
+    await (0, Square_1.loadSquareShape)(engine);
+    await (0, Star_1.loadStarShape)(engine);
+    await (0, Text_1.loadTextShape)(engine);
+    await (0, Life_1.loadLifeUpdater)(engine);
+    await (0, Opacity_1.loadOpacityUpdater)(engine);
+    await (0, Size_1.loadSizeUpdater)(engine);
+    await (0, Angle_1.loadAngleUpdater)(engine);
+    await (0, Color_1.loadColorUpdater)(engine);
+    await (0, StrokeColor_1.loadStrokeColorUpdater)(engine);
+    await (0, OutModes_1.loadOutModesUpdater)(engine);
+}
+exports.loadSlim = loadSlim;

package/esm/Core/Canvas.js

@@ -1,5 +1,7 @@
-import { clear, colorToHsl, colorToRgb, deepExtend, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, getRangeValue, getStyleFromHsl, getStyleFromRgb, gradient, paintBase, } from "../Utils";
-import { Constants } from "./Utils";
+import { clear, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, gradient, paintBase, } from "../Utils/CanvasUtils";
+import { colorToHsl, colorToRgb, getStyleFromHsl, getStyleFromRgb } from "../Utils/ColorUtils";
+import { Constants } from "./Utils/Constants";
+import { deepExtend } from "../Utils/Utils";
 export class Canvas {
     constructor(container) {
         this.container = container;
@@ -57,8 +59,7 @@ export class Canvas {
         });
     }
     clear() {
-        const options = this.container.actualOptions;
-        const trail = options.particles.move.trail;
+        const options = this.container.actualOptions, trail = options.particles.move.trail;
         if (options.backgroundMask.enable) {
             this.paint();
         }
@@ -75,9 +76,8 @@ export class Canvas {
         if (!this.element) {
             return;
         }
-        const container = this.container;
         this.resize();
-        const needsRefresh = container.updateActualOptions();
+        const container = this.container, needsRefresh = container.updateActualOptions();
         container.particles.setDensity();
         for (const [, plugin] of container.plugins) {
             if (plugin.resize !== undefined) {
@@ -92,14 +92,19 @@ export class Canvas {
         if (!this.element) {
             return;
         }
-        const container = this.container;
-        const pxRatio = container.retina.pixelRatio;
-        const size = container.canvas.size;
+        const container = this.container, pxRatio = container.retina.pixelRatio, size = container.canvas.size, newSize = {
+            width: this.element.offsetWidth * pxRatio,
+            height: this.element.offsetHeight * pxRatio,
+        };
+        if (newSize.height === size.height &&
+            newSize.width === size.width &&
+            newSize.height === this.element.height &&
+            newSize.width === this.element.width) {
+            return;
+        }
         const oldSize = Object.assign({}, size);
-        size.width = this.element.offsetWidth * pxRatio;
-        size.height = this.element.offsetHeight * pxRatio;
-        this.element.width = size.width;
-        this.element.height = size.height;
+        this.element.width = size.width = this.element.offsetWidth * pxRatio;
+        this.element.height = size.height = this.element.offsetHeight * pxRatio;
         if (this.container.started) {
             this.resizeFactor = {
                 width: size.width / oldSize.width,
@@ -114,8 +119,7 @@ export class Canvas {
             if (!lineStyle) {
                 return;
             }
-            const pos1 = p1.getPosition();
-            const pos2 = p2.getPosition();
+            const pos1 = p1.getPosition(), pos2 = p2.getPosition();
             drawConnectLine(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
         });
     }
@@ -132,51 +136,45 @@ export class Canvas {
         if (particle.spawning || particle.destroyed) {
             return;
         }
-        const pfColor = particle.getFillColor();
-        const psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
+        const radius = particle.getRadius();
+        if (radius <= 0) {
+            return;
+        }
+        const pfColor = particle.getFillColor(), psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
         if (!pfColor && !psColor) {
             return;
         }
         let [fColor, sColor] = this.getPluginParticleColors(particle);
-        const pOptions = particle.options;
-        const twinkle = pOptions.twinkle.particles;
-        const twinkling = twinkle.enable && Math.random() < twinkle.frequency;
         if (!fColor || !sColor) {
-            const twinkleRgb = colorToHsl(twinkle.color);
             if (!fColor) {
-                fColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : pfColor ? pfColor : undefined;
+                fColor = pfColor ? pfColor : undefined;
             }
             if (!sColor) {
-                sColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : psColor ? psColor : undefined;
+                sColor = psColor ? psColor : undefined;
             }
         }
-        const options = this.container.actualOptions;
-        const zIndexOptions = particle.options.zIndex;
-        const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
-        const radius = particle.getRadius();
-        const opacity = twinkling
-            ? getRangeValue(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 ? getStyleFromHsl(fColor, zOpacity) : undefined;
-        if (!fillColorValue && !sColor) {
-            return;
-        }
+        const options = this.container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, 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, strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor;
+        const colorStyles = {
+            fill: fColor ? getStyleFromHsl(fColor, zOpacity) : undefined,
+        };
+        colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill;
         this.draw((ctx) => {
-            const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
-            const zStrokeOpacity = strokeOpacity * zOpacityFactor;
-            const strokeColorValue = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : fillColorValue;
-            if (radius <= 0) {
-                return;
-            }
-            const container = this.container;
+            const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate, container = this.container;
             for (const updater of container.particles.updaters) {
                 if (updater.beforeDraw) {
                     updater.beforeDraw(particle);
                 }
+                if (updater.getColorStyles) {
+                    const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
+                    if (fill) {
+                        colorStyles.fill = fill;
+                    }
+                    if (stroke) {
+                        colorStyles.stroke = stroke;
+                    }
+                }
             }
-            drawParticle(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
+            drawParticle(container, ctx, particle, delta, colorStyles, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow);
             for (const updater of container.particles.updaters) {
                 if (updater.afterDraw) {
                     updater.afterDraw(particle);
@@ -195,10 +193,7 @@ export class Canvas {
         });
     }
     initBackground() {
-        const options = this.container.actualOptions;
-        const background = options.background;
-        const element = this.element;
-        const elementStyle = element === null || element === void 0 ? void 0 : element.style;
+        const options = this.container.actualOptions, background = options.background, element = this.element, elementStyle = element === null || element === void 0 ? void 0 : element.style;
         if (!elementStyle) {
             return;
         }
@@ -221,10 +216,7 @@ export class Canvas {
         return cb(this.context);
     }
     initCover() {
-        const options = this.container.actualOptions;
-        const cover = options.backgroundMask.cover;
-        const color = cover.color;
-        const coverRgb = colorToRgb(color);
+        const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = colorToRgb(color);
         if (coverRgb) {
             const coverColor = {
                 r: coverRgb.r,
@@ -233,13 +225,10 @@ export class Canvas {
                 a: cover.opacity,
             };
             this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
-            console.log(this.coverColorStyle);
         }
     }
     initTrail() {
-        const options = this.container.actualOptions;
-        const trail = options.particles.move.trail;
-        const fillColor = colorToRgb(trail.fillColor);
+        const options = this.container.actualOptions, trail = options.particles.move.trail, fillColor = colorToRgb(trail.fillColor);
         if (fillColor) {
             const trail = options.particles.move.trail;
             this.trailFillColor = {
@@ -251,8 +240,7 @@ export class Canvas {
         }
     }
     getPluginParticleColors(particle) {
-        let fColor;
-        let sColor;
+        let fColor, sColor;
         for (const [, plugin] of this.container.plugins) {
             if (!fColor && plugin.particleFillColor) {
                 fColor = colorToHsl(plugin.particleFillColor(particle));
@@ -307,8 +295,7 @@ export class Canvas {
     }
     lineStyle(p1, p2) {
         return this.draw((ctx) => {
-            const options = this.container.actualOptions;
-            const connectOptions = options.interactivity.modes.connect;
+            const options = this.container.actualOptions, connectOptions = options.interactivity.modes.connect;
             return gradient(ctx, p1, p2, connectOptions.links.opacity);
         });
     }

package/esm/Core/Container.js

@@ -10,12 +10,15 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _Container_engine;
-import { EventListeners, FrameManager, Vector } from "./Utils";
-import { animate, cancelAnimation, getRangeValue } from "../Utils";
+import { animate, cancelAnimation } from "../Utils/Utils";
 import { Canvas } from "./Canvas";
+import { EventListeners } from "./Utils/EventListeners";
+import { FrameManager } from "./Utils/FrameManager";
 import { Options } from "../Options/Classes/Options";
 import { Particles } from "./Particles";
 import { Retina } from "./Retina";
+import { Vector } from "./Utils/Vector";
+import { getRangeValue } from "../Utils/NumberUtils";
 export class Container {
     constructor(engine, id, sourceOptions, ...presets) {
         this.id = id;
@@ -56,9 +59,6 @@ export class Container {
                 inside: false,
             },
         };
-        this.bubble = {};
-        this.repulse = { particles: [] };
-        this.attract = { particles: [] };
         this.plugins = new Map();
         this.drawers = new Map();
         this.density = 1;
@@ -248,8 +248,7 @@ export class Container {
             if (this.destroyed) {
                 return;
             }
-            const mouseEvent = e;
-            const pos = {
+            const mouseEvent = e, pos = {
                 x: mouseEvent.offsetX || mouseEvent.clientX,
                 y: mouseEvent.offsetY || mouseEvent.clientY,
             };
@@ -282,8 +281,7 @@ export class Container {
                         return;
                     }
                 }
-                const canvasRect = (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-                const pos = {
+                const canvasRect = (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), pos = {
                     x: lastTouch.clientX - ((_b = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _b !== void 0 ? _b : 0),
                     y: lastTouch.clientY - ((_c = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _c !== void 0 ? _c : 0),
                 };
@@ -307,6 +305,14 @@ export class Container {
         el.addEventListener("touchend", touchEndHandler);
         el.addEventListener("touchcancel", touchCancelHandler);
     }
+    handleClickMode(mode) {
+        this.particles.handleClickMode(mode);
+        for (const [, plugin] of this.plugins) {
+            if (plugin.handleClickMode) {
+                plugin.handleClickMode(mode);
+            }
+        }
+    }
     updateActualOptions() {
         this.actualOptions.responsive = [];
         const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);

package/esm/Core/Loader.js

@@ -10,9 +10,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _Loader_engine;
-import { Constants } from "./Utils";
+import { Constants } from "./Utils/Constants";
 import { Container } from "./Container";
-import { itemFromArray } from "../Utils";
+import { itemFromArray } from "../Utils/Utils";
 function fetchError(statusCode) {
     console.error(`Error tsParticles - fetch status: ${statusCode}`);
     console.error("Error tsParticles - File config not found");
@@ -35,17 +35,14 @@ export class Loader {
     }
     async loadOptions(params) {
         var _a, _b, _c;
-        const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 10000)}`;
-        const { options, index } = params;
+        const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 10000)}`, { options, index } = params;
         let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(tagId);
         if (!domContainer) {
             domContainer = document.createElement("div");
             domContainer.id = tagId;
             (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
         }
-        const currentOptions = options instanceof Array ? itemFromArray(options, index) : options;
-        const dom = this.dom();
-        const oldIndex = dom.findIndex((v) => v.id === tagId);
+        const currentOptions = options instanceof Array ? itemFromArray(options, index) : options, dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === tagId);
         if (oldIndex >= 0) {
             const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {
@@ -84,8 +81,7 @@ export class Loader {
         return newItem;
     }
     async loadRemoteOptions(params) {
-        const { url: jsonUrl, index } = params;
-        const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
+        const { url: jsonUrl, index } = params, url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
         if (!url) {
             return;
         }
@@ -168,7 +164,7 @@ export class Loader {
     }
     setOnClickHandler(callback) {
         const dom = this.dom();
-        if (dom.length === 0) {
+        if (!dom.length) {
             throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
         }
         for (const domItem of dom) {

package/esm/Core/Particle.js

@@ -10,23 +10,28 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _Particle_engine;
-import { Vector, Vector3d } from "./Utils";
-import { alterHsl, clamp, colorToRgb, deepExtend, getDistance, getHslFromAnimation, getParticleBaseVelocity, getParticleDirectionAngle, getRangeMax, getRangeMin, getRangeValue, getValue, isInArray, itemFromArray, randomInRange, setRangeValue, } from "../Utils";
+import { calcExactPositionOrRandomFromSize, clamp, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRangeMax, getRangeMin, getRangeValue, getValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils";
+import { colorToRgb, getHslFromAnimation } from "../Utils/ColorUtils";
+import { deepExtend, isInArray, itemFromArray } from "../Utils/Utils";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
 import { Shape } from "../Options/Classes/Particles/Shape/Shape";
+import { Vector } from "./Utils/Vector";
+import { Vector3d } from "./Utils/Vector3d";
+import { alterHsl } from "../Utils/CanvasUtils";
 const fixOutMode = (data) => {
-    if (isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes)) {
-        if (data.coord > data.maxCoord - data.radius * 2) {
-            data.setCb(-data.radius);
-        }
-        else if (data.coord < data.radius * 2) {
-            data.setCb(data.radius);
-        }
+    if (!(isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes))) {
+        return;
+    }
+    if (data.coord > data.maxCoord - data.radius * 2) {
+        data.setCb(-data.radius);
+    }
+    else if (data.coord < data.radius * 2) {
+        data.setCb(data.radius);
     }
 };
 export class Particle {
     constructor(engine, id, container, position, overrideOptions, group) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.id = id;
         this.container = container;
         this.group = group;
@@ -43,12 +48,9 @@ export class Particle {
             maxDistance: {},
         };
         this.ignoresResizeRatio = true;
-        const pxRatio = container.retina.pixelRatio;
-        const mainOptions = container.actualOptions;
-        const particlesOptions = new ParticlesOptions();
+        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = new ParticlesOptions();
         particlesOptions.load(mainOptions.particles);
-        const shapeType = particlesOptions.shape.type;
-        const reduceDuplicates = particlesOptions.reduceDuplicates;
+        const shapeType = particlesOptions.shape.type, reduceDuplicates = particlesOptions.reduceDuplicates;
         this.shape = shapeType instanceof Array ? itemFromArray(shapeType, this.id, reduceDuplicates) : shapeType;
         if (overrideOptions === null || overrideOptions === void 0 ? void 0 : overrideOptions.shape) {
             if (overrideOptions.shape.type) {
@@ -150,22 +152,6 @@ export class Particle {
         }
         this.life = this.loadLife();
         this.spawning = this.life.delay > 0;
-        if (this.options.move.spin.enable) {
-            const spinPos = (_h = this.options.move.spin.position) !== null && _h !== void 0 ? _h : { x: 50, y: 50 };
-            const spinCenter = {
-                x: (spinPos.x / 100) * container.canvas.size.width,
-                y: (spinPos.y / 100) * container.canvas.size.height,
-            };
-            const pos = this.getPosition();
-            const distance = getDistance(pos, spinCenter);
-            this.spin = {
-                center: spinCenter,
-                direction: this.velocity.x >= 0 ? "clockwise" : "counter-clockwise",
-                angle: this.velocity.angle,
-                radius: distance,
-                acceleration: (_j = this.retina.spinAcceleration) !== null && _j !== void 0 ? _j : getRangeValue(this.options.move.spin.acceleration),
-            };
-        }
         this.shadowColor = colorToRgb(this.options.shadow.color);
         for (const updater of container.particles.updaters) {
             if (updater.init) {
@@ -185,8 +171,7 @@ export class Particle {
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
     }
     isInsideCanvas() {
-        const radius = this.getRadius();
-        const canvasSize = this.container.canvas.size;
+        const radius = this.getRadius(), canvasSize = this.container.canvas.size;
         return (this.position.x >= -radius &&
             this.position.y >= -radius &&
             this.position.y <= canvasSize.height + radius &&
@@ -271,17 +256,17 @@ export class Particle {
         }
     }
     calcPosition(container, position, zIndex, tryCount = 0) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         for (const [, plugin] of container.plugins) {
             const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
             if (pluginPos !== undefined) {
                 return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
             }
         }
-        const canvasSize = container.canvas.size;
-        const pos = 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) => {
+        const canvasSize = container.canvas.size, exactPosition = calcExactPositionOrRandomFromSize({
+            size: canvasSize,
+            position: position,
+        }), pos = Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
             fixOutMode({
                 outMode,
                 checkModes: ["bounce", "bounce-horizontal"],
@@ -300,18 +285,17 @@ export class Particle {
                 radius,
             });
         };
-        fixHorizontal((_c = outModes.left) !== null && _c !== void 0 ? _c : outModes.default);
-        fixHorizontal((_d = outModes.right) !== null && _d !== void 0 ? _d : outModes.default);
-        fixVertical((_e = outModes.top) !== null && _e !== void 0 ? _e : outModes.default);
-        fixVertical((_f = outModes.bottom) !== null && _f !== void 0 ? _f : outModes.default);
+        fixHorizontal((_a = outModes.left) !== null && _a !== void 0 ? _a : outModes.default);
+        fixHorizontal((_b = outModes.right) !== null && _b !== void 0 ? _b : outModes.default);
+        fixVertical((_c = outModes.top) !== null && _c !== void 0 ? _c : outModes.default);
+        fixVertical((_d = outModes.bottom) !== null && _d !== void 0 ? _d : outModes.default);
         if (this.checkOverlap(pos, tryCount)) {
             return this.calcPosition(container, undefined, zIndex, tryCount + 1);
         }
         return pos;
     }
     checkOverlap(pos, tryCount = 0) {
-        const collisionsOptions = this.options.collisions;
-        const radius = this.getRadius();
+        const collisionsOptions = this.options.collisions, radius = this.getRadius();
         if (!collisionsOptions.enable) {
             return false;
         }
@@ -352,10 +336,7 @@ export class Particle {
         }
     }
     loadLife() {
-        const container = this.container;
-        const particlesOptions = this.options;
-        const lifeOptions = particlesOptions.life;
-        const life = {
+        const container = this.container, particlesOptions = this.options, lifeOptions = particlesOptions.life, life = {
             delay: container.retina.reduceFactor
                 ? ((getRangeValue(lifeOptions.delay.value) * (lifeOptions.delay.sync ? 1 : Math.random())) /
                     container.retina.reduceFactor) *