@tsparticles/interaction-particles-links - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

browser/CircleWarp.js

 import { Circle, Rectangle } from "@tsparticles/engine";
+const double = 2;
 export class CircleWarp extends Circle {
@@ -25,7 +26,7 @@ constructor(x, y, radius, canvasSize) {
         if (circle.radius !== undefined) {
-            const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * 2);
+            const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * double);
             return super.intersects(biggerCircle);
         }
         else if (rect.size !== undefined) {
-            const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * 2, rect.size.height * 2);
+            const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * double, rect.size.height * double);
             return super.intersects(rectSW);
@@ -32,0 +33,0 @@ }

browser/Linker.js

 import { Circle, ParticlesInteractorBase, getDistances, getLinkRandomColor, } from "@tsparticles/engine";
 import { CircleWarp } from "./CircleWarp.js";
 import { Links } from "./Options/Classes/Links.js";
+const squarePower = 2, opacityOffset = 1, origin = {
+    x: 0,
+    y: 0,
+}, minDistance = 0;
 function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
@@ -16,3 +20,3 @@ const { dx, dy, distance } = getDistances(pos1, pos2);
     };
-    return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+    return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
@@ -56,6 +60,6 @@ export class Linker extends ParticlesInteractorBase {
         const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
-        if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
+        if (pos1.x < origin.x || pos1.y < origin.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
             return;
         }
-        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? 0, warp = linkOpt1.warp, range = warp
+        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp, range = warp
             ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)
@@ -76,3 +80,3 @@ : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
             const pos2 = p2.getPosition();
-            if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
+            if (pos2.x < origin.x || pos2.y < origin.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
                 continue;
@@ -84,3 +88,3 @@ }
             }
-            const opacityLine = (1 - distance / optDistance) * optOpacity;
+            const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
             this._setColor(p1);
@@ -92,2 +96,3 @@ p1.links.push({
         }
+        await Promise.resolve();
     }
