npm - @tsparticles/interaction-particles-links - Versions diffs - 3.0.2 → 3.1.0 - Mend

@tsparticles/interaction-particles-links 3.0.2 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/browser/CircleWarp.js +3 -2
package/browser/LinkInstance.js +10 -8
package/browser/Linker.js +10 -5
package/cjs/CircleWarp.js +3 -2
package/cjs/LinkInstance.js +10 -8
package/cjs/Linker.js +10 -5
package/esm/CircleWarp.js +3 -2
package/esm/LinkInstance.js +10 -8
package/esm/Linker.js +10 -5
package/package.json +2 -2
package/report.html +2 -2
package/tsparticles.interaction.particles.links.js +32 -17
package/tsparticles.interaction.particles.links.min.js +1 -1
package/tsparticles.interaction.particles.links.min.js.LICENSE.txt +1 -1
package/types/Types.d.ts +4 -4
package/umd/CircleWarp.js +3 -2
package/umd/LinkInstance.js +10 -8
package/umd/Linker.js +10 -5

package/browser/CircleWarp.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Circle, Rectangle } from "@tsparticles/engine";
+const double = 2;
 export class CircleWarp extends Circle {
     constructor(x, y, radius, canvasSize) {
         super(x, y, radius);
@@ -22,11 +23,11 @@ export class CircleWarp extends Circle {
             y: range.position.y - this.canvasSize.height,
         };
         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);
         }
         return false;

package/browser/LinkInstance.js CHANGED Viewed

