@tsparticles/engine 3.3.0 → 3.5.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 +27 -22
- package/browser/Core/Container.js +57 -44
- package/browser/Core/Engine.js +82 -74
- package/browser/Core/Particle.js +29 -15
- package/browser/Core/Particles.js +23 -24
- package/browser/Core/Utils/EventListeners.js +18 -17
- package/browser/Core/Utils/ExternalInteractorBase.js +2 -1
- package/browser/Core/Utils/InteractionManager.js +3 -2
- 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 +13 -7
- 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 +28 -14
- package/browser/Utils/RgbColorManager.js +11 -4
- package/browser/Utils/Utils.js +37 -31
- package/cjs/Core/Canvas.js +27 -22
- package/cjs/Core/Container.js +57 -44
- package/cjs/Core/Engine.js +82 -74
- package/cjs/Core/Particle.js +29 -15
- package/cjs/Core/Particles.js +23 -24
- package/cjs/Core/Utils/EventListeners.js +18 -17
- package/cjs/Core/Utils/ExternalInteractorBase.js +2 -1
- package/cjs/Core/Utils/InteractionManager.js +3 -2
- 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 +24 -19
- package/cjs/Utils/ColorUtils.js +37 -30
- package/cjs/Utils/EventDispatcher.js +1 -1
- package/cjs/Utils/HslColorManager.js +11 -4
- package/cjs/Utils/NumberUtils.js +54 -38
- package/cjs/Utils/OptionsUtils.js +2 -3
- package/cjs/Utils/RgbColorManager.js +11 -4
- package/cjs/Utils/TypeUtils.js +6 -7
- package/cjs/Utils/Utils.js +66 -61
- package/cjs/init.js +1 -2
- package/esm/Core/Canvas.js +27 -22
- package/esm/Core/Container.js +57 -44
- package/esm/Core/Engine.js +82 -74
- package/esm/Core/Particle.js +29 -15
- package/esm/Core/Particles.js +23 -24
- package/esm/Core/Utils/EventListeners.js +18 -17
- package/esm/Core/Utils/ExternalInteractorBase.js +2 -1
- package/esm/Core/Utils/InteractionManager.js +3 -2
- 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 +13 -7
- 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 +28 -14
- 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/Container.d.ts +4 -2
- package/types/Core/Engine.d.ts +6 -5
- package/types/Core/Interfaces/IPlugin.d.ts +3 -4
- package/types/Core/Interfaces/IShapeDrawer.d.ts +1 -0
- package/types/Core/Particle.d.ts +1 -0
- 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/NumberUtils.d.ts +3 -0
- package/umd/Core/Canvas.js +27 -22
- package/umd/Core/Container.js +58 -45
- package/umd/Core/Engine.js +83 -99
- package/umd/Core/Particle.js +30 -16
- package/umd/Core/Particles.js +24 -25
- package/umd/Core/Utils/EventListeners.js +19 -18
- package/umd/Core/Utils/ExternalInteractorBase.js +3 -2
- package/umd/Core/Utils/InteractionManager.js +4 -3
- 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 +25 -20
- package/umd/Utils/ColorUtils.js +38 -31
- package/umd/Utils/EventDispatcher.js +1 -1
- package/umd/Utils/HslColorManager.js +11 -4
- package/umd/Utils/NumberUtils.js +55 -39
- package/umd/Utils/OptionsUtils.js +2 -3
- package/umd/Utils/RgbColorManager.js +11 -4
- package/umd/Utils/TypeUtils.js +6 -7
- package/umd/Utils/Utils.js +67 -62
- package/umd/init.js +1 -2
- package/174.min.js +0 -2
- package/174.min.js.LICENSE.txt +0 -1
- package/dist_browser_Core_Container_js.js +0 -102
package/esm/Core/Particles.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
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";
|
|
3
5
|
import { Particle } from "./Particle.js";
|
|
4
6
|
import { Point } from "./Utils/Point.js";
|
|
5
7
|
import { QuadTree } from "./Utils/QuadTree.js";
|
|
@@ -13,9 +15,7 @@ const qTreeRectangle = (canvasSize) => {
|
|
|
13
15
|
export class Particles {
|
|
14
16
|
constructor(engine, container) {
|
|
15
17
|
this._addToPool = (...particles) => {
|
|
16
|
-
|
|
17
|
-
this._pool.push(particle);
|
|
18
|
-
}
|
|
18
|
+
this._pool.push(...particles);
|
|
19
19
|
};
|
|
20
20
|
this._applyDensity = (options, manualCount, group) => {
|
|
21
21
|
const numberOptions = options.number;
|
|
@@ -28,7 +28,7 @@ export class Particles {
|
|
|
28
28
|
}
|
|
29
29
|
return;
|
|
30
30
|
}
|
|
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(
|
|
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);
|
|
32
32
|
if (group === undefined) {
|
|
33
33
|
this._limit = numberOptions.limit.value * densityFactor;
|
|
34
34
|
}
|
|
@@ -42,7 +42,7 @@ export class Particles {
|
|
|
42
42
|
this.removeQuantity(particlesCount - particlesNumber, group);
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
-
this._initDensityFactor =
|
|
45
|
+
this._initDensityFactor = densityOptions => {
|
|
46
46
|
const container = this._container, defaultFactor = 1;
|
|
47
47
|
if (!container.canvas.element || !densityOptions.enable) {
|
|
48
48
|
return defaultFactor;
|
|
@@ -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,
|
|
@@ -119,23 +119,24 @@ export class Particles {
|
|
|
119
119
|
}
|
|
120
120
|
addManualParticles() {
|
|
121
121
|
const container = this._container, options = container.actualOptions;
|
|
122
|
-
|
|
123
|
-
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
124
|
addParticle(position, overrideOptions, group, initializer) {
|
|
127
|
-
const
|
|
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
142
|
return this._pushParticle(position, overrideOptions, group, initializer);
|
|
@@ -181,9 +182,7 @@ 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
|
}
|
|
@@ -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,
|
|
@@ -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;
|
|
@@ -24,10 +25,10 @@ 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
|
}
|
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 = {}));
|
|
@@ -1 +1,30 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var EasingType;
|
|
2
|
+
(function (EasingType) {
|
|
3
|
+
EasingType["easeInBack"] = "ease-in-back";
|
|
4
|
+
EasingType["easeInCirc"] = "ease-in-circ";
|
|
5
|
+
EasingType["easeInCubic"] = "ease-in-cubic";
|
|
6
|
+
EasingType["easeInLinear"] = "ease-in-linear";
|
|
7
|
+
EasingType["easeInQuad"] = "ease-in-quad";
|
|
8
|
+
EasingType["easeInQuart"] = "ease-in-quart";
|
|
9
|
+
EasingType["easeInQuint"] = "ease-in-quint";
|
|
10
|
+
EasingType["easeInExpo"] = "ease-in-expo";
|
|
11
|
+
EasingType["easeInSine"] = "ease-in-sine";
|
|
12
|
+
EasingType["easeOutBack"] = "ease-out-back";
|
|
13
|
+
EasingType["easeOutCirc"] = "ease-out-circ";
|
|
14
|
+
EasingType["easeOutCubic"] = "ease-out-cubic";
|
|
15
|
+
EasingType["easeOutLinear"] = "ease-out-linear";
|
|
16
|
+
EasingType["easeOutQuad"] = "ease-out-quad";
|
|
17
|
+
EasingType["easeOutQuart"] = "ease-out-quart";
|
|
18
|
+
EasingType["easeOutQuint"] = "ease-out-quint";
|
|
19
|
+
EasingType["easeOutExpo"] = "ease-out-expo";
|
|
20
|
+
EasingType["easeOutSine"] = "ease-out-sine";
|
|
21
|
+
EasingType["easeInOutBack"] = "ease-in-out-back";
|
|
22
|
+
EasingType["easeInOutCirc"] = "ease-in-out-circ";
|
|
23
|
+
EasingType["easeInOutCubic"] = "ease-in-out-cubic";
|
|
24
|
+
EasingType["easeInOutLinear"] = "ease-in-out-linear";
|
|
25
|
+
EasingType["easeInOutQuad"] = "ease-in-out-quad";
|
|
26
|
+
EasingType["easeInOutQuart"] = "ease-in-out-quart";
|
|
27
|
+
EasingType["easeInOutQuint"] = "ease-in-out-quint";
|
|
28
|
+
EasingType["easeInOutExpo"] = "ease-in-out-expo";
|
|
29
|
+
EasingType["easeInOutSine"] = "ease-in-out-sine";
|
|
30
|
+
})(EasingType || (EasingType = {}));
|
|
@@ -1 +1,15 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var EventType;
|
|
2
|
+
(function (EventType) {
|
|
3
|
+
EventType["configAdded"] = "configAdded";
|
|
4
|
+
EventType["containerInit"] = "containerInit";
|
|
5
|
+
EventType["particlesSetup"] = "particlesSetup";
|
|
6
|
+
EventType["containerStarted"] = "containerStarted";
|
|
7
|
+
EventType["containerStopped"] = "containerStopped";
|
|
8
|
+
EventType["containerDestroyed"] = "containerDestroyed";
|
|
9
|
+
EventType["containerPaused"] = "containerPaused";
|
|
10
|
+
EventType["containerPlay"] = "containerPlay";
|
|
11
|
+
EventType["containerBuilt"] = "containerBuilt";
|
|
12
|
+
EventType["particleAdded"] = "particleAdded";
|
|
13
|
+
EventType["particleDestroyed"] = "particleDestroyed";
|
|
14
|
+
EventType["particleRemoved"] = "particleRemoved";
|
|
15
|
+
})(EventType || (EventType = {}));
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { AnimationMode } from "../../Enums/Modes/AnimationMode.js";
|
|
2
|
+
import { StartValueType } from "../../Enums/Types/StartValueType.js";
|
|
1
3
|
import { setRangeValue } from "../../Utils/NumberUtils.js";
|
|
2
4
|
export class AnimationOptions {
|
|
3
5
|
constructor() {
|
|
@@ -35,8 +37,8 @@ export class AnimationOptions {
|
|
|
35
37
|
export class RangedAnimationOptions extends AnimationOptions {
|
|
36
38
|
constructor() {
|
|
37
39
|
super();
|
|
38
|
-
this.mode =
|
|
39
|
-
this.startValue =
|
|
40
|
+
this.mode = AnimationMode.auto;
|
|
41
|
+
this.startValue = StartValueType.random;
|
|
40
42
|
}
|
|
41
43
|
load(data) {
|
|
42
44
|
super.load(data);
|
|
@@ -17,7 +17,7 @@ export class Events {
|
|
|
17
17
|
this.onClick.load(data.onClick);
|
|
18
18
|
const onDiv = data.onDiv;
|
|
19
19
|
if (onDiv !== undefined) {
|
|
20
|
-
this.onDiv = executeOnSingleOrMultiple(onDiv,
|
|
20
|
+
this.onDiv = executeOnSingleOrMultiple(onDiv, t => {
|
|
21
21
|
const tmp = new DivEvent();
|
|
22
22
|
tmp.load(t);
|
|
23
23
|
return tmp;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { Events } from "./Events/Events.js";
|
|
2
|
+
import { InteractivityDetect } from "../../../Enums/InteractivityDetect.js";
|
|
2
3
|
import { Modes } from "./Modes/Modes.js";
|
|
3
4
|
export class Interactivity {
|
|
4
5
|
constructor(engine, container) {
|
|
5
|
-
this.detectsOn =
|
|
6
|
+
this.detectsOn = InteractivityDetect.window;
|
|
6
7
|
this.events = new Events();
|
|
7
8
|
this.modes = new Modes(engine, container);
|
|
8
9
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PixelMode } from "../../Enums/Modes/PixelMode.js";
|
|
1
2
|
import { deepExtend } from "../../Utils/Utils.js";
|
|
2
3
|
const defaultPosition = 50;
|
|
3
4
|
export class ManualParticle {
|
|
@@ -9,7 +10,7 @@ export class ManualParticle {
|
|
|
9
10
|
this.position = {
|
|
10
11
|
x: data.position.x ?? defaultPosition,
|
|
11
12
|
y: data.position.y ?? defaultPosition,
|
|
12
|
-
mode: data.position.mode ??
|
|
13
|
+
mode: data.position.mode ?? PixelMode.percent,
|
|
13
14
|
};
|
|
14
15
|
}
|
|
15
16
|
if (data.options) {
|