@tsparticles/interaction-particles-links 3.9.0 → 4.0.0-alpha.0

package/418.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 418.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[418],{418(t,n,i){function e(t){t.register((n=>{n.addInteractor("particlesLinks",(async n=>{const{Linker:e}=await i.e(497).then(i.bind(i,497));return new e(n,t)}))}))}i.d(n,{loadLinksInteraction:()=>e})}}]);

package/418.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Links Particles Interaction v4.0.0-alpha.0 by Matteo Bruni */

package/497.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 497.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[497],{497(i,t,s){s.d(t,{Linker:()=>l});var n=s(303);class e extends n.Circle{constructor(i,t,s,n){super(i,t,s),this.canvasSize=n,this.canvasSize={...n}}contains(i){const{width:t,height:s}=this.canvasSize,{x:n,y:e}=i;return super.contains(i)||super.contains({x:n-t,y:e})||super.contains({x:n-t,y:e-s})||super.contains({x:n,y:e-s})}intersects(i){if(super.intersects(i))return!0;const t=i,s=i,e={x:i.position.x-this.canvasSize.width,y:i.position.y-this.canvasSize.height};if(Object.hasOwn(s,"radius")){const i=new n.Circle(e.x,e.y,2*s.radius);return super.intersects(i)}if(Object.hasOwn(t,"size")){const i=new n.Rectangle(e.x,e.y,2*t.size.width,2*t.size.height);return super.intersects(i)}return!1}}var o=s(509);const r=0,c=0;function a(i,t,s,e,o){const{dx:r,dy:c,distance:a}=(0,n.getDistances)(i,t);if(!o||a<=s)return a;const l={x:Math.abs(r),y:Math.abs(c)},h=Math.min(l.x,e.width-l.x),p=Math.min(l.y,e.height-l.y);return Math.sqrt(h**2+p**2)}class l extends n.ParticlesInteractorBase{constructor(i,t){super(i),this._setColor=i=>{if(!i.options.links)return;const t=this.container,s=i.options.links;let e=void 0===s.id?t.particles.linksColor:t.particles.linksColors.get(s.id);if(e)return;const o=s.color;e=(0,n.getLinkRandomColor)(this._engine,o,s.blink,s.consent),void 0===s.id?t.particles.linksColor=e:t.particles.linksColors.set(s.id,e)},this._engine=t}clear(){}init(){this.container.particles.linksColor=void 0,this.container.particles.linksColors=new Map}interact(i){if(!i.options.links)return;i.links=[];const t=i.getPosition(),s=this.container,o=s.canvas.size;if(t.x<r||t.y<c||t.x>o.width||t.y>o.height)return;const l=i.options.links,h=l.opacity,p=i.retina.linksDistance??0,u=l.warp;let d;d=u?new e(t.x,t.y,p,o):new n.Circle(t.x,t.y,p);const k=s.particles.quadTree.query(d);for(const s of k){const n=s.options.links;if(i===s||!n?.enable||l.id!==n.id||s.spawning||s.destroyed||!s.links||i.links.some((i=>i.destination===s))||s.links.some((t=>t.destination===i)))continue;const e=s.getPosition();if(e.x<r||e.y<c||e.x>o.width||e.y>o.height)continue;const d=a(t,e,p,o,u&&n.warp);if(d>p)continue;const k=(1-d/p)*h;this._setColor(i),i.links.push({destination:s,opacity:k})}}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){i.links??=new o.q;for(const s of t)i.links.load(s?.links)}reset(){}}}}]);

package/497.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Links Particles Interaction v4.0.0-alpha.0 by Matteo Bruni */

package/711.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 711.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[711],{711(i,n,t){function s(i){i.register((async i=>{const{LinksPlugin:n}=await t.e(956).then(t.bind(t,956));i.addPlugin(new n(i))}))}t.d(n,{loadLinksPlugin:()=>s})}}]);

package/711.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Links Particles Interaction v4.0.0-alpha.0 by Matteo Bruni */

