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

package/umd/LinkInstance.js

@@ -12,159 +12,166 @@
     exports.LinkInstance = void 0;
     const engine_1 = require("@tsparticles/engine");
     const Utils_js_1 = require("./Utils.js");
-    const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1;
+    const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFrequency = 0;
     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 = (0, engine_1.rangeColorToRgb)(this._engine, twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
-                        if (twinkling && twinkleRgb) {
-                            colorLine = twinkleRgb;
-                            opacity = (0, engine_1.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);
-                    }
-                    if (!colorLine) {
-                        return;
-                    }
-                    const width = p1.retina.linksWidth ?? minWidth, maxDistance = p1.retina.linksDistance ?? minDistance;
-                    (0, Utils_js_1.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) * engine_1.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 ((0, engine_1.getDistance)(pos1, pos2) > linksDistance ||
-                        (0, engine_1.getDistance)(pos3, pos2) > linksDistance ||
-                        (0, engine_1.getDistance)(pos3, pos1) > linksDistance) {
-                        return;
-                    }
-                    let colorTriangle = (0, engine_1.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);
-                    }
-                    if (!colorTriangle) {
-                        return;
-                    }
-                    (0, Utils_js_1.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 && (0, engine_1.getRandom)() < twinkle.frequency ? (0, engine_1.rangeColorToRgb)(this._engine, twinkle.color) : undefined;
+                if (twinkle && twinkleRgb) {
+                    colorLine = twinkleRgb;
+                    opacity = (0, engine_1.getRangeValue)(twinkle.opacity);
+                }
+                if (!colorLine) {
+                    const linkColor = linkOpts.id !== undefined
+                        ? this._container.particles.linksColors.get(linkOpts.id)
+                        : this._container.particles.linksColor;
+                    colorLine = (0, engine_1.getLinkColor)(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 = engine_1.originPoint.x, sy = engine_1.originPoint.y;
+                    if (Math.abs(dx) > canvasSize.width * engine_1.half) {
+                        sx = dx > minDistance ? -canvasSize.width : canvasSize.width;
+                    }
+                    if (Math.abs(dy) > canvasSize.height * engine_1.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 (0, Utils_js_1.setLinkFrequency)([p1, p2], this._freqs.links);
-            };
-            this._getTriangleFrequency = (p1, p2, p3) => {
-                return (0, Utils_js_1.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) * engine_1.half, colorTriangle = (0, engine_1.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 = (0, engine_1.getStyleFromRgb)(rgb, this._container.hdr);
+                this._colorCache.set(key, style);
+            }
+            return style;
+        }
+        _getLinkFrequency(p1, p2) {
+            return (0, Utils_js_1.setLinkFrequency)([p1, p2], this._freqs.links);
+        }
+        _getTriangleFrequency(p1, p2, p3) {
+            return (0, Utils_js_1.setLinkFrequency)([p1, p2, p3], this._freqs.triangles);
+        }
     }
     exports.LinkInstance = LinkInstance;
 });

package/umd/Linker.js

@@ -14,45 +14,24 @@
     const CircleWarp_js_1 = require("./CircleWarp.js");
     const Links_js_1 = require("./Options/Classes/Links.js");
     const plugin_interactivity_1 = require("@tsparticles/plugin-interactivity");
-    const squarePower = 2, opacityOffset = 1, minDistance = 0;
-    function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
-        const { dx, dy, distance } = (0, engine_1.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 } = (0, engine_1.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);
     }
     class Linker extends plugin_interactivity_1.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 = (0, engine_1.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() {
         }
@@ -65,22 +44,14 @@
                 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 < engine_1.originPoint.x ||
-                pos1.y < engine_1.originPoint.y ||
-                pos1.x > canvasSize.width ||
-                pos1.y > canvasSize.height) {
+            if (pos1.x < engine_1.originPoint.x || pos1.y < engine_1.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_js_1.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize);
-            }
-            else {
-                range = new engine_1.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_js_1.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new engine_1.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 ||
@@ -94,13 +65,10 @@
                     continue;
                 }
                 const pos2 = p2.getPosition();
-                if (pos2.x < engine_1.originPoint.x ||
-                    pos2.y < engine_1.originPoint.y ||
-                    pos2.x > canvasSize.width ||
-                    pos2.y > canvasSize.height) {
+                if (pos2.x < engine_1.originPoint.x || pos2.y < engine_1.originPoint.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
                     continue;
                 }
-                const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
+                const distDirect = (0, engine_1.getDistances)(pos1, pos2).distance, distWarp = warp && linkOpt2.warp ? getWarpDistance(pos1, pos2, canvasSize) : distDirect, distance = Math.min(distDirect, distWarp);
                 if (distance > optDistance) {
                     continue;
                 }
@@ -109,6 +77,8 @@
                 p1.links.push({
                     destination: p2,
                     opacity: opacityLine,
+                    color: this._getLinkColor(p1, p2),
+                    isWarped: distWarp < distDirect,
                 });
             }
         }
