@tsparticles/interaction-external-bounce 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/Bouncer.js +43 -44
- package/browser/index.js +2 -2
- package/cjs/Bouncer.js +49 -61
- package/cjs/index.js +2 -13
- package/esm/Bouncer.js +43 -44
- package/esm/index.js +2 -2
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.interaction.external.bounce.js +55 -56
- package/tsparticles.interaction.external.bounce.min.js +1 -1
- package/tsparticles.interaction.external.bounce.min.js.LICENSE.txt +1 -8
- package/types/Bouncer.d.ts +4 -5
- package/types/index.d.ts +1 -1
- package/umd/Bouncer.js +43 -44
- package/umd/index.js +2 -2
package/README.md
CHANGED
@@ -2,9 +2,9 @@
|
|
2
2
|
|
3
3
|
# tsParticles External Bounce Interaction
|
4
4
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/interaction-external-bounce)
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-external-bounce)
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-external-bounce) [](https://github.com/sponsors/matteobruni)
|
8
8
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) interaction plugin for bounce effect around mouse or HTML
|
10
10
|
elements.
|
@@ -27,14 +27,16 @@ loadExternalBounceInteraction;
|
|
27
27
|
Once the scripts are loaded you can set up `tsParticles` and the interaction plugin like this:
|
28
28
|
|
29
29
|
```javascript
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
}
|
30
|
+
(async () => {
|
31
|
+
await loadExternalBounceInteraction(tsParticles);
|
32
|
+
|
33
|
+
await tsParticles.load({
|
34
|
+
id: "tsparticles",
|
35
|
+
options: {
|
36
|
+
/* options */
|
37
|
+
},
|
38
|
+
});
|
39
|
+
})();
|
38
40
|
```
|
39
41
|
|
40
42
|
### ESM / CommonJS
|
@@ -42,29 +44,33 @@ tsParticles.load({
|
|
42
44
|
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
|
43
45
|
|
44
46
|
```shell
|
45
|
-
$ npm install tsparticles
|
47
|
+
$ npm install @tsparticles/interaction-external-bounce
|
46
48
|
```
|
47
49
|
|
48
50
|
or
|
49
51
|
|
50
52
|
```shell
|
51
|
-
$ yarn add tsparticles
|
53
|
+
$ yarn add @tsparticles/interaction-external-bounce
|
52
54
|
```
|
53
55
|
|
54
56
|
Then you need to import it in the app, like this:
|
55
57
|
|
56
58
|
```javascript
|
57
|
-
const { tsParticles } = require("tsparticles
|
58
|
-
const { loadExternalBounceInteraction } = require("tsparticles
|
59
|
+
const { tsParticles } = require("@tsparticles/engine");
|
60
|
+
const { loadExternalBounceInteraction } = require("@tsparticles/interaction-external-bounce");
|
59
61
|
|
60
|
-
|
62
|
+
(async () => {
|
63
|
+
await loadExternalBounceInteraction(tsParticles);
|
64
|
+
})();
|
61
65
|
```
|
62
66
|
|
63
67
|
or
|
64
68
|
|
65
69
|
```javascript
|
66
|
-
import { tsParticles } from "tsparticles
|
67
|
-
import { loadExternalBounceInteraction } from "tsparticles
|
70
|
+
import { tsParticles } from "@tsparticles/engine";
|
71
|
+
import { loadExternalBounceInteraction } from "@tsparticles/interaction-external-bounce";
|
68
72
|
|
69
|
-
|
73
|
+
(async () => {
|
74
|
+
await loadExternalBounceInteraction(tsParticles);
|
75
|
+
})();
|
70
76
|
```
|
package/browser/Bouncer.js
CHANGED
@@ -3,6 +3,45 @@ import { Bounce } from "./Options/Classes/Bounce";
|
|
3
3
|
export class Bouncer extends ExternalInteractorBase {
|
4
4
|
constructor(container) {
|
5
5
|
super(container);
|
6
|
+
this._processBounce = (position, radius, area) => {
|
7
|
+
const query = this.container.particles.quadTree.query(area, (p) => this.isEnabled(p));
|
8
|
+
for (const particle of query) {
|
9
|
+
if (area instanceof Circle) {
|
10
|
+
circleBounce(circleBounceDataFromParticle(particle), {
|
11
|
+
position,
|
12
|
+
radius,
|
13
|
+
mass: (radius ** 2 * Math.PI) / 2,
|
14
|
+
velocity: Vector.origin,
|
15
|
+
factor: Vector.origin,
|
16
|
+
});
|
17
|
+
}
|
18
|
+
else if (area instanceof Rectangle) {
|
19
|
+
rectBounce(particle, calculateBounds(position, radius));
|
20
|
+
}
|
21
|
+
}
|
22
|
+
};
|
23
|
+
this._processMouseBounce = () => {
|
24
|
+
const container = this.container, pxRatio = container.retina.pixelRatio, tolerance = 10 * pxRatio, mousePos = container.interactivity.mouse.position, radius = container.retina.bounceModeDistance;
|
25
|
+
if (!radius || radius < 0 || !mousePos) {
|
26
|
+
return;
|
27
|
+
}
|
28
|
+
this._processBounce(mousePos, radius, new Circle(mousePos.x, mousePos.y, radius + tolerance));
|
29
|
+
};
|
30
|
+
this._singleSelectorBounce = (selector, div) => {
|
31
|
+
const container = this.container, query = document.querySelectorAll(selector);
|
32
|
+
if (!query.length) {
|
33
|
+
return;
|
34
|
+
}
|
35
|
+
query.forEach((item) => {
|
36
|
+
const elem = item, pxRatio = container.retina.pixelRatio, pos = {
|
37
|
+
x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
|
38
|
+
y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
|
39
|
+
}, radius = (elem.offsetWidth / 2) * pxRatio, tolerance = 10 * pxRatio, area = div.type === "circle"
|
40
|
+
? new Circle(pos.x, pos.y, radius + tolerance)
|
41
|
+
: new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
|
42
|
+
this._processBounce(pos, radius, area);
|
43
|
+
});
|
44
|
+
};
|
6
45
|
}
|
7
46
|
clear() {
|
8
47
|
}
|
@@ -16,15 +55,14 @@ export class Bouncer extends ExternalInteractorBase {
|
|
16
55
|
async interact() {
|
17
56
|
const container = this.container, options = container.actualOptions, events = options.interactivity.events, mouseMoveStatus = container.interactivity.status === mouseMoveEvent, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;
|
18
57
|
if (mouseMoveStatus && hoverEnabled && isInArray("bounce", hoverMode)) {
|
19
|
-
this.
|
58
|
+
this._processMouseBounce();
|
20
59
|
}
|
21
60
|
else {
|
22
|
-
divModeExecute("bounce", divs, (selector, div) => this.
|
61
|
+
divModeExecute("bounce", divs, (selector, div) => this._singleSelectorBounce(selector, div));
|
23
62
|
}
|
24
63
|
}
|
25
64
|
isEnabled(particle) {
|
26
|
-
|
27
|
-
const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv;
|
65
|
+
const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, divs = events.onDiv;
|
28
66
|
return ((mouse.position && events.onHover.enable && isInArray("bounce", events.onHover.mode)) ||
|
29
67
|
isDivModeEnabled("bounce", divs));
|
30
68
|
}
|
@@ -33,48 +71,9 @@ export class Bouncer extends ExternalInteractorBase {
|
|
33
71
|
options.bounce = new Bounce();
|
34
72
|
}
|
35
73
|
for (const source of sources) {
|
36
|
-
options.bounce.load(source
|
74
|
+
options.bounce.load(source?.bounce);
|
37
75
|
}
|
38
76
|
}
|
39
77
|
reset() {
|
40
78
|
}
|
41
|
-
processBounce(position, radius, area) {
|
42
|
-
const query = this.container.particles.quadTree.query(area, (p) => this.isEnabled(p));
|
43
|
-
for (const particle of query) {
|
44
|
-
if (area instanceof Circle) {
|
45
|
-
circleBounce(circleBounceDataFromParticle(particle), {
|
46
|
-
position,
|
47
|
-
radius,
|
48
|
-
mass: (radius ** 2 * Math.PI) / 2,
|
49
|
-
velocity: Vector.origin,
|
50
|
-
factor: Vector.origin,
|
51
|
-
});
|
52
|
-
}
|
53
|
-
else if (area instanceof Rectangle) {
|
54
|
-
rectBounce(particle, calculateBounds(position, radius));
|
55
|
-
}
|
56
|
-
}
|
57
|
-
}
|
58
|
-
processMouseBounce() {
|
59
|
-
const container = this.container, pxRatio = container.retina.pixelRatio, tolerance = 10 * pxRatio, mousePos = container.interactivity.mouse.position, radius = container.retina.bounceModeDistance;
|
60
|
-
if (!radius || radius < 0 || !mousePos) {
|
61
|
-
return;
|
62
|
-
}
|
63
|
-
this.processBounce(mousePos, radius, new Circle(mousePos.x, mousePos.y, radius + tolerance));
|
64
|
-
}
|
65
|
-
singleSelectorBounce(selector, div) {
|
66
|
-
const container = this.container, query = document.querySelectorAll(selector);
|
67
|
-
if (!query.length) {
|
68
|
-
return;
|
69
|
-
}
|
70
|
-
query.forEach((item) => {
|
71
|
-
const elem = item, pxRatio = container.retina.pixelRatio, pos = {
|
72
|
-
x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
|
73
|
-
y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
|
74
|
-
}, radius = (elem.offsetWidth / 2) * pxRatio, tolerance = 10 * pxRatio, area = div.type === "circle"
|
75
|
-
? new Circle(pos.x, pos.y, radius + tolerance)
|
76
|
-
: new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
|
77
|
-
this.processBounce(pos, radius, area);
|
78
|
-
});
|
79
|
-
}
|
80
79
|
}
|
package/browser/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Bouncer } from "./Bouncer";
|
2
|
-
export async function loadExternalBounceInteraction(engine) {
|
3
|
-
await engine.addInteractor("externalBounce", (container) => new Bouncer(container));
|
2
|
+
export async function loadExternalBounceInteraction(engine, refresh = true) {
|
3
|
+
await engine.addInteractor("externalBounce", (container) => new Bouncer(container), refresh);
|
4
4
|
}
|
5
5
|
export * from "./Options/Classes/Bounce";
|
6
6
|
export * from "./Options/Interfaces/IBounce";
|
package/cjs/Bouncer.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.Bouncer = void 0;
|
13
4
|
const engine_1 = require("@tsparticles/engine");
|
@@ -15,6 +6,45 @@ const Bounce_1 = require("./Options/Classes/Bounce");
|
|
15
6
|
class Bouncer extends engine_1.ExternalInteractorBase {
|
16
7
|
constructor(container) {
|
17
8
|
super(container);
|
9
|
+
this._processBounce = (position, radius, area) => {
|
10
|
+
const query = this.container.particles.quadTree.query(area, (p) => this.isEnabled(p));
|
11
|
+
for (const particle of query) {
|
12
|
+
if (area instanceof engine_1.Circle) {
|
13
|
+
(0, engine_1.circleBounce)((0, engine_1.circleBounceDataFromParticle)(particle), {
|
14
|
+
position,
|
15
|
+
radius,
|
16
|
+
mass: (radius ** 2 * Math.PI) / 2,
|
17
|
+
velocity: engine_1.Vector.origin,
|
18
|
+
factor: engine_1.Vector.origin,
|
19
|
+
});
|
20
|
+
}
|
21
|
+
else if (area instanceof engine_1.Rectangle) {
|
22
|
+
(0, engine_1.rectBounce)(particle, (0, engine_1.calculateBounds)(position, radius));
|
23
|
+
}
|
24
|
+
}
|
25
|
+
};
|
26
|
+
this._processMouseBounce = () => {
|
27
|
+
const container = this.container, pxRatio = container.retina.pixelRatio, tolerance = 10 * pxRatio, mousePos = container.interactivity.mouse.position, radius = container.retina.bounceModeDistance;
|
28
|
+
if (!radius || radius < 0 || !mousePos) {
|
29
|
+
return;
|
30
|
+
}
|
31
|
+
this._processBounce(mousePos, radius, new engine_1.Circle(mousePos.x, mousePos.y, radius + tolerance));
|
32
|
+
};
|
33
|
+
this._singleSelectorBounce = (selector, div) => {
|
34
|
+
const container = this.container, query = document.querySelectorAll(selector);
|
35
|
+
if (!query.length) {
|
36
|
+
return;
|
37
|
+
}
|
38
|
+
query.forEach((item) => {
|
39
|
+
const elem = item, pxRatio = container.retina.pixelRatio, pos = {
|
40
|
+
x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
|
41
|
+
y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
|
42
|
+
}, radius = (elem.offsetWidth / 2) * pxRatio, tolerance = 10 * pxRatio, area = div.type === "circle"
|
43
|
+
? new engine_1.Circle(pos.x, pos.y, radius + tolerance)
|
44
|
+
: new engine_1.Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
|
45
|
+
this._processBounce(pos, radius, area);
|
46
|
+
});
|
47
|
+
};
|
18
48
|
}
|
19
49
|
clear() {
|
20
50
|
}
|
@@ -25,20 +55,17 @@ class Bouncer extends engine_1.ExternalInteractorBase {
|
|
25
55
|
}
|
26
56
|
container.retina.bounceModeDistance = bounce.distance * container.retina.pixelRatio;
|
27
57
|
}
|
28
|
-
interact() {
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
}
|
37
|
-
});
|
58
|
+
async interact() {
|
59
|
+
const container = this.container, options = container.actualOptions, events = options.interactivity.events, mouseMoveStatus = container.interactivity.status === engine_1.mouseMoveEvent, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;
|
60
|
+
if (mouseMoveStatus && hoverEnabled && (0, engine_1.isInArray)("bounce", hoverMode)) {
|
61
|
+
this._processMouseBounce();
|
62
|
+
}
|
63
|
+
else {
|
64
|
+
(0, engine_1.divModeExecute)("bounce", divs, (selector, div) => this._singleSelectorBounce(selector, div));
|
65
|
+
}
|
38
66
|
}
|
39
67
|
isEnabled(particle) {
|
40
|
-
|
41
|
-
const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv;
|
68
|
+
const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, divs = events.onDiv;
|
42
69
|
return ((mouse.position && events.onHover.enable && (0, engine_1.isInArray)("bounce", events.onHover.mode)) ||
|
43
70
|
(0, engine_1.isDivModeEnabled)("bounce", divs));
|
44
71
|
}
|
@@ -47,49 +74,10 @@ class Bouncer extends engine_1.ExternalInteractorBase {
|
|
47
74
|
options.bounce = new Bounce_1.Bounce();
|
48
75
|
}
|
49
76
|
for (const source of sources) {
|
50
|
-
options.bounce.load(source
|
77
|
+
options.bounce.load(source?.bounce);
|
51
78
|
}
|
52
79
|
}
|
53
80
|
reset() {
|
54
81
|
}
|
55
|
-
processBounce(position, radius, area) {
|
56
|
-
const query = this.container.particles.quadTree.query(area, (p) => this.isEnabled(p));
|
57
|
-
for (const particle of query) {
|
58
|
-
if (area instanceof engine_1.Circle) {
|
59
|
-
(0, engine_1.circleBounce)((0, engine_1.circleBounceDataFromParticle)(particle), {
|
60
|
-
position,
|
61
|
-
radius,
|
62
|
-
mass: (Math.pow(radius, 2) * Math.PI) / 2,
|
63
|
-
velocity: engine_1.Vector.origin,
|
64
|
-
factor: engine_1.Vector.origin,
|
65
|
-
});
|
66
|
-
}
|
67
|
-
else if (area instanceof engine_1.Rectangle) {
|
68
|
-
(0, engine_1.rectBounce)(particle, (0, engine_1.calculateBounds)(position, radius));
|
69
|
-
}
|
70
|
-
}
|
71
|
-
}
|
72
|
-
processMouseBounce() {
|
73
|
-
const container = this.container, pxRatio = container.retina.pixelRatio, tolerance = 10 * pxRatio, mousePos = container.interactivity.mouse.position, radius = container.retina.bounceModeDistance;
|
74
|
-
if (!radius || radius < 0 || !mousePos) {
|
75
|
-
return;
|
76
|
-
}
|
77
|
-
this.processBounce(mousePos, radius, new engine_1.Circle(mousePos.x, mousePos.y, radius + tolerance));
|
78
|
-
}
|
79
|
-
singleSelectorBounce(selector, div) {
|
80
|
-
const container = this.container, query = document.querySelectorAll(selector);
|
81
|
-
if (!query.length) {
|
82
|
-
return;
|
83
|
-
}
|
84
|
-
query.forEach((item) => {
|
85
|
-
const elem = item, pxRatio = container.retina.pixelRatio, pos = {
|
86
|
-
x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
|
87
|
-
y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
|
88
|
-
}, radius = (elem.offsetWidth / 2) * pxRatio, tolerance = 10 * pxRatio, area = div.type === "circle"
|
89
|
-
? new engine_1.Circle(pos.x, pos.y, radius + tolerance)
|
90
|
-
: new engine_1.Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
|
91
|
-
this.processBounce(pos, radius, area);
|
92
|
-
});
|
93
|
-
}
|
94
82
|
}
|
95
83
|
exports.Bouncer = Bouncer;
|
package/cjs/index.js
CHANGED
@@ -13,22 +13,11 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
|
|
13
13
|
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
15
15
|
};
|
16
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
17
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
18
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
19
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
20
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
21
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
22
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
23
|
-
});
|
24
|
-
};
|
25
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
26
17
|
exports.loadExternalBounceInteraction = void 0;
|
27
18
|
const Bouncer_1 = require("./Bouncer");
|
28
|
-
function loadExternalBounceInteraction(engine) {
|
29
|
-
|
30
|
-
yield engine.addInteractor("externalBounce", (container) => new Bouncer_1.Bouncer(container));
|
31
|
-
});
|
19
|
+
async function loadExternalBounceInteraction(engine, refresh = true) {
|
20
|
+
await engine.addInteractor("externalBounce", (container) => new Bouncer_1.Bouncer(container), refresh);
|
32
21
|
}
|
33
22
|
exports.loadExternalBounceInteraction = loadExternalBounceInteraction;
|
34
23
|
__exportStar(require("./Options/Classes/Bounce"), exports);
|
package/esm/Bouncer.js
CHANGED
@@ -3,6 +3,45 @@ import { Bounce } from "./Options/Classes/Bounce";
|
|
3
3
|
export class Bouncer extends ExternalInteractorBase {
|
4
4
|
constructor(container) {
|
5
5
|
super(container);
|
6
|
+
this._processBounce = (position, radius, area) => {
|
7
|
+
const query = this.container.particles.quadTree.query(area, (p) => this.isEnabled(p));
|
8
|
+
for (const particle of query) {
|
9
|
+
if (area instanceof Circle) {
|
10
|
+
circleBounce(circleBounceDataFromParticle(particle), {
|
11
|
+
position,
|
12
|
+
radius,
|
13
|
+
mass: (radius ** 2 * Math.PI) / 2,
|
14
|
+
velocity: Vector.origin,
|
15
|
+
factor: Vector.origin,
|
16
|
+
});
|
17
|
+
}
|
18
|
+
else if (area instanceof Rectangle) {
|
19
|
+
rectBounce(particle, calculateBounds(position, radius));
|
20
|
+
}
|
21
|
+
}
|
22
|
+
};
|
23
|
+
this._processMouseBounce = () => {
|
24
|
+
const container = this.container, pxRatio = container.retina.pixelRatio, tolerance = 10 * pxRatio, mousePos = container.interactivity.mouse.position, radius = container.retina.bounceModeDistance;
|
25
|
+
if (!radius || radius < 0 || !mousePos) {
|
26
|
+
return;
|
27
|
+
}
|
28
|
+
this._processBounce(mousePos, radius, new Circle(mousePos.x, mousePos.y, radius + tolerance));
|
29
|
+
};
|
30
|
+
this._singleSelectorBounce = (selector, div) => {
|
31
|
+
const container = this.container, query = document.querySelectorAll(selector);
|
32
|
+
if (!query.length) {
|
33
|
+
return;
|
34
|
+
}
|
35
|
+
query.forEach((item) => {
|
36
|
+
const elem = item, pxRatio = container.retina.pixelRatio, pos = {
|
37
|
+
x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
|
38
|
+
y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
|
39
|
+
}, radius = (elem.offsetWidth / 2) * pxRatio, tolerance = 10 * pxRatio, area = div.type === "circle"
|
40
|
+
? new Circle(pos.x, pos.y, radius + tolerance)
|
41
|
+
: new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
|
42
|
+
this._processBounce(pos, radius, area);
|
43
|
+
});
|
44
|
+
};
|
6
45
|
}
|
7
46
|
clear() {
|
8
47
|
}
|
@@ -16,15 +55,14 @@ export class Bouncer extends ExternalInteractorBase {
|
|
16
55
|
async interact() {
|
17
56
|
const container = this.container, options = container.actualOptions, events = options.interactivity.events, mouseMoveStatus = container.interactivity.status === mouseMoveEvent, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;
|
18
57
|
if (mouseMoveStatus && hoverEnabled && isInArray("bounce", hoverMode)) {
|
19
|
-
this.
|
58
|
+
this._processMouseBounce();
|
20
59
|
}
|
21
60
|
else {
|
22
|
-
divModeExecute("bounce", divs, (selector, div) => this.
|
61
|
+
divModeExecute("bounce", divs, (selector, div) => this._singleSelectorBounce(selector, div));
|
23
62
|
}
|
24
63
|
}
|
25
64
|
isEnabled(particle) {
|
26
|
-
|
27
|
-
const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : options.interactivity).events, divs = events.onDiv;
|
65
|
+
const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, divs = events.onDiv;
|
28
66
|
return ((mouse.position && events.onHover.enable && isInArray("bounce", events.onHover.mode)) ||
|
29
67
|
isDivModeEnabled("bounce", divs));
|
30
68
|
}
|
@@ -33,48 +71,9 @@ export class Bouncer extends ExternalInteractorBase {
|
|
33
71
|
options.bounce = new Bounce();
|
34
72
|
}
|
35
73
|
for (const source of sources) {
|
36
|
-
options.bounce.load(source
|
74
|
+
options.bounce.load(source?.bounce);
|
37
75
|
}
|
38
76
|
}
|
39
77
|
reset() {
|
40
78
|
}
|
41
|
-
processBounce(position, radius, area) {
|
42
|
-
const query = this.container.particles.quadTree.query(area, (p) => this.isEnabled(p));
|
43
|
-
for (const particle of query) {
|
44
|
-
if (area instanceof Circle) {
|
45
|
-
circleBounce(circleBounceDataFromParticle(particle), {
|
46
|
-
position,
|
47
|
-
radius,
|
48
|
-
mass: (radius ** 2 * Math.PI) / 2,
|
49
|
-
velocity: Vector.origin,
|
50
|
-
factor: Vector.origin,
|
51
|
-
});
|
52
|
-
}
|
53
|
-
else if (area instanceof Rectangle) {
|
54
|
-
rectBounce(particle, calculateBounds(position, radius));
|
55
|
-
}
|
56
|
-
}
|
57
|
-
}
|
58
|
-
processMouseBounce() {
|
59
|
-
const container = this.container, pxRatio = container.retina.pixelRatio, tolerance = 10 * pxRatio, mousePos = container.interactivity.mouse.position, radius = container.retina.bounceModeDistance;
|
60
|
-
if (!radius || radius < 0 || !mousePos) {
|
61
|
-
return;
|
62
|
-
}
|
63
|
-
this.processBounce(mousePos, radius, new Circle(mousePos.x, mousePos.y, radius + tolerance));
|
64
|
-
}
|
65
|
-
singleSelectorBounce(selector, div) {
|
66
|
-
const container = this.container, query = document.querySelectorAll(selector);
|
67
|
-
if (!query.length) {
|
68
|
-
return;
|
69
|
-
}
|
70
|
-
query.forEach((item) => {
|
71
|
-
const elem = item, pxRatio = container.retina.pixelRatio, pos = {
|
72
|
-
x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
|
73
|
-
y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
|
74
|
-
}, radius = (elem.offsetWidth / 2) * pxRatio, tolerance = 10 * pxRatio, area = div.type === "circle"
|
75
|
-
? new Circle(pos.x, pos.y, radius + tolerance)
|
76
|
-
: new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
|
77
|
-
this.processBounce(pos, radius, area);
|
78
|
-
});
|
79
|
-
}
|
80
79
|
}
|
package/esm/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { Bouncer } from "./Bouncer";
|
2
|
-
export async function loadExternalBounceInteraction(engine) {
|
3
|
-
await engine.addInteractor("externalBounce", (container) => new Bouncer(container));
|
2
|
+
export async function loadExternalBounceInteraction(engine, refresh = true) {
|
3
|
+
await engine.addInteractor("externalBounce", (container) => new Bouncer(container), refresh);
|
4
4
|
}
|
5
5
|
export * from "./Options/Classes/Bounce";
|
6
6
|
export * from "./Options/Interfaces/IBounce";
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@tsparticles/interaction-external-bounce",
|
3
|
-
"version": "3.0.0-
|
3
|
+
"version": "3.0.0-beta.0",
|
4
4
|
"description": "tsParticles bounce external interaction",
|
5
5
|
"homepage": "https://particles.js.org",
|
6
6
|
"repository": {
|
@@ -73,10 +73,11 @@
|
|
73
73
|
"unpkg": "tsparticles.interaction.external.bounce.min.js",
|
74
74
|
"module": "esm/index.js",
|
75
75
|
"types": "types/index.d.ts",
|
76
|
+
"sideEffects": false,
|
77
|
+
"dependencies": {
|
78
|
+
"@tsparticles/engine": "^3.0.0-beta.0"
|
79
|
+
},
|
76
80
|
"publishConfig": {
|
77
81
|
"access": "public"
|
78
|
-
},
|
79
|
-
"dependencies": {
|
80
|
-
"@tsparticles/engine": "^3.0.0-alpha.1"
|
81
82
|
}
|
82
|
-
}
|
83
|
+
}
|