package/956.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 956.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[956],{956(i,n,t){t.d(n,{LinksPlugin:()=>r});var e=t(303);function s(i,n){const t=((s=i.map((i=>i.id))).sort(((i,n)=>i-n)),s.join("_"));var s;let o=n.get(t);return void 0===o&&(o=(0,e.getRandom)(),n.set(t,o)),o}class o{constructor(i,n){this._drawLinkLine=(i,n)=>{const t=i.options.links;if(!t?.enable)return;const s=this._container,o=n.destination,r=i.getPosition(),a=o.getPosition();let l=n.opacity;s.canvas.draw((n=>{let c;const g=i.options.twinkle?.lines;if(g?.enable){const i=g.frequency,n=(0,e.rangeColorToRgb)(this._engine,g.color);(0,e.getRandom)()<i&&n&&(c=n,l=(0,e.getRangeValue)(g.opacity))}if(!c){const n=void 0!==t.id?s.particles.linksColors.get(t.id):s.particles.linksColor;c=(0,e.getLinkColor)(i,o,n)}if(!c)return;const d=i.retina.linksWidth??0,h=i.retina.linksDistance??0;!function(i){let n=!1;const{begin:t,end:s,engine:o,maxDistance:r,context:a,canvasSize:l,width:c,colorLine:g,opacity:d,links:h,hdr:k}=i;if((0,e.getDistance)(t,s)<=r)(0,e.drawLine)(a,t,s),n=!0;else if(h.warp){let i,o;const c={x:s.x-l.width,y:s.y},g=(0,e.getDistances)(t,c);if(g.distance<=r){const n=t.y-g.dy/g.dx*t.x;i={x:0,y:n},o={x:l.width,y:n}}else{const n={x:s.x,y:s.y-l.height},a=(0,e.getDistances)(t,n);if(a.distance<=r){const n=-(t.y-a.dy/a.dx*t.x)/(a.dy/a.dx);i={x:n,y:0},o={x:n,y:l.height}}else{const n={x:s.x-l.width,y:s.y-l.height},a=(0,e.getDistances)(t,n);if(a.distance<=r){const n=t.y-a.dy/a.dx*t.x;i={x:-n/(a.dy/a.dx),y:n},o={x:i.x+l.width,y:i.y+l.height}}}}i&&o&&((0,e.drawLine)(a,t,i),(0,e.drawLine)(a,s,o),n=!0)}if(!n)return;a.lineWidth=c,a.strokeStyle=(0,e.getStyleFromRgb)(g,k,d);const{shadow:y}=h;if(y.enable){const i=(0,e.rangeColorToRgb)(o,y.color);i&&(a.shadowBlur=y.blur,a.shadowColor=(0,e.getStyleFromRgb)(i,k))}a.stroke()}({context:n,width:d,begin:r,end:a,engine:this._engine,maxDistance:h,canvasSize:s.canvas.size,links:t,colorLine:c,opacity:l,hdr:s.hdr})}))},this._drawLinkTriangle=(i,n,t)=>{const s=i.options.links;if(!s?.enable)return;const o=s.triangles;if(!o.enable)return;const r=this._container,a=n.destination,l=t.destination,c=o.opacity??.5*(n.opacity+t.opacity);c<=0||r.canvas.draw((n=>{const t=i.getPosition(),g=a.getPosition(),d=l.getPosition(),h=i.retina.linksDistance??0;if((0,e.getDistance)(t,g)>h||(0,e.getDistance)(d,g)>h||(0,e.getDistance)(d,t)>h)return;let k=(0,e.rangeColorToRgb)(this._engine,o.color);if(!k){const n=void 0!==s.id?r.particles.linksColors.get(s.id):r.particles.linksColor;k=(0,e.getLinkColor)(i,a,n)}k&&function(i){const{context:n,hdr:t,pos1:s,pos2:o,pos3:r,colorTriangle:a,opacityTriangle:l}=i;!function(i,n,t,e){i.beginPath(),i.moveTo(n.x,n.y),i.lineTo(t.x,t.y),i.lineTo(e.x,e.y),i.closePath()}(n,s,o,r),n.fillStyle=(0,e.getStyleFromRgb)(a,t,l),n.fill()}({context:n,pos1:t,pos2:g,pos3:d,colorTriangle:k,opacityTriangle:c,hdr:r.hdr})}))},this._drawTriangles=(i,n,t,e)=>{const s=t.destination;if(!i.links?.triangles.enable||!s.options.links?.triangles.enable)return;const o=s.links?.filter((i=>{const n=this._getLinkFrequency(s,i.destination);return s.options.links&&n<=s.options.links.frequency&&e.findIndex((n=>n.destination===i.destination))>=0}));if(o?.length)for(const e of o){const o=e.destination;this._getTriangleFrequency(n,s,o)>i.links.triangles.frequency||this._drawLinkTriangle(n,t,e)}},this._getLinkFrequency=(i,n)=>s([i,n],this._freqs.links),this._getTriangleFrequency=(i,n,t)=>s([i,n,t],this._freqs.triangles),this._container=i,this._engine=n,this._freqs={links:new Map,triangles:new Map}}drawParticle(i,n){const{links:t,options:e}=n;if(!t?.length)return;const s=t.filter((i=>e.links&&(e.links.frequency>=1||this._getLinkFrequency(n,i.destination)<=e.links.frequency)));for(const i of s)this._drawTriangles(e,n,i,s),i.opacity>0&&(n.retina.linksWidth??0)>0&&this._drawLinkLine(n,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 n=this._container.retina.pixelRatio,{retina:t}=i,{distance:e,width:s}=i.options.links;t.linksDistance=e*n,t.linksWidth=s*n}particleDestroyed(i){i.links=[]}}class r{constructor(i){this.id="links",this._engine=i}getPlugin(i){return Promise.resolve(new o(i,this._engine))}loadOptions(){}needsPlugin(){return!0}}}}]);

