@tsparticles/interaction-particles-links 3.6.0 → 3.7.0

package/browser/LinkInstance.js

@@ -2,20 +2,19 @@ import { getDistance, getLinkColor, getRandom, getRangeValue, rangeColorToRgb, }
 import { drawLinkLine, drawLinkTriangle, setLinkFrequency } from "./Utils.js";
 const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5, maxFrequency = 1;
 export class LinkInstance {
-    constructor(container) {
-        this.container = container;
+    constructor(container, engine) {
         this._drawLinkLine = (p1, link) => {
             const p1LinksOptions = p1.options.links;
             if (!p1LinksOptions?.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+            const container = this._container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
             let opacity = link.opacity;
             container.canvas.draw(ctx => {
                 let colorLine;
                 const twinkle = p1.options.twinkle?.lines;
                 if (twinkle?.enable) {
-                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(twinkle.color), twinkling = getRandom() < twinkleFreq;
+                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(this._engine, twinkle.color), twinkling = getRandom() < twinkleFreq;
                     if (twinkling && twinkleRgb) {
                         colorLine = twinkleRgb;
                         opacity = getRangeValue(twinkle.opacity);
@@ -36,6 +35,7 @@ export class LinkInstance {
                     width,
                     begin: pos1,
                     end: pos2,
+                    engine: this._engine,
                     maxDistance,
                     canvasSize: container.canvas.size,
                     links: p1LinksOptions,
@@ -54,7 +54,7 @@ export class LinkInstance {
             if (!triangleOptions.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+            const container = this._container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
             if (opacityTriangle <= minOpacity) {
                 return;
             }
@@ -65,7 +65,7 @@ export class LinkInstance {
                     getDistance(pos3, pos1) > linksDistance) {
                     return;
                 }
-                let colorTriangle = rangeColorToRgb(triangleOptions.color);
+                let colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color);
                 if (!colorTriangle) {
                     const linkColor = linksOptions.id !== undefined
                         ? container.particles.linksColors.get(linksOptions.id)
@@ -114,6 +114,8 @@ export class LinkInstance {
         this._getTriangleFrequency = (p1, p2, p3) => {
             return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
         };
+        this._container = container;
+        this._engine = engine;
         this._freqs = {
             links: new Map(),
             triangles: new Map(),
@@ -144,7 +146,7 @@ export class LinkInstance {
         if (!particle.options.links) {
             return;
         }
-        const ratio = this.container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
+        const ratio = this._container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
         retina.linksDistance = distance * ratio;
         retina.linksWidth = width * ratio;
     }

package/browser/Linker.js

@@ -20,13 +20,13 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
     return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 export class Linker extends ParticlesInteractorBase {
-    constructor(container) {
+    constructor(container, engine) {
         super(container);
         this._setColor = p1 => {
             if (!p1.options.links) {
                 return;
             }
-            const container = this.linkContainer, linksOptions = p1.options.links;
+            const container = this._linkContainer, linksOptions = p1.options.links;
             let linkColor = linksOptions.id === undefined
                 ? container.particles.linksColor
                 : container.particles.linksColors.get(linksOptions.id);
@@ -34,7 +34,7 @@ export class Linker extends ParticlesInteractorBase {
                 return;
             }
             const optColor = linksOptions.color;
-            linkColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
+            linkColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
             if (linksOptions.id === undefined) {
                 container.particles.linksColor = linkColor;
             }
@@ -42,13 +42,14 @@ export class Linker extends ParticlesInteractorBase {
                 container.particles.linksColors.set(linksOptions.id, linkColor);
             }
         };
-        this.linkContainer = container;
+        this._linkContainer = container;
+        this._engine = engine;
     }
     clear() {
     }
     init() {
-        this.linkContainer.particles.linksColor = undefined;
-        this.linkContainer.particles.linksColors = new Map();
+        this._linkContainer.particles.linksColor = undefined;
+        this._linkContainer.particles.linksColors = new Map();
     }
     interact(p1) {
         if (!p1.options.links) {

package/browser/LinksPlugin.js

@@ -1,10 +1,11 @@
 import { LinkInstance } from "./LinkInstance.js";
 export class LinksPlugin {
-    constructor() {
+    constructor(engine) {
         this.id = "links";
+        this._engine = engine;
     }
     getPlugin(container) {
-        return Promise.resolve(new LinkInstance(container));
+        return Promise.resolve(new LinkInstance(container, this._engine));
     }
     loadOptions() {
     }

package/browser/Utils.js

@@ -8,7 +8,7 @@ export function drawTriangle(context, p1, p2, p3) {
 }
 export function drawLinkLine(params) {
     let drawn = false;
-    const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
+    const { begin, end, engine, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
     if (getDistance(begin, end) <= maxDistance) {
         drawLine(context, begin, end);
         drawn = true;
@@ -68,7 +68,7 @@ export function drawLinkLine(params) {
     context.strokeStyle = getStyleFromRgb(colorLine, opacity);
     const { shadow } = links;
     if (shadow.enable) {
-        const shadowColor = rangeColorToRgb(shadow.color);
+        const shadowColor = rangeColorToRgb(engine, shadow.color);
         if (shadowColor) {
             context.shadowBlur = shadow.blur;
             context.shadowColor = getStyleFromRgb(shadowColor);

package/browser/index.js

@@ -1,6 +1,8 @@
+import { assertValidVersion } from "@tsparticles/engine";
 import { loadLinksInteraction } from "./interaction.js";
 import { loadLinksPlugin } from "./plugin.js";
 export async function loadParticlesLinksInteraction(engine, refresh = true) {
+    assertValidVersion(engine, "3.7.0");
     await loadLinksInteraction(engine, refresh);
     await loadLinksPlugin(engine, refresh);
 }

package/browser/interaction.js

@@ -1,6 +1,6 @@
 import { Linker } from "./Linker.js";
 export async function loadLinksInteraction(engine, refresh = true) {
     await engine.addInteractor("particlesLinks", async (container) => {
-        return Promise.resolve(new Linker(container));
+        return Promise.resolve(new Linker(container, engine));
     }, refresh);
 }

package/browser/plugin.js

@@ -1,5 +1,5 @@
 import { LinksPlugin } from "./LinksPlugin.js";
 export async function loadLinksPlugin(engine, refresh = true) {
-    const plugin = new LinksPlugin();
+    const plugin = new LinksPlugin(engine);
     await engine.addPlugin(plugin, refresh);
 }

package/cjs/LinkInstance.js

@@ -5,20 +5,19 @@ const engine_1 = require("@tsparticles/engine");
 const Utils_js_1 = require("./Utils.js");
 const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5, maxFrequency = 1;
 class LinkInstance {
-    constructor(container) {
-        this.container = container;
+    constructor(container, engine) {
         this._drawLinkLine = (p1, link) => {
             const p1LinksOptions = p1.options.links;
             if (!p1LinksOptions?.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+            const container = this._container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
             let opacity = link.opacity;
             container.canvas.draw(ctx => {
                 let colorLine;
                 const twinkle = p1.options.twinkle?.lines;
                 if (twinkle?.enable) {
-                    const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
+                    const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(this._engine, twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
                     if (twinkling && twinkleRgb) {
                         colorLine = twinkleRgb;
                         opacity = (0, engine_1.getRangeValue)(twinkle.opacity);
@@ -39,6 +38,7 @@ class LinkInstance {
                     width,
                     begin: pos1,
                     end: pos2,
+                    engine: this._engine,
                     maxDistance,
                     canvasSize: container.canvas.size,
                     links: p1LinksOptions,
@@ -57,7 +57,7 @@ class LinkInstance {
             if (!triangleOptions.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+            const container = this._container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
             if (opacityTriangle <= minOpacity) {
                 return;
             }
@@ -68,7 +68,7 @@ class LinkInstance {
                     (0, engine_1.getDistance)(pos3, pos1) > linksDistance) {
                     return;
                 }
-                let colorTriangle = (0, engine_1.rangeColorToRgb)(triangleOptions.color);
+                let colorTriangle = (0, engine_1.rangeColorToRgb)(this._engine, triangleOptions.color);
                 if (!colorTriangle) {
                     const linkColor = linksOptions.id !== undefined
                         ? container.particles.linksColors.get(linksOptions.id)
@@ -117,6 +117,8 @@ class LinkInstance {
         this._getTriangleFrequency = (p1, p2, p3) => {
             return (0, Utils_js_1.setLinkFrequency)([p1, p2, p3], this._freqs.triangles);
         };
+        this._container = container;
+        this._engine = engine;
         this._freqs = {
             links: new Map(),
             triangles: new Map(),
@@ -147,7 +149,7 @@ class LinkInstance {
         if (!particle.options.links) {
             return;
         }
-        const ratio = this.container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
+        const ratio = this._container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
         retina.linksDistance = distance * ratio;
         retina.linksWidth = width * ratio;
     }

package/cjs/Linker.js

@@ -23,13 +23,13 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
     return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 class Linker extends engine_1.ParticlesInteractorBase {
-    constructor(container) {
+    constructor(container, engine) {
         super(container);
         this._setColor = p1 => {
             if (!p1.options.links) {
                 return;
             }
-            const container = this.linkContainer, linksOptions = p1.options.links;
+            const container = this._linkContainer, linksOptions = p1.options.links;
             let linkColor = linksOptions.id === undefined
                 ? container.particles.linksColor
                 : container.particles.linksColors.get(linksOptions.id);
@@ -37,7 +37,7 @@ class Linker extends engine_1.ParticlesInteractorBase {
                 return;
             }
             const optColor = linksOptions.color;
-            linkColor = (0, engine_1.getLinkRandomColor)(optColor, linksOptions.blink, linksOptions.consent);
+            linkColor = (0, engine_1.getLinkRandomColor)(this._engine, optColor, linksOptions.blink, linksOptions.consent);
             if (linksOptions.id === undefined) {
                 container.particles.linksColor = linkColor;
             }
@@ -45,13 +45,14 @@ class Linker extends engine_1.ParticlesInteractorBase {
                 container.particles.linksColors.set(linksOptions.id, linkColor);
             }
         };
-        this.linkContainer = container;
+        this._linkContainer = container;
+        this._engine = engine;
     }
     clear() {
     }
     init() {
-        this.linkContainer.particles.linksColor = undefined;
-        this.linkContainer.particles.linksColors = new Map();
+        this._linkContainer.particles.linksColor = undefined;
+        this._linkContainer.particles.linksColors = new Map();
     }
     interact(p1) {
         if (!p1.options.links) {

package/cjs/LinksPlugin.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinksPlugin = void 0;
 const LinkInstance_js_1 = require("./LinkInstance.js");
 class LinksPlugin {
-    constructor() {
+    constructor(engine) {
         this.id = "links";
+        this._engine = engine;
     }
     getPlugin(container) {
-        return Promise.resolve(new LinkInstance_js_1.LinkInstance(container));
+        return Promise.resolve(new LinkInstance_js_1.LinkInstance(container, this._engine));
     }
     loadOptions() {
     }

package/cjs/Utils.js

@@ -15,7 +15,7 @@ function drawTriangle(context, p1, p2, p3) {
 }
 function drawLinkLine(params) {
     let drawn = false;
-    const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
+    const { begin, end, engine, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
     if ((0, engine_1.getDistance)(begin, end) <= maxDistance) {
         (0, engine_1.drawLine)(context, begin, end);
         drawn = true;
@@ -75,7 +75,7 @@ function drawLinkLine(params) {
     context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, opacity);
     const { shadow } = links;
     if (shadow.enable) {
-        const shadowColor = (0, engine_1.rangeColorToRgb)(shadow.color);
+        const shadowColor = (0, engine_1.rangeColorToRgb)(engine, shadow.color);
         if (shadowColor) {
             context.shadowBlur = shadow.blur;
             context.shadowColor = (0, engine_1.getStyleFromRgb)(shadowColor);

package/cjs/index.js

@@ -15,9 +15,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadParticlesLinksInteraction = loadParticlesLinksInteraction;
+const engine_1 = require("@tsparticles/engine");
 const interaction_js_1 = require("./interaction.js");
 const plugin_js_1 = require("./plugin.js");
 async function loadParticlesLinksInteraction(engine, refresh = true) {
+    (0, engine_1.assertValidVersion)(engine, "3.7.0");
     await (0, interaction_js_1.loadLinksInteraction)(engine, refresh);
     await (0, plugin_js_1.loadLinksPlugin)(engine, refresh);
 }

package/cjs/interaction.js

@@ -4,6 +4,6 @@ exports.loadLinksInteraction = loadLinksInteraction;
 const Linker_js_1 = require("./Linker.js");
 async function loadLinksInteraction(engine, refresh = true) {
     await engine.addInteractor("particlesLinks", async (container) => {
-        return Promise.resolve(new Linker_js_1.Linker(container));
+        return Promise.resolve(new Linker_js_1.Linker(container, engine));
     }, refresh);
 }

package/cjs/plugin.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadLinksPlugin = loadLinksPlugin;
 const LinksPlugin_js_1 = require("./LinksPlugin.js");
 async function loadLinksPlugin(engine, refresh = true) {
-    const plugin = new LinksPlugin_js_1.LinksPlugin();
+    const plugin = new LinksPlugin_js_1.LinksPlugin(engine);
     await engine.addPlugin(plugin, refresh);
 }

package/esm/LinkInstance.js

@@ -2,20 +2,19 @@ import { getDistance, getLinkColor, getRandom, getRangeValue, rangeColorToRgb, }
 import { drawLinkLine, drawLinkTriangle, setLinkFrequency } from "./Utils.js";
 const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5, maxFrequency = 1;
 export class LinkInstance {
-    constructor(container) {
-        this.container = container;
+    constructor(container, engine) {
         this._drawLinkLine = (p1, link) => {
             const p1LinksOptions = p1.options.links;
             if (!p1LinksOptions?.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+            const container = this._container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
             let opacity = link.opacity;
             container.canvas.draw(ctx => {
                 let colorLine;
                 const twinkle = p1.options.twinkle?.lines;
                 if (twinkle?.enable) {
-                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(twinkle.color), twinkling = getRandom() < twinkleFreq;
+                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(this._engine, twinkle.color), twinkling = getRandom() < twinkleFreq;
                     if (twinkling && twinkleRgb) {
                         colorLine = twinkleRgb;
                         opacity = getRangeValue(twinkle.opacity);
@@ -36,6 +35,7 @@ export class LinkInstance {
                     width,
                     begin: pos1,
                     end: pos2,
+                    engine: this._engine,
                     maxDistance,
                     canvasSize: container.canvas.size,
                     links: p1LinksOptions,
@@ -54,7 +54,7 @@ export class LinkInstance {
             if (!triangleOptions.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+            const container = this._container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
             if (opacityTriangle <= minOpacity) {
                 return;
             }
@@ -65,7 +65,7 @@ export class LinkInstance {
                     getDistance(pos3, pos1) > linksDistance) {
                     return;
                 }
-                let colorTriangle = rangeColorToRgb(triangleOptions.color);
+                let colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color);
                 if (!colorTriangle) {
                     const linkColor = linksOptions.id !== undefined
                         ? container.particles.linksColors.get(linksOptions.id)
@@ -114,6 +114,8 @@ export class LinkInstance {
         this._getTriangleFrequency = (p1, p2, p3) => {
             return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
         };
+        this._container = container;
+        this._engine = engine;
         this._freqs = {
             links: new Map(),
             triangles: new Map(),
@@ -144,7 +146,7 @@ export class LinkInstance {
         if (!particle.options.links) {
             return;
         }
-        const ratio = this.container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
+        const ratio = this._container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
         retina.linksDistance = distance * ratio;
         retina.linksWidth = width * ratio;
     }

package/esm/Linker.js

@@ -20,13 +20,13 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
     return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 export class Linker extends ParticlesInteractorBase {
-    constructor(container) {
+    constructor(container, engine) {
         super(container);
         this._setColor = p1 => {
             if (!p1.options.links) {
                 return;
             }
-            const container = this.linkContainer, linksOptions = p1.options.links;
+            const container = this._linkContainer, linksOptions = p1.options.links;
             let linkColor = linksOptions.id === undefined
                 ? container.particles.linksColor
                 : container.particles.linksColors.get(linksOptions.id);
@@ -34,7 +34,7 @@ export class Linker extends ParticlesInteractorBase {
                 return;
             }
             const optColor = linksOptions.color;
-            linkColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
+            linkColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
             if (linksOptions.id === undefined) {
                 container.particles.linksColor = linkColor;
             }
@@ -42,13 +42,14 @@ export class Linker extends ParticlesInteractorBase {
                 container.particles.linksColors.set(linksOptions.id, linkColor);
             }
         };
-        this.linkContainer = container;
+        this._linkContainer = container;
+        this._engine = engine;
     }
     clear() {
     }
     init() {
-        this.linkContainer.particles.linksColor = undefined;
-        this.linkContainer.particles.linksColors = new Map();
+        this._linkContainer.particles.linksColor = undefined;
+        this._linkContainer.particles.linksColors = new Map();
     }
     interact(p1) {
         if (!p1.options.links) {

package/esm/LinksPlugin.js

@@ -1,10 +1,11 @@
 import { LinkInstance } from "./LinkInstance.js";
 export class LinksPlugin {
-    constructor() {
+    constructor(engine) {
         this.id = "links";
+        this._engine = engine;
     }
     getPlugin(container) {
-        return Promise.resolve(new LinkInstance(container));
+        return Promise.resolve(new LinkInstance(container, this._engine));
     }
     loadOptions() {
     }

package/esm/Utils.js

@@ -8,7 +8,7 @@ export function drawTriangle(context, p1, p2, p3) {
 }
 export function drawLinkLine(params) {
     let drawn = false;
-    const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
+    const { begin, end, engine, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
     if (getDistance(begin, end) <= maxDistance) {
         drawLine(context, begin, end);
         drawn = true;
@@ -68,7 +68,7 @@ export function drawLinkLine(params) {
     context.strokeStyle = getStyleFromRgb(colorLine, opacity);
     const { shadow } = links;
     if (shadow.enable) {
-        const shadowColor = rangeColorToRgb(shadow.color);
+        const shadowColor = rangeColorToRgb(engine, shadow.color);
         if (shadowColor) {
             context.shadowBlur = shadow.blur;
             context.shadowColor = getStyleFromRgb(shadowColor);

package/esm/index.js

@@ -1,6 +1,8 @@
+import { assertValidVersion } from "@tsparticles/engine";
 import { loadLinksInteraction } from "./interaction.js";
 import { loadLinksPlugin } from "./plugin.js";
 export async function loadParticlesLinksInteraction(engine, refresh = true) {
+    assertValidVersion(engine, "3.7.0");
     await loadLinksInteraction(engine, refresh);
     await loadLinksPlugin(engine, refresh);
 }

package/esm/interaction.js

@@ -1,6 +1,6 @@
 import { Linker } from "./Linker.js";
 export async function loadLinksInteraction(engine, refresh = true) {
     await engine.addInteractor("particlesLinks", async (container) => {
-        return Promise.resolve(new Linker(container));
+        return Promise.resolve(new Linker(container, engine));
     }, refresh);
 }

package/esm/plugin.js

@@ -1,5 +1,5 @@
 import { LinksPlugin } from "./LinksPlugin.js";
 export async function loadLinksPlugin(engine, refresh = true) {
-    const plugin = new LinksPlugin();
+    const plugin = new LinksPlugin(engine);
     await engine.addPlugin(plugin, refresh);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-particles-links",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "tsParticles links particles interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -87,7 +87,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.6.0"
+    "@tsparticles/engine": "3.7.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/interaction-particles-links [18 Nov 2024 at 23:52]</title>
+    <title>@tsparticles/interaction-particles-links [24 Nov 2024 at 19:20]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>

package/tsparticles.interaction.particles.links.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
- * v3.6.0
+ * v3.7.0
  */
 /*
  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
@@ -44,7 +44,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinkInstance: () => (/* binding */ LinkInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst minOpacity = 0,\n  minWidth = 0,\n  minDistance = 0,\n  half = 0.5,\n  maxFrequency = 1;\nclass LinkInstance {\n  constructor(container) {\n    this.container = container;\n    this._drawLinkLine = (p1, link) => {\n      const p1LinksOptions = p1.options.links;\n      if (!p1LinksOptions?.enable) {\n        return;\n      }\n      const container = this.container,\n        options = container.actualOptions,\n        p2 = link.destination,\n        pos1 = p1.getPosition(),\n        pos2 = p2.getPosition();\n      let opacity = link.opacity;\n      container.canvas.draw(ctx => {\n        let colorLine;\n        const twinkle = p1.options.twinkle?.lines;\n        if (twinkle?.enable) {\n          const twinkleFreq = twinkle.frequency,\n            twinkleRgb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(twinkle.color),\n            twinkling = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() < twinkleFreq;\n          if (twinkling && twinkleRgb) {\n            colorLine = twinkleRgb;\n            opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(twinkle.opacity);\n          }\n        }\n        if (!colorLine) {\n          const linkColor = p1LinksOptions.id !== undefined ? container.particles.linksColors.get(p1LinksOptions.id) : container.particles.linksColor;\n          colorLine = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(p1, p2, linkColor);\n        }\n        if (!colorLine) {\n          return;\n        }\n        const width = p1.retina.linksWidth ?? minWidth,\n          maxDistance = p1.retina.linksDistance ?? minDistance,\n          {\n            backgroundMask\n          } = options;\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawLinkLine)({\n          context: ctx,\n          width,\n          begin: pos1,\n          end: pos2,\n          maxDistance,\n          canvasSize: container.canvas.size,\n          links: p1LinksOptions,\n          backgroundMask: backgroundMask,\n          colorLine,\n          opacity\n        });\n      });\n    };\n    this._drawLinkTriangle = (p1, link1, link2) => {\n      const linksOptions = p1.options.links;\n      if (!linksOptions?.enable) {\n        return;\n      }\n      const triangleOptions = linksOptions.triangles;\n      if (!triangleOptions.enable) {\n        return;\n      }\n      const container = this.container,\n        options = container.actualOptions,\n        p2 = link1.destination,\n        p3 = link2.destination,\n        opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;\n      if (opacityTriangle <= minOpacity) {\n        return;\n      }\n      container.canvas.draw(ctx => {\n        const pos1 = p1.getPosition(),\n          pos2 = p2.getPosition(),\n          pos3 = p3.getPosition(),\n          linksDistance = p1.retina.linksDistance ?? minDistance;\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos1, pos2) > linksDistance || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos3, pos2) > linksDistance || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos3, pos1) > linksDistance) {\n          return;\n        }\n        let colorTriangle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(triangleOptions.color);\n        if (!colorTriangle) {\n          const linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;\n          colorTriangle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(p1, p2, linkColor);\n        }\n        if (!colorTriangle) {\n          return;\n        }\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawLinkTriangle)({\n          context: ctx,\n          pos1,\n          pos2,\n          pos3,\n          backgroundMask: options.backgroundMask,\n          colorTriangle,\n          opacityTriangle\n        });\n      });\n    };\n    this._drawTriangles = (options, p1, link, p1Links) => {\n      const p2 = link.destination;\n      if (!(options.links?.triangles.enable && p2.options.links?.triangles.enable)) {\n        return;\n      }\n      const vertices = p2.links?.filter(t => {\n        const linkFreq = this._getLinkFrequency(p2, t.destination),\n          minCount = 0;\n        return p2.options.links && linkFreq <= p2.options.links.frequency && p1Links.findIndex(l => l.destination === t.destination) >= minCount;\n      });\n      if (!vertices?.length) {\n        return;\n      }\n      for (const vertex of vertices) {\n        const p3 = vertex.destination,\n          triangleFreq = this._getTriangleFrequency(p1, p2, p3);\n        if (triangleFreq > options.links.triangles.frequency) {\n          continue;\n        }\n        this._drawLinkTriangle(p1, link, vertex);\n      }\n    };\n    this._getLinkFrequency = (p1, p2) => {\n      return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([p1, p2], this._freqs.links);\n    };\n    this._getTriangleFrequency = (p1, p2, p3) => {\n      return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([p1, p2, p3], this._freqs.triangles);\n    };\n    this._freqs = {\n      links: new Map(),\n      triangles: new Map()\n    };\n  }\n  drawParticle(context, particle) {\n    const {\n      links,\n      options\n    } = particle;\n    if (!links?.length) {\n      return;\n    }\n    const p1Links = links.filter(l => options.links && (options.links.frequency >= maxFrequency || this._getLinkFrequency(particle, l.destination) <= options.links.frequency));\n    for (const link of p1Links) {\n      this._drawTriangles(options, particle, link, p1Links);\n      if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {\n        this._drawLinkLine(particle, link);\n      }\n    }\n  }\n  async init() {\n    this._freqs.links = new Map();\n    this._freqs.triangles = new Map();\n    await Promise.resolve();\n  }\n  particleCreated(particle) {\n    particle.links = [];\n    if (!particle.options.links) {\n      return;\n    }\n    const ratio = this.container.retina.pixelRatio,\n      {\n        retina\n      } = particle,\n      {\n        distance,\n        width\n      } = particle.options.links;\n    retina.linksDistance = distance * ratio;\n    retina.linksWidth = width * ratio;\n  }\n  particleDestroyed(particle) {\n    particle.links = [];\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinkInstance.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinkInstance: () => (/* binding */ LinkInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst minOpacity = 0,\n  minWidth = 0,\n  minDistance = 0,\n  half = 0.5,\n  maxFrequency = 1;\nclass LinkInstance {\n  constructor(container, engine) {\n    this._drawLinkLine = (p1, link) => {\n      const p1LinksOptions = p1.options.links;\n      if (!p1LinksOptions?.enable) {\n        return;\n      }\n      const container = this._container,\n        options = container.actualOptions,\n        p2 = link.destination,\n        pos1 = p1.getPosition(),\n        pos2 = p2.getPosition();\n      let opacity = link.opacity;\n      container.canvas.draw(ctx => {\n        let colorLine;\n        const twinkle = p1.options.twinkle?.lines;\n        if (twinkle?.enable) {\n          const twinkleFreq = twinkle.frequency,\n            twinkleRgb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, twinkle.color),\n            twinkling = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() < twinkleFreq;\n          if (twinkling && twinkleRgb) {\n            colorLine = twinkleRgb;\n            opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(twinkle.opacity);\n          }\n        }\n        if (!colorLine) {\n          const linkColor = p1LinksOptions.id !== undefined ? container.particles.linksColors.get(p1LinksOptions.id) : container.particles.linksColor;\n          colorLine = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(p1, p2, linkColor);\n        }\n        if (!colorLine) {\n          return;\n        }\n        const width = p1.retina.linksWidth ?? minWidth,\n          maxDistance = p1.retina.linksDistance ?? minDistance,\n          {\n            backgroundMask\n          } = options;\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawLinkLine)({\n          context: ctx,\n          width,\n          begin: pos1,\n          end: pos2,\n          engine: this._engine,\n          maxDistance,\n          canvasSize: container.canvas.size,\n          links: p1LinksOptions,\n          backgroundMask: backgroundMask,\n          colorLine,\n          opacity\n        });\n      });\n    };\n    this._drawLinkTriangle = (p1, link1, link2) => {\n      const linksOptions = p1.options.links;\n      if (!linksOptions?.enable) {\n        return;\n      }\n      const triangleOptions = linksOptions.triangles;\n      if (!triangleOptions.enable) {\n        return;\n      }\n      const container = this._container,\n        options = container.actualOptions,\n        p2 = link1.destination,\n        p3 = link2.destination,\n        opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;\n      if (opacityTriangle <= minOpacity) {\n        return;\n      }\n      container.canvas.draw(ctx => {\n        const pos1 = p1.getPosition(),\n          pos2 = p2.getPosition(),\n          pos3 = p3.getPosition(),\n          linksDistance = p1.retina.linksDistance ?? minDistance;\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos1, pos2) > linksDistance || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos3, pos2) > linksDistance || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos3, pos1) > linksDistance) {\n          return;\n        }\n        let colorTriangle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, triangleOptions.color);\n        if (!colorTriangle) {\n          const linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;\n          colorTriangle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(p1, p2, linkColor);\n        }\n        if (!colorTriangle) {\n          return;\n        }\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawLinkTriangle)({\n          context: ctx,\n          pos1,\n          pos2,\n          pos3,\n          backgroundMask: options.backgroundMask,\n          colorTriangle,\n          opacityTriangle\n        });\n      });\n    };\n    this._drawTriangles = (options, p1, link, p1Links) => {\n      const p2 = link.destination;\n      if (!(options.links?.triangles.enable && p2.options.links?.triangles.enable)) {\n        return;\n      }\n      const vertices = p2.links?.filter(t => {\n        const linkFreq = this._getLinkFrequency(p2, t.destination),\n          minCount = 0;\n        return p2.options.links && linkFreq <= p2.options.links.frequency && p1Links.findIndex(l => l.destination === t.destination) >= minCount;\n      });\n      if (!vertices?.length) {\n        return;\n      }\n      for (const vertex of vertices) {\n        const p3 = vertex.destination,\n          triangleFreq = this._getTriangleFrequency(p1, p2, p3);\n        if (triangleFreq > options.links.triangles.frequency) {\n          continue;\n        }\n        this._drawLinkTriangle(p1, link, vertex);\n      }\n    };\n    this._getLinkFrequency = (p1, p2) => {\n      return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([p1, p2], this._freqs.links);\n    };\n    this._getTriangleFrequency = (p1, p2, p3) => {\n      return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([p1, p2, p3], this._freqs.triangles);\n    };\n    this._container = container;\n    this._engine = engine;\n    this._freqs = {\n      links: new Map(),\n      triangles: new Map()\n    };\n  }\n  drawParticle(context, particle) {\n    const {\n      links,\n      options\n    } = particle;\n    if (!links?.length) {\n      return;\n    }\n    const p1Links = links.filter(l => options.links && (options.links.frequency >= maxFrequency || this._getLinkFrequency(particle, l.destination) <= options.links.frequency));\n    for (const link of p1Links) {\n      this._drawTriangles(options, particle, link, p1Links);\n      if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {\n        this._drawLinkLine(particle, link);\n      }\n    }\n  }\n  async init() {\n    this._freqs.links = new Map();\n    this._freqs.triangles = new Map();\n    await Promise.resolve();\n  }\n  particleCreated(particle) {\n    particle.links = [];\n    if (!particle.options.links) {\n      return;\n    }\n    const ratio = this._container.retina.pixelRatio,\n      {\n        retina\n      } = particle,\n      {\n        distance,\n        width\n      } = particle.options.links;\n    retina.linksDistance = distance * ratio;\n    retina.linksWidth = width * ratio;\n  }\n  particleDestroyed(particle) {\n    particle.links = [];\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinkInstance.js?");
 
 /***/ }),
 
@@ -54,7 +54,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Linker: () => (/* binding */ Linker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CircleWarp.js */ \"./dist/browser/CircleWarp.js\");\n/* harmony import */ var _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Links.js */ \"./dist/browser/Options/Classes/Links.js\");\n\n\n\nconst squarePower = 2,\n  opacityOffset = 1,\n  origin = {\n    x: 0,\n    y: 0\n  },\n  minDistance = 0;\nfunction getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {\n  const {\n    dx,\n    dy,\n    distance\n  } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos1, pos2);\n  if (!warp || distance <= optDistance) {\n    return distance;\n  }\n  const absDiffs = {\n      x: Math.abs(dx),\n      y: Math.abs(dy)\n    },\n    warpDistances = {\n      x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),\n      y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y)\n    };\n  return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);\n}\nclass Linker extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.ParticlesInteractorBase {\n  constructor(container) {\n    super(container);\n    this._setColor = p1 => {\n      if (!p1.options.links) {\n        return;\n      }\n      const container = this.linkContainer,\n        linksOptions = p1.options.links;\n      let linkColor = linksOptions.id === undefined ? container.particles.linksColor : container.particles.linksColors.get(linksOptions.id);\n      if (linkColor) {\n        return;\n      }\n      const optColor = linksOptions.color;\n      linkColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkRandomColor)(optColor, linksOptions.blink, linksOptions.consent);\n      if (linksOptions.id === undefined) {\n        container.particles.linksColor = linkColor;\n      } else {\n        container.particles.linksColors.set(linksOptions.id, linkColor);\n      }\n    };\n    this.linkContainer = container;\n  }\n  clear() {}\n  init() {\n    this.linkContainer.particles.linksColor = undefined;\n    this.linkContainer.particles.linksColors = new Map();\n  }\n  interact(p1) {\n    if (!p1.options.links) {\n      return;\n    }\n    p1.links = [];\n    const pos1 = p1.getPosition(),\n      container = this.container,\n      canvasSize = container.canvas.size;\n    if (pos1.x < origin.x || pos1.y < origin.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {\n      return;\n    }\n    const linkOpt1 = p1.options.links,\n      optOpacity = linkOpt1.opacity,\n      optDistance = p1.retina.linksDistance ?? minDistance,\n      warp = linkOpt1.warp;\n    let range;\n    if (warp) {\n      range = new _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize);\n    } else {\n      range = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos1.x, pos1.y, optDistance);\n    }\n    const query = container.particles.quadTree.query(range);\n    for (const p2 of query) {\n      const linkOpt2 = p2.options.links;\n      if (p1 === p2 || !linkOpt2?.enable || linkOpt1.id !== linkOpt2.id || p2.spawning || p2.destroyed || !p2.links || p1.links.some(t => t.destination === p2) || p2.links.some(t => t.destination === p1)) {\n        continue;\n      }\n      const pos2 = p2.getPosition();\n      if (pos2.x < origin.x || pos2.y < origin.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {\n        continue;\n      }\n      const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);\n      if (distance > optDistance) {\n        continue;\n      }\n      const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;\n      this._setColor(p1);\n      p1.links.push({\n        destination: p2,\n        opacity: opacityLine\n      });\n    }\n  }\n  isEnabled(particle) {\n    return !!particle.options.links?.enable;\n  }\n  loadParticlesOptions(options, ...sources) {\n    if (!options.links) {\n      options.links = new _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__.Links();\n    }\n    for (const source of sources) {\n      options.links.load(source?.links);\n    }\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Linker.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Linker: () => (/* binding */ Linker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CircleWarp.js */ \"./dist/browser/CircleWarp.js\");\n/* harmony import */ var _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Links.js */ \"./dist/browser/Options/Classes/Links.js\");\n\n\n\nconst squarePower = 2,\n  opacityOffset = 1,\n  origin = {\n    x: 0,\n    y: 0\n  },\n  minDistance = 0;\nfunction getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {\n  const {\n    dx,\n    dy,\n    distance\n  } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos1, pos2);\n  if (!warp || distance <= optDistance) {\n    return distance;\n  }\n  const absDiffs = {\n      x: Math.abs(dx),\n      y: Math.abs(dy)\n    },\n    warpDistances = {\n      x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),\n      y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y)\n    };\n  return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);\n}\nclass Linker extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.ParticlesInteractorBase {\n  constructor(container, engine) {\n    super(container);\n    this._setColor = p1 => {\n      if (!p1.options.links) {\n        return;\n      }\n      const container = this._linkContainer,\n        linksOptions = p1.options.links;\n      let linkColor = linksOptions.id === undefined ? container.particles.linksColor : container.particles.linksColors.get(linksOptions.id);\n      if (linkColor) {\n        return;\n      }\n      const optColor = linksOptions.color;\n      linkColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkRandomColor)(this._engine, optColor, linksOptions.blink, linksOptions.consent);\n      if (linksOptions.id === undefined) {\n        container.particles.linksColor = linkColor;\n      } else {\n        container.particles.linksColors.set(linksOptions.id, linkColor);\n      }\n    };\n    this._linkContainer = container;\n    this._engine = engine;\n  }\n  clear() {}\n  init() {\n    this._linkContainer.particles.linksColor = undefined;\n    this._linkContainer.particles.linksColors = new Map();\n  }\n  interact(p1) {\n    if (!p1.options.links) {\n      return;\n    }\n    p1.links = [];\n    const pos1 = p1.getPosition(),\n      container = this.container,\n      canvasSize = container.canvas.size;\n    if (pos1.x < origin.x || pos1.y < origin.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {\n      return;\n    }\n    const linkOpt1 = p1.options.links,\n      optOpacity = linkOpt1.opacity,\n      optDistance = p1.retina.linksDistance ?? minDistance,\n      warp = linkOpt1.warp;\n    let range;\n    if (warp) {\n      range = new _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize);\n    } else {\n      range = new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos1.x, pos1.y, optDistance);\n    }\n    const query = container.particles.quadTree.query(range);\n    for (const p2 of query) {\n      const linkOpt2 = p2.options.links;\n      if (p1 === p2 || !linkOpt2?.enable || linkOpt1.id !== linkOpt2.id || p2.spawning || p2.destroyed || !p2.links || p1.links.some(t => t.destination === p2) || p2.links.some(t => t.destination === p1)) {\n        continue;\n      }\n      const pos2 = p2.getPosition();\n      if (pos2.x < origin.x || pos2.y < origin.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {\n        continue;\n      }\n      const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);\n      if (distance > optDistance) {\n        continue;\n      }\n      const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;\n      this._setColor(p1);\n      p1.links.push({\n        destination: p2,\n        opacity: opacityLine\n      });\n    }\n  }\n  isEnabled(particle) {\n    return !!particle.options.links?.enable;\n  }\n  loadParticlesOptions(options, ...sources) {\n    if (!options.links) {\n      options.links = new _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__.Links();\n    }\n    for (const source of sources) {\n      options.links.load(source?.links);\n    }\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Linker.js?");
 
 /***/ }),
 
@@ -64,7 +64,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinksPlugin: () => (/* binding */ LinksPlugin)\n/* harmony export */ });\n/* harmony import */ var _LinkInstance_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./LinkInstance.js */ \"./dist/browser/LinkInstance.js\");\n\nclass LinksPlugin {\n  constructor() {\n    this.id = \"links\";\n  }\n  getPlugin(container) {\n    return Promise.resolve(new _LinkInstance_js__WEBPACK_IMPORTED_MODULE_0__.LinkInstance(container));\n  }\n  loadOptions() {}\n  needsPlugin() {\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinksPlugin.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinksPlugin: () => (/* binding */ LinksPlugin)\n/* harmony export */ });\n/* harmony import */ var _LinkInstance_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./LinkInstance.js */ \"./dist/browser/LinkInstance.js\");\n\nclass LinksPlugin {\n  constructor(engine) {\n    this.id = \"links\";\n    this._engine = engine;\n  }\n  getPlugin(container) {\n    return Promise.resolve(new _LinkInstance_js__WEBPACK_IMPORTED_MODULE_0__.LinkInstance(container, this._engine));\n  }\n  loadOptions() {}\n  needsPlugin() {\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinksPlugin.js?");
 
 /***/ }),
 
@@ -104,7 +104,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawLinkLine: () => (/* binding */ drawLinkLine),\n/* harmony export */   drawLinkTriangle: () => (/* binding */ drawLinkTriangle),\n/* harmony export */   drawTriangle: () => (/* binding */ drawTriangle),\n/* harmony export */   getLinkKey: () => (/* binding */ getLinkKey),\n/* harmony export */   setLinkFrequency: () => (/* binding */ setLinkFrequency)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nfunction drawTriangle(context, p1, p2, p3) {\n  context.beginPath();\n  context.moveTo(p1.x, p1.y);\n  context.lineTo(p2.x, p2.y);\n  context.lineTo(p3.x, p3.y);\n  context.closePath();\n}\nfunction drawLinkLine(params) {\n  let drawn = false;\n  const {\n    begin,\n    end,\n    maxDistance,\n    context,\n    canvasSize,\n    width,\n    backgroundMask,\n    colorLine,\n    opacity,\n    links\n  } = params;\n  if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(begin, end) <= maxDistance) {\n    (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, begin, end);\n    drawn = true;\n  } else if (links.warp) {\n    let pi1;\n    let pi2;\n    const endNE = {\n      x: end.x - canvasSize.width,\n      y: end.y\n    };\n    const d1 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(begin, endNE);\n    if (d1.distance <= maxDistance) {\n      const yi = begin.y - d1.dy / d1.dx * begin.x;\n      pi1 = {\n        x: 0,\n        y: yi\n      };\n      pi2 = {\n        x: canvasSize.width,\n        y: yi\n      };\n    } else {\n      const endSW = {\n        x: end.x,\n        y: end.y - canvasSize.height\n      };\n      const d2 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(begin, endSW);\n      if (d2.distance <= maxDistance) {\n        const yi = begin.y - d2.dy / d2.dx * begin.x;\n        const xi = -yi / (d2.dy / d2.dx);\n        pi1 = {\n          x: xi,\n          y: 0\n        };\n        pi2 = {\n          x: xi,\n          y: canvasSize.height\n        };\n      } else {\n        const endSE = {\n          x: end.x - canvasSize.width,\n          y: end.y - canvasSize.height\n        };\n        const d3 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(begin, endSE);\n        if (d3.distance <= maxDistance) {\n          const yi = begin.y - d3.dy / d3.dx * begin.x;\n          const xi = -yi / (d3.dy / d3.dx);\n          pi1 = {\n            x: xi,\n            y: yi\n          };\n          pi2 = {\n            x: pi1.x + canvasSize.width,\n            y: pi1.y + canvasSize.height\n          };\n        }\n      }\n    }\n    if (pi1 && pi2) {\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, begin, pi1);\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, end, pi2);\n      drawn = true;\n    }\n  }\n  if (!drawn) {\n    return;\n  }\n  context.lineWidth = width;\n  if (backgroundMask.enable) {\n    context.globalCompositeOperation = backgroundMask.composite;\n  }\n  context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(colorLine, opacity);\n  const {\n    shadow\n  } = links;\n  if (shadow.enable) {\n    const shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(shadow.color);\n    if (shadowColor) {\n      context.shadowBlur = shadow.blur;\n      context.shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowColor);\n    }\n  }\n  context.stroke();\n}\nfunction drawLinkTriangle(params) {\n  const {\n    context,\n    pos1,\n    pos2,\n    pos3,\n    backgroundMask,\n    colorTriangle,\n    opacityTriangle\n  } = params;\n  drawTriangle(context, pos1, pos2, pos3);\n  if (backgroundMask.enable) {\n    context.globalCompositeOperation = backgroundMask.composite;\n  }\n  context.fillStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(colorTriangle, opacityTriangle);\n  context.fill();\n}\nfunction getLinkKey(ids) {\n  ids.sort((a, b) => a - b);\n  return ids.join(\"_\");\n}\nfunction setLinkFrequency(particles, dictionary) {\n  const key = getLinkKey(particles.map(t => t.id));\n  let res = dictionary.get(key);\n  if (res === undefined) {\n    res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)();\n    dictionary.set(key, res);\n  }\n  return res;\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawLinkLine: () => (/* binding */ drawLinkLine),\n/* harmony export */   drawLinkTriangle: () => (/* binding */ drawLinkTriangle),\n/* harmony export */   drawTriangle: () => (/* binding */ drawTriangle),\n/* harmony export */   getLinkKey: () => (/* binding */ getLinkKey),\n/* harmony export */   setLinkFrequency: () => (/* binding */ setLinkFrequency)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nfunction drawTriangle(context, p1, p2, p3) {\n  context.beginPath();\n  context.moveTo(p1.x, p1.y);\n  context.lineTo(p2.x, p2.y);\n  context.lineTo(p3.x, p3.y);\n  context.closePath();\n}\nfunction drawLinkLine(params) {\n  let drawn = false;\n  const {\n    begin,\n    end,\n    engine,\n    maxDistance,\n    context,\n    canvasSize,\n    width,\n    backgroundMask,\n    colorLine,\n    opacity,\n    links\n  } = params;\n  if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(begin, end) <= maxDistance) {\n    (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, begin, end);\n    drawn = true;\n  } else if (links.warp) {\n    let pi1;\n    let pi2;\n    const endNE = {\n      x: end.x - canvasSize.width,\n      y: end.y\n    };\n    const d1 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(begin, endNE);\n    if (d1.distance <= maxDistance) {\n      const yi = begin.y - d1.dy / d1.dx * begin.x;\n      pi1 = {\n        x: 0,\n        y: yi\n      };\n      pi2 = {\n        x: canvasSize.width,\n        y: yi\n      };\n    } else {\n      const endSW = {\n        x: end.x,\n        y: end.y - canvasSize.height\n      };\n      const d2 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(begin, endSW);\n      if (d2.distance <= maxDistance) {\n        const yi = begin.y - d2.dy / d2.dx * begin.x;\n        const xi = -yi / (d2.dy / d2.dx);\n        pi1 = {\n          x: xi,\n          y: 0\n        };\n        pi2 = {\n          x: xi,\n          y: canvasSize.height\n        };\n      } else {\n        const endSE = {\n          x: end.x - canvasSize.width,\n          y: end.y - canvasSize.height\n        };\n        const d3 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(begin, endSE);\n        if (d3.distance <= maxDistance) {\n          const yi = begin.y - d3.dy / d3.dx * begin.x;\n          const xi = -yi / (d3.dy / d3.dx);\n          pi1 = {\n            x: xi,\n            y: yi\n          };\n          pi2 = {\n            x: pi1.x + canvasSize.width,\n            y: pi1.y + canvasSize.height\n          };\n        }\n      }\n    }\n    if (pi1 && pi2) {\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, begin, pi1);\n      (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.drawLine)(context, end, pi2);\n      drawn = true;\n    }\n  }\n  if (!drawn) {\n    return;\n  }\n  context.lineWidth = width;\n  if (backgroundMask.enable) {\n    context.globalCompositeOperation = backgroundMask.composite;\n  }\n  context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(colorLine, opacity);\n  const {\n    shadow\n  } = links;\n  if (shadow.enable) {\n    const shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(engine, shadow.color);\n    if (shadowColor) {\n      context.shadowBlur = shadow.blur;\n      context.shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowColor);\n    }\n  }\n  context.stroke();\n}\nfunction drawLinkTriangle(params) {\n  const {\n    context,\n    pos1,\n    pos2,\n    pos3,\n    backgroundMask,\n    colorTriangle,\n    opacityTriangle\n  } = params;\n  drawTriangle(context, pos1, pos2, pos3);\n  if (backgroundMask.enable) {\n    context.globalCompositeOperation = backgroundMask.composite;\n  }\n  context.fillStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(colorTriangle, opacityTriangle);\n  context.fill();\n}\nfunction getLinkKey(ids) {\n  ids.sort((a, b) => a - b);\n  return ids.join(\"_\");\n}\nfunction setLinkFrequency(particles, dictionary) {\n  const key = getLinkKey(particles.map(t => t.id));\n  let res = dictionary.get(key);\n  if (res === undefined) {\n    res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)();\n    dictionary.set(key, res);\n  }\n  return res;\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Utils.js?");
 
 /***/ }),
 
@@ -114,7 +114,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*******************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Links: () => (/* reexport safe */ _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__.Links),\n/* harmony export */   LinksShadow: () => (/* reexport safe */ _Options_Classes_LinksShadow_js__WEBPACK_IMPORTED_MODULE_3__.LinksShadow),\n/* harmony export */   LinksTriangle: () => (/* reexport safe */ _Options_Classes_LinksTriangle_js__WEBPACK_IMPORTED_MODULE_4__.LinksTriangle),\n/* harmony export */   loadParticlesLinksInteraction: () => (/* binding */ loadParticlesLinksInteraction)\n/* harmony export */ });\n/* harmony import */ var _interaction_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./interaction.js */ \"./dist/browser/interaction.js\");\n/* harmony import */ var _plugin_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./plugin.js */ \"./dist/browser/plugin.js\");\n/* harmony import */ var _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Links.js */ \"./dist/browser/Options/Classes/Links.js\");\n/* harmony import */ var _Options_Classes_LinksShadow_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/LinksShadow.js */ \"./dist/browser/Options/Classes/LinksShadow.js\");\n/* harmony import */ var _Options_Classes_LinksTriangle_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Options/Classes/LinksTriangle.js */ \"./dist/browser/Options/Classes/LinksTriangle.js\");\n\n\nasync function loadParticlesLinksInteraction(engine, refresh = true) {\n  await (0,_interaction_js__WEBPACK_IMPORTED_MODULE_0__.loadLinksInteraction)(engine, refresh);\n  await (0,_plugin_js__WEBPACK_IMPORTED_MODULE_1__.loadLinksPlugin)(engine, refresh);\n}\n\n\n\n\n\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Links: () => (/* reexport safe */ _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_3__.Links),\n/* harmony export */   LinksShadow: () => (/* reexport safe */ _Options_Classes_LinksShadow_js__WEBPACK_IMPORTED_MODULE_4__.LinksShadow),\n/* harmony export */   LinksTriangle: () => (/* reexport safe */ _Options_Classes_LinksTriangle_js__WEBPACK_IMPORTED_MODULE_5__.LinksTriangle),\n/* harmony export */   loadParticlesLinksInteraction: () => (/* binding */ loadParticlesLinksInteraction)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _interaction_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./interaction.js */ \"./dist/browser/interaction.js\");\n/* harmony import */ var _plugin_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./plugin.js */ \"./dist/browser/plugin.js\");\n/* harmony import */ var _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/Links.js */ \"./dist/browser/Options/Classes/Links.js\");\n/* harmony import */ var _Options_Classes_LinksShadow_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Options/Classes/LinksShadow.js */ \"./dist/browser/Options/Classes/LinksShadow.js\");\n/* harmony import */ var _Options_Classes_LinksTriangle_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Options/Classes/LinksTriangle.js */ \"./dist/browser/Options/Classes/LinksTriangle.js\");\n\n\n\nasync function loadParticlesLinksInteraction(engine, refresh = true) {\n  (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.assertValidVersion)(engine, \"3.7.0\");\n  await (0,_interaction_js__WEBPACK_IMPORTED_MODULE_1__.loadLinksInteraction)(engine, refresh);\n  await (0,_plugin_js__WEBPACK_IMPORTED_MODULE_2__.loadLinksPlugin)(engine, refresh);\n}\n\n\n\n\n\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/index.js?");
 
 /***/ }),
 
@@ -124,7 +124,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadLinksInteraction: () => (/* binding */ loadLinksInteraction)\n/* harmony export */ });\n/* harmony import */ var _Linker_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Linker.js */ \"./dist/browser/Linker.js\");\n\nasync function loadLinksInteraction(engine, refresh = true) {\n  await engine.addInteractor(\"particlesLinks\", async container => {\n    return Promise.resolve(new _Linker_js__WEBPACK_IMPORTED_MODULE_0__.Linker(container));\n  }, refresh);\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/interaction.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadLinksInteraction: () => (/* binding */ loadLinksInteraction)\n/* harmony export */ });\n/* harmony import */ var _Linker_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Linker.js */ \"./dist/browser/Linker.js\");\n\nasync function loadLinksInteraction(engine, refresh = true) {\n  await engine.addInteractor(\"particlesLinks\", async container => {\n    return Promise.resolve(new _Linker_js__WEBPACK_IMPORTED_MODULE_0__.Linker(container, engine));\n  }, refresh);\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/interaction.js?");
 
 /***/ }),
 
@@ -134,7 +134,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadLinksPlugin: () => (/* binding */ loadLinksPlugin)\n/* harmony export */ });\n/* harmony import */ var _LinksPlugin_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./LinksPlugin.js */ \"./dist/browser/LinksPlugin.js\");\n\nasync function loadLinksPlugin(engine, refresh = true) {\n  const plugin = new _LinksPlugin_js__WEBPACK_IMPORTED_MODULE_0__.LinksPlugin();\n  await engine.addPlugin(plugin, refresh);\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/plugin.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadLinksPlugin: () => (/* binding */ loadLinksPlugin)\n/* harmony export */ });\n/* harmony import */ var _LinksPlugin_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./LinksPlugin.js */ \"./dist/browser/LinksPlugin.js\");\n\nasync function loadLinksPlugin(engine, refresh = true) {\n  const plugin = new _LinksPlugin_js__WEBPACK_IMPORTED_MODULE_0__.LinksPlugin(engine);\n  await engine.addPlugin(plugin, refresh);\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/plugin.js?");
 
 /***/ }),
 

package/tsparticles.interaction.particles.links.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.interaction.particles.links.min.js.LICENSE.txt */
-!function(i,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var n="object"==typeof exports?t(require("@tsparticles/engine")):t(i.window);for(var e in n)("object"==typeof exports?exports:i)[e]=n[e]}}(this,(i=>(()=>{var t={303:t=>{t.exports=i}},n={};function e(i){var s=n[i];if(void 0!==s)return s.exports;var o=n[i]={exports:{}};return t[i](o,o.exports,e),o.exports}e.d=(i,t)=>{for(var n in t)e.o(t,n)&&!e.o(i,n)&&Object.defineProperty(i,n,{enumerable:!0,get:t[n]})},e.o=(i,t)=>Object.prototype.hasOwnProperty.call(i,t),e.r=i=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(i,"__esModule",{value:!0})};var s={};e.r(s),e.d(s,{Links:()=>c,LinksShadow:()=>a,LinksTriangle:()=>l,loadParticlesLinksInteraction:()=>k});var o=e(303);class r extends o.Circle{constructor(i,t,n,e){super(i,t,n),this.canvasSize=e,this.canvasSize={...e}}contains(i){const{width:t,height:n}=this.canvasSize,{x:e,y:s}=i;return super.contains(i)||super.contains({x:e-t,y:s})||super.contains({x:e-t,y:s-n})||super.contains({x:e,y:s-n})}intersects(i){if(super.intersects(i))return!0;const t=i,n=i,e={x:i.position.x-this.canvasSize.width,y:i.position.y-this.canvasSize.height};if(void 0!==n.radius){const i=new o.Circle(e.x,e.y,2*n.radius);return super.intersects(i)}if(void 0!==t.size){const i=new o.Rectangle(e.x,e.y,2*t.size.width,2*t.size.height);return super.intersects(i)}return!1}}class a{constructor(){this.blur=5,this.color=new o.OptionsColor,this.color.value="#000",this.enable=!1}load(i){(0,o.isNull)(i)||(void 0!==i.blur&&(this.blur=i.blur),this.color=o.OptionsColor.create(this.color,i.color),void 0!==i.enable&&(this.enable=i.enable))}}class l{constructor(){this.enable=!1,this.frequency=1}load(i){(0,o.isNull)(i)||(void 0!==i.color&&(this.color=o.OptionsColor.create(this.color,i.color)),void 0!==i.enable&&(this.enable=i.enable),void 0!==i.frequency&&(this.frequency=i.frequency),void 0!==i.opacity&&(this.opacity=i.opacity))}}class c{constructor(){this.blink=!1,this.color=new o.OptionsColor,this.color.value="#fff",this.consent=!1,this.distance=100,this.enable=!1,this.frequency=1,this.opacity=1,this.shadow=new a,this.triangles=new l,this.width=1,this.warp=!1}load(i){(0,o.isNull)(i)||(void 0!==i.id&&(this.id=i.id),void 0!==i.blink&&(this.blink=i.blink),this.color=o.OptionsColor.create(this.color,i.color),void 0!==i.consent&&(this.consent=i.consent),void 0!==i.distance&&(this.distance=i.distance),void 0!==i.enable&&(this.enable=i.enable),void 0!==i.frequency&&(this.frequency=i.frequency),void 0!==i.opacity&&(this.opacity=i.opacity),this.shadow.load(i.shadow),this.triangles.load(i.triangles),void 0!==i.width&&(this.width=i.width),void 0!==i.warp&&(this.warp=i.warp))}}const d=0,h=0;function p(i,t,n,e,s){const{dx:r,dy:a,distance:l}=(0,o.getDistances)(i,t);if(!s||l<=n)return l;const c={x:Math.abs(r),y:Math.abs(a)},d=Math.min(c.x,e.width-c.x),h=Math.min(c.y,e.height-c.y);return Math.sqrt(d**2+h**2)}class u extends o.ParticlesInteractorBase{constructor(i){super(i),this._setColor=i=>{if(!i.options.links)return;const t=this.linkContainer,n=i.options.links;let e=void 0===n.id?t.particles.linksColor:t.particles.linksColors.get(n.id);if(e)return;const s=n.color;e=(0,o.getLinkRandomColor)(s,n.blink,n.consent),void 0===n.id?t.particles.linksColor=e:t.particles.linksColors.set(n.id,e)},this.linkContainer=i}clear(){}init(){this.linkContainer.particles.linksColor=void 0,this.linkContainer.particles.linksColors=new Map}interact(i){if(!i.options.links)return;i.links=[];const t=i.getPosition(),n=this.container,e=n.canvas.size;if(t.x<d||t.y<h||t.x>e.width||t.y>e.height)return;const s=i.options.links,a=s.opacity,l=i.retina.linksDistance??0,c=s.warp;let u;u=c?new r(t.x,t.y,l,e):new o.Circle(t.x,t.y,l);const y=n.particles.quadTree.query(u);for(const n of y){const o=n.options.links;if(i===n||!o?.enable||s.id!==o.id||n.spawning||n.destroyed||!n.links||i.links.some((i=>i.destination===n))||n.links.some((t=>t.destination===i)))continue;const r=n.getPosition();if(r.x<d||r.y<h||r.x>e.width||r.y>e.height)continue;const u=p(t,r,l,e,c&&o.warp);if(u>l)continue;const y=(1-u/l)*a;this._setColor(i),i.links.push({destination:n,opacity:y})}}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){i.links||(i.links=new c);for(const n of t)i.links.load(n?.links)}reset(){}}function y(i,t){const n=((e=i.map((i=>i.id))).sort(((i,t)=>i-t)),e.join("_"));var e;let s=t.get(n);return void 0===s&&(s=(0,o.getRandom)(),t.set(n,s)),s}class g{constructor(i){this.container=i,this._drawLinkLine=(i,t)=>{const n=i.options.links;if(!n?.enable)return;const e=this.container,s=e.actualOptions,r=t.destination,a=i.getPosition(),l=r.getPosition();let c=t.opacity;e.canvas.draw((t=>{let d;const h=i.options.twinkle?.lines;if(h?.enable){const i=h.frequency,t=(0,o.rangeColorToRgb)(h.color);(0,o.getRandom)()<i&&t&&(d=t,c=(0,o.getRangeValue)(h.opacity))}if(!d){const t=void 0!==n.id?e.particles.linksColors.get(n.id):e.particles.linksColor;d=(0,o.getLinkColor)(i,r,t)}if(!d)return;const p=i.retina.linksWidth??0,u=i.retina.linksDistance??0,{backgroundMask:y}=s;!function(i){let t=!1;const{begin:n,end:e,maxDistance:s,context:r,canvasSize:a,width:l,backgroundMask:c,colorLine:d,opacity:h,links:p}=i;if((0,o.getDistance)(n,e)<=s)(0,o.drawLine)(r,n,e),t=!0;else if(p.warp){let i,l;const c={x:e.x-a.width,y:e.y},d=(0,o.getDistances)(n,c);if(d.distance<=s){const t=n.y-d.dy/d.dx*n.x;i={x:0,y:t},l={x:a.width,y:t}}else{const t={x:e.x,y:e.y-a.height},r=(0,o.getDistances)(n,t);if(r.distance<=s){const t=-(n.y-r.dy/r.dx*n.x)/(r.dy/r.dx);i={x:t,y:0},l={x:t,y:a.height}}else{const t={x:e.x-a.width,y:e.y-a.height},r=(0,o.getDistances)(n,t);if(r.distance<=s){const t=n.y-r.dy/r.dx*n.x;i={x:-t/(r.dy/r.dx),y:t},l={x:i.x+a.width,y:i.y+a.height}}}}i&&l&&((0,o.drawLine)(r,n,i),(0,o.drawLine)(r,e,l),t=!0)}if(!t)return;r.lineWidth=l,c.enable&&(r.globalCompositeOperation=c.composite),r.strokeStyle=(0,o.getStyleFromRgb)(d,h);const{shadow:u}=p;if(u.enable){const i=(0,o.rangeColorToRgb)(u.color);i&&(r.shadowBlur=u.blur,r.shadowColor=(0,o.getStyleFromRgb)(i))}r.stroke()}({context:t,width:p,begin:a,end:l,maxDistance:u,canvasSize:e.canvas.size,links:n,backgroundMask:y,colorLine:d,opacity:c})}))},this._drawLinkTriangle=(i,t,n)=>{const e=i.options.links;if(!e?.enable)return;const s=e.triangles;if(!s.enable)return;const r=this.container,a=r.actualOptions,l=t.destination,c=n.destination,d=s.opacity??.5*(t.opacity+n.opacity);d<=0||r.canvas.draw((t=>{const n=i.getPosition(),h=l.getPosition(),p=c.getPosition(),u=i.retina.linksDistance??0;if((0,o.getDistance)(n,h)>u||(0,o.getDistance)(p,h)>u||(0,o.getDistance)(p,n)>u)return;let y=(0,o.rangeColorToRgb)(s.color);if(!y){const t=void 0!==e.id?r.particles.linksColors.get(e.id):r.particles.linksColor;y=(0,o.getLinkColor)(i,l,t)}y&&function(i){const{context:t,pos1:n,pos2:e,pos3:s,backgroundMask:r,colorTriangle:a,opacityTriangle:l}=i;!function(i,t,n,e){i.beginPath(),i.moveTo(t.x,t.y),i.lineTo(n.x,n.y),i.lineTo(e.x,e.y),i.closePath()}(t,n,e,s),r.enable&&(t.globalCompositeOperation=r.composite),t.fillStyle=(0,o.getStyleFromRgb)(a,l),t.fill()}({context:t,pos1:n,pos2:h,pos3:p,backgroundMask:a.backgroundMask,colorTriangle:y,opacityTriangle:d})}))},this._drawTriangles=(i,t,n,e)=>{const s=n.destination;if(!i.links?.triangles.enable||!s.options.links?.triangles.enable)return;const o=s.links?.filter((i=>{const t=this._getLinkFrequency(s,i.destination);return s.options.links&&t<=s.options.links.frequency&&e.findIndex((t=>t.destination===i.destination))>=0}));if(o?.length)for(const e of o){const o=e.destination;this._getTriangleFrequency(t,s,o)>i.links.triangles.frequency||this._drawLinkTriangle(t,n,e)}},this._getLinkFrequency=(i,t)=>y([i,t],this._freqs.links),this._getTriangleFrequency=(i,t,n)=>y([i,t,n],this._freqs.triangles),this._freqs={links:new Map,triangles:new Map}}drawParticle(i,t){const{links:n,options:e}=t;if(!n?.length)return;const s=n.filter((i=>e.links&&(e.links.frequency>=1||this._getLinkFrequency(t,i.destination)<=e.links.frequency)));for(const i of s)this._drawTriangles(e,t,i,s),i.opacity>0&&(t.retina.linksWidth??0)>0&&this._drawLinkLine(t,i)}async init(){this._freqs.links=new Map,this._freqs.triangles=new Map,await Promise.resolve()}particleCreated(i){if(i.links=[],!i.options.links)return;const t=this.container.retina.pixelRatio,{retina:n}=i,{distance:e,width:s}=i.options.links;n.linksDistance=e*t,n.linksWidth=s*t}particleDestroyed(i){i.links=[]}}class f{constructor(){this.id="links"}getPlugin(i){return Promise.resolve(new g(i))}loadOptions(){}needsPlugin(){return!0}}async function k(i,t=!0){await async function(i,t=!0){await i.addInteractor("particlesLinks",(async i=>Promise.resolve(new u(i))),t)}(i,t),await async function(i,t=!0){const n=new f;await i.addPlugin(n,t)}(i,t)}return s})()));
+!function(i,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var n="object"==typeof exports?t(require("@tsparticles/engine")):t(i.window);for(var e in n)("object"==typeof exports?exports:i)[e]=n[e]}}(this,(i=>(()=>{var t={303:t=>{t.exports=i}},n={};function e(i){var s=n[i];if(void 0!==s)return s.exports;var o=n[i]={exports:{}};return t[i](o,o.exports,e),o.exports}e.d=(i,t)=>{for(var n in t)e.o(t,n)&&!e.o(i,n)&&Object.defineProperty(i,n,{enumerable:!0,get:t[n]})},e.o=(i,t)=>Object.prototype.hasOwnProperty.call(i,t),e.r=i=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(i,"__esModule",{value:!0})};var s={};e.r(s),e.d(s,{Links:()=>c,LinksShadow:()=>a,LinksTriangle:()=>l,loadParticlesLinksInteraction:()=>k});var o=e(303);class r extends o.Circle{constructor(i,t,n,e){super(i,t,n),this.canvasSize=e,this.canvasSize={...e}}contains(i){const{width:t,height:n}=this.canvasSize,{x:e,y:s}=i;return super.contains(i)||super.contains({x:e-t,y:s})||super.contains({x:e-t,y:s-n})||super.contains({x:e,y:s-n})}intersects(i){if(super.intersects(i))return!0;const t=i,n=i,e={x:i.position.x-this.canvasSize.width,y:i.position.y-this.canvasSize.height};if(void 0!==n.radius){const i=new o.Circle(e.x,e.y,2*n.radius);return super.intersects(i)}if(void 0!==t.size){const i=new o.Rectangle(e.x,e.y,2*t.size.width,2*t.size.height);return super.intersects(i)}return!1}}class a{constructor(){this.blur=5,this.color=new o.OptionsColor,this.color.value="#000",this.enable=!1}load(i){(0,o.isNull)(i)||(void 0!==i.blur&&(this.blur=i.blur),this.color=o.OptionsColor.create(this.color,i.color),void 0!==i.enable&&(this.enable=i.enable))}}class l{constructor(){this.enable=!1,this.frequency=1}load(i){(0,o.isNull)(i)||(void 0!==i.color&&(this.color=o.OptionsColor.create(this.color,i.color)),void 0!==i.enable&&(this.enable=i.enable),void 0!==i.frequency&&(this.frequency=i.frequency),void 0!==i.opacity&&(this.opacity=i.opacity))}}class c{constructor(){this.blink=!1,this.color=new o.OptionsColor,this.color.value="#fff",this.consent=!1,this.distance=100,this.enable=!1,this.frequency=1,this.opacity=1,this.shadow=new a,this.triangles=new l,this.width=1,this.warp=!1}load(i){(0,o.isNull)(i)||(void 0!==i.id&&(this.id=i.id),void 0!==i.blink&&(this.blink=i.blink),this.color=o.OptionsColor.create(this.color,i.color),void 0!==i.consent&&(this.consent=i.consent),void 0!==i.distance&&(this.distance=i.distance),void 0!==i.enable&&(this.enable=i.enable),void 0!==i.frequency&&(this.frequency=i.frequency),void 0!==i.opacity&&(this.opacity=i.opacity),this.shadow.load(i.shadow),this.triangles.load(i.triangles),void 0!==i.width&&(this.width=i.width),void 0!==i.warp&&(this.warp=i.warp))}}const d=0,h=0;function p(i,t,n,e,s){const{dx:r,dy:a,distance:l}=(0,o.getDistances)(i,t);if(!s||l<=n)return l;const c={x:Math.abs(r),y:Math.abs(a)},d=Math.min(c.x,e.width-c.x),h=Math.min(c.y,e.height-c.y);return Math.sqrt(d**2+h**2)}class u extends o.ParticlesInteractorBase{constructor(i,t){super(i),this._setColor=i=>{if(!i.options.links)return;const t=this._linkContainer,n=i.options.links;let e=void 0===n.id?t.particles.linksColor:t.particles.linksColors.get(n.id);if(e)return;const s=n.color;e=(0,o.getLinkRandomColor)(this._engine,s,n.blink,n.consent),void 0===n.id?t.particles.linksColor=e:t.particles.linksColors.set(n.id,e)},this._linkContainer=i,this._engine=t}clear(){}init(){this._linkContainer.particles.linksColor=void 0,this._linkContainer.particles.linksColors=new Map}interact(i){if(!i.options.links)return;i.links=[];const t=i.getPosition(),n=this.container,e=n.canvas.size;if(t.x<d||t.y<h||t.x>e.width||t.y>e.height)return;const s=i.options.links,a=s.opacity,l=i.retina.linksDistance??0,c=s.warp;let u;u=c?new r(t.x,t.y,l,e):new o.Circle(t.x,t.y,l);const g=n.particles.quadTree.query(u);for(const n of g){const o=n.options.links;if(i===n||!o?.enable||s.id!==o.id||n.spawning||n.destroyed||!n.links||i.links.some((i=>i.destination===n))||n.links.some((t=>t.destination===i)))continue;const r=n.getPosition();if(r.x<d||r.y<h||r.x>e.width||r.y>e.height)continue;const u=p(t,r,l,e,c&&o.warp);if(u>l)continue;const g=(1-u/l)*a;this._setColor(i),i.links.push({destination:n,opacity:g})}}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){i.links||(i.links=new c);for(const n of t)i.links.load(n?.links)}reset(){}}function g(i,t){const n=((e=i.map((i=>i.id))).sort(((i,t)=>i-t)),e.join("_"));var e;let s=t.get(n);return void 0===s&&(s=(0,o.getRandom)(),t.set(n,s)),s}class y{constructor(i,t){this._drawLinkLine=(i,t)=>{const n=i.options.links;if(!n?.enable)return;const e=this._container,s=e.actualOptions,r=t.destination,a=i.getPosition(),l=r.getPosition();let c=t.opacity;e.canvas.draw((t=>{let d;const h=i.options.twinkle?.lines;if(h?.enable){const i=h.frequency,t=(0,o.rangeColorToRgb)(this._engine,h.color);(0,o.getRandom)()<i&&t&&(d=t,c=(0,o.getRangeValue)(h.opacity))}if(!d){const t=void 0!==n.id?e.particles.linksColors.get(n.id):e.particles.linksColor;d=(0,o.getLinkColor)(i,r,t)}if(!d)return;const p=i.retina.linksWidth??0,u=i.retina.linksDistance??0,{backgroundMask:g}=s;!function(i){let t=!1;const{begin:n,end:e,engine:s,maxDistance:r,context:a,canvasSize:l,width:c,backgroundMask:d,colorLine:h,opacity:p,links:u}=i;if((0,o.getDistance)(n,e)<=r)(0,o.drawLine)(a,n,e),t=!0;else if(u.warp){let i,s;const c={x:e.x-l.width,y:e.y},d=(0,o.getDistances)(n,c);if(d.distance<=r){const t=n.y-d.dy/d.dx*n.x;i={x:0,y:t},s={x:l.width,y:t}}else{const t={x:e.x,y:e.y-l.height},a=(0,o.getDistances)(n,t);if(a.distance<=r){const t=-(n.y-a.dy/a.dx*n.x)/(a.dy/a.dx);i={x:t,y:0},s={x:t,y:l.height}}else{const t={x:e.x-l.width,y:e.y-l.height},a=(0,o.getDistances)(n,t);if(a.distance<=r){const t=n.y-a.dy/a.dx*n.x;i={x:-t/(a.dy/a.dx),y:t},s={x:i.x+l.width,y:i.y+l.height}}}}i&&s&&((0,o.drawLine)(a,n,i),(0,o.drawLine)(a,e,s),t=!0)}if(!t)return;a.lineWidth=c,d.enable&&(a.globalCompositeOperation=d.composite),a.strokeStyle=(0,o.getStyleFromRgb)(h,p);const{shadow:g}=u;if(g.enable){const i=(0,o.rangeColorToRgb)(s,g.color);i&&(a.shadowBlur=g.blur,a.shadowColor=(0,o.getStyleFromRgb)(i))}a.stroke()}({context:t,width:p,begin:a,end:l,engine:this._engine,maxDistance:u,canvasSize:e.canvas.size,links:n,backgroundMask:g,colorLine:d,opacity:c})}))},this._drawLinkTriangle=(i,t,n)=>{const e=i.options.links;if(!e?.enable)return;const s=e.triangles;if(!s.enable)return;const r=this._container,a=r.actualOptions,l=t.destination,c=n.destination,d=s.opacity??.5*(t.opacity+n.opacity);d<=0||r.canvas.draw((t=>{const n=i.getPosition(),h=l.getPosition(),p=c.getPosition(),u=i.retina.linksDistance??0;if((0,o.getDistance)(n,h)>u||(0,o.getDistance)(p,h)>u||(0,o.getDistance)(p,n)>u)return;let g=(0,o.rangeColorToRgb)(this._engine,s.color);if(!g){const t=void 0!==e.id?r.particles.linksColors.get(e.id):r.particles.linksColor;g=(0,o.getLinkColor)(i,l,t)}g&&function(i){const{context:t,pos1:n,pos2:e,pos3:s,backgroundMask:r,colorTriangle:a,opacityTriangle:l}=i;!function(i,t,n,e){i.beginPath(),i.moveTo(t.x,t.y),i.lineTo(n.x,n.y),i.lineTo(e.x,e.y),i.closePath()}(t,n,e,s),r.enable&&(t.globalCompositeOperation=r.composite),t.fillStyle=(0,o.getStyleFromRgb)(a,l),t.fill()}({context:t,pos1:n,pos2:h,pos3:p,backgroundMask:a.backgroundMask,colorTriangle:g,opacityTriangle:d})}))},this._drawTriangles=(i,t,n,e)=>{const s=n.destination;if(!i.links?.triangles.enable||!s.options.links?.triangles.enable)return;const o=s.links?.filter((i=>{const t=this._getLinkFrequency(s,i.destination);return s.options.links&&t<=s.options.links.frequency&&e.findIndex((t=>t.destination===i.destination))>=0}));if(o?.length)for(const e of o){const o=e.destination;this._getTriangleFrequency(t,s,o)>i.links.triangles.frequency||this._drawLinkTriangle(t,n,e)}},this._getLinkFrequency=(i,t)=>g([i,t],this._freqs.links),this._getTriangleFrequency=(i,t,n)=>g([i,t,n],this._freqs.triangles),this._container=i,this._engine=t,this._freqs={links:new Map,triangles:new Map}}drawParticle(i,t){const{links:n,options:e}=t;if(!n?.length)return;const s=n.filter((i=>e.links&&(e.links.frequency>=1||this._getLinkFrequency(t,i.destination)<=e.links.frequency)));for(const i of s)this._drawTriangles(e,t,i,s),i.opacity>0&&(t.retina.linksWidth??0)>0&&this._drawLinkLine(t,i)}async init(){this._freqs.links=new Map,this._freqs.triangles=new Map,await Promise.resolve()}particleCreated(i){if(i.links=[],!i.options.links)return;const t=this._container.retina.pixelRatio,{retina:n}=i,{distance:e,width:s}=i.options.links;n.linksDistance=e*t,n.linksWidth=s*t}particleDestroyed(i){i.links=[]}}class f{constructor(i){this.id="links",this._engine=i}getPlugin(i){return Promise.resolve(new y(i,this._engine))}loadOptions(){}needsPlugin(){return!0}}async function k(i,t=!0){(0,o.assertValidVersion)(i,"3.7.0"),await async function(i,t=!0){await i.addInteractor("particlesLinks",(async t=>Promise.resolve(new u(t,i))),t)}(i,t),await async function(i,t=!0){const n=new f(i);await i.addPlugin(n,t)}(i,t)}return s})()));

package/tsparticles.interaction.particles.links.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Links Particles Interaction v3.6.0 by Matteo Bruni */
+/*! tsParticles Links Particles Interaction v3.7.0 by Matteo Bruni */

package/types/LinkInstance.d.ts

@@ -1,9 +1,10 @@
-import { type IContainerPlugin } from "@tsparticles/engine";
+import { type Engine, type IContainerPlugin } from "@tsparticles/engine";
 import type { LinkContainer, LinkParticle } from "./Types.js";
 export declare class LinkInstance implements IContainerPlugin {
-    private readonly container;
+    private readonly _container;
+    private readonly _engine;
     private readonly _freqs;
-    constructor(container: LinkContainer);
+    constructor(container: LinkContainer, engine: Engine);
     drawParticle(context: CanvasRenderingContext2D, particle: LinkParticle): void;
     init(): Promise<void>;
     particleCreated(particle: LinkParticle): void;

package/types/Linker.d.ts

@@ -1,8 +1,9 @@
-import { ParticlesInteractorBase, type RecursivePartial } from "@tsparticles/engine";
+import { type Engine, ParticlesInteractorBase, type RecursivePartial } from "@tsparticles/engine";
 import type { IParticlesLinkOptions, LinkContainer, LinkParticle, ParticlesLinkOptions } from "./Types.js";
 export declare class Linker extends ParticlesInteractorBase {
-    linkContainer: LinkContainer;
-    constructor(container: LinkContainer);
+    private readonly _engine;
+    private readonly _linkContainer;
+    constructor(container: LinkContainer, engine: Engine);
     clear(): void;
     init(): void;
     interact(p1: LinkParticle): void;

package/types/LinksPlugin.d.ts

@@ -1,9 +1,10 @@
-import type { IPlugin } from "@tsparticles/engine";
+import type { Engine, IPlugin } from "@tsparticles/engine";
 import type { LinkContainer } from "./Types.js";
 import { LinkInstance } from "./LinkInstance.js";
 export declare class LinksPlugin implements IPlugin {
     readonly id: string;
-    constructor();
+    private readonly _engine;
+    constructor(engine: Engine);
     getPlugin(container: LinkContainer): Promise<LinkInstance>;
     loadOptions(): void;
     needsPlugin(): boolean;

package/types/Types.d.ts

@@ -1,4 +1,4 @@
-import type { BackgroundMask, Container, ICoordinates, IDimension, IParticlesOptions, IRgb, Particle, ParticlesOptions } from "@tsparticles/engine";
+import type { BackgroundMask, Container, Engine, ICoordinates, IDimension, IParticlesOptions, IRgb, Particle, ParticlesOptions } from "@tsparticles/engine";
 import type { ILink } from "./Interfaces.js";
 import type { ILinks } from "./Options/Interfaces/ILinks.js";
 import type { Links } from "./Options/Classes/Links.js";
@@ -23,6 +23,7 @@ export interface LinkLineDrawParams {
     colorLine: IRgb;
     context: CanvasRenderingContext2D;
     end: ICoordinates;
+    engine: Engine;
     links: Links;
     maxDistance: number;
     opacity: number;

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { Engine } from "@tsparticles/engine";
+import { type Engine } from "@tsparticles/engine";
 export declare function loadParticlesLinksInteraction(engine: Engine, refresh?: boolean): Promise<void>;
 export * from "./Options/Classes/Links.js";
 export * from "./Options/Classes/LinksShadow.js";

package/umd/LinkInstance.js

@@ -14,20 +14,19 @@
     const Utils_js_1 = require("./Utils.js");
     const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5, maxFrequency = 1;
     class LinkInstance {
-        constructor(container) {
-            this.container = container;
+        constructor(container, engine) {
             this._drawLinkLine = (p1, link) => {
                 const p1LinksOptions = p1.options.links;
                 if (!p1LinksOptions?.enable) {
                     return;
                 }
-                const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+                const container = this._container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
                 let opacity = link.opacity;
                 container.canvas.draw(ctx => {
                     let colorLine;
                     const twinkle = p1.options.twinkle?.lines;
                     if (twinkle?.enable) {
-                        const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
+                        const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(this._engine, twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
                         if (twinkling && twinkleRgb) {
                             colorLine = twinkleRgb;
                             opacity = (0, engine_1.getRangeValue)(twinkle.opacity);
@@ -48,6 +47,7 @@
                         width,
                         begin: pos1,
                         end: pos2,
+                        engine: this._engine,
                         maxDistance,
                         canvasSize: container.canvas.size,
                         links: p1LinksOptions,
@@ -66,7 +66,7 @@
                 if (!triangleOptions.enable) {
                     return;
                 }
-                const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+                const container = this._container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
                 if (opacityTriangle <= minOpacity) {
                     return;
                 }
@@ -77,7 +77,7 @@
                         (0, engine_1.getDistance)(pos3, pos1) > linksDistance) {
                         return;
                     }
-                    let colorTriangle = (0, engine_1.rangeColorToRgb)(triangleOptions.color);
+                    let colorTriangle = (0, engine_1.rangeColorToRgb)(this._engine, triangleOptions.color);
                     if (!colorTriangle) {
                         const linkColor = linksOptions.id !== undefined
                             ? container.particles.linksColors.get(linksOptions.id)
@@ -126,6 +126,8 @@
             this._getTriangleFrequency = (p1, p2, p3) => {
                 return (0, Utils_js_1.setLinkFrequency)([p1, p2, p3], this._freqs.triangles);
             };
+            this._container = container;
+            this._engine = engine;
             this._freqs = {
                 links: new Map(),
                 triangles: new Map(),
@@ -156,7 +158,7 @@
             if (!particle.options.links) {
                 return;
             }
-            const ratio = this.container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
+            const ratio = this._container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
             retina.linksDistance = distance * ratio;
             retina.linksWidth = width * ratio;
         }

package/umd/Linker.js

@@ -32,13 +32,13 @@
         return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
     }
     class Linker extends engine_1.ParticlesInteractorBase {
-        constructor(container) {
+        constructor(container, engine) {
             super(container);
             this._setColor = p1 => {
                 if (!p1.options.links) {
                     return;
                 }
-                const container = this.linkContainer, linksOptions = p1.options.links;
+                const container = this._linkContainer, linksOptions = p1.options.links;
                 let linkColor = linksOptions.id === undefined
                     ? container.particles.linksColor
                     : container.particles.linksColors.get(linksOptions.id);
@@ -46,7 +46,7 @@
                     return;
                 }
                 const optColor = linksOptions.color;
-                linkColor = (0, engine_1.getLinkRandomColor)(optColor, linksOptions.blink, linksOptions.consent);
+                linkColor = (0, engine_1.getLinkRandomColor)(this._engine, optColor, linksOptions.blink, linksOptions.consent);
                 if (linksOptions.id === undefined) {
                     container.particles.linksColor = linkColor;
                 }
@@ -54,13 +54,14 @@
                     container.particles.linksColors.set(linksOptions.id, linkColor);
                 }
             };
-            this.linkContainer = container;
+            this._linkContainer = container;
+            this._engine = engine;
         }
         clear() {
         }
         init() {
-            this.linkContainer.particles.linksColor = undefined;
-            this.linkContainer.particles.linksColors = new Map();
+            this._linkContainer.particles.linksColor = undefined;
+            this._linkContainer.particles.linksColors = new Map();
         }
         interact(p1) {
             if (!p1.options.links) {

package/umd/LinksPlugin.js

@@ -12,11 +12,12 @@
     exports.LinksPlugin = void 0;
     const LinkInstance_js_1 = require("./LinkInstance.js");
     class LinksPlugin {
-        constructor() {
+        constructor(engine) {
             this.id = "links";
+            this._engine = engine;
         }
         getPlugin(container) {
-            return Promise.resolve(new LinkInstance_js_1.LinkInstance(container));
+            return Promise.resolve(new LinkInstance_js_1.LinkInstance(container, this._engine));
         }
         loadOptions() {
         }

package/umd/Utils.js

@@ -24,7 +24,7 @@
     }
     function drawLinkLine(params) {
         let drawn = false;
-        const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
+        const { begin, end, engine, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
         if ((0, engine_1.getDistance)(begin, end) <= maxDistance) {
             (0, engine_1.drawLine)(context, begin, end);
             drawn = true;
@@ -84,7 +84,7 @@
         context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, opacity);
         const { shadow } = links;
         if (shadow.enable) {
-            const shadowColor = (0, engine_1.rangeColorToRgb)(shadow.color);
+            const shadowColor = (0, engine_1.rangeColorToRgb)(engine, shadow.color);
             if (shadowColor) {
                 context.shadowBlur = shadow.blur;
                 context.shadowColor = (0, engine_1.getStyleFromRgb)(shadowColor);

package/umd/index.js

@@ -18,15 +18,17 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./interaction.js", "./plugin.js", "./Options/Classes/Links.js", "./Options/Classes/LinksShadow.js", "./Options/Classes/LinksTriangle.js", "./Options/Interfaces/ILinks.js", "./Options/Interfaces/ILinksShadow.js", "./Options/Interfaces/ILinksTriangle.js"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./interaction.js", "./plugin.js", "./Options/Classes/Links.js", "./Options/Classes/LinksShadow.js", "./Options/Classes/LinksTriangle.js", "./Options/Interfaces/ILinks.js", "./Options/Interfaces/ILinksShadow.js", "./Options/Interfaces/ILinksTriangle.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadParticlesLinksInteraction = loadParticlesLinksInteraction;
+    const engine_1 = require("@tsparticles/engine");
     const interaction_js_1 = require("./interaction.js");
     const plugin_js_1 = require("./plugin.js");
     async function loadParticlesLinksInteraction(engine, refresh = true) {
+        (0, engine_1.assertValidVersion)(engine, "3.7.0");
         await (0, interaction_js_1.loadLinksInteraction)(engine, refresh);
         await (0, plugin_js_1.loadLinksPlugin)(engine, refresh);
     }

package/umd/interaction.js

@@ -13,7 +13,7 @@
     const Linker_js_1 = require("./Linker.js");
     async function loadLinksInteraction(engine, refresh = true) {
         await engine.addInteractor("particlesLinks", async (container) => {
-            return Promise.resolve(new Linker_js_1.Linker(container));
+            return Promise.resolve(new Linker_js_1.Linker(container, engine));
         }, refresh);
     }
 });

package/umd/plugin.js

@@ -12,7 +12,7 @@
     exports.loadLinksPlugin = loadLinksPlugin;
     const LinksPlugin_js_1 = require("./LinksPlugin.js");
     async function loadLinksPlugin(engine, refresh = true) {
-        const plugin = new LinksPlugin_js_1.LinksPlugin();
+        const plugin = new LinksPlugin_js_1.LinksPlugin(engine);
         await engine.addPlugin(plugin, refresh);
     }
 });