@tsparticles/interaction-external-connect 4.0.0-alpha.5 → 4.0.0-beta.0

package/866.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_connect=this.webpackChunk_tsparticles_interaction_external_connect||[]).push([[866],{866(t,e,i){i.d(e,{Connector:()=>s});var n=i(702),o=i(303),a=i(563),r=i(425);class s extends n.ExternalInteractorBase{_maxDistance;constructor(t){super(t),this._maxDistance=0}get maxDistance(){return this._maxDistance}clear(){}init(){let t=this.container,e=t.actualOptions.interactivity?.modes.connect;e&&(this._maxDistance=e.distance,t.retina.connectModeDistance=e.distance*t.retina.pixelRatio,t.retina.connectModeRadius=e.radius*t.retina.pixelRatio)}interact(t){let e=this.container,i=e.actualOptions;if(i.interactivity?.events.onHover.enable&&"pointermove"===t.status){let i=t.mouse.position,{connectModeDistance:n,connectModeRadius:a}=e.retina;if(!n||n<0||!a||a<0||!i)return;let s=Math.abs(a),c=e.particles.grid.queryCircle(i,s,e=>this.isEnabled(t,e));c.forEach((t,i)=>{let a=t.getPosition();for(let s of c.slice(i+1)){let i=s.getPosition(),c=Math.abs(n),l=Math.abs(a.x-i.x),d=Math.abs(a.y-i.y);l<c&&d<c&&function(t,e,i){t.canvas.draw(n=>{var a;let s=function(t,e,i,n){let a=t.actualOptions,r=a.interactivity?.modes.connect;if(r)return function(t,e,i,n){let a=Math.floor(i.getRadius()/e.getRadius()),r=e.getFillColor(),s=i.getFillColor();if(!r||!s)return;let{container:c}=e,l=e.getPosition(),d=i.getPosition(),u=(0,o.colorMix)(r,s,e.getRadius(),i.getRadius()),h=t.createLinearGradient(l.x,l.y,d.x,d.y);return h.addColorStop(0,(0,o.getStyleFromHsl)(r,c.hdr,n)),h.addColorStop((0,o.clamp)(a,0,1),(0,o.getStyleFromRgb)(u,c.hdr,n)),h.addColorStop(1,(0,o.getStyleFromHsl)(s,c.hdr,n)),h}(e,i,n,r.links.opacity)}(t,n,e,i);if(!s)return;let c=e.getPosition(),l=i.getPosition();a=e.retina.linksWidth??0,(0,r.drawLine)(n,c,l),n.lineWidth=a,n.strokeStyle=s,n.stroke()})}(e,t,s)}})}}isEnabled(t,e){let i=this.container,n=t.mouse,a=(e?.interactivity??i.actualOptions.interactivity)?.events;return!!(a?.onHover.enable&&n.position)&&(0,o.isInArray)("connect",a.onHover.mode)}loadModeOptions(t,...e){for(let i of(t.connect??=new a.d,e))t.connect.load(i?.connect)}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 loadExternalConnectInteraction(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 { loadExternalConnectInteraction } = require("@tsparticles/interaction-external-connect");
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadExternalConnectInteraction(tsParticles);
 })();
 ```
@@ -68,9 +71,11 @@ or
 
 ```javascript
 import { tsParticles } from "@tsparticles/engine";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
 import { loadExternalConnectInteraction } from "@tsparticles/interaction-external-connect";
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadExternalConnectInteraction(tsParticles);
 })();
 ```

package/browser/Connector.js

@@ -4,8 +4,13 @@ import { Connect } from "./Options/Classes/Connect.js";
 import { drawConnection } from "./Utils.js";
 const connectMode = "connect", minDistance = 0;
 export class Connector extends ExternalInteractorBase {
+    _maxDistance;
     constructor(container) {
         super(container);
+        this._maxDistance = 0;
+    }
+    get maxDistance() {
+        return this._maxDistance;
     }
     clear() {
     }
@@ -14,6 +19,7 @@ export class Connector extends ExternalInteractorBase {
         if (!connect) {
             return;
         }
+        this._maxDistance = connect.distance;
         container.retina.connectModeDistance = connect.distance * container.retina.pixelRatio;
         container.retina.connectModeRadius = connect.radius * container.retina.pixelRatio;
     }
@@ -28,7 +34,7 @@ export class Connector extends ExternalInteractorBase {
                 !mousePos) {
                 return;
             }
-            const distance = Math.abs(connectModeRadius), query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
+            const distance = Math.abs(connectModeRadius), query = container.particles.grid.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
             query.forEach((p1, i) => {
                 const pos1 = p1.getPosition(), indexOffset = 1;
                 for (const p2 of query.slice(i + indexOffset)) {

package/browser/Options/Classes/Connect.js

@@ -1,6 +1,9 @@
 import { isNull } from "@tsparticles/engine";
 import { ConnectLinks } from "./ConnectLinks.js";
 export class Connect {
+    distance;
+    links;
+    radius;
     constructor() {
         this.distance = 80;
         this.links = new ConnectLinks();

package/browser/Options/Classes/ConnectLinks.js

@@ -1,5 +1,6 @@
 import { isNull } from "@tsparticles/engine";
 export class ConnectLinks {
+    opacity;
     constructor() {
         this.opacity = 0.5;
     }

package/browser/Utils.js

@@ -1,4 +1,5 @@
-import { clamp, colorMix, drawLine, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
+import { clamp, colorMix, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
+import { drawLine } from "@tsparticles/canvas-utils";
 const gradientMin = 0, gradientMax = 1, defaultLinksWidth = 0;
 export function gradient(context, p1, p2, opacity) {
     const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();

package/browser/index.js

@@ -1,8 +1,8 @@
 export async function loadExternalConnectInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
         e.addInteractor?.("externalConnect", async (container) => {
             const { Connector } = await import("./Connector.js");
             return new Connector(container);

package/cjs/Connector.js

@@ -4,8 +4,13 @@ import { Connect } from "./Options/Classes/Connect.js";
 import { drawConnection } from "./Utils.js";
 const connectMode = "connect", minDistance = 0;
 export class Connector extends ExternalInteractorBase {
+    _maxDistance;
     constructor(container) {
         super(container);
+        this._maxDistance = 0;
+    }
+    get maxDistance() {
+        return this._maxDistance;
     }
     clear() {
     }
@@ -14,6 +19,7 @@ export class Connector extends ExternalInteractorBase {
         if (!connect) {
             return;
         }
+        this._maxDistance = connect.distance;
         container.retina.connectModeDistance = connect.distance * container.retina.pixelRatio;
         container.retina.connectModeRadius = connect.radius * container.retina.pixelRatio;
     }
@@ -28,7 +34,7 @@ export class Connector extends ExternalInteractorBase {
                 !mousePos) {
                 return;
             }
-            const distance = Math.abs(connectModeRadius), query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
+            const distance = Math.abs(connectModeRadius), query = container.particles.grid.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
             query.forEach((p1, i) => {
                 const pos1 = p1.getPosition(), indexOffset = 1;
                 for (const p2 of query.slice(i + indexOffset)) {

package/cjs/Options/Classes/Connect.js

@@ -1,6 +1,9 @@
 import { isNull } from "@tsparticles/engine";
 import { ConnectLinks } from "./ConnectLinks.js";
 export class Connect {
+    distance;
+    links;
+    radius;
     constructor() {
         this.distance = 80;
         this.links = new ConnectLinks();

package/cjs/Options/Classes/ConnectLinks.js

@@ -1,5 +1,6 @@
 import { isNull } from "@tsparticles/engine";
 export class ConnectLinks {
+    opacity;
     constructor() {
         this.opacity = 0.5;
     }

package/cjs/Utils.js

@@ -1,4 +1,5 @@
-import { clamp, colorMix, drawLine, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
+import { clamp, colorMix, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
+import { drawLine } from "@tsparticles/canvas-utils";
 const gradientMin = 0, gradientMax = 1, defaultLinksWidth = 0;
 export function gradient(context, p1, p2, opacity) {
     const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();

package/cjs/index.js

@@ -1,8 +1,8 @@
 export async function loadExternalConnectInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
         e.addInteractor?.("externalConnect", async (container) => {
             const { Connector } = await import("./Connector.js");
             return new Connector(container);

package/dist_browser_Connector_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.5
+ * v4.0.0-beta.0
  */
 "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 */   Connector: () => (/* binding */ Connector)\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_Connect_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Connect.js */ \"./dist/browser/Options/Classes/Connect.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\nconst connectMode = \"connect\",\n  minDistance = 0;\nclass Connector extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n  constructor(container) {\n    super(container);\n  }\n  clear() {}\n  init() {\n    const container = this.container,\n      connect = container.actualOptions.interactivity?.modes.connect;\n    if (!connect) {\n      return;\n    }\n    container.retina.connectModeDistance = connect.distance * container.retina.pixelRatio;\n    container.retina.connectModeRadius = connect.radius * container.retina.pixelRatio;\n  }\n  interact(interactivityData) {\n    const container = this.container,\n      options = container.actualOptions;\n    if (options.interactivity?.events.onHover.enable && interactivityData.status === \"pointermove\") {\n      const mousePos = interactivityData.mouse.position,\n        {\n          connectModeDistance,\n          connectModeRadius\n        } = container.retina;\n      if (!connectModeDistance || connectModeDistance < minDistance || !connectModeRadius || connectModeRadius < minDistance || !mousePos) {\n        return;\n      }\n      const distance = Math.abs(connectModeRadius),\n        query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));\n      query.forEach((p1, i) => {\n        const pos1 = p1.getPosition(),\n          indexOffset = 1;\n        for (const p2 of query.slice(i + indexOffset)) {\n          const pos2 = p2.getPosition(),\n            distMax = Math.abs(connectModeDistance),\n            xDiff = Math.abs(pos1.x - pos2.x),\n            yDiff = Math.abs(pos1.y - pos2.y);\n          if (xDiff < distMax && yDiff < distMax) {\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_3__.drawConnection)(container, p1, p2);\n          }\n        }\n      });\n    }\n  }\n  isEnabled(interactivityData, particle) {\n    const container = this.container,\n      mouse = interactivityData.mouse,\n      events = (particle?.interactivity ?? container.actualOptions.interactivity)?.events;\n    if (!(events?.onHover.enable && mouse.position)) {\n      return false;\n    }\n    return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(connectMode, events.onHover.mode);\n  }\n  loadModeOptions(options, ...sources) {\n    options.connect ??= new _Options_Classes_Connect_js__WEBPACK_IMPORTED_MODULE_2__.Connect();\n    for (const source of sources) {\n      options.connect.load(source?.connect);\n    }\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-connect/./dist/browser/Connector.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Connector: () => (/* binding */ Connector)\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_Connect_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Connect.js */ \"./dist/browser/Options/Classes/Connect.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\nconst connectMode = \"connect\", minDistance = 0;\nclass Connector 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, connect = container.actualOptions.interactivity?.modes.connect;\n        if (!connect) {\n            return;\n        }\n        this._maxDistance = connect.distance;\n        container.retina.connectModeDistance = connect.distance * container.retina.pixelRatio;\n        container.retina.connectModeRadius = connect.radius * container.retina.pixelRatio;\n    }\n    interact(interactivityData) {\n        const container = this.container, options = container.actualOptions;\n        if (options.interactivity?.events.onHover.enable && interactivityData.status === \"pointermove\") {\n            const mousePos = interactivityData.mouse.position, { connectModeDistance, connectModeRadius } = container.retina;\n            if (!connectModeDistance || connectModeDistance < minDistance || !connectModeRadius || connectModeRadius < minDistance || !mousePos) {\n                return;\n            }\n            const distance = Math.abs(connectModeRadius), query = container.particles.grid.queryCircle(mousePos, distance, (p)=>this.isEnabled(interactivityData, p));\n            query.forEach((p1, i)=>{\n                const pos1 = p1.getPosition(), indexOffset = 1;\n                for (const p2 of query.slice(i + indexOffset)){\n                    const pos2 = p2.getPosition(), distMax = Math.abs(connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);\n                    if (xDiff < distMax && yDiff < distMax) {\n                        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_3__.drawConnection)(container, p1, p2);\n                    }\n                }\n            });\n        }\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, mouse = interactivityData.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity)?.events;\n        if (!(events?.onHover.enable && mouse.position)) {\n            return false;\n        }\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(connectMode, events.onHover.mode);\n    }\n    loadModeOptions(options, ...sources) {\n        options.connect ??= new _Options_Classes_Connect_js__WEBPACK_IMPORTED_MODULE_2__.Connect();\n        for (const source of sources){\n            options.connect.load(source?.connect);\n        }\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-connect/./dist/browser/Connector.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 */   drawConnectLine: () => (/* binding */ drawConnectLine),\n/* harmony export */   drawConnection: () => (/* binding */ drawConnection),\n/* harmony export */   gradient: () => (/* binding */ gradient),\n/* harmony export */   lineStyle: () => (/* binding */ lineStyle)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst gradientMin = 0,\n  gradientMax = 1,\n  defaultLinksWidth = 0;\nfunction gradient(context, p1, p2, opacity) {\n  const gradStop = Math.floor(p2.getRadius() / p1.getRadius()),\n    color1 = p1.getFillColor(),\n    color2 = p2.getFillColor();\n  if (!color1 || !color2) {\n    return;\n  }\n  const {\n      container\n    } = p1,\n    sourcePos = p1.getPosition(),\n    destPos = p2.getPosition(),\n    midRgb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.colorMix)(color1, color2, p1.getRadius(), p2.getRadius()),\n    grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);\n  grad.addColorStop(gradientMin, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(color1, container.hdr, opacity));\n  grad.addColorStop((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clamp)(gradStop, gradientMin, gradientMax), (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(midRgb, container.hdr, opacity));\n  grad.addColorStop(gradientMax, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(color2, container.hdr, opacity));\n  return grad;\n}\nfunction drawConnectLine(context, width, lineStyle, begin, end) {\n  (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, begin, end);\n  context.lineWidth = width;\n  context.strokeStyle = lineStyle;\n  context.stroke();\n}\nfunction lineStyle(container, ctx, p1, p2) {\n  const options = container.actualOptions,\n    connectOptions = options.interactivity?.modes.connect;\n  if (!connectOptions) {\n    return;\n  }\n  return gradient(ctx, p1, p2, connectOptions.links.opacity);\n}\nfunction drawConnection(container, p1, p2) {\n  container.canvas.draw(ctx => {\n    const ls = lineStyle(container, ctx, p1, p2);\n    if (!ls) {\n      return;\n    }\n    const pos1 = p1.getPosition(),\n      pos2 = p2.getPosition();\n    drawConnectLine(ctx, p1.retina.linksWidth ?? defaultLinksWidth, ls, pos1, pos2);\n  });\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-connect/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawConnectLine: () => (/* binding */ drawConnectLine),\n/* harmony export */   drawConnection: () => (/* binding */ drawConnection),\n/* harmony export */   gradient: () => (/* binding */ gradient),\n/* harmony export */   lineStyle: () => (/* binding */ lineStyle)\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 gradientMin = 0, gradientMax = 1, defaultLinksWidth = 0;\nfunction gradient(context, p1, p2, opacity) {\n    const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();\n    if (!color1 || !color2) {\n        return;\n    }\n    const { container } = p1, sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.colorMix)(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);\n    grad.addColorStop(gradientMin, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(color1, container.hdr, opacity));\n    grad.addColorStop((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.clamp)(gradStop, gradientMin, gradientMax), (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(midRgb, container.hdr, opacity));\n    grad.addColorStop(gradientMax, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(color2, container.hdr, opacity));\n    return grad;\n}\nfunction drawConnectLine(context, width, lineStyle, begin, end) {\n    (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_1__.drawLine)(context, begin, end);\n    context.lineWidth = width;\n    context.strokeStyle = lineStyle;\n    context.stroke();\n}\nfunction lineStyle(container, ctx, p1, p2) {\n    const options = container.actualOptions, connectOptions = options.interactivity?.modes.connect;\n    if (!connectOptions) {\n        return;\n    }\n    return gradient(ctx, p1, p2, connectOptions.links.opacity);\n}\nfunction drawConnection(container, p1, p2) {\n    container.canvas.draw((ctx)=>{\n        const ls = lineStyle(container, ctx, p1, p2);\n        if (!ls) {\n            return;\n        }\n        const pos1 = p1.getPosition(), pos2 = p2.getPosition();\n        drawConnectLine(ctx, p1.retina.linksWidth ?? defaultLinksWidth, ls, pos1, pos2);\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-connect/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/esm/Connector.js

@@ -4,8 +4,13 @@ import { Connect } from "./Options/Classes/Connect.js";
 import { drawConnection } from "./Utils.js";
 const connectMode = "connect", minDistance = 0;
 export class Connector extends ExternalInteractorBase {
+    _maxDistance;
     constructor(container) {
         super(container);
+        this._maxDistance = 0;
+    }
+    get maxDistance() {
+        return this._maxDistance;
     }
     clear() {
     }
@@ -14,6 +19,7 @@ export class Connector extends ExternalInteractorBase {
         if (!connect) {
             return;
         }
+        this._maxDistance = connect.distance;
         container.retina.connectModeDistance = connect.distance * container.retina.pixelRatio;
         container.retina.connectModeRadius = connect.radius * container.retina.pixelRatio;
     }
@@ -28,7 +34,7 @@ export class Connector extends ExternalInteractorBase {
                 !mousePos) {
                 return;
             }
-            const distance = Math.abs(connectModeRadius), query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
+            const distance = Math.abs(connectModeRadius), query = container.particles.grid.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
             query.forEach((p1, i) => {
                 const pos1 = p1.getPosition(), indexOffset = 1;
                 for (const p2 of query.slice(i + indexOffset)) {

package/esm/Options/Classes/Connect.js

@@ -1,6 +1,9 @@
 import { isNull } from "@tsparticles/engine";
 import { ConnectLinks } from "./ConnectLinks.js";
 export class Connect {
+    distance;
+    links;
+    radius;
     constructor() {
         this.distance = 80;
         this.links = new ConnectLinks();

package/esm/Options/Classes/ConnectLinks.js

@@ -1,5 +1,6 @@
 import { isNull } from "@tsparticles/engine";
 export class ConnectLinks {
+    opacity;
     constructor() {
         this.opacity = 0.5;
     }

package/esm/Utils.js

@@ -1,4 +1,5 @@
-import { clamp, colorMix, drawLine, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
+import { clamp, colorMix, getStyleFromHsl, getStyleFromRgb, } from "@tsparticles/engine";
+import { drawLine } from "@tsparticles/canvas-utils";
 const gradientMin = 0, gradientMax = 1, defaultLinksWidth = 0;
 export function gradient(context, p1, p2, opacity) {
     const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();

package/esm/index.js

@@ -1,8 +1,8 @@
 export async function loadExternalConnectInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
         e.addInteractor?.("externalConnect", async (container) => {
             const { Connector } = await import("./Connector.js");
             return new Connector(container);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-external-connect",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-beta.0",
   "description": "tsParticles connect external interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -87,8 +87,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.5",
-    "@tsparticles/plugin-interactivity": "4.0.0-alpha.5"
+    "@tsparticles/canvas-utils": "4.0.0-beta.0",
+    "@tsparticles/engine": "4.0.0-beta.0",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"