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

package/cjs/CircleWarp.js

@@ -6,31 +6,15 @@ class CircleWarp extends engine_1.Circle {
     constructor(x, y, radius, canvasSize) {
         super(x, y, radius);
         this.canvasSize = canvasSize;
-        this.canvasSize = Object.assign({}, canvasSize);
+        this.canvasSize = { ...canvasSize };
     }
     contains(point) {
-        if (super.contains(point)) {
-            return true;
-        }
-        const posNE = {
-            x: point.x - this.canvasSize.width,
-            y: point.y,
-        };
-        if (super.contains(posNE)) {
-            return true;
-        }
-        const posSE = {
-            x: point.x - this.canvasSize.width,
-            y: point.y - this.canvasSize.height,
-        };
-        if (super.contains(posSE)) {
-            return true;
-        }
-        const posSW = {
-            x: point.x,
-            y: point.y - this.canvasSize.height,
-        };
-        return super.contains(posSW);
+        const { width, height } = this.canvasSize;
+        const { x, y } = point;
+        return (super.contains(point) ||
+            super.contains({ x: x - width, y }) ||
+            super.contains({ x: x - width, y: y - height }) ||
+            super.contains({ x, y: y - height }));
     }
     intersects(range) {
         if (super.intersects(range)) {

package/cjs/LinkInstance.js

@@ -1,158 +1,154 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkInstance = void 0;
-const Utils_1 = require("./Utils");
 const engine_1 = require("@tsparticles/engine");
-function getLinkKey(ids) {
-    ids.sort((a, b) => a - b);
-    return ids.join("_");
-}
-function setLinkFrequency(particles, dictionary) {
-    const key = getLinkKey(particles.map((t) => t.id));
-    let res = dictionary.get(key);
-    if (res === undefined) {
-        res = (0, engine_1.getRandom)();
-        dictionary.set(key, res);
-    }
-    return res;
-}
+const Utils_js_1 = require("./Utils.js");
 class LinkInstance {
     constructor(container) {
         this.container = container;
+        this._drawLinkLine = (p1, link) => {
+            const p1LinksOptions = p1.options.links;
+            if (!p1LinksOptions?.enable) {
+                return;
+            }
+            const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+            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)(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 ?? 0, maxDistance = p1.retina.linksDistance ?? 0, { backgroundMask } = options;
+                (0, Utils_js_1.drawLinkLine)({
+                    context: ctx,
+                    width,
+                    begin: pos1,
+                    end: pos2,
+                    maxDistance,
+                    canvasSize: container.canvas.size,
+                    links: p1LinksOptions,
+                    backgroundMask: backgroundMask,
+                    colorLine,
+                    opacity,
+                });
+            });
+        };
+        this._drawLinkTriangle = (p1, link1, link2) => {
+            const linksOptions = p1.options.links;
+            if (!linksOptions?.enable) {
+                return;
+            }
+            const triangleOptions = linksOptions.triangles;
+            if (!triangleOptions.enable) {
+                return;
+            }
+            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) / 2;
+            if (opacityTriangle <= 0) {
+                return;
+            }
+            container.canvas.draw((ctx) => {
+                const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = p1.retina.linksDistance ?? 0;
+                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)(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,
+                    backgroundMask: options.backgroundMask,
+                    colorTriangle,
+                    opacityTriangle,
+                });
+            });
+        };
+        this._drawTriangles = (options, p1, link, p1Links) => {
+            const p2 = link.destination;
+            if (!(options.links?.triangles.enable && p2.options.links?.triangles.enable)) {
+                return;
+            }
+            const vertices = p2.links?.filter((t) => {
+                const linkFreq = this._getLinkFrequency(p2, t.destination);
+                return (p2.options.links &&
+                    linkFreq <= p2.options.links.frequency &&
+                    p1Links.findIndex((l) => l.destination === t.destination) >= 0);
+            });
+            if (!vertices?.length) {
+                return;
+            }
+            for (const vertex of vertices) {
+                const p3 = vertex.destination, triangleFreq = this._getTriangleFrequency(p1, p2, p3);
+                if (triangleFreq > options.links.triangles.frequency) {
+                    continue;
+                }
+                this._drawLinkTriangle(p1, link, vertex);
+            }
+        };
+        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._freqs = {
             links: new Map(),
             triangles: new Map(),
         };
     }
     drawParticle(context, particle) {
-        var _a;
-        const pOptions = particle.options;
-        if (!particle.links || particle.links.length <= 0) {
+        const { links, options } = particle;
+        if (!links || links.length <= 0) {
             return;
         }
-        const p1Links = particle.links.filter((l) => pOptions.links && this.getLinkFrequency(particle, l.destination) <= pOptions.links.frequency);
+        const p1Links = links.filter((l) => options.links && this._getLinkFrequency(particle, l.destination) <= options.links.frequency);
         for (const link of p1Links) {
-            this.drawTriangles(pOptions, particle, link, p1Links);
-            if (link.opacity > 0 && ((_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : 0) > 0) {
-                this.drawLinkLine(particle, link);
+            this._drawTriangles(options, particle, link, p1Links);
+            if (link.opacity > 0 && (particle.retina.linksWidth ?? 0) > 0) {
+                this._drawLinkLine(particle, link);
             }
         }
     }
-    init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this._freqs.links = new Map();
-            this._freqs.triangles = new Map();
-        });
+    async init() {
+        this._freqs.links = new Map();
+        this._freqs.triangles = new Map();
     }
     particleCreated(particle) {
         particle.links = [];
         if (!particle.options.links) {
             return;
         }
-        const ratio = this.container.retina.pixelRatio;
-        particle.retina.linksDistance = particle.options.links.distance * ratio;
-        particle.retina.linksWidth = particle.options.links.width * ratio;
+        const ratio = this.container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
+        retina.linksDistance = distance * ratio;
+        retina.linksWidth = width * ratio;
     }
     particleDestroyed(particle) {
         particle.links = [];
     }
-    drawLinkLine(p1, link) {
-        const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
-        let opacity = link.opacity;
-        container.canvas.draw((ctx) => {
-            var _a, _b, _c;
-            if (!p1.options.links) {
-                return;
-            }
-            let colorLine;
-            const twinkle = (_a = p1.options.twinkle) === null || _a === void 0 ? void 0 : _a.lines;
-            if (twinkle === null || twinkle === void 0 ? void 0 : twinkle.enable) {
-                const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
-                if (twinkling && twinkleRgb) {
-                    colorLine = twinkleRgb;
-                    opacity = (0, engine_1.getRangeValue)(twinkle.opacity);
-                }
-            }
-            if (!colorLine) {
-                const linksOptions = p1.options.links, linkColor = (linksOptions === null || linksOptions === void 0 ? void 0 : linksOptions.id) !== undefined
-                    ? container.particles.linksColors.get(linksOptions.id)
-                    : container.particles.linksColor;
-                colorLine = (0, engine_1.getLinkColor)(p1, p2, linkColor);
-            }
-            if (!colorLine) {
-                return;
-            }
-            const width = (_b = p1.retina.linksWidth) !== null && _b !== void 0 ? _b : 0, maxDistance = (_c = p1.retina.linksDistance) !== null && _c !== void 0 ? _c : 0;
-            (0, Utils_1.drawLinkLine)(ctx, width, pos1, pos2, maxDistance, container.canvas.size, p1.options.links.warp, options.backgroundMask.enable, options.backgroundMask.composite, colorLine, opacity, p1.options.links.shadow);
-        });
-    }
-    drawLinkTriangle(p1, link1, link2) {
-        var _a;
-        if (!p1.options.links) {
-            return;
-        }
-        const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, triangleOptions = p1.options.links.triangles, opacityTriangle = (_a = triangleOptions.opacity) !== null && _a !== void 0 ? _a : (link1.opacity + link2.opacity) / 2;
-        if (opacityTriangle <= 0) {
-            return;
-        }
-        container.canvas.draw((ctx) => {
-            var _a;
-            const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition(), linksDistance = (_a = p1.retina.linksDistance) !== null && _a !== void 0 ? _a : 0;
-            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)(triangleOptions.color);
-            if (!colorTriangle) {
-                const linksOptions = p1.options.links, linkColor = (linksOptions === null || linksOptions === void 0 ? void 0 : 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_1.drawLinkTriangle)(ctx, pos1, pos2, pos3, options.backgroundMask.enable, options.backgroundMask.composite, colorTriangle, opacityTriangle);
-        });
-    }
-    drawTriangles(options, p1, link, p1Links) {
-        var _a, _b, _c;
-        const p2 = link.destination;
-        if (!(((_a = options.links) === null || _a === void 0 ? void 0 : _a.triangles.enable) && ((_b = p2.options.links) === null || _b === void 0 ? void 0 : _b.triangles.enable))) {
-            return;
-        }
-        const vertices = (_c = p2.links) === null || _c === void 0 ? void 0 : _c.filter((t) => {
-            const linkFreq = this.getLinkFrequency(p2, t.destination);
-            return (p2.options.links &&
-                linkFreq <= p2.options.links.frequency &&
-                p1Links.findIndex((l) => l.destination === t.destination) >= 0);
-        });
-        if (!(vertices === null || vertices === void 0 ? void 0 : vertices.length)) {
-            return;
-        }
-        for (const vertex of vertices) {
-            const p3 = vertex.destination, triangleFreq = this.getTriangleFrequency(p1, p2, p3);
-            if (triangleFreq > options.links.triangles.frequency) {
-                continue;
-            }
-            this.drawLinkTriangle(p1, link, vertex);
-        }
-    }
-    getLinkFrequency(p1, p2) {
-        return setLinkFrequency([p1, p2], this._freqs.links);
-    }
-    getTriangleFrequency(p1, p2, p3) {
-        return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
-    }
 }
 exports.LinkInstance = LinkInstance;

