tsparticles 1.34.1 → 1.35.0

package/esm/Core/Particle.js

@@ -1,12 +1,22 @@
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
 import { Shape } from "../Options/Classes/Particles/Shape/Shape";
-import { AlterType, AnimationStatus, DestroyMode, OutMode, RotateDirection, StartValueType, TiltDirection, } from "../Enums";
-import { clamp, colorToHsl, colorToRgb, deepExtend, getDistance, getHslAnimationFromHsl, getHslFromAnimation, getParticleBaseVelocity, getParticleDirectionAngle, getRangeMax, getRangeMin, getRangeValue, getValue, isInArray, itemFromArray, Plugins, randomInRange, setRangeValue, } from "../Utils";
+import { AnimationStatus, DestroyMode, OutMode, RotateDirection, StartValueType, } from "../Enums";
+import { alterHsl, clamp, colorToRgb, deepExtend, getDistance, getHslFromAnimation, getParticleBaseVelocity, getParticleDirectionAngle, getRangeMax, getRangeMin, getRangeValue, getValue, isInArray, itemFromArray, Plugins, randomInRange, setRangeValue, } from "../Utils";
 import { Vector } from "./Particle/Vector";
 import { Vector3d } from "./Particle/Vector3d";
+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);
+        }
+    }
+};
 export class Particle {
     constructor(id, container, position, overrideOptions, group) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         this.id = id;
         this.container = container;
         this.group = group;
@@ -17,11 +27,13 @@ export class Particle {
         this.unbreakable = false;
         this.splitCount = 0;
         this.misplaced = false;
-        this.maxDistance = {};
+        this.retina = {
+            maxDistance: {},
+        };
         const pxRatio = container.retina.pixelRatio;
-        const options = container.actualOptions;
+        const mainOptions = container.actualOptions;
         const particlesOptions = new ParticlesOptions();
-        particlesOptions.load(options.particles);
+        particlesOptions.load(mainOptions.particles);
         const shapeType = particlesOptions.shape.type;
         const reduceDuplicates = particlesOptions.reduceDuplicates;
         this.shape = shapeType instanceof Array ? itemFromArray(shapeType, this.id, reduceDuplicates) : shapeType;
@@ -51,16 +63,13 @@ export class Particle {
         this.fill = (_d = (_c = this.shapeData) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.fill;
         this.close = (_f = (_e = this.shapeData) === null || _e === void 0 ? void 0 : _e.close) !== null && _f !== void 0 ? _f : this.close;
         this.options = particlesOptions;
-        const zIndexValue = getRangeValue(this.options.zIndex.value);
         this.pathDelay = getValue(this.options.move.path.delay) * 1000;
-        this.wobbleDistance = 0;
+        const zIndexValue = getRangeValue(this.options.zIndex.value);
         container.retina.initParticle(this);
-        const sizeOptions = this.options.size;
-        const sizeValue = getValue(sizeOptions) * container.retina.pixelRatio;
-        const sizeRange = sizeOptions.value;
+        const sizeOptions = this.options.size, sizeRange = sizeOptions.value;
         this.size = {
             enable: sizeOptions.animation.enable,
-            value: sizeValue,
+            value: getValue(sizeOptions) * container.retina.pixelRatio,
             max: getRangeMax(sizeRange) * pxRatio,
             min: getRangeMin(sizeRange) * pxRatio,
             loops: 0,
@@ -85,7 +94,7 @@ export class Particle {
                     break;
             }
             this.size.velocity =
-                (((_g = this.sizeAnimationSpeed) !== null && _g !== void 0 ? _g : container.retina.sizeAnimationSpeed) / 100) *
+                (((_g = this.retina.sizeAnimationSpeed) !== null && _g !== void 0 ? _g : container.retina.sizeAnimationSpeed) / 100) *
                     container.retina.reduceFactor;
             if (!sizeAnimation.sync) {
                 this.size.velocity *= Math.random();
@@ -97,174 +106,7 @@ export class Particle {
         };
         this.initialVelocity = this.calculateVelocity();
         this.velocity = this.initialVelocity.copy();
-        const rotateOptions = this.options.rotate;
-        this.rotate = {
-            enable: rotateOptions.animation.enable,
-            value: (getRangeValue(rotateOptions.value) * Math.PI) / 180,
-        };
-        let rotateDirection = rotateOptions.direction;
-        if (rotateDirection === RotateDirection.random) {
-            const index = Math.floor(Math.random() * 2);
-            rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
-        }
-        switch (rotateDirection) {
-            case RotateDirection.counterClockwise:
-            case "counterClockwise":
-                this.rotate.status = AnimationStatus.decreasing;
-                break;
-            case RotateDirection.clockwise:
-                this.rotate.status = AnimationStatus.increasing;
-                break;
-        }
-        const rotateAnimation = this.options.rotate.animation;
-        if (rotateAnimation.enable) {
-            this.rotate.velocity = (rotateAnimation.speed / 360) * container.retina.reduceFactor;
-            if (!rotateAnimation.sync) {
-                this.rotate.velocity *= Math.random();
-            }
-        }
-        const tiltOptions = this.options.tilt;
-        this.tilt = {
-            enable: tiltOptions.enable,
-            value: (getRangeValue(tiltOptions.value) * Math.PI) / 180,
-            sinDirection: Math.random() >= 0.5 ? 1 : -1,
-            cosDirection: Math.random() >= 0.5 ? 1 : -1,
-        };
-        let tiltDirection = tiltOptions.direction;
-        if (tiltDirection === TiltDirection.random) {
-            const index = Math.floor(Math.random() * 2);
-            tiltDirection = index > 0 ? TiltDirection.counterClockwise : TiltDirection.clockwise;
-        }
-        switch (tiltDirection) {
-            case TiltDirection.counterClockwise:
-            case "counterClockwise":
-                this.tilt.status = AnimationStatus.decreasing;
-                break;
-            case TiltDirection.clockwise:
-                this.tilt.status = AnimationStatus.increasing;
-                break;
-        }
-        const tiltAnimation = this.options.tilt.animation;
-        if (tiltAnimation.enable) {
-            this.tilt.velocity = (tiltAnimation.speed / 360) * container.retina.reduceFactor;
-            if (!tiltAnimation.sync) {
-                this.tilt.velocity *= Math.random();
-            }
-        }
-        const orbitOptions = particlesOptions.orbit;
-        if (orbitOptions.enable) {
-            this.orbitRotation = getRangeValue(orbitOptions.rotation.value);
-            this.orbitColor = colorToHsl(orbitOptions.color);
-        }
-        const hslColor = colorToHsl(this.options.color, this.id, reduceDuplicates);
-        if (hslColor) {
-            this.color = getHslAnimationFromHsl(hslColor, this.options.color.animation, container.retina.reduceFactor);
-        }
-        const gradient = this.options.gradient instanceof Array ? itemFromArray(this.options.gradient) : this.options.gradient;
-        if (gradient) {
-            this.gradient = {
-                angle: {
-                    value: gradient.angle.value,
-                    enable: gradient.angle.animation.enable,
-                    velocity: (gradient.angle.animation.speed / 360) * container.retina.reduceFactor,
-                },
-                type: gradient.type,
-                colors: [],
-            };
-            let rotateDirection = gradient.angle.direction;
-            if (rotateDirection === RotateDirection.random) {
-                const index = Math.floor(Math.random() * 2);
-                rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
-            }
-            switch (rotateDirection) {
-                case RotateDirection.counterClockwise:
-                case "counterClockwise":
-                    this.gradient.angle.status = AnimationStatus.decreasing;
-                    break;
-                case RotateDirection.clockwise:
-                    this.gradient.angle.status = AnimationStatus.increasing;
-                    break;
-            }
-            for (const grColor of gradient.colors) {
-                const grHslColor = colorToHsl(grColor.value, this.id, reduceDuplicates);
-                if (grHslColor) {
-                    const grHslAnimation = getHslAnimationFromHsl(grHslColor, grColor.value.animation, container.retina.reduceFactor);
-                    const addColor = {
-                        stop: grColor.stop,
-                        value: grHslAnimation,
-                        opacity: grColor.opacity
-                            ? {
-                                enable: grColor.opacity.animation.enable,
-                                max: getRangeMax(grColor.opacity.value),
-                                min: getRangeMin(grColor.opacity.value),
-                                status: AnimationStatus.increasing,
-                                value: getRangeValue(grColor.opacity.value),
-                                velocity: (grColor.opacity.animation.speed / 100) * container.retina.reduceFactor,
-                            }
-                            : undefined,
-                    };
-                    if (grColor.opacity && addColor.opacity) {
-                        const opacityRange = grColor.opacity.value;
-                        addColor.opacity.min = getRangeMin(opacityRange);
-                        addColor.opacity.max = getRangeMax(opacityRange);
-                        const opacityAnimation = grColor.opacity.animation;
-                        switch (opacityAnimation.startValue) {
-                            case StartValueType.min:
-                                addColor.opacity.value = addColor.opacity.min;
-                                addColor.opacity.status = AnimationStatus.increasing;
-                                break;
-                            case StartValueType.random:
-                                addColor.opacity.value = randomInRange(addColor.opacity);
-                                addColor.opacity.status =
-                                    Math.random() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
-                                break;
-                            case StartValueType.max:
-                            default:
-                                addColor.opacity.value = addColor.opacity.max;
-                                addColor.opacity.status = AnimationStatus.decreasing;
-                                break;
-                        }
-                    }
-                    this.gradient.colors.push(addColor);
-                }
-            }
-        }
-        const rollOpt = this.options.roll;
-        if (rollOpt.enable) {
-            if (this.color) {
-                if (rollOpt.backColor) {
-                    this.backColor = colorToHsl(rollOpt.backColor);
-                }
-                else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
-                    this.alterType = Math.random() >= 0.5 ? AlterType.darken : AlterType.enlighten;
-                    this.alterValue =
-                        this.alterType === AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value;
-                }
-                else if (rollOpt.darken.enable) {
-                    this.alterType = AlterType.darken;
-                    this.alterValue = rollOpt.darken.value;
-                }
-                else if (rollOpt.enlighten.enable) {
-                    this.alterType = AlterType.enlighten;
-                    this.alterValue = rollOpt.enlighten.value;
-                }
-            }
-            this.rollAngle = Math.random() * Math.PI * 2;
-            this.rollSpeed = getRangeValue(rollOpt.speed) / 360;
-        }
-        else {
-            this.rollAngle = 0;
-            this.rollSpeed = 0;
-        }
-        const wobbleOpt = this.options.wobble;
-        if (wobbleOpt.enable) {
-            this.wobbleAngle = Math.random() * Math.PI * 2;
-            this.wobbleSpeed = getRangeValue(wobbleOpt.speed) / 360;
-        }
-        else {
-            this.wobbleAngle = 0;
-            this.wobbleSpeed = 0;
-        }
+        this.moveDecay = 1 - getRangeValue(this.options.move.decay);
         this.position = this.calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
         this.initialPosition = this.position.copy();
         this.offset = Vector.origin;
@@ -272,42 +114,6 @@ export class Particle {
         particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
         particles.lastZIndex = this.position.z;
         this.zIndexFactor = this.position.z / container.zLayers;
-        const opacityOptions = this.options.opacity;
-        this.opacity = {
-            enable: opacityOptions.animation.enable,
-            max: getRangeMax(opacityOptions.value),
-            min: getRangeMin(opacityOptions.value),
-            value: getRangeValue(opacityOptions.value),
-            loops: 0,
-            maxLoops: opacityOptions.animation.count,
-        };
-        const opacityAnimation = opacityOptions.animation;
-        if (opacityAnimation.enable) {
-            this.opacity.status = AnimationStatus.increasing;
-            const opacityRange = opacityOptions.value;
-            this.opacity.min = getRangeMin(opacityRange);
-            this.opacity.max = getRangeMax(opacityRange);
-            switch (opacityAnimation.startValue) {
-                case StartValueType.min:
-                    this.opacity.value = this.opacity.min;
-                    this.opacity.status = AnimationStatus.increasing;
-                    break;
-                case StartValueType.random:
-                    this.opacity.value = randomInRange(this.opacity);
-                    this.opacity.status =
-                        Math.random() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
-                    break;
-                case StartValueType.max:
-                default:
-                    this.opacity.value = this.opacity.max;
-                    this.opacity.status = AnimationStatus.decreasing;
-                    break;
-            }
-            this.opacity.velocity = (opacityAnimation.speed / 100) * container.retina.reduceFactor;
-            if (!opacityAnimation.sync) {
-                this.opacity.velocity *= Math.random();
-            }
-        }
         this.sides = 24;
         let drawer = container.drawers.get(this.shape);
         if (!drawer) {
@@ -323,19 +129,10 @@ export class Particle {
         if (sideCountFunc) {
             this.sides = sideCountFunc(this);
         }
-        this.stroke =
-            this.options.stroke instanceof Array
-                ? itemFromArray(this.options.stroke, this.id, reduceDuplicates)
-                : this.options.stroke;
-        this.strokeWidth = this.stroke.width * container.retina.pixelRatio;
-        const strokeHslColor = (_h = colorToHsl(this.stroke.color)) !== null && _h !== void 0 ? _h : this.getFillColor();
-        if (strokeHslColor) {
-            this.strokeColor = getHslAnimationFromHsl(strokeHslColor, (_j = this.stroke.color) === null || _j === void 0 ? void 0 : _j.animation, container.retina.reduceFactor);
-        }
         this.life = this.loadLife();
         this.spawning = this.life.delay > 0;
         if (this.options.move.spin.enable) {
-            const spinPos = (_k = this.options.move.spin.position) !== null && _k !== void 0 ? _k : { x: 50, y: 50 };
+            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,
@@ -347,10 +144,15 @@ export class Particle {
                 direction: this.velocity.x >= 0 ? RotateDirection.clockwise : RotateDirection.counterClockwise,
                 angle: this.velocity.angle,
                 radius: distance,
-                acceleration: getRangeValue(this.options.move.spin.acceleration),
+                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) {
+                updater.init(this);
+            }
+        }
         if (drawer && drawer.particleInit) {
             drawer.particleInit(container, this);
         }
@@ -386,29 +188,23 @@ export class Particle {
         };
     }
     getRadius() {
-        return this.bubble.radius || this.size.value;
+        var _a;
+        return (_a = this.bubble.radius) !== null && _a !== void 0 ? _a : this.size.value;
     }
     getMass() {
-        const radius = this.getRadius();
-        return (Math.pow(radius, 2) * Math.PI) / 2;
+        return (this.getRadius() ** 2 * Math.PI) / 2;
     }
     getFillColor() {
-        if (this.bubble.color) {
-            return this.bubble.color;
-        }
-        const color = getHslFromAnimation(this.color);
-        if (color && (this.backColor || (this.alterType && this.alterValue !== undefined))) {
-            const rolled = Math.floor(this.rollAngle / (Math.PI / 2)) % 2;
+        var _a, _b, _c;
+        const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
+        if (color && this.roll && (this.backColor || this.roll.alter)) {
+            const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
             if (rolled) {
                 if (this.backColor) {
                     return this.backColor;
                 }
-                else if (this.alterType && this.alterValue !== undefined) {
-                    return {
-                        h: color.h,
-                        s: color.s,
-                        l: color.l + (this.alterType === AlterType.darken ? -1 : 1) * this.alterValue,
-                    };
+                if (this.roll.alter) {
+                    return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
                 }
             }
         }
@@ -440,7 +236,9 @@ export class Particle {
         }
     }
     reset() {
-        this.opacity.loops = 0;
+        if (this.opacity) {
+            this.opacity.loops = 0;
+        }
         this.size.loops = 0;
     }
     split() {
@@ -464,26 +262,24 @@ export class Particle {
         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;
-        const fixHorizontal = (outMode) => {
-            if (isInArray(outMode, OutMode.bounce) || isInArray(outMode, OutMode.bounceHorizontal)) {
-                if (pos.x > container.canvas.size.width - radius * 2) {
-                    pos.x -= radius;
-                }
-                else if (pos.x < radius * 2) {
-                    pos.x += radius;
-                }
-            }
-        };
-        const fixVertical = (outMode) => {
-            if (isInArray(outMode, OutMode.bounce) || isInArray(outMode, OutMode.bounceVertical)) {
-                if (pos.y > container.canvas.size.height - radius * 2) {
-                    pos.y -= radius;
-                }
-                else if (pos.y < radius * 2) {
-                    pos.y += radius;
-                }
-            }
+        const outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
+            fixOutMode({
+                outMode,
+                checkModes: [OutMode.bounce, OutMode.bounceHorizontal],
+                coord: pos.x,
+                maxCoord: container.canvas.size.width,
+                setCb: (value) => (pos.x += value),
+                radius,
+            });
+        }, fixVertical = (outMode) => {
+            fixOutMode({
+                outMode,
+                checkModes: [OutMode.bounce, OutMode.bounceVertical],
+                coord: pos.y,
+                maxCoord: container.canvas.size.height,
+                setCb: (value) => (pos.y += value),
+                radius,
+            });
         };
         fixHorizontal((_c = outModes.left) !== null && _c !== void 0 ? _c : outModes.default);
         fixHorizontal((_d = outModes.right) !== null && _d !== void 0 ? _d : outModes.default);

package/esm/Core/Particles.d.ts

@@ -17,12 +17,11 @@ export declare class Particles {
     pushing?: boolean;
     linksColor?: IRgb | string;
     grabLineColor?: IRgb | string;
+    readonly updaters: import("./Interfaces").IParticleUpdater[];
     private interactionManager;
     private nextId;
-    private linksFreq;
-    private trianglesFreq;
+    private readonly freqs;
     private readonly mover;
-    private readonly updaters;
     constructor(container: Container);
     init(): void;
     redraw(): void;

package/esm/Core/Particles.js

@@ -13,8 +13,10 @@ export class Particles {
         this.limit = 0;
         this.needsSort = false;
         this.lastZIndex = 0;
-        this.linksFreq = new Map();
-        this.trianglesFreq = new Map();
+        this.freqs = {
+            links: new Map(),
+            triangles: new Map(),
+        };
         this.interactionManager = new InteractionManager(container);
         const canvasSize = this.container.canvas.size;
         this.linksColors = new Map();
@@ -30,8 +32,8 @@ export class Particles {
         const options = container.actualOptions;
         this.lastZIndex = 0;
         this.needsSort = false;
-        this.linksFreq = new Map();
-        this.trianglesFreq = new Map();
+        this.freqs.links = new Map();
+        this.freqs.triangles = new Map();
         let handled = false;
         for (const [, plugin] of container.plugins) {
             if (plugin.particlesInitialization !== undefined) {
@@ -207,10 +209,10 @@ export class Particles {
     }
     getLinkFrequency(p1, p2) {
         const key = `${Math.min(p1.id, p2.id)}_${Math.max(p1.id, p2.id)}`;
-        let res = this.linksFreq.get(key);
+        let res = this.freqs.links.get(key);
         if (res === undefined) {
             res = Math.random();
-            this.linksFreq.set(key, res);
+            this.freqs.links.set(key, res);
         }
         return res;
     }
@@ -226,10 +228,10 @@ export class Particles {
             [id3, id1] = [id1, id3];
         }
         const key = `${id1}_${id2}_${id3}`;
-        let res = this.trianglesFreq.get(key);
+        let res = this.freqs.triangles.get(key);
         if (res === undefined) {
             res = Math.random();
-            this.trianglesFreq.set(key, res);
+            this.freqs.triangles.set(key, res);
         }
         return res;
     }
@@ -279,7 +281,7 @@ export class Particles {
         }
         const canvas = container.canvas.element;
         const pxRatio = container.retina.pixelRatio;
-        return (canvas.width * canvas.height) / (densityOptions.factor * Math.pow(pxRatio, 2) * densityOptions.area);
+        return (canvas.width * canvas.height) / (densityOptions.factor * pxRatio ** 2 * densityOptions.area);
     }
     pushParticle(position, overrideOptions, group, initializer) {
         try {

package/esm/Core/Retina.js

@@ -65,22 +65,20 @@ export class Retina {
         const options = particle.options;
         const ratio = this.pixelRatio;
         const moveDistance = options.move.distance;
-        const orbit = options.orbit;
-        particle.attractDistance = options.move.attract.distance * ratio;
-        particle.linksDistance = options.links.distance * ratio;
-        particle.linksWidth = options.links.width * ratio;
-        particle.moveDrift = getRangeValue(options.move.drift) * ratio;
-        particle.moveSpeed = getRangeValue(options.move.speed) * ratio;
-        particle.sizeAnimationSpeed = options.size.animation.speed * ratio;
-        particle.orbitRadius = (orbit === null || orbit === void 0 ? void 0 : orbit.radius) !== undefined ? orbit.radius * ratio : undefined;
+        const props = particle.retina;
+        props.attractDistance = options.move.attract.distance * ratio;
+        props.linksDistance = options.links.distance * ratio;
+        props.linksWidth = options.links.width * ratio;
+        props.moveDrift = getRangeValue(options.move.drift) * ratio;
+        props.moveSpeed = getRangeValue(options.move.speed) * ratio;
+        props.sizeAnimationSpeed = options.size.animation.speed * ratio;
         if (particle.spin) {
-            particle.spin.acceleration = getRangeValue(options.move.spin.acceleration) * ratio;
+            props.spinAcceleration = getRangeValue(options.move.spin.acceleration) * ratio;
         }
-        const maxDistance = particle.maxDistance;
+        const maxDistance = props.maxDistance;
         maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
         maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-        particle.wobbleDistance = getRangeValue(options.wobble.distance) * ratio;
-        particle.maxSpeed = options.move.gravity.maxSpeed * ratio;
+        props.maxSpeed = options.move.gravity.maxSpeed * ratio;
     }
     handleMotionChange(mediaQuery) {
         const options = this.container.actualOptions;

package/esm/Enums/Modes/RollMode.d.ts

@@ -0,0 +1,5 @@
+export declare enum RollMode {
+    both = "both",
+    horizontal = "horizontal",
+    vertical = "vertical"
+}

package/esm/Enums/Modes/RollMode.js

@@ -0,0 +1,6 @@
+export var RollMode;
+(function (RollMode) {
+    RollMode["both"] = "both";
+    RollMode["horizontal"] = "horizontal";
+    RollMode["vertical"] = "vertical";
+})(RollMode || (RollMode = {}));

package/esm/Enums/Modes/index.d.ts

@@ -4,5 +4,6 @@ export * from "./DivMode";
 export * from "./HoverMode";
 export * from "./CollisionMode";
 export * from "./OutMode";
+export * from "./RollMode";
 export * from "./SizeMode";
 export * from "./ThemeMode";

package/esm/Enums/Modes/index.js

@@ -4,5 +4,6 @@ export * from "./DivMode";
 export * from "./HoverMode";
 export * from "./CollisionMode";
 export * from "./OutMode";
+export * from "./RollMode";
 export * from "./SizeMode";
 export * from "./ThemeMode";

package/esm/Interactions/External/Bounce/Bouncer.js

@@ -52,7 +52,7 @@ export class Bouncer extends ExternalInteractorBase {
                 circleBounce(circleBounceDataFromParticle(particle), {
                     position,
                     radius,
-                    mass: (Math.pow(radius, 2) * Math.PI) / 2,
+                    mass: (radius ** 2 * Math.PI) / 2,
                     velocity: Vector.origin,
                     factor: Vector.origin,
                 });

package/esm/Interactions/External/Bubble/Bubbler.js

@@ -116,6 +116,7 @@ export class Bubbler extends ExternalInteractorBase {
         }
     }
     clickBubble() {
+        var _a, _b;
         const container = this.container, options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition;
         if (!mouseClickPos) {
             return;
@@ -153,7 +154,7 @@ export class Bubbler extends ExternalInteractorBase {
                 },
                 particlesObj: {
                     optValue: getRangeMax(particle.options.opacity.value),
-                    value: particle.opacity.value,
+                    value: (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1,
                 },
                 type: ProcessBubbleType.opacity,
             };
@@ -208,13 +209,13 @@ export class Bubbler extends ExternalInteractorBase {
         }
     }
     hoverBubbleOpacity(particle, ratio, divBubble) {
-        var _a;
+        var _a, _b, _c;
         const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
         if (!modeOpacity) {
             return;
         }
         const optOpacity = particle.options.opacity.value;
-        const pOpacity = particle.opacity.value;
+        const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
         const opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
         if (opacity !== undefined) {
             particle.bubble.opacity = opacity;

package/esm/Interactions/External/Repulse/Repulser.js

@@ -77,7 +77,7 @@ export class Repulser extends ExternalInteractorBase {
             }
             const range = new Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius), query = container.particles.quadTree.query(range);
             for (const particle of query) {
-                const { dx, dy, distance } = getDistances(mouseClickPos, particle.position), d = Math.pow(distance, 2), velocity = container.actualOptions.interactivity.modes.repulse.speed, force = (-repulseRadius * velocity) / d;
+                const { dx, dy, distance } = getDistances(mouseClickPos, particle.position), d = distance ** 2, velocity = container.actualOptions.interactivity.modes.repulse.speed, force = (-repulseRadius * velocity) / d;
                 if (d <= repulseRadius) {
                     container.repulse.particles.push(particle);
                     const vect = Vector.create(dx, dy);

package/esm/Interactions/Particles/Attract/Attractor.js

@@ -6,7 +6,7 @@ export class Attractor extends ParticlesInteractorBase {
     }
     interact(p1) {
         var _a;
-        const container = this.container, distance = (_a = p1.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance, pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, distance);
+        const container = this.container, distance = (_a = p1.retina.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance, pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, distance);
         for (const p2 of query) {
             if (p1 === p2 || !p2.options.move.attract.enable || p2.destroyed || p2.spawning) {
                 continue;

package/esm/Interactions/Particles/Links/LinkInstance.js

@@ -112,8 +112,8 @@ export class LinkInstance {
             if (!colorLine) {
                 return;
             }
-            const width = (_a = p1.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth;
-            const maxDistance = (_b = p1.linksDistance) !== null && _b !== void 0 ? _b : container.retina.linksDistance;
+            const width = (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth;
+            const maxDistance = (_b = p1.retina.linksDistance) !== null && _b !== void 0 ? _b : container.retina.linksDistance;
             drawLinkLine(ctx, width, pos1, pos2, maxDistance, container.canvas.size, p1.options.links.warp, options.backgroundMask.enable, options.backgroundMask.composite, colorLine, opacity, p1.options.links.shadow);
         });
     }

package/esm/Interactions/Particles/Links/Linker.js

@@ -48,7 +48,7 @@ export class Linker extends ParticlesInteractorBase {
         }
         const linkOpt1 = p1.options.links;
         const optOpacity = linkOpt1.opacity;
-        const optDistance = (_a = p1.linksDistance) !== null && _a !== void 0 ? _a : container.retina.linksDistance;
+        const optDistance = (_a = p1.retina.linksDistance) !== null && _a !== void 0 ? _a : container.retina.linksDistance;
         const warp = linkOpt1.warp;
         const range = warp
             ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)