@@ -1,5 +1,6 @@
 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 {
     constructor(container) {
         this.container = container;
@@ -29,7 +30,7 @@ export class LinkInstance {
                 if (!colorLine) {
                     return;
                 }
-                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({
                     context: ctx,
                     width,
@@ -53,12 +54,12 @@ 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) / 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 ||
                     getDistance(pos3, pos2) > linksDistance ||
                     getDistance(pos3, pos1) > linksDistance) {
@@ -91,10 +92,10 @@ export class LinkInstance {
                 return;
             }
             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);
             });
             if (!vertices?.length) {
                 return;
@@ -120,13 +121,13 @@ export class LinkInstance {
     }
     drawParticle(context, particle) {
         const { links, options } = particle;
-        if (!links || links.length <= 0) {
+        if (!links?.length) {
             return;
         }
         const p1Links = links.filter((l) => options.links && this._getLinkFrequency(particle, l.destination) <= options.links.frequency);
         for (const link of p1Links) {
             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);
             }
         }
@@ -134,6 +135,7 @@ export class LinkInstance {
     async init() {
         this._freqs.links = new Map();
         this._freqs.triangles = new Map();
+        await Promise.resolve();
     }
     particleCreated(particle) {
         particle.links = [];

package/browser/Linker.js CHANGED Viewed

@@ -1,6 +1,10 @@
 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) {
     const { dx, dy, distance } = getDistances(pos1, pos2);
     if (!warp || distance <= optDistance) {
@@ -13,7 +17,7 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
         x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
         y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y),
     };
-    return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+    return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 export class Linker extends ParticlesInteractorBase {
     constructor(container) {
@@ -52,10 +56,10 @@ export class Linker extends ParticlesInteractorBase {
         }
         p1.links = [];
         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)
             : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
         for (const p2 of query) {
@@ -71,20 +75,21 @@ export class Linker extends ParticlesInteractorBase {
                 continue;
             }
             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;
             }
             const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
             if (distance > optDistance) {
                 continue;
             }
-            const opacityLine = (1 - distance / optDistance) * optOpacity;
+            const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
             this._setColor(p1);
             p1.links.push({
                 destination: p2,
                 opacity: opacityLine,
             });
         }
+        await Promise.resolve();
     }
     isEnabled(particle) {
         return !!particle.options.links?.enable;

package/cjs/CircleWarp.js CHANGED Viewed

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CircleWarp = void 0;
 const engine_1 = require("@tsparticles/engine");
+const double = 2;
 class CircleWarp extends engine_1.Circle {
     constructor(x, y, radius, canvasSize) {
         super(x, y, radius);
@@ -25,11 +26,11 @@ class CircleWarp extends engine_1.Circle {
             y: range.position.y - this.canvasSize.height,
         };
         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);
         }
         return false;

package/cjs/LinkInstance.js CHANGED Viewed

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkInstance = void 0;
 const engine_1 = require("@tsparticles/engine");
 const Utils_js_1 = require("./Utils.js");
+const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5;
 class LinkInstance {
     constructor(container) {
         this.container = container;
@@ -32,7 +33,7 @@ class LinkInstance {
                 if (!colorLine) {
                     return;
                 }
-                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)({
                     context: ctx,
                     width,
@@ -56,12 +57,12 @@ 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) / 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 ||
                     (0, engine_1.getDistance)(pos3, pos2) > linksDistance ||
                     (0, engine_1.getDistance)(pos3, pos1) > linksDistance) {
@@ -94,10 +95,10 @@ class LinkInstance {
                 return;
             }
             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);
             });
             if (!vertices?.length) {
                 return;
@@ -123,13 +124,13 @@ class LinkInstance {
     }
     drawParticle(context, particle) {
         const { links, options } = particle;
-        if (!links || links.length <= 0) {
+        if (!links?.length) {
             return;
         }
         const p1Links = links.filter((l) => options.links && this._getLinkFrequency(particle, l.destination) <= options.links.frequency);
         for (const link of p1Links) {
             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);
             }
         }
@@ -137,6 +138,7 @@ class LinkInstance {
     async init() {
         this._freqs.links = new Map();
         this._freqs.triangles = new Map();
+        await Promise.resolve();
     }
     particleCreated(particle) {
         particle.links = [];

package/cjs/Linker.js CHANGED Viewed

@@ -4,6 +4,10 @@ exports.Linker = void 0;
 const engine_1 = require("@tsparticles/engine");
 const CircleWarp_js_1 = require("./CircleWarp.js");
 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) {
     const { dx, dy, distance } = (0, engine_1.getDistances)(pos1, pos2);
     if (!warp || distance <= optDistance) {
@@ -16,7 +20,7 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
         x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
         y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y),
     };
-    return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+    return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 class Linker extends engine_1.ParticlesInteractorBase {
     constructor(container) {
@@ -55,10 +59,10 @@ class Linker extends engine_1.ParticlesInteractorBase {
         }
         p1.links = [];
         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)
             : new engine_1.Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
         for (const p2 of query) {
@@ -74,20 +78,21 @@ class Linker extends engine_1.ParticlesInteractorBase {
                 continue;
             }
             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;
             }
             const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
             if (distance > optDistance) {
                 continue;
             }
-            const opacityLine = (1 - distance / optDistance) * optOpacity;
+            const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
             this._setColor(p1);
             p1.links.push({
                 destination: p2,
                 opacity: opacityLine,
             });
         }
+        await Promise.resolve();
     }
     isEnabled(particle) {
         return !!particle.options.links?.enable;

package/esm/CircleWarp.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Circle, Rectangle } from "@tsparticles/engine";
+const double = 2;
 export class CircleWarp extends Circle {
     constructor(x, y, radius, canvasSize) {
         super(x, y, radius);
@@ -22,11 +23,11 @@ export class CircleWarp extends Circle {
             y: range.position.y - this.canvasSize.height,
         };
         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);
         }
         return false;

package/esm/LinkInstance.js CHANGED Viewed

@@ -1,5 +1,6 @@
 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 {
     constructor(container) {
         this.container = container;
@@ -29,7 +30,7 @@ export class LinkInstance {
                 if (!colorLine) {
                     return;
                 }
-                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({
                     context: ctx,
                     width,
@@ -53,12 +54,12 @@ 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) / 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 ||
                     getDistance(pos3, pos2) > linksDistance ||
                     getDistance(pos3, pos1) > linksDistance) {
@@ -91,10 +92,10 @@ export class LinkInstance {
                 return;
             }
             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);
             });
             if (!vertices?.length) {
                 return;
@@ -120,13 +121,13 @@ export class LinkInstance {
     }
     drawParticle(context, particle) {
         const { links, options } = particle;
-        if (!links || links.length <= 0) {
+        if (!links?.length) {
             return;
         }
         const p1Links = links.filter((l) => options.links && this._getLinkFrequency(particle, l.destination) <= options.links.frequency);
         for (const link of p1Links) {
             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);
             }
         }
@@ -134,6 +135,7 @@ export class LinkInstance {
     async init() {
         this._freqs.links = new Map();
         this._freqs.triangles = new Map();
+        await Promise.resolve();
     }
     particleCreated(particle) {
         particle.links = [];

package/esm/Linker.js CHANGED Viewed

@@ -1,6 +1,10 @@
 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) {
     const { dx, dy, distance } = getDistances(pos1, pos2);
     if (!warp || distance <= optDistance) {
@@ -13,7 +17,7 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
         x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
         y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y),
     };
-    return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+    return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 export class Linker extends ParticlesInteractorBase {
     constructor(container) {
@@ -52,10 +56,10 @@ export class Linker extends ParticlesInteractorBase {
         }
         p1.links = [];
         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)
             : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
         for (const p2 of query) {
@@ -71,20 +75,21 @@ export class Linker extends ParticlesInteractorBase {
                 continue;
             }
             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;
             }
             const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
             if (distance > optDistance) {
                 continue;
             }
-            const opacityLine = (1 - distance / optDistance) * optOpacity;
+            const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
             this._setColor(p1);
             p1.links.push({
                 destination: p2,
                 opacity: opacityLine,
             });
         }
+        await Promise.resolve();
     }
     isEnabled(particle) {
         return !!particle.options.links?.enable;

package/package.json CHANGED Viewed

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

package/report.html CHANGED Viewed

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/interaction-particles-links [6 Dec 2023 at 17:40]</title>
+    <title>@tsparticles/interaction-particles-links [13 Jan 2024 at 23:00]</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>
@@ -31,7 +31,7 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = [{"label":"tsparticles.interaction.particles.links.js","isAsset":true,"statSize":17184,"parsedSize":21077,"gzipSize":4965,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":17142,"groups":[{"id":493,"label":"index.js + 9 modules (concatenated)","path":"./dist/browser/index.js + 9 modules (concatenated)","statSize":17142,"parsedSize":21077,"gzipSize":4965,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser","statSize":17142,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/index.js","statSize":576,"parsedSize":708,"gzipSize":166,"inaccurateSizes":true},{"id":null,"label":"interaction.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/interaction.js","statSize":201,"parsedSize":247,"gzipSize":58,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes","statSize":2440,"groups":[{"id":null,"label":"Links.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/Links.js","statSize":1407,"parsedSize":1729,"gzipSize":407,"inaccurateSizes":true},{"id":null,"label":"LinksShadow.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/LinksShadow.js","statSize":478,"parsedSize":587,"gzipSize":138,"inaccurateSizes":true},{"id":null,"label":"LinksTriangle.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/LinksTriangle.js","statSize":555,"parsedSize":682,"gzipSize":160,"inaccurateSizes":true}],"parsedSize":3000,"gzipSize":706,"inaccurateSizes":true},{"id":null,"label":"plugin.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/plugin.js","statSize":388,"parsedSize":477,"gzipSize":112,"inaccurateSizes":true},{"id":null,"label":"Linker.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Linker.js","statSize":3430,"parsedSize":4217,"gzipSize":993,"inaccurateSizes":true},{"id":null,"label":"LinkInstance.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/LinkInstance.js","statSize":5588,"parsedSize":6870,"gzipSize":1618,"inaccurateSizes":true},{"id":null,"label":"CircleWarp.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/CircleWarp.js","statSize":1228,"parsedSize":1509,"gzipSize":355,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Utils.js","statSize":3291,"parsedSize":4046,"gzipSize":953,"inaccurateSizes":true}],"parsedSize":21077,"gzipSize":4965,"inaccurateSizes":true}]}],"parsedSize":21077,"gzipSize":4965},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.interaction.particles.links":true}}];
+      window.chartData = [{"label":"tsparticles.interaction.particles.links.js","isAsset":true,"statSize":17596,"parsedSize":21572,"gzipSize":5099,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":17554,"groups":[{"id":824,"label":"index.js + 9 modules (concatenated)","path":"./dist/browser/index.js + 9 modules (concatenated)","statSize":17554,"parsedSize":21572,"gzipSize":5099,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser","statSize":17554,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/index.js","statSize":576,"parsedSize":707,"gzipSize":167,"inaccurateSizes":true},{"id":null,"label":"interaction.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/interaction.js","statSize":201,"parsedSize":247,"gzipSize":58,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes","statSize":2440,"groups":[{"id":null,"label":"Links.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/Links.js","statSize":1407,"parsedSize":1729,"gzipSize":408,"inaccurateSizes":true},{"id":null,"label":"LinksShadow.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/LinksShadow.js","statSize":478,"parsedSize":587,"gzipSize":138,"inaccurateSizes":true},{"id":null,"label":"LinksTriangle.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/LinksTriangle.js","statSize":555,"parsedSize":682,"gzipSize":161,"inaccurateSizes":true}],"parsedSize":2998,"gzipSize":708,"inaccurateSizes":true},{"id":null,"label":"plugin.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/plugin.js","statSize":388,"parsedSize":476,"gzipSize":112,"inaccurateSizes":true},{"id":null,"label":"Linker.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Linker.js","statSize":3629,"parsedSize":4459,"gzipSize":1054,"inaccurateSizes":true},{"id":null,"label":"LinkInstance.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/LinkInstance.js","statSize":5768,"parsedSize":7088,"gzipSize":1675,"inaccurateSizes":true},{"id":null,"label":"CircleWarp.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/CircleWarp.js","statSize":1261,"parsedSize":1549,"gzipSize":366,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Utils.js","statSize":3291,"parsedSize":4044,"gzipSize":955,"inaccurateSizes":true}],"parsedSize":21572,"gzipSize":5099,"inaccurateSizes":true}]}],"parsedSize":21572,"gzipSize":5099},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.interaction.particles.links":true}}];
       window.entrypoints = ["tsparticles.interaction.particles.links","tsparticles.interaction.particles.links.min"];
       window.defaultSizes = "parsed";
     </script>

package/tsparticles.interaction.particles.links.js CHANGED Viewed

@@ -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.0.2
+ * v3.1.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -101,6 +101,7 @@ __webpack_require__.d(__webpack_exports__, {
 var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/CircleWarp.js
+const CircleWarp_double = 2;
 class CircleWarp extends engine_root_window_.Circle {
   constructor(x, y, radius, canvasSize) {
     super(x, y, radius);
@@ -140,10 +141,10 @@ class CircleWarp extends engine_root_window_.Circle {
         y: range.position.y - this.canvasSize.height
       };
     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);
     }
     return false;
@@ -255,6 +256,13 @@ class Links {
+const squarePower = 2,
+  opacityOffset = 1,
+  origin = {
+    x: 0,
+    y: 0
+  },
+  minDistance = 0;
 function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
   const {
     dx,
@@ -272,7 +280,7 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
       x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
       y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y)
     };
-  return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+  return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 class Linker extends engine_root_window_.ParticlesInteractorBase {
   constructor(container) {
@@ -310,12 +318,12 @@ class Linker extends engine_root_window_.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,
+      optDistance = p1.retina.linksDistance ?? minDistance,
       warp = linkOpt1.warp,
       range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new engine_root_window_.Circle(pos1.x, pos1.y, optDistance),
       query = container.particles.quadTree.query(range);
@@ -325,20 +333,21 @@ class Linker extends engine_root_window_.ParticlesInteractorBase {
         continue;
       }
       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;
       }
       const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
       if (distance > optDistance) {
         continue;
       }
-      const opacityLine = (1 - distance / optDistance) * optOpacity;
+      const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
       this._setColor(p1);
       p1.links.push({
         destination: p2,
         opacity: opacityLine
       });
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     return !!particle.options.links?.enable;
@@ -498,6 +507,10 @@ function setLinkFrequency(particles, dictionary) {
 ;// CONCATENATED MODULE: ./dist/browser/LinkInstance.js
+const minOpacity = 0,
+  minWidth = 0,
+  LinkInstance_minDistance = 0,
+  half = 0.5;
 class LinkInstance {
   constructor(container) {
     this.container = container;
@@ -531,8 +544,8 @@ class LinkInstance {
         if (!colorLine) {
           return;
         }
-        const width = p1.retina.linksWidth ?? 0,
-          maxDistance = p1.retina.linksDistance ?? 0,
+        const width = p1.retina.linksWidth ?? minWidth,
+          maxDistance = p1.retina.linksDistance ?? LinkInstance_minDistance,
           {
             backgroundMask
           } = options;
@@ -563,15 +576,15 @@ class LinkInstance {
         options = container.actualOptions,
         p2 = link1.destination,
         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;
       }
       container.canvas.draw(ctx => {
         const pos1 = p1.getPosition(),
           pos2 = p2.getPosition(),
           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) {
           return;
         }
@@ -600,8 +613,9 @@ class LinkInstance {
         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;
       });
       if (!vertices?.length) {
         return;
@@ -631,13 +645,13 @@ class LinkInstance {
       links,
       options
     } = particle;
-    if (!links || links.length <= 0) {
+    if (!links?.length) {
       return;
     }
     const p1Links = links.filter(l => options.links && this._getLinkFrequency(particle, l.destination) <= options.links.frequency);
     for (const link of p1Links) {
       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);
       }
     }
@@ -645,6 +659,7 @@ class LinkInstance {
   async init() {
     this._freqs.links = new Map();
     this._freqs.triangles = new Map();
+    await Promise.resolve();
   }
   particleCreated(particle) {
     particle.links = [];

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

@@ -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=>(()=>{"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})()));

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

	@@ -1 +1 @@
1	- /! tsParticles Links Particles Interaction v3.0.2 by Matteo Bruni /
1	+ /! tsParticles Links Particles Interaction v3.1.0 by Matteo Bruni /

package/types/Types.d.ts CHANGED Viewed

@@ -16,7 +16,7 @@ export type LinkParticle = Particle & {
         linksWidth?: number;
     };
 };
-export type LinkLineDrawParams = {
+export interface LinkLineDrawParams {
     backgroundMask: BackgroundMask;
     begin: ICoordinates;
     canvasSize: IDimension;
@@ -27,8 +27,8 @@ export type LinkLineDrawParams = {
     maxDistance: number;
     opacity: number;
     width: number;
-};
-export type LinkTriangleDrawParams = {
+}
+export interface LinkTriangleDrawParams {
     backgroundMask: BackgroundMask;
     colorTriangle: IRgb;
     context: CanvasRenderingContext2D;
@@ -36,7 +36,7 @@ export type LinkTriangleDrawParams = {
     pos1: ICoordinates;
     pos2: ICoordinates;
     pos3: ICoordinates;
-};
+}
 export type IParticlesLinkOptions = IParticlesOptions & {
     links?: ILinks;
 };

package/umd/CircleWarp.js CHANGED Viewed

@@ -11,6 +11,7 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CircleWarp = void 0;
     const engine_1 = require("@tsparticles/engine");
+    const double = 2;
     class CircleWarp extends engine_1.Circle {
         constructor(x, y, radius, canvasSize) {
             super(x, y, radius);
@@ -34,11 +35,11 @@
                 y: range.position.y - this.canvasSize.height,
             };
             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);
             }
             return false;

package/umd/LinkInstance.js CHANGED Viewed

@@ -12,6 +12,7 @@
     exports.LinkInstance = void 0;
     const engine_1 = require("@tsparticles/engine");
     const Utils_js_1 = require("./Utils.js");
+    const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5;
     class LinkInstance {
         constructor(container) {
             this.container = container;
@@ -41,7 +42,7 @@
                     if (!colorLine) {
                         return;
                     }
-                    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)({
                         context: ctx,
                         width,
@@ -65,12 +66,12 @@
                 if (!triangleOptions.enable) {
                     return;
                 }
-                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 ||
                         (0, engine_1.getDistance)(pos3, pos2) > linksDistance ||
                         (0, engine_1.getDistance)(pos3, pos1) > linksDistance) {
@@ -103,10 +104,10 @@
                     return;
                 }
                 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);
                 });
                 if (!vertices?.length) {
                     return;
@@ -132,13 +133,13 @@
         }
         drawParticle(context, particle) {
             const { links, options } = particle;
-            if (!links || links.length <= 0) {
+            if (!links?.length) {
                 return;
             }
             const p1Links = links.filter((l) => options.links && this._getLinkFrequency(particle, l.destination) <= options.links.frequency);
             for (const link of p1Links) {
                 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,6 +147,7 @@
         async init() {
             this._freqs.links = new Map();
             this._freqs.triangles = new Map();
+            await Promise.resolve();
         }
         particleCreated(particle) {
             particle.links = [];

package/umd/Linker.js CHANGED Viewed

@@ -13,6 +13,10 @@
     const engine_1 = require("@tsparticles/engine");
     const CircleWarp_js_1 = require("./CircleWarp.js");
     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) {
         const { dx, dy, distance } = (0, engine_1.getDistances)(pos1, pos2);
         if (!warp || distance <= optDistance) {
@@ -25,7 +29,7 @@
             x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
             y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y),
         };
-        return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+        return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
     }
     class Linker extends engine_1.ParticlesInteractorBase {
         constructor(container) {
@@ -64,10 +68,10 @@
             }
             p1.links = [];
             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)
                 : new engine_1.Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
             for (const p2 of query) {
@@ -83,20 +87,21 @@
                     continue;
                 }
                 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;
                 }
                 const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
                 if (distance > optDistance) {
                     continue;
                 }
-                const opacityLine = (1 - distance / optDistance) * optOpacity;
+                const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
                 this._setColor(p1);
                 p1.links.push({
                     destination: p2,
                     opacity: opacityLine,
                 });
             }
+            await Promise.resolve();
         }
         isEnabled(particle) {
             return !!particle.options.links?.enable;