@tsparticles/engine 4.0.0-alpha.2 → 4.0.0-alpha.4

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, 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 { 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";
@@ -39,51 +38,50 @@ function fixOutMode(data) {
 export class Particle {
     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);
+        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 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;
+                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;
             }
-            if (!isValidPosition) {
-                return this._calcPosition(container, undefined, zIndex, tryCount + tryCountIncrement);
-            }
-            return pos;
+            return posVec;
         };
         this._calculateVelocity = () => {
             const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
@@ -102,6 +100,26 @@ export class Particle {
             }
             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;
@@ -120,7 +138,11 @@ export class Particle {
         };
         this._initPosition = position => {
             const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value);
-            this.position = this._calcPosition(container, position, clamp(zIndexValue, minZ, container.zLayers));
+            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 = {
@@ -150,7 +172,7 @@ export class Particle {
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
         shapeDrawer?.particleDestroy?.(this);
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             plugin.particleDestroyed?.(this, override);
         }
         for (const updater of container.particles.updaters) {
@@ -166,7 +188,7 @@ export class Particle {
     }
     draw(delta) {
         const container = this.container, canvas = container.canvas;
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             canvas.drawParticlePlugin(plugin, this, delta);
         }
         canvas.drawParticle(this, delta);
@@ -180,21 +202,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;
@@ -254,10 +299,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;
@@ -326,7 +367,7 @@ export class Particle {
         }
         effectDrawer?.particleInit?.(container, this);
         shapeDrawer?.particleInit?.(container, this);
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             plugin.particleCreated?.(this);
         }
     }

package/esm/Core/Particles.js

@@ -1,13 +1,11 @@
 import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, posOffset, qTreeCapacity, sizeFactor, squareExp, } from "./Utils/Constants.js";
 import { EventType } from "../Enums/Types/EventType.js";
-import { InteractionManager } from "./Utils/InteractionManager.js";
 import { LimitMode } from "../Enums/Modes/LimitMode.js";
 import { Particle } from "./Particle.js";
 import { Point } from "./Utils/Point.js";
 import { QuadTree } from "./Utils/QuadTree.js";
 import { Rectangle } from "./Utils/Ranges.js";
 import { getLogger } from "../Utils/LogUtils.js";
-import { getPosition } from "../Utils/Utils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 const qTreeRectangle = (canvasSize) => {
     const { height, width } = canvasSize;
