@tsparticles/interaction-external-destroy 4.0.0-beta.11

package/799.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_destroy=this.webpackChunk_tsparticles_interaction_external_destroy||[]).push([[799],{799(e,t,i){i.d(t,{Destroyer:()=>c});var o=i(702),n=i(303);function s(e,t){for(let i of e.particles.grid.query(t))i.destroy()}var r=i(198);let a="destroy";class c extends o.ExternalInteractorBase{_maxDistance;constructor(e){super(e),this._maxDistance=0}get maxDistance(){return this._maxDistance}clear(){}init(){let e=this.container,t=e.actualOptions.interactivity?.modes.destroy;t&&(this._maxDistance=t.distance,e.retina.destroyModeDistance=t.distance*e.retina.pixelRatio)}interact(e){var t,i;let r=this.container.actualOptions,c=r.interactivity?.events,l=e.status===o.mouseMoveEvent;if(!c)return;let d=c.onHover.enable,f=c.onHover.mode,u=c.onDiv;if(l&&d&&(0,n.isInArray)(a,f)){let i,o,r;t=this.container,i=t.retina.pixelRatio,o=e.mouse.position,(r=t.retina.destroyModeDistance)&&!(r<0)&&o&&s(t,new n.Circle(o.x,o.y,r+10*i))}else i=this.container,(0,o.divModeExecute)(a,u,(e,t)=>{let r;(r=(0,n.safeDocument)().querySelectorAll(e)).length&&r.forEach(e=>{let r=i.retina.pixelRatio,a={x:(e.offsetLeft+.5*e.offsetWidth)*r,y:(e.offsetTop+.5*e.offsetHeight)*r},c=.5*e.offsetWidth*r,l=10*r;s(i,t.type===o.DivType.circle?new n.Circle(a.x,a.y,c+l):new n.Rectangle(e.offsetLeft*r-l,e.offsetTop*r-l,e.offsetWidth*r+l*n.double,e.offsetHeight*r+l*n.double))})})}isEnabled(e,t){let i=this.container.actualOptions,s=e.mouse,r=(t?.interactivity??i.interactivity)?.events;if(!r)return!1;let c=r.onDiv;return!!s.position&&r.onHover.enable&&(0,n.isInArray)(a,r.onHover.mode)||(0,o.isDivModeEnabled)(a,c)}loadModeOptions(e,...t){for(let i of(e.destroy??=new r.F,t))e.destroy.load(i?.destroy)}reset(){}}}}]);

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-2025 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles External Destroy Interaction
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/interaction-external-destroy/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/interaction-external-destroy)
+[![npmjs](https://badge.fury.io/js/@tsparticles/interaction-external-destroy.svg)](https://www.npmjs.com/package/@tsparticles/interaction-external-destroy)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/interaction-external-destroy)](https://www.npmjs.com/package/@tsparticles/interaction-external-destroy) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/tsparticles/tsparticles) interaction plugin for destroy 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
+
+The CDN/Vanilla version JS has one required file in vanilla configuration:
+
+Including the `tsparticles.interaction.external.destroy.min.js` file will export the function to load the interaction
+plugin:
+
+```javascript
+loadExternalDestroyInteraction;
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` and the interaction plugin like this:
+
+```javascript
+(async () => {
+  await loadInteractivityPlugin(tsParticles);
+  await loadExternalDestroyInteraction(tsParticles);
+
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      /* options */
+    },
+  });
+})();
+```
+
+### ESM / CommonJS
+
+This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
+
+```shell
+$ npm install @tsparticles/interaction-external-destroy
+```
+
+or
+
+```shell
+$ yarn add @tsparticles/interaction-external-destroy
+```
+
+Then you need to import it in the app, like this:
+
+```javascript
+const { tsParticles } = require("@tsparticles/engine");
+const { loadInteractivityPlugin } = require("@tsparticles/plugin-interactivity");
+const { loadExternalDestroyInteraction } = require("@tsparticles/interaction-external-destroy");
+
+(async () => {
+  await loadInteractivityPlugin(tsParticles);
+  await loadExternalDestroyInteraction(tsParticles);
+})();
+```
+
+or
+
+```javascript
+import { tsParticles } from "@tsparticles/engine";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
+import { loadExternalDestroyInteraction } from "@tsparticles/interaction-external-destroy";
+
+(async () => {
+  await loadInteractivityPlugin(tsParticles);
+  await loadExternalDestroyInteraction(tsParticles);
+})();
+```
+
+## Option mapping
+
+- Event mode key: `interactivity.events.onHover.mode` with value `"destroy"`
+- Mode options key: `interactivity.modes.destroy`
+
+```json
+{
+  "interactivity": {
+    "events": {
+      "onHover": {
+        "enable": true,
+        "mode": "destroy"
+      }
+    },
+    "modes": {
+      "destroy": {
+        "distance": 200
+      }
+    }
+  }
+}
+```
+
+## 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/Destroyer.js

@@ -0,0 +1,55 @@
+import { ExternalInteractorBase, isDivModeEnabled, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
+import { isInArray } from "@tsparticles/engine";
+import { divDestroy, mouseDestroy } from "./Utils.js";
+import { Destroy } from "./Options/Classes/Destroy.js";
+const destroyMode = "destroy";
+export class Destroyer extends ExternalInteractorBase {
+    _maxDistance;
+    constructor(container) {
+        super(container);
+        this._maxDistance = 0;
+    }
+    get maxDistance() {
+        return this._maxDistance;
+    }
+    clear() {
+    }
+    init() {
+        const container = this.container, destroy = container.actualOptions.interactivity?.modes.destroy;
+        if (!destroy) {
+            return;
+        }
+        this._maxDistance = destroy.distance;
+        container.retina.destroyModeDistance = destroy.distance * container.retina.pixelRatio;
+    }
+    interact(interactivityData) {
+        const container = this.container, options = container.actualOptions, events = options.interactivity?.events, mouseMoveStatus = interactivityData.status === mouseMoveEvent;
+        if (!events) {
+            return;
+        }
+        const hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;
+        if (mouseMoveStatus && hoverEnabled && isInArray(destroyMode, hoverMode)) {
+            mouseDestroy(this.container, interactivityData);
+        }
+        else {
+            divDestroy(this.container, divs, destroyMode);
+        }
+    }
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
+        if (!events) {
+            return false;
+        }
+        const divs = events.onDiv;
+        return ((!!mouse.position && events.onHover.enable && isInArray(destroyMode, events.onHover.mode)) ||
+            isDivModeEnabled(destroyMode, divs));
+    }
+    loadModeOptions(options, ...sources) {
+        options.destroy ??= new Destroy();
+        for (const source of sources) {
+            options.destroy.load(source?.destroy);
+        }
+    }
+    reset() {
+    }
+}

package/browser/Options/Classes/Destroy.js

@@ -0,0 +1,15 @@
+import { isNull } from "@tsparticles/engine";
+export class Destroy {
+    distance;
+    constructor() {
+        this.distance = 200;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.distance !== undefined) {
+            this.distance = data.distance;
+        }
+    }
+}

package/browser/Options/Classes/DestroyOptions.js

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

package/browser/Options/Interfaces/IDestroy.js

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

package/browser/Types.js

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

package/browser/Utils.js

@@ -0,0 +1,36 @@
+import { Circle, Rectangle, double, safeDocument } from "@tsparticles/engine";
+import { DivType, divModeExecute } from "@tsparticles/plugin-interactivity";
+const half = 0.5, toleranceFactor = 10, minRadius = 0;
+function processDestroy(container, area) {
+    const query = container.particles.grid.query(area);
+    for (const particle of query) {
+        particle.destroy();
+    }
+}
+function singleSelectorDestroy(container, selector, div) {
+    const query = safeDocument().querySelectorAll(selector);
+    if (!query.length) {
+        return;
+    }
+    query.forEach(item => {
+        const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+            x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+            y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+        }, radius = elem.offsetWidth * half * pxRatio, tolerance = toleranceFactor * pxRatio, area = div.type === DivType.circle
+            ? new Circle(pos.x, pos.y, radius + tolerance)
+            : new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * double, elem.offsetHeight * pxRatio + tolerance * double);
+        processDestroy(container, area);
+    });
+}
+export function divDestroy(container, divs, destroyMode) {
+    divModeExecute(destroyMode, divs, (selector, div) => {
+        singleSelectorDestroy(container, selector, div);
+    });
+}
+export function mouseDestroy(container, interactivityData) {
+    const pxRatio = container.retina.pixelRatio, tolerance = toleranceFactor * pxRatio, mousePos = interactivityData.mouse.position, radius = container.retina.destroyModeDistance;
+    if (!radius || radius < minRadius || !mousePos) {
+        return;
+    }
+    processDestroy(container, new Circle(mousePos.x, mousePos.y, radius + tolerance));
+}