package/cjs/Linker.js

@@ -1,49 +1,46 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Linker = void 0;
 const engine_1 = require("@tsparticles/engine");
-const CircleWarp_1 = require("./CircleWarp");
-const Links_1 = require("./Options/Classes/Links");
+const CircleWarp_js_1 = require("./CircleWarp.js");
+const Links_js_1 = require("./Options/Classes/Links.js");
 function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
-    let distance = (0, engine_1.getDistance)(pos1, pos2);
+    const { dx, dy, distance } = (0, engine_1.getDistances)(pos1, pos2);
     if (!warp || distance <= optDistance) {
         return distance;
     }
-    const pos2NE = {
-        x: pos2.x - canvasSize.width,
-        y: pos2.y,
+    const 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),
     };
-    distance = (0, engine_1.getDistance)(pos1, pos2NE);
-    if (distance <= optDistance) {
-        return distance;
-    }
-    const pos2SE = {
-        x: pos2.x - canvasSize.width,
-        y: pos2.y - canvasSize.height,
-    };
-    distance = (0, engine_1.getDistance)(pos1, pos2SE);
-    if (distance <= optDistance) {
-        return distance;
-    }
-    const pos2SW = {
-        x: pos2.x,
-        y: pos2.y - canvasSize.height,
-    };
-    distance = (0, engine_1.getDistance)(pos1, pos2SW);
-    return distance;
+    return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
 }
 class Linker extends engine_1.ParticlesInteractorBase {
     constructor(container) {
         super(container);
+        this._setColor = (p1) => {
+            if (!p1.options.links) {
+                return;
+            }
+            const container = this.linkContainer, 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)(optColor, linksOptions.blink, linksOptions.consent);
+            if (linksOptions.id === undefined) {
+                container.particles.linksColor = linkColor;
+            }
+            else {
+                container.particles.linksColors.set(linksOptions.id, linkColor);
+            }
+        };
         this.linkContainer = container;
     }
     clear() {
@@ -52,83 +49,58 @@ class Linker extends engine_1.ParticlesInteractorBase {
         this.linkContainer.particles.linksColor = undefined;
         this.linkContainer.particles.linksColors = new Map();
     }
-    interact(p1) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!p1.options.links) {
-                return;
+    async interact(p1) {
+        if (!p1.options.links) {
+            return;
+        }
+        p1.links = [];
+        const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
+        if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
+            return;
+        }
+        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? 0, warp = linkOpt1.warp, range = warp
+            ? new CircleWarp_js_1.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)
+            : new engine_1.Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
+        for (const p2 of query) {
+            const linkOpt2 = p2.options.links;
+            if (p1 === p2 ||
+                !linkOpt2?.enable ||
+                linkOpt1.id !== linkOpt2.id ||
+                p2.spawning ||
+                p2.destroyed ||
+                !p2.links ||
+                p1.links.some((t) => t.destination === p2) ||
+                p2.links.some((t) => t.destination === p1)) {
+                continue;
             }
-            p1.links = [];
-            const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
-            if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
-                return;
+            const pos2 = p2.getPosition();
+            if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
+                continue;
             }
