@tsparticles/interaction-external-slow 3.0.0-alpha.1 → 3.0.0-beta.1
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/Slower.js +11 -11
- package/browser/index.js +5 -5
- package/browser/package.json +1 -0
- package/cjs/Slower.js +12 -23
- package/cjs/index.js +5 -16
- package/cjs/package.json +1 -0
- package/esm/Slower.js +11 -11
- package/esm/index.js +5 -5
- package/esm/package.json +1 -0
- package/package.json +19 -6
- package/report.html +4 -4
- package/tsparticles.interaction.external.slow.js +17 -14
- package/tsparticles.interaction.external.slow.min.js +1 -1
- package/tsparticles.interaction.external.slow.min.js.LICENSE.txt +1 -8
- package/types/Options/Classes/Slow.d.ts +1 -1
- package/types/Options/Classes/SlowOptions.d.ts +1 -1
- package/types/Slower.d.ts +2 -3
- package/types/Types.d.ts +3 -3
- package/types/index.d.ts +3 -3
- package/umd/Slower.js +12 -12
- package/umd/index.js +6 -6
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles External Bubble Interaction
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/interaction-external-bubble)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-external-bubble)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/interaction-external-bubble) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) interaction plugin for bubble effect around mouse or HTML
|
|
10
10
|
elements.
|
|
@@ -27,14 +27,16 @@ loadExternalBubbleInteraction;
|
|
|
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 loadExternalBubbleInteraction(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-bubble
|
|
46
48
|
```
|
|
47
49
|
|
|
48
50
|
or
|
|
49
51
|
|
|
50
52
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
53
|
+
$ yarn add @tsparticles/interaction-external-bubble
|
|
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 { loadExternalBubbleInteraction } = require("tsparticles
|
|
59
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
60
|
+
const { loadExternalBubbleInteraction } = require("@tsparticles/interaction-external-bubble");
|
|
59
61
|
|
|
60
|
-
|
|
62
|
+
(async () => {
|
|
63
|
+
await loadExternalBubbleInteraction(tsParticles);
|
|
64
|
+
})();
|
|
61
65
|
```
|
|
62
66
|
|
|
63
67
|
or
|
|
64
68
|
|
|
65
69
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadExternalBubbleInteraction } from "tsparticles
|
|
70
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
71
|
+
import { loadExternalBubbleInteraction } from "@tsparticles/interaction-external-bubble";
|
|
68
72
|
|
|
69
|
-
|
|
73
|
+
(async () => {
|
|
74
|
+
await loadExternalBubbleInteraction(tsParticles);
|
|
75
|
+
})();
|
|
70
76
|
```
|
package/browser/Slower.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ExternalInteractorBase, getDistance, isInArray } from "@tsparticles/engine";
|
|
2
|
-
import { Slow } from "./Options/Classes/Slow";
|
|
1
|
+
import { ExternalInteractorBase, getDistance, isInArray, } from "@tsparticles/engine";
|
|
2
|
+
import { Slow } from "./Options/Classes/Slow.js";
|
|
3
3
|
export class Slower extends ExternalInteractorBase {
|
|
4
4
|
constructor(container) {
|
|
5
5
|
super(container);
|
|
@@ -20,8 +20,7 @@ export class Slower extends ExternalInteractorBase {
|
|
|
20
20
|
async interact() {
|
|
21
21
|
}
|
|
22
22
|
isEnabled(particle) {
|
|
23
|
-
|
|
24
|
-
const container = this.container, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity).events;
|
|
23
|
+
const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
|
|
25
24
|
return events.onHover.enable && !!mouse.position && isInArray("slow", events.onHover.mode);
|
|
26
25
|
}
|
|
27
26
|
loadModeOptions(options, ...sources) {
|
|
@@ -29,19 +28,20 @@ export class Slower extends ExternalInteractorBase {
|
|
|
29
28
|
options.slow = new Slow();
|
|
30
29
|
}
|
|
31
30
|
for (const source of sources) {
|
|
32
|
-
options.slow.load(source
|
|
31
|
+
options.slow.load(source?.slow);
|
|
33
32
|
}
|
|
34
33
|
}
|
|
35
34
|
reset(particle) {
|
|
36
35
|
particle.slow.inRange = false;
|
|
37
|
-
const container = this.container, options = container.actualOptions, mousePos = container.interactivity.mouse.position, radius = container.retina.slowModeRadius,
|
|
38
|
-
if (!
|
|
36
|
+
const container = this.container, options = container.actualOptions, mousePos = container.interactivity.mouse.position, radius = container.retina.slowModeRadius, slowOptions = options.interactivity.modes.slow;
|
|
37
|
+
if (!slowOptions || !radius || radius < 0 || !mousePos) {
|
|
39
38
|
return;
|
|
40
39
|
}
|
|
41
|
-
const particlePos = particle.getPosition(), dist = getDistance(mousePos, particlePos), proximityFactor = dist / radius, slowFactor =
|
|
42
|
-
if (dist
|
|
43
|
-
|
|
44
|
-
particle.slow.factor = proximityFactor / slowFactor;
|
|
40
|
+
const particlePos = particle.getPosition(), dist = getDistance(mousePos, particlePos), proximityFactor = dist / radius, slowFactor = slowOptions.factor, { slow } = particle;
|
|
41
|
+
if (dist > radius) {
|
|
42
|
+
return;
|
|
45
43
|
}
|
|
44
|
+
slow.inRange = true;
|
|
45
|
+
slow.factor = proximityFactor / slowFactor;
|
|
46
46
|
}
|
|
47
47
|
}
|
package/browser/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Slower } from "./Slower";
|
|
2
|
-
export async function loadExternalSlowInteraction(engine) {
|
|
3
|
-
await engine.addInteractor("externalSlow", (container) => new Slower(container));
|
|
1
|
+
import { Slower } from "./Slower.js";
|
|
2
|
+
export async function loadExternalSlowInteraction(engine, refresh = true) {
|
|
3
|
+
await engine.addInteractor("externalSlow", (container) => new Slower(container), refresh);
|
|
4
4
|
}
|
|
5
|
-
export * from "./Options/Classes/Slow";
|
|
6
|
-
export * from "./Options/Interfaces/ISlow";
|
|
5
|
+
export * from "./Options/Classes/Slow.js";
|
|
6
|
+
export * from "./Options/Interfaces/ISlow.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
package/cjs/Slower.js
CHANGED
|
@@ -1,17 +1,8 @@
|
|
|
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.Slower = void 0;
|
|
13
4
|
const engine_1 = require("@tsparticles/engine");
|
|
14
|
-
const
|
|
5
|
+
const Slow_js_1 = require("./Options/Classes/Slow.js");
|
|
15
6
|
class Slower extends engine_1.ExternalInteractorBase {
|
|
16
7
|
constructor(container) {
|
|
17
8
|
super(container);
|
|
@@ -29,34 +20,32 @@ class Slower extends engine_1.ExternalInteractorBase {
|
|
|
29
20
|
}
|
|
30
21
|
container.retina.slowModeRadius = slow.radius * container.retina.pixelRatio;
|
|
31
22
|
}
|
|
32
|
-
interact() {
|
|
33
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
34
|
-
});
|
|
23
|
+
async interact() {
|
|
35
24
|
}
|
|
36
25
|
isEnabled(particle) {
|
|
37
|
-
|
|
38
|
-
const container = this.container, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity).events;
|
|
26
|
+
const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
|
|
39
27
|
return events.onHover.enable && !!mouse.position && (0, engine_1.isInArray)("slow", events.onHover.mode);
|
|
40
28
|
}
|
|
41
29
|
loadModeOptions(options, ...sources) {
|
|
42
30
|
if (!options.slow) {
|
|
43
|
-
options.slow = new
|
|
31
|
+
options.slow = new Slow_js_1.Slow();
|
|
44
32
|
}
|
|
45
33
|
for (const source of sources) {
|
|
46
|
-
options.slow.load(source
|
|
34
|
+
options.slow.load(source?.slow);
|
|
47
35
|
}
|
|
48
36
|
}
|
|
49
37
|
reset(particle) {
|
|
50
38
|
particle.slow.inRange = false;
|
|
51
|
-
const container = this.container, options = container.actualOptions, mousePos = container.interactivity.mouse.position, radius = container.retina.slowModeRadius,
|
|
52
|
-
if (!
|
|
39
|
+
const container = this.container, options = container.actualOptions, mousePos = container.interactivity.mouse.position, radius = container.retina.slowModeRadius, slowOptions = options.interactivity.modes.slow;
|
|
40
|
+
if (!slowOptions || !radius || radius < 0 || !mousePos) {
|
|
53
41
|
return;
|
|
54
42
|
}
|
|
55
|
-
const particlePos = particle.getPosition(), dist = (0, engine_1.getDistance)(mousePos, particlePos), proximityFactor = dist / radius, slowFactor =
|
|
56
|
-
if (dist
|
|
57
|
-
|
|
58
|
-
particle.slow.factor = proximityFactor / slowFactor;
|
|
43
|
+
const particlePos = particle.getPosition(), dist = (0, engine_1.getDistance)(mousePos, particlePos), proximityFactor = dist / radius, slowFactor = slowOptions.factor, { slow } = particle;
|
|
44
|
+
if (dist > radius) {
|
|
45
|
+
return;
|
|
59
46
|
}
|
|
47
|
+
slow.inRange = true;
|
|
48
|
+
slow.factor = proximityFactor / slowFactor;
|
|
60
49
|
}
|
|
61
50
|
}
|
|
62
51
|
exports.Slower = Slower;
|
package/cjs/index.js
CHANGED
|
@@ -13,23 +13,12 @@ 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.loadExternalSlowInteraction = void 0;
|
|
27
|
-
const
|
|
28
|
-
function loadExternalSlowInteraction(engine) {
|
|
29
|
-
|
|
30
|
-
yield engine.addInteractor("externalSlow", (container) => new Slower_1.Slower(container));
|
|
31
|
-
});
|
|
18
|
+
const Slower_js_1 = require("./Slower.js");
|
|
19
|
+
async function loadExternalSlowInteraction(engine, refresh = true) {
|
|
20
|
+
await engine.addInteractor("externalSlow", (container) => new Slower_js_1.Slower(container), refresh);
|
|
32
21
|
}
|
|
33
22
|
exports.loadExternalSlowInteraction = loadExternalSlowInteraction;
|
|
34
|
-
__exportStar(require("./Options/Classes/Slow"), exports);
|
|
35
|
-
__exportStar(require("./Options/Interfaces/ISlow"), exports);
|
|
23
|
+
__exportStar(require("./Options/Classes/Slow.js"), exports);
|
|
24
|
+
__exportStar(require("./Options/Interfaces/ISlow.js"), exports);
|
package/cjs/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "commonjs" }
|
package/esm/Slower.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ExternalInteractorBase, getDistance, isInArray } from "@tsparticles/engine";
|
|
2
|
-
import { Slow } from "./Options/Classes/Slow";
|
|
1
|
+
import { ExternalInteractorBase, getDistance, isInArray, } from "@tsparticles/engine";
|
|
2
|
+
import { Slow } from "./Options/Classes/Slow.js";
|
|
3
3
|
export class Slower extends ExternalInteractorBase {
|
|
4
4
|
constructor(container) {
|
|
5
5
|
super(container);
|
|
@@ -20,8 +20,7 @@ export class Slower extends ExternalInteractorBase {
|
|
|
20
20
|
async interact() {
|
|
21
21
|
}
|
|
22
22
|
isEnabled(particle) {
|
|
23
|
-
|
|
24
|
-
const container = this.container, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity).events;
|
|
23
|
+
const container = this.container, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity).events;
|
|
25
24
|
return events.onHover.enable && !!mouse.position && isInArray("slow", events.onHover.mode);
|
|
26
25
|
}
|
|
27
26
|
loadModeOptions(options, ...sources) {
|
|
@@ -29,19 +28,20 @@ export class Slower extends ExternalInteractorBase {
|
|
|
29
28
|
options.slow = new Slow();
|
|
30
29
|
}
|
|
31
30
|
for (const source of sources) {
|
|
32
|
-
options.slow.load(source
|
|
31
|
+
options.slow.load(source?.slow);
|
|
33
32
|
}
|
|
34
33
|
}
|
|
35
34
|
reset(particle) {
|
|
36
35
|
particle.slow.inRange = false;
|
|
37
|
-
const container = this.container, options = container.actualOptions, mousePos = container.interactivity.mouse.position, radius = container.retina.slowModeRadius,
|
|
38
|
-
if (!
|
|
36
|
+
const container = this.container, options = container.actualOptions, mousePos = container.interactivity.mouse.position, radius = container.retina.slowModeRadius, slowOptions = options.interactivity.modes.slow;
|
|
37
|
+
if (!slowOptions || !radius || radius < 0 || !mousePos) {
|
|
39
38
|
return;
|
|
40
39
|
}
|
|
41
|
-
const particlePos = particle.getPosition(), dist = getDistance(mousePos, particlePos), proximityFactor = dist / radius, slowFactor =
|
|
42
|
-
if (dist
|
|
43
|
-
|
|
44
|
-
particle.slow.factor = proximityFactor / slowFactor;
|
|
40
|
+
const particlePos = particle.getPosition(), dist = getDistance(mousePos, particlePos), proximityFactor = dist / radius, slowFactor = slowOptions.factor, { slow } = particle;
|
|
41
|
+
if (dist > radius) {
|
|
42
|
+
return;
|
|
45
43
|
}
|
|
44
|
+
slow.inRange = true;
|
|
45
|
+
slow.factor = proximityFactor / slowFactor;
|
|
46
46
|
}
|
|
47
47
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Slower } from "./Slower";
|
|
2
|
-
export async function loadExternalSlowInteraction(engine) {
|
|
3
|
-
await engine.addInteractor("externalSlow", (container) => new Slower(container));
|
|
1
|
+
import { Slower } from "./Slower.js";
|
|
2
|
+
export async function loadExternalSlowInteraction(engine, refresh = true) {
|
|
3
|
+
await engine.addInteractor("externalSlow", (container) => new Slower(container), refresh);
|
|
4
4
|
}
|
|
5
|
-
export * from "./Options/Classes/Slow";
|
|
6
|
-
export * from "./Options/Interfaces/ISlow";
|
|
5
|
+
export * from "./Options/Classes/Slow.js";
|
|
6
|
+
export * from "./Options/Interfaces/ISlow.js";
|
package/esm/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/interaction-external-slow",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.1",
|
|
4
4
|
"description": "tsParticles slow external interaction",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -68,15 +68,28 @@
|
|
|
68
68
|
"bugs": {
|
|
69
69
|
"url": "https://github.com/matteobruni/tsparticles/issues"
|
|
70
70
|
},
|
|
71
|
-
"
|
|
71
|
+
"sideEffects": false,
|
|
72
72
|
"jsdelivr": "tsparticles.interaction.external.slow.min.js",
|
|
73
73
|
"unpkg": "tsparticles.interaction.external.slow.min.js",
|
|
74
|
+
"browser": "browser/index.js",
|
|
75
|
+
"main": "cjs/index.js",
|
|
74
76
|
"module": "esm/index.js",
|
|
75
77
|
"types": "types/index.d.ts",
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
+
"exports": {
|
|
79
|
+
".": {
|
|
80
|
+
"types": "./types/index.d.ts",
|
|
81
|
+
"browser": "./browser/index.js",
|
|
82
|
+
"import": "./esm/index.js",
|
|
83
|
+
"require": "./cjs/index.js",
|
|
84
|
+
"umd": "./umd/index.js",
|
|
85
|
+
"default": "./cjs/index.js"
|
|
86
|
+
},
|
|
87
|
+
"./package.json": "./package.json"
|
|
78
88
|
},
|
|
79
89
|
"dependencies": {
|
|
80
|
-
"@tsparticles/engine": "^3.0.0-
|
|
90
|
+
"@tsparticles/engine": "^3.0.0-beta.1"
|
|
91
|
+
},
|
|
92
|
+
"publishConfig": {
|
|
93
|
+
"access": "public"
|
|
81
94
|
}
|
|
82
|
-
}
|
|
95
|
+
}
|