package/browser/index.js

@@ -0,0 +1,12 @@
+export async function loadExternalDestroyInteraction(engine) {
+    engine.checkVersion("4.0.0-beta.11");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalDestroy", async (container) => {
+            const { Destroyer } = await import("./Destroyer.js");
+            return new Destroyer(container);
+        });
+    });
+}
+export * from "./Options/Classes/Destroy.js";

package/browser/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/cjs/Destroyer.js

@@ -0,0 +1,55 @@
+import { ExternalInteractorBase, isDivModeEnabled, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
+import { isInArray } from "@tsparticles/engine";
+import { divDestroy, mouseDestroy } from "./Utils.js";
+import { Destroy } from "./Options/Classes/Destroy.js";
+const destroyMode = "destroy";
+export class Destroyer extends ExternalInteractorBase {
+    _maxDistance;
+    constructor(container) {
+        super(container);
+        this._maxDistance = 0;
+    }
+    get maxDistance() {
+        return this._maxDistance;
+    }
+    clear() {
+    }
+    init() {
+        const container = this.container, destroy = container.actualOptions.interactivity?.modes.destroy;
+        if (!destroy) {
+            return;
+        }
+        this._maxDistance = destroy.distance;
+        container.retina.destroyModeDistance = destroy.distance * container.retina.pixelRatio;
+    }
+    interact(interactivityData) {
+        const container = this.container, options = container.actualOptions, events = options.interactivity?.events, mouseMoveStatus = interactivityData.status === mouseMoveEvent;
+        if (!events) {
+            return;
+        }
+        const hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;
+        if (mouseMoveStatus && hoverEnabled && isInArray(destroyMode, hoverMode)) {
+            mouseDestroy(this.container, interactivityData);
+        }
+        else {
+            divDestroy(this.container, divs, destroyMode);
+        }
+    }
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
+        if (!events) {
+            return false;
+        }
+        const divs = events.onDiv;
+        return ((!!mouse.position && events.onHover.enable && isInArray(destroyMode, events.onHover.mode)) ||
+            isDivModeEnabled(destroyMode, divs));
+    }
+    loadModeOptions(options, ...sources) {
+        options.destroy ??= new Destroy();
+        for (const source of sources) {
+            options.destroy.load(source?.destroy);
+        }
+    }
+    reset() {
+    }
+}

