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

package/esm/Core/Particle.js

@@ -1,9 +1,8 @@
 import { Vector, Vector3d } from "./Utils/Vectors.js";
 import { calcExactPositionOrRandomFromSize, clamp, degToRad, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRangeValue, setRangeValue, } from "../Utils/MathUtils.js";
-import { decayOffset, defaultAngle, defaultRetryCount, double, half, millisecondsToSeconds, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, } from "./Utils/Constants.js";
+import { decayOffset, defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, doublePI, half, identity, millisecondsToSeconds, minZ, randomColorValue, squareExp, triple, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
 import { EventType } from "../Enums/Types/EventType.js";
-import { Interactivity } from "../Options/Classes/Interactivity/Interactivity.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import { OutMode } from "../Enums/Modes/OutMode.js";
 import { ParticleOutType } from "../Enums/Types/ParticleOutType.js";
@@ -37,108 +36,67 @@ function fixOutMode(data) {
     }
 }
 export 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: 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._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
-            const plugins = container.plugins.values();
-            for (const plugin of plugins) {
-                const pluginPos = plugin.particlePosition?.(position, this);
-                if (pluginPos) {
-                    return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
-                }
-            }
-            const canvasSize = container.canvas.size, exactPosition = calcExactPositionOrRandomFromSize({
-                size: canvasSize,
-                position: position,
-            }), pos = Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
-                fixOutMode({
-                    outMode,
-                    checkModes: [OutMode.bounce],
-                    coord: pos.x,
-                    maxCoord: container.canvas.size.width,
-                    setCb: (value) => (pos.x += value),
-                    radius,
-                });
-            }, fixVertical = (outMode) => {
-                fixOutMode({
-                    outMode,
-                    checkModes: [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 + tryCountIncrement);
-            }
-            return pos;
-        };
-        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._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);
-            this.position = this._calcPosition(container, position, clamp(zIndexValue, minZ, container.zLayers));
-            this.initialPosition = this.position.copy();
-            const canvasSize = container.canvas.size;
-            this.moveCenter = {
-                ...getPosition(this.options.move.center, canvasSize),
-                radius: this.options.move.center.radius,
-                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) {
@@ -148,9 +106,9 @@ 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, 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) {
@@ -166,9 +124,7 @@ export class Particle {
     }
     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() {
@@ -180,21 +136,44 @@ export class Particle {
     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;
+        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 ?? getHslFromAnimation(this.strokeColor));
     }
+    getTransformData(externalTransform) {
+        const rotateData = this.getRotateData(), rotating = this.isRotating;
+        this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? defaultTransform.a);
+        this._cachedTransform.b = rotating
+            ? rotateData.sin * (externalTransform.b ?? identity)
+            : (externalTransform.b ?? defaultTransform.b);
+        this._cachedTransform.c = rotating
+            ? -rotateData.sin * (externalTransform.c ?? identity)
+            : (externalTransform.c ?? defaultTransform.c);
+        this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? 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;
@@ -234,16 +213,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;
@@ -254,10 +231,6 @@ export class Particle {
         if (shapeData) {
             particlesOptions.load(shapeData.particles);
         }
-        const interactivity = new Interactivity(engine, container);
-        interactivity.load(container.actualOptions.interactivity);
-        interactivity.load(particlesOptions.interactivity);
-        this.interactivity = interactivity;
         this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
         this.effectClose = effectData?.close ?? particlesOptions.effect.close;
         this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
@@ -266,10 +239,15 @@ export class Particle {
         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);
+            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 = initParticleNumericAnimationValue(this.options.size, pxRatio);
@@ -290,25 +268,13 @@ export class Particle {
         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);
@@ -326,7 +292,7 @@ export class Particle {
         }
         effectDrawer?.particleInit?.(container, this);
         shapeDrawer?.particleInit?.(container, this);
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.particleCreatedPlugins) {
             plugin.particleCreated?.(this);
         }
     }
@@ -337,6 +303,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();
     }
@@ -345,4 +330,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;
+    };
 }