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

package/umd/Core/Particle.js

@@ -4,67 +4,187 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/NumberUtils", "../Utils/Utils", "../Utils/ColorUtils", "../Options/Classes/Interactivity/Interactivity", "./Utils/Vector", "./Utils/Vector3d", "../Utils/CanvasUtils", "../Utils/OptionsUtils"], factory);
+        define(["require", "exports", "../Utils/NumberUtils.js", "../Utils/Utils.js", "../Utils/ColorUtils.js", "../Options/Classes/Interactivity/Interactivity.js", "./Utils/Vector.js", "./Utils/Vector3d.js", "../Utils/CanvasUtils.js", "./Utils/Constants.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Particle = void 0;
-    const NumberUtils_1 = require("../Utils/NumberUtils");
-    const Utils_1 = require("../Utils/Utils");
-    const ColorUtils_1 = require("../Utils/ColorUtils");
-    const Interactivity_1 = require("../Options/Classes/Interactivity/Interactivity");
-    const Vector_1 = require("./Utils/Vector");
-    const Vector3d_1 = require("./Utils/Vector3d");
-    const CanvasUtils_1 = require("../Utils/CanvasUtils");
-    const OptionsUtils_1 = require("../Utils/OptionsUtils");
+    const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
+    const Utils_js_1 = require("../Utils/Utils.js");
+    const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
+    const Interactivity_js_1 = require("../Options/Classes/Interactivity/Interactivity.js");
+    const Vector_js_1 = require("./Utils/Vector.js");
+    const Vector3d_js_1 = require("./Utils/Vector3d.js");
+    const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
+    const Constants_js_1 = require("./Utils/Constants.js");
+    const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
     const fixOutMode = (data) => {
-        if (!(0, Utils_1.isInArray)(data.outMode, data.checkModes)) {
+        if (!(0, Utils_js_1.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);
         }
     };
     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_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+                    }
+                }
+                const canvasSize = container.canvas.size, exactPosition = (0, NumberUtils_js_1.calcExactPositionOrRandomFromSize)({
+                    size: canvasSize,
+                    position: position,
+                }), pos = Vector3d_js_1.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 = (0, NumberUtils_js_1.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
+                if (moveOptions.direction === "inside" || moveOptions.direction === "outside") {
+                    return res;
+                }
+                const rad = (Math.PI / 180) * (0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.value), radOffset = (Math.PI / 180) * (0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.offset), range = {
+                    left: radOffset - rad / 2,
+                    right: radOffset + rad / 2,
+                };
+                if (!moveOptions.straight) {
+                    res.angle += (0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(range.left, range.right));
+                }
+                if (moveOptions.random && typeof moveOptions.speed === "number") {
+                    res.length *= (0, NumberUtils_js_1.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(`${Constants_js_1.errorPrefix} particle is overlapping and can't be placed`);
+                }
+                return !!this.container.particles.find((particle) => (0, NumberUtils_js_1.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 (0, CanvasUtils_js_1.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);
+                }
+                return color;
+            };
+            this._initPosition = (position) => {
+                const container = this.container, zIndexValue = (0, NumberUtils_js_1.getRangeValue)(this.options.zIndex.value);
+                this.position = this._calcPosition(container, position, (0, NumberUtils_js_1.clamp)(zIndexValue, 0, container.zLayers));
+                this.initialPosition = this.position.copy();
+                const canvasSize = container.canvas.size;
+                this.moveCenter = {
+                    ...(0, Utils_js_1.getPosition)(this.options.move.center, canvasSize),
+                    radius: this.options.move.center.radius ?? 0,
+                    mode: this.options.move.center.mode ?? "percent",
+                };
+                this.direction = (0, NumberUtils_js_1.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_js_1.Vector.origin;
+            };
+            this._loadShapeData = (shapeOptions, reduceDuplicates) => {
+                const shapeData = shapeOptions.options[this.shape];
+                if (!shapeData) {
+                    return;
+                }
+                return (0, Utils_js_1.deepExtend)({
+                    close: shapeOptions.close,
+                    fill: shapeOptions.fill,
+                }, (0, Utils_js_1.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 : (0, ColorUtils_1.getHslFromAnimation)(this.color));
+            return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
         }
         getMass() {
             return (this.getRadius() ** 2 * Math.PI) / 2;
@@ -77,15 +197,12 @@
             };
         }
         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 : (0, ColorUtils_1.getHslFromAnimation)(this.strokeColor));
+            return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.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,11 +219,11 @@
             };
             this.outType = "normal";
             this.ignoresResizeRatio = true;
-            const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
-            this.shape = (0, Utils_1.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);
+            const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+            this.shape = (0, Utils_js_1.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);
             const shapeOptions = particlesOptions.shape;
             if (overrideOptions && overrideOptions.shape && overrideOptions.shape.type) {
-                const overrideShapeType = overrideOptions.shape.type, shape = (0, Utils_1.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);
+                const overrideShapeType = overrideOptions.shape.type, shape = (0, Utils_js_1.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);
                 if (shape) {
                     this.shape = shape;
                     shapeOptions.load(overrideOptions.shape);
@@ -114,23 +231,27 @@
             }
             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_1.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_js_1.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 = (0, NumberUtils_1.getValue)(pathOptions.delay) * 1000;
+            this.pathDelay = (0, NumberUtils_js_1.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);
                 }
             }
             container.retina.initParticle(this);
-            this.size = (0, Utils_1.initParticleNumericAnimationValue)(this.options.size, pxRatio);
+            this.size = (0, Utils_js_1.initParticleNumericAnimationValue)(this.options.size, pxRatio);
             this.bubble = {
                 inRange: false,
             };
@@ -141,7 +262,7 @@
             this._initPosition(position);
             this.initialVelocity = this._calculateVelocity();
             this.velocity = this.initialVelocity.copy();
-            this.moveDecay = 1 - (0, NumberUtils_1.getRangeValue)(this.options.move.decay);
+            this.moveDecay = 1 - (0, NumberUtils_js_1.getRangeValue)(this.options.move.decay);
             const particles = container.particles;
             particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
             particles.lastZIndex = this.position.z;
@@ -149,174 +270,46 @@
             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);
             }
             this.spawning = false;