package/cjs/Options/Classes/Destroy.js

@@ -0,0 +1,15 @@
+import { isNull } from "@tsparticles/engine";
+export class Destroy {
+    distance;
+    constructor() {
+        this.distance = 200;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.distance !== undefined) {
+            this.distance = data.distance;
+        }
+    }
+}

package/cjs/Options/Classes/DestroyOptions.js

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

package/cjs/Options/Interfaces/IDestroy.js

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

package/cjs/Types.js

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

package/cjs/Utils.js

@@ -0,0 +1,36 @@
+import { Circle, Rectangle, double, safeDocument } from "@tsparticles/engine";
+import { DivType, divModeExecute } from "@tsparticles/plugin-interactivity";
+const half = 0.5, toleranceFactor = 10, minRadius = 0;
+function processDestroy(container, area) {
+    const query = container.particles.grid.query(area);
+    for (const particle of query) {
+        particle.destroy();
+    }
+}
+function singleSelectorDestroy(container, selector, div) {
+    const query = safeDocument().querySelectorAll(selector);
+    if (!query.length) {
+        return;
+    }
+    query.forEach(item => {
+        const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+            x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+            y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+        }, radius = elem.offsetWidth * half * pxRatio, tolerance = toleranceFactor * pxRatio, area = div.type === DivType.circle
+            ? new Circle(pos.x, pos.y, radius + tolerance)
+            : new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * double, elem.offsetHeight * pxRatio + tolerance * double);
+        processDestroy(container, area);
+    });
+}
+export function divDestroy(container, divs, destroyMode) {
+    divModeExecute(destroyMode, divs, (selector, div) => {
+        singleSelectorDestroy(container, selector, div);
+    });
+}
+export function mouseDestroy(container, interactivityData) {
+    const pxRatio = container.retina.pixelRatio, tolerance = toleranceFactor * pxRatio, mousePos = interactivityData.mouse.position, radius = container.retina.destroyModeDistance;
+    if (!radius || radius < minRadius || !mousePos) {
+        return;
+    }
+    processDestroy(container, new Circle(mousePos.x, mousePos.y, radius + tolerance));
+}

package/cjs/index.js

