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

package/50.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_connect=this.webpackChunk_tsparticles_interaction_external_connect||[]).push([[50],{50(t,e,i){i.d(e,{Connector:()=>s});var n=i(702),o=i(303),a=i(486),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.render.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,a){let r=Math.floor(n.getRadius()/i.getRadius()),s=i.getFillColor(),c=n.getFillColor();if(!s||!c)return;let l=i.getPosition(),d=n.getPosition(),u=(0,o.colorMix)(s,c,i.getRadius(),n.getRadius()),h=e.createLinearGradient(l.x,l.y,d.x,d.y);return h.addColorStop(0,(0,o.getStyleFromHsl)(s,t.hdr,a)),h.addColorStop((0,o.clamp)(r,0,1),(0,o.getStyleFromRgb)(u,t.hdr,a)),h.addColorStop(1,(0,o.getStyleFromHsl)(c,t.hdr,a)),h}(t,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

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

@@ -1,12 +1,12 @@
 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) {
+export function gradient(container, context, p1, p2, opacity) {
     const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
     if (!color1 || !color2) {
         return;
     }
-    const { container } = p1, sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
+    const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
     grad.addColorStop(gradientMin, getStyleFromHsl(color1, container.hdr, opacity));
     grad.addColorStop(clamp(gradStop, gradientMin, gradientMax), getStyleFromRgb(midRgb, container.hdr, opacity));
     grad.addColorStop(gradientMax, getStyleFromHsl(color2, container.hdr, opacity));
@@ -23,10 +23,10 @@ export function lineStyle(container, ctx, p1, p2) {
     if (!connectOptions) {
         return;
     }
-    return gradient(ctx, p1, p2, connectOptions.links.opacity);
+    return gradient(container, ctx, p1, p2, connectOptions.links.opacity);
 }
 export function drawConnection(container, p1, p2) {
-    container.canvas.draw(ctx => {
+    container.canvas.render.draw(ctx => {
         const ls = lineStyle(container, ctx, p1, p2);
         if (!ls) {
             return;

package/browser/index.js

@@ -1,9 +1,9 @@
 export async function loadExternalConnectInteraction(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?.("externalConnect", async (container) => {
+        e.pluginManager.addInteractor?.("externalConnect", async (container) => {
             const { Connector } = await import("./Connector.js");
             return new Connector(container);
         });

package/cjs/Utils.js

@@ -1,12 +1,12 @@
 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) {
+export function gradient(container, context, p1, p2, opacity) {
     const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
     if (!color1 || !color2) {
         return;
     }
-    const { container } = p1, sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
+    const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
     grad.addColorStop(gradientMin, getStyleFromHsl(color1, container.hdr, opacity));
     grad.addColorStop(clamp(gradStop, gradientMin, gradientMax), getStyleFromRgb(midRgb, container.hdr, opacity));
     grad.addColorStop(gradientMax, getStyleFromHsl(color2, container.hdr, opacity));
@@ -23,10 +23,10 @@ export function lineStyle(container, ctx, p1, p2) {
     if (!connectOptions) {
         return;
     }
-    return gradient(ctx, p1, p2, connectOptions.links.opacity);
+    return gradient(container, ctx, p1, p2, connectOptions.links.opacity);
 }
 export function drawConnection(container, p1, p2) {
-    container.canvas.draw(ctx => {
+    container.canvas.render.draw(ctx => {
         const ls = lineStyle(container, ctx, p1, p2);
         if (!ls) {
             return;

package/cjs/index.js

@@ -1,9 +1,9 @@
 export async function loadExternalConnectInteraction(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?.("externalConnect", async (container) => {
+        e.pluginManager.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-beta.0
+ * v4.0.0-beta.10
  */
 "use strict";
 /*
@@ -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/* 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}");
+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(container, 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 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(container, ctx, p1, p2, connectOptions.links.opacity);\n}\nfunction drawConnection(container, p1, p2) {\n    container.canvas.render.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/Utils.js

@@ -1,12 +1,12 @@
 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) {
+export function gradient(container, context, p1, p2, opacity) {
     const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
     if (!color1 || !color2) {
         return;
     }
-    const { container } = p1, sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
+    const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
     grad.addColorStop(gradientMin, getStyleFromHsl(color1, container.hdr, opacity));
     grad.addColorStop(clamp(gradStop, gradientMin, gradientMax), getStyleFromRgb(midRgb, container.hdr, opacity));
     grad.addColorStop(gradientMax, getStyleFromHsl(color2, container.hdr, opacity));
@@ -23,10 +23,10 @@ export function lineStyle(container, ctx, p1, p2) {
     if (!connectOptions) {
         return;
     }
-    return gradient(ctx, p1, p2, connectOptions.links.opacity);
+    return gradient(container, ctx, p1, p2, connectOptions.links.opacity);
 }
 export function drawConnection(container, p1, p2) {
-    container.canvas.draw(ctx => {
+    container.canvas.render.draw(ctx => {
         const ls = lineStyle(container, ctx, p1, p2);
         if (!ls) {
             return;

package/esm/index.js

@@ -1,9 +1,9 @@
 export async function loadExternalConnectInteraction(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?.("externalConnect", async (container) => {
+        e.pluginManager.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-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles connect 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"
+  }
 }