import { drawLine, drawTriangle, getDistance, getDistances, getStyleFromRgb, rangeColorToRgb, } from "tsparticles-engine"; export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) { let drawn = false; if (getDistance(begin, end) <= maxDistance) { drawLine(context, begin, end); drawn = true; } else if (warp) { let pi1; let pi2; const endNE = { x: end.x - canvasSize.width, y: end.y, }; const d1 = 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 = 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 = 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) { drawLine(context, begin, pi1); drawLine(context, end, pi2); drawn = true; } } if (!drawn) { return; } context.lineWidth = width; if (backgroundMask) { context.globalCompositeOperation = composite; } context.strokeStyle = getStyleFromRgb(colorLine, opacity); if (shadow.enable) { const shadowColor = rangeColorToRgb(shadow.color); if (shadowColor) { context.shadowBlur = shadow.blur; context.shadowColor = getStyleFromRgb(shadowColor); } } context.stroke(); } export function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) { drawTriangle(context, pos1, pos2, pos3); if (backgroundMask) { context.globalCompositeOperation = composite; } context.fillStyle = getStyleFromRgb(colorTriangle, opacityTriangle); context.fill(); }