@tsparticles/interaction-particles-links 4.0.0-alpha.8 → 4.0.0-beta.1

package/212.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[212],{212(e,i,t){t.d(i,{LinkInstance:()=>s});var n=t(303);function l(e,i){let t=[...e.map(e=>e.id)].sort((e,i)=>e-i).join("_"),l=i.get(t);return void 0===l&&(l=(0,n.getRandom)(),i.set(t,l)),l}class s{_colorCache=new Map;_container;_freqs;_pluginManager;constructor(e,i){this._pluginManager=e,this._container=i,this._freqs={links:new Map,triangles:new Map}}drawParticle(e,i){let{links:t,options:l}=i;if(!t?.length||!l.links)return;let s=l.links,a=i.retina.linksWidth??0,o=i.getPosition(),r=i.options.twinkle?.links,c=s.triangles.enable,h=c?new Set(t.map(e=>e.destination.id)):null,g=e.globalAlpha,d="",p=-1,_=-1,k=!1,u=()=>{k&&(e.stroke(),k=!1)};for(let g of t){if(s.frequency<1&&this._getLinkFrequency(i,g.destination)>s.frequency)continue;let t=g.destination.getPosition();if(c&&!g.isWarped&&h&&(u(),this._drawTriangles(l,i,g,h,o,t,e)),g.opacity<=0||a<=0||!s.enable)continue;let y=g.opacity,f=g.color,b=r?.enable&&(0,n.getRandom)()<r.frequency?(0,n.rangeColorToRgb)(this._pluginManager,r.color):void 0;if(r&&b&&(f=b,y=(0,n.getRangeValue)(r.opacity)),!f){let e=void 0!==s.id?this._container.particles.linksColors.get(s.id):this._container.particles.linksColor;f=(0,n.getLinkColor)(i,g.destination,e)}if(!f)continue;let q=this._getCachedStyle(f);if((q!==d||a!==p||y!==_)&&(u(),e.strokeStyle=q,e.lineWidth=a,e.globalAlpha=y,d=q,p=a,_=y,e.beginPath(),k=!0),g.isWarped){let i=this._container.canvas.size,l=t.x-o.x,s=t.y-o.y,a=n.originPoint.x,r=n.originPoint.y;Math.abs(l)>i.width*n.half&&(a=l>0?-i.width:i.width),Math.abs(s)>i.height*n.half&&(r=s>0?-i.height:i.height),e.moveTo(o.x,o.y),e.lineTo(t.x+a,t.y+r),e.moveTo(o.x-a,o.y-r),e.lineTo(t.x,t.y)}else e.moveTo(o.x,o.y),e.lineTo(t.x,t.y)}u(),e.globalAlpha=g}init(){return this._freqs.links.clear(),this._freqs.triangles.clear(),this._colorCache.clear(),Promise.resolve()}particleCreated(e){if(e.links=[],!e.options.links)return;e.linksDistance=e.options.links.distance,e.linksWidth=e.options.links.width;let i=this._container.retina.pixelRatio;e.retina.linksDistance=e.linksDistance*i,e.retina.linksWidth=e.linksWidth*i}particleDestroyed(e){e.links=[]}_drawTriangles(e,i,t,l,s,a,o){let r=t.destination,c=e.links?.triangles;if(!c?.enable||!r.options.links?.triangles.enable)return;let h=r.links;if(h?.length)for(let g of h){if(g.isWarped||this._getLinkFrequency(r,g.destination)>r.options.links.frequency||!l.has(g.destination.id))continue;let h=g.destination;if(this._getTriangleFrequency(i,r,h)>(e.links?.triangles.frequency??0))continue;let d=c.opacity??(t.opacity+g.opacity)*n.half,p=(0,n.rangeColorToRgb)(this._pluginManager,c.color)??t.color;if(!p||d<=0)continue;let _=h.getPosition();o.save(),o.fillStyle=this._getCachedStyle(p),o.globalAlpha=d,o.beginPath(),o.moveTo(s.x,s.y),o.lineTo(a.x,a.y),o.lineTo(_.x,_.y),o.closePath(),o.fill(),o.restore()}}_getCachedStyle(e){let i=`${e.r},${e.g},${e.b}`,t=this._colorCache.get(i);return t||(t=(0,n.getStyleFromRgb)(e,this._container.hdr),this._colorCache.set(i,t)),t}_getLinkFrequency(e,i){return l([e,i],this._freqs.links)}_getTriangleFrequency(e,i,t){return l([e,i,t],this._freqs.triangles)}}}}]);

