@tsparticles/interaction-external-particle 4.0.0-beta.0 → 4.0.0-beta.10
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/{828.min.js → 711.min.js} +1 -1
- package/README.md +38 -0
- package/browser/InteractivityParticleMaker.js +3 -3
- package/browser/index.js +3 -3
- package/cjs/InteractivityParticleMaker.js +3 -3
- package/cjs/index.js +3 -3
- package/dist_browser_InteractivityParticleMaker_js.js +2 -2
- package/esm/InteractivityParticleMaker.js +3 -3
- package/esm/index.js +3 -3
- package/package.json +10 -7
- package/report.html +84 -29
- package/tsparticles.interaction.external.particle.js +2 -2
- package/tsparticles.interaction.external.particle.min.js +2 -2
- package/umd/InteractivityParticleMaker.js +0 -120
- package/umd/Options/Classes/InteractivityParticleOptions.js +0 -43
- package/umd/Options/Classes/InteractivityParticleOptionsData.js +0 -12
- package/umd/Options/Interfaces/IInteractivityParticleOptions.js +0 -12
- package/umd/Types.js +0 -12
- package/umd/index.js +0 -58
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(this.webpackChunk_tsparticles_interaction_external_particle=this.webpackChunk_tsparticles_interaction_external_particle||[]).push([[
|
|
1
|
+
"use strict";(this.webpackChunk_tsparticles_interaction_external_particle=this.webpackChunk_tsparticles_interaction_external_particle||[]).push([[711],{711(t,e,i){i.d(e,{InteractivityParticleMaker:()=>n});var s=i(702),o=i(303);class r{options;pauseOnStop;replaceCursor;stopDelay;constructor(){this.replaceCursor=!1,this.pauseOnStop=!1,this.stopDelay=0}load(t){(0,o.isNull)(t)||(void 0!==t.options&&(this.options=(0,o.deepExtend)({},t.options)),void 0!==t.replaceCursor&&(this.replaceCursor=t.replaceCursor),void 0!==t.pauseOnStop&&(this.pauseOnStop=t.pauseOnStop),void 0!==t.stopDelay&&(this.stopDelay=t.stopDelay))}}let a="particle";class n extends s.ExternalInteractorBase{maxDistance=0;_clearTimeout;_lastPosition;_particle;constructor(t){super(t)}clear(){}init(){}interact(t){let e=this.container,i=e.actualOptions;if(!e.retina.reduceFactor)return;let s=t.mouse.position,r=i.interactivity?.modes.particle;if(!r)return;let a=r.pauseOnStop&&(t.mouse.position===this._lastPosition||t.mouse.position?.x===this._lastPosition?.x&&t.mouse.position?.y===this._lastPosition?.y),n=r.stopDelay;if(s?this._lastPosition={...s}:delete this._lastPosition,this._lastPosition){if(a){if(this._clearTimeout)return;this._clearTimeout=setTimeout(()=>{if(this._particle){if(r.replaceCursor){let e=t.element;e&&(e instanceof Window||e instanceof Document?(0,o.safeDocument)().body.style.cursor="":e.style.cursor="")}this._particle.destroy(!0),delete this._particle}},n);return}if(this._clearTimeout&&(clearTimeout(this._clearTimeout),delete this._clearTimeout),!this._particle){let i=(0,o.deepExtend)(r.options,{move:{enable:!1}});if(this._particle=e.particles.addParticle(this._lastPosition,i),r.replaceCursor){let e=t.element;e&&(e instanceof Window||e instanceof Document?(0,o.safeDocument)().body.style.cursor="none":e.style.cursor="none")}}this._particle&&(this._particle.position.x=this._lastPosition.x,this._particle.position.y=this._lastPosition.y)}}isEnabled(t,e){let i=this.container.actualOptions,s=t.mouse,r=(e?.interactivity??i.interactivity)?.events;return!!r&&(s.clicking&&s.inside&&!!s.position&&(0,o.isInArray)(a,r.onClick.mode)||s.inside&&!!s.position&&(0,o.isInArray)(a,r.onHover.mode))}loadModeOptions(t,...e){for(let i of(t.particle??=new r,e))t.particle.load(i?.particle)}reset(){}}}}]);
|
package/README.md
CHANGED
|
@@ -9,6 +9,12 @@
|
|
|
9
9
|
[tsParticles](https://github.com/tsparticles/tsparticles) interaction plugin for particle effect around mouse or HTML
|
|
10
10
|
elements.
|
|
11
11
|
|
|
12
|
+
## Quick checklist
|
|
13
|
+
|
|
14
|
+
1. Install `@tsparticles/engine` (or use the CDN bundle below)
|
|
15
|
+
2. Call the package loader function(s) before `tsParticles.load(...)`
|
|
16
|
+
3. Apply the package options in your `tsParticles.load(...)` config
|
|
17
|
+
|
|
12
18
|
## How to use it
|
|
13
19
|
|
|
14
20
|
### CDN / Vanilla JS / jQuery
|
|
@@ -79,3 +85,35 @@ import { loadExternalParticleInteraction } from "@tsparticles/interaction-extern
|
|
|
79
85
|
await loadExternalParticleInteraction(tsParticles);
|
|
80
86
|
})();
|
|
81
87
|
```
|
|
88
|
+
|
|
89
|
+
## Option mapping
|
|
90
|
+
|
|
91
|
+
- Event mode key: `interactivity.events.onHover.mode` or `interactivity.events.onClick.mode` with value `"particle"`
|
|
92
|
+
- Mode options key: `interactivity.modes.particle`
|
|
93
|
+
|
|
94
|
+
```json
|
|
95
|
+
{
|
|
96
|
+
"interactivity": {
|
|
97
|
+
"events": {
|
|
98
|
+
"onHover": {
|
|
99
|
+
"enable": true,
|
|
100
|
+
"mode": "particle"
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
"modes": {
|
|
104
|
+
"particle": {}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Common pitfalls
|
|
111
|
+
|
|
112
|
+
- Calling `tsParticles.load(...)` before `loadInteractivityPlugin(...)`
|
|
113
|
+
- Verify required peer packages before enabling advanced options
|
|
114
|
+
- Change one option group at a time to isolate regressions quickly
|
|
115
|
+
|
|
116
|
+
## Related docs
|
|
117
|
+
|
|
118
|
+
- All packages catalog: <https://github.com/tsparticles/tsparticles>
|
|
119
|
+
- Main docs: <https://particles.js.org/docs/>
|
|
@@ -47,7 +47,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
|
|
|
47
47
|
if (interactivityParticleOptions.replaceCursor) {
|
|
48
48
|
const element = interactivityData.element;
|
|
49
49
|
if (element) {
|
|
50
|
-
if (element instanceof Window) {
|
|
50
|
+
if (element instanceof Window || element instanceof Document) {
|
|
51
51
|
safeDocument().body.style.cursor = "";
|
|
52
52
|
}
|
|
53
53
|
else {
|
|
@@ -55,7 +55,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
this.
|
|
58
|
+
this._particle.destroy(true);
|
|
59
59
|
delete this._particle;
|
|
60
60
|
}, clearDelay);
|
|
61
61
|
return;
|
|
@@ -74,7 +74,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
|
|
|
74
74
|
if (interactivityParticleOptions.replaceCursor) {
|
|
75
75
|
const element = interactivityData.element;
|
|
76
76
|
if (element) {
|
|
77
|
-
if (element instanceof Window) {
|
|
77
|
+
if (element instanceof Window || element instanceof Document) {
|
|
78
78
|
safeDocument().body.style.cursor = "none";
|
|
79
79
|
}
|
|
80
80
|
else {
|
package/browser/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export async function loadExternalParticleInteraction(engine) {
|
|
2
|
-
engine.checkVersion("4.0.0-beta.
|
|
3
|
-
await engine.register(async (e) => {
|
|
2
|
+
engine.checkVersion("4.0.0-beta.10");
|
|
3
|
+
await engine.pluginManager.register(async (e) => {
|
|
4
4
|
const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
|
|
5
5
|
ensureInteractivityPluginLoaded(e);
|
|
6
|
-
e.addInteractor?.("externalParticle", async (container) => {
|
|
6
|
+
e.pluginManager.addInteractor?.("externalParticle", async (container) => {
|
|
7
7
|
const { InteractivityParticleMaker } = await import("./InteractivityParticleMaker.js");
|
|
8
8
|
return new InteractivityParticleMaker(container);
|
|
9
9
|
});
|
|
@@ -47,7 +47,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
|
|
|
47
47
|
if (interactivityParticleOptions.replaceCursor) {
|
|
48
48
|
const element = interactivityData.element;
|
|
49
49
|
if (element) {
|
|
50
|
-
if (element instanceof Window) {
|
|
50
|
+
if (element instanceof Window || element instanceof Document) {
|
|
51
51
|
safeDocument().body.style.cursor = "";
|
|
52
52
|
}
|
|
53
53
|
else {
|
|
@@ -55,7 +55,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
this.
|
|
58
|
+
this._particle.destroy(true);
|
|
59
59
|
delete this._particle;
|
|
60
60
|
}, clearDelay);
|
|
61
61
|
return;
|
|
@@ -74,7 +74,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
|
|
|
74
74
|
if (interactivityParticleOptions.replaceCursor) {
|
|
75
75
|
const element = interactivityData.element;
|
|
76
76
|
if (element) {
|
|
77
|
-
if (element instanceof Window) {
|
|
77
|
+
if (element instanceof Window || element instanceof Document) {
|
|
78
78
|
safeDocument().body.style.cursor = "none";
|
|
79
79
|
}
|
|
80
80
|
else {
|
package/cjs/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export async function loadExternalParticleInteraction(engine) {
|
|
2
|
-
engine.checkVersion("4.0.0-beta.
|
|
3
|
-
await engine.register(async (e) => {
|
|
2
|
+
engine.checkVersion("4.0.0-beta.10");
|
|
3
|
+
await engine.pluginManager.register(async (e) => {
|
|
4
4
|
const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
|
|
5
5
|
ensureInteractivityPluginLoaded(e);
|
|
6
|
-
e.addInteractor?.("externalParticle", async (container) => {
|
|
6
|
+
e.pluginManager.addInteractor?.("externalParticle", async (container) => {
|
|
7
7
|
const { InteractivityParticleMaker } = await import("./InteractivityParticleMaker.js");
|
|
8
8
|
return new InteractivityParticleMaker(container);
|
|
9
9
|
});
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v4.0.0-beta.
|
|
7
|
+
* v4.0.0-beta.10
|
|
8
8
|
*/
|
|
9
9
|
"use strict";
|
|
10
10
|
/*
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
\****************************************************/
|
|
24
24
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
25
25
|
|
|
26
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ InteractivityParticleMaker: () => (/* binding */ InteractivityParticleMaker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_InteractivityParticleOptions_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/InteractivityParticleOptions.js */ \"./dist/browser/Options/Classes/InteractivityParticleOptions.js\");\n\n\n\nconst particleMode = \"particle\";\nclass InteractivityParticleMaker extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n maxDistance = 0;\n _clearTimeout;\n _lastPosition;\n _particle;\n constructor(container){\n super(container);\n }\n clear() {}\n init() {}\n interact(interactivityData) {\n const container = this.container, options = container.actualOptions;\n if (!container.retina.reduceFactor) {\n return;\n }\n const mousePos = interactivityData.mouse.position, interactivityParticleOptions = options.interactivity?.modes.particle;\n if (!interactivityParticleOptions) {\n return;\n }\n const mouseStopped = interactivityParticleOptions.pauseOnStop && (interactivityData.mouse.position === this._lastPosition || interactivityData.mouse.position?.x === this._lastPosition?.x && interactivityData.mouse.position?.y === this._lastPosition?.y), clearDelay = interactivityParticleOptions.stopDelay;\n if (mousePos) {\n this._lastPosition = {\n ...mousePos\n };\n } else {\n delete this._lastPosition;\n }\n if (!this._lastPosition) {\n return;\n }\n if (mouseStopped) {\n if (this._clearTimeout) {\n return;\n }\n this._clearTimeout = setTimeout(()=>{\n if (!this._particle) {\n return;\n }\n if (interactivityParticleOptions.replaceCursor) {\n const element = interactivityData.element;\n if (element) {\n if (element instanceof Window) {\n (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().body.style.cursor = \"\";\n } else {\n element.style.cursor = \"\";\n }\n }\n }\n this.
|
|
26
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ InteractivityParticleMaker: () => (/* binding */ InteractivityParticleMaker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_InteractivityParticleOptions_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/InteractivityParticleOptions.js */ \"./dist/browser/Options/Classes/InteractivityParticleOptions.js\");\n\n\n\nconst particleMode = \"particle\";\nclass InteractivityParticleMaker extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n maxDistance = 0;\n _clearTimeout;\n _lastPosition;\n _particle;\n constructor(container){\n super(container);\n }\n clear() {}\n init() {}\n interact(interactivityData) {\n const container = this.container, options = container.actualOptions;\n if (!container.retina.reduceFactor) {\n return;\n }\n const mousePos = interactivityData.mouse.position, interactivityParticleOptions = options.interactivity?.modes.particle;\n if (!interactivityParticleOptions) {\n return;\n }\n const mouseStopped = interactivityParticleOptions.pauseOnStop && (interactivityData.mouse.position === this._lastPosition || interactivityData.mouse.position?.x === this._lastPosition?.x && interactivityData.mouse.position?.y === this._lastPosition?.y), clearDelay = interactivityParticleOptions.stopDelay;\n if (mousePos) {\n this._lastPosition = {\n ...mousePos\n };\n } else {\n delete this._lastPosition;\n }\n if (!this._lastPosition) {\n return;\n }\n if (mouseStopped) {\n if (this._clearTimeout) {\n return;\n }\n this._clearTimeout = setTimeout(()=>{\n if (!this._particle) {\n return;\n }\n if (interactivityParticleOptions.replaceCursor) {\n const element = interactivityData.element;\n if (element) {\n if (element instanceof Window || element instanceof Document) {\n (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().body.style.cursor = \"\";\n } else {\n element.style.cursor = \"\";\n }\n }\n }\n this._particle.destroy(true);\n delete this._particle;\n }, clearDelay);\n return;\n }\n if (this._clearTimeout) {\n clearTimeout(this._clearTimeout);\n delete this._clearTimeout;\n }\n if (!this._particle) {\n const particleOptions = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.deepExtend)(interactivityParticleOptions.options, {\n move: {\n enable: false\n }\n });\n this._particle = container.particles.addParticle(this._lastPosition, particleOptions);\n if (interactivityParticleOptions.replaceCursor) {\n const element = interactivityData.element;\n if (element) {\n if (element instanceof Window || element instanceof Document) {\n (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().body.style.cursor = \"none\";\n } else {\n element.style.cursor = \"none\";\n }\n }\n }\n }\n if (!this._particle) {\n return;\n }\n this._particle.position.x = this._lastPosition.x;\n this._particle.position.y = this._lastPosition.y;\n }\n isEnabled(interactivityData, particle) {\n const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;\n return !!events && (mouse.clicking && mouse.inside && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(particleMode, events.onClick.mode) || mouse.inside && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(particleMode, events.onHover.mode));\n }\n loadModeOptions(options, ...sources) {\n options.particle ??= new _Options_Classes_InteractivityParticleOptions_js__WEBPACK_IMPORTED_MODULE_2__.InteractivityParticleOptions();\n for (const source of sources){\n options.particle.load(source?.particle);\n }\n }\n reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-particle/./dist/browser/InteractivityParticleMaker.js?\n}");
|
|
27
27
|
|
|
28
28
|
/***/ },
|
|
29
29
|
|
|
@@ -47,7 +47,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
|
|
|
47
47
|
if (interactivityParticleOptions.replaceCursor) {
|
|
48
48
|
const element = interactivityData.element;
|
|
49
49
|
if (element) {
|
|
50
|
-
if (element instanceof Window) {
|
|
50
|
+
if (element instanceof Window || element instanceof Document) {
|
|
51
51
|
safeDocument().body.style.cursor = "";
|
|
52
52
|
}
|
|
53
53
|
else {
|
|
@@ -55,7 +55,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
this.
|
|
58
|
+
this._particle.destroy(true);
|
|
59
59
|
delete this._particle;
|
|
60
60
|
}, clearDelay);
|
|
61
61
|
return;
|
|
@@ -74,7 +74,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
|
|
|
74
74
|
if (interactivityParticleOptions.replaceCursor) {
|
|
75
75
|
const element = interactivityData.element;
|
|
76
76
|
if (element) {
|
|
77
|
-
if (element instanceof Window) {
|
|
77
|
+
if (element instanceof Window || element instanceof Document) {
|
|
78
78
|
safeDocument().body.style.cursor = "none";
|
|
79
79
|
}
|
|
80
80
|
else {
|
package/esm/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export async function loadExternalParticleInteraction(engine) {
|
|
2
|
-
engine.checkVersion("4.0.0-beta.
|
|
3
|
-
await engine.register(async (e) => {
|
|
2
|
+
engine.checkVersion("4.0.0-beta.10");
|
|
3
|
+
await engine.pluginManager.register(async (e) => {
|
|
4
4
|
const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
|
|
5
5
|
ensureInteractivityPluginLoaded(e);
|
|
6
|
-
e.addInteractor?.("externalParticle", async (container) => {
|
|
6
|
+
e.pluginManager.addInteractor?.("externalParticle", async (container) => {
|
|
7
7
|
const { InteractivityParticleMaker } = await import("./InteractivityParticleMaker.js");
|
|
8
8
|
return new InteractivityParticleMaker(container);
|
|
9
9
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/interaction-external-particle",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.10",
|
|
4
4
|
"description": "tsParticles particle external interaction",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -81,17 +81,20 @@
|
|
|
81
81
|
"browser": "./browser/index.js",
|
|
82
82
|
"import": "./esm/index.js",
|
|
83
83
|
"require": "./cjs/index.js",
|
|
84
|
-
"
|
|
85
|
-
"default": "./cjs/index.js"
|
|
84
|
+
"default": "./esm/index.js"
|
|
86
85
|
},
|
|
87
86
|
"./package.json": "./package.json"
|
|
88
87
|
},
|
|
89
|
-
"
|
|
90
|
-
"@tsparticles/engine": "4.0.0-beta.
|
|
91
|
-
"@tsparticles/plugin-interactivity": "4.0.0-beta.
|
|
88
|
+
"peerDepdendencies": {
|
|
89
|
+
"@tsparticles/engine": "4.0.0-beta.1",
|
|
90
|
+
"@tsparticles/plugin-interactivity": "4.0.0-beta.1"
|
|
92
91
|
},
|
|
93
92
|
"publishConfig": {
|
|
94
93
|
"access": "public"
|
|
95
94
|
},
|
|
96
|
-
"type": "module"
|
|
95
|
+
"type": "module",
|
|
96
|
+
"peerDependencies": {
|
|
97
|
+
"@tsparticles/engine": "4.0.0-beta.10",
|
|
98
|
+
"@tsparticles/plugin-interactivity": "4.0.0-beta.10"
|
|
99
|
+
}
|
|
97
100
|
}
|