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

package/umd/Linker.js

@@ -4,46 +4,52 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./CircleWarp", "./Options/Classes/Links"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./CircleWarp.js", "./Options/Classes/Links.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     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() {
@@ -53,7 +59,6 @@
             this.linkContainer.particles.linksColors = new Map();
         }
         async interact(p1) {
-            var _a;
             if (!p1.options.links) {
                 return;
             }
@@ -62,19 +67,19 @@
             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 = (_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)
+            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 === null || linkOpt2 === void 0 ? void 0 : linkOpt2.enable) ||
+                    !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) {
+                    p1.links.some((t) => t.destination === p2) ||
+                    p2.links.some((t) => t.destination === p1)) {
                     continue;
                 }
                 const pos2 = p2.getPosition();
@@ -83,10 +88,10 @@
                 }
                 const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
                 if (distance > optDistance) {
-                    return;
+                    continue;
                 }
                 const opacityLine = (1 - distance / optDistance) * optOpacity;
-                this.setColor(p1);
+                this._setColor(p1);
                 p1.links.push({
                     destination: p2,
                     opacity: opacityLine,
@@ -94,40 +99,18 @@
             }
         }
         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/umd/Options/Classes/Links.js

@@ -4,15 +4,15 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./LinksShadow", "./LinksTriangle", "@tsparticles/engine"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./LinksShadow.js", "./LinksTriangle.js"], factory);
     }
 })(function (require, exports) {
     "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;
@@ -23,8 +23,8 @@
             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/umd/Utils.js

@@ -9,15 +9,16 @@
 })(function (require, exports) {
     "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 = {
@@ -66,10 +67,11 @@
             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) {
@@ -80,13 +82,29 @@
         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/umd/index.js

@@ -18,23 +18,23 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./interaction", "./plugin", "./Options/Classes/Links", "./Options/Classes/LinksShadow", "./Options/Classes/LinksTriangle", "./Options/Interfaces/ILinks", "./Options/Interfaces/ILinksShadow", "./Options/Interfaces/ILinksTriangle"], factory);
+        define(["require", "exports", "./interaction.js", "./plugin.js", "./Options/Classes/Links.js", "./Options/Classes/LinksShadow.js", "./Options/Classes/LinksTriangle.js", "./Options/Interfaces/ILinks.js", "./Options/Interfaces/ILinksShadow.js", "./Options/Interfaces/ILinksTriangle.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadParticlesLinksInteraction = void 0;
-    const interaction_1 = require("./interaction");
-    const plugin_1 = require("./plugin");
-    async function loadParticlesLinksInteraction(engine) {
-        await (0, interaction_1.loadInteraction)(engine);
-        await (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);
 });

package/umd/interaction.js

@@ -4,15 +4,15 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Linker"], factory);
+        define(["require", "exports", "./Linker.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.loadInteraction = void 0;
-    const Linker_1 = require("./Linker");
-    async function loadInteraction(engine) {
-        await engine.addInteractor("particlesLinks", (container) => new Linker_1.Linker(container));
+    exports.loadLinksInteraction = void 0;
+    const Linker_js_1 = require("./Linker.js");
+    async function loadLinksInteraction(engine, refresh = true) {
+        await engine.addInteractor("particlesLinks", (container) => new Linker_js_1.Linker(container), refresh);
     }
-    exports.loadInteraction = loadInteraction;
+    exports.loadLinksInteraction = loadLinksInteraction;
 });

package/umd/plugin.js

@@ -4,19 +4,19 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./LinkInstance"], factory);
+        define(["require", "exports", "./LinkInstance.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.loadPlugin = void 0;
-    const LinkInstance_1 = require("./LinkInstance");
+    exports.loadLinksPlugin = void 0;
+    const LinkInstance_js_1 = require("./LinkInstance.js");
     class LinksPlugin {
         constructor() {
             this.id = "links";
         }
         getPlugin(container) {
-            return new LinkInstance_1.LinkInstance(container);
+            return new LinkInstance_js_1.LinkInstance(container);
         }
         loadOptions() {
         }
@@ -24,9 +24,9 @@
             return true;
         }
     }
-    async function loadPlugin(engine) {
+    async function loadLinksPlugin(engine, refresh = true) {
         const plugin = new LinksPlugin();
-        await engine.addPlugin(plugin);
+        await engine.addPlugin(plugin, refresh);
     }
-    exports.loadPlugin = loadPlugin;
+    exports.loadLinksPlugin = loadLinksPlugin;
 });

package/browser/Options/Interfaces/IParticlesLinkOptions.js

@@ -1 +0,0 @@
-export {};

package/cjs/LinkParticle.js

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

package/cjs/Options/Classes/ParticlesLinkOptions.js

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

package/cjs/Options/Interfaces/IParticlesLinkOptions.js

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

package/esm/ILink.js

@@ -1 +0,0 @@
-export {};

package/esm/LinkContainer.js

@@ -1 +0,0 @@
-export {};

package/esm/LinkParticle.js

@@ -1 +0,0 @@
-export {};

package/esm/Options/Classes/ParticlesLinkOptions.js

@@ -1 +0,0 @@
-export {};

package/esm/Options/Interfaces/IParticlesLinkOptions.js

@@ -1 +0,0 @@
-export {};

package/types/ILink.d.ts

@@ -1,9 +0,0 @@
-import type { LinkParticle } from "./LinkParticle";
-export interface ILink {
-    destination: LinkParticle;
-    opacity: number;
-}
-export interface ILinkTriangle {
-    opacity: number;
-    vertices: LinkParticle[];
-}

package/types/LinkContainer.d.ts

@@ -1,7 +0,0 @@
-import type { Container, IRgb } from "@tsparticles/engine";
-export type LinkContainer = Container & {
-    particles: {
-        linksColor?: IRgb | string;
-        linksColors: Map<string, IRgb | string | undefined>;
-    };
-};

package/types/LinkParticle.d.ts

@@ -1,11 +0,0 @@
-import type { ILink } from "./ILink";
-import type { Particle } from "@tsparticles/engine";
-import type { ParticlesLinkOptions } from "./Options/Classes/ParticlesLinkOptions";
-export type LinkParticle = Particle & {
-    links?: ILink[];
-    options: ParticlesLinkOptions;
-    retina: {
-        linksDistance?: number;
-        linksWidth?: number;
-    };
-};

package/types/Options/Classes/ParticlesLinkOptions.d.ts

@@ -1,5 +0,0 @@
-import type { Links } from "./Links";
-import type { ParticlesOptions } from "@tsparticles/engine";
-export type ParticlesLinkOptions = ParticlesOptions & {
-    links?: Links;
-};

package/types/Options/Interfaces/IParticlesLinkOptions.d.ts

@@ -1,7 +0,0 @@
-import type { ILinks } from "./ILinks";
-import type { IParticlesOptions } from "@tsparticles/engine";
-export type IParticlesLinkOptions = IParticlesOptions & {
-    lineLinked?: ILinks;
-    line_linked?: ILinks;
-    links?: ILinks;
-};

package/umd/LinkParticle.js

@@ -1,12 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});

package/umd/Options/Classes/ParticlesLinkOptions.js

@@ -1,12 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});

package/umd/Options/Interfaces/IParticlesLinkOptions.js

@@ -1,12 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});