package/513.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[513],{513(n,i,t){t.r(i),t.d(i,{LinksPlugin:()=>s});class s{id="links";_pluginManager;constructor(n){this._pluginManager=n}async getPlugin(n){let{LinkInstance:i}=await t.e(212).then(t.bind(t,212));return new i(this._pluginManager,n)}loadOptions(){}needsPlugin(){return!0}}}}]);

package/866.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[866],{866(i,t,n){n.d(t,{Linker:()=>a});var s=n(303);class e extends s.Circle{canvasSize;constructor(i,t,n,s){super(i,t,n),this.canvasSize=s}contains(i){if(super.contains(i))return!0;let{width:t,height:n}=this.canvasSize,{x:s,y:e}=i;return super.contains({x:s-t,y:e})||super.contains({x:s+t,y:e})||super.contains({x:s,y:e-n})||super.contains({x:s,y:e+n})||super.contains({x:s-t,y:e-n})||super.contains({x:s+t,y:e+n})||super.contains({x:s-t,y:e+n})||super.contains({x:s+t,y:e-n})}intersects(i){if(super.intersects(i))return!0;let{width:t,height:n}=this.canvasSize,e=i.position;for(let r of[{x:-t,y:0},{x:t,y:0},{x:0,y:-n},{x:0,y:n},{x:-t,y:-n},{x:t,y:n},{x:-t,y:n},{x:t,y:-n}]){let t,n={x:e.x+r.x,y:e.y+r.y};if(t=i instanceof s.Circle?new s.Circle(n.x,n.y,i.radius):new s.Rectangle(n.x,n.y,i.size.width,i.size.height),super.intersects(t))return!0}return!1}}var r=n(56),o=n(702);class a extends o.ParticlesInteractorBase{_maxDistance;_pluginManager;constructor(i,t){super(t),this._pluginManager=i,this._maxDistance=0}get maxDistance(){return this._maxDistance}clear(){}init(){this.container.particles.linksColor=void 0,this.container.particles.linksColors=new Map}interact(i){if(!i.options.links)return;i.links=[],i.linksDistance&&i.linksDistance>this._maxDistance&&(this._maxDistance=i.linksDistance);let t=i.getPosition(),n=this.container,r=n.canvas.size;if(t.x<s.originPoint.x||t.y<s.originPoint.y||t.x>r.width||t.y>r.height)return;let o=i.options.links,a=o.opacity,l=i.retina.linksDistance??0,c=o.warp,p=c?new e(t.x,t.y,l,r):new s.Circle(t.x,t.y,l);for(let e of n.particles.grid.query(p)){let n=e.options.links;if(i===e||!n?.enable||o.id!==n.id||e.spawning||e.destroyed||!e.links||i.links.some(i=>i.destination===e)||e.links.some(t=>t.destination===i))continue;let p=e.getPosition();if(p.x<s.originPoint.x||p.y<s.originPoint.y||p.x>r.width||p.y>r.height)continue;let u=(0,s.getDistances)(t,p).distance,h=c&&n.warp?function(i,t,n){let{dx:e,dy:r}=(0,s.getDistances)(i,t),o={x:Math.abs(e),y:Math.abs(r)},a={x:Math.min(o.x,n.width-o.x),y:Math.min(o.y,n.height-o.y)};return Math.hypot(a.x,a.y)}(t,p,r):u,x=Math.min(u,h);if(x>l)continue;let k=(1-x/l)*a;this._setColor(i),i.links.push({destination:e,opacity:k,color:this._getLinkColor(i,e),isWarped:h<u})}}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){for(let n of(i.links??=new r.q,t))i.links.load(n?.links)}reset(){}_getLinkColor(i,t){let n=this.container,e=i.options.links;if(!e)return;let r=void 0!==e.id?n.particles.linksColors.get(e.id):n.particles.linksColor;return(0,s.getLinkColor)(i,t,r)}_setColor(i){if(!i.options.links)return;let t=this.container,n=i.options.links,e=void 0===n.id?t.particles.linksColor:t.particles.linksColors.get(n.id);e||(e=(0,s.getLinkRandomColor)(this._pluginManager,n.color,n.blink,n.consent),void 0===n.id?t.particles.linksColor=e:t.particles.linksColors.set(n.id,e))}}}}]);

