@tsparticles/engine 4.0.0-alpha.1 → 4.0.0-alpha.14

package/umd/Core/Particle.js

@@ -4,7 +4,7 @@
         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", "../Options/Classes/Interactivity/Interactivity.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/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);
     }
 })(function (require, exports) {
     "use strict";
@@ -15,7 +15,6 @@
     const Constants_js_1 = require("./Utils/Constants.js");
     const Utils_js_1 = require("../Utils/Utils.js");
     const EventType_js_1 = require("../Enums/Types/EventType.js");
-    const Interactivity_js_1 = require("../Options/Classes/Interactivity/Interactivity.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");
@@ -49,108 +48,67 @@
         }
     }
     class Particle {
+        container;
+        backColor;
+        bubble;
+        color;
+        destroyed;
+        direction;
+        effect;
+        effectClose;
+        effectData;
+        effectFill;
+        group;
+        id;
+        ignoresResizeRatio;
+        initialPosition;
+        initialVelocity;
+        isRotating;
+        lastPathTime;
+        misplaced;
+        moveCenter;
+        moveDecay;
+        offset;
+        opacity;
+        options;
+        outType;
+        pathDelay;
+        pathGenerator;
+        pathRotation;
+        position;
+        randomIndexData;
+        retina;
+        roll;
+        rotation;
+        shape;
+        shapeClose;
+        shapeData;
+        shapeFill;
+        sides;
+        size;
+        slow;
+        spawning;
+        strokeColor;
+        strokeOpacity;
+        strokeWidth;
+        unbreakable;
+        velocity;
+        zIndexFactor;
+        _cachedOpacityData = {
+            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._calcPosition = (container, position, zIndex, tryCount = Constants_js_1.defaultRetryCount) => {
-                const plugins = container.plugins.values();
-                for (const plugin of plugins) {
-                    const pluginPos = plugin.particlePosition?.(position, this);
-                    if (pluginPos) {
-                        return Vectors_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
-                    }
-                }
-                const canvasSize = container.canvas.size, exactPosition = (0, MathUtils_js_1.calcExactPositionOrRandomFromSize)({
-                    size: canvasSize,
-                    position: position,
-                }), pos = Vectors_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
-                    fixOutMode({
-                        outMode,
-                        checkModes: [OutMode_js_1.OutMode.bounce],
-                        coord: pos.x,
-                        maxCoord: container.canvas.size.width,
-                        setCb: (value) => (pos.x += value),
-                        radius,
-                    });
-                }, fixVertical = (outMode) => {
-                    fixOutMode({
-                        outMode,
-                        checkModes: [OutMode_js_1.OutMode.bounce],
-                        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);
-                let isValidPosition = true;
-                for (const plugin of plugins) {
-                    isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount);
-                    if (isValidPosition === false) {
-                        break;
-                    }
-                }
-                if (!isValidPosition) {
-                    return this._calcPosition(container, undefined, zIndex, tryCount + Constants_js_1.tryCountIncrement);
-                }
-                return pos;
-            };
-            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._getRollColor = color => {
-                if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
-                    return color;
-                }
-                const backFactor = this.roll.horizontal && this.roll.vertical ? Constants_js_1.double * Constants_js_1.rollFactor : Constants_js_1.rollFactor, backSum = this.roll.horizontal ? Math.PI * Constants_js_1.half : Constants_js_1.none, rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % Constants_js_1.double;
-                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, MathUtils_js_1.getRangeValue)(this.options.zIndex.value);
-                this.position = this._calcPosition(container, position, (0, MathUtils_js_1.clamp)(zIndexValue, Constants_js_1.minZ, 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,
-                    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) {
@@ -160,9 +118,9 @@
             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, pathGenerator = this.pathGenerator, shapeDrawer = this.shape ? container.particles.shapeDrawers.get(this.shape) : undefined;
             shapeDrawer?.particleDestroy?.(this);
-            for (const plugin of container.plugins.values()) {
+            for (const plugin of container.particleDestroyedPlugins) {
                 plugin.particleDestroyed?.(this, override);
             }
             for (const updater of container.particles.updaters) {
@@ -178,9 +136,7 @@
         }
         draw(delta) {
             const container = this.container, canvas = container.canvas;
-            for (const plugin of container.plugins.values()) {
-                canvas.drawParticlePlugin(plugin, this, delta);
-            }
+            canvas.drawParticlePlugins(this, delta);
             canvas.drawParticle(this, delta);
         }
         getAngle() {
@@ -192,21 +148,44 @@
         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;
+            this._cachedOpacityData.opacity = opacity * zOpacityFactor;
+            this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;
+            return this._cachedOpacityData;
+        }
         getPosition() {
-            return {
-                x: this.position.x + this.offset.x,
-                y: this.position.y + this.offset.y,
-                z: this.position.z,
-            };
+            this._cachedPosition.x = this.position.x + this.offset.x;
+            this._cachedPosition.y = this.position.y + this.offset.y;
+            this._cachedPosition.z = this.position.z;
+            return this._cachedPosition;
         }
         getRadius() {
             return this.bubble.radius ?? this.size.value;
         }
+        getRotateData() {
+            const angle = this.getAngle();
+            this._cachedRotateData.sin = Math.sin(angle);
+            this._cachedRotateData.cos = Math.cos(angle);
+            return this._cachedRotateData;
+        }
         getStrokeColor() {
             return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.strokeColor));
         }
+        getTransformData(externalTransform) {
+            const rotateData = this.getRotateData(), rotating = this.isRotating;
+            this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? Constants_js_1.defaultTransform.a);
+            this._cachedTransform.b = rotating
+                ? rotateData.sin * (externalTransform.b ?? Constants_js_1.identity)
+                : (externalTransform.b ?? Constants_js_1.defaultTransform.b);
+            this._cachedTransform.c = rotating
+                ? -rotateData.sin * (externalTransform.c ?? Constants_js_1.identity)
+                : (externalTransform.c ?? Constants_js_1.defaultTransform.c);
+            this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? Constants_js_1.defaultTransform.d);
+            return this._cachedTransform;
+        }
         init(id, position, overrideOptions, group) {
-            const container = this.container, engine = this._engine;
+            const container = this.container;
             this.id = id;
             this.group = group;
             this.effectClose = true;
@@ -246,16 +225,14 @@
                 }
             }
             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;
