@tsparticles/engine 3.2.2 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -4
- package/browser/Core/Canvas.js +34 -29
- package/browser/Core/Container.js +60 -47
- package/browser/Core/Engine.js +82 -74
- package/browser/Core/Particle.js +40 -26
- package/browser/Core/Particles.js +51 -52
- package/browser/Core/Utils/EventListeners.js +18 -17
- package/browser/Core/Utils/ExternalInteractorBase.js +2 -1
- package/browser/Core/Utils/InteractionManager.js +7 -6
- package/browser/Core/Utils/ParticlesInteractorBase.js +2 -1
- package/browser/Core/Utils/QuadTree.js +1 -1
- package/browser/Core/Utils/Ranges.js +5 -4
- package/browser/Enums/AnimationStatus.js +5 -1
- package/browser/Enums/Directions/MoveDirection.js +14 -1
- package/browser/Enums/Directions/OutModeDirection.js +7 -1
- package/browser/Enums/Directions/RotateDirection.js +6 -1
- package/browser/Enums/InteractivityDetect.js +6 -1
- package/browser/Enums/Modes/AnimationMode.js +7 -1
- package/browser/Enums/Modes/CollisionMode.js +6 -1
- package/browser/Enums/Modes/LimitMode.js +5 -1
- package/browser/Enums/Modes/OutMode.js +8 -1
- package/browser/Enums/Modes/PixelMode.js +5 -1
- package/browser/Enums/Modes/ResponsiveMode.js +5 -1
- package/browser/Enums/Modes/ThemeMode.js +6 -1
- package/browser/Enums/Types/AlterType.js +5 -1
- package/browser/Enums/Types/DestroyType.js +6 -1
- package/browser/Enums/Types/DivType.js +5 -1
- package/browser/Enums/Types/EasingType.js +30 -1
- package/browser/Enums/Types/EventType.js +15 -1
- package/browser/Enums/Types/GradientType.js +6 -1
- package/browser/Enums/Types/InteractorType.js +5 -1
- package/browser/Enums/Types/ParticleOutType.js +6 -1
- package/browser/Enums/Types/StartValueType.js +6 -1
- package/browser/Options/Classes/AnimationOptions.js +4 -2
- package/browser/Options/Classes/Interactivity/Events/DivEvent.js +2 -1
- package/browser/Options/Classes/Interactivity/Events/Events.js +1 -1
- package/browser/Options/Classes/Interactivity/Interactivity.js +2 -1
- package/browser/Options/Classes/ManualParticle.js +2 -1
- package/browser/Options/Classes/Options.js +14 -12
- package/browser/Options/Classes/Particles/Collisions/Collisions.js +2 -1
- package/browser/Options/Classes/Particles/Move/Move.js +2 -1
- package/browser/Options/Classes/Particles/Move/MoveCenter.js +2 -1
- package/browser/Options/Classes/Particles/Move/OutModes.js +2 -1
- package/browser/Options/Classes/Particles/Number/ParticlesNumberLimit.js +2 -1
- package/browser/Options/Classes/Particles/Opacity/OpacityAnimation.js +2 -1
- package/browser/Options/Classes/Particles/ParticlesOptions.js +1 -1
- package/browser/Options/Classes/Particles/Size/SizeAnimation.js +2 -1
- package/browser/Options/Classes/Responsive.js +5 -4
- package/browser/Options/Classes/Theme/ThemeDefault.js +2 -1
- package/browser/Types/RangeType.js +5 -1
- package/browser/Utils/CanvasUtils.js +27 -21
- package/browser/Utils/ColorUtils.js +17 -9
- package/browser/Utils/EventDispatcher.js +1 -1
- package/browser/Utils/HslColorManager.js +11 -4
- package/browser/Utils/NumberUtils.js +11 -10
- package/browser/Utils/RgbColorManager.js +11 -4
- package/browser/Utils/Utils.js +37 -31
- package/cjs/Core/Canvas.js +34 -29
- package/cjs/Core/Container.js +60 -47
- package/cjs/Core/Engine.js +82 -97
- package/cjs/Core/Particle.js +40 -26
- package/cjs/Core/Particles.js +52 -76
- package/cjs/Core/Utils/EventListeners.js +18 -17
- package/cjs/Core/Utils/ExternalInteractorBase.js +2 -1
- package/cjs/Core/Utils/InteractionManager.js +7 -6
- package/cjs/Core/Utils/ParticlesInteractorBase.js +2 -1
- package/cjs/Core/Utils/QuadTree.js +1 -1
- package/cjs/Core/Utils/Ranges.js +5 -4
- package/cjs/Enums/AnimationStatus.js +6 -0
- package/cjs/Enums/Directions/MoveDirection.js +15 -0
- package/cjs/Enums/Directions/OutModeDirection.js +8 -0
- package/cjs/Enums/Directions/RotateDirection.js +7 -0
- package/cjs/Enums/InteractivityDetect.js +7 -0
- package/cjs/Enums/Modes/AnimationMode.js +8 -0
- package/cjs/Enums/Modes/CollisionMode.js +7 -0
- package/cjs/Enums/Modes/LimitMode.js +6 -0
- package/cjs/Enums/Modes/OutMode.js +9 -0
- package/cjs/Enums/Modes/PixelMode.js +6 -0
- package/cjs/Enums/Modes/ResponsiveMode.js +6 -0
- package/cjs/Enums/Modes/ThemeMode.js +7 -0
- package/cjs/Enums/Types/AlterType.js +6 -0
- package/cjs/Enums/Types/DestroyType.js +7 -0
- package/cjs/Enums/Types/DivType.js +6 -0
- package/cjs/Enums/Types/EasingType.js +31 -0
- package/cjs/Enums/Types/EventType.js +16 -0
- package/cjs/Enums/Types/GradientType.js +7 -0
- package/cjs/Enums/Types/InteractorType.js +6 -0
- package/cjs/Enums/Types/ParticleOutType.js +7 -0
- package/cjs/Enums/Types/StartValueType.js +7 -0
- package/cjs/Options/Classes/AnimationOptions.js +4 -2
- package/cjs/Options/Classes/Interactivity/Events/DivEvent.js +2 -1
- package/cjs/Options/Classes/Interactivity/Events/Events.js +1 -1
- package/cjs/Options/Classes/Interactivity/Interactivity.js +2 -1
- package/cjs/Options/Classes/ManualParticle.js +2 -1
- package/cjs/Options/Classes/Options.js +14 -12
- package/cjs/Options/Classes/Particles/Collisions/Collisions.js +2 -1
- package/cjs/Options/Classes/Particles/Move/Move.js +2 -1
- package/cjs/Options/Classes/Particles/Move/MoveCenter.js +2 -1
- package/cjs/Options/Classes/Particles/Move/OutModes.js +2 -1
- package/cjs/Options/Classes/Particles/Number/ParticlesNumberLimit.js +2 -1
- package/cjs/Options/Classes/Particles/Opacity/OpacityAnimation.js +2 -1
- package/cjs/Options/Classes/Particles/ParticlesOptions.js +1 -1
- package/cjs/Options/Classes/Particles/Size/SizeAnimation.js +2 -1
- package/cjs/Options/Classes/Responsive.js +5 -4
- package/cjs/Options/Classes/Theme/ThemeDefault.js +2 -1
- package/cjs/Types/RangeType.js +6 -0
- package/cjs/Utils/CanvasUtils.js +27 -21
- package/cjs/Utils/ColorUtils.js +17 -9
- package/cjs/Utils/EventDispatcher.js +1 -1
- package/cjs/Utils/HslColorManager.js +11 -4
- package/cjs/Utils/NumberUtils.js +11 -10
- package/cjs/Utils/RgbColorManager.js +11 -4
- package/cjs/Utils/Utils.js +37 -31
- package/esm/Core/Canvas.js +34 -29
- package/esm/Core/Container.js +60 -47
- package/esm/Core/Engine.js +82 -74
- package/esm/Core/Particle.js +40 -26
- package/esm/Core/Particles.js +51 -52
- package/esm/Core/Utils/EventListeners.js +18 -17
- package/esm/Core/Utils/ExternalInteractorBase.js +2 -1
- package/esm/Core/Utils/InteractionManager.js +7 -6
- package/esm/Core/Utils/ParticlesInteractorBase.js +2 -1
- package/esm/Core/Utils/QuadTree.js +1 -1
- package/esm/Core/Utils/Ranges.js +5 -4
- package/esm/Enums/AnimationStatus.js +5 -1
- package/esm/Enums/Directions/MoveDirection.js +14 -1
- package/esm/Enums/Directions/OutModeDirection.js +7 -1
- package/esm/Enums/Directions/RotateDirection.js +6 -1
- package/esm/Enums/InteractivityDetect.js +6 -1
- package/esm/Enums/Modes/AnimationMode.js +7 -1
- package/esm/Enums/Modes/CollisionMode.js +6 -1
- package/esm/Enums/Modes/LimitMode.js +5 -1
- package/esm/Enums/Modes/OutMode.js +8 -1
- package/esm/Enums/Modes/PixelMode.js +5 -1
- package/esm/Enums/Modes/ResponsiveMode.js +5 -1
- package/esm/Enums/Modes/ThemeMode.js +6 -1
- package/esm/Enums/Types/AlterType.js +5 -1
- package/esm/Enums/Types/DestroyType.js +6 -1
- package/esm/Enums/Types/DivType.js +5 -1
- package/esm/Enums/Types/EasingType.js +30 -1
- package/esm/Enums/Types/EventType.js +15 -1
- package/esm/Enums/Types/GradientType.js +6 -1
- package/esm/Enums/Types/InteractorType.js +5 -1
- package/esm/Enums/Types/ParticleOutType.js +6 -1
- package/esm/Enums/Types/StartValueType.js +6 -1
- package/esm/Options/Classes/AnimationOptions.js +4 -2
- package/esm/Options/Classes/Interactivity/Events/DivEvent.js +2 -1
- package/esm/Options/Classes/Interactivity/Events/Events.js +1 -1
- package/esm/Options/Classes/Interactivity/Interactivity.js +2 -1
- package/esm/Options/Classes/ManualParticle.js +2 -1
- package/esm/Options/Classes/Options.js +14 -12
- package/esm/Options/Classes/Particles/Collisions/Collisions.js +2 -1
- package/esm/Options/Classes/Particles/Move/Move.js +2 -1
- package/esm/Options/Classes/Particles/Move/MoveCenter.js +2 -1
- package/esm/Options/Classes/Particles/Move/OutModes.js +2 -1
- package/esm/Options/Classes/Particles/Number/ParticlesNumberLimit.js +2 -1
- package/esm/Options/Classes/Particles/Opacity/OpacityAnimation.js +2 -1
- package/esm/Options/Classes/Particles/ParticlesOptions.js +1 -1
- package/esm/Options/Classes/Particles/Size/SizeAnimation.js +2 -1
- package/esm/Options/Classes/Responsive.js +5 -4
- package/esm/Options/Classes/Theme/ThemeDefault.js +2 -1
- package/esm/Types/RangeType.js +5 -1
- package/esm/Utils/CanvasUtils.js +27 -21
- package/esm/Utils/ColorUtils.js +17 -9
- package/esm/Utils/EventDispatcher.js +1 -1
- package/esm/Utils/HslColorManager.js +11 -4
- package/esm/Utils/NumberUtils.js +11 -10
- package/esm/Utils/RgbColorManager.js +11 -4
- package/esm/Utils/Utils.js +37 -31
- package/package.json +1 -1
- package/report.html +1 -1
- package/tsparticles.engine.js +327 -225
- package/tsparticles.engine.min.js +1 -1
- package/tsparticles.engine.min.js.LICENSE.txt +1 -1
- package/types/Core/Canvas.d.ts +4 -4
- package/types/Core/Container.d.ts +4 -2
- package/types/Core/Engine.d.ts +6 -5
- package/types/Core/Interfaces/IContainerPlugin.d.ts +4 -4
- package/types/Core/Interfaces/IEffectDrawer.d.ts +3 -3
- package/types/Core/Interfaces/IExternalInteractor.d.ts +1 -1
- package/types/Core/Interfaces/IMovePathGenerator.d.ts +2 -2
- package/types/Core/Interfaces/IParticleMover.d.ts +2 -2
- package/types/Core/Interfaces/IParticleUpdater.d.ts +2 -2
- package/types/Core/Interfaces/IParticlesInteractor.d.ts +1 -1
- package/types/Core/Interfaces/IPlugin.d.ts +3 -4
- package/types/Core/Interfaces/IShapeDrawer.d.ts +5 -4
- package/types/Core/Particle.d.ts +3 -2
- package/types/Core/Particles.d.ts +7 -7
- package/types/Core/Utils/ExternalInteractorBase.d.ts +1 -1
- package/types/Core/Utils/InteractionManager.d.ts +2 -2
- package/types/Core/Utils/ParticlesInteractorBase.d.ts +1 -1
- package/types/Enums/AnimationStatus.d.ts +1 -1
- package/types/Enums/Directions/MoveDirection.d.ts +1 -1
- package/types/Enums/Directions/OutModeDirection.d.ts +1 -1
- package/types/Enums/Directions/RotateDirection.d.ts +1 -1
- package/types/Enums/InteractivityDetect.d.ts +1 -1
- package/types/Enums/Modes/AnimationMode.d.ts +1 -1
- package/types/Enums/Modes/CollisionMode.d.ts +1 -1
- package/types/Enums/Modes/LimitMode.d.ts +1 -1
- package/types/Enums/Modes/OutMode.d.ts +1 -1
- package/types/Enums/Modes/PixelMode.d.ts +1 -1
- package/types/Enums/Modes/ResponsiveMode.d.ts +1 -1
- package/types/Enums/Modes/ThemeMode.d.ts +1 -1
- package/types/Enums/Types/AlterType.d.ts +1 -1
- package/types/Enums/Types/DestroyType.d.ts +1 -1
- package/types/Enums/Types/DivType.d.ts +1 -1
- package/types/Enums/Types/EasingType.d.ts +1 -1
- package/types/Enums/Types/EventType.d.ts +1 -1
- package/types/Enums/Types/GradientType.d.ts +1 -1
- package/types/Enums/Types/InteractorType.d.ts +1 -1
- package/types/Enums/Types/ParticleOutType.d.ts +1 -1
- package/types/Enums/Types/StartValueType.d.ts +1 -1
- package/types/Options/Classes/Options.d.ts +2 -1
- package/types/Options/Classes/Responsive.d.ts +2 -2
- package/types/Options/Classes/Theme/Theme.d.ts +2 -2
- package/types/Options/Interfaces/IResponsive.d.ts +2 -3
- package/types/Options/Interfaces/Theme/ITheme.d.ts +2 -3
- package/types/Types/RangeType.d.ts +1 -1
- package/types/Utils/CanvasUtils.d.ts +6 -6
- package/umd/Core/Canvas.js +34 -29
- package/umd/Core/Container.js +61 -48
- package/umd/Core/Engine.js +83 -99
- package/umd/Core/Particle.js +41 -27
- package/umd/Core/Particles.js +53 -78
- package/umd/Core/Utils/EventListeners.js +19 -18
- package/umd/Core/Utils/ExternalInteractorBase.js +3 -2
- package/umd/Core/Utils/InteractionManager.js +8 -7
- package/umd/Core/Utils/ParticlesInteractorBase.js +3 -2
- package/umd/Core/Utils/QuadTree.js +1 -1
- package/umd/Core/Utils/Ranges.js +6 -5
- package/umd/Enums/AnimationStatus.js +6 -0
- package/umd/Enums/Directions/MoveDirection.js +15 -0
- package/umd/Enums/Directions/OutModeDirection.js +8 -0
- package/umd/Enums/Directions/RotateDirection.js +7 -0
- package/umd/Enums/InteractivityDetect.js +7 -0
- package/umd/Enums/Modes/AnimationMode.js +8 -0
- package/umd/Enums/Modes/CollisionMode.js +7 -0
- package/umd/Enums/Modes/LimitMode.js +6 -0
- package/umd/Enums/Modes/OutMode.js +9 -0
- package/umd/Enums/Modes/PixelMode.js +6 -0
- package/umd/Enums/Modes/ResponsiveMode.js +6 -0
- package/umd/Enums/Modes/ThemeMode.js +7 -0
- package/umd/Enums/Types/AlterType.js +6 -0
- package/umd/Enums/Types/DestroyType.js +7 -0
- package/umd/Enums/Types/DivType.js +6 -0
- package/umd/Enums/Types/EasingType.js +31 -0
- package/umd/Enums/Types/EventType.js +16 -0
- package/umd/Enums/Types/GradientType.js +7 -0
- package/umd/Enums/Types/InteractorType.js +6 -0
- package/umd/Enums/Types/ParticleOutType.js +7 -0
- package/umd/Enums/Types/StartValueType.js +7 -0
- package/umd/Options/Classes/AnimationOptions.js +5 -3
- package/umd/Options/Classes/Interactivity/Events/DivEvent.js +3 -2
- package/umd/Options/Classes/Interactivity/Events/Events.js +1 -1
- package/umd/Options/Classes/Interactivity/Interactivity.js +3 -2
- package/umd/Options/Classes/ManualParticle.js +3 -2
- package/umd/Options/Classes/Options.js +15 -13
- package/umd/Options/Classes/Particles/Collisions/Collisions.js +3 -2
- package/umd/Options/Classes/Particles/Move/Move.js +3 -2
- package/umd/Options/Classes/Particles/Move/MoveCenter.js +3 -2
- package/umd/Options/Classes/Particles/Move/OutModes.js +3 -2
- package/umd/Options/Classes/Particles/Number/ParticlesNumberLimit.js +3 -2
- package/umd/Options/Classes/Particles/Opacity/OpacityAnimation.js +3 -2
- package/umd/Options/Classes/Particles/ParticlesOptions.js +1 -1
- package/umd/Options/Classes/Particles/Size/SizeAnimation.js +3 -2
- package/umd/Options/Classes/Responsive.js +6 -5
- package/umd/Options/Classes/Theme/ThemeDefault.js +3 -2
- package/umd/Types/RangeType.js +6 -0
- package/umd/Utils/CanvasUtils.js +28 -22
- package/umd/Utils/ColorUtils.js +18 -10
- package/umd/Utils/EventDispatcher.js +1 -1
- package/umd/Utils/HslColorManager.js +11 -4
- package/umd/Utils/NumberUtils.js +12 -11
- package/umd/Utils/RgbColorManager.js +11 -4
- package/umd/Utils/Utils.js +38 -32
- package/373.min.js +0 -2
- package/373.min.js.LICENSE.txt +0 -1
- package/438.min.js +0 -2
- package/438.min.js.LICENSE.txt +0 -1
- package/dist_browser_Core_Container_js.js +0 -92
- package/dist_browser_Core_Particle_js.js +0 -32
package/esm/Core/Particles.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { getLogger, getPosition } from "../Utils/Utils.js";
|
|
2
|
+
import { EventType } from "../Enums/Types/EventType.js";
|
|
2
3
|
import { InteractionManager } from "./Utils/InteractionManager.js";
|
|
4
|
+
import { LimitMode } from "../Enums/Modes/LimitMode.js";
|
|
5
|
+
import { Particle } from "./Particle.js";
|
|
3
6
|
import { Point } from "./Utils/Point.js";
|
|
4
7
|
import { QuadTree } from "./Utils/QuadTree.js";
|
|
5
8
|
import { Rectangle } from "./Utils/Ranges.js";
|
|
@@ -12,11 +15,9 @@ const qTreeRectangle = (canvasSize) => {
|
|
|
12
15
|
export class Particles {
|
|
13
16
|
constructor(engine, container) {
|
|
14
17
|
this._addToPool = (...particles) => {
|
|
15
|
-
|
|
16
|
-
this._pool.push(particle);
|
|
17
|
-
}
|
|
18
|
+
this._pool.push(...particles);
|
|
18
19
|
};
|
|
19
|
-
this._applyDensity =
|
|
20
|
+
this._applyDensity = (options, manualCount, group) => {
|
|
20
21
|
const numberOptions = options.number;
|
|
21
22
|
if (!options.number.density?.enable) {
|
|
22
23
|
if (group === undefined) {
|
|
@@ -27,7 +28,7 @@ export class Particles {
|
|
|
27
28
|
}
|
|
28
29
|
return;
|
|
29
30
|
}
|
|
30
|
-
const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, minLimit = 0, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(
|
|
31
|
+
const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, minLimit = 0, 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);
|
|
31
32
|
if (group === undefined) {
|
|
32
33
|
this._limit = numberOptions.limit.value * densityFactor;
|
|
33
34
|
}
|
|
@@ -35,13 +36,13 @@ export class Particles {
|
|
|
35
36
|
this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
|
|
36
37
|
}
|
|
37
38
|
if (particlesCount < particlesNumber) {
|
|
38
|
-
|
|
39
|
+
this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
|
|
39
40
|
}
|
|
40
41
|
else if (particlesCount > particlesNumber) {
|
|
41
42
|
this.removeQuantity(particlesCount - particlesNumber, group);
|
|
42
43
|
}
|
|
43
44
|
};
|
|
44
|
-
this._initDensityFactor =
|
|
45
|
+
this._initDensityFactor = densityOptions => {
|
|
45
46
|
const container = this._container, defaultFactor = 1;
|
|
46
47
|
if (!container.canvas.element || !densityOptions.enable) {
|
|
47
48
|
return defaultFactor;
|
|
@@ -49,14 +50,13 @@ export class Particles {
|
|
|
49
50
|
const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
|
|
50
51
|
return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
|
|
51
52
|
};
|
|
52
|
-
this._pushParticle =
|
|
53
|
+
this._pushParticle = (position, overrideOptions, group, initializer) => {
|
|
53
54
|
try {
|
|
54
55
|
let particle = this._pool.pop();
|
|
55
56
|
if (!particle) {
|
|
56
|
-
const { Particle } = await import("./Particle.js");
|
|
57
57
|
particle = new Particle(this._engine, this._container);
|
|
58
58
|
}
|
|
59
|
-
|
|
59
|
+
particle.init(this._nextId, position, overrideOptions, group);
|
|
60
60
|
let canAdd = true;
|
|
61
61
|
if (initializer) {
|
|
62
62
|
canAdd = initializer(particle);
|
|
@@ -67,7 +67,7 @@ export class Particles {
|
|
|
67
67
|
this._array.push(particle);
|
|
68
68
|
this._zArray.push(particle);
|
|
69
69
|
this._nextId++;
|
|
70
|
-
this._engine.dispatchEvent(
|
|
70
|
+
this._engine.dispatchEvent(EventType.particleAdded, {
|
|
71
71
|
container: this._container,
|
|
72
72
|
data: {
|
|
73
73
|
particle,
|
|
@@ -88,7 +88,7 @@ export class Particles {
|
|
|
88
88
|
this._array.splice(index, deleteCount);
|
|
89
89
|
this._zArray.splice(zIdx, deleteCount);
|
|
90
90
|
particle.destroy(override);
|
|
91
|
-
this._engine.dispatchEvent(
|
|
91
|
+
this._engine.dispatchEvent(EventType.particleRemoved, {
|
|
92
92
|
container: this._container,
|
|
93
93
|
data: {
|
|
94
94
|
particle,
|
|
@@ -117,28 +117,29 @@ export class Particles {
|
|
|
117
117
|
get count() {
|
|
118
118
|
return this._array.length;
|
|
119
119
|
}
|
|
120
|
-
|
|
120
|
+
addManualParticles() {
|
|
121
121
|
const container = this._container, options = container.actualOptions;
|
|
122
|
-
|
|
123
|
-
await this.addParticle(particle.position ? getPosition(particle.position, container.canvas.size) : undefined, particle.options);
|
|
124
|
-
}
|
|
122
|
+
options.manualParticles.forEach(p => this.addParticle(p.position ? getPosition(p.position, container.canvas.size) : undefined, p.options));
|
|
125
123
|
}
|
|
126
|
-
|
|
127
|
-
const
|
|
124
|
+
addParticle(position, overrideOptions, group, initializer) {
|
|
125
|
+
const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
|
|
128
126
|
if (limit > minLimit) {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
if (currentCount >= limit) {
|
|
137
|
-
return;
|
|
127
|
+
switch (limitMode) {
|
|
128
|
+
case LimitMode.delete: {
|
|
129
|
+
const countOffset = 1, minCount = 0, countToRemove = currentCount + countOffset - limit;
|
|
130
|
+
if (countToRemove > minCount) {
|
|
131
|
+
this.removeQuantity(countToRemove);
|
|
132
|
+
}
|
|
133
|
+
break;
|
|
138
134
|
}
|
|
135
|
+
case LimitMode.wait:
|
|
136
|
+
if (currentCount >= limit) {
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
break;
|
|
139
140
|
}
|
|
140
141
|
}
|
|
141
|
-
return
|
|
142
|
+
return this._pushParticle(position, overrideOptions, group, initializer);
|
|
142
143
|
}
|
|
143
144
|
clear() {
|
|
144
145
|
this._array = [];
|
|
@@ -151,15 +152,15 @@ export class Particles {
|
|
|
151
152
|
this.movers = [];
|
|
152
153
|
this.updaters = [];
|
|
153
154
|
}
|
|
154
|
-
|
|
155
|
+
draw(delta) {
|
|
155
156
|
const container = this._container, canvas = container.canvas;
|
|
156
157
|
canvas.clear();
|
|
157
|
-
|
|
158
|
+
this.update(delta);
|
|
158
159
|
for (const [, plugin] of container.plugins) {
|
|
159
|
-
|
|
160
|
+
canvas.drawPlugin(plugin, delta);
|
|
160
161
|
}
|
|
161
162
|
for (const p of this._zArray) {
|
|
162
|
-
|
|
163
|
+
p.draw(delta);
|
|
163
164
|
}
|
|
164
165
|
}
|
|
165
166
|
filter(condition) {
|
|
@@ -181,24 +182,22 @@ export class Particles {
|
|
|
181
182
|
await this.initPlugins();
|
|
182
183
|
let handled = false;
|
|
183
184
|
for (const [, plugin] of container.plugins) {
|
|
184
|
-
|
|
185
|
-
handled = plugin.particlesInitialization();
|
|
186
|
-
}
|
|
185
|
+
handled = plugin.particlesInitialization?.() ?? handled;
|
|
187
186
|
if (handled) {
|
|
188
187
|
break;
|
|
189
188
|
}
|
|
190
189
|
}
|
|
191
|
-
|
|
190
|
+
this.addManualParticles();
|
|
192
191
|
if (!handled) {
|
|
193
192
|
const particlesOptions = options.particles, groups = particlesOptions.groups;
|
|
194
193
|
for (const group in groups) {
|
|
195
194
|
const groupOptions = groups[group];
|
|
196
195
|
for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
|
|
197
|
-
|
|
196
|
+
this.addParticle(undefined, groupOptions, group);
|
|
198
197
|
}
|
|
199
198
|
}
|
|
200
199
|
for (let i = this.count; i < particlesOptions.number.value; i++) {
|
|
201
|
-
|
|
200
|
+
this.addParticle();
|
|
202
201
|
}
|
|
203
202
|
}
|
|
204
203
|
}
|
|
@@ -211,18 +210,18 @@ export class Particles {
|
|
|
211
210
|
this.updaters = await this._engine.getUpdaters(container, true);
|
|
212
211
|
await this._interactionManager.init();
|
|
213
212
|
for (const [, pathGenerator] of container.pathGenerators) {
|
|
214
|
-
|
|
213
|
+
pathGenerator.init(container);
|
|
215
214
|
}
|
|
216
215
|
}
|
|
217
|
-
|
|
216
|
+
push(nb, mouse, overrideOptions, group) {
|
|
218
217
|
for (let i = 0; i < nb; i++) {
|
|
219
|
-
|
|
218
|
+
this.addParticle(mouse?.position, overrideOptions, group);
|
|
220
219
|
}
|
|
221
220
|
}
|
|
222
221
|
async redraw() {
|
|
223
222
|
this.clear();
|
|
224
223
|
await this.init();
|
|
225
|
-
|
|
224
|
+
this.draw({ value: 0, factor: 0 });
|
|
226
225
|
}
|
|
227
226
|
remove(particle, group, override) {
|
|
228
227
|
this.removeAt(this._array.indexOf(particle), undefined, group, override);
|
|
@@ -243,12 +242,12 @@ export class Particles {
|
|
|
243
242
|
const defaultIndex = 0;
|
|
244
243
|
this.removeAt(defaultIndex, quantity, group);
|
|
245
244
|
}
|
|
246
|
-
|
|
245
|
+
setDensity() {
|
|
247
246
|
const options = this._container.actualOptions, groups = options.particles.groups, manualCount = 0;
|
|
248
247
|
for (const group in groups) {
|
|
249
|
-
|
|
248
|
+
this._applyDensity(groups[group], manualCount, group);
|
|
250
249
|
}
|
|
251
|
-
|
|
250
|
+
this._applyDensity(options.particles, options.manualParticles.length);
|
|
252
251
|
}
|
|
253
252
|
setLastZIndex(zIndex) {
|
|
254
253
|
this._lastZIndex = zIndex;
|
|
@@ -257,14 +256,14 @@ export class Particles {
|
|
|
257
256
|
setResizeFactor(factor) {
|
|
258
257
|
this._resizeFactor = factor;
|
|
259
258
|
}
|
|
260
|
-
|
|
259
|
+
update(delta) {
|
|
261
260
|
const container = this._container, particlesToDelete = new Set();
|
|
262
261
|
this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
|
|
263
262
|
for (const [, pathGenerator] of container.pathGenerators) {
|
|
264
263
|
pathGenerator.update();
|
|
265
264
|
}
|
|
266
265
|
for (const [, plugin] of container.plugins) {
|
|
267
|
-
|
|
266
|
+
plugin.update?.(delta);
|
|
268
267
|
}
|
|
269
268
|
const resizeFactor = this._resizeFactor;
|
|
270
269
|
for (const particle of this._array) {
|
|
@@ -284,7 +283,7 @@ export class Particles {
|
|
|
284
283
|
}
|
|
285
284
|
for (const mover of this.movers) {
|
|
286
285
|
if (mover.isEnabled(particle)) {
|
|
287
|
-
|
|
286
|
+
mover.move(particle, delta);
|
|
288
287
|
}
|
|
289
288
|
}
|
|
290
289
|
if (particle.destroyed) {
|
|
@@ -298,7 +297,7 @@ export class Particles {
|
|
|
298
297
|
this._array = this.filter(checkDelete);
|
|
299
298
|
this._zArray = this._zArray.filter(checkDelete);
|
|
300
299
|
for (const particle of particlesToDelete) {
|
|
301
|
-
this._engine.dispatchEvent(
|
|
300
|
+
this._engine.dispatchEvent(EventType.particleRemoved, {
|
|
302
301
|
container: this._container,
|
|
303
302
|
data: {
|
|
304
303
|
particle,
|
|
@@ -307,13 +306,13 @@ export class Particles {
|
|
|
307
306
|
}
|
|
308
307
|
this._addToPool(...particlesToDelete);
|
|
309
308
|
}
|
|
310
|
-
|
|
309
|
+
this._interactionManager.externalInteract(delta);
|
|
311
310
|
for (const particle of this._array) {
|
|
312
311
|
for (const updater of this.updaters) {
|
|
313
|
-
|
|
312
|
+
updater.update(particle, delta);
|
|
314
313
|
}
|
|
315
314
|
if (!particle.destroyed && !particle.spawning) {
|
|
316
|
-
|
|
315
|
+
this._interactionManager.particlesInteract(particle, delta);
|
|
317
316
|
}
|
|
318
317
|
}
|
|
319
318
|
delete this._resizeFactor;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils.js";
|
|
2
2
|
import { millisecondsToSeconds, mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
|
|
3
|
+
import { InteractivityDetect } from "../../Enums/InteractivityDetect.js";
|
|
3
4
|
import { isBoolean } from "../../Utils/TypeUtils.js";
|
|
4
5
|
const double = 2;
|
|
5
6
|
function manageListener(element, event, handler, add, options) {
|
|
@@ -21,7 +22,7 @@ function manageListener(element, event, handler, add, options) {
|
|
|
21
22
|
export class EventListeners {
|
|
22
23
|
constructor(container) {
|
|
23
24
|
this.container = container;
|
|
24
|
-
this._doMouseTouchClick =
|
|
25
|
+
this._doMouseTouchClick = e => {
|
|
25
26
|
const container = this.container, options = container.actualOptions;
|
|
26
27
|
if (this._canPush) {
|
|
27
28
|
const mouseInteractivity = container.interactivity.mouse, mousePos = mouseInteractivity.position;
|
|
@@ -31,7 +32,7 @@ export class EventListeners {
|
|
|
31
32
|
mouseInteractivity.clickPosition = { ...mousePos };
|
|
32
33
|
mouseInteractivity.clickTime = new Date().getTime();
|
|
33
34
|
const onClick = options.interactivity.events.onClick;
|
|
34
|
-
executeOnSingleOrMultiple(onClick.mode,
|
|
35
|
+
executeOnSingleOrMultiple(onClick.mode, mode => this.container.handleClickMode(mode));
|
|
35
36
|
}
|
|
36
37
|
if (e.type === "touchend") {
|
|
37
38
|
const touchDelay = 500;
|
|
@@ -39,8 +40,8 @@ export class EventListeners {
|
|
|
39
40
|
}
|
|
40
41
|
};
|
|
41
42
|
this._handleThemeChange = (e) => {
|
|
42
|
-
const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find(
|
|
43
|
-
if (theme
|
|
43
|
+
const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find(theme => theme.name === themeName);
|
|
44
|
+
if (theme?.default.auto) {
|
|
44
45
|
void container.loadTheme(themeName);
|
|
45
46
|
}
|
|
46
47
|
};
|
|
@@ -50,7 +51,7 @@ export class EventListeners {
|
|
|
50
51
|
if (!options.pauseOnBlur) {
|
|
51
52
|
return;
|
|
52
53
|
}
|
|
53
|
-
if (document
|
|
54
|
+
if (document?.hidden) {
|
|
54
55
|
container.pageHidden = true;
|
|
55
56
|
container.pause();
|
|
56
57
|
}
|
|
@@ -102,14 +103,14 @@ export class EventListeners {
|
|
|
102
103
|
manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
|
|
103
104
|
manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
|
|
104
105
|
};
|
|
105
|
-
this._manageListeners =
|
|
106
|
+
this._manageListeners = add => {
|
|
106
107
|
const handlers = this._handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn, canvasEl = container.canvas.element;
|
|
107
108
|
let mouseLeaveTmpEvent = mouseLeaveEvent;
|
|
108
|
-
if (detectType ===
|
|
109
|
+
if (detectType === InteractivityDetect.window) {
|
|
109
110
|
container.interactivity.element = window;
|
|
110
111
|
mouseLeaveTmpEvent = mouseOutEvent;
|
|
111
112
|
}
|
|
112
|
-
else if (detectType ===
|
|
113
|
+
else if (detectType === InteractivityDetect.parent && canvasEl) {
|
|
113
114
|
container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;
|
|
114
115
|
}
|
|
115
116
|
else {
|
|
@@ -122,7 +123,7 @@ export class EventListeners {
|
|
|
122
123
|
manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
|
|
123
124
|
}
|
|
124
125
|
};
|
|
125
|
-
this._manageMediaMatch =
|
|
126
|
+
this._manageMediaMatch = add => {
|
|
126
127
|
const handlers = this._handlers, mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
|
|
127
128
|
if (!mediaMatch) {
|
|
128
129
|
return;
|
|
@@ -141,7 +142,7 @@ export class EventListeners {
|
|
|
141
142
|
mediaMatch.removeListener(handlers.oldThemeChange);
|
|
142
143
|
}
|
|
143
144
|
};
|
|
144
|
-
this._manageResize =
|
|
145
|
+
this._manageResize = add => {
|
|
145
146
|
const handlers = this._handlers, container = this.container, options = container.actualOptions;
|
|
146
147
|
if (!options.interactivity.events.resize) {
|
|
147
148
|
return;
|
|
@@ -160,7 +161,7 @@ export class EventListeners {
|
|
|
160
161
|
}
|
|
161
162
|
else if (!this._resizeObserver && add && canvasEl) {
|
|
162
163
|
this._resizeObserver = new ResizeObserver((entries) => {
|
|
163
|
-
const entry = entries.find(
|
|
164
|
+
const entry = entries.find(e => e.target === canvasEl);
|
|
164
165
|
if (!entry) {
|
|
165
166
|
return;
|
|
166
167
|
}
|
|
@@ -178,7 +179,7 @@ export class EventListeners {
|
|
|
178
179
|
mouse.clicking = true;
|
|
179
180
|
mouse.downPosition = mouse.position;
|
|
180
181
|
};
|
|
181
|
-
this._mouseTouchClick =
|
|
182
|
+
this._mouseTouchClick = e => {
|
|
182
183
|
const container = this.container, options = container.actualOptions, { mouse } = container.interactivity;
|
|
183
184
|
mouse.inside = true;
|
|
184
185
|
let handled = false;
|
|
@@ -213,7 +214,7 @@ export class EventListeners {
|
|
|
213
214
|
mouse.inside = false;
|
|
214
215
|
mouse.clicking = false;
|
|
215
216
|
};
|
|
216
|
-
this._mouseTouchMove =
|
|
217
|
+
this._mouseTouchMove = e => {
|
|
217
218
|
const container = this.container, options = container.actualOptions, interactivity = container.interactivity, canvasEl = container.canvas.element;
|
|
218
219
|
if (!interactivity?.element) {
|
|
219
220
|
return;
|
|
@@ -232,7 +233,7 @@ export class EventListeners {
|
|
|
232
233
|
};
|
|
233
234
|
}
|
|
234
235
|
}
|
|
235
|
-
else if (options.interactivity.detectsOn ===
|
|
236
|
+
else if (options.interactivity.detectsOn === InteractivityDetect.parent) {
|
|
236
237
|
const source = mouseEvent.target, target = mouseEvent.currentTarget;
|
|
237
238
|
if (source && target && canvasEl) {
|
|
238
239
|
const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
|
|
@@ -273,21 +274,21 @@ export class EventListeners {
|
|
|
273
274
|
interactivity.mouse.position = pos;
|
|
274
275
|
interactivity.status = mouseMoveEvent;
|
|
275
276
|
};
|
|
276
|
-
this._touchEnd =
|
|
277
|
+
this._touchEnd = e => {
|
|
277
278
|
const evt = e, touches = Array.from(evt.changedTouches);
|
|
278
279
|
for (const touch of touches) {
|
|
279
280
|
this._touches.delete(touch.identifier);
|
|
280
281
|
}
|
|
281
282
|
this._mouseTouchFinish();
|
|
282
283
|
};
|
|
283
|
-
this._touchEndClick =
|
|
284
|
+
this._touchEndClick = e => {
|
|
284
285
|
const evt = e, touches = Array.from(evt.changedTouches);
|
|
285
286
|
for (const touch of touches) {
|
|
286
287
|
this._touches.delete(touch.identifier);
|
|
287
288
|
}
|
|
288
289
|
this._mouseTouchClick(e);
|
|
289
290
|
};
|
|
290
|
-
this._touchStart =
|
|
291
|
+
this._touchStart = e => {
|
|
291
292
|
const evt = e, touches = Array.from(evt.changedTouches);
|
|
292
293
|
for (const touch of touches) {
|
|
293
294
|
this._touches.set(touch.identifier, performance.now());
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { InteractorType } from "../../Enums/Types/InteractorType.js";
|
|
1
2
|
export class InteractionManager {
|
|
2
3
|
constructor(engine, container) {
|
|
3
4
|
this.container = container;
|
|
@@ -6,10 +7,10 @@ export class InteractionManager {
|
|
|
6
7
|
this._externalInteractors = [];
|
|
7
8
|
this._particleInteractors = [];
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
+
externalInteract(delta) {
|
|
10
11
|
for (const interactor of this._externalInteractors) {
|
|
11
12
|
if (interactor.isEnabled()) {
|
|
12
|
-
|
|
13
|
+
interactor.interact(delta);
|
|
13
14
|
}
|
|
14
15
|
}
|
|
15
16
|
}
|
|
@@ -24,23 +25,23 @@ export class InteractionManager {
|
|
|
24
25
|
this._particleInteractors = [];
|
|
25
26
|
for (const interactor of this._interactors) {
|
|
26
27
|
switch (interactor.type) {
|
|
27
|
-
case
|
|
28
|
+
case InteractorType.external:
|
|
28
29
|
this._externalInteractors.push(interactor);
|
|
29
30
|
break;
|
|
30
|
-
case
|
|
31
|
+
case InteractorType.particles:
|
|
31
32
|
this._particleInteractors.push(interactor);
|
|
32
33
|
break;
|
|
33
34
|
}
|
|
34
35
|
interactor.init();
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
|
-
|
|
38
|
+
particlesInteract(particle, delta) {
|
|
38
39
|
for (const interactor of this._externalInteractors) {
|
|
39
40
|
interactor.clear(particle, delta);
|
|
40
41
|
}
|
|
41
42
|
for (const interactor of this._particleInteractors) {
|
|
42
43
|
if (interactor.isEnabled(particle)) {
|
|
43
|
-
|
|
44
|
+
interactor.interact(particle, delta);
|
|
44
45
|
}
|
|
45
46
|
}
|
|
46
47
|
}
|
package/esm/Core/Utils/Ranges.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { RangeType } from "../../Types/RangeType.js";
|
|
1
2
|
import { getDistance } from "../../Utils/NumberUtils.js";
|
|
2
3
|
const squareExp = 2;
|
|
3
4
|
export class BaseRange {
|
|
@@ -11,7 +12,7 @@ export class BaseRange {
|
|
|
11
12
|
}
|
|
12
13
|
export class Circle extends BaseRange {
|
|
13
14
|
constructor(x, y, radius) {
|
|
14
|
-
super(x, y,
|
|
15
|
+
super(x, y, RangeType.circle);
|
|
15
16
|
this.radius = radius;
|
|
16
17
|
}
|
|
17
18
|
contains(point) {
|
|
@@ -19,11 +20,11 @@ export class Circle extends BaseRange {
|
|
|
19
20
|
}
|
|
20
21
|
intersects(range) {
|
|
21
22
|
const pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;
|
|
22
|
-
if (range instanceof Circle || range.type ===
|
|
23
|
+
if (range instanceof Circle || range.type === RangeType.circle) {
|
|
23
24
|
const circleRange = range, rSum = r + circleRange.radius, dist = Math.sqrt(distPos.x ** squareExp + distPos.y ** squareExp);
|
|
24
25
|
return rSum > dist;
|
|
25
26
|
}
|
|
26
|
-
else if (range instanceof Rectangle || range.type ===
|
|
27
|
+
else if (range instanceof Rectangle || range.type === RangeType.rectangle) {
|
|
27
28
|
const rectRange = range, { width, height } = rectRange.size, edges = Math.pow(distPos.x - width, squareExp) + Math.pow(distPos.y - height, squareExp);
|
|
28
29
|
return (edges <= r ** squareExp ||
|
|
29
30
|
(distPos.x <= r + width && distPos.y <= r + height) ||
|
|
@@ -35,7 +36,7 @@ export class Circle extends BaseRange {
|
|
|
35
36
|
}
|
|
36
37
|
export class Rectangle extends BaseRange {
|
|
37
38
|
constructor(x, y, width, height) {
|
|
38
|
-
super(x, y,
|
|
39
|
+
super(x, y, RangeType.rectangle);
|
|
39
40
|
this.size = {
|
|
40
41
|
height: height,
|
|
41
42
|
width: width,
|
|
@@ -1 +1,14 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var MoveDirection;
|
|
2
|
+
(function (MoveDirection) {
|
|
3
|
+
MoveDirection["bottom"] = "bottom";
|
|
4
|
+
MoveDirection["bottomLeft"] = "bottom-left";
|
|
5
|
+
MoveDirection["bottomRight"] = "bottom-right";
|
|
6
|
+
MoveDirection["left"] = "left";
|
|
7
|
+
MoveDirection["none"] = "none";
|
|
8
|
+
MoveDirection["right"] = "right";
|
|
9
|
+
MoveDirection["top"] = "top";
|
|
10
|
+
MoveDirection["topLeft"] = "top-left";
|
|
11
|
+
MoveDirection["topRight"] = "top-right";
|
|
12
|
+
MoveDirection["outside"] = "outside";
|
|
13
|
+
MoveDirection["inside"] = "inside";
|
|
14
|
+
})(MoveDirection || (MoveDirection = {}));
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var OutModeDirection;
|
|
2
|
+
(function (OutModeDirection) {
|
|
3
|
+
OutModeDirection["bottom"] = "bottom";
|
|
4
|
+
OutModeDirection["left"] = "left";
|
|
5
|
+
OutModeDirection["right"] = "right";
|
|
6
|
+
OutModeDirection["top"] = "top";
|
|
7
|
+
})(OutModeDirection || (OutModeDirection = {}));
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var AnimationMode;
|
|
2
|
+
(function (AnimationMode) {
|
|
3
|
+
AnimationMode["auto"] = "auto";
|
|
4
|
+
AnimationMode["increase"] = "increase";
|
|
5
|
+
AnimationMode["decrease"] = "decrease";
|
|
6
|
+
AnimationMode["random"] = "random";
|
|
7
|
+
})(AnimationMode || (AnimationMode = {}));
|