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

package/271.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_grab=this.webpackChunk_tsparticles_interaction_external_grab||[]).push([[271],{271(t,e,i){i.d(e,{Grabber:()=>s});var n=i(702),a=i(303),r=i(760),o=i(425);class s extends n.ExternalInteractorBase{_maxDistance;_pluginManager;constructor(t,e){super(e),this._pluginManager=t,this._maxDistance=0}get maxDistance(){return this._maxDistance}clear(){}init(){let t=this.container,e=t.actualOptions.interactivity?.modes.grab;e&&(this._maxDistance=e.distance,t.retina.grabModeDistance=e.distance*t.retina.pixelRatio)}interact(t){let e=this.container,i=e.actualOptions.interactivity;if(!i?.modes.grab||!i.events.onHover.enable||t.status!==n.mouseMoveEvent)return;let r=t.mouse.position;if(!r)return;let s=e.retina.grabModeDistance;if(s&&!(s<0))for(let n of e.particles.grid.queryCircle(r,s,e=>this.isEnabled(t,e))){let t=n.getPosition(),l=(0,a.getDistance)(t,r);if(l>s)continue;let c=i.modes.grab.links,g=c.opacity,b=g-l*g/s;if(b<=0)continue;let d=c.color??n.options.links?.color;if(!e.particles.grabLineColor&&d){let t=i.modes.grab.links;e.particles.grabLineColor=(0,a.getLinkRandomColor)(this._pluginManager,d,t.blink,t.consent)}let u=(0,a.getLinkColor)(n,void 0,e.particles.grabLineColor);u&&function(t,e,i,n,r){t.canvas.render.draw(s=>{let l=e.getPosition();!function(t,e,i,n,r,s,l=!1){(0,o.drawLine)(t,i,n),t.strokeStyle=(0,a.getStyleFromRgb)(r,l,s),t.lineWidth=e,t.stroke()}(s,e.retina.linksWidth??0,l,r,i,n,t.hdr)})}(e,n,u,b,r)}}isEnabled(t,e){let i=this.container,n=t.mouse,r=(e?.interactivity??i.actualOptions.interactivity)?.events;return!!r?.onHover.enable&&!!n.position&&(0,a.isInArray)("grab",r.onHover.mode)}loadModeOptions(t,...e){for(let i of(t.grab??=new r.f,e))t.grab.load(i?.grab)}reset(){}}}}]);

package/README.md

