tsparticles 1.37.0 → 1.37.4
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/Core/Container.d.ts +1 -0
- package/Core/Container.js +2 -0
- package/Core/InteractionManager.d.ts +1 -0
- package/Core/InteractionManager.js +4 -1
- package/Core/Particles.d.ts +1 -1
- package/Core/Particles.js +3 -1
- package/Plugins/Absorbers/AbsorberInstance.d.ts +2 -1
- package/Plugins/Absorbers/AbsorberInstance.js +21 -9
- package/Plugins/Absorbers/Options/Classes/AbsorberSize.d.ts +2 -1
- package/Plugins/Absorbers/Options/Classes/AbsorberSize.js +6 -4
- package/Plugins/Absorbers/Options/Classes/AbsorberSizeLimit.d.ts +9 -0
- package/Plugins/Absorbers/Options/Classes/AbsorberSizeLimit.js +21 -0
- package/Plugins/Absorbers/Options/Interfaces/IAbsorberSize.d.ts +3 -2
- package/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.d.ts +4 -0
- package/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.js +2 -0
- package/Utils/EventListeners.d.ts +1 -0
- package/Utils/EventListeners.js +13 -2
- package/Utils/Plugins.d.ts +2 -2
- package/Utils/Plugins.js +4 -4
- package/browser/Core/Container.d.ts +1 -0
- package/browser/Core/Container.js +2 -0
- package/browser/Core/InteractionManager.d.ts +1 -0
- package/browser/Core/InteractionManager.js +4 -1
- package/browser/Core/Particles.d.ts +1 -1
- package/browser/Core/Particles.js +3 -1
- package/browser/Plugins/Absorbers/AbsorberInstance.d.ts +2 -1
- package/browser/Plugins/Absorbers/AbsorberInstance.js +21 -9
- package/browser/Plugins/Absorbers/Options/Classes/AbsorberSize.d.ts +2 -1
- package/browser/Plugins/Absorbers/Options/Classes/AbsorberSize.js +6 -4
- package/browser/Plugins/Absorbers/Options/Classes/AbsorberSizeLimit.d.ts +9 -0
- package/browser/Plugins/Absorbers/Options/Classes/AbsorberSizeLimit.js +17 -0
- package/browser/Plugins/Absorbers/Options/Interfaces/IAbsorberSize.d.ts +3 -2
- package/browser/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.d.ts +4 -0
- package/browser/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.js +1 -0
- package/browser/Plugins/PolygonMask/plugin.js +3 -1
- package/browser/Utils/EventListeners.d.ts +1 -0
- package/browser/Utils/EventListeners.js +14 -3
- package/browser/Utils/Plugins.d.ts +2 -2
- package/browser/Utils/Plugins.js +4 -4
- package/esm/Core/Container.d.ts +1 -0
- package/esm/Core/Container.js +2 -0
- package/esm/Core/InteractionManager.d.ts +1 -0
- package/esm/Core/InteractionManager.js +4 -1
- package/esm/Core/Particles.d.ts +1 -1
- package/esm/Core/Particles.js +3 -1
- package/esm/Plugins/Absorbers/AbsorberInstance.d.ts +2 -1
- package/esm/Plugins/Absorbers/AbsorberInstance.js +21 -9
- package/esm/Plugins/Absorbers/Options/Classes/AbsorberSize.d.ts +2 -1
- package/esm/Plugins/Absorbers/Options/Classes/AbsorberSize.js +6 -4
- package/esm/Plugins/Absorbers/Options/Classes/AbsorberSizeLimit.d.ts +9 -0
- package/esm/Plugins/Absorbers/Options/Classes/AbsorberSizeLimit.js +17 -0
- package/esm/Plugins/Absorbers/Options/Interfaces/IAbsorberSize.d.ts +3 -2
- package/esm/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.d.ts +4 -0
- package/esm/Plugins/Absorbers/Options/Interfaces/IAbsorberSizeLimit.js +1 -0
- package/esm/Utils/EventListeners.d.ts +1 -0
- package/esm/Utils/EventListeners.js +14 -3
- package/esm/Utils/Plugins.d.ts +2 -2
- package/esm/Utils/Plugins.js +4 -4
- package/package.json +1 -1
- package/report.html +2 -2
- package/report.slim.html +2 -2
- package/tsparticles.js +601 -240
- package/tsparticles.min.js +2 -2
- package/tsparticles.pathseg.js +2 -2
- package/tsparticles.slim.js +419 -183
- package/tsparticles.slim.min.js +2 -2
package/Core/Container.d.ts
CHANGED
package/Core/Container.js
CHANGED
|
@@ -22,6 +22,7 @@ class Container {
|
|
|
22
22
|
this.zLayers = 100;
|
|
23
23
|
this.pageHidden = false;
|
|
24
24
|
this._sourceOptions = sourceOptions;
|
|
25
|
+
this._initialSourceOptions = sourceOptions;
|
|
25
26
|
this.retina = new Retina_1.Retina(this);
|
|
26
27
|
this.canvas = new Canvas_1.Canvas(this);
|
|
27
28
|
this.particles = new Particles_1.Particles(this);
|
|
@@ -321,6 +322,7 @@ class Container {
|
|
|
321
322
|
this.drawers.set(type, drawer);
|
|
322
323
|
}
|
|
323
324
|
}
|
|
325
|
+
this._options.load(this._initialSourceOptions);
|
|
324
326
|
this._options.load(this._sourceOptions);
|
|
325
327
|
this.actualOptions = new Options_1.Options();
|
|
326
328
|
this.actualOptions.load(this._options);
|
|
@@ -6,6 +6,7 @@ export declare class InteractionManager {
|
|
|
6
6
|
private readonly externalInteractors;
|
|
7
7
|
private readonly particleInteractors;
|
|
8
8
|
constructor(container: Container);
|
|
9
|
+
init(): void;
|
|
9
10
|
externalInteract(delta: IDelta): void;
|
|
10
11
|
particlesInteract(particle: Particle, delta: IDelta): void;
|
|
11
12
|
}
|
|
@@ -6,9 +6,12 @@ const Enums_1 = require("../Enums");
|
|
|
6
6
|
class InteractionManager {
|
|
7
7
|
constructor(container) {
|
|
8
8
|
this.container = container;
|
|
9
|
-
const interactors = Utils_1.Plugins.getInteractors(container);
|
|
10
9
|
this.externalInteractors = [];
|
|
11
10
|
this.particleInteractors = [];
|
|
11
|
+
this.init();
|
|
12
|
+
}
|
|
13
|
+
init() {
|
|
14
|
+
const interactors = Utils_1.Plugins.getInteractors(this.container, true);
|
|
12
15
|
for (const interactor of interactors) {
|
|
13
16
|
switch (interactor.type) {
|
|
14
17
|
case Enums_1.InteractorType.External:
|
package/Core/Particles.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ export declare class Particles {
|
|
|
17
17
|
pushing?: boolean;
|
|
18
18
|
linksColor?: IRgb | string;
|
|
19
19
|
grabLineColor?: IRgb | string;
|
|
20
|
-
|
|
20
|
+
updaters: import("./Interfaces").IParticleUpdater[];
|
|
21
21
|
private interactionManager;
|
|
22
22
|
private nextId;
|
|
23
23
|
private readonly freqs;
|
package/Core/Particles.js
CHANGED
|
@@ -24,7 +24,7 @@ class Particles {
|
|
|
24
24
|
const canvasSize = this.container.canvas.size;
|
|
25
25
|
this.linksColors = new Map();
|
|
26
26
|
this.quadTree = new Utils_1.QuadTree(new Utils_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
|
|
27
|
-
this.updaters = Utils_1.Plugins.getUpdaters(container);
|
|
27
|
+
this.updaters = Utils_1.Plugins.getUpdaters(container, true);
|
|
28
28
|
}
|
|
29
29
|
get count() {
|
|
30
30
|
return this.array.length;
|
|
@@ -38,6 +38,8 @@ class Particles {
|
|
|
38
38
|
this.freqs.links = new Map();
|
|
39
39
|
this.freqs.triangles = new Map();
|
|
40
40
|
let handled = false;
|
|
41
|
+
this.updaters = Utils_1.Plugins.getUpdaters(container, true);
|
|
42
|
+
this.interactionManager.init();
|
|
41
43
|
for (const [, plugin] of container.plugins) {
|
|
42
44
|
if (plugin.particlesInitialization !== undefined) {
|
|
43
45
|
handled = plugin.particlesInitialization();
|
|
@@ -5,6 +5,7 @@ import type { IAbsorber } from "./Options/Interfaces/IAbsorber";
|
|
|
5
5
|
import type { Absorbers } from "./Absorbers";
|
|
6
6
|
import { Vector } from "../../Core/Particle/Vector";
|
|
7
7
|
import { RotateDirection } from "../../Enums";
|
|
8
|
+
import { IAbsorberSizeLimit } from "./Options/Interfaces/IAbsorberSizeLimit";
|
|
8
9
|
declare type OrbitingParticle = Particle & {
|
|
9
10
|
absorberOrbit?: Vector;
|
|
10
11
|
absorberOrbitDirection?: RotateDirection;
|
|
@@ -17,7 +18,7 @@ export declare class AbsorberInstance {
|
|
|
17
18
|
opacity: number;
|
|
18
19
|
size: number;
|
|
19
20
|
color: IRgb;
|
|
20
|
-
limit
|
|
21
|
+
limit: IAbsorberSizeLimit;
|
|
21
22
|
readonly name?: string;
|
|
22
23
|
position: Vector;
|
|
23
24
|
private dragging;
|
|
@@ -6,7 +6,7 @@ const Vector_1 = require("../../Core/Particle/Vector");
|
|
|
6
6
|
const Enums_1 = require("../../Enums");
|
|
7
7
|
class AbsorberInstance {
|
|
8
8
|
constructor(absorbers, container, options, position) {
|
|
9
|
-
var _a, _b, _c;
|
|
9
|
+
var _a, _b, _c, _d, _e;
|
|
10
10
|
this.absorbers = absorbers;
|
|
11
11
|
this.container = container;
|
|
12
12
|
this.initialPosition = position ? Vector_1.Vector.create(position.x, position.y) : undefined;
|
|
@@ -17,14 +17,23 @@ class AbsorberInstance {
|
|
|
17
17
|
this.size = (0, Utils_1.getRangeValue)(options.size.value) * container.retina.pixelRatio;
|
|
18
18
|
this.mass = this.size * options.size.density * container.retina.reduceFactor;
|
|
19
19
|
const limit = options.size.limit;
|
|
20
|
-
this.limit =
|
|
20
|
+
this.limit =
|
|
21
|
+
typeof limit === "number"
|
|
22
|
+
? {
|
|
23
|
+
radius: limit * container.retina.pixelRatio * container.retina.reduceFactor,
|
|
24
|
+
mass: 0,
|
|
25
|
+
}
|
|
26
|
+
: {
|
|
27
|
+
radius: ((_a = limit === null || limit === void 0 ? void 0 : limit.radius) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio * container.retina.reduceFactor,
|
|
28
|
+
mass: (_b = limit === null || limit === void 0 ? void 0 : limit.mass) !== null && _b !== void 0 ? _b : 0,
|
|
29
|
+
};
|
|
21
30
|
const color = typeof options.color === "string" ? { value: options.color } : options.color;
|
|
22
|
-
this.color = (
|
|
31
|
+
this.color = (_c = (0, Utils_1.colorToRgb)(color)) !== null && _c !== void 0 ? _c : {
|
|
23
32
|
b: 0,
|
|
24
33
|
g: 0,
|
|
25
34
|
r: 0,
|
|
26
35
|
};
|
|
27
|
-
this.position = (
|
|
36
|
+
this.position = (_e = (_d = this.initialPosition) === null || _d === void 0 ? void 0 : _d.copy()) !== null && _e !== void 0 ? _e : this.calcPosition();
|
|
28
37
|
}
|
|
29
38
|
attract(particle) {
|
|
30
39
|
const container = this.container;
|
|
@@ -67,10 +76,12 @@ class AbsorberInstance {
|
|
|
67
76
|
}
|
|
68
77
|
this.updateParticlePosition(particle, v);
|
|
69
78
|
}
|
|
70
|
-
if (this.limit
|
|
79
|
+
if (this.limit.radius <= 0 || this.size < this.limit.radius) {
|
|
71
80
|
this.size += sizeFactor;
|
|
72
81
|
}
|
|
73
|
-
this.mass
|
|
82
|
+
if (this.limit.mass <= 0 || this.mass < this.limit.mass) {
|
|
83
|
+
this.mass += sizeFactor * this.options.size.density * container.retina.reduceFactor;
|
|
84
|
+
}
|
|
74
85
|
}
|
|
75
86
|
else {
|
|
76
87
|
this.updateParticlePosition(particle, v);
|
|
@@ -105,9 +116,10 @@ class AbsorberInstance {
|
|
|
105
116
|
const container = this.container;
|
|
106
117
|
const canvasSize = container.canvas.size;
|
|
107
118
|
if (particle.needsNewPosition) {
|
|
108
|
-
|
|
109
|
-
particle.position.
|
|
110
|
-
particle.
|
|
119
|
+
particle.position.x = Math.floor(Math.random() * canvasSize.width);
|
|
120
|
+
particle.position.y = Math.floor(Math.random() * canvasSize.height);
|
|
121
|
+
particle.velocity.setTo(particle.initialVelocity);
|
|
122
|
+
particle.absorberOrbit = undefined;
|
|
111
123
|
particle.needsNewPosition = false;
|
|
112
124
|
}
|
|
113
125
|
if (this.options.orbits) {
|
|
@@ -2,9 +2,10 @@ import type { IAbsorberSize } from "../Interfaces/IAbsorberSize";
|
|
|
2
2
|
import type { RecursivePartial } from "../../../../Types";
|
|
3
3
|
import type { IOptionLoader } from "../../../../Options/Interfaces/IOptionLoader";
|
|
4
4
|
import { ValueWithRandom } from "../../../../Options/Classes/ValueWithRandom";
|
|
5
|
+
import { AbsorberSizeLimit } from "./AbsorberSizeLimit";
|
|
5
6
|
export declare class AbsorberSize extends ValueWithRandom implements IAbsorberSize, IOptionLoader<IAbsorberSize> {
|
|
6
7
|
density: number;
|
|
7
|
-
limit
|
|
8
|
+
limit: AbsorberSizeLimit;
|
|
8
9
|
constructor();
|
|
9
10
|
load(data?: RecursivePartial<IAbsorberSize>): void;
|
|
10
11
|
}
|
|
@@ -2,12 +2,14 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.AbsorberSize = void 0;
|
|
4
4
|
const ValueWithRandom_1 = require("../../../../Options/Classes/ValueWithRandom");
|
|
5
|
+
const AbsorberSizeLimit_1 = require("./AbsorberSizeLimit");
|
|
5
6
|
class AbsorberSize extends ValueWithRandom_1.ValueWithRandom {
|
|
6
7
|
constructor() {
|
|
7
8
|
super();
|
|
8
9
|
this.density = 5;
|
|
9
10
|
this.random.minimumValue = 1;
|
|
10
11
|
this.value = 50;
|
|
12
|
+
this.limit = new AbsorberSizeLimit_1.AbsorberSizeLimit();
|
|
11
13
|
}
|
|
12
14
|
load(data) {
|
|
13
15
|
if (!data) {
|
|
@@ -17,11 +19,11 @@ class AbsorberSize extends ValueWithRandom_1.ValueWithRandom {
|
|
|
17
19
|
if (data.density !== undefined) {
|
|
18
20
|
this.density = data.density;
|
|
19
21
|
}
|
|
20
|
-
if (data.limit
|
|
21
|
-
this.limit = data.limit;
|
|
22
|
+
if (typeof data.limit === "number") {
|
|
23
|
+
this.limit.radius = data.limit;
|
|
22
24
|
}
|
|
23
|
-
|
|
24
|
-
this.limit
|
|
25
|
+
else {
|
|
26
|
+
this.limit.load(data.limit);
|
|
25
27
|
}
|
|
26
28
|
}
|
|
27
29
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { RecursivePartial } from "../../../../Types";
|
|
2
|
+
import type { IOptionLoader } from "../../../../Options/Interfaces/IOptionLoader";
|
|
3
|
+
import type { IAbsorberSizeLimit } from "../Interfaces/IAbsorberSizeLimit";
|
|
4
|
+
export declare class AbsorberSizeLimit implements IAbsorberSizeLimit, IOptionLoader<IAbsorberSizeLimit> {
|
|
5
|
+
radius: number;
|
|
6
|
+
mass: number;
|
|
7
|
+
constructor();
|
|
8
|
+
load(data?: RecursivePartial<IAbsorberSizeLimit>): void;
|
|
9
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.AbsorberSizeLimit = void 0;
|
|
4
|
+
class AbsorberSizeLimit {
|
|
5
|
+
constructor() {
|
|
6
|
+
this.radius = 0;
|
|
7
|
+
this.mass = 0;
|
|
8
|
+
}
|
|
9
|
+
load(data) {
|
|
10
|
+
if (!data) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
if (data.mass !== undefined) {
|
|
14
|
+
this.mass = data.mass;
|
|
15
|
+
}
|
|
16
|
+
if (data.radius !== undefined) {
|
|
17
|
+
this.radius = data.radius;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
exports.AbsorberSizeLimit = AbsorberSizeLimit;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { IValueWithRandom } from "../../../../Options/Interfaces/IValueWithRandom";
|
|
1
|
+
import type { IValueWithRandom } from "../../../../Options/Interfaces/IValueWithRandom";
|
|
2
|
+
import type { IAbsorberSizeLimit } from "./IAbsorberSizeLimit";
|
|
2
3
|
export interface IAbsorberSize extends IValueWithRandom {
|
|
3
|
-
limit?: number;
|
|
4
|
+
limit?: number | IAbsorberSizeLimit;
|
|
4
5
|
density: number;
|
|
5
6
|
}
|
|
@@ -12,6 +12,7 @@ export declare class EventListeners {
|
|
|
12
12
|
private readonly mouseUpHandler;
|
|
13
13
|
private readonly visibilityChangeHandler;
|
|
14
14
|
private readonly themeChangeHandler;
|
|
15
|
+
private readonly oldThemeChangeHandler;
|
|
15
16
|
private readonly resizeHandler;
|
|
16
17
|
private canPush;
|
|
17
18
|
private resizeTimeout?;
|
package/Utils/EventListeners.js
CHANGED
|
@@ -35,6 +35,7 @@ class EventListeners {
|
|
|
35
35
|
this.mouseDownHandler = () => this.mouseDown();
|
|
36
36
|
this.visibilityChangeHandler = () => this.handleVisibilityChange();
|
|
37
37
|
this.themeChangeHandler = (e) => this.handleThemeChange(e);
|
|
38
|
+
this.oldThemeChangeHandler = (e) => this.handleThemeChange(e);
|
|
38
39
|
this.resizeHandler = () => this.handleWindowResize();
|
|
39
40
|
}
|
|
40
41
|
addListeners() {
|
|
@@ -60,9 +61,19 @@ class EventListeners {
|
|
|
60
61
|
else {
|
|
61
62
|
container.interactivity.element = container.canvas.element;
|
|
62
63
|
}
|
|
63
|
-
const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
|
|
64
|
+
const mediaMatch = !(0, Utils_1.isSsr)() && typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
|
|
64
65
|
if (mediaMatch) {
|
|
65
|
-
|
|
66
|
+
if (mediaMatch.addEventListener !== undefined) {
|
|
67
|
+
manageListener(mediaMatch, "change", this.themeChangeHandler, add);
|
|
68
|
+
}
|
|
69
|
+
else if (mediaMatch.addListener !== undefined) {
|
|
70
|
+
if (add) {
|
|
71
|
+
mediaMatch.addListener(this.oldThemeChangeHandler);
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
mediaMatch.removeListener(this.oldThemeChangeHandler);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
66
77
|
}
|
|
67
78
|
const interactivityEl = container.interactivity.element;
|
|
68
79
|
if (!interactivityEl) {
|
package/Utils/Plugins.d.ts
CHANGED
|
@@ -15,8 +15,8 @@ export declare class Plugins {
|
|
|
15
15
|
static getSupportedShapes(): IterableIterator<string>;
|
|
16
16
|
static getPathGenerator(type: string): IMovePathGenerator | undefined;
|
|
17
17
|
static addPathGenerator(type: string, pathGenerator: IMovePathGenerator): void;
|
|
18
|
-
static getInteractors(container: Container): IInteractor[];
|
|
18
|
+
static getInteractors(container: Container, force?: boolean): IInteractor[];
|
|
19
19
|
static addInteractor(name: string, initInteractor: (container: Container) => IInteractor): void;
|
|
20
|
-
static getUpdaters(container: Container): IParticleUpdater[];
|
|
20
|
+
static getUpdaters(container: Container, force?: boolean): IParticleUpdater[];
|
|
21
21
|
static addParticleUpdater(name: string, initUpdater: (container: Container) => IParticleUpdater): void;
|
|
22
22
|
}
|
package/Utils/Plugins.js
CHANGED
|
@@ -60,9 +60,9 @@ class Plugins {
|
|
|
60
60
|
pathGenerators.set(type, pathGenerator);
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
|
-
static getInteractors(container) {
|
|
63
|
+
static getInteractors(container, force = false) {
|
|
64
64
|
let res = interactors.get(container);
|
|
65
|
-
if (!res) {
|
|
65
|
+
if (!res || force) {
|
|
66
66
|
res = [...interactorsInitializers.values()].map((t) => t(container));
|
|
67
67
|
interactors.set(container, res);
|
|
68
68
|
}
|
|
@@ -71,9 +71,9 @@ class Plugins {
|
|
|
71
71
|
static addInteractor(name, initInteractor) {
|
|
72
72
|
interactorsInitializers.set(name, initInteractor);
|
|
73
73
|
}
|
|
74
|
-
static getUpdaters(container) {
|
|
74
|
+
static getUpdaters(container, force = false) {
|
|
75
75
|
let res = updaters.get(container);
|
|
76
|
-
if (!res) {
|
|
76
|
+
if (!res || force) {
|
|
77
77
|
res = [...updatersInitializers.values()].map((t) => t(container));
|
|
78
78
|
updaters.set(container, res);
|
|
79
79
|
}
|
|
@@ -35,6 +35,7 @@ export class Container {
|
|
|
35
35
|
this.zLayers = 100;
|
|
36
36
|
this.pageHidden = false;
|
|
37
37
|
this._sourceOptions = sourceOptions;
|
|
38
|
+
this._initialSourceOptions = sourceOptions;
|
|
38
39
|
this.retina = new Retina(this);
|
|
39
40
|
this.canvas = new Canvas(this);
|
|
40
41
|
this.particles = new Particles(this);
|
|
@@ -400,6 +401,7 @@ export class Container {
|
|
|
400
401
|
}
|
|
401
402
|
}
|
|
402
403
|
/* options settings */
|
|
404
|
+
this._options.load(this._initialSourceOptions);
|
|
403
405
|
this._options.load(this._sourceOptions);
|
|
404
406
|
this.actualOptions = new Options();
|
|
405
407
|
this.actualOptions.load(this._options);
|
|
@@ -9,6 +9,7 @@ export declare class InteractionManager {
|
|
|
9
9
|
private readonly externalInteractors;
|
|
10
10
|
private readonly particleInteractors;
|
|
11
11
|
constructor(container: Container);
|
|
12
|
+
init(): void;
|
|
12
13
|
externalInteract(delta: IDelta): void;
|
|
13
14
|
particlesInteract(particle: Particle, delta: IDelta): void;
|
|
14
15
|
}
|
|
@@ -6,9 +6,12 @@ import { InteractorType } from "../Enums";
|
|
|
6
6
|
export class InteractionManager {
|
|
7
7
|
constructor(container) {
|
|
8
8
|
this.container = container;
|
|
9
|
-
const interactors = Plugins.getInteractors(container);
|
|
10
9
|
this.externalInteractors = [];
|
|
11
10
|
this.particleInteractors = [];
|
|
11
|
+
this.init();
|
|
12
|
+
}
|
|
13
|
+
init() {
|
|
14
|
+
const interactors = Plugins.getInteractors(this.container, true);
|
|
12
15
|
for (const interactor of interactors) {
|
|
13
16
|
switch (interactor.type) {
|
|
14
17
|
case InteractorType.External:
|
|
@@ -27,7 +27,7 @@ export declare class Particles {
|
|
|
27
27
|
pushing?: boolean;
|
|
28
28
|
linksColor?: IRgb | string;
|
|
29
29
|
grabLineColor?: IRgb | string;
|
|
30
|
-
|
|
30
|
+
updaters: import("./Interfaces").IParticleUpdater[];
|
|
31
31
|
private interactionManager;
|
|
32
32
|
private nextId;
|
|
33
33
|
private readonly freqs;
|
|
@@ -25,7 +25,7 @@ export class Particles {
|
|
|
25
25
|
const canvasSize = this.container.canvas.size;
|
|
26
26
|
this.linksColors = new Map();
|
|
27
27
|
this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
|
|
28
|
-
this.updaters = Plugins.getUpdaters(container);
|
|
28
|
+
this.updaters = Plugins.getUpdaters(container, true);
|
|
29
29
|
}
|
|
30
30
|
get count() {
|
|
31
31
|
return this.array.length;
|
|
@@ -40,6 +40,8 @@ export class Particles {
|
|
|
40
40
|
this.freqs.links = new Map();
|
|
41
41
|
this.freqs.triangles = new Map();
|
|
42
42
|
let handled = false;
|
|
43
|
+
this.updaters = Plugins.getUpdaters(container, true);
|
|
44
|
+
this.interactionManager.init();
|
|
43
45
|
for (const [, plugin] of container.plugins) {
|
|
44
46
|
if (plugin.particlesInitialization !== undefined) {
|
|
45
47
|
handled = plugin.particlesInitialization();
|
|
@@ -5,6 +5,7 @@ import type { IAbsorber } from "./Options/Interfaces/IAbsorber";
|
|
|
5
5
|
import type { Absorbers } from "./Absorbers";
|
|
6
6
|
import { Vector } from "../../Core/Particle/Vector";
|
|
7
7
|
import { RotateDirection } from "../../Enums";
|
|
8
|
+
import { IAbsorberSizeLimit } from "./Options/Interfaces/IAbsorberSizeLimit";
|
|
8
9
|
declare type OrbitingParticle = Particle & {
|
|
9
10
|
absorberOrbit?: Vector;
|
|
10
11
|
absorberOrbitDirection?: RotateDirection;
|
|
@@ -20,7 +21,7 @@ export declare class AbsorberInstance {
|
|
|
20
21
|
opacity: number;
|
|
21
22
|
size: number;
|
|
22
23
|
color: IRgb;
|
|
23
|
-
limit
|
|
24
|
+
limit: IAbsorberSizeLimit;
|
|
24
25
|
readonly name?: string;
|
|
25
26
|
position: Vector;
|
|
26
27
|
private dragging;
|
|
@@ -6,7 +6,7 @@ import { RotateDirection } from "../../Enums";
|
|
|
6
6
|
*/
|
|
7
7
|
export class AbsorberInstance {
|
|
8
8
|
constructor(absorbers, container, options, position) {
|
|
9
|
-
var _a, _b, _c;
|
|
9
|
+
var _a, _b, _c, _d, _e;
|
|
10
10
|
this.absorbers = absorbers;
|
|
11
11
|
this.container = container;
|
|
12
12
|
this.initialPosition = position ? Vector.create(position.x, position.y) : undefined;
|
|
@@ -17,14 +17,23 @@ export class AbsorberInstance {
|
|
|
17
17
|
this.size = getRangeValue(options.size.value) * container.retina.pixelRatio;
|
|
18
18
|
this.mass = this.size * options.size.density * container.retina.reduceFactor;
|
|
19
19
|
const limit = options.size.limit;
|
|
20
|
-
this.limit =
|
|
20
|
+
this.limit =
|
|
21
|
+
typeof limit === "number"
|
|
22
|
+
? {
|
|
23
|
+
radius: limit * container.retina.pixelRatio * container.retina.reduceFactor,
|
|
24
|
+
mass: 0,
|
|
25
|
+
}
|
|
26
|
+
: {
|
|
27
|
+
radius: ((_a = limit === null || limit === void 0 ? void 0 : limit.radius) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio * container.retina.reduceFactor,
|
|
28
|
+
mass: (_b = limit === null || limit === void 0 ? void 0 : limit.mass) !== null && _b !== void 0 ? _b : 0,
|
|
29
|
+
};
|
|
21
30
|
const color = typeof options.color === "string" ? { value: options.color } : options.color;
|
|
22
|
-
this.color = (
|
|
31
|
+
this.color = (_c = colorToRgb(color)) !== null && _c !== void 0 ? _c : {
|
|
23
32
|
b: 0,
|
|
24
33
|
g: 0,
|
|
25
34
|
r: 0,
|
|
26
35
|
};
|
|
27
|
-
this.position = (
|
|
36
|
+
this.position = (_e = (_d = this.initialPosition) === null || _d === void 0 ? void 0 : _d.copy()) !== null && _e !== void 0 ? _e : this.calcPosition();
|
|
28
37
|
}
|
|
29
38
|
attract(particle) {
|
|
30
39
|
const container = this.container;
|
|
@@ -67,10 +76,12 @@ export class AbsorberInstance {
|
|
|
67
76
|
}
|
|
68
77
|
this.updateParticlePosition(particle, v);
|
|
69
78
|
}
|
|
70
|
-
if (this.limit
|
|
79
|
+
if (this.limit.radius <= 0 || this.size < this.limit.radius) {
|
|
71
80
|
this.size += sizeFactor;
|
|
72
81
|
}
|
|
73
|
-
this.mass
|
|
82
|
+
if (this.limit.mass <= 0 || this.mass < this.limit.mass) {
|
|
83
|
+
this.mass += sizeFactor * this.options.size.density * container.retina.reduceFactor;
|
|
84
|
+
}
|
|
74
85
|
}
|
|
75
86
|
else {
|
|
76
87
|
this.updateParticlePosition(particle, v);
|
|
@@ -105,9 +116,10 @@ export class AbsorberInstance {
|
|
|
105
116
|
const container = this.container;
|
|
106
117
|
const canvasSize = container.canvas.size;
|
|
107
118
|
if (particle.needsNewPosition) {
|
|
108
|
-
|
|
109
|
-
particle.position.
|
|
110
|
-
particle.
|
|
119
|
+
particle.position.x = Math.floor(Math.random() * canvasSize.width);
|
|
120
|
+
particle.position.y = Math.floor(Math.random() * canvasSize.height);
|
|
121
|
+
particle.velocity.setTo(particle.initialVelocity);
|
|
122
|
+
particle.absorberOrbit = undefined;
|
|
111
123
|
particle.needsNewPosition = false;
|
|
112
124
|
}
|
|
113
125
|
if (this.options.orbits) {
|
|
@@ -2,9 +2,10 @@ import type { IAbsorberSize } from "../Interfaces/IAbsorberSize";
|
|
|
2
2
|
import type { RecursivePartial } from "../../../../Types";
|
|
3
3
|
import type { IOptionLoader } from "../../../../Options/Interfaces/IOptionLoader";
|
|
4
4
|
import { ValueWithRandom } from "../../../../Options/Classes/ValueWithRandom";
|
|
5
|
+
import { AbsorberSizeLimit } from "./AbsorberSizeLimit";
|
|
5
6
|
export declare class AbsorberSize extends ValueWithRandom implements IAbsorberSize, IOptionLoader<IAbsorberSize> {
|
|
6
7
|
density: number;
|
|
7
|
-
limit
|
|
8
|
+
limit: AbsorberSizeLimit;
|
|
8
9
|
constructor();
|
|
9
10
|
load(data?: RecursivePartial<IAbsorberSize>): void;
|
|
10
11
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { ValueWithRandom } from "../../../../Options/Classes/ValueWithRandom";
|
|
2
|
+
import { AbsorberSizeLimit } from "./AbsorberSizeLimit";
|
|
2
3
|
export class AbsorberSize extends ValueWithRandom {
|
|
3
4
|
constructor() {
|
|
4
5
|
super();
|
|
5
6
|
this.density = 5;
|
|
6
7
|
this.random.minimumValue = 1;
|
|
7
8
|
this.value = 50;
|
|
9
|
+
this.limit = new AbsorberSizeLimit();
|
|
8
10
|
}
|
|
9
11
|
load(data) {
|
|
10
12
|
if (!data) {
|
|
@@ -14,11 +16,11 @@ export class AbsorberSize extends ValueWithRandom {
|
|
|
14
16
|
if (data.density !== undefined) {
|
|
15
17
|
this.density = data.density;
|
|
16
18
|
}
|
|
17
|
-
if (data.limit
|
|
18
|
-
this.limit = data.limit;
|
|
19
|
+
if (typeof data.limit === "number") {
|
|
20
|
+
this.limit.radius = data.limit;
|
|
19
21
|
}
|
|
20
|
-
|
|
21
|
-
this.limit
|
|
22
|
+
else {
|
|
23
|
+
this.limit.load(data.limit);
|
|
22
24
|
}
|
|
23
25
|
}
|
|
24
26
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { RecursivePartial } from "../../../../Types";
|
|
2
|
+
import type { IOptionLoader } from "../../../../Options/Interfaces/IOptionLoader";
|
|
3
|
+
import type { IAbsorberSizeLimit } from "../Interfaces/IAbsorberSizeLimit";
|
|
4
|
+
export declare class AbsorberSizeLimit implements IAbsorberSizeLimit, IOptionLoader<IAbsorberSizeLimit> {
|
|
5
|
+
radius: number;
|
|
6
|
+
mass: number;
|
|
7
|
+
constructor();
|
|
8
|
+
load(data?: RecursivePartial<IAbsorberSizeLimit>): void;
|
|
9
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export class AbsorberSizeLimit {
|
|
2
|
+
constructor() {
|
|
3
|
+
this.radius = 0;
|
|
4
|
+
this.mass = 0;
|
|
5
|
+
}
|
|
6
|
+
load(data) {
|
|
7
|
+
if (!data) {
|
|
8
|
+
return;
|
|
9
|
+
}
|
|
10
|
+
if (data.mass !== undefined) {
|
|
11
|
+
this.mass = data.mass;
|
|
12
|
+
}
|
|
13
|
+
if (data.radius !== undefined) {
|
|
14
|
+
this.radius = data.radius;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { IValueWithRandom } from "../../../../Options/Interfaces/IValueWithRandom";
|
|
1
|
+
import type { IValueWithRandom } from "../../../../Options/Interfaces/IValueWithRandom";
|
|
2
|
+
import type { IAbsorberSizeLimit } from "./IAbsorberSizeLimit";
|
|
2
3
|
export interface IAbsorberSize extends IValueWithRandom {
|
|
3
|
-
limit?: number;
|
|
4
|
+
limit?: number | IAbsorberSizeLimit;
|
|
4
5
|
density: number;
|
|
5
6
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -32,7 +32,9 @@ export async function loadPolygonMaskPlugin(tsParticles) {
|
|
|
32
32
|
if (!isSsr() && !window.SVGPathSeg) {
|
|
33
33
|
await import(
|
|
34
34
|
/* webpackChunkName: "tsparticles.pathseg" */
|
|
35
|
-
/* webpackMode: "lazy
|
|
35
|
+
/* webpackMode: "lazy" */
|
|
36
|
+
/* webpackPrefetch: true */
|
|
37
|
+
/* webpackPreload: true */
|
|
36
38
|
"./pathseg");
|
|
37
39
|
}
|
|
38
40
|
const plugin = new Plugin();
|
|
@@ -16,6 +16,7 @@ export declare class EventListeners {
|
|
|
16
16
|
private readonly mouseUpHandler;
|
|
17
17
|
private readonly visibilityChangeHandler;
|
|
18
18
|
private readonly themeChangeHandler;
|
|
19
|
+
private readonly oldThemeChangeHandler;
|
|
19
20
|
private readonly resizeHandler;
|
|
20
21
|
private canPush;
|
|
21
22
|
private resizeTimeout?;
|