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

package/esm/Core/Particle.js

@@ -1,26 +1,23 @@
 import { Vector, Vector3d } from "./Utils/Vectors.js";
+import { alterHsl, getHslFromAnimation } from "../Utils/ColorUtils.js";
 import { calcExactPositionOrRandomFromSize, clamp, degToRad, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRangeValue, setRangeValue, } from "../Utils/MathUtils.js";
-import { decayOffset, defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, half, identity, millisecondsToSeconds, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
+import { defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, doublePI, half, identity, minZ, randomColorValue, squareExp, triple, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import { OutMode } from "../Enums/Modes/OutMode.js";
 import { ParticleOutType } from "../Enums/Types/ParticleOutType.js";
-import { alterHsl } from "../Utils/CanvasUtils.js";
-import { getHslFromAnimation } from "../Utils/ColorUtils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
     const effectData = effectOptions.options[effect];
     return deepExtend({
         close: effectOptions.close,
-        fill: effectOptions.fill,
     }, itemFromSingleOrMultiple(effectData, id, reduceDuplicates));
 }
 function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
     const shapeData = shapeOptions.options[shape];
     return deepExtend({
         close: shapeOptions.close,
-        fill: shapeOptions.fill,
     }, itemFromSingleOrMultiple(shapeData, id, reduceDuplicates));
 }
 function fixOutMode(data) {
@@ -36,131 +33,65 @@ function fixOutMode(data) {
     }
 }
 export 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: defaultOpacity,