@@ -18,7 +16,7 @@ export class Particles {
         this._addToPool = (...particles) => {
             this._pool.push(...particles);
         };
-        this._applyDensity = (options, manualCount, group, groupOptions) => {
+        this._applyDensity = (options, pluginsCount, group, groupOptions) => {
             const numberOptions = options.number;
             if (!numberOptions.density.enable) {
                 if (group === undefined) {
@@ -29,7 +27,7 @@ export class Particles {
                 }
                 return;
             }
-            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
             if (group === undefined) {
                 this._limit = numberOptions.limit.value * densityFactor;
             }
@@ -109,7 +107,6 @@ export class Particles {
         this._groupLimits = new Map();
         this._needsSort = false;
         this._lastZIndex = 0;
-        this._interactionManager = new InteractionManager(engine, container);
         this._pluginsInitialized = false;
         const canvasSize = container.canvas.size;
         this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
@@ -119,10 +116,6 @@ export class Particles {
     get count() {
         return this._array.length;
     }
-    addManualParticles() {
-        const container = this._container, options = container.actualOptions;
-        options.manualParticles.forEach(p => this.addParticle(p.position ? getPosition(p.position, container.canvas.size) : undefined, p.options));
-    }
     addParticle(position, overrideOptions, group, initializer) {
         const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count;
         if (limit > minLimit) {
@@ -168,22 +161,23 @@ export class Particles {
     get(index) {
         return this._array[index];
     }
-    handleClickMode(mode) {
-        this._interactionManager.handleClickMode(mode);
-    }
     async init() {
         const container = this._container, options = container.actualOptions;
         this._lastZIndex = 0;
         this._needsSort = false;
+        for (const plugin of container.plugins) {
+            if (plugin.redrawInit) {
+                await plugin.redrawInit();
+            }
+        }
         await this.initPlugins();
         let handled = false;
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             handled = plugin.particlesInitialization?.() ?? handled;
             if (handled) {
                 break;
             }
         }
-        this.addManualParticles();
         if (!handled) {
             const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
@@ -207,14 +201,13 @@ export class Particles {
         const container = this._container;
         this.movers = await this._engine.getMovers(container, true);
         this.updaters = await this._engine.getUpdaters(container, true);
-        await this._interactionManager.init();
         for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.init(container);
         }
     }
-    push(nb, mouse, overrideOptions, group) {
+    push(nb, position, overrideOptions, group) {
         for (let i = 0; i < nb; i++) {
-            this.addParticle(mouse?.position, overrideOptions, group);
+            this.addParticle(position, overrideOptions, group);
         }
     }
     async redraw() {
@@ -241,16 +234,22 @@ export class Particles {
         this.removeAt(minIndex, quantity, group);
     }
     setDensity() {
-        const options = this._container.actualOptions, groups = options.particles.groups, manualCount = options.manualParticles.length;
+        const options = this._container.actualOptions, groups = options.particles.groups;
+        let pluginsCount = 0;
+        for (const plugin of this._container.plugins) {
+            if (plugin.particlesDensityCount) {
+                pluginsCount += plugin.particlesDensityCount();
+            }
+        }
         for (const group in groups) {
             const groupData = groups[group];
             if (!groupData) {
                 continue;
             }
             const groupDataOptions = loadParticlesOptions(this._engine, this._container, groupData);
-            this._applyDensity(groupDataOptions, manualCount, group);
+            this._applyDensity(groupDataOptions, pluginsCount, group);
         }
-        this._applyDensity(options.particles, manualCount);
+        this._applyDensity(options.particles, pluginsCount);
     }
     setLastZIndex(zIndex) {
         this._lastZIndex = zIndex;
@@ -265,7 +264,7 @@ export class Particles {
         for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.update();
         }
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
@@ -277,8 +276,12 @@ export class Particles {
                 particle.initialPosition.y *= resizeFactor.height;
             }
             particle.ignoresResizeRatio = false;
-            this._interactionManager.reset(particle);
-            for (const plugin of this._container.plugins.values()) {
+            for (const plugin of this._container.plugins) {
+                if (plugin.particleReset) {
+                    plugin.particleReset(particle);
+                }
+            }
+            for (const plugin of this._container.plugins) {
                 if (particle.destroyed) {
                     break;
                 }
@@ -309,13 +312,21 @@ export class Particles {
             }
             this._addToPool(...particlesToDelete);
         }
-        this._interactionManager.externalInteract(delta);
+        for (const plugin of container.plugins) {
+            if (plugin.postUpdate) {
+                plugin.postUpdate(delta);
+            }
+        }
         for (const particle of this._array) {
             for (const updater of this.updaters) {
                 updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
-                this._interactionManager.particlesInteract(particle, delta);
+                for (const plugin of container.plugins) {
+                    if (plugin.postParticleUpdate) {
+                        plugin.postParticleUpdate(particle, delta);
+                    }
+                }
             }
         }
         delete this._resizeFactor;

package/esm/Core/Utils/Constants.js

@@ -1,4 +1,4 @@
-export const generatedAttribute = "generated", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseOutEvent = "pointerout", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
+export const generatedAttribute = "generated", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
     x: 0,
     y: 0,
     z: 0,
@@ -7,4 +7,4 @@ export const generatedAttribute = "generated", mouseDownEvent = "pointerdown", m
     b: 0,
     c: 0,
     d: 1,
-}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, rollFactor = 1, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, manualCount = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;
+}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, rollFactor = 1, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;