+            this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;
             this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;
             particlesOptions.load(overrideOptions);
             const effectData = this.effectData;
@@ -266,10 +243,6 @@
             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.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
             this.effectClose = effectData?.close ?? particlesOptions.effect.close;
             this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
@@ -278,10 +251,15 @@
             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);
+                let pathGenerator = this.container.particles.pathGenerators.get(pathOptions.generator);
+                if (!pathGenerator) {
+                    pathGenerator = this.container.particles.availablePathGenerators.get(pathOptions.generator);
+                    if (pathGenerator) {
+                        this.container.particles.pathGenerators.set(pathOptions.generator, pathGenerator);
+                        pathGenerator.init();
+                    }
                 }
+                this.pathGenerator = pathGenerator;
             }
             container.retina.initParticle(this);
             this.size = (0, Utils_js_1.initParticleNumericAnimationValue)(this.options.size, pxRatio);
@@ -302,25 +280,13 @@
             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);
@@ -338,7 +304,7 @@
             }
             effectDrawer?.particleInit?.(container, this);
             shapeDrawer?.particleInit?.(container, this);
-            for (const plugin of container.plugins.values()) {
+            for (const plugin of container.particleCreatedPlugins) {
                 plugin.particleCreated?.(this);
             }
         }
@@ -349,6 +315,25 @@
                 position.y <= canvasSize.height + radius &&
                 position.x <= canvasSize.width + radius);
         }
+        isShowingBack() {
+            if (!this.roll) {
+                return false;
+            }
+            const angle = this.roll.angle;
+            if (this.roll.horizontal && this.roll.vertical) {
+                const normalizedAngle = angle % Constants_js_1.doublePI, adjustedAngle = normalizedAngle < Constants_js_1.defaultAngle ? normalizedAngle + Constants_js_1.doublePI : normalizedAngle;
+                return adjustedAngle >= Math.PI * Constants_js_1.half && adjustedAngle < Math.PI * Constants_js_1.triple * Constants_js_1.half;
+            }
+            if (this.roll.horizontal) {
+                const normalizedAngle = (angle + Math.PI * Constants_js_1.half) % (Math.PI * Constants_js_1.double), adjustedAngle = normalizedAngle < Constants_js_1.defaultAngle ? normalizedAngle + Math.PI * Constants_js_1.double : normalizedAngle;
+                return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * Constants_js_1.double;
+            }
+            if (this.roll.vertical) {
+                const normalizedAngle = angle % (Math.PI * Constants_js_1.double), adjustedAngle = normalizedAngle < Constants_js_1.defaultAngle ? normalizedAngle + Math.PI * Constants_js_1.double : normalizedAngle;
+                return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * Constants_js_1.double;
+            }
+            return false;
+        }
         isVisible() {
             return !this.destroyed && !this.spawning && this.isInsideCanvas();
         }
@@ -357,6 +342,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, CanvasUtils_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;
 });