-            const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = (_a = p1.retina.linksDistance) !== null && _a !== void 0 ? _a : 0, warp = linkOpt1.warp, range = warp
-                ? new CircleWarp_1.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)
-                : new engine_1.Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
-            for (const p2 of query) {
-                const linkOpt2 = p2.options.links;
-                if (p1 === p2 ||
-                    !(linkOpt2 === null || linkOpt2 === void 0 ? void 0 : linkOpt2.enable) ||
-                    linkOpt1.id !== linkOpt2.id ||
-                    p2.spawning ||
-                    p2.destroyed ||
-                    !p2.links ||
-                    p1.links.map((t) => t.destination).indexOf(p2) !== -1 ||
-                    p2.links.map((t) => t.destination).indexOf(p1) !== -1) {
-                    continue;
-                }
-                const pos2 = p2.getPosition();
-                if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
-                    continue;
-                }
-                const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
-                if (distance > optDistance) {
-                    return;
-                }
-                const opacityLine = (1 - distance / optDistance) * optOpacity;
-                this.setColor(p1);
-                p1.links.push({
-                    destination: p2,
-                    opacity: opacityLine,
-                });
+            const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
+            if (distance > optDistance) {
+                continue;
             }
-        });
+            const opacityLine = (1 - distance / optDistance) * optOpacity;
+            this._setColor(p1);
+            p1.links.push({
+                destination: p2,
+                opacity: opacityLine,
+            });
+        }
     }
     isEnabled(particle) {
-        var _a;
-        return !!((_a = particle.options.links) === null || _a === void 0 ? void 0 : _a.enable);
+        return !!particle.options.links?.enable;
     }
     loadParticlesOptions(options, ...sources) {
-        var _a, _b;
         if (!options.links) {
-            options.links = new Links_1.Links();
+            options.links = new Links_js_1.Links();
         }
         for (const source of sources) {
-            options.links.load((_b = (_a = source === null || source === void 0 ? void 0 : source.links) !== null && _a !== void 0 ? _a : source === null || source === void 0 ? void 0 : source.lineLinked) !== null && _b !== void 0 ? _b : source === null || source === void 0 ? void 0 : source.line_linked);
+            options.links.load(source?.links ?? source?.lineLinked ?? source?.line_linked);
         }
     }
     reset() {
     }
