@tsparticles/interaction-external-remove 4.0.0-beta.0 → 4.0.0-beta.10

package/44.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_remove=this.webpackChunk_tsparticles_interaction_external_remove||[]).push([[44],{44(e,t,i){i.d(t,{Remover:()=>s});var r=i(702),n=i(303),a=i(362);let o="remove";class s extends r.ExternalInteractorBase{handleClickMode;maxDistance=0;constructor(e){super(e),this.handleClickMode=e=>{let t=this.container,i=t.actualOptions;if(!i.interactivity?.modes.remove||e!==o)return;let r=(0,n.getRangeValue)(i.interactivity.modes.remove.quantity);for(let e=0;e<r;e++)t.particles.get(e)?.destroy()}}clear(){}init(){}interact(){}isEnabled(e,t){let i=this.container.actualOptions,r=e.mouse,a=(t?.interactivity??i.interactivity)?.events;return!!a&&r.clicking&&r.inside&&!!r.position&&(0,n.isInArray)(o,a.onClick.mode)}loadModeOptions(e,...t){for(let i of(e.remove??=new a.n,t))e.remove.load(i?.remove)}reset(){}}}}]);

package/README.md

@@ -9,6 +9,12 @@
 [tsParticles](https://github.com/tsparticles/tsparticles) interaction plugin for remove effect around mouse or HTML
 elements.
 
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Call the package loader function(s) before `tsParticles.load(...)`
+3. Apply the package options in your `tsParticles.load(...)` config
+
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
@@ -79,3 +85,35 @@ import { loadExternalRemoveInteraction } from "@tsparticles/interaction-external
   await loadExternalRemoveInteraction(tsParticles);
 })();
 ```
+
+## Option mapping
+
+- Event mode key: `interactivity.events.onHover.mode` or `interactivity.events.onClick.mode` with value `"remove"`
+- Mode options key: `interactivity.modes.remove`
+
+```json
+{
+  "interactivity": {
+    "events": {
+      "onHover": {
+        "enable": true,
+        "mode": "remove"
+      }
+    },
+    "modes": {
+      "remove": {}
+    }
+  }
+}
+```
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadInteractivityPlugin(...)`
+- Verify required peer packages before enabling advanced options
+- Change one option group at a time to isolate regressions quickly
+
+## Related docs
+
+- All packages catalog: <https://github.com/tsparticles/tsparticles>
+- Main docs: <https://particles.js.org/docs/>

package/browser/Remover.js

@@ -13,7 +13,9 @@ export class Remover extends ExternalInteractorBase {
                 return;
             }
             const removeNb = getRangeValue(options.interactivity.modes.remove.quantity);
