@tsparticles/engine 3.0.0-alpha.1 → 3.0.0-beta.1

package/browser/Core/Particle.js

@@ -1,58 +1,178 @@
-import { calcExactPositionOrRandomFromSize, clamp, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, getValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils";
-import { deepExtend, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple } from "../Utils/Utils";
-import { getHslFromAnimation, rangeColorToRgb } from "../Utils/ColorUtils";
-import { Interactivity } from "../Options/Classes/Interactivity/Interactivity";
-import { Vector } from "./Utils/Vector";
-import { Vector3d } from "./Utils/Vector3d";
-import { alterHsl } from "../Utils/CanvasUtils";
-import { loadParticlesOptions } from "../Utils/OptionsUtils";
+import { calcExactPositionOrRandomFromSize, clamp, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, getValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils.js";
+import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
+import { getHslFromAnimation, rangeColorToRgb } from "../Utils/ColorUtils.js";
+import { Interactivity } from "../Options/Classes/Interactivity/Interactivity.js";
+import { Vector } from "./Utils/Vector.js";
+import { Vector3d } from "./Utils/Vector3d.js";
+import { alterHsl } from "../Utils/CanvasUtils.js";
+import { errorPrefix } from "./Utils/Constants.js";
+import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 const fixOutMode = (data) => {
     if (!isInArray(data.outMode, data.checkModes)) {
         return;
     }
-    if (data.coord > data.maxCoord - data.radius * 2) {
+    const diameter = data.radius * 2;
+    if (data.coord > data.maxCoord - diameter) {
         data.setCb(-data.radius);
     }
-    else if (data.coord < data.radius * 2) {
+    else if (data.coord < diameter) {
         data.setCb(data.radius);
     }
 };
 export class Particle {
     constructor(engine, id, container, position, overrideOptions, group) {
         this.container = container;
+        this._calcPosition = (container, position, zIndex, tryCount = 0) => {
+            for (const [, plugin] of container.plugins) {
+                const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
+                if (pluginPos) {
+                    return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+                }
+            }
+            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"],
+                    coord: pos.x,
+                    maxCoord: container.canvas.size.width,
+                    setCb: (value) => (pos.x += value),
+                    radius,
+                });
+            }, fixVertical = (outMode) => {
+                fixOutMode({
+                    outMode,
+                    checkModes: ["bounce", "bounce-vertical"],
+                    coord: pos.y,
+                    maxCoord: container.canvas.size.height,
+                    setCb: (value) => (pos.y += value),
+                    radius,
+                });
+            };
+            fixHorizontal(outModes.left ?? outModes.default);
+            fixHorizontal(outModes.right ?? outModes.default);
+            fixVertical(outModes.top ?? outModes.default);
+            fixVertical(outModes.bottom ?? outModes.default);
+            if (this._checkOverlap(pos, tryCount)) {
+                return this._calcPosition(container, undefined, zIndex, tryCount + 1);
+            }
+            return pos;
+        };
+        this._calculateVelocity = () => {
+            const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
+            if (moveOptions.direction === "inside" || moveOptions.direction === "outside") {
+                return res;
+            }
+            const rad = (Math.PI / 180) * getRangeValue(moveOptions.angle.value), radOffset = (Math.PI / 180) * getRangeValue(moveOptions.angle.offset), range = {
+                left: radOffset - rad / 2,
+                right: radOffset + rad / 2,
+            };
+            if (!moveOptions.straight) {
+                res.angle += randomInRange(setRangeValue(range.left, range.right));
+            }
+            if (moveOptions.random && typeof moveOptions.speed === "number") {
+                res.length *= getRandom();
+            }
+            return res;
+        };
+        this._checkOverlap = (pos, tryCount = 0) => {
+            const collisionsOptions = this.options.collisions, radius = this.getRadius();
+            if (!collisionsOptions.enable) {
+                return false;
+            }
+            const overlapOptions = collisionsOptions.overlap;
+            if (overlapOptions.enable) {
+                return false;
+            }
+            const retries = overlapOptions.retries;
+            if (retries >= 0 && tryCount > retries) {
+                throw new Error(`${errorPrefix} particle is overlapping and can't be placed`);
+            }
+            return !!this.container.particles.find((particle) => getDistance(pos, particle.position) < radius + particle.getRadius());
+        };
+        this._getRollColor = (color) => {
+            if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
+                return color;
+            }
+            const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI / 2 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
+            if (!rolled) {
+                return color;
+            }
+            if (this.backColor) {
+                return this.backColor;
+            }
+            if (this.roll.alter) {
+                return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
+            }
+            return color;
+        };
+        this._initPosition = (position) => {
+            const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value);
+            this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
+            this.initialPosition = this.position.copy();
+            const canvasSize = container.canvas.size;
+            this.moveCenter = {
+                ...getPosition(this.options.move.center, canvasSize),
+                radius: this.options.move.center.radius ?? 0,
+                mode: this.options.move.center.mode ?? "percent",
+            };
+            this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
+            switch (this.options.move.direction) {
+                case "inside":
+                    this.outType = "inside";
+                    break;
+                case "outside":
+                    this.outType = "outside";
+                    break;
+            }
+            this.offset = Vector.origin;
+        };
+        this._loadShapeData = (shapeOptions, reduceDuplicates) => {
+            const shapeData = shapeOptions.options[this.shape];
+            if (!shapeData) {
+                return;
+            }
+            return deepExtend({
+                close: shapeOptions.close,
+                fill: shapeOptions.fill,
+            }, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
+        };
         this._engine = engine;
         this.init(id, position, overrideOptions, group);
     }
     destroy(override) {
-        var _a;
         if (this.unbreakable || this.destroyed) {
             return;
         }
         this.destroyed = true;
         this.bubble.inRange = false;
         this.slow.inRange = false;
-        for (const [, plugin] of this.container.plugins) {
+        const container = this.container, pathGenerator = this.pathGenerator;
+        for (const [, plugin] of container.plugins) {
             if (plugin.particleDestroyed) {
                 plugin.particleDestroyed(this, override);
             }
         }
-        for (const updater of this.container.particles.updaters) {
+        for (const updater of container.particles.updaters) {
             if (updater.particleDestroyed) {
                 updater.particleDestroyed(this, override);
             }
         }
-        (_a = this.pathGenerator) === null || _a === void 0 ? void 0 : _a.reset(this);
+        if (pathGenerator) {
+            pathGenerator.reset(this);
+        }
     }
     draw(delta) {
-        const container = this.container;
+        const container = this.container, canvas = container.canvas;
         for (const [, plugin] of container.plugins) {
-            container.canvas.drawParticlePlugin(plugin, this, delta);
+            canvas.drawParticlePlugin(plugin, this, delta);
         }
-        container.canvas.drawParticle(this, delta);
+        canvas.drawParticle(this, delta);
     }
     getFillColor() {
-        var _a;
-        return this._getRollColor((_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color));
+        return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.color));
     }
     getMass() {
         return (this.getRadius() ** 2 * Math.PI) / 2;
@@ -65,15 +185,12 @@ export class Particle {
         };
     }
     getRadius() {
-        var _a;
-        return (_a = this.bubble.radius) !== null && _a !== void 0 ? _a : this.size.value;
+        return this.bubble.radius ?? this.size.value;
     }
     getStrokeColor() {
-        var _a;
-        return this._getRollColor((_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.strokeColor));
+        return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.strokeColor));
     }
     init(id, position, overrideOptions, group) {
-        var _a, _b, _c, _d, _e, _f, _g;
         const container = this.container, engine = this._engine;
         this.id = id;
         this.group = group;
@@ -102,17 +219,21 @@ export class Particle {
         }
         this.shapeData = this._loadShapeData(shapeOptions, reduceDuplicates);
         particlesOptions.load(overrideOptions);
-        particlesOptions.load((_a = this.shapeData) === null || _a === void 0 ? void 0 : _a.particles);
-        this.interactivity = new Interactivity(engine, container);
-        this.interactivity.load(container.actualOptions.interactivity);
-        this.interactivity.load(particlesOptions.interactivity);
-        this.fill = (_c = (_b = this.shapeData) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.fill;
-        this.close = (_e = (_d = this.shapeData) === null || _d === void 0 ? void 0 : _d.close) !== null && _e !== void 0 ? _e : this.close;
+        const shapeData = this.shapeData;
+        if (shapeData) {
+            particlesOptions.load(shapeData.particles);
+        }
+        const interactivity = new Interactivity(engine, container);
+        interactivity.load(container.actualOptions.interactivity);
+        interactivity.load(particlesOptions.interactivity);
+        this.interactivity = interactivity;
+        this.fill = shapeData?.fill ?? particlesOptions.shape.fill;
+        this.close = shapeData?.close ?? particlesOptions.shape.close;
         this.options = particlesOptions;
         const pathOptions = this.options.move.path;
         this.pathDelay = getValue(pathOptions.delay) * 1000;
         if (pathOptions.generator) {
-            this.pathGenerator = this._engine.plugins.getPathGenerator(pathOptions.generator);
+            this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
             if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
                 this.pathGenerator.init(container);
             }
@@ -137,15 +258,15 @@ export class Particle {
         this.sides = 24;
         let drawer = container.drawers.get(this.shape);
         if (!drawer) {
-            drawer = this._engine.plugins.getShapeDrawer(this.shape);
+            drawer = this._engine.getShapeDrawer(this.shape);
             if (drawer) {
                 container.drawers.set(this.shape, drawer);
             }
         }
-        if (drawer === null || drawer === void 0 ? void 0 : drawer.loadShape) {
-            drawer === null || drawer === void 0 ? void 0 : drawer.loadShape(this);
+        if (drawer && drawer.loadShape) {
+            drawer.loadShape(this);
         }
-        const sideCountFunc = drawer === null || drawer === void 0 ? void 0 : drawer.getSidesCount;
+        const sideCountFunc = drawer?.getSidesCount;
         if (sideCountFunc) {
             this.sides = sideCountFunc(this);
         }
@@ -155,156 +276,28 @@ export class Particle {
             updater.init(this);
         }
         for (const mover of container.particles.movers) {
-            (_f = mover.init) === null || _f === void 0 ? void 0 : _f.call(mover, this);
+            mover.init && mover.init(this);
         }
-        if (drawer === null || drawer === void 0 ? void 0 : drawer.particleInit) {
+        if (drawer && drawer.particleInit) {
             drawer.particleInit(container, this);
         }
         for (const [, plugin] of container.plugins) {
-            (_g = plugin.particleCreated) === null || _g === void 0 ? void 0 : _g.call(plugin, this);
+            plugin.particleCreated && plugin.particleCreated(this);
         }
     }
     isInsideCanvas() {
-        const radius = this.getRadius(), canvasSize = this.container.canvas.size;
-        return (this.position.x >= -radius &&
-            this.position.y >= -radius &&
-            this.position.y <= canvasSize.height + radius &&
-            this.position.x <= canvasSize.width + radius);
+        const radius = this.getRadius(), canvasSize = this.container.canvas.size, position = this.position;
+        return (position.x >= -radius &&
+            position.y >= -radius &&
+            position.y <= canvasSize.height + radius &&
+            position.x <= canvasSize.width + radius);
     }
     isVisible() {
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
     }
     reset() {
-        var _a;
         for (const updater of this.container.particles.updaters) {
-            (_a = updater.reset) === null || _a === void 0 ? void 0 : _a.call(updater, this);
-        }
-    }
-    _calcPosition(container, position, zIndex, tryCount = 0) {
-        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, 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"],
-                coord: pos.x,
-                maxCoord: container.canvas.size.width,
-                setCb: (value) => (pos.x += value),
-                radius,
-            });
-        }, fixVertical = (outMode) => {
-            fixOutMode({
-                outMode,
-                checkModes: ["bounce", "bounce-vertical"],
-                coord: pos.y,
-                maxCoord: container.canvas.size.height,
-                setCb: (value) => (pos.y += value),
-                radius,
-            });
-        };
-        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;
-    }
-    _calculateVelocity() {
-        const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
-        if (moveOptions.direction === "inside" || moveOptions.direction === "outside") {
-            return res;
-        }
-        const rad = (Math.PI / 180) * getRangeValue(moveOptions.angle.value), radOffset = (Math.PI / 180) * getRangeValue(moveOptions.angle.offset), range = {
-            left: radOffset - rad / 2,
-            right: radOffset + rad / 2,
-        };
-        if (!moveOptions.straight) {
-            res.angle += randomInRange(setRangeValue(range.left, range.right));
-        }
-        if (moveOptions.random && typeof moveOptions.speed === "number") {
-            res.length *= getRandom();
-        }
-        return res;
-    }
-    _checkOverlap(pos, tryCount = 0) {
-        const collisionsOptions = this.options.collisions, radius = this.getRadius();
-        if (!collisionsOptions.enable) {
-            return false;
-        }
-        const overlapOptions = collisionsOptions.overlap;
-        if (overlapOptions.enable) {
-            return false;
-        }
-        const retries = overlapOptions.retries;
-        if (retries >= 0 && tryCount > retries) {
-            throw new Error("Particle is overlapping and can't be placed");
-        }
-        let overlaps = false;
-        for (const particle of this.container.particles.array) {
-            if (getDistance(pos, particle.position) < radius + particle.getRadius()) {
-                overlaps = true;
-                break;
-            }
-        }
-        return overlaps;
-    }
-    _getRollColor(color) {
-        var _a;
-        if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
-            return color;
-        }
-        const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI / 2 : 0, rolled = Math.floor((((_a = this.roll.angle) !== null && _a !== void 0 ? _a : 0) + backSum) / (Math.PI / backFactor)) % 2;
-        if (!rolled) {
-            return color;
-        }
-        if (this.backColor) {
-            return this.backColor;
-        }
-        if (this.roll.alter) {
-            return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
-        }
-        return color;
-    }
-    _initPosition(position) {
-        var _a, _b;
-        const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value);
-        this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
-        this.initialPosition = this.position.copy();
-        const canvasSize = container.canvas.size, moveCenter = Object.assign({}, this.options.move.center), isCenterPercent = moveCenter.mode === "percent";
-        this.moveCenter = {
-            x: moveCenter.x * (isCenterPercent ? canvasSize.width / 100 : 1),
-            y: moveCenter.y * (isCenterPercent ? canvasSize.height / 100 : 1),
-            radius: (_a = this.options.move.center.radius) !== null && _a !== void 0 ? _a : 0,
-            mode: (_b = this.options.move.center.mode) !== null && _b !== void 0 ? _b : "percent",
-        };
-        this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
-        switch (this.options.move.direction) {
-            case "inside":
-                this.outType = "inside";
-                break;
-            case "outside":
-                this.outType = "outside";
-                break;
-        }
-        this.offset = Vector.origin;
-    }
-    _loadShapeData(shapeOptions, reduceDuplicates) {
-        const shapeData = shapeOptions.options[this.shape];
-        if (shapeData) {
-            return deepExtend({
-                close: shapeOptions.close,
-                fill: shapeOptions.fill,
-            }, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
+            updater.reset && updater.reset(this);
         }
     }
 }