@@ -94,0 +99,0 @@ isEnabled(particle) {

browser/LinkInstance.js

 import { getDistance, getLinkColor, getRandom, getRangeValue, rangeColorToRgb, } from "@tsparticles/engine";
 import { drawLinkLine, drawLinkTriangle, setLinkFrequency } from "./Utils.js";
+const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5;
 export class LinkInstance {
@@ -32,3 +33,3 @@ constructor(container) {
                 }
-                const width = p1.retina.linksWidth ?? 0, maxDistance = p1.retina.linksDistance ?? 0, { backgroundMask } = options;
+                const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance, { backgroundMask } = options;
                 drawLinkLine({
@@ -57,8 +58,8 @@ context: ctx,
             }
-            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) / 2;
-            if (opacityTriangle <= 0) {
+            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;
             }
             container.canvas.draw((ctx) => {
-                const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? 0;
+                const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? minDistance;
                 if (getDistance(pos1, pos2) > linksDistance ||
@@ -96,6 +97,6 @@ getDistance(pos3, pos2) > linksDistance ||
             const vertices = p2.links?.filter((t) => {
-                const linkFreq = this._getLinkFrequency(p2, t.destination);
+                const linkFreq = this._getLinkFrequency(p2, t.destination), minCount = 0;
                 return (p2.options.links &&
                     linkFreq <= p2.options.links.frequency &&
-                    p1Links.findIndex((l) => l.destination === t.destination) >= 0);
+                    p1Links.findIndex((l) => l.destination === t.destination) >= minCount);
             });
@@ -126,3 +127,3 @@ if (!vertices?.length) {
         const { links, options } = particle;
-        if (!links || links.length <= 0) {
+        if (!links?.length) {
             return;
@@ -133,3 +134,3 @@ }
             this._drawTriangles(options, particle, link, p1Links);
-            if (link.opacity > 0 && (particle.retina.linksWidth ?? 0) > 0) {
+            if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {
                 this._drawLinkLine(particle, link);
@@ -142,2 +143,3 @@ }
         this._freqs.triangles = new Map();
+        await Promise.resolve();
     }
@@ -144,0 +146,0 @@ particleCreated(particle) {

cjs/CircleWarp.js

@@ -5,2 +5,3 @@ "use strict";
 const engine_1 = require("@tsparticles/engine");
+const double = 2;
 class CircleWarp extends engine_1.Circle {
@@ -29,7 +30,7 @@ constructor(x, y, radius, canvasSize) {
         if (circle.radius !== undefined) {
-            const biggerCircle = new engine_1.Circle(newPos.x, newPos.y, circle.radius * 2);
+            const biggerCircle = new engine_1.Circle(newPos.x, newPos.y, circle.radius * double);
             return super.intersects(biggerCircle);
         }
         else if (rect.size !== undefined) {
-            const rectSW = new engine_1.Rectangle(newPos.x, newPos.y, rect.size.width * 2, rect.size.height * 2);
+            const rectSW = new engine_1.Rectangle(newPos.x, newPos.y, rect.size.width * double, rect.size.height * double);
             return super.intersects(rectSW);
@@ -36,0 +37,0 @@ }

cjs/Linker.js

@@ -7,2 +7,6 @@ "use strict";
 const Links_js_1 = require("./Options/Classes/Links.js");
+const squarePower = 2, opacityOffset = 1, origin = {
+    x: 0,
+    y: 0,
+}, minDistance = 0;
 function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
@@ -20,3 +24,3 @@ const { dx, dy, distance } = (0, engine_1.getDistances)(pos1, pos2);
     };
-    return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+    return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
@@ -60,6 +64,6 @@ class Linker extends engine_1.ParticlesInteractorBase {
         const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
-        if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
+        if (pos1.x < origin.x || pos1.y < origin.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
             return;
         }
-        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? 0, warp = linkOpt1.warp, range = warp
+        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp, range = warp
             ? new CircleWarp_js_1.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)
@@ -80,3 +84,3 @@ : new engine_1.Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
             const pos2 = p2.getPosition();
-            if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
+            if (pos2.x < origin.x || pos2.y < origin.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
                 continue;
@@ -88,3 +92,3 @@ }
             }
-            const opacityLine = (1 - distance / optDistance) * optOpacity;
+            const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
             this._setColor(p1);
@@ -96,2 +100,3 @@ p1.links.push({
         }
+        await Promise.resolve();
     }
@@ -98,0 +103,0 @@ isEnabled(particle) {

cjs/LinkInstance.js

@@ -6,2 +6,3 @@ "use strict";
 const Utils_js_1 = require("./Utils.js");
+const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5;
 class LinkInstance {
@@ -36,3 +37,3 @@ constructor(container) {
                 }
-                const width = p1.retina.linksWidth ?? 0, maxDistance = p1.retina.linksDistance ?? 0, { backgroundMask } = options;
+                const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance, { backgroundMask } = options;
                 (0, Utils_js_1.drawLinkLine)({
@@ -61,8 +62,8 @@ context: ctx,
             }
-            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) / 2;
-            if (opacityTriangle <= 0) {
+            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;
             }
             container.canvas.draw((ctx) => {
-                const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? 0;
+                const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? minDistance;
                 if ((0, engine_1.getDistance)(pos1, pos2) > linksDistance ||
@@ -100,6 +101,6 @@ (0, engine_1.getDistance)(pos3, pos2) > linksDistance ||
             const vertices = p2.links?.filter((t) => {
-                const linkFreq = this._getLinkFrequency(p2, t.destination);
+                const linkFreq = this._getLinkFrequency(p2, t.destination), minCount = 0;
                 return (p2.options.links &&
                     linkFreq <= p2.options.links.frequency &&
-                    p1Links.findIndex((l) => l.destination === t.destination) >= 0);
+                    p1Links.findIndex((l) => l.destination === t.destination) >= minCount);
             });
@@ -130,3 +131,3 @@ if (!vertices?.length) {
         const { links, options } = particle;
-        if (!links || links.length <= 0) {
+        if (!links?.length) {
             return;
@@ -137,3 +138,3 @@ }
             this._drawTriangles(options, particle, link, p1Links);
-            if (link.opacity > 0 && (particle.retina.linksWidth ?? 0) > 0) {
+            if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {
                 this._drawLinkLine(particle, link);
@@ -146,2 +147,3 @@ }
         this._freqs.triangles = new Map();
+        await Promise.resolve();
     }
@@ -148,0 +150,0 @@ particleCreated(particle) {

esm/CircleWarp.js

 import { Circle, Rectangle } from "@tsparticles/engine";
+const double = 2;
 export class CircleWarp extends Circle {
@@ -25,7 +26,7 @@ constructor(x, y, radius, canvasSize) {
         if (circle.radius !== undefined) {
-            const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * 2);
+            const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * double);
             return super.intersects(biggerCircle);
         }
         else if (rect.size !== undefined) {
-            const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * 2, rect.size.height * 2);
+            const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * double, rect.size.height * double);
             return super.intersects(rectSW);
@@ -32,0 +33,0 @@ }

esm/Linker.js

 import { Circle, ParticlesInteractorBase, getDistances, getLinkRandomColor, } from "@tsparticles/engine";
 import { CircleWarp } from "./CircleWarp.js";
 import { Links } from "./Options/Classes/Links.js";
+const squarePower = 2, opacityOffset = 1, origin = {
+    x: 0,
+    y: 0,
+}, minDistance = 0;
 function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
@@ -16,3 +20,3 @@ const { dx, dy, distance } = getDistances(pos1, pos2);
     };
-    return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+    return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
@@ -56,6 +60,6 @@ export class Linker extends ParticlesInteractorBase {
         const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
-        if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
+        if (pos1.x < origin.x || pos1.y < origin.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
             return;
         }
-        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? 0, warp = linkOpt1.warp, range = warp
+        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp, range = warp
             ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)
@@ -76,3 +80,3 @@ : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
             const pos2 = p2.getPosition();
-            if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
+            if (pos2.x < origin.x || pos2.y < origin.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
                 continue;
@@ -84,3 +88,3 @@ }
             }
-            const opacityLine = (1 - distance / optDistance) * optOpacity;
+            const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
             this._setColor(p1);
@@ -92,2 +96,3 @@ p1.links.push({
         }
+        await Promise.resolve();
     }
@@ -94,0 +99,0 @@ isEnabled(particle) {

esm/LinkInstance.js

 import { getDistance, getLinkColor, getRandom, getRangeValue, rangeColorToRgb, } from "@tsparticles/engine";
 import { drawLinkLine, drawLinkTriangle, setLinkFrequency } from "./Utils.js";
+const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5;
 export class LinkInstance {
@@ -32,3 +33,3 @@ constructor(container) {
                 }
-                const width = p1.retina.linksWidth ?? 0, maxDistance = p1.retina.linksDistance ?? 0, { backgroundMask } = options;
+                const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance, { backgroundMask } = options;
                 drawLinkLine({
@@ -57,8 +58,8 @@ context: ctx,
             }
-            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) / 2;
-            if (opacityTriangle <= 0) {
+            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;
             }
             container.canvas.draw((ctx) => {
-                const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? 0;
+                const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? minDistance;
                 if (getDistance(pos1, pos2) > linksDistance ||
@@ -96,6 +97,6 @@ getDistance(pos3, pos2) > linksDistance ||
             const vertices = p2.links?.filter((t) => {
-                const linkFreq = this._getLinkFrequency(p2, t.destination);
+                const linkFreq = this._getLinkFrequency(p2, t.destination), minCount = 0;
                 return (p2.options.links &&
                     linkFreq <= p2.options.links.frequency &&
-                    p1Links.findIndex((l) => l.destination === t.destination) >= 0);
+                    p1Links.findIndex((l) => l.destination === t.destination) >= minCount);
             });
@@ -126,3 +127,3 @@ if (!vertices?.length) {
         const { links, options } = particle;
-        if (!links || links.length <= 0) {
+        if (!links?.length) {
             return;
@@ -133,3 +134,3 @@ }
             this._drawTriangles(options, particle, link, p1Links);
-            if (link.opacity > 0 && (particle.retina.linksWidth ?? 0) > 0) {
+            if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {
                 this._drawLinkLine(particle, link);
@@ -142,2 +143,3 @@ }
         this._freqs.triangles = new Map();
+        await Promise.resolve();
     }
@@ -144,0 +146,0 @@ particleCreated(particle) {

package.json

 {
   "name": "@tsparticles/interaction-particles-links",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "tsParticles links particles interaction",
@@ -90,3 +90,3 @@ "homepage": "https://particles.js.org",
   "dependencies": {
-    "@tsparticles/engine": "^3.0.3"
+    "@tsparticles/engine": "^3.1.0"
   },
@@ -93,0 +93,0 @@ "publishConfig": {

tsparticles.interaction.particles.links.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v3.0.3
+ * v3.1.0
  */
@@ -105,2 +105,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+const CircleWarp_double = 2;
 class CircleWarp extends engine_root_window_.Circle {
@@ -145,6 +146,6 @@ constructor(x, y, radius, canvasSize) {
     if (circle.radius !== undefined) {
-      const biggerCircle = new engine_root_window_.Circle(newPos.x, newPos.y, circle.radius * 2);
+      const biggerCircle = new engine_root_window_.Circle(newPos.x, newPos.y, circle.radius * CircleWarp_double);
       return super.intersects(biggerCircle);
     } else if (rect.size !== undefined) {
-      const rectSW = new engine_root_window_.Rectangle(newPos.x, newPos.y, rect.size.width * 2, rect.size.height * 2);
+      const rectSW = new engine_root_window_.Rectangle(newPos.x, newPos.y, rect.size.width * CircleWarp_double, rect.size.height * CircleWarp_double);
       return super.intersects(rectSW);
@@ -261,2 +262,9 @@ }
 
+const squarePower = 2,
+  opacityOffset = 1,
+  origin = {
+    x: 0,
+    y: 0
+  },
+  minDistance = 0;
 function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
@@ -279,3 +287,3 @@ const {
     };
-  return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+  return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
@@ -318,3 +326,3 @@ class Linker extends engine_root_window_.ParticlesInteractorBase {
       canvasSize = container.canvas.size;
-    if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
+    if (pos1.x < origin.x || pos1.y < origin.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
       return;
@@ -324,3 +332,3 @@ }
       optOpacity = linkOpt1.opacity,
-      optDistance = p1.retina.linksDistance ?? 0,
+      optDistance = p1.retina.linksDistance ?? minDistance,
       warp = linkOpt1.warp,
@@ -335,3 +343,3 @@ range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new engine_root_window_.Circle(pos1.x, pos1.y, optDistance),
       const pos2 = p2.getPosition();
-      if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
+      if (pos2.x < origin.x || pos2.y < origin.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
         continue;
@@ -343,3 +351,3 @@ }
       }
-      const opacityLine = (1 - distance / optDistance) * optOpacity;
+      const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
       this._setColor(p1);
@@ -351,2 +359,3 @@ p1.links.push({
     }
+    await Promise.resolve();
   }
@@ -511,2 +520,6 @@ isEnabled(particle) {
 
+const minOpacity = 0,
+  minWidth = 0,
+  LinkInstance_minDistance = 0,
+  half = 0.5;
 class LinkInstance {
@@ -545,4 +558,4 @@ constructor(container) {
         }
-        const width = p1.retina.linksWidth ?? 0,
-          maxDistance = p1.retina.linksDistance ?? 0,
+        const width = p1.retina.linksWidth ?? minWidth,
+          maxDistance = p1.retina.linksDistance ?? LinkInstance_minDistance,
           {
@@ -578,4 +591,4 @@ backgroundMask
         p3 = link2.destination,
-        opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) / 2;
-      if (opacityTriangle <= 0) {
+        opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+      if (opacityTriangle <= minOpacity) {
         return;
@@ -587,3 +600,3 @@ }
           pos3 = p3.getPosition(),
-          linksDistance = p1.retina.linksDistance ?? 0;
+          linksDistance = p1.retina.linksDistance ?? LinkInstance_minDistance;
         if ((0,engine_root_window_.getDistance)(pos1, pos2) > linksDistance || (0,engine_root_window_.getDistance)(pos3, pos2) > linksDistance || (0,engine_root_window_.getDistance)(pos3, pos1) > linksDistance) {
@@ -617,4 +630,5 @@ return;
       const vertices = p2.links?.filter(t => {
-        const linkFreq = this._getLinkFrequency(p2, t.destination);
-        return p2.options.links && linkFreq <= p2.options.links.frequency && p1Links.findIndex(l => l.destination === t.destination) >= 0;
+        const linkFreq = this._getLinkFrequency(p2, t.destination),
+          minCount = 0;
+        return p2.options.links && linkFreq <= p2.options.links.frequency && p1Links.findIndex(l => l.destination === t.destination) >= minCount;
       });
@@ -649,3 +663,3 @@ if (!vertices?.length) {
     } = particle;
-    if (!links || links.length <= 0) {
+    if (!links?.length) {
       return;
@@ -656,3 +670,3 @@ }
       this._drawTriangles(options, particle, link, p1Links);
-      if (link.opacity > 0 && (particle.retina.linksWidth ?? 0) > 0) {
+      if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {
         this._drawLinkLine(particle, link);
@@ -665,2 +679,3 @@ }
     this._freqs.triangles = new Map();
+    await Promise.resolve();
   }
@@ -667,0 +682,0 @@ particleCreated(particle) {

tsparticles.interaction.particles.links.min.js

 /*! 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=>(()=>{"use strict";var t={533: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={};return(()=>{e.r(s),e.d(s,{Links:()=>r,LinksShadow:()=>n,LinksTriangle:()=>o,loadParticlesLinksInteraction:()=>p});var i=e(533);class t extends i.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(t){if(super.intersects(t))return!0;const n=t,e=t,s={x:t.position.x-this.canvasSize.width,y:t.position.y-this.canvasSize.height};if(void 0!==e.radius){const t=new i.Circle(s.x,s.y,2*e.radius);return super.intersects(t)}if(void 0!==n.size){const t=new i.Rectangle(s.x,s.y,2*n.size.width,2*n.size.height);return super.intersects(t)}return!1}}class n{constructor(){this.blur=5,this.color=new i.OptionsColor,this.color.value="#000",this.enable=!1}load(t){t&&(void 0!==t.blur&&(this.blur=t.blur),this.color=i.OptionsColor.create(this.color,t.color),void 0!==t.enable&&(this.enable=t.enable))}}class o{constructor(){this.enable=!1,this.frequency=1}load(t){t&&(void 0!==t.color&&(this.color=i.OptionsColor.create(this.color,t.color)),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.frequency&&(this.frequency=t.frequency),void 0!==t.opacity&&(this.opacity=t.opacity))}}class r{constructor(){this.blink=!1,this.color=new i.OptionsColor,this.color.value="#fff",this.consent=!1,this.distance=100,this.enable=!1,this.frequency=1,this.opacity=1,this.shadow=new n,this.triangles=new o,this.width=1,this.warp=!1}load(t){t&&(void 0!==t.id&&(this.id=t.id),void 0!==t.blink&&(this.blink=t.blink),this.color=i.OptionsColor.create(this.color,t.color),void 0!==t.consent&&(this.consent=t.consent),void 0!==t.distance&&(this.distance=t.distance),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.frequency&&(this.frequency=t.frequency),void 0!==t.opacity&&(this.opacity=t.opacity),this.shadow.load(t.shadow),this.triangles.load(t.triangles),void 0!==t.width&&(this.width=t.width),void 0!==t.warp&&(this.warp=t.warp))}}function a(t,n,e,s,o){const{dx:r,dy:a,distance:c}=(0,i.getDistances)(t,n);if(!o||c<=e)return c;const l={x:Math.abs(r),y:Math.abs(a)},d=Math.min(l.x,s.width-l.x),h=Math.min(l.y,s.height-l.y);return Math.sqrt(d**2+h**2)}class c extends i.ParticlesInteractorBase{constructor(t){super(t),this._setColor=t=>{if(!t.options.links)return;const n=this.linkContainer,e=t.options.links;let s=void 0===e.id?n.particles.linksColor:n.particles.linksColors.get(e.id);if(s)return;const o=e.color;s=(0,i.getLinkRandomColor)(o,e.blink,e.consent),void 0===e.id?n.particles.linksColor=s:n.particles.linksColors.set(e.id,s)},this.linkContainer=t}clear(){}init(){this.linkContainer.particles.linksColor=void 0,this.linkContainer.particles.linksColors=new Map}async interact(n){if(!n.options.links)return;n.links=[];const e=n.getPosition(),s=this.container,o=s.canvas.size;if(e.x<0||e.y<0||e.x>o.width||e.y>o.height)return;const r=n.options.links,c=r.opacity,l=n.retina.linksDistance??0,d=r.warp,h=d?new t(e.x,e.y,l,o):new i.Circle(e.x,e.y,l),p=s.particles.quadTree.query(h);for(const i of p){const t=i.options.links;if(n===i||!t?.enable||r.id!==t.id||i.spawning||i.destroyed||!i.links||n.links.some((t=>t.destination===i))||i.links.some((i=>i.destination===n)))continue;const s=i.getPosition();if(s.x<0||s.y<0||s.x>o.width||s.y>o.height)continue;const h=a(e,s,l,o,d&&t.warp);if(h>l)continue;const p=(1-h/l)*c;this._setColor(n),n.links.push({destination:i,opacity:p})}}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){i.links||(i.links=new r);for(const n of t)i.links.load(n?.links)}reset(){}}function l(t,n){const e=((s=t.map((i=>i.id))).sort(((i,t)=>i-t)),s.join("_"));var s;let o=n.get(e);return void 0===o&&(o=(0,i.getRandom)(),n.set(e,o)),o}class d{constructor(t){this.container=t,this._drawLinkLine=(t,n)=>{const e=t.options.links;if(!e?.enable)return;const s=this.container,o=s.actualOptions,r=n.destination,a=t.getPosition(),c=r.getPosition();let l=n.opacity;s.canvas.draw((n=>{let d;const h=t.options.twinkle?.lines;if(h?.enable){const t=h.frequency,n=(0,i.rangeColorToRgb)(h.color);(0,i.getRandom)()<t&&n&&(d=n,l=(0,i.getRangeValue)(h.opacity))}if(!d){const n=void 0!==e.id?s.particles.linksColors.get(e.id):s.particles.linksColor;d=(0,i.getLinkColor)(t,r,n)}if(!d)return;const p=t.retina.linksWidth??0,u=t.retina.linksDistance??0,{backgroundMask:y}=o;!function(t){let n=!1;const{begin:e,end:s,maxDistance:o,context:r,canvasSize:a,width:c,backgroundMask:l,colorLine:d,opacity:h,links:p}=t;if((0,i.getDistance)(e,s)<=o)(0,i.drawLine)(r,e,s),n=!0;else if(p.warp){let t,c;const l={x:s.x-a.width,y:s.y},d=(0,i.getDistances)(e,l);if(d.distance<=o){const i=e.y-d.dy/d.dx*e.x;t={x:0,y:i},c={x:a.width,y:i}}else{const n={x:s.x,y:s.y-a.height},r=(0,i.getDistances)(e,n);if(r.distance<=o){const i=-(e.y-r.dy/r.dx*e.x)/(r.dy/r.dx);t={x:i,y:0},c={x:i,y:a.height}}else{const n={x:s.x-a.width,y:s.y-a.height},r=(0,i.getDistances)(e,n);if(r.distance<=o){const i=e.y-r.dy/r.dx*e.x;t={x:-i/(r.dy/r.dx),y:i},c={x:t.x+a.width,y:t.y+a.height}}}}t&&c&&((0,i.drawLine)(r,e,t),(0,i.drawLine)(r,s,c),n=!0)}if(!n)return;r.lineWidth=c,l.enable&&(r.globalCompositeOperation=l.composite),r.strokeStyle=(0,i.getStyleFromRgb)(d,h);const{shadow:u}=p;if(u.enable){const t=(0,i.rangeColorToRgb)(u.color);t&&(r.shadowBlur=u.blur,r.shadowColor=(0,i.getStyleFromRgb)(t))}r.stroke()}({context:n,width:p,begin:a,end:c,maxDistance:u,canvasSize:s.canvas.size,links:e,backgroundMask:y,colorLine:d,opacity:l})}))},this._drawLinkTriangle=(t,n,e)=>{const s=t.options.links;if(!s?.enable)return;const o=s.triangles;if(!o.enable)return;const r=this.container,a=r.actualOptions,c=n.destination,l=e.destination,d=o.opacity??(n.opacity+e.opacity)/2;d<=0||r.canvas.draw((n=>{const e=t.getPosition(),h=c.getPosition(),p=l.getPosition(),u=t.retina.linksDistance??0;if((0,i.getDistance)(e,h)>u||(0,i.getDistance)(p,h)>u||(0,i.getDistance)(p,e)>u)return;let y=(0,i.rangeColorToRgb)(o.color);if(!y){const n=void 0!==s.id?r.particles.linksColors.get(s.id):r.particles.linksColor;y=(0,i.getLinkColor)(t,c,n)}y&&function(t){const{context:n,pos1:e,pos2:s,pos3:o,backgroundMask:r,colorTriangle:a,opacityTriangle:c}=t;!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()}(n,e,s,o),r.enable&&(n.globalCompositeOperation=r.composite),n.fillStyle=(0,i.getStyleFromRgb)(a,c),n.fill()}({context:n,pos1:e,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)=>l([i,t],this._freqs.links),this._getTriangleFrequency=(i,t,n)=>l([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||n.length<=0)return;const s=n.filter((i=>e.links&&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}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 h{constructor(){this.id="links"}getPlugin(i){return new d(i)}loadOptions(){}needsPlugin(){return!0}}async function p(i,t=!0){await async function(i,t=!0){await i.addInteractor("particlesLinks",(i=>new c(i)),t)}(i,t),await async function(i,t=!0){const n=new h;await i.addPlugin(n,t)}(i,t)}})(),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=>(()=>{"use strict";var t={533: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={};return(()=>{e.r(s),e.d(s,{Links:()=>r,LinksShadow:()=>n,LinksTriangle:()=>o,loadParticlesLinksInteraction:()=>y});var i=e(533);class t extends i.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(t){if(super.intersects(t))return!0;const n=t,e=t,s={x:t.position.x-this.canvasSize.width,y:t.position.y-this.canvasSize.height};if(void 0!==e.radius){const t=new i.Circle(s.x,s.y,2*e.radius);return super.intersects(t)}if(void 0!==n.size){const t=new i.Rectangle(s.x,s.y,2*n.size.width,2*n.size.height);return super.intersects(t)}return!1}}class n{constructor(){this.blur=5,this.color=new i.OptionsColor,this.color.value="#000",this.enable=!1}load(t){t&&(void 0!==t.blur&&(this.blur=t.blur),this.color=i.OptionsColor.create(this.color,t.color),void 0!==t.enable&&(this.enable=t.enable))}}class o{constructor(){this.enable=!1,this.frequency=1}load(t){t&&(void 0!==t.color&&(this.color=i.OptionsColor.create(this.color,t.color)),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.frequency&&(this.frequency=t.frequency),void 0!==t.opacity&&(this.opacity=t.opacity))}}class r{constructor(){this.blink=!1,this.color=new i.OptionsColor,this.color.value="#fff",this.consent=!1,this.distance=100,this.enable=!1,this.frequency=1,this.opacity=1,this.shadow=new n,this.triangles=new o,this.width=1,this.warp=!1}load(t){t&&(void 0!==t.id&&(this.id=t.id),void 0!==t.blink&&(this.blink=t.blink),this.color=i.OptionsColor.create(this.color,t.color),void 0!==t.consent&&(this.consent=t.consent),void 0!==t.distance&&(this.distance=t.distance),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.frequency&&(this.frequency=t.frequency),void 0!==t.opacity&&(this.opacity=t.opacity),this.shadow.load(t.shadow),this.triangles.load(t.triangles),void 0!==t.width&&(this.width=t.width),void 0!==t.warp&&(this.warp=t.warp))}}const a=0,l=0;function c(t,n,e,s,o){const{dx:r,dy:a,distance:l}=(0,i.getDistances)(t,n);if(!o||l<=e)return l;const c={x:Math.abs(r),y:Math.abs(a)},d=Math.min(c.x,s.width-c.x),h=Math.min(c.y,s.height-c.y);return Math.sqrt(d**2+h**2)}class d extends i.ParticlesInteractorBase{constructor(t){super(t),this._setColor=t=>{if(!t.options.links)return;const n=this.linkContainer,e=t.options.links;let s=void 0===e.id?n.particles.linksColor:n.particles.linksColors.get(e.id);if(s)return;const o=e.color;s=(0,i.getLinkRandomColor)(o,e.blink,e.consent),void 0===e.id?n.particles.linksColor=s:n.particles.linksColors.set(e.id,s)},this.linkContainer=t}clear(){}init(){this.linkContainer.particles.linksColor=void 0,this.linkContainer.particles.linksColors=new Map}async interact(n){if(!n.options.links)return;n.links=[];const e=n.getPosition(),s=this.container,o=s.canvas.size;if(e.x<a||e.y<l||e.x>o.width||e.y>o.height)return;const r=n.options.links,d=r.opacity,h=n.retina.linksDistance??0,p=r.warp,u=p?new t(e.x,e.y,h,o):new i.Circle(e.x,e.y,h),y=s.particles.quadTree.query(u);for(const i of y){const t=i.options.links;if(n===i||!t?.enable||r.id!==t.id||i.spawning||i.destroyed||!i.links||n.links.some((t=>t.destination===i))||i.links.some((i=>i.destination===n)))continue;const s=i.getPosition();if(s.x<a||s.y<l||s.x>o.width||s.y>o.height)continue;const u=c(e,s,h,o,p&&t.warp);if(u>h)continue;const y=(1-u/h)*d;this._setColor(n),n.links.push({destination:i,opacity:y})}await Promise.resolve()}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){i.links||(i.links=new r);for(const n of t)i.links.load(n?.links)}reset(){}}function h(t,n){const e=((s=t.map((i=>i.id))).sort(((i,t)=>i-t)),s.join("_"));var s;let o=n.get(e);return void 0===o&&(o=(0,i.getRandom)(),n.set(e,o)),o}class p{constructor(t){this.container=t,this._drawLinkLine=(t,n)=>{const e=t.options.links;if(!e?.enable)return;const s=this.container,o=s.actualOptions,r=n.destination,a=t.getPosition(),l=r.getPosition();let c=n.opacity;s.canvas.draw((n=>{let d;const h=t.options.twinkle?.lines;if(h?.enable){const t=h.frequency,n=(0,i.rangeColorToRgb)(h.color);(0,i.getRandom)()<t&&n&&(d=n,c=(0,i.getRangeValue)(h.opacity))}if(!d){const n=void 0!==e.id?s.particles.linksColors.get(e.id):s.particles.linksColor;d=(0,i.getLinkColor)(t,r,n)}if(!d)return;const p=t.retina.linksWidth??0,u=t.retina.linksDistance??0,{backgroundMask:y}=o;!function(t){let n=!1;const{begin:e,end:s,maxDistance:o,context:r,canvasSize:a,width:l,backgroundMask:c,colorLine:d,opacity:h,links:p}=t;if((0,i.getDistance)(e,s)<=o)(0,i.drawLine)(r,e,s),n=!0;else if(p.warp){let t,l;const c={x:s.x-a.width,y:s.y},d=(0,i.getDistances)(e,c);if(d.distance<=o){const i=e.y-d.dy/d.dx*e.x;t={x:0,y:i},l={x:a.width,y:i}}else{const n={x:s.x,y:s.y-a.height},r=(0,i.getDistances)(e,n);if(r.distance<=o){const i=-(e.y-r.dy/r.dx*e.x)/(r.dy/r.dx);t={x:i,y:0},l={x:i,y:a.height}}else{const n={x:s.x-a.width,y:s.y-a.height},r=(0,i.getDistances)(e,n);if(r.distance<=o){const i=e.y-r.dy/r.dx*e.x;t={x:-i/(r.dy/r.dx),y:i},l={x:t.x+a.width,y:t.y+a.height}}}}t&&l&&((0,i.drawLine)(r,e,t),(0,i.drawLine)(r,s,l),n=!0)}if(!n)return;r.lineWidth=l,c.enable&&(r.globalCompositeOperation=c.composite),r.strokeStyle=(0,i.getStyleFromRgb)(d,h);const{shadow:u}=p;if(u.enable){const t=(0,i.rangeColorToRgb)(u.color);t&&(r.shadowBlur=u.blur,r.shadowColor=(0,i.getStyleFromRgb)(t))}r.stroke()}({context:n,width:p,begin:a,end:l,maxDistance:u,canvasSize:s.canvas.size,links:e,backgroundMask:y,colorLine:d,opacity:c})}))},this._drawLinkTriangle=(t,n,e)=>{const s=t.options.links;if(!s?.enable)return;const o=s.triangles;if(!o.enable)return;const r=this.container,a=r.actualOptions,l=n.destination,c=e.destination,d=o.opacity??.5*(n.opacity+e.opacity);d<=0||r.canvas.draw((n=>{const e=t.getPosition(),h=l.getPosition(),p=c.getPosition(),u=t.retina.linksDistance??0;if((0,i.getDistance)(e,h)>u||(0,i.getDistance)(p,h)>u||(0,i.getDistance)(p,e)>u)return;let y=(0,i.rangeColorToRgb)(o.color);if(!y){const n=void 0!==s.id?r.particles.linksColors.get(s.id):r.particles.linksColor;y=(0,i.getLinkColor)(t,l,n)}y&&function(t){const{context:n,pos1:e,pos2:s,pos3:o,backgroundMask:r,colorTriangle:a,opacityTriangle:l}=t;!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()}(n,e,s,o),r.enable&&(n.globalCompositeOperation=r.composite),n.fillStyle=(0,i.getStyleFromRgb)(a,l),n.fill()}({context:n,pos1:e,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)=>h([i,t],this._freqs.links),this._getTriangleFrequency=(i,t,n)=>h([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&&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 u{constructor(){this.id="links"}getPlugin(i){return new p(i)}loadOptions(){}needsPlugin(){return!0}}async function y(i,t=!0){await async function(i,t=!0){await i.addInteractor("particlesLinks",(i=>new d(i)),t)}(i,t),await async function(i,t=!0){const n=new u;await i.addPlugin(n,t)}(i,t)}})(),s})()));

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

@@ -1,1 +0,1 @@
-/*! tsParticles Links Particles Interaction v3.0.3 by Matteo Bruni */
+/*! tsParticles Links Particles Interaction v3.1.0 by Matteo Bruni */

types/Types.d.ts

@@ -19,3 +19,3 @@ import type { BackgroundMask, Container, ICoordinates, IDimension, IParticlesOptions, IRgb, Particle, ParticlesOptions } from "@tsparticles/engine";
 };
-export type LinkLineDrawParams = {
+export interface LinkLineDrawParams {
     backgroundMask: BackgroundMask;
@@ -31,4 +31,4 @@ begin: ICoordinates;
     width: number;
-};
-export type LinkTriangleDrawParams = {
+}
+export interface LinkTriangleDrawParams {
     backgroundMask: BackgroundMask;
@@ -41,3 +41,3 @@ colorTriangle: IRgb;
     pos3: ICoordinates;
-};
+}
 export type IParticlesLinkOptions = IParticlesOptions & {
@@ -44,0 +44,0 @@ links?: ILinks;

umd/CircleWarp.js

@@ -14,2 +14,3 @@ (function (factory) {
     const engine_1 = require("@tsparticles/engine");
+    const double = 2;
     class CircleWarp extends engine_1.Circle {
@@ -38,7 +39,7 @@ constructor(x, y, radius, canvasSize) {
             if (circle.radius !== undefined) {
-                const biggerCircle = new engine_1.Circle(newPos.x, newPos.y, circle.radius * 2);
+                const biggerCircle = new engine_1.Circle(newPos.x, newPos.y, circle.radius * double);
                 return super.intersects(biggerCircle);
             }
             else if (rect.size !== undefined) {
-                const rectSW = new engine_1.Rectangle(newPos.x, newPos.y, rect.size.width * 2, rect.size.height * 2);
+                const rectSW = new engine_1.Rectangle(newPos.x, newPos.y, rect.size.width * double, rect.size.height * double);
                 return super.intersects(rectSW);
@@ -45,0 +46,0 @@ }

umd/Linker.js

@@ -16,2 +16,6 @@ (function (factory) {
     const Links_js_1 = require("./Options/Classes/Links.js");
+    const squarePower = 2, opacityOffset = 1, origin = {
+        x: 0,
+        y: 0,
+    }, minDistance = 0;
     function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
@@ -29,3 +33,3 @@ const { dx, dy, distance } = (0, engine_1.getDistances)(pos1, pos2);
         };
-        return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+        return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
     }
@@ -69,6 +73,6 @@ class Linker extends engine_1.ParticlesInteractorBase {
             const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
-            if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
+            if (pos1.x < origin.x || pos1.y < origin.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
                 return;
             }
-            const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? 0, warp = linkOpt1.warp, range = warp
+            const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp, range = warp
                 ? new CircleWarp_js_1.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)
@@ -89,3 +93,3 @@ : new engine_1.Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
                 const pos2 = p2.getPosition();
-                if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
+                if (pos2.x < origin.x || pos2.y < origin.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
                     continue;
@@ -97,3 +101,3 @@ }
                 }
-                const opacityLine = (1 - distance / optDistance) * optOpacity;
+                const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
                 this._setColor(p1);
@@ -105,2 +109,3 @@ p1.links.push({
             }
+            await Promise.resolve();
         }
@@ -107,0 +112,0 @@ isEnabled(particle) {

umd/LinkInstance.js

@@ -15,2 +15,3 @@ (function (factory) {
     const Utils_js_1 = require("./Utils.js");
+    const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5;
     class LinkInstance {
@@ -45,3 +46,3 @@ constructor(container) {
                     }
-                    const width = p1.retina.linksWidth ?? 0, maxDistance = p1.retina.linksDistance ?? 0, { backgroundMask } = options;
+                    const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance, { backgroundMask } = options;
                     (0, Utils_js_1.drawLinkLine)({
@@ -70,8 +71,8 @@ context: ctx,
                 }
-                const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) / 2;
-                if (opacityTriangle <= 0) {
+                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;
                 }
                 container.canvas.draw((ctx) => {
-                    const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? 0;
+                    const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? minDistance;
                     if ((0, engine_1.getDistance)(pos1, pos2) > linksDistance ||
@@ -109,6 +110,6 @@ (0, engine_1.getDistance)(pos3, pos2) > linksDistance ||
                 const vertices = p2.links?.filter((t) => {
-                    const linkFreq = this._getLinkFrequency(p2, t.destination);
+                    const linkFreq = this._getLinkFrequency(p2, t.destination), minCount = 0;
                     return (p2.options.links &&
                         linkFreq <= p2.options.links.frequency &&
-                        p1Links.findIndex((l) => l.destination === t.destination) >= 0);
+                        p1Links.findIndex((l) => l.destination === t.destination) >= minCount);
                 });
@@ -139,3 +140,3 @@ if (!vertices?.length) {
             const { links, options } = particle;
-            if (!links || links.length <= 0) {
+            if (!links?.length) {
                 return;
@@ -146,3 +147,3 @@ }
                 this._drawTriangles(options, particle, link, p1Links);
-                if (link.opacity > 0 && (particle.retina.linksWidth ?? 0) > 0) {
+                if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {
                     this._drawLinkLine(particle, link);
@@ -155,2 +156,3 @@ }
             this._freqs.triangles = new Map();
+            await Promise.resolve();
         }
@@ -157,0 +159,0 @@ particleCreated(particle) {

No alert changes

Improved metrics

Total package byte prevSize

414481

increased by0.53%

Lines of code

3287

increased by1.45%

Dependency changes

• Updated@tsparticles/engine@^3.1.0