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

package/types/Interfaces.d.ts

@@ -0,0 +1,22 @@
+import type { IRangeColor, RangeValue } from "@tsparticles/engine";
+import type { LinkParticle } from "./Types.js";
+export interface ILink {
+    destination: LinkParticle;
+    opacity: number;
+}
+export interface ILinkTriangle {
+    opacity: number;
+    vertices: LinkParticle[];
+}
+export interface IParticlesFrequencies {
+    links: Map<string, number>;
+    triangles: Map<string, number>;
+}
+export interface ITwinkle {
+    lines: {
+        color: IRangeColor;
+        enable: boolean;
+        frequency: number;
+        opacity: RangeValue;
+    };
+}

package/types/LinkInstance.d.ts

@@ -1,6 +1,5 @@
-import type { IContainerPlugin } from "@tsparticles/engine";
-import type { LinkContainer } from "./LinkContainer";
-import type { LinkParticle } from "./LinkParticle";
+import { type IContainerPlugin } from "@tsparticles/engine";
+import type { LinkContainer, LinkParticle } from "./Types.js";
 export declare class LinkInstance implements IContainerPlugin {
     private readonly container;
     private readonly _freqs;
@@ -9,9 +8,9 @@ export declare class LinkInstance implements IContainerPlugin {
     init(): Promise<void>;
     particleCreated(particle: LinkParticle): void;
     particleDestroyed(particle: LinkParticle): void;
-    private drawLinkLine;
-    private drawLinkTriangle;
-    private drawTriangles;
-    private getLinkFrequency;
-    private getTriangleFrequency;
+    private readonly _drawLinkLine;
+    private readonly _drawLinkTriangle;
+    private readonly _drawTriangles;
+    private readonly _getLinkFrequency;
+    private readonly _getTriangleFrequency;
 }

package/types/Linker.d.ts

@@ -1,9 +1,5 @@
-import { ParticlesInteractorBase } from "@tsparticles/engine";
-import type { RecursivePartial } from "@tsparticles/engine";
-import type { IParticlesLinkOptions } from "./Options/Interfaces/IParticlesLinkOptions";
-import type { LinkContainer } from "./LinkContainer";
-import type { LinkParticle } from "./LinkParticle";
-import type { ParticlesLinkOptions } from "./Options/Classes/ParticlesLinkOptions";
+import { ParticlesInteractorBase, type RecursivePartial } from "@tsparticles/engine";
+import type { IParticlesLinkOptions, LinkContainer, LinkParticle, ParticlesLinkOptions } from "./Types.js";
 export declare class Linker extends ParticlesInteractorBase {
     linkContainer: LinkContainer;
     constructor(container: LinkContainer);
@@ -13,5 +9,5 @@ export declare class Linker extends ParticlesInteractorBase {
     isEnabled(particle: LinkParticle): boolean;
     loadParticlesOptions(options: ParticlesLinkOptions, ...sources: (RecursivePartial<IParticlesLinkOptions> | undefined)[]): void;
     reset(): void;
-    private setColor;
+    private readonly _setColor;
 }

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

@@ -1,8 +1,7 @@
-import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import type { ILinks } from "../Interfaces/ILinks";
-import { LinksShadow } from "./LinksShadow";
-import { LinksTriangle } from "./LinksTriangle";
-import { OptionsColor } from "@tsparticles/engine";
+import { type IOptionLoader, OptionsColor, type RecursivePartial } from "@tsparticles/engine";
+import type { ILinks } from "../Interfaces/ILinks.js";
+import { LinksShadow } from "./LinksShadow.js";
+import { LinksTriangle } from "./LinksTriangle.js";
 export declare class Links implements ILinks, IOptionLoader<ILinks> {
     blink: boolean;
     color: OptionsColor;

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

@@ -1,6 +1,5 @@
-import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import type { ILinksShadow } from "../Interfaces/ILinksShadow";
-import { OptionsColor } from "@tsparticles/engine";
+import { type IOptionLoader, OptionsColor, type RecursivePartial } from "@tsparticles/engine";
+import type { ILinksShadow } from "../Interfaces/ILinksShadow.js";
 export declare class LinksShadow implements ILinksShadow, IOptionLoader<ILinksShadow> {
     blur: number;
     color: OptionsColor;

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

@@ -1,6 +1,5 @@
-import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import type { ILinksTriangle } from "../Interfaces/ILinksTriangle";
-import { OptionsColor } from "@tsparticles/engine";
+import { type IOptionLoader, OptionsColor, type RecursivePartial } from "@tsparticles/engine";
+import type { ILinksTriangle } from "../Interfaces/ILinksTriangle.js";
 export declare class LinksTriangle implements ILinksTriangle, IOptionLoader<ILinksTriangle> {
     color?: OptionsColor;
     enable: boolean;

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

@@ -1,5 +1,5 @@
-import type { ILinksShadow } from "./ILinksShadow";
-import type { ILinksTriangle } from "./ILinksTriangle";
+import type { ILinksShadow } from "./ILinksShadow.js";
+import type { ILinksTriangle } from "./ILinksTriangle.js";
 import type { IOptionsColor } from "@tsparticles/engine";
 export interface ILinks {
     blink: boolean;

package/types/Types.d.ts

@@ -0,0 +1,47 @@
+import type { BackgroundMask, Container, ICoordinates, IDimension, IParticlesOptions, IRgb, Particle, ParticlesOptions } from "@tsparticles/engine";
+import type { ILink } from "./Interfaces.js";
+import type { ILinks } from "./Options/Interfaces/ILinks.js";
+import type { Links } from "./Options/Classes/Links.js";
+export type LinkContainer = Container & {
+    particles: {
+        linksColor?: IRgb | string;
+        linksColors: Map<string, IRgb | string | undefined>;
+    };
+};
+export type LinkParticle = Particle & {
+    links?: ILink[];
+    options: ParticlesLinkOptions;
+    retina: {
+        linksDistance?: number;
+        linksWidth?: number;
+    };
+};
+export type LinkLineDrawParams = {
+    backgroundMask: BackgroundMask;
+    begin: ICoordinates;
+    canvasSize: IDimension;
+    colorLine: IRgb;
+    context: CanvasRenderingContext2D;
+    end: ICoordinates;
+    links: Links;
+    maxDistance: number;
+    opacity: number;
+    width: number;
+};
+export type LinkTriangleDrawParams = {
+    backgroundMask: BackgroundMask;
+    colorTriangle: IRgb;
+    context: CanvasRenderingContext2D;
+    opacityTriangle: number;
+    pos1: ICoordinates;
+    pos2: ICoordinates;
+    pos3: ICoordinates;
+};
+export type IParticlesLinkOptions = IParticlesOptions & {
+    lineLinked?: ILinks;
+    line_linked?: ILinks;
+    links?: ILinks;
+};
+export type ParticlesLinkOptions = ParticlesOptions & {
+    links?: Links;
+};

package/types/Utils.d.ts

@@ -1,4 +1,5 @@
-import type { ICoordinates, IDimension, IRgb } from "@tsparticles/engine";
-import type { ILinksShadow } from "./Options/Interfaces/ILinksShadow";
-export declare function drawLinkLine(context: CanvasRenderingContext2D, width: number, begin: ICoordinates, end: ICoordinates, maxDistance: number, canvasSize: IDimension, warp: boolean, backgroundMask: boolean, composite: GlobalCompositeOperation, colorLine: IRgb, opacity: number, shadow: ILinksShadow): void;
-export declare function drawLinkTriangle(context: CanvasRenderingContext2D, pos1: ICoordinates, pos2: ICoordinates, pos3: ICoordinates, backgroundMask: boolean, composite: GlobalCompositeOperation, colorTriangle: IRgb, opacityTriangle: number): void;
+import type { LinkLineDrawParams, LinkParticle, LinkTriangleDrawParams } from "./Types.js";
+export declare function drawLinkLine(params: LinkLineDrawParams): void;
+export declare function drawLinkTriangle(params: LinkTriangleDrawParams): void;
+export declare function getLinkKey(ids: number[]): string;
+export declare function setLinkFrequency(particles: LinkParticle[], dictionary: Map<string, number>): number;

package/types/index.d.ts

@@ -1,8 +1,8 @@
 import type { Engine } from "@tsparticles/engine";
-export declare function loadParticlesLinksInteraction(engine: Engine): Promise<void>;
-export * from "./Options/Classes/Links";
-export * from "./Options/Classes/LinksShadow";
-export * from "./Options/Classes/LinksTriangle";
-export * from "./Options/Interfaces/ILinks";
-export * from "./Options/Interfaces/ILinksShadow";
-export * from "./Options/Interfaces/ILinksTriangle";
+export declare function loadParticlesLinksInteraction(engine: Engine, refresh?: boolean): Promise<void>;
+export * from "./Options/Classes/Links.js";
+export * from "./Options/Classes/LinksShadow.js";
+export * from "./Options/Classes/LinksTriangle.js";
+export * from "./Options/Interfaces/ILinks.js";
+export * from "./Options/Interfaces/ILinksShadow.js";
+export * from "./Options/Interfaces/ILinksTriangle.js";

package/types/interaction.d.ts

@@ -1,2 +1,2 @@
 import type { Engine } from "@tsparticles/engine";
-export declare function loadInteraction(engine: Engine): Promise<void>;
+export declare function loadLinksInteraction(engine: Engine, refresh?: boolean): Promise<void>;

package/types/plugin.d.ts

@@ -1,2 +1,2 @@
 import type { Engine } from "@tsparticles/engine";
-export declare function loadPlugin(engine: Engine): Promise<void>;
+export declare function loadLinksPlugin(engine: Engine, refresh?: boolean): Promise<void>;

package/umd/CircleWarp.js

@@ -15,31 +15,15 @@
         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/umd/LinkInstance.js

@@ -4,46 +4,142 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils", "@tsparticles/engine"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./Utils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     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);
                 }
             }
         }
@@ -56,102 +152,13 @@
             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;
 });