@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.0

package/umd/Core/Particle.js

@@ -4,35 +4,32 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Vectors.js", "../Utils/MathUtils.js", "./Utils/Constants.js", "../Utils/Utils.js", "../Enums/Types/EventType.js", "../Enums/Directions/MoveDirection.js", "../Enums/Modes/OutMode.js", "../Enums/Types/ParticleOutType.js", "../Utils/CanvasUtils.js", "../Utils/ColorUtils.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "./Utils/Vectors.js", "../Utils/ColorUtils.js", "../Utils/MathUtils.js", "../Utils/Utils.js", "./Utils/Constants.js", "../Enums/Types/EventType.js", "../Enums/Directions/MoveDirection.js", "../Enums/Modes/OutMode.js", "../Enums/Types/ParticleOutType.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Particle = void 0;
     const Vectors_js_1 = require("./Utils/Vectors.js");
+    const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
     const MathUtils_js_1 = require("../Utils/MathUtils.js");
-    const Constants_js_1 = require("./Utils/Constants.js");
     const Utils_js_1 = require("../Utils/Utils.js");
+    const Constants_js_1 = require("./Utils/Constants.js");
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const MoveDirection_js_1 = require("../Enums/Directions/MoveDirection.js");
     const OutMode_js_1 = require("../Enums/Modes/OutMode.js");
     const ParticleOutType_js_1 = require("../Enums/Types/ParticleOutType.js");