package/956.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Links Particles Interaction v4.0.0-alpha.0 by Matteo Bruni */

package/browser/CircleWarp.js

@@ -21,11 +21,11 @@ export class CircleWarp extends Circle {
             x: range.position.x - this.canvasSize.width,
             y: range.position.y - this.canvasSize.height,
         };
-        if (circle.radius !== undefined) {
+        if (Object.hasOwn(circle, "radius")) {
             const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * double);
             return super.intersects(biggerCircle);
         }
-        else if (rect.size !== undefined) {
+        else if (Object.hasOwn(rect, "size")) {
             const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * double, rect.size.height * double);
             return super.intersects(rectSW);
         }

package/browser/LinkInstance.js

@@ -8,11 +8,11 @@ export class LinkInstance {
             if (!p1LinksOptions?.enable) {
                 return;
             }
-            const container = this._container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+            const container = this._container, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
             let opacity = link.opacity;
             container.canvas.draw(ctx => {
                 let colorLine;
-                const twinkle = p1.options.twinkle?.lines;
+                const twinkle = p1.options["twinkle"]?.lines;
                 if (twinkle?.enable) {
                     const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(this._engine, twinkle.color), twinkling = getRandom() < twinkleFreq;
                     if (twinkling && twinkleRgb) {
@@ -29,7 +29,7 @@ export class LinkInstance {
                 if (!colorLine) {
                     return;
                 }
-                const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance, { backgroundMask } = options;
+                const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance;
                 drawLinkLine({
                     context: ctx,
                     width,
@@ -39,9 +39,9 @@ export class LinkInstance {
                     maxDistance,
                     canvasSize: container.canvas.size,
                     links: p1LinksOptions,
-                    backgroundMask: backgroundMask,
                     colorLine,
                     opacity,
+                    hdr: container.hdr,
                 });
             });
         };
@@ -54,7 +54,7 @@ export class LinkInstance {
             if (!triangleOptions.enable) {
                 return;
             }
-            const container = this._container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+            const container = this._container, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
             if (opacityTriangle <= minOpacity) {
                 return;
             }
@@ -80,9 +80,9 @@ export class LinkInstance {
                     pos1,
                     pos2,
                     pos3,
-                    backgroundMask: options.backgroundMask,
                     colorTriangle,
                     opacityTriangle,
+                    hdr: container.hdr,
                 });
             });
         };
@@ -121,7 +121,7 @@ export class LinkInstance {
             triangles: new Map(),
         };
     }