-            container.particles.removeQuantity(removeNb);
+            for (let i = 0; i < removeNb; i++) {
+                container.particles.get(i)?.destroy();
+            }
         };
     }
     clear() {

package/browser/index.js

@@ -1,9 +1,9 @@
 export async function loadExternalRemoveInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
         ensureInteractivityPluginLoaded(e);
-        e.addInteractor?.("externalRemove", async (container) => {
+        e.pluginManager.addInteractor?.("externalRemove", async (container) => {
             const { Remover } = await import("./Remover.js");
             return new Remover(container);
         });

package/cjs/Remover.js

@@ -13,7 +13,9 @@ export class Remover extends ExternalInteractorBase {
                 return;
             }
             const removeNb = getRangeValue(options.interactivity.modes.remove.quantity);
-            container.particles.removeQuantity(removeNb);
+            for (let i = 0; i < removeNb; i++) {
+                container.particles.get(i)?.destroy();
+            }
         };
     }
     clear() {

package/cjs/index.js

@@ -1,9 +1,9 @@
 export async function loadExternalRemoveInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
         ensureInteractivityPluginLoaded(e);
-        e.addInteractor?.("externalRemove", async (container) => {
+        e.pluginManager.addInteractor?.("externalRemove", async (container) => {
             const { Remover } = await import("./Remover.js");
             return new Remover(container);
         });

package/dist_browser_Remover_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-beta.0
+ * v4.0.0-beta.10
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*********************************/
 (__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 */   Remover: () => (/* binding */ Remover)\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_Remove_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Remove.js */ \"./dist/browser/Options/Classes/Remove.js\");\n\n\n\nconst removeMode = \"remove\";\nclass Remover extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n    handleClickMode;\n    maxDistance = 0;\n    constructor(container){\n        super(container);\n        this.handleClickMode = (mode)=>{\n            const container = this.container, options = container.actualOptions;\n            if (!options.interactivity?.modes.remove || mode !== removeMode) {\n                return;\n            }\n            const removeNb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(options.interactivity.modes.remove.quantity);\n            container.particles.removeQuantity(removeNb);\n        };\n    }\n    clear() {}\n    init() {}\n    interact() {}\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)(removeMode, events.onClick.mode);\n    }\n    loadModeOptions(options, ...sources) {\n        options.remove ??= new _Options_Classes_Remove_js__WEBPACK_IMPORTED_MODULE_2__.Remove();\n        for (const source of sources){\n            options.remove.load(source?.remove);\n        }\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-remove/./dist/browser/Remover.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Remover: () => (/* binding */ Remover)\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_Remove_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Remove.js */ \"./dist/browser/Options/Classes/Remove.js\");\n\n\n\nconst removeMode = \"remove\";\nclass Remover extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n    handleClickMode;\n    maxDistance = 0;\n    constructor(container){\n        super(container);\n        this.handleClickMode = (mode)=>{\n            const container = this.container, options = container.actualOptions;\n            if (!options.interactivity?.modes.remove || mode !== removeMode) {\n                return;\n            }\n            const removeNb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(options.interactivity.modes.remove.quantity);\n            for(let i = 0; i < removeNb; i++){\n                container.particles.get(i)?.destroy();\n            }\n        };\n    }\n    clear() {}\n    init() {}\n    interact() {}\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)(removeMode, events.onClick.mode);\n    }\n    loadModeOptions(options, ...sources) {\n        options.remove ??= new _Options_Classes_Remove_js__WEBPACK_IMPORTED_MODULE_2__.Remove();\n        for (const source of sources){\n            options.remove.load(source?.remove);\n        }\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-remove/./dist/browser/Remover.js?\n}");
 
 /***/ }
 

package/esm/Remover.js

@@ -13,7 +13,9 @@ export class Remover extends ExternalInteractorBase {
                 return;
             }
             const removeNb = getRangeValue(options.interactivity.modes.remove.quantity);
-            container.particles.removeQuantity(removeNb);
+            for (let i = 0; i < removeNb; i++) {
+                container.particles.get(i)?.destroy();
+            }
         };
     }
     clear() {

package/esm/index.js

@@ -1,9 +1,9 @@
 export async function loadExternalRemoveInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
         ensureInteractivityPluginLoaded(e);
-        e.addInteractor?.("externalRemove", async (container) => {
+        e.pluginManager.addInteractor?.("externalRemove", async (container) => {
             const { Remover } = await import("./Remover.js");
             return new Remover(container);
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-external-remove",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles remove external interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -81,17 +81,20 @@
       "browser": "./browser/index.js",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
-      "umd": "./umd/index.js",
-      "default": "./cjs/index.js"
+      "default": "./esm/index.js"
     },
     "./package.json": "./package.json"
   },
-  "dependencies": {
-    "@tsparticles/engine": "4.0.0-beta.0",
-    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
+  "peerDepdendencies": {
+    "@tsparticles/engine": "4.0.0-beta.1",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "type": "module"
+  "type": "module",
+  "peerDependencies": {
+    "@tsparticles/engine": "4.0.0-beta.10",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.10"
+  }
 }