-    const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
-    const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
     function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
         const effectData = effectOptions.options[effect];
         return (0, Utils_js_1.deepExtend)({
             close: effectOptions.close,
-            fill: effectOptions.fill,
         }, (0, Utils_js_1.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));
     }
     function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
         const shapeData = shapeOptions.options[shape];
         return (0, Utils_js_1.deepExtend)({
             close: shapeOptions.close,
-            fill: shapeOptions.fill,
         }, (0, Utils_js_1.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));
     }
     function fixOutMode(data) {
@@ -48,130 +45,65 @@
         }
     }
     class Particle {
+        container;
+        backColor;
+        bubble;
+        destroyed;
+        direction;
+        effect;
+        effectClose;
+        effectData;
+        fillColor;
+        fillEnabled;
+        fillOpacity;
+        group;
+        id;
+        ignoresResizeRatio;
+        initialPosition;
+        initialVelocity;
+        isRotating;
+        lastPathTime;
+        misplaced;
+        moveCenter;
+        offset;
+        opacity;
+        options;
+        outType;
+        pathRotation;
+        position;
+        randomIndexData;
+        retina;
+        roll;
+        rotation;
+        shape;
+        shapeClose;
+        shapeData;
+        sides;
+        size;
+        slow;
+        spawning;
+        strokeColor;
+        strokeOpacity;
+        strokeWidth;
+        unbreakable;
+        velocity;
+        zIndexFactor;
+        _cachedOpacityData = {
+            fillOpacity: Constants_js_1.defaultOpacity,
+            opacity: Constants_js_1.defaultOpacity,
+            strokeOpacity: Constants_js_1.defaultOpacity,
+        };
+        _cachedPosition = Vectors_js_1.Vector3d.origin;
+        _cachedRotateData = { sin: 0, cos: 0 };
+        _cachedTransform = {
+            a: 1,
+            b: 0,
+            c: 0,
+            d: 1,
+        };
+        _engine;
         constructor(engine, container) {
             this.container = container;
-            this._cachedOpacityData = {
-                opacity: Constants_js_1.defaultOpacity,
-                strokeOpacity: Constants_js_1.defaultOpacity,
-            };
-            this._cachedPosition = Vectors_js_1.Vector3d.origin;
-            this._cachedRotateData = { sin: 0, cos: 0 };
-            this._cachedTransform = {
-                a: 1,
-                b: 0,
-                c: 0,
-                d: 1,
-            };
-            this._calcPosition = (position, zIndex) => {
-                let tryCount = Constants_js_1.defaultRetryCount, posVec = position ? Vectors_js_1.Vector3d.create(position.x, position.y, zIndex) : undefined;
-                const container = this.container, plugins = Array.from(container.plugins), outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;
-                while (!signal.aborted) {
-                    for (const plugin of plugins) {
-                        const pluginPos = plugin.particlePosition?.(posVec, this);
-                        if (pluginPos) {
-                            return Vectors_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
-                        }
-                    }
-                    const exactPosition = (0, MathUtils_js_1.calcExactPositionOrRandomFromSize)({
-                        size: canvasSize,
-                        position: posVec,
-                    }), pos = Vectors_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);
-                    this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);
-                    this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);
-                    this._fixVertical(pos, radius, outModes.top ?? outModes.default);
-                    this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);
-                    let isValidPosition = true;
-                    for (const plugin of plugins) {
-                        isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;
-                        if (!isValidPosition) {
-                            break;
-                        }
-                    }
-                    if (isValidPosition) {
-                        return pos;
-                    }
-                    tryCount += Constants_js_1.tryCountIncrement;
-                    posVec = undefined;
-                }
-                return posVec;
-            };
-            this._calculateVelocity = () => {
-                const baseVelocity = (0, MathUtils_js_1.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
-                if (moveOptions.direction === MoveDirection_js_1.MoveDirection.inside || moveOptions.direction === MoveDirection_js_1.MoveDirection.outside) {
-                    return res;
-                }
-                const rad = (0, MathUtils_js_1.degToRad)((0, MathUtils_js_1.getRangeValue)(moveOptions.angle.value)), radOffset = (0, MathUtils_js_1.degToRad)((0, MathUtils_js_1.getRangeValue)(moveOptions.angle.offset)), range = {
-                    left: radOffset - rad * Constants_js_1.half,
-                    right: radOffset + rad * Constants_js_1.half,
-                };
-                if (!moveOptions.straight) {
-                    res.angle += (0, MathUtils_js_1.randomInRangeValue)((0, MathUtils_js_1.setRangeValue)(range.left, range.right));
-                }
-                if (moveOptions.random && typeof moveOptions.speed === "number") {
-                    res.length *= (0, MathUtils_js_1.getRandom)();
-                }
-                return res;
-            };
-            this._fixHorizontal = (pos, radius, outMode) => {
-                fixOutMode({
-                    outMode,
-                    checkModes: [OutMode_js_1.OutMode.bounce],
-                    coord: pos.x,
-                    maxCoord: this.container.canvas.size.width,
-                    setCb: (value) => (pos.x += value),
-                    radius,
-                });
-            };
-            this._fixVertical = (pos, radius, outMode) => {
-                fixOutMode({
-                    outMode,
-                    checkModes: [OutMode_js_1.OutMode.bounce],
-                    coord: pos.y,
-                    maxCoord: this.container.canvas.size.height,
-                    setCb: (value) => (pos.y += value),
-                    radius,
-                });
-            };
-            this._getRollColor = color => {
-                if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
-                    return color;
-                }
-                if (!this.isShowingBack()) {
-                    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, MathUtils_js_1.getRangeValue)(this.options.zIndex.value);
-                const initialPosition = this._calcPosition(position, (0, MathUtils_js_1.clamp)(zIndexValue, Constants_js_1.minZ, container.zLayers));
-                if (!initialPosition) {
-                    throw new Error("a valid position cannot be found for particle");
-                }
-                this.position = initialPosition;
-                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,
-                    mode: this.options.move.center.mode,
-                };
-                this.direction = (0, MathUtils_js_1.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);
-                switch (this.options.move.direction) {
-                    case MoveDirection_js_1.MoveDirection.inside:
-                        this.outType = ParticleOutType_js_1.ParticleOutType.inside;
-                        break;
-                    case MoveDirection_js_1.MoveDirection.outside:
-                        this.outType = ParticleOutType_js_1.ParticleOutType.outside;
-                        break;
-                }
-                this.offset = Vectors_js_1.Vector.origin;
-            };
             this._engine = engine;
         }
         destroy(override) {
@@ -181,15 +113,14 @@
             this.destroyed = true;
             this.bubble.inRange = false;
             this.slow.inRange = false;
-            const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
+            const container = this.container, shapeDrawer = this.shape ? container.particles.shapeDrawers.get(this.shape) : undefined;
             shapeDrawer?.particleDestroy?.(this);
-            for (const plugin of container.plugins) {
+            for (const plugin of container.particleDestroyedPlugins) {
                 plugin.particleDestroyed?.(this, override);
             }
             for (const updater of container.particles.updaters) {
                 updater.particleDestroyed?.(this, override);
             }
-            pathGenerator?.reset(this);
             this._engine.dispatchEvent(EventType_js_1.EventType.particleDestroyed, {
                 container: this.container,
                 data: {
@@ -199,24 +130,23 @@
         }
         draw(delta) {
             const container = this.container, canvas = container.canvas;
-            for (const plugin of container.plugins) {
-                canvas.drawParticlePlugin(plugin, this, delta);
-            }
+            canvas.drawParticlePlugins(this, delta);
             canvas.drawParticle(this, delta);
         }
         getAngle() {
             return this.rotation + (this.pathRotation ? this.velocity.angle : Constants_js_1.defaultAngle);
         }
         getFillColor() {
-            return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
+            return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.fillColor));
         }
         getMass() {
             return this.getRadius() ** Constants_js_1.squareExp * Math.PI * Constants_js_1.half;
         }
         getOpacity() {
-            const zIndexOptions = this.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0, MathUtils_js_1.getRangeValue)(this.opacity?.value ?? Constants_js_1.defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;
+            const zIndexOptions = this.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0, MathUtils_js_1.getRangeValue)(this.opacity?.value ?? Constants_js_1.defaultOpacity), fillOpacity = this.fillOpacity ?? Constants_js_1.defaultOpacity, strokeOpacity = this.strokeOpacity ?? Constants_js_1.defaultOpacity;
+            this._cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
             this._cachedOpacityData.opacity = opacity * zOpacityFactor;
-            this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;
+            this._cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
             return this._cachedOpacityData;
         }
         getPosition() {
@@ -254,9 +184,7 @@
             this.id = id;
             this.group = group;
             this.effectClose = true;
-            this.effectFill = true;
             this.shapeClose = true;
-            this.shapeFill = true;
             this.pathRotation = false;
             this.lastPathTime = 0;
             this.destroyed = false;
@@ -290,11 +218,11 @@
                 }
             }
             if (this.effect === Constants_js_1.randomColorValue) {
-                const availableEffects = [...this.container.effectDrawers.keys()];
+                const availableEffects = [...this.container.particles.effectDrawers.keys()];
                 this.effect = availableEffects[Math.floor((0, MathUtils_js_1.getRandom)() * availableEffects.length)];
             }
             if (this.shape === Constants_js_1.randomColorValue) {
-                const availableShapes = [...this.container.shapeDrawers.keys()];
+                const availableShapes = [...this.container.particles.shapeDrawers.keys()];
                 this.shape = availableShapes[Math.floor((0, MathUtils_js_1.getRandom)() * availableShapes.length)];
             }
             this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;