-    drawParticle(context, particle) {
+    drawParticle(_context, particle) {
         const { links, options } = particle;
         if (!links?.length) {
             return;

package/browser/Linker.js

@@ -26,7 +26,7 @@ export class Linker extends ParticlesInteractorBase {
             if (!p1.options.links) {
                 return;
             }
-            const container = this._linkContainer, linksOptions = p1.options.links;
+            const container = this.container, linksOptions = p1.options.links;
             let linkColor = linksOptions.id === undefined
                 ? container.particles.linksColor
                 : container.particles.linksColors.get(linksOptions.id);
@@ -42,14 +42,13 @@ export class Linker extends ParticlesInteractorBase {
                 container.particles.linksColors.set(linksOptions.id, linkColor);
             }
         };
-        this._linkContainer = container;
         this._engine = engine;
     }
     clear() {
     }
     init() {
-        this._linkContainer.particles.linksColor = undefined;
-        this._linkContainer.particles.linksColors = new Map();
+        this.container.particles.linksColor = undefined;
+        this.container.particles.linksColors = new Map();
     }
     interact(p1) {
         if (!p1.options.links) {
@@ -101,9 +100,7 @@ export class Linker extends ParticlesInteractorBase {
         return !!particle.options.links?.enable;
     }
     loadParticlesOptions(options, ...sources) {
-        if (!options.links) {
-            options.links = new Links();
-        }
+        options.links ??= new Links();
         for (const source of sources) {
             options.links.load(source?.links);
         }

package/browser/Utils.js

@@ -8,7 +8,7 @@ export function drawTriangle(context, p1, p2, p3) {
 }
 export function drawLinkLine(params) {
     let drawn = false;
-    const { begin, end, engine, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
+    const { begin, end, engine, maxDistance, context, canvasSize, width, colorLine, opacity, links, hdr } = params;
     if (getDistance(begin, end) <= maxDistance) {
         drawLine(context, begin, end);
         drawn = true;
@@ -62,27 +62,21 @@ export function drawLinkLine(params) {
         return;
     }
     context.lineWidth = width;
-    if (backgroundMask.enable) {
-        context.globalCompositeOperation = backgroundMask.composite;
-    }
-    context.strokeStyle = getStyleFromRgb(colorLine, opacity);
+    context.strokeStyle = getStyleFromRgb(colorLine, hdr, opacity);
     const { shadow } = links;
     if (shadow.enable) {
         const shadowColor = rangeColorToRgb(engine, shadow.color);
         if (shadowColor) {
             context.shadowBlur = shadow.blur;
-            context.shadowColor = getStyleFromRgb(shadowColor);
+            context.shadowColor = getStyleFromRgb(shadowColor, hdr);
         }
     }
     context.stroke();
 }
 export function drawLinkTriangle(params) {
-    const { context, pos1, pos2, pos3, backgroundMask, colorTriangle, opacityTriangle } = params;
+    const { context, hdr, pos1, pos2, pos3, colorTriangle, opacityTriangle } = params;
     drawTriangle(context, pos1, pos2, pos3);
-    if (backgroundMask.enable) {
-        context.globalCompositeOperation = backgroundMask.composite;
-    }
-    context.fillStyle = getStyleFromRgb(colorTriangle, opacityTriangle);
+    context.fillStyle = getStyleFromRgb(colorTriangle, hdr, opacityTriangle);
     context.fill();
 }
 export function getLinkKey(ids) {

package/browser/index.js

@@ -1,13 +1,11 @@
-import { loadLinksInteraction } from "./interaction.js";
-import { loadLinksPlugin } from "./plugin.js";
-export async function loadParticlesLinksInteraction(engine, refresh = true) {
-    engine.checkVersion("3.9.0");
-    await loadLinksInteraction(engine, refresh);
-    await loadLinksPlugin(engine, refresh);
+export function loadParticlesLinksInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.0");
+    engine.register(async (e) => {
+        const { loadLinksInteraction } = await import("./interaction.js"), { loadLinksPlugin } = await import("./plugin.js");
+        loadLinksInteraction(e);
+        loadLinksPlugin(e);
+    });
 }
 export * from "./Options/Classes/Links.js";
 export * from "./Options/Classes/LinksShadow.js";
 export * from "./Options/Classes/LinksTriangle.js";
-export * from "./Options/Interfaces/ILinks.js";
-export * from "./Options/Interfaces/ILinksShadow.js";
-export * from "./Options/Interfaces/ILinksTriangle.js";

package/browser/interaction.js

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

package/browser/plugin.js

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

package/cjs/CircleWarp.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircleWarp = void 0;
-const engine_1 = require("@tsparticles/engine");
+import { Circle, Rectangle } from "@tsparticles/engine";
 const double = 2;
-class CircleWarp extends engine_1.Circle {
+export class CircleWarp extends Circle {
     constructor(x, y, radius, canvasSize) {
         super(x, y, radius);
         this.canvasSize = canvasSize;
@@ -24,15 +21,14 @@ class CircleWarp extends engine_1.Circle {
             x: range.position.x - this.canvasSize.width,
             y: range.position.y - this.canvasSize.height,
         };
-        if (circle.radius !== undefined) {
-            const biggerCircle = new engine_1.Circle(newPos.x, newPos.y, circle.radius * double);
+        if (Object.hasOwn(circle, "radius")) {
+            const biggerCircle = new 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 * double, rect.size.height * double);
+        else if (Object.hasOwn(rect, "size")) {
+            const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * double, rect.size.height * double);
             return super.intersects(rectSW);
         }
         return false;
     }
 }
-exports.CircleWarp = CircleWarp;

package/cjs/Interfaces.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/LinkInstance.js

@@ -1,39 +1,36 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkInstance = void 0;
-const engine_1 = require("@tsparticles/engine");
-const Utils_js_1 = require("./Utils.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, maxFrequency = 1;
-class LinkInstance {
+export class LinkInstance {
     constructor(container, engine) {
         this._drawLinkLine = (p1, link) => {
             const p1LinksOptions = p1.options.links;
             if (!p1LinksOptions?.enable) {
                 return;
             }
-            const container = this._container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+            const container = this._container, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
             let opacity = link.opacity;
             container.canvas.draw(ctx => {
                 let colorLine;
-                const twinkle = p1.options.twinkle?.lines;
+                const twinkle = p1.options["twinkle"]?.lines;
                 if (twinkle?.enable) {
-                    const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(this._engine, twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
+                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(this._engine, twinkle.color), twinkling = getRandom() < twinkleFreq;
                     if (twinkling && twinkleRgb) {
                         colorLine = twinkleRgb;
-                        opacity = (0, engine_1.getRangeValue)(twinkle.opacity);
+                        opacity = getRangeValue(twinkle.opacity);
                     }
                 }
                 if (!colorLine) {
                     const linkColor = p1LinksOptions.id !== undefined
                         ? container.particles.linksColors.get(p1LinksOptions.id)
                         : container.particles.linksColor;
-                    colorLine = (0, engine_1.getLinkColor)(p1, p2, linkColor);
+                    colorLine = getLinkColor(p1, p2, linkColor);
                 }
                 if (!colorLine) {
                     return;
                 }
-                const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance, { backgroundMask } = options;
-                (0, Utils_js_1.drawLinkLine)({
+                const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance;
+                drawLinkLine({
                     context: ctx,
                     width,
                     begin: pos1,
@@ -42,9 +39,9 @@ class LinkInstance {
                     maxDistance,
                     canvasSize: container.canvas.size,
                     links: p1LinksOptions,
-                    backgroundMask: backgroundMask,
                     colorLine,
                     opacity,
+                    hdr: container.hdr,
                 });
             });
         };
@@ -57,35 +54,35 @@ class LinkInstance {
             if (!triangleOptions.enable) {
                 return;
             }
-            const container = this._container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+            const container = this._container, 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 ?? minDistance;
-                if ((0, engine_1.getDistance)(pos1, pos2) > linksDistance ||
-                    (0, engine_1.getDistance)(pos3, pos2) > linksDistance ||
-                    (0, engine_1.getDistance)(pos3, pos1) > linksDistance) {
+                if (getDistance(pos1, pos2) > linksDistance ||
+                    getDistance(pos3, pos2) > linksDistance ||
+                    getDistance(pos3, pos1) > linksDistance) {
                     return;
                 }
-                let colorTriangle = (0, engine_1.rangeColorToRgb)(this._engine, triangleOptions.color);
+                let colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color);
                 if (!colorTriangle) {
                     const linkColor = linksOptions.id !== undefined
                         ? container.particles.linksColors.get(linksOptions.id)
                         : container.particles.linksColor;
-                    colorTriangle = (0, engine_1.getLinkColor)(p1, p2, linkColor);
+                    colorTriangle = getLinkColor(p1, p2, linkColor);
                 }
                 if (!colorTriangle) {
                     return;
                 }
-                (0, Utils_js_1.drawLinkTriangle)({
+                drawLinkTriangle({
                     context: ctx,
                     pos1,
                     pos2,
                     pos3,
-                    backgroundMask: options.backgroundMask,
                     colorTriangle,
                     opacityTriangle,
+                    hdr: container.hdr,
                 });
             });
         };
@@ -112,10 +109,10 @@ class LinkInstance {
             }
         };
         this._getLinkFrequency = (p1, p2) => {
-            return (0, Utils_js_1.setLinkFrequency)([p1, p2], this._freqs.links);
+            return setLinkFrequency([p1, p2], this._freqs.links);
         };
         this._getTriangleFrequency = (p1, p2, p3) => {
-            return (0, Utils_js_1.setLinkFrequency)([p1, p2, p3], this._freqs.triangles);
+            return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
         };
         this._container = container;
         this._engine = engine;
@@ -124,7 +121,7 @@ class LinkInstance {
             triangles: new Map(),
         };
     }
-    drawParticle(context, particle) {
+    drawParticle(_context, particle) {
         const { links, options } = particle;
         if (!links?.length) {
             return;
@@ -157,4 +154,3 @@ class LinkInstance {
         particle.links = [];
     }
 }
-exports.LinkInstance = LinkInstance;

package/cjs/Linker.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
+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 } = (0, engine_1.getDistances)(pos1, pos2);
+    const { dx, dy, distance } = getDistances(pos1, pos2);
     if (!warp || distance <= optDistance) {
         return distance;
     }
@@ -22,14 +19,14 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
     };
     return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
-class Linker extends engine_1.ParticlesInteractorBase {
+export class Linker extends ParticlesInteractorBase {
     constructor(container, engine) {
         super(container);
         this._setColor = p1 => {
             if (!p1.options.links) {
                 return;
             }
-            const container = this._linkContainer, linksOptions = p1.options.links;
+            const container = this.container, linksOptions = p1.options.links;
             let linkColor = linksOptions.id === undefined
                 ? container.particles.linksColor
                 : container.particles.linksColors.get(linksOptions.id);
@@ -37,7 +34,7 @@ class Linker extends engine_1.ParticlesInteractorBase {
                 return;
             }
             const optColor = linksOptions.color;
-            linkColor = (0, engine_1.getLinkRandomColor)(this._engine, optColor, linksOptions.blink, linksOptions.consent);
+            linkColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
             if (linksOptions.id === undefined) {
                 container.particles.linksColor = linkColor;
             }
@@ -45,14 +42,13 @@ class Linker extends engine_1.ParticlesInteractorBase {
                 container.particles.linksColors.set(linksOptions.id, linkColor);
             }
         };
-        this._linkContainer = container;
         this._engine = engine;
     }
     clear() {
     }
     init() {
-        this._linkContainer.particles.linksColor = undefined;
-        this._linkContainer.particles.linksColors = new Map();
+        this.container.particles.linksColor = undefined;
+        this.container.particles.linksColors = new Map();
     }
     interact(p1) {
         if (!p1.options.links) {
@@ -66,10 +62,10 @@ class Linker extends engine_1.ParticlesInteractorBase {
         const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp;
         let range;
         if (warp) {
-            range = new CircleWarp_js_1.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize);
+            range = new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize);
         }
         else {
-            range = new engine_1.Circle(pos1.x, pos1.y, optDistance);
+            range = new Circle(pos1.x, pos1.y, optDistance);
         }
         const query = container.particles.quadTree.query(range);
         for (const p2 of query) {
@@ -104,9 +100,7 @@ class Linker extends engine_1.ParticlesInteractorBase {
         return !!particle.options.links?.enable;
     }
     loadParticlesOptions(options, ...sources) {
-        if (!options.links) {
-            options.links = new Links_js_1.Links();
-        }
+        options.links ??= new Links();
         for (const source of sources) {
             options.links.load(source?.links);
         }
@@ -114,4 +108,3 @@ class Linker extends engine_1.ParticlesInteractorBase {
     reset() {
     }
 }
-exports.Linker = Linker;

package/cjs/LinksPlugin.js

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

package/cjs/Options/Classes/Links.js

@@ -1,26 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Links = void 0;
-const engine_1 = require("@tsparticles/engine");
-const LinksShadow_js_1 = require("./LinksShadow.js");
-const LinksTriangle_js_1 = require("./LinksTriangle.js");
-class Links {
+import { OptionsColor, isNull } from "@tsparticles/engine";
+import { LinksShadow } from "./LinksShadow.js";
+import { LinksTriangle } from "./LinksTriangle.js";
+export class Links {
     constructor() {
         this.blink = false;
-        this.color = new engine_1.OptionsColor();
+        this.color = new OptionsColor();
         this.color.value = "#fff";
         this.consent = false;
         this.distance = 100;
         this.enable = false;
         this.frequency = 1;
         this.opacity = 1;
-        this.shadow = new LinksShadow_js_1.LinksShadow();
-        this.triangles = new LinksTriangle_js_1.LinksTriangle();
+        this.shadow = new LinksShadow();
+        this.triangles = new LinksTriangle();
         this.width = 1;
         this.warp = false;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.id !== undefined) {
@@ -29,7 +26,7 @@ class Links {
         if (data.blink !== undefined) {
             this.blink = data.blink;
         }
-        this.color = engine_1.OptionsColor.create(this.color, data.color);
+        this.color = OptionsColor.create(this.color, data.color);
         if (data.consent !== undefined) {
             this.consent = data.consent;
         }
@@ -55,4 +52,3 @@ class Links {
         }
     }
 }
-exports.Links = Links;

package/cjs/Options/Classes/LinksShadow.js

@@ -1,25 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinksShadow = void 0;
-const engine_1 = require("@tsparticles/engine");
-class LinksShadow {
+import { OptionsColor, isNull } from "@tsparticles/engine";
+export class LinksShadow {
     constructor() {
         this.blur = 5;
-        this.color = new engine_1.OptionsColor();
+        this.color = new OptionsColor();
         this.color.value = "#000";
         this.enable = false;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.blur !== undefined) {
             this.blur = data.blur;
         }
-        this.color = engine_1.OptionsColor.create(this.color, data.color);
+        this.color = OptionsColor.create(this.color, data.color);
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
     }
 }
-exports.LinksShadow = LinksShadow;

package/cjs/Options/Classes/LinksTriangle.js

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinksTriangle = void 0;
-const engine_1 = require("@tsparticles/engine");
-class LinksTriangle {
+import { OptionsColor, isNull } from "@tsparticles/engine";
+export class LinksTriangle {
     constructor() {
         this.enable = false;
         this.frequency = 1;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.color !== undefined) {
-            this.color = engine_1.OptionsColor.create(this.color, data.color);
+            this.color = OptionsColor.create(this.color, data.color);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
@@ -25,4 +22,3 @@ class LinksTriangle {
         }
     }
 }
-exports.LinksTriangle = LinksTriangle;

package/cjs/Options/Interfaces/ILinks.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};