@@ -123,6 +93,35 @@
         }
         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 (0, engine_1.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 = (0, engine_1.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);
+            }
+        }
     }
     exports.Linker = Linker;
 });

package/umd/LinksPlugin.js

@@ -45,8 +45,9 @@ var __importStar = (this && this.__importStar) || (function () {
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.LinksPlugin = void 0;
     class LinksPlugin {
+        id = "links";
+        _engine;
         constructor(engine) {
-            this.id = "links";
             this._engine = engine;
         }
         async getPlugin(container) {

package/umd/Options/Classes/Links.js

@@ -14,6 +14,18 @@
     const LinksShadow_js_1 = require("./LinksShadow.js");
     const LinksTriangle_js_1 = require("./LinksTriangle.js");
     class Links {
+        blink;
+        color;
+        consent;
+        distance;
+        enable;
+        frequency;
+        id;
+        opacity;
+        shadow;
+        triangles;
+        warp;
+        width;
         constructor() {
             this.blink = false;
             this.color = new engine_1.OptionsColor();

package/umd/Options/Classes/LinksShadow.js

@@ -12,6 +12,9 @@
     exports.LinksShadow = void 0;
     const engine_1 = require("@tsparticles/engine");
     class LinksShadow {
+        blur;
+        color;
+        enable;
         constructor() {
             this.blur = 5;
             this.color = new engine_1.OptionsColor();

package/umd/Options/Classes/LinksTriangle.js

@@ -12,6 +12,10 @@
     exports.LinksTriangle = void 0;
     const engine_1 = require("@tsparticles/engine");
     class LinksTriangle {
+        color;
+        enable;
+        frequency;
+        opacity;
         constructor() {
             this.enable = false;
             this.frequency = 1;

package/umd/Utils.js

@@ -9,95 +9,11 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.drawTriangle = drawTriangle;
-    exports.drawLinkLine = drawLinkLine;
-    exports.drawLinkTriangle = drawLinkTriangle;
     exports.getLinkKey = getLinkKey;
     exports.setLinkFrequency = setLinkFrequency;
     const engine_1 = require("@tsparticles/engine");
-    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();
-    }
-    function drawLinkLine(params) {
-        let drawn = false;
-        const { begin, end, engine, maxDistance, context, canvasSize, width, colorLine, opacity, links, hdr } = params;
-        if ((0, engine_1.getDistance)(begin, end) <= maxDistance) {
-            (0, engine_1.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 = (0, engine_1.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 = (0, engine_1.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 = (0, engine_1.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) {
-                (0, engine_1.drawLine)(context, begin, pi1);
-                (0, engine_1.drawLine)(context, end, pi2);
-                drawn = true;
-            }
-        }
-        if (!drawn) {
-            return;
-        }
-        context.lineWidth = width;
-        context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, hdr, opacity);
-        const { shadow } = links;
-        if (shadow.enable) {
-            const shadowColor = (0, engine_1.rangeColorToRgb)(engine, shadow.color);
-            if (shadowColor) {
-                context.shadowBlur = shadow.blur;
-                context.shadowColor = (0, engine_1.getStyleFromRgb)(shadowColor, hdr);
-            }
-        }
-        context.stroke();
-    }
-    function drawLinkTriangle(params) {
-        const { context, hdr, pos1, pos2, pos3, colorTriangle, opacityTriangle } = params;
-        drawTriangle(context, pos1, pos2, pos3);
-        context.fillStyle = (0, engine_1.getStyleFromRgb)(colorTriangle, hdr, opacityTriangle);
-        context.fill();
-    }
     function getLinkKey(ids) {
-        ids.sort((a, b) => a - b);
-        return ids.join("_");
+        return [...ids].sort((a, b) => a - b).join("_");
     }
     function setLinkFrequency(particles, dictionary) {
         const key = getLinkKey(particles.map(t => t.id));

package/umd/index.js

@@ -48,14 +48,17 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadParticlesLinksInteraction = loadParticlesLinksInteraction;
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.0.0-alpha.5");
+        engine.checkVersion("4.0.0-beta.0");
         await engine.register(async (e) => {
-            const { loadInteractivityPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/plugin-interactivity"))) : new Promise((resolve_1, reject_1) => { require(["@tsparticles/plugin-interactivity"], resolve_1, reject_1); }).then(__importStar)), { LinksPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./LinksPlugin.js"))) : new Promise((resolve_2, reject_2) => { require(["./LinksPlugin.js"], resolve_2, reject_2); }).then(__importStar));
-            await loadInteractivityPlugin(e);
+            const [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
+                __syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/plugin-interactivity"))) : new Promise((resolve_1, reject_1) => { require(["@tsparticles/plugin-interactivity"], resolve_1, reject_1); }).then(__importStar),
+                __syncRequire ? Promise.resolve().then(() => __importStar(require("./LinksPlugin.js"))) : new Promise((resolve_2, reject_2) => { require(["./LinksPlugin.js"], resolve_2, reject_2); }).then(__importStar),
+            ]);
+            ensureInteractivityPluginLoaded(e);
             e.addPlugin(new LinksPlugin(e));
             e.addInteractor?.("particlesLinks", async (container) => {
                 const { Linker } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Linker.js"))) : new Promise((resolve_3, reject_3) => { require(["./Linker.js"], resolve_3, reject_3); }).then(__importStar));
-                return new Linker(container, engine);
+                return new Linker(container, e);
             });
         });
     }

package/161.min.js

@@ -1,2 +0,0 @@
-/*! For license information please see 161.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[161],{161(n,i,t){t.d(i,{LinksPlugin:()=>s});class s{constructor(n){this.id="links",this._engine=n}async getPlugin(n){const{LinkInstance:i}=await t.e(29).then(t.bind(t,29));return new i(n,this._engine)}loadOptions(){}needsPlugin(){return!0}}}}]);

package/161.min.js.LICENSE.txt

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

package/29.min.js

@@ -1,2 +0,0 @@
-/*! For license information please see 29.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[29],{29(i,n,t){t.d(n,{LinkInstance:()=>o});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,a=i.getPosition(),r=o.getPosition();let l=n.opacity;s.canvas.draw((n=>{let c;const d=i.options.twinkle?.lines;if(d?.enable){const i=d.frequency,n=(0,e.rangeColorToRgb)(this._engine,d.color);(0,e.getRandom)()<i&&n&&(c=n,l=(0,e.getRangeValue)(d.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 g=i.retina.linksWidth??0,h=i.retina.linksDistance??0;!function(i){let n=!1;const{begin:t,end:s,engine:o,maxDistance:a,context:r,canvasSize:l,width:c,colorLine:d,opacity:g,links:h,hdr:y}=i;if((0,e.getDistance)(t,s)<=a)(0,e.drawLine)(r,t,s),n=!0;else if(h.warp){let i,o;const c={x:s.x-l.width,y:s.y},d=(0,e.getDistances)(t,c);if(d.distance<=a){const n=t.y-d.dy/d.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},r=(0,e.getDistances)(t,n);if(r.distance<=a){const n=-(t.y-r.dy/r.dx*t.x)/(r.dy/r.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},r=(0,e.getDistances)(t,n);if(r.distance<=a){const n=t.y-r.dy/r.dx*t.x;i={x:-n/(r.dy/r.dx),y:n},o={x:i.x+l.width,y:i.y+l.height}}}}i&&o&&((0,e.drawLine)(r,t,i),(0,e.drawLine)(r,s,o),n=!0)}if(!n)return;r.lineWidth=c,r.strokeStyle=(0,e.getStyleFromRgb)(d,y,g);const{shadow:k}=h;if(k.enable){const i=(0,e.rangeColorToRgb)(o,k.color);i&&(r.shadowBlur=k.blur,r.shadowColor=(0,e.getStyleFromRgb)(i,y))}r.stroke()}({context:n,width:g,begin:a,end:r,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 a=this._container,r=n.destination,l=t.destination,c=o.opacity??(n.opacity+t.opacity)*e.half;c<=0||a.canvas.draw((n=>{const t=i.getPosition(),d=r.getPosition(),g=l.getPosition(),h=i.retina.linksDistance??0;if((0,e.getDistance)(t,d)>h||(0,e.getDistance)(g,d)>h||(0,e.getDistance)(g,t)>h)return;let y=(0,e.rangeColorToRgb)(this._engine,o.color);if(!y){const n=void 0!==s.id?a.particles.linksColors.get(s.id):a.particles.linksColor;y=(0,e.getLinkColor)(i,r,n)}y&&function(i){const{context:n,hdr:t,pos1:s,pos2:o,pos3:a,colorTriangle:r,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,a),n.fillStyle=(0,e.getStyleFromRgb)(r,t,l),n.fill()}({context:n,pos1:t,pos2:d,pos3:g,colorTriangle:y,opacityTriangle:c,hdr:a.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=[]}}}}]);

package/29.min.js.LICENSE.txt

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

package/94.min.js

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

package/94.min.js.LICENSE.txt

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

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

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