@@ -308,19 +236,9 @@
             if (shapeData) {
                 particlesOptions.load(shapeData.particles);
             }
-            this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
             this.effectClose = effectData?.close ?? particlesOptions.effect.close;
-            this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
             this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
             this.options = particlesOptions;
-            const pathOptions = this.options.move.path;
-            this.pathDelay = (0, MathUtils_js_1.getRangeValue)(pathOptions.delay.value) * Constants_js_1.millisecondsToSeconds;
-            if (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_js_1.initParticleNumericAnimationValue)(this.options.size, pxRatio);
             this.bubble = {
@@ -333,32 +251,19 @@
             this._initPosition(position);
             this.initialVelocity = this._calculateVelocity();
             this.velocity = this.initialVelocity.copy();
-            this.moveDecay = Constants_js_1.decayOffset - (0, MathUtils_js_1.getRangeValue)(this.options.move.decay);
             const particles = container.particles;
             particles.setLastZIndex(this.position.z);
             this.zIndexFactor = this.position.z / container.zLayers;
             this.sides = 24;
             let effectDrawer, shapeDrawer;
             if (this.effect) {
-                effectDrawer = container.effectDrawers.get(this.effect);
-                if (!effectDrawer) {
-                    effectDrawer = this._engine.getEffectDrawer(this.effect);
-                    if (effectDrawer) {
-                        container.effectDrawers.set(this.effect, effectDrawer);
-                    }
-                }
+                effectDrawer = container.particles.effectDrawers.get(this.effect);
             }
             if (effectDrawer?.loadEffect) {
                 effectDrawer.loadEffect(this);
             }
             if (this.shape) {
-                shapeDrawer = container.shapeDrawers.get(this.shape);
-                if (!shapeDrawer) {
-                    shapeDrawer = this._engine.getShapeDrawer(this.shape);
-                    if (shapeDrawer) {
-                        container.shapeDrawers.set(this.shape, shapeDrawer);
-                    }
-                }
+                shapeDrawer = container.particles.shapeDrawers.get(this.shape);
             }
             if (shapeDrawer?.loadShape) {
                 shapeDrawer.loadShape(this);
@@ -371,12 +276,9 @@
             for (const updater of particles.updaters) {
                 updater.init(this);
             }
-            for (const mover of particles.movers) {
-                mover.init(this);
-            }
             effectDrawer?.particleInit?.(container, this);
             shapeDrawer?.particleInit?.(container, this);
-            for (const plugin of container.plugins) {
+            for (const plugin of container.particleCreatedPlugins) {
                 plugin.particleCreated?.(this);
             }
         }
@@ -414,6 +316,117 @@
                 updater.reset?.(this);
             }
         }