+        opacity: defaultOpacity,
+        strokeOpacity: defaultOpacity,
+    };
+    _cachedPosition = 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: defaultOpacity,
-            strokeOpacity: defaultOpacity,
-        };
-        this._cachedPosition = Vector3d.origin;
-        this._cachedRotateData = { sin: 0, cos: 0 };
-        this._cachedTransform = {
-            a: 1,
-            b: 0,
-            c: 0,
-            d: 1,
-        };
-        this._calcPosition = (position, zIndex) => {
-            let tryCount = defaultRetryCount, posVec = position ? 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 Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
-                    }
-                }
-                const exactPosition = calcExactPositionOrRandomFromSize({
-                    size: canvasSize,
-                    position: posVec,
-                }), pos = 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 += tryCountIncrement;
-                posVec = undefined;
-            }
-            return posVec;
-        };
-        this._calculateVelocity = () => {
-            const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
-            if (moveOptions.direction === MoveDirection.inside || moveOptions.direction === MoveDirection.outside) {
-                return res;
-            }
-            const rad = degToRad(getRangeValue(moveOptions.angle.value)), radOffset = degToRad(getRangeValue(moveOptions.angle.offset)), range = {
-                left: radOffset - rad * half,
-                right: radOffset + rad * half,
-            };
-            if (!moveOptions.straight) {
-                res.angle += randomInRangeValue(setRangeValue(range.left, range.right));
-            }
-            if (moveOptions.random && typeof moveOptions.speed === "number") {
-                res.length *= getRandom();
-            }
-            return res;
-        };
-        this._fixHorizontal = (pos, radius, outMode) => {
-            fixOutMode({
-                outMode,
-                checkModes: [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.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;
-            }
-            const backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor, backSum = this.roll.horizontal ? Math.PI * half : none, rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % double;
-            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);
-            const initialPosition = this._calcPosition(position, clamp(zIndexValue, 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 = {
-                ...getPosition(this.options.move.center, canvasSize),
-                radius: this.options.move.center.radius,
-                mode: this.options.move.center.mode,
-            };
-            this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
-            switch (this.options.move.direction) {
-                case MoveDirection.inside:
-                    this.outType = ParticleOutType.inside;
-                    break;
-                case MoveDirection.outside:
-                    this.outType = ParticleOutType.outside;
-                    break;
-            }
-            this.offset = Vector.origin;
-        };
         this._engine = engine;
     }
     destroy(override) {
@@ -170,15 +101,14 @@ export class Particle {
         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.particleDestroyed, {
             container: this.container,
             data: {
@@ -188,24 +118,23 @@ export class Particle {
     }
     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 : defaultAngle);
     }
     getFillColor() {
-        return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.color));
+        return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
     }
     getMass() {
         return this.getRadius() ** squareExp * Math.PI * half;
     }
     getOpacity() {
-        const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;
+        const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity), fillOpacity = this.fillOpacity ?? defaultOpacity, strokeOpacity = this.strokeOpacity ?? 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() {
@@ -243,9 +172,7 @@ export class Particle {
         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;
@@ -279,16 +206,14 @@ export class Particle {
             }
         }
         if (this.effect === randomColorValue) {
-            const availableEffects = [...this.container.effectDrawers.keys()];
+            const availableEffects = [...this.container.particles.effectDrawers.keys()];
             this.effect = availableEffects[Math.floor(getRandom() * availableEffects.length)];
         }
         if (this.shape === randomColorValue) {
-            const availableShapes = [...this.container.shapeDrawers.keys()];
+            const availableShapes = [...this.container.particles.shapeDrawers.keys()];
             this.shape = availableShapes[Math.floor(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;
@@ -299,19 +224,9 @@ export class Particle {
         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 = getRangeValue(pathOptions.delay.value) * 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 = initParticleNumericAnimationValue(this.options.size, pxRatio);
         this.bubble = {
@@ -324,32 +239,19 @@ export class Particle {
         this._initPosition(position);
         this.initialVelocity = this._calculateVelocity();
         this.velocity = this.initialVelocity.copy();
-        this.moveDecay = decayOffset - 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);
@@ -362,12 +264,9 @@ export class Particle {
         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);
         }
     }
@@ -378,6 +277,25 @@ export class Particle {
             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 % doublePI, adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + doublePI : normalizedAngle;
+            return adjustedAngle >= Math.PI * half && adjustedAngle < Math.PI * triple * half;
+        }
+        if (this.roll.horizontal) {
+            const normalizedAngle = (angle + Math.PI * half) % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + Math.PI * double : normalizedAngle;
+            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
+        }
+        if (this.roll.vertical) {
+            const normalizedAngle = angle % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + Math.PI * double : normalizedAngle;
+            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
+        }
+        return false;
+    }
     isVisible() {
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
     }
@@ -386,4 +304,115 @@ export class Particle {
             updater.reset?.(this);
         }
     }
+    _calcPosition = (position, zIndex) => {
+        let tryCount = defaultRetryCount, posVec = position ? 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 Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+                }
+            }
+            const exactPosition = calcExactPositionOrRandomFromSize({
+                size: canvasSize,
+                position: posVec,
+            }), pos = 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 += tryCountIncrement;
+            posVec = undefined;
+        }
+        return posVec;
+    };
+    _calculateVelocity = () => {
+        const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
+        if (moveOptions.direction === MoveDirection.inside || moveOptions.direction === MoveDirection.outside) {
+            return res;
+        }
+        const rad = degToRad(getRangeValue(moveOptions.angle.value)), radOffset = degToRad(getRangeValue(moveOptions.angle.offset)), range = {
+            left: radOffset - rad * half,
+            right: radOffset + rad * half,
+        };
+        if (!moveOptions.straight) {
+            res.angle += randomInRangeValue(setRangeValue(range.left, range.right));
+        }
+        if (moveOptions.random && typeof moveOptions.speed === "number") {
+            res.length *= getRandom();
+        }
+        return res;
+    };
+    _fixHorizontal = (pos, radius, outMode) => {
+        fixOutMode({
+            outMode,
+            checkModes: [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.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 alterHsl(color, this.roll.alter.type, this.roll.alter.value);
+        }
+        return color;
+    };
+    _initPosition = position => {
+        const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value), initialPosition = this._calcPosition(position, clamp(zIndexValue, 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 = {
+            ...getPosition(this.options.move.center, canvasSize),
+            radius: this.options.move.center.radius,
+            mode: this.options.move.center.mode,
+        };
+        this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
+        switch (this.options.move.direction) {
+            case MoveDirection.inside:
+                this.outType = ParticleOutType.inside;
+                break;
+            case MoveDirection.outside:
+                this.outType = ParticleOutType.outside;
+                break;
+            default:
+                break;
+        }
+        this.offset = Vector.origin;
+    };
 }