-            this.shadowColor = (0, ColorUtils_1.rangeColorToRgb)(this.options.shadow.color);
+            this.shadowColor = (0, ColorUtils_js_1.rangeColorToRgb)(this.options.shadow.color);
             for (const updater of container.particles.updaters) {
                 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_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
-                }
-            }
-            const canvasSize = container.canvas.size, exactPosition = (0, NumberUtils_1.calcExactPositionOrRandomFromSize)({
-                size: canvasSize,
-                position: position,
-            }), pos = Vector3d_1.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 = (0, NumberUtils_1.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
-            if (moveOptions.direction === "inside" || moveOptions.direction === "outside") {
-                return res;
-            }
-            const rad = (Math.PI / 180) * (0, NumberUtils_1.getRangeValue)(moveOptions.angle.value), radOffset = (Math.PI / 180) * (0, NumberUtils_1.getRangeValue)(moveOptions.angle.offset), range = {
-                left: radOffset - rad / 2,
-                right: radOffset + rad / 2,
-            };
-            if (!moveOptions.straight) {
-                res.angle += (0, NumberUtils_1.randomInRange)((0, NumberUtils_1.setRangeValue)(range.left, range.right));
-            }
-            if (moveOptions.random && typeof moveOptions.speed === "number") {
-                res.length *= (0, NumberUtils_1.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 ((0, NumberUtils_1.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 (0, CanvasUtils_1.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);
-            }
-            return color;
-        }
-        _initPosition(position) {
-            var _a, _b;
-            const container = this.container, zIndexValue = (0, NumberUtils_1.getRangeValue)(this.options.zIndex.value);
-            this.position = this._calcPosition(container, position, (0, NumberUtils_1.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 = (0, NumberUtils_1.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_1.Vector.origin;
-        }
-        _loadShapeData(shapeOptions, reduceDuplicates) {
-            const shapeData = shapeOptions.options[this.shape];
-            if (shapeData) {
-                return (0, Utils_1.deepExtend)({
-                    close: shapeOptions.close,
-                    fill: shapeOptions.fill,
-                }, (0, Utils_1.itemFromSingleOrMultiple)(shapeData, this.id, reduceDuplicates));
+                updater.reset && updater.reset(this);
             }
         }
     }