+        _calcPosition = (position, zIndex) => {
+            let tryCount = Constants_js_1.defaultRetryCount, posVec = position ? Vectors_js_1.Vector3d.create(position.x, position.y, zIndex) : undefined;
+            const container = this.container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;
+            while (!signal.aborted) {
+                for (const plugin of plugins) {
+                    const pluginPos = plugin.particlePosition?.(posVec, this);
+                    if (pluginPos) {
+                        return Vectors_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+                    }
+                }
+                const exactPosition = (0, MathUtils_js_1.calcExactPositionOrRandomFromSize)({
+                    size: canvasSize,
+                    position: posVec,
+                }), pos = Vectors_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);
+                this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);
+                this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);
+                this._fixVertical(pos, radius, outModes.top ?? outModes.default);
+                this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);
+                let isValidPosition = true;
+                for (const plugin of container.particles.checkParticlePositionPlugins) {
+                    isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;
+                    if (!isValidPosition) {
+                        break;
+                    }
+                }
+                if (isValidPosition) {
+                    return pos;
+                }
+                tryCount += Constants_js_1.tryCountIncrement;
+                posVec = undefined;
+            }
+            return posVec;
+        };
+        _calculateVelocity = () => {
+            const baseVelocity = (0, MathUtils_js_1.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
+            if (moveOptions.direction === MoveDirection_js_1.MoveDirection.inside || moveOptions.direction === MoveDirection_js_1.MoveDirection.outside) {
+                return res;
+            }
+            const rad = (0, MathUtils_js_1.degToRad)((0, MathUtils_js_1.getRangeValue)(moveOptions.angle.value)), radOffset = (0, MathUtils_js_1.degToRad)((0, MathUtils_js_1.getRangeValue)(moveOptions.angle.offset)), range = {
+                left: radOffset - rad * Constants_js_1.half,
+                right: radOffset + rad * Constants_js_1.half,
+            };
+            if (!moveOptions.straight) {
+                res.angle += (0, MathUtils_js_1.randomInRangeValue)((0, MathUtils_js_1.setRangeValue)(range.left, range.right));
+            }
+            if (moveOptions.random && typeof moveOptions.speed === "number") {
+                res.length *= (0, MathUtils_js_1.getRandom)();
+            }
+            return res;
+        };
+        _fixHorizontal = (pos, radius, outMode) => {
+            fixOutMode({
+                outMode,
+                checkModes: [OutMode_js_1.OutMode.bounce],
+                coord: pos.x,
+                maxCoord: this.container.canvas.size.width,
+                setCb: (value) => (pos.x += value),
+                radius,
+            });
+        };
+        _fixVertical = (pos, radius, outMode) => {
+            fixOutMode({
+                outMode,
+                checkModes: [OutMode_js_1.OutMode.bounce],
+                coord: pos.y,
+                maxCoord: this.container.canvas.size.height,
+                setCb: (value) => (pos.y += value),
+                radius,
+            });
+        };
+        _getRollColor = color => {
+            if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
+                return color;
+            }
+            if (!this.isShowingBack()) {
+                return color;
+            }
+            if (this.backColor) {
+                return this.backColor;
+            }
+            if (this.roll.alter) {
+                return (0, ColorUtils_js_1.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);
+            }
+            return color;
+        };
+        _initPosition = position => {
+            const container = this.container, zIndexValue = (0, MathUtils_js_1.getRangeValue)(this.options.zIndex.value), initialPosition = this._calcPosition(position, (0, MathUtils_js_1.clamp)(zIndexValue, Constants_js_1.minZ, container.zLayers));
+            if (!initialPosition) {
+                throw new Error("a valid position cannot be found for particle");
+            }
+            this.position = initialPosition;
+            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,
+                mode: this.options.move.center.mode,
+            };
+            this.direction = (0, MathUtils_js_1.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);
+            switch (this.options.move.direction) {
+                case MoveDirection_js_1.MoveDirection.inside:
+                    this.outType = ParticleOutType_js_1.ParticleOutType.inside;
+                    break;
+                case MoveDirection_js_1.MoveDirection.outside:
+                    this.outType = ParticleOutType_js_1.ParticleOutType.outside;
+                    break;
+                default:
+                    break;
+            }
+            this.offset = Vectors_js_1.Vector.origin;
+        };
     }
     exports.Particle = Particle;
 });