@@ -0,0 +1,12 @@
+export async function loadExternalDestroyInteraction(engine) {
+    engine.checkVersion("4.0.0-beta.11");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalDestroy", async (container) => {
+            const { Destroyer } = await import("./Destroyer.js");
+            return new Destroyer(container);
+        });
+    });
+}
+export * from "./Options/Classes/Destroy.js";

package/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/dist_browser_Destroyer_js.js

@@ -0,0 +1,40 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-beta.11
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_interaction_external_destroy"] = this["webpackChunk_tsparticles_interaction_external_destroy"] || []).push([["dist_browser_Destroyer_js"],{
+
+/***/ "./dist/browser/Destroyer.js"
+/*!***********************************!*\
+  !*** ./dist/browser/Destroyer.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 */   Destroyer: () => (/* binding */ Destroyer)\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 _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n/* harmony import */ var _Options_Classes_Destroy_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/Destroy.js */ \"./dist/browser/Options/Classes/Destroy.js\");\n\n\n\n\nconst destroyMode = \"destroy\";\nclass Destroyer extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n    _maxDistance;\n    constructor(container){\n        super(container);\n        this._maxDistance = 0;\n    }\n    get maxDistance() {\n        return this._maxDistance;\n    }\n    clear() {}\n    init() {\n        const container = this.container, destroy = container.actualOptions.interactivity?.modes.destroy;\n        if (!destroy) {\n            return;\n        }\n        this._maxDistance = destroy.distance;\n        container.retina.destroyModeDistance = destroy.distance * container.retina.pixelRatio;\n    }\n    interact(interactivityData) {\n        const container = this.container, options = container.actualOptions, events = options.interactivity?.events, mouseMoveStatus = interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.mouseMoveEvent;\n        if (!events) {\n            return;\n        }\n        const hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;\n        if (mouseMoveStatus && hoverEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(destroyMode, hoverMode)) {\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.mouseDestroy)(this.container, interactivityData);\n        } else {\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.divDestroy)(this.container, divs, destroyMode);\n        }\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;\n        if (!events) {\n            return false;\n        }\n        const divs = events.onDiv;\n        return !!mouse.position && events.onHover.enable && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(destroyMode, events.onHover.mode) || (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.isDivModeEnabled)(destroyMode, divs);\n    }\n    loadModeOptions(options, ...sources) {\n        options.destroy ??= new _Options_Classes_Destroy_js__WEBPACK_IMPORTED_MODULE_3__.Destroy();\n        for (const source of sources){\n            options.destroy.load(source?.destroy);\n        }\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-destroy/./dist/browser/Destroyer.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Utils.js"
+/*!*******************************!*\
+  !*** ./dist/browser/Utils.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 */   divDestroy: () => (/* binding */ divDestroy),\n/* harmony export */   mouseDestroy: () => (/* binding */ mouseDestroy)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n\n\nconst half = 0.5, toleranceFactor = 10, minRadius = 0;\nfunction processDestroy(container, area) {\n    const query = container.particles.grid.query(area);\n    for (const particle of query){\n        particle.destroy();\n    }\n}\nfunction singleSelectorDestroy(container, selector, div) {\n    const query = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelectorAll(selector);\n    if (!query.length) {\n        return;\n    }\n    query.forEach((item)=>{\n        const elem = item, pxRatio = container.retina.pixelRatio, pos = {\n            x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,\n            y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio\n        }, radius = elem.offsetWidth * half * pxRatio, tolerance = toleranceFactor * pxRatio, area = div.type === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.DivType.circle ? new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos.x, pos.y, radius + tolerance) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double, elem.offsetHeight * pxRatio + tolerance * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double);\n        processDestroy(container, area);\n    });\n}\nfunction divDestroy(container, divs, destroyMode) {\n    (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divModeExecute)(destroyMode, divs, (selector, div)=>{\n        singleSelectorDestroy(container, selector, div);\n    });\n}\nfunction mouseDestroy(container, interactivityData) {\n    const pxRatio = container.retina.pixelRatio, tolerance = toleranceFactor * pxRatio, mousePos = interactivityData.mouse.position, radius = container.retina.destroyModeDistance;\n    if (!radius || radius < minRadius || !mousePos) {\n        return;\n    }\n    processDestroy(container, new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(mousePos.x, mousePos.y, radius + tolerance));\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-destroy/./dist/browser/Utils.js?\n}");
+
+/***/ }
+
+}]);

package/esm/Destroyer.js