-    setColor(p1) {
-        if (!p1.options.links) {
-            return;
-        }
-        const container = this.linkContainer, 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)(optColor, linksOptions.blink, linksOptions.consent);
-        if (linksOptions.id === undefined) {
-            container.particles.linksColor = linkColor;
-        }
-        else {
-            container.particles.linksColors.set(linksOptions.id, linkColor);
-        }
-    }
 }
 exports.Linker = Linker;

package/cjs/Options/Classes/Links.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Links = void 0;
-const LinksShadow_1 = require("./LinksShadow");
-const LinksTriangle_1 = require("./LinksTriangle");
 const engine_1 = require("@tsparticles/engine");
+const LinksShadow_js_1 = require("./LinksShadow.js");
+const LinksTriangle_js_1 = require("./LinksTriangle.js");
 class Links {
     constructor() {
         this.blink = false;
@@ -14,8 +14,8 @@ class Links {
         this.enable = false;
         this.frequency = 1;
         this.opacity = 1;
-        this.shadow = new LinksShadow_1.LinksShadow();
-        this.triangles = new LinksTriangle_1.LinksTriangle();
+        this.shadow = new LinksShadow_js_1.LinksShadow();
+        this.triangles = new LinksTriangle_js_1.LinksTriangle();
         this.width = 1;
         this.warp = false;
     }

package/cjs/Utils.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawLinkTriangle = exports.drawLinkLine = void 0;
+exports.setLinkFrequency = exports.getLinkKey = exports.drawLinkTriangle = exports.drawLinkLine = void 0;
 const engine_1 = require("@tsparticles/engine");
-function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
+function drawLinkLine(params) {
     let drawn = false;
+    const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
     if ((0, engine_1.getDistance)(begin, end) <= maxDistance) {
         (0, engine_1.drawLine)(context, begin, end);
         drawn = true;
     }
-    else if (warp) {
+    else if (links.warp) {
         let pi1;
         let pi2;
         const endNE = {
@@ -57,10 +58,11 @@ function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp,
         return;
     }
     context.lineWidth = width;
-    if (backgroundMask) {
-        context.globalCompositeOperation = composite;
+    if (backgroundMask.enable) {
+        context.globalCompositeOperation = backgroundMask.composite;
     }
     context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, opacity);
+    const { shadow } = links;
     if (shadow.enable) {
         const shadowColor = (0, engine_1.rangeColorToRgb)(shadow.color);
         if (shadowColor) {
@@ -71,12 +73,28 @@ function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp,
     context.stroke();
 }
 exports.drawLinkLine = drawLinkLine;
-function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) {
+function drawLinkTriangle(params) {
+    const { context, pos1, pos2, pos3, backgroundMask, colorTriangle, opacityTriangle } = params;
     (0, engine_1.drawTriangle)(context, pos1, pos2, pos3);
-    if (backgroundMask) {
-        context.globalCompositeOperation = composite;
+    if (backgroundMask.enable) {
+        context.globalCompositeOperation = backgroundMask.composite;
     }
     context.fillStyle = (0, engine_1.getStyleFromRgb)(colorTriangle, opacityTriangle);
     context.fill();
 }
 exports.drawLinkTriangle = drawLinkTriangle;
+function getLinkKey(ids) {
+    ids.sort((a, b) => a - b);
+    return ids.join("_");
+}
+exports.getLinkKey = getLinkKey;
+function setLinkFrequency(particles, dictionary) {
+    const key = getLinkKey(particles.map((t) => t.id));
+    let res = dictionary.get(key);
+    if (res === undefined) {
+        res = (0, engine_1.getRandom)();
+        dictionary.set(key, res);
+    }
+    return res;
+}
+exports.setLinkFrequency = setLinkFrequency;

package/cjs/index.js

@@ -13,29 +13,18 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadParticlesLinksInteraction = void 0;
-const interaction_1 = require("./interaction");
-const plugin_1 = require("./plugin");
-function loadParticlesLinksInteraction(engine) {
-    return __awaiter(this, void 0, void 0, function* () {
-        yield (0, interaction_1.loadInteraction)(engine);
-        yield (0, plugin_1.loadPlugin)(engine);
-    });
+const interaction_js_1 = require("./interaction.js");
+const plugin_js_1 = require("./plugin.js");
+async function loadParticlesLinksInteraction(engine, refresh = true) {
+    await (0, interaction_js_1.loadLinksInteraction)(engine, refresh);
+    await (0, plugin_js_1.loadLinksPlugin)(engine, refresh);
 }
 exports.loadParticlesLinksInteraction = loadParticlesLinksInteraction;
-__exportStar(require("./Options/Classes/Links"), exports);
-__exportStar(require("./Options/Classes/LinksShadow"), exports);
-__exportStar(require("./Options/Classes/LinksTriangle"), exports);
-__exportStar(require("./Options/Interfaces/ILinks"), exports);
-__exportStar(require("./Options/Interfaces/ILinksShadow"), exports);
-__exportStar(require("./Options/Interfaces/ILinksTriangle"), exports);
+__exportStar(require("./Options/Classes/Links.js"), exports);
+__exportStar(require("./Options/Classes/LinksShadow.js"), exports);
+__exportStar(require("./Options/Classes/LinksTriangle.js"), exports);
+__exportStar(require("./Options/Interfaces/ILinks.js"), exports);
+__exportStar(require("./Options/Interfaces/ILinksShadow.js"), exports);
+__exportStar(require("./Options/Interfaces/ILinksTriangle.js"), exports);