@@ -9,6 +9,12 @@
 [tsParticles](https://github.com/tsparticles/tsparticles) interaction plugin for grab 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 { loadExternalGrabInteraction } from "@tsparticles/interaction-external-g
   await loadExternalGrabInteraction(tsParticles);
 })();
 ```
+
+## Option mapping
+
+- Event mode key: `interactivity.events.onHover.mode` or `interactivity.events.onClick.mode` with value `"grab"`
+- Mode options key: `interactivity.modes.grab`
+
+```json
+{
+  "interactivity": {
+    "events": {
+      "onHover": {
+        "enable": true,
+        "mode": "grab"
+      }
+    },
+    "modes": {
+      "grab": {}
+    }
+  }
+}
+```
+
+## 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/Grabber.js

@@ -1,14 +1,14 @@
-import { getDistance, getLinkColor, getLinkRandomColor, isInArray, } from "@tsparticles/engine";
 import { ExternalInteractorBase, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
+import { getDistance, getLinkColor, getLinkRandomColor, isInArray, } from "@tsparticles/engine";
 import { Grab } from "./Options/Classes/Grab.js";
 import { drawGrab } from "./Utils.js";
 const grabMode = "grab", minDistance = 0, minOpacity = 0;
 export class Grabber extends ExternalInteractorBase {
-    _engine;
     _maxDistance;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this._maxDistance = 0;
     }
     get maxDistance() {
@@ -52,7 +52,7 @@ export class Grabber extends ExternalInteractorBase {
             const optColor = grabLineOptions.color ?? particle.options.links?.color;
             if (!container.particles.grabLineColor && optColor) {
                 const linksOptions = interactivity.modes.grab.links;
-                container.particles.grabLineColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
+                container.particles.grabLineColor = getLinkRandomColor(this._pluginManager, optColor, linksOptions.blink, linksOptions.consent);
             }
             const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor);
             if (!colorLine) {

package/browser/Utils.js

@@ -8,7 +8,7 @@ export function drawGrabLine(context, width, begin, end, colorLine, opacity, hdr
     context.stroke();
 }
 export function drawGrab(container, particle, lineColor, opacity, mousePos) {
-    container.canvas.draw(ctx => {
+    container.canvas.render.draw(ctx => {
         const beginPos = particle.getPosition();
         drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity, container.hdr);
     });

package/browser/index.js

@@ -1,11 +1,11 @@
 export async function loadExternalGrabInteraction(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?.("externalGrab", async (container) => {
+        e.pluginManager.addInteractor?.("externalGrab", async (container) => {
             const { Grabber } = await import("./Grabber.js");
-            return new Grabber(container, engine);
+            return new Grabber(e.pluginManager, container);
         });
     });
 }

package/cjs/Grabber.js

@@ -1,14 +1,14 @@
-import { getDistance, getLinkColor, getLinkRandomColor, isInArray, } from "@tsparticles/engine";
 import { ExternalInteractorBase, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
+import { getDistance, getLinkColor, getLinkRandomColor, isInArray, } from "@tsparticles/engine";
 import { Grab } from "./Options/Classes/Grab.js";
 import { drawGrab } from "./Utils.js";
 const grabMode = "grab", minDistance = 0, minOpacity = 0;
 export class Grabber extends ExternalInteractorBase {
-    _engine;
     _maxDistance;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this._maxDistance = 0;
     }
     get maxDistance() {
@@ -52,7 +52,7 @@ export class Grabber extends ExternalInteractorBase {
             const optColor = grabLineOptions.color ?? particle.options.links?.color;
             if (!container.particles.grabLineColor && optColor) {
                 const linksOptions = interactivity.modes.grab.links;
-                container.particles.grabLineColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
+                container.particles.grabLineColor = getLinkRandomColor(this._pluginManager, optColor, linksOptions.blink, linksOptions.consent);
             }
             const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor);
             if (!colorLine) {

package/cjs/Utils.js

@@ -8,7 +8,7 @@ export function drawGrabLine(context, width, begin, end, colorLine, opacity, hdr
     context.stroke();
 }
 export function drawGrab(container, particle, lineColor, opacity, mousePos) {
-    container.canvas.draw(ctx => {
+    container.canvas.render.draw(ctx => {
         const beginPos = particle.getPosition();
         drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity, container.hdr);
     });

package/cjs/index.js

@@ -1,11 +1,11 @@
 export async function loadExternalGrabInteraction(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?.("externalGrab", async (container) => {
+        e.pluginManager.addInteractor?.("externalGrab", async (container) => {
             const { Grabber } = await import("./Grabber.js");
-            return new Grabber(container, engine);
+            return new Grabber(e.pluginManager, container);
         });
     });
 }

package/dist_browser_Grabber_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 */   Grabber: () => (/* binding */ Grabber)\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/* harmony import */ var _Options_Classes_Grab_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Grab.js */ \"./dist/browser/Options/Classes/Grab.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\nconst grabMode = \"grab\", minDistance = 0, minOpacity = 0;\nclass Grabber extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n    _engine;\n    _maxDistance;\n    constructor(container, engine){\n        super(container);\n        this._engine = engine;\n        this._maxDistance = 0;\n    }\n    get maxDistance() {\n        return this._maxDistance;\n    }\n    clear() {}\n    init() {\n        const container = this.container, grab = container.actualOptions.interactivity?.modes.grab;\n        if (!grab) {\n            return;\n        }\n        this._maxDistance = grab.distance;\n        container.retina.grabModeDistance = grab.distance * container.retina.pixelRatio;\n    }\n    interact(interactivityData) {\n        const container = this.container, options = container.actualOptions, interactivity = options.interactivity;\n        if (!interactivity?.modes.grab || !interactivity.events.onHover.enable || interactivityData.status !== _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent) {\n            return;\n        }\n        const mousePos = interactivityData.mouse.position;\n        if (!mousePos) {\n            return;\n        }\n        const distance = container.retina.grabModeDistance;\n        if (!distance || distance < minDistance) {\n            return;\n        }\n        const query = container.particles.grid.queryCircle(mousePos, distance, (p)=>this.isEnabled(interactivityData, p));\n        for (const particle of query){\n            const pos = particle.getPosition(), pointDistance = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mousePos);\n            if (pointDistance > distance) {\n                continue;\n            }\n            const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - pointDistance * lineOpacity / distance;\n            if (opacityLine <= minOpacity) {\n                continue;\n            }\n            const optColor = grabLineOptions.color ?? particle.options.links?.color;\n            if (!container.particles.grabLineColor && optColor) {\n                const linksOptions = interactivity.modes.grab.links;\n                container.particles.grabLineColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkRandomColor)(this._engine, optColor, linksOptions.blink, linksOptions.consent);\n            }\n            const colorLine = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(particle, undefined, container.particles.grabLineColor);\n            if (!colorLine) {\n                continue;\n            }\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_3__.drawGrab)(container, particle, colorLine, opacityLine, mousePos);\n        }\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, mouse = interactivityData.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity)?.events;\n        return !!events?.onHover.enable && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(grabMode, events.onHover.mode);\n    }\n    loadModeOptions(options, ...sources) {\n        options.grab ??= new _Options_Classes_Grab_js__WEBPACK_IMPORTED_MODULE_2__.Grab();\n        for (const source of sources){\n            options.grab.load(source?.grab);\n        }\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-grab/./dist/browser/Grabber.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Grabber: () => (/* binding */ Grabber)\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_Grab_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Grab.js */ \"./dist/browser/Options/Classes/Grab.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\nconst grabMode = \"grab\", minDistance = 0, minOpacity = 0;\nclass Grabber extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n    _maxDistance;\n    _pluginManager;\n    constructor(pluginManager, container){\n        super(container);\n        this._pluginManager = pluginManager;\n        this._maxDistance = 0;\n    }\n    get maxDistance() {\n        return this._maxDistance;\n    }\n    clear() {}\n    init() {\n        const container = this.container, grab = container.actualOptions.interactivity?.modes.grab;\n        if (!grab) {\n            return;\n        }\n        this._maxDistance = grab.distance;\n        container.retina.grabModeDistance = grab.distance * container.retina.pixelRatio;\n    }\n    interact(interactivityData) {\n        const container = this.container, options = container.actualOptions, interactivity = options.interactivity;\n        if (!interactivity?.modes.grab || !interactivity.events.onHover.enable || interactivityData.status !== _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.mouseMoveEvent) {\n            return;\n        }\n        const mousePos = interactivityData.mouse.position;\n        if (!mousePos) {\n            return;\n        }\n        const distance = container.retina.grabModeDistance;\n        if (!distance || distance < minDistance) {\n            return;\n        }\n        const query = container.particles.grid.queryCircle(mousePos, distance, (p)=>this.isEnabled(interactivityData, p));\n        for (const particle of query){\n            const pos = particle.getPosition(), pointDistance = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getDistance)(pos, mousePos);\n            if (pointDistance > distance) {\n                continue;\n            }\n            const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - pointDistance * lineOpacity / distance;\n            if (opacityLine <= minOpacity) {\n                continue;\n            }\n            const optColor = grabLineOptions.color ?? particle.options.links?.color;\n            if (!container.particles.grabLineColor && optColor) {\n                const linksOptions = interactivity.modes.grab.links;\n                container.particles.grabLineColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getLinkRandomColor)(this._pluginManager, optColor, linksOptions.blink, linksOptions.consent);\n            }\n            const colorLine = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getLinkColor)(particle, undefined, container.particles.grabLineColor);\n            if (!colorLine) {\n                continue;\n            }\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_3__.drawGrab)(container, particle, colorLine, opacityLine, mousePos);\n        }\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, mouse = interactivityData.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity)?.events;\n        return !!events?.onHover.enable && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(grabMode, events.onHover.mode);\n    }\n    loadModeOptions(options, ...sources) {\n        options.grab ??= new _Options_Classes_Grab_js__WEBPACK_IMPORTED_MODULE_2__.Grab();\n        for (const source of sources){\n            options.grab.load(source?.grab);\n        }\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-grab/./dist/browser/Grabber.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__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 */   drawGrab: () => (/* binding */ drawGrab),\n/* harmony export */   drawGrabLine: () => (/* binding */ drawGrabLine)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/canvas-utils */ \"@tsparticles/canvas-utils\");\n\n\nconst defaultWidth = 0;\nfunction drawGrabLine(context, width, begin, end, colorLine, opacity, hdr = false) {\n    (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_1__.drawLine)(context, begin, end);\n    context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(colorLine, hdr, opacity);\n    context.lineWidth = width;\n    context.stroke();\n}\nfunction drawGrab(container, particle, lineColor, opacity, mousePos) {\n    container.canvas.draw((ctx)=>{\n        const beginPos = particle.getPosition();\n        drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity, container.hdr);\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-grab/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawGrab: () => (/* binding */ drawGrab),\n/* harmony export */   drawGrabLine: () => (/* binding */ drawGrabLine)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/canvas-utils */ \"@tsparticles/canvas-utils\");\n\n\nconst defaultWidth = 0;\nfunction drawGrabLine(context, width, begin, end, colorLine, opacity, hdr = false) {\n    (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_1__.drawLine)(context, begin, end);\n    context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(colorLine, hdr, opacity);\n    context.lineWidth = width;\n    context.stroke();\n}\nfunction drawGrab(container, particle, lineColor, opacity, mousePos) {\n    container.canvas.render.draw((ctx)=>{\n        const beginPos = particle.getPosition();\n        drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity, container.hdr);\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-grab/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/esm/Grabber.js

@@ -1,14 +1,14 @@
-import { getDistance, getLinkColor, getLinkRandomColor, isInArray, } from "@tsparticles/engine";
 import { ExternalInteractorBase, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
+import { getDistance, getLinkColor, getLinkRandomColor, isInArray, } from "@tsparticles/engine";
 import { Grab } from "./Options/Classes/Grab.js";
 import { drawGrab } from "./Utils.js";
 const grabMode = "grab", minDistance = 0, minOpacity = 0;
 export class Grabber extends ExternalInteractorBase {
-    _engine;
     _maxDistance;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this._maxDistance = 0;
     }
     get maxDistance() {
@@ -52,7 +52,7 @@ export class Grabber extends ExternalInteractorBase {
             const optColor = grabLineOptions.color ?? particle.options.links?.color;
             if (!container.particles.grabLineColor && optColor) {
                 const linksOptions = interactivity.modes.grab.links;
-                container.particles.grabLineColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
+                container.particles.grabLineColor = getLinkRandomColor(this._pluginManager, optColor, linksOptions.blink, linksOptions.consent);
             }
             const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor);
             if (!colorLine) {

package/esm/Utils.js

@@ -8,7 +8,7 @@ export function drawGrabLine(context, width, begin, end, colorLine, opacity, hdr
     context.stroke();
 }
 export function drawGrab(container, particle, lineColor, opacity, mousePos) {
-    container.canvas.draw(ctx => {
+    container.canvas.render.draw(ctx => {
         const beginPos = particle.getPosition();
         drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity, container.hdr);
     });

package/esm/index.js

@@ -1,11 +1,11 @@
 export async function loadExternalGrabInteraction(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?.("externalGrab", async (container) => {
+        e.pluginManager.addInteractor?.("externalGrab", async (container) => {
             const { Grabber } = await import("./Grabber.js");
-            return new Grabber(container, engine);
+            return new Grabber(e.pluginManager, container);
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-external-grab",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles grab external interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -81,18 +81,22 @@
       "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/canvas-utils": "4.0.0-beta.0",
-    "@tsparticles/engine": "4.0.0-beta.0",
-    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
+  "peerDepdendencies": {
+    "@tsparticles/canvas-utils": "4.0.0-beta.1",
+    "@tsparticles/engine": "4.0.0-beta.1",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "type": "module"
+  "type": "module",
+  "peerDependencies": {
+    "@tsparticles/canvas-utils": "4.0.0-beta.10",
+    "@tsparticles/engine": "4.0.0-beta.10",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.10"
+  }
 }