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

package/browser/Utils.js

@@ -1,87 +1,6 @@
-import { drawLine, getDistance, getDistances, getRandom, getStyleFromRgb, rangeColorToRgb, } from "@tsparticles/engine";
-export function drawTriangle(context, p1, p2, p3) {
-    context.beginPath();
-    context.moveTo(p1.x, p1.y);
-    context.lineTo(p2.x, p2.y);
-    context.lineTo(p3.x, p3.y);
-    context.closePath();
-}
-export function drawLinkLine(params) {
-    let drawn = false;
-    const { begin, end, engine, maxDistance, context, canvasSize, width, colorLine, opacity, links, hdr } = params;
-    if (getDistance(begin, end) <= maxDistance) {
-        drawLine(context, begin, end);
-        drawn = true;
-    }
-    else if (links.warp) {
-        let pi1;
-        let pi2;
-        const endNE = {
-            x: end.x - canvasSize.width,
-            y: end.y,
-        };
-        const d1 = getDistances(begin, endNE);
-        if (d1.distance <= maxDistance) {
-            const yi = begin.y - (d1.dy / d1.dx) * begin.x;
-            pi1 = { x: 0, y: yi };
-            pi2 = { x: canvasSize.width, y: yi };
-        }
-        else {
-            const endSW = {
-                x: end.x,
-                y: end.y - canvasSize.height,
-            };
-            const d2 = getDistances(begin, endSW);
-            if (d2.distance <= maxDistance) {
-                const yi = begin.y - (d2.dy / d2.dx) * begin.x;
-                const xi = -yi / (d2.dy / d2.dx);
-                pi1 = { x: xi, y: 0 };
-                pi2 = { x: xi, y: canvasSize.height };
-            }
-            else {
-                const endSE = {
-                    x: end.x - canvasSize.width,
-                    y: end.y - canvasSize.height,
-                };
-                const d3 = getDistances(begin, endSE);
-                if (d3.distance <= maxDistance) {
-                    const yi = begin.y - (d3.dy / d3.dx) * begin.x;
-                    const xi = -yi / (d3.dy / d3.dx);
-                    pi1 = { x: xi, y: yi };
-                    pi2 = { x: pi1.x + canvasSize.width, y: pi1.y + canvasSize.height };
-                }
-            }
-        }
-        if (pi1 && pi2) {
-            drawLine(context, begin, pi1);
-            drawLine(context, end, pi2);
-            drawn = true;
-        }
-    }
-    if (!drawn) {
-        return;
-    }
-    context.lineWidth = width;
-    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, hdr);
-        }
-    }
-    context.stroke();
-}
-export function drawLinkTriangle(params) {
-    const { context, hdr, pos1, pos2, pos3, colorTriangle, opacityTriangle } = params;
-    drawTriangle(context, pos1, pos2, pos3);
-    context.fillStyle = getStyleFromRgb(colorTriangle, hdr, opacityTriangle);
-    context.fill();
-}
+import { getRandom } from "@tsparticles/engine";
 export function getLinkKey(ids) {
-    ids.sort((a, b) => a - b);
-    return ids.join("_");
+    return [...ids].sort((a, b) => a - b).join("_");
 }
 export function setLinkFrequency(particles, dictionary) {
     const key = getLinkKey(particles.map(t => t.id));

package/browser/index.js

@@ -1,12 +1,15 @@
 export async function loadParticlesLinksInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity"), { LinksPlugin } = await import("./LinksPlugin.js");
-        await loadInteractivityPlugin(e);
+        const [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
+            import("@tsparticles/plugin-interactivity"),
+            import("./LinksPlugin.js"),
+        ]);
+        ensureInteractivityPluginLoaded(e);
         e.addPlugin(new LinksPlugin(e));
         e.addInteractor?.("particlesLinks", async (container) => {
             const { Linker } = await import("./Linker.js");
-            return new Linker(container, engine);
+            return new Linker(container, e);
         });
     });
 }

package/cjs/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/cjs/LinkInstance.js

@@ -1,156 +1,163 @@
-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 {
+    _colorCache = new Map();
+    _container;
+    _engine;
+    _freqs;
     constructor(container, engine) {
-        this._drawLinkLine = (p1, link) => {
-            const p1LinksOptions = p1.options.links;
-            if (!p1LinksOptions?.enable) {
-                return;
+        this._container = container;
+        this._engine = engine;
+        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._engine, 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);
             }
-            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;
+            if (!colorLine) {
+                continue;
             }
-            for (const vertex of vertices) {
-                const p3 = vertex.destination, triangleFreq = this._getTriangleFrequency(p1, p2, p3);
-                if (triangleFreq > options.links.triangles.frequency) {
-                    continue;
+            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;
+            }
+            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;
+                }
+                if (Math.abs(dy) > canvasSize.height * half) {
+                    sy = dy > minDistance ? -canvasSize.height : canvasSize.height;
                 }
-                this._drawLinkTriangle(p1, link, vertex);
+                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._engine, 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/cjs/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 {
+    _engine;
+    _maxDistance;
     constructor(container, engine) {
         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._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._engine, linksOptions.color, linksOptions.blink, linksOptions.consent);
+        if (linksOptions.id === undefined) {
+            container.particles.linksColor = linkColor;
+        }
+        else {
+            container.particles.linksColors.set(linksOptions.id, linkColor);
+        }
+    }
 }

package/cjs/LinksPlugin.js

@@ -1,6 +1,7 @@
 export class LinksPlugin {
+    id = "links";
+    _engine;
     constructor(engine) {
-        this.id = "links";
         this._engine = engine;
     }
     async getPlugin(container) {

package/cjs/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/cjs/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/cjs/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;