@@ -0,0 +1,55 @@
+import { ExternalInteractorBase, isDivModeEnabled, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
+import { isInArray } from "@tsparticles/engine";
+import { divDestroy, mouseDestroy } from "./Utils.js";
+import { Destroy } from "./Options/Classes/Destroy.js";
+const destroyMode = "destroy";
+export class Destroyer extends ExternalInteractorBase {
+    _maxDistance;
+    constructor(container) {
+        super(container);
+        this._maxDistance = 0;
+    }
+    get maxDistance() {
+        return this._maxDistance;
+    }
+    clear() {
+    }
+    init() {
+        const container = this.container, destroy = container.actualOptions.interactivity?.modes.destroy;
+        if (!destroy) {
+            return;
+        }
+        this._maxDistance = destroy.distance;
+        container.retina.destroyModeDistance = destroy.distance * container.retina.pixelRatio;
+    }
+    interact(interactivityData) {
+        const container = this.container, options = container.actualOptions, events = options.interactivity?.events, mouseMoveStatus = interactivityData.status === mouseMoveEvent;
+        if (!events) {
+            return;
+        }
+        const hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;
+        if (mouseMoveStatus && hoverEnabled && isInArray(destroyMode, hoverMode)) {
+            mouseDestroy(this.container, interactivityData);
+        }
+        else {
+            divDestroy(this.container, divs, destroyMode);
+        }
+    }
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
+        if (!events) {
+            return false;
+        }
+        const divs = events.onDiv;
+        return ((!!mouse.position && events.onHover.enable && isInArray(destroyMode, events.onHover.mode)) ||
+            isDivModeEnabled(destroyMode, divs));
+    }
+    loadModeOptions(options, ...sources) {
+        options.destroy ??= new Destroy();
+        for (const source of sources) {
+            options.destroy.load(source?.destroy);
+        }
+    }
+    reset() {
+    }
+}

package/esm/Options/Classes/Destroy.js

@@ -0,0 +1,15 @@
+import { isNull } from "@tsparticles/engine";
+export class Destroy {
+    distance;
+    constructor() {
+        this.distance = 200;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.distance !== undefined) {
+            this.distance = data.distance;
+        }
+    }
+}

package/esm/Options/Classes/DestroyOptions.js

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

package/esm/Options/Interfaces/IDestroy.js

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

package/esm/Types.js

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

package/esm/Utils.js

@@ -0,0 +1,36 @@
+import { Circle, Rectangle, double, safeDocument } from "@tsparticles/engine";
+import { DivType, divModeExecute } from "@tsparticles/plugin-interactivity";
+const half = 0.5, toleranceFactor = 10, minRadius = 0;
+function processDestroy(container, area) {
+    const query = container.particles.grid.query(area);
+    for (const particle of query) {
+        particle.destroy();
+    }
+}
+function singleSelectorDestroy(container, selector, div) {
+    const query = safeDocument().querySelectorAll(selector);
+    if (!query.length) {
+        return;
+    }
+    query.forEach(item => {
+        const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+            x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
+            y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
+        }, radius = elem.offsetWidth * half * pxRatio, tolerance = toleranceFactor * pxRatio, area = div.type === DivType.circle
+            ? new Circle(pos.x, pos.y, radius + tolerance)
+            : new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * double, elem.offsetHeight * pxRatio + tolerance * double);
+        processDestroy(container, area);
+    });
+}
+export function divDestroy(container, divs, destroyMode) {
+    divModeExecute(destroyMode, divs, (selector, div) => {
+        singleSelectorDestroy(container, selector, div);
+    });
+}
+export function mouseDestroy(container, interactivityData) {
+    const pxRatio = container.retina.pixelRatio, tolerance = toleranceFactor * pxRatio, mousePos = interactivityData.mouse.position, radius = container.retina.destroyModeDistance;
+    if (!radius || radius < minRadius || !mousePos) {
+        return;
+    }
+    processDestroy(container, new Circle(mousePos.x, mousePos.y, radius + tolerance));
+}

package/esm/index.js

@@ -0,0 +1,12 @@
+export async function loadExternalDestroyInteraction(engine) {
+    engine.checkVersion("4.0.0-beta.11");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalDestroy", async (container) => {
+            const { Destroyer } = await import("./Destroyer.js");
+            return new Destroyer(container);
+        });
+    });
+}
+export * from "./Options/Classes/Destroy.js";

package/esm/package.json

@@ -0,0 +1 @@
+{ "type": "module" }