@tsparticles/interaction-particles-repulse 3.0.0-alpha.1 → 3.0.0-beta.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 +25 -19
- package/browser/Options/Classes/ParticlesRepulse.js +1 -1
- package/browser/Repulser.js +3 -4
- package/browser/index.js +2 -2
- package/cjs/Repulser.js +31 -43
- package/cjs/index.js +2 -2
- package/esm/Options/Classes/ParticlesRepulse.js +1 -1
- package/esm/Repulser.js +3 -4
- package/esm/index.js +2 -2
- package/package.json +10 -5
- package/report.html +4 -4
- package/tsparticles.interaction.particles.repulse.js +6 -7
- package/tsparticles.interaction.particles.repulse.min.js +1 -1
- package/tsparticles.interaction.particles.repulse.min.js.LICENSE.txt +1 -8
- package/types/Options/Classes/ParticlesRepulse.d.ts +1 -2
- package/types/Repulser.d.ts +1 -2
- package/types/index.d.ts +1 -1
- package/umd/Repulser.js +2 -3
- package/umd/index.js +2 -2
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Particles Repulsion Interaction
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/interaction-particles-repulse)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-particles-repulse)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-particles-repulse) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) interaction plugin for repulse effect between particles.
|
|
10
10
|
|
|
@@ -26,14 +26,16 @@ loadParticlesRepulseInteraction
|
|
|
26
26
|
Once the scripts are loaded you can set up `tsParticles` and the interaction plugin like this:
|
|
27
27
|
|
|
28
28
|
```javascript
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
29
|
+
(async () => {
|
|
30
|
+
await loadParticlesRepulseInteraction(tsParticles);
|
|
31
|
+
|
|
32
|
+
await tsParticles.load({
|
|
33
|
+
id: "tsparticles",
|
|
34
|
+
options: {
|
|
35
|
+
/* options */
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
})();
|
|
37
39
|
```
|
|
38
40
|
|
|
39
41
|
### ESM / CommonJS
|
|
@@ -41,29 +43,33 @@ tsParticles.load({
|
|
|
41
43
|
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
|
|
42
44
|
|
|
43
45
|
```shell
|
|
44
|
-
$ npm install tsparticles
|
|
46
|
+
$ npm install @tsparticles/interaction-particles-repulse
|
|
45
47
|
```
|
|
46
48
|
|
|
47
49
|
or
|
|
48
50
|
|
|
49
51
|
```shell
|
|
50
|
-
$ yarn add tsparticles
|
|
52
|
+
$ yarn add @tsparticles/interaction-particles-repulse
|
|
51
53
|
```
|
|
52
54
|
|
|
53
55
|
Then you need to import it in the app, like this:
|
|
54
56
|
|
|
55
57
|
```javascript
|
|
56
|
-
const { tsParticles } = require("tsparticles
|
|
57
|
-
const { loadParticlesRepulseInteraction } = require("tsparticles
|
|
58
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
59
|
+
const { loadParticlesRepulseInteraction } = require("@tsparticles/interaction-particles-repulse");
|
|
58
60
|
|
|
59
|
-
|
|
61
|
+
(async () => {
|
|
62
|
+
await loadParticlesRepulseInteraction(tsParticles);
|
|
63
|
+
})();
|
|
60
64
|
```
|
|
61
65
|
|
|
62
66
|
or
|
|
63
67
|
|
|
64
68
|
```javascript
|
|
65
|
-
import { tsParticles } from "tsparticles
|
|
66
|
-
import { loadParticlesRepulseInteraction } from "tsparticles
|
|
69
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
70
|
+
import { loadParticlesRepulseInteraction } from "@tsparticles/interaction-particles-repulse";
|
|
67
71
|
|
|
68
|
-
|
|
72
|
+
(async () => {
|
|
73
|
+
await loadParticlesRepulseInteraction(tsParticles);
|
|
74
|
+
})();
|
|
69
75
|
```
|
package/browser/Repulser.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ParticlesInteractorBase, Vector, clamp, getDistances, getRangeValue } from "@tsparticles/engine";
|
|
1
|
+
import { ParticlesInteractorBase, Vector, clamp, getDistances, getRangeValue, } from "@tsparticles/engine";
|
|
2
2
|
import { ParticlesRepulse } from "./Options/Classes/ParticlesRepulse";
|
|
3
3
|
export class Repulser extends ParticlesInteractorBase {
|
|
4
4
|
constructor(container) {
|
|
@@ -41,15 +41,14 @@ export class Repulser extends ParticlesInteractorBase {
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
isEnabled(particle) {
|
|
44
|
-
|
|
45
|
-
return (_b = (_a = particle.options.repulse) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : false;
|
|
44
|
+
return particle.options.repulse?.enabled ?? false;
|
|
46
45
|
}
|
|
47
46
|
loadParticlesOptions(options, ...sources) {
|
|
48
47
|
if (!options.repulse) {
|
|
49
48
|
options.repulse = new ParticlesRepulse();
|
|
50
49
|
}
|
|
51
50
|
for (const source of sources) {
|
|
52
|
-
options.repulse.load(source
|
|
51
|
+
options.repulse.load(source?.repulse);
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
54
|
reset() {
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { Repulser } from "./Repulser";
|
|
2
|
-
export function loadParticlesRepulseInteraction(engine) {
|
|
3
|
-
engine.addInteractor("particlesRepulse", (container) => new Repulser(container));
|
|
2
|
+
export async function loadParticlesRepulseInteraction(engine, refresh = true) {
|
|
3
|
+
await engine.addInteractor("particlesRepulse", (container) => new Repulser(container), refresh);
|
|
4
4
|
}
|
package/cjs/Repulser.js
CHANGED
|
@@ -1,13 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
3
|
exports.Repulser = void 0;
|
|
13
4
|
const engine_1 = require("@tsparticles/engine");
|
|
@@ -20,50 +11,47 @@ class Repulser extends engine_1.ParticlesInteractorBase {
|
|
|
20
11
|
}
|
|
21
12
|
init() {
|
|
22
13
|
}
|
|
23
|
-
interact(p1) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
p1.repulse = {
|
|
32
|
-
distance: (0, engine_1.getRangeValue)(repulseOpt1.distance) * container.retina.pixelRatio,
|
|
33
|
-
speed: (0, engine_1.getRangeValue)(repulseOpt1.speed),
|
|
34
|
-
factor: (0, engine_1.getRangeValue)(repulseOpt1.factor),
|
|
35
|
-
};
|
|
14
|
+
async interact(p1) {
|
|
15
|
+
const container = this.container;
|
|
16
|
+
if (!p1.repulse) {
|
|
17
|
+
const repulseOpt1 = p1.options.repulse;
|
|
18
|
+
if (!repulseOpt1) {
|
|
19
|
+
return;
|
|
36
20
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
21
|
+
p1.repulse = {
|
|
22
|
+
distance: (0, engine_1.getRangeValue)(repulseOpt1.distance) * container.retina.pixelRatio,
|
|
23
|
+
speed: (0, engine_1.getRangeValue)(repulseOpt1.speed),
|
|
24
|
+
factor: (0, engine_1.getRangeValue)(repulseOpt1.factor),
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
const pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, p1.repulse.distance);
|
|
28
|
+
for (const p2 of query) {
|
|
29
|
+
if (p1 === p2 || p2.destroyed) {
|
|
30
|
+
continue;
|
|
31
|
+
}
|
|
32
|
+
const pos2 = p2.getPosition();
|
|
33
|
+
const { dx, dy, distance } = (0, engine_1.getDistances)(pos2, pos1);
|
|
34
|
+
const velocity = p1.repulse.speed * p1.repulse.factor;
|
|
35
|
+
if (distance > 0) {
|
|
36
|
+
const repulseFactor = (0, engine_1.clamp)((1 - Math.pow(distance / p1.repulse.distance, 2)) * velocity, 0, velocity);
|
|
37
|
+
const normVec = engine_1.Vector.create((dx / distance) * repulseFactor, (dy / distance) * repulseFactor);
|
|
38
|
+
p2.position.addTo(normVec);
|
|
54
39
|
}
|
|
55
|
-
|
|
40
|
+
else {
|
|
41
|
+
const velocityVec = engine_1.Vector.create(velocity, velocity);
|
|
42
|
+
p2.position.addTo(velocityVec);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
56
45
|
}
|
|
57
46
|
isEnabled(particle) {
|
|
58
|
-
|
|
59
|
-
return (_b = (_a = particle.options.repulse) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : false;
|
|
47
|
+
return particle.options.repulse?.enabled ?? false;
|
|
60
48
|
}
|
|
61
49
|
loadParticlesOptions(options, ...sources) {
|
|
62
50
|
if (!options.repulse) {
|
|
63
51
|
options.repulse = new ParticlesRepulse_1.ParticlesRepulse();
|
|
64
52
|
}
|
|
65
53
|
for (const source of sources) {
|
|
66
|
-
options.repulse.load(source
|
|
54
|
+
options.repulse.load(source?.repulse);
|
|
67
55
|
}
|
|
68
56
|
}
|
|
69
57
|
reset() {
|
package/cjs/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.loadParticlesRepulseInteraction = void 0;
|
|
4
4
|
const Repulser_1 = require("./Repulser");
|
|
5
|
-
function loadParticlesRepulseInteraction(engine) {
|
|
6
|
-
engine.addInteractor("particlesRepulse", (container) => new Repulser_1.Repulser(container));
|
|
5
|
+
async function loadParticlesRepulseInteraction(engine, refresh = true) {
|
|
6
|
+
await engine.addInteractor("particlesRepulse", (container) => new Repulser_1.Repulser(container), refresh);
|
|
7
7
|
}
|
|
8
8
|
exports.loadParticlesRepulseInteraction = loadParticlesRepulseInteraction;
|
package/esm/Repulser.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ParticlesInteractorBase, Vector, clamp, getDistances, getRangeValue } from "@tsparticles/engine";
|
|
1
|
+
import { ParticlesInteractorBase, Vector, clamp, getDistances, getRangeValue, } from "@tsparticles/engine";
|
|
2
2
|
import { ParticlesRepulse } from "./Options/Classes/ParticlesRepulse";
|
|
3
3
|
export class Repulser extends ParticlesInteractorBase {
|
|
4
4
|
constructor(container) {
|
|
@@ -41,15 +41,14 @@ export class Repulser extends ParticlesInteractorBase {
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
isEnabled(particle) {
|
|
44
|
-
|
|
45
|
-
return (_b = (_a = particle.options.repulse) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : false;
|
|
44
|
+
return particle.options.repulse?.enabled ?? false;
|
|
46
45
|
}
|
|
47
46
|
loadParticlesOptions(options, ...sources) {
|
|
48
47
|
if (!options.repulse) {
|
|
49
48
|
options.repulse = new ParticlesRepulse();
|
|
50
49
|
}
|
|
51
50
|
for (const source of sources) {
|
|
52
|
-
options.repulse.load(source
|
|
51
|
+
options.repulse.load(source?.repulse);
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
54
|
reset() {
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { Repulser } from "./Repulser";
|
|
2
|
-
export function loadParticlesRepulseInteraction(engine) {
|
|
3
|
-
engine.addInteractor("particlesRepulse", (container) => new Repulser(container));
|
|
2
|
+
export async function loadParticlesRepulseInteraction(engine, refresh = true) {
|
|
3
|
+
await engine.addInteractor("particlesRepulse", (container) => new Repulser(container), refresh);
|
|
4
4
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/interaction-particles-repulse",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.0",
|
|
4
4
|
"description": "tsParticles repulse particles interaction",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -73,6 +73,10 @@
|
|
|
73
73
|
"type": "github",
|
|
74
74
|
"url": "https://github.com/sponsors/matteobruni"
|
|
75
75
|
},
|
|
76
|
+
{
|
|
77
|
+
"type": "github",
|
|
78
|
+
"url": "https://github.com/sponsors/tsparticles"
|
|
79
|
+
},
|
|
76
80
|
{
|
|
77
81
|
"type": "buymeacoffee",
|
|
78
82
|
"url": "https://www.buymeacoffee.com/matteobruni"
|
|
@@ -83,10 +87,11 @@
|
|
|
83
87
|
"unpkg": "tsparticles.interaction.particles.repulse.min.js",
|
|
84
88
|
"module": "esm/index.js",
|
|
85
89
|
"types": "types/index.d.ts",
|
|
90
|
+
"sideEffects": false,
|
|
91
|
+
"dependencies": {
|
|
92
|
+
"@tsparticles/engine": "^3.0.0-beta.0"
|
|
93
|
+
},
|
|
86
94
|
"publishConfig": {
|
|
87
95
|
"access": "public"
|
|
88
|
-
},
|
|
89
|
-
"dependencies": {
|
|
90
|
-
"@tsparticles/engine": "^3.0.0-alpha.1"
|
|
91
96
|
}
|
|
92
|
-
}
|
|
97
|
+
}
|