package/README.md

@@ -27,6 +27,7 @@ Once the scripts are loaded you can set up `tsParticles` and the interaction plu
 
 ```javascript
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadParticlesLinksInteraction(tsParticles);
 
   await tsParticles.load({
@@ -56,9 +57,11 @@ Then you need to import it in the app, like this:
 
 ```javascript
 const { tsParticles } = require("@tsparticles/engine");
+const { loadInteractivityPlugin } = require("@tsparticles/plugin-interactivity");
 const { loadParticlesLinksInteraction } = require("@tsparticles/interaction-particles-links");
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadParticlesLinksInteraction(tsParticles);
 })();
 ```
@@ -67,9 +70,11 @@ or
 
 ```javascript
 import { tsParticles } from "@tsparticles/engine";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
 import { loadParticlesLinksInteraction } from "@tsparticles/interaction-particles-links";
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadParticlesLinksInteraction(tsParticles);
 })();
 ```

package/browser/CircleWarp.js

@@ -1,32 +1,48 @@
-import { Circle, Rectangle, double } from "@tsparticles/engine";
+import { Circle, Rectangle } from "@tsparticles/engine";
 export class CircleWarp extends Circle {
+    canvasSize;
     constructor(x, y, radius, canvasSize) {
         super(x, y, radius);
         this.canvasSize = canvasSize;
-        this.canvasSize = { ...canvasSize };
     }
     contains(point) {
+        if (super.contains(point))
+            return true;
         const { width, height } = this.canvasSize, { x, y } = point;
-        return (super.contains(point) ||
-            super.contains({ x: x - width, y }) ||
+        return (super.contains({ x: x - width, y }) ||
+            super.contains({ x: x + width, y }) ||
+            super.contains({ x, y: y - height }) ||
+            super.contains({ x, y: y + height }) ||
             super.contains({ x: x - width, y: y - height }) ||
-            super.contains({ x, y: y - height }));
+            super.contains({ x: x + width, y: y + height }) ||
+            super.contains({ x: x - width, y: y + height }) ||
+            super.contains({ x: x + width, y: y - height }));
     }
     intersects(range) {
-        if (super.intersects(range)) {
+        if (super.intersects(range))
             return true;
-        }
-        const rect = range, circle = range, newPos = {
-            x: range.position.x - this.canvasSize.width,
-            y: range.position.y - this.canvasSize.height,
-        };
-        if (Object.hasOwn(circle, "radius")) {
-            const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * double);
-            return super.intersects(biggerCircle);
-        }
-        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);
+        const { width, height } = this.canvasSize, pos = range.position, shifts = [
+            { x: -width, y: 0 },
+            { x: width, y: 0 },
+            { x: 0, y: -height },
+            { x: 0, y: height },
+            { x: -width, y: -height },
+            { x: width, y: height },
+            { x: -width, y: height },
+            { x: width, y: -height },
+        ];
+        for (const shift of shifts) {
+            const shiftedPos = { x: pos.x + shift.x, y: pos.y + shift.y };
+            let shiftedRange;
+            if (range instanceof Circle) {
+                shiftedRange = new Circle(shiftedPos.x, shiftedPos.y, range.radius);
+            }
+            else {
+                const rect = range;
+                shiftedRange = new Rectangle(shiftedPos.x, shiftedPos.y, rect.size.width, rect.size.height);
+            }
+            if (super.intersects(shiftedRange))
+                return true;
         }
         return false;
     }

package/browser/LinkInstance.js

@@ -1,156 +1,165 @@
-import { getDistance, getLinkColor, getRandom, getRangeValue, half, rangeColorToRgb, } from "@tsparticles/engine";
-import { drawLinkLine, drawLinkTriangle, setLinkFrequency } from "./Utils.js";
-const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1;
+import { getLinkColor as engineGetLinkColor, getRandom, getRangeValue, getStyleFromRgb, half, originPoint, rangeColorToRgb, } from "@tsparticles/engine";
+import { setLinkFrequency } from "./Utils.js";
+const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFrequency = 0;
 export class LinkInstance {
-    constructor(container, engine) {
-        this._drawLinkLine = (p1, link) => {
-            const p1LinksOptions = p1.options.links;
-            if (!p1LinksOptions?.enable) {
-                return;
+    _colorCache = new Map();
+    _container;
+    _freqs;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
+        this._container = container;
+        this._freqs = { links: new Map(), triangles: new Map() };
+    }
+    drawParticle(context, particle) {
+        const { links, options } = particle;
+        if (!links?.length || !options.links) {
+            return;
+        }
+        const linkOpts = options.links, width = particle.retina.linksWidth ?? minWidth, pos1 = particle.getPosition(), twinkle = particle.options["twinkle"]?.links, trianglesEnabled = linkOpts.triangles.enable, p1Destinations = trianglesEnabled ? new Set(links.map(l => l.destination.id)) : null, originalAlpha = context.globalAlpha;
+        let currentColorStyle = "", currentWidth = -1, currentAlpha = -1, pathOpen = false;
+        const flushLines = () => {
+            if (pathOpen) {
+                context.stroke();
+                pathOpen = false;
             }
-            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;
-                if (twinkle?.enable) {
-                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(this._engine, twinkle.color), twinkling = getRandom() < twinkleFreq;
-                    if (twinkling && twinkleRgb) {
-                        colorLine = twinkleRgb;
-                        opacity = getRangeValue(twinkle.opacity);
-                    }
-                }
-                if (!colorLine) {
-                    const linkColor = p1LinksOptions.id !== undefined
-                        ? container.particles.linksColors.get(p1LinksOptions.id)
-                        : container.particles.linksColor;
-                    colorLine = getLinkColor(p1, p2, linkColor);
-                }
-                if (!colorLine) {
-                    return;
-                }
-                const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance;
-                drawLinkLine({
-                    context: ctx,
-                    width,
-                    begin: pos1,
-                    end: pos2,
-                    engine: this._engine,
-                    maxDistance,
-                    canvasSize: container.canvas.size,
-                    links: p1LinksOptions,
-                    colorLine,
-                    opacity,
-                    hdr: container.hdr,
-                });
-            });
         };
-        this._drawLinkTriangle = (p1, link1, link2) => {
-            const linksOptions = p1.options.links;
-            if (!linksOptions?.enable) {
-                return;
+        for (const link of links) {
+            if (linkOpts.frequency < maxFrequency &&
+                this._getLinkFrequency(particle, link.destination) > linkOpts.frequency) {
+                continue;
             }
-            const triangleOptions = linksOptions.triangles;
-            if (!triangleOptions.enable) {
-                return;
+            const pos2 = link.destination.getPosition();
+            if (trianglesEnabled && !link.isWarped && p1Destinations) {
+                flushLines();
+                this._drawTriangles(options, particle, link, p1Destinations, pos1, pos2, context);
             }
-            const container = this._container, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
-            if (opacityTriangle <= minOpacity) {
-                return;
+            if (link.opacity <= minOpacity || width <= minWidth) {
+                continue;
             }
-            container.canvas.draw(ctx => {
-                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) {
-                    return;
-                }
-                let colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color);
-                if (!colorTriangle) {
-                    const linkColor = linksOptions.id !== undefined
-                        ? container.particles.linksColors.get(linksOptions.id)
-                        : container.particles.linksColor;
-                    colorTriangle = getLinkColor(p1, p2, linkColor);
-                }
-                if (!colorTriangle) {
-                    return;
-                }
-                drawLinkTriangle({
-                    context: ctx,
-                    pos1,
-                    pos2,
-                    pos3,
-                    colorTriangle,
-                    opacityTriangle,
-                    hdr: container.hdr,
-                });
-            });
-        };
-        this._drawTriangles = (options, p1, link, p1Links) => {
-            const p2 = link.destination;
-            if (!(options.links?.triangles.enable && p2.options.links?.triangles.enable)) {
-                return;
+            if (!linkOpts.enable) {
+                continue;
+            }
+            let opacity = link.opacity, colorLine = link.color;
+            const twinkleRgb = twinkle?.enable && getRandom() < twinkle.frequency
+                ? rangeColorToRgb(this._pluginManager, twinkle.color)
+                : undefined;
+            if (twinkle && twinkleRgb) {
+                colorLine = twinkleRgb;
+                opacity = getRangeValue(twinkle.opacity);
+            }
+            if (!colorLine) {
+                const linkColor = linkOpts.id !== undefined
+                    ? this._container.particles.linksColors.get(linkOpts.id)
+                    : this._container.particles.linksColor;
+                colorLine = engineGetLinkColor(particle, link.destination, linkColor);
+            }
+            if (!colorLine) {
+                continue;
             }
-            const vertices = p2.links?.filter(t => {
-                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;
+            const colorStyle = this._getCachedStyle(colorLine);
+            if (colorStyle !== currentColorStyle || width !== currentWidth || opacity !== currentAlpha) {
+                flushLines();
+                context.strokeStyle = colorStyle;
+                context.lineWidth = width;
+                context.globalAlpha = opacity;
+                currentColorStyle = colorStyle;
+                currentWidth = width;
+                currentAlpha = opacity;
+                context.beginPath();
+                pathOpen = true;
             }
-            for (const vertex of vertices) {
-                const p3 = vertex.destination, triangleFreq = this._getTriangleFrequency(p1, p2, p3);
-                if (triangleFreq > options.links.triangles.frequency) {
-                    continue;
+            if (link.isWarped) {
+                const canvasSize = this._container.canvas.size, dx = pos2.x - pos1.x, dy = pos2.y - pos1.y;
+                let sx = originPoint.x, sy = originPoint.y;
+                if (Math.abs(dx) > canvasSize.width * half) {
+                    sx = dx > minDistance ? -canvasSize.width : canvasSize.width;
                 }
-                this._drawLinkTriangle(p1, link, vertex);
+                if (Math.abs(dy) > canvasSize.height * half) {
+                    sy = dy > minDistance ? -canvasSize.height : canvasSize.height;
+                }
+                context.moveTo(pos1.x, pos1.y);
+                context.lineTo(pos2.x + sx, pos2.y + sy);
+                context.moveTo(pos1.x - sx, pos1.y - sy);
+                context.lineTo(pos2.x, pos2.y);
             }
-        };
-        this._getLinkFrequency = (p1, p2) => {
-            return setLinkFrequency([p1, p2], this._freqs.links);
-        };
-        this._getTriangleFrequency = (p1, p2, p3) => {
-            return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
-        };
-        this._container = container;
-        this._engine = engine;
-        this._freqs = {
-            links: new Map(),
-            triangles: new Map(),
-        };
-    }
-    drawParticle(_context, particle) {
-        const { links, options } = particle;
-        if (!links?.length) {
-            return;
-        }
-        const p1Links = links.filter(l => options.links &&
-            (options.links.frequency >= maxFrequency ||
-                this._getLinkFrequency(particle, l.destination) <= options.links.frequency));
-        for (const link of p1Links) {
-            this._drawTriangles(options, particle, link, p1Links);
-            if (link.opacity > minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {
-                this._drawLinkLine(particle, link);
+            else {
+                context.moveTo(pos1.x, pos1.y);
+                context.lineTo(pos2.x, pos2.y);
             }
         }
+        flushLines();
+        context.globalAlpha = originalAlpha;
     }
-    async init() {
-        this._freqs.links = new Map();
-        this._freqs.triangles = new Map();
-        await Promise.resolve();
+    init() {
+        this._freqs.links.clear();
+        this._freqs.triangles.clear();
+        this._colorCache.clear();
+        return Promise.resolve();
     }
     particleCreated(particle) {
         particle.links = [];
         if (!particle.options.links) {
             return;
         }
-        const ratio = this._container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
-        retina.linksDistance = distance * ratio;
-        retina.linksWidth = width * ratio;
+        particle.linksDistance = particle.options.links.distance;
+        particle.linksWidth = particle.options.links.width;
+        const ratio = this._container.retina.pixelRatio;
+        particle.retina.linksDistance = particle.linksDistance * ratio;
+        particle.retina.linksWidth = particle.linksWidth * ratio;
     }
     particleDestroyed(particle) {
         particle.links = [];
     }
+    _drawTriangles(options, p1, link, p1Destinations, pos1, pos2, context) {
+        const p2 = link.destination, triangleOptions = options.links?.triangles;
+        if (!triangleOptions?.enable || !p2.options.links?.triangles.enable) {
+            return;
+        }
+        const p2Links = p2.links;
+        if (!p2Links?.length) {
+            return;
+        }
+        for (const vertex of p2Links) {
+            if (vertex.isWarped ||
+                this._getLinkFrequency(p2, vertex.destination) > p2.options.links.frequency ||
+                !p1Destinations.has(vertex.destination.id)) {
+                continue;
+            }
+            const p3 = vertex.destination;
+            if (this._getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {
+                continue;
+            }
+            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * half, colorTriangle = rangeColorToRgb(this._pluginManager, triangleOptions.color) ?? link.color;
+            if (!colorTriangle || opacityTriangle <= minOpacity) {
+                continue;
+            }
+            const pos3 = p3.getPosition();
+            context.save();
+            context.fillStyle = this._getCachedStyle(colorTriangle);
+            context.globalAlpha = opacityTriangle;
+            context.beginPath();
+            context.moveTo(pos1.x, pos1.y);
+            context.lineTo(pos2.x, pos2.y);
+            context.lineTo(pos3.x, pos3.y);
+            context.closePath();
+            context.fill();
+            context.restore();
+        }
+    }
+    _getCachedStyle(rgb) {
+        const key = `${rgb.r},${rgb.g},${rgb.b}`;
+        let style = this._colorCache.get(key);
+        if (!style) {
+            style = getStyleFromRgb(rgb, this._container.hdr);
+            this._colorCache.set(key, style);
+        }
+        return style;
+    }
+    _getLinkFrequency(p1, p2) {
+        return setLinkFrequency([p1, p2], this._freqs.links);
+    }
+    _getTriangleFrequency(p1, p2, p3) {
+        return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
+    }
 }

package/browser/Linker.js

@@ -1,46 +1,25 @@
-import { Circle, getDistances, getLinkRandomColor, originPoint, } from "@tsparticles/engine";
+import { Circle, getDistances, getLinkColor, getLinkRandomColor, originPoint, } from "@tsparticles/engine";
 import { CircleWarp } from "./CircleWarp.js";
 import { Links } from "./Options/Classes/Links.js";
 import { ParticlesInteractorBase } from "@tsparticles/plugin-interactivity";
-const squarePower = 2, opacityOffset = 1, minDistance = 0;
-function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
-    const { dx, dy, distance } = getDistances(pos1, pos2);
-    if (!warp || distance <= optDistance) {
-        return distance;
-    }
-    const absDiffs = {
-        x: Math.abs(dx),
-        y: Math.abs(dy),
-    }, warpDistances = {
+const opacityOffset = 1, minDistance = 0;
+function getWarpDistance(pos1, pos2, canvasSize) {
+    const { dx, dy } = getDistances(pos1, pos2), absDiffs = { x: Math.abs(dx), y: Math.abs(dy) }, warpDistances = {
         x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
         y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y),
     };
-    return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
+    return Math.hypot(warpDistances.x, warpDistances.y);
 }
 export class Linker extends ParticlesInteractorBase {
-    constructor(container, engine) {
+    _maxDistance;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._setColor = p1 => {
-            if (!p1.options.links) {
-                return;
-            }
-            const container = this.container, linksOptions = p1.options.links;
-            let linkColor = linksOptions.id === undefined
-                ? container.particles.linksColor
-                : container.particles.linksColors.get(linksOptions.id);
-            if (linkColor) {
-                return;
-            }
-            const optColor = linksOptions.color;
-            linkColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
-            if (linksOptions.id === undefined) {
-                container.particles.linksColor = linkColor;
-            }
-            else {
-                container.particles.linksColors.set(linksOptions.id, linkColor);
-            }
-        };
-        this._engine = engine;
+        this._pluginManager = pluginManager;
+        this._maxDistance = 0;
+    }
+    get maxDistance() {
+        return this._maxDistance;
     }
     clear() {
     }
@@ -53,19 +32,14 @@ export class Linker extends ParticlesInteractorBase {
             return;
         }
         p1.links = [];
+        if (p1.linksDistance && p1.linksDistance > this._maxDistance) {
+            this._maxDistance = p1.linksDistance;
+        }
         const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
         if (pos1.x < originPoint.x || pos1.y < originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
             return;
         }
-        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp;
-        let range;
-        if (warp) {
-            range = new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize);
-        }
-        else {
-            range = new Circle(pos1.x, pos1.y, optDistance);
-        }
-        const query = container.particles.quadTree.query(range);
+        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.grid.query(range);
         for (const p2 of query) {
             const linkOpt2 = p2.options.links;
             if (p1 === p2 ||
@@ -82,7 +56,7 @@ export class Linker extends ParticlesInteractorBase {
             if (pos2.x < originPoint.x || pos2.y < originPoint.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
                 continue;
             }
-            const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
+            const distDirect = getDistances(pos1, pos2).distance, distWarp = warp && linkOpt2.warp ? getWarpDistance(pos1, pos2, canvasSize) : distDirect, distance = Math.min(distDirect, distWarp);
             if (distance > optDistance) {
                 continue;
             }
@@ -91,6 +65,8 @@ export class Linker extends ParticlesInteractorBase {
             p1.links.push({
                 destination: p2,
                 opacity: opacityLine,
+                color: this._getLinkColor(p1, p2),
+                isWarped: distWarp < distDirect,
             });
         }
     }
@@ -105,4 +81,33 @@ export class Linker extends ParticlesInteractorBase {
     }
     reset() {
     }
+    _getLinkColor(p1, p2) {
+        const container = this.container, linksOptions = p1.options.links;
+        if (!linksOptions) {
+            return;
+        }
+        const linkColor = linksOptions.id !== undefined
+            ? container.particles.linksColors.get(linksOptions.id)
+            : container.particles.linksColor;
+        return getLinkColor(p1, p2, linkColor);
+    }
+    _setColor(p1) {
+        if (!p1.options.links) {
+            return;
+        }
+        const container = this.container, linksOptions = p1.options.links;
+        let linkColor = linksOptions.id === undefined
+            ? container.particles.linksColor
+            : container.particles.linksColors.get(linksOptions.id);
+        if (linkColor) {
+            return;
+        }
+        linkColor = getLinkRandomColor(this._pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent);
+        if (linksOptions.id === undefined) {
+            container.particles.linksColor = linkColor;
+        }
+        else {
+            container.particles.linksColors.set(linksOptions.id, linkColor);
+        }
+    }
 }

package/browser/LinksPlugin.js

@@ -1,11 +1,12 @@
 export class LinksPlugin {
-    constructor(engine) {
-        this.id = "links";
-        this._engine = engine;
+    id = "links";
+    _pluginManager;
+    constructor(pluginManager) {
+        this._pluginManager = pluginManager;
     }
     async getPlugin(container) {
         const { LinkInstance } = await import("./LinkInstance.js");
-        return new LinkInstance(container, this._engine);
+        return new LinkInstance(this._pluginManager, container);
     }
     loadOptions() {
     }

package/browser/Options/Classes/Links.js

@@ -2,6 +2,18 @@ import { OptionsColor, isNull } from "@tsparticles/engine";
 import { LinksShadow } from "./LinksShadow.js";
 import { LinksTriangle } from "./LinksTriangle.js";
 export class Links {
+    blink;
+    color;
+    consent;
+    distance;
+    enable;
+    frequency;
+    id;
+    opacity;
+    shadow;
+    triangles;
+    warp;
+    width;
     constructor() {
         this.blink = false;
         this.color = new OptionsColor();

package/browser/Options/Classes/LinksShadow.js

@@ -1,5 +1,8 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LinksShadow {
+    blur;
+    color;
+    enable;
     constructor() {
         this.blur = 5;
         this.color = new OptionsColor();

package/browser/Options/Classes/LinksTriangle.js

@@ -1,5 +1,9 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LinksTriangle {
+    color;
+    enable;
+    frequency;
+    opacity;
     constructor() {
         this.enable = false;
         this.frequency = 1;