@tsparticles/interaction-particles-links 4.0.0-alpha.21 → 4.0.0-alpha.23

package/umd/Linker.js

@@ -15,15 +15,8 @@
     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 = {
+    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),
         };
@@ -50,15 +43,7 @@
             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.quadTree.query(range);
             for (const p2 of query) {
                 const linkOpt2 = p2.options.links;
                 if (p1 === p2 ||
@@ -75,7 +60,7 @@
                 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;
                 }
@@ -84,6 +69,8 @@
                 p1.links.push({
                     destination: p2,
                     opacity: opacityLine,
+                    color: this._getLinkColor(p1, p2),
+                    isWarped: distWarp < distDirect,
                 });
             }
         }
@@ -98,7 +85,17 @@
         }
         reset() {
         }
-        _setColor = p1 => {
+        _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;
             }
@@ -109,15 +106,14 @@
             if (linkColor) {
                 return;
             }
-            const optColor = linksOptions.color;
-            linkColor = (0, engine_1.getLinkRandomColor)(this._engine, optColor, linksOptions.blink, linksOptions.consent);
+            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/Utils.js

@@ -4,92 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "@tsparticles/canvas-utils"], factory);
+        define(["require", "exports", "@tsparticles/engine"], factory);
     }
 })(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");
-    const canvas_utils_1 = require("@tsparticles/canvas-utils");
-    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, canvas_utils_1.drawLine)(context, begin, end);
-            drawn = true;
-        }
-        else if (links.warp) {
-            let pi1, pi2;
-            const endNE = {
-                x: end.x - canvasSize.width,
-                y: end.y,
-            }, 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,
-                }, d2 = (0, engine_1.getDistances)(begin, endSW);
-                if (d2.distance <= maxDistance) {
-                    const yi = begin.y - (d2.dy / d2.dx) * begin.x, 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,
-                    }, d3 = (0, engine_1.getDistances)(begin, endSE);
-                    if (d3.distance <= maxDistance) {
-                        const yi = begin.y - (d3.dy / d3.dx) * begin.x, 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, canvas_utils_1.drawLine)(context, begin, pi1);
-                (0, canvas_utils_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("_");

package/umd/index.js

@@ -48,7 +48,7 @@ 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.21");
+        engine.checkVersion("4.0.0-alpha.23");
         await engine.register(async (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),
@@ -58,7 +58,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
             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);
             });
         });
     }