@tsparticles/interaction-external-particle 4.0.0-alpha.2 → 4.0.0-alpha.20

package/406.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_particle=this.webpackChunk_tsparticles_interaction_external_particle||[]).push([[406],{406(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{_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?(0,o.safeDocument)().body.style.cursor="":e.style.cursor="")}this.container.particles.remove(this._particle,void 0,!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?(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

@@ -28,6 +28,7 @@ Once the scripts are loaded you can set up `tsParticles` and the interaction plu
 
 ```javascript
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadExternalParticleInteraction(tsParticles);
 
   await tsParticles.load({
@@ -57,9 +58,11 @@ Then you need to import it in the app, like this:
 
 ```javascript
 const { tsParticles } = require("@tsparticles/engine");
+const { loadInteractivityPlugin } = require("@tsparticles/plugin-interactivity");
 const { loadExternalParticleInteraction } = require("@tsparticles/interaction-external-particle");
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadExternalParticleInteraction(tsParticles);
 })();
 ```
@@ -68,9 +71,11 @@ or
 
 ```javascript
 import { tsParticles } from "@tsparticles/engine";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
 import { loadExternalParticleInteraction } from "@tsparticles/interaction-external-particle";
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadExternalParticleInteraction(tsParticles);
 })();
 ```

package/browser/InteractivityParticleMaker.js

@@ -1,7 +1,11 @@
-import { ExternalInteractorBase, deepExtend, isInArray, safeDocument, } from "@tsparticles/engine";
-import { InteractivityParticle } from "./Options/Classes/InteractivityParticle.js";
+import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
+import { deepExtend, isInArray, safeDocument, } from "@tsparticles/engine";
+import { InteractivityParticleOptions } from "./Options/Classes/InteractivityParticleOptions.js";
 const particleMode = "particle";
 export class InteractivityParticleMaker extends ExternalInteractorBase {
+    _clearTimeout;
+    _lastPosition;
+    _particle;
     constructor(container) {
         super(container);
     }
@@ -9,19 +13,19 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
     }
     init() {
     }
-    interact() {
-        const container = this.container, { interactivity } = container, options = container.actualOptions;
+    interact(interactivityData) {
+        const container = this.container, options = container.actualOptions;
         if (!container.retina.reduceFactor) {
             return;
         }
-        const mousePos = interactivity.mouse.position, interactivityParticleOptions = options.interactivity.modes.particle;
+        const mousePos = interactivityData.mouse.position, interactivityParticleOptions = options.interactivity?.modes.particle;
         if (!interactivityParticleOptions) {
             return;
         }
         const mouseStopped = interactivityParticleOptions.pauseOnStop &&
-            (interactivity.mouse.position === this._lastPosition ||
-                (interactivity.mouse.position?.x === this._lastPosition?.x &&
-                    interactivity.mouse.position?.y === this._lastPosition?.y)), clearDelay = interactivityParticleOptions.stopDelay;
+            (interactivityData.mouse.position === this._lastPosition ||
+                (interactivityData.mouse.position?.x === this._lastPosition?.x &&
+                    interactivityData.mouse.position?.y === this._lastPosition?.y)), clearDelay = interactivityParticleOptions.stopDelay;
         if (mousePos) {
             this._lastPosition = { ...mousePos };
         }
@@ -40,7 +44,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
                     return;
                 }
                 if (interactivityParticleOptions.replaceCursor) {
-                    const element = interactivity.element;
+                    const element = interactivityData.element;
                     if (element) {
                         if (element instanceof Window) {
                             safeDocument().body.style.cursor = "";
@@ -67,7 +71,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
             });
             this._particle = container.particles.addParticle(this._lastPosition, particleOptions);
             if (interactivityParticleOptions.replaceCursor) {
-                const element = interactivity.element;
+                const element = interactivityData.element;
                 if (element) {
                     if (element instanceof Window) {
                         safeDocument().body.style.cursor = "none";
@@ -84,13 +88,14 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
         this._particle.position.x = this._lastPosition.x;
         this._particle.position.y = this._lastPosition.y;
     }
-    isEnabled(particle) {
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events;
-        return ((mouse.clicking && mouse.inside && !!mouse.position && isInArray(particleMode, events.onClick.mode)) ||
-            (mouse.inside && !!mouse.position && isInArray(particleMode, events.onHover.mode)));
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
+        return (!!events &&
+            ((mouse.clicking && mouse.inside && !!mouse.position && isInArray(particleMode, events.onClick.mode)) ||
+                (mouse.inside && !!mouse.position && isInArray(particleMode, events.onHover.mode))));
     }
     loadModeOptions(options, ...sources) {
-        options.particle ??= new InteractivityParticle();
+        options.particle ??= new InteractivityParticleOptions();
         for (const source of sources) {
             options.particle.load(source?.particle);
         }

package/browser/Options/Classes/InteractivityParticleOptions.js

@@ -1 +1,29 @@
-export {};
+import { deepExtend, isNull, } from "@tsparticles/engine";
+export class InteractivityParticleOptions {
+    options;
+    pauseOnStop;
+    replaceCursor;
+    stopDelay;
+    constructor() {
+        this.replaceCursor = false;
+        this.pauseOnStop = false;
+        this.stopDelay = 0;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.options !== undefined) {
+            this.options = deepExtend({}, data.options);
+        }
+        if (data.replaceCursor !== undefined) {
+            this.replaceCursor = data.replaceCursor;
+        }
+        if (data.pauseOnStop !== undefined) {
+            this.pauseOnStop = data.pauseOnStop;
+        }
+        if (data.stopDelay !== undefined) {
+            this.stopDelay = data.stopDelay;
+        }
+    }
+}

package/browser/index.js

@@ -1,7 +1,9 @@
-export function loadExternalParticleInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(e => {
-        e.addInteractor("externalParticle", async (container) => {
+export async function loadExternalParticleInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.20");
+    await engine.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.addInteractor?.("externalParticle", async (container) => {
             const { InteractivityParticleMaker } = await import("./InteractivityParticleMaker.js");
             return new InteractivityParticleMaker(container);
         });

package/cjs/InteractivityParticleMaker.js

@@ -1,7 +1,11 @@
-import { ExternalInteractorBase, deepExtend, isInArray, safeDocument, } from "@tsparticles/engine";
-import { InteractivityParticle } from "./Options/Classes/InteractivityParticle.js";
+import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
+import { deepExtend, isInArray, safeDocument, } from "@tsparticles/engine";
+import { InteractivityParticleOptions } from "./Options/Classes/InteractivityParticleOptions.js";
 const particleMode = "particle";
 export class InteractivityParticleMaker extends ExternalInteractorBase {
+    _clearTimeout;
+    _lastPosition;
+    _particle;
     constructor(container) {
         super(container);
     }
@@ -9,19 +13,19 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
     }
     init() {
     }
-    interact() {
-        const container = this.container, { interactivity } = container, options = container.actualOptions;
+    interact(interactivityData) {
+        const container = this.container, options = container.actualOptions;
         if (!container.retina.reduceFactor) {
             return;
         }
-        const mousePos = interactivity.mouse.position, interactivityParticleOptions = options.interactivity.modes.particle;
+        const mousePos = interactivityData.mouse.position, interactivityParticleOptions = options.interactivity?.modes.particle;
         if (!interactivityParticleOptions) {
             return;
         }
         const mouseStopped = interactivityParticleOptions.pauseOnStop &&
-            (interactivity.mouse.position === this._lastPosition ||
-                (interactivity.mouse.position?.x === this._lastPosition?.x &&
-                    interactivity.mouse.position?.y === this._lastPosition?.y)), clearDelay = interactivityParticleOptions.stopDelay;
+            (interactivityData.mouse.position === this._lastPosition ||
+                (interactivityData.mouse.position?.x === this._lastPosition?.x &&
+                    interactivityData.mouse.position?.y === this._lastPosition?.y)), clearDelay = interactivityParticleOptions.stopDelay;
         if (mousePos) {
             this._lastPosition = { ...mousePos };
         }
@@ -40,7 +44,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
                     return;
                 }
                 if (interactivityParticleOptions.replaceCursor) {
-                    const element = interactivity.element;
+                    const element = interactivityData.element;
                     if (element) {
                         if (element instanceof Window) {
                             safeDocument().body.style.cursor = "";
@@ -67,7 +71,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
             });
             this._particle = container.particles.addParticle(this._lastPosition, particleOptions);
             if (interactivityParticleOptions.replaceCursor) {
-                const element = interactivity.element;
+                const element = interactivityData.element;
                 if (element) {
                     if (element instanceof Window) {
                         safeDocument().body.style.cursor = "none";
@@ -84,13 +88,14 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
         this._particle.position.x = this._lastPosition.x;
         this._particle.position.y = this._lastPosition.y;
     }
-    isEnabled(particle) {
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events;
-        return ((mouse.clicking && mouse.inside && !!mouse.position && isInArray(particleMode, events.onClick.mode)) ||
-            (mouse.inside && !!mouse.position && isInArray(particleMode, events.onHover.mode)));
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
+        return (!!events &&
+            ((mouse.clicking && mouse.inside && !!mouse.position && isInArray(particleMode, events.onClick.mode)) ||
+                (mouse.inside && !!mouse.position && isInArray(particleMode, events.onHover.mode))));
     }
     loadModeOptions(options, ...sources) {
-        options.particle ??= new InteractivityParticle();
+        options.particle ??= new InteractivityParticleOptions();
         for (const source of sources) {
             options.particle.load(source?.particle);
         }

package/cjs/Options/Classes/InteractivityParticleOptions.js

@@ -1 +1,29 @@
-export {};
+import { deepExtend, isNull, } from "@tsparticles/engine";
+export class InteractivityParticleOptions {
+    options;
+    pauseOnStop;
+    replaceCursor;
+    stopDelay;
+    constructor() {
+        this.replaceCursor = false;
+        this.pauseOnStop = false;
+        this.stopDelay = 0;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.options !== undefined) {
+            this.options = deepExtend({}, data.options);
+        }
+        if (data.replaceCursor !== undefined) {
+            this.replaceCursor = data.replaceCursor;
+        }
+        if (data.pauseOnStop !== undefined) {
+            this.pauseOnStop = data.pauseOnStop;
+        }
+        if (data.stopDelay !== undefined) {
+            this.stopDelay = data.stopDelay;
+        }
+    }
+}

package/cjs/Options/Interfaces/IInteractivityParticleOptions.js

@@ -0,0 +1 @@
+export {};

package/cjs/index.js

@@ -1,7 +1,9 @@
-export function loadExternalParticleInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(e => {
-        e.addInteractor("externalParticle", async (container) => {
+export async function loadExternalParticleInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.20");
+    await engine.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.addInteractor?.("externalParticle", async (container) => {
             const { InteractivityParticleMaker } = await import("./InteractivityParticleMaker.js");
             return new InteractivityParticleMaker(container);
         });

package/dist_browser_InteractivityParticleMaker_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.2
+ * v4.0.0-alpha.20
  */
 "use strict";
 /*
@@ -23,17 +23,17 @@
   \****************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-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_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_InteractivityParticle_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/InteractivityParticle.js */ \"./dist/browser/Options/Classes/InteractivityParticle.js\");\n\n\nconst particleMode = \"particle\";\nclass InteractivityParticleMaker extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n  constructor(container) {\n    super(container);\n  }\n  clear() {}\n  init() {}\n  interact() {\n    const container = this.container,\n      {\n        interactivity\n      } = container,\n      options = container.actualOptions;\n    if (!container.retina.reduceFactor) {\n      return;\n    }\n    const mousePos = interactivity.mouse.position,\n      interactivityParticleOptions = options.interactivity.modes.particle;\n    if (!interactivityParticleOptions) {\n      return;\n    }\n    const mouseStopped = interactivityParticleOptions.pauseOnStop && (interactivity.mouse.position === this._lastPosition || interactivity.mouse.position?.x === this._lastPosition?.x && interactivity.mouse.position?.y === this._lastPosition?.y),\n      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 = interactivity.element;\n          if (element) {\n            if (element instanceof Window) {\n              (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().body.style.cursor = \"\";\n            } else {\n              element.style.cursor = \"\";\n            }\n          }\n        }\n        this.container.particles.remove(this._particle, undefined, 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_0__.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 = interactivity.element;\n        if (element) {\n          if (element instanceof Window) {\n            (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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(particle) {\n    const container = this.container,\n      options = container.actualOptions,\n      mouse = container.interactivity.mouse,\n      events = (particle?.interactivity ?? options.interactivity).events;\n    return mouse.clicking && mouse.inside && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(particleMode, events.onClick.mode) || mouse.inside && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(particleMode, events.onHover.mode);\n  }\n  loadModeOptions(options, ...sources) {\n    options.particle ??= new _Options_Classes_InteractivityParticle_js__WEBPACK_IMPORTED_MODULE_1__.InteractivityParticle();\n    for (const source of sources) {\n      options.particle.load(source?.particle);\n    }\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-particle/./dist/browser/InteractivityParticleMaker.js?\n}");
+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    _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.container.particles.remove(this._particle, undefined, 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) {\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}");
 
 /***/ },
 
-/***/ "./dist/browser/Options/Classes/InteractivityParticle.js"
-/*!***************************************************************!*\
-  !*** ./dist/browser/Options/Classes/InteractivityParticle.js ***!
-  \***************************************************************/
+/***/ "./dist/browser/Options/Classes/InteractivityParticleOptions.js"
+/*!**********************************************************************!*\
+  !*** ./dist/browser/Options/Classes/InteractivityParticleOptions.js ***!
+  \**********************************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InteractivityParticle: () => (/* binding */ InteractivityParticle)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass InteractivityParticle {\n  constructor() {\n    this.replaceCursor = false;\n    this.pauseOnStop = false;\n    this.stopDelay = 0;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.options !== undefined) {\n      this.options = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, data.options);\n    }\n    if (data.replaceCursor !== undefined) {\n      this.replaceCursor = data.replaceCursor;\n    }\n    if (data.pauseOnStop !== undefined) {\n      this.pauseOnStop = data.pauseOnStop;\n    }\n    if (data.stopDelay !== undefined) {\n      this.stopDelay = data.stopDelay;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-particle/./dist/browser/Options/Classes/InteractivityParticle.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InteractivityParticleOptions: () => (/* binding */ InteractivityParticleOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass InteractivityParticleOptions {\n    options;\n    pauseOnStop;\n    replaceCursor;\n    stopDelay;\n    constructor(){\n        this.replaceCursor = false;\n        this.pauseOnStop = false;\n        this.stopDelay = 0;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.options !== undefined) {\n            this.options = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, data.options);\n        }\n        if (data.replaceCursor !== undefined) {\n            this.replaceCursor = data.replaceCursor;\n        }\n        if (data.pauseOnStop !== undefined) {\n            this.pauseOnStop = data.pauseOnStop;\n        }\n        if (data.stopDelay !== undefined) {\n            this.stopDelay = data.stopDelay;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-particle/./dist/browser/Options/Classes/InteractivityParticleOptions.js?\n}");
 
 /***/ }
 

package/esm/InteractivityParticleMaker.js

@@ -1,7 +1,11 @@
-import { ExternalInteractorBase, deepExtend, isInArray, safeDocument, } from "@tsparticles/engine";
-import { InteractivityParticle } from "./Options/Classes/InteractivityParticle.js";
+import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
+import { deepExtend, isInArray, safeDocument, } from "@tsparticles/engine";
+import { InteractivityParticleOptions } from "./Options/Classes/InteractivityParticleOptions.js";
 const particleMode = "particle";
 export class InteractivityParticleMaker extends ExternalInteractorBase {
+    _clearTimeout;
+    _lastPosition;
+    _particle;
     constructor(container) {
         super(container);
     }
@@ -9,19 +13,19 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
     }
     init() {
     }
-    interact() {
-        const container = this.container, { interactivity } = container, options = container.actualOptions;
+    interact(interactivityData) {
+        const container = this.container, options = container.actualOptions;
         if (!container.retina.reduceFactor) {
             return;
         }
-        const mousePos = interactivity.mouse.position, interactivityParticleOptions = options.interactivity.modes.particle;
+        const mousePos = interactivityData.mouse.position, interactivityParticleOptions = options.interactivity?.modes.particle;
         if (!interactivityParticleOptions) {
             return;
         }
         const mouseStopped = interactivityParticleOptions.pauseOnStop &&
-            (interactivity.mouse.position === this._lastPosition ||
-                (interactivity.mouse.position?.x === this._lastPosition?.x &&
-                    interactivity.mouse.position?.y === this._lastPosition?.y)), clearDelay = interactivityParticleOptions.stopDelay;
+            (interactivityData.mouse.position === this._lastPosition ||
+                (interactivityData.mouse.position?.x === this._lastPosition?.x &&
+                    interactivityData.mouse.position?.y === this._lastPosition?.y)), clearDelay = interactivityParticleOptions.stopDelay;
         if (mousePos) {
             this._lastPosition = { ...mousePos };
         }
@@ -40,7 +44,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
                     return;
                 }
                 if (interactivityParticleOptions.replaceCursor) {
-                    const element = interactivity.element;
+                    const element = interactivityData.element;
                     if (element) {
                         if (element instanceof Window) {
                             safeDocument().body.style.cursor = "";
@@ -67,7 +71,7 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
             });
             this._particle = container.particles.addParticle(this._lastPosition, particleOptions);
             if (interactivityParticleOptions.replaceCursor) {
-                const element = interactivity.element;
+                const element = interactivityData.element;
                 if (element) {
                     if (element instanceof Window) {
                         safeDocument().body.style.cursor = "none";
@@ -84,13 +88,14 @@ export class InteractivityParticleMaker extends ExternalInteractorBase {
         this._particle.position.x = this._lastPosition.x;
         this._particle.position.y = this._lastPosition.y;
     }
-    isEnabled(particle) {
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events;
-        return ((mouse.clicking && mouse.inside && !!mouse.position && isInArray(particleMode, events.onClick.mode)) ||
-            (mouse.inside && !!mouse.position && isInArray(particleMode, events.onHover.mode)));
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
+        return (!!events &&
+            ((mouse.clicking && mouse.inside && !!mouse.position && isInArray(particleMode, events.onClick.mode)) ||
+                (mouse.inside && !!mouse.position && isInArray(particleMode, events.onHover.mode))));
     }
     loadModeOptions(options, ...sources) {
-        options.particle ??= new InteractivityParticle();
+        options.particle ??= new InteractivityParticleOptions();
         for (const source of sources) {
             options.particle.load(source?.particle);
         }

package/esm/Options/Classes/InteractivityParticleOptions.js

@@ -1 +1,29 @@
-export {};
+import { deepExtend, isNull, } from "@tsparticles/engine";
+export class InteractivityParticleOptions {
+    options;
+    pauseOnStop;
+    replaceCursor;
+    stopDelay;
+    constructor() {
+        this.replaceCursor = false;
+        this.pauseOnStop = false;
+        this.stopDelay = 0;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.options !== undefined) {
+            this.options = deepExtend({}, data.options);
+        }
+        if (data.replaceCursor !== undefined) {
+            this.replaceCursor = data.replaceCursor;
+        }
+        if (data.pauseOnStop !== undefined) {
+            this.pauseOnStop = data.pauseOnStop;
+        }
+        if (data.stopDelay !== undefined) {
+            this.stopDelay = data.stopDelay;
+        }
+    }
+}

package/esm/Options/Classes/InteractivityParticleOptionsData.js

@@ -0,0 +1 @@
+export {};

package/esm/Options/Interfaces/IInteractivityParticleOptions.js

@@ -0,0 +1 @@
+export {};

package/esm/index.js

@@ -1,7 +1,9 @@
-export function loadExternalParticleInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(e => {
-        e.addInteractor("externalParticle", async (container) => {
+export async function loadExternalParticleInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.20");
+    await engine.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.addInteractor?.("externalParticle", async (container) => {
             const { InteractivityParticleMaker } = await import("./InteractivityParticleMaker.js");
             return new InteractivityParticleMaker(container);
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-external-particle",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.20",
   "description": "tsParticles particle external interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -87,7 +87,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.2"
+    "@tsparticles/engine": "4.0.0-alpha.20",
+    "@tsparticles/plugin-interactivity": "4.0.0-alpha.20"
   },
   